update implied volatility component

src/lib/components/ImpliedVolatility.svelte

@@ -5,23 +5,19 @@
     import { formatDateRange } from "$lib/utils";
     import Lazy from 'svelte-lazy';
 
-
     export let data;
   
     let isLoaded = false;
-  
+    let displayIV = 'iv60';
+
     let rawData = [];
     let optionsData;
-    let avgFee;
     let lowestIV;
     let highestIV;
     let lowestRV;
     let highestRV;
     let ivRank;
-
-    let totalAvailableShares;
   
-
 function findLowestAndhighestIV(data, lastDateStr) {
     // Convert lastDateStr to Date object
     const lastDate = new Date(lastDateStr);
@@ -49,27 +45,16 @@ function findLowestAndhighestIV(data, lastDateStr) {
 }
 
   
-  function normalizer(value) {
+function changeStatement(event)
-  if (Math?.abs(value) >= 1e18) {
+{
-    return { unit: 'Q', denominator: 1e18 };
+    displayIV = event.target.value;
-  } else if (Math?.abs(value) >= 1e12) {
+    optionsData = getPlotOptions()
-    return { unit: 'T', denominator: 1e12 };
+}
-  } else if (Math?.abs(value) >= 1e9) {
-    return { unit: 'B', denominator: 1e9 };
-  } else if (Math?.abs(value) >= 1e6) {
-    return { unit: 'M', denominator: 1e6 };
-  } else if (Math?.abs(value) >= 1e5) {
-    return { unit: 'K', denominator: 1e5 };
-  } else {
-    return { unit: '', denominator: 1 };
-  }
-  }
-  
   
   function getPlotOptions() {
     let dates = [];
     let priceList = [];
-    let iv60List = [];
+    let ivList = [];
     let realizedVolatility = [];
 
     // Iterate over the data and extract required information
@@ -77,7 +62,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
   
     dates?.push(item?.date);
     priceList?.push(item?.stockpx);
-    iv60List?.push(item?.iv60)
+    ivList?.push(item[displayIV])
     realizedVolatility?.push(item['60dorhv'])
 
     });
@@ -86,16 +71,10 @@ function findLowestAndhighestIV(data, lastDateStr) {
     findLowestAndhighestIV(rawData, rawData?.slice(-1)?.at(0)?.date)
 
    // Calculate IV Rank
-    const lowestIV = Math.min(...iv60List); // Find the lowest IV in the past
+    const lowestIV = Math.min(...ivList); // Find the lowest IV in the past
-    const highestIV = Math.max(...iv60List); // Find the highest IV in the past
+    const highestIV = Math.max(...ivList); // Find the highest IV in the past
-    ivRank = ((iv60List?.slice(-1) - lowestIV) / (highestIV - lowestIV) * 100).toFixed(2); // Compute IV Rank
+    ivRank = ((ivList?.slice(-1) - lowestIV) / (highestIV - lowestIV) * 100).toFixed(2); // Compute IV Rank
 
-    // Compute the average of item?.traded
-    const totalNumber = iv60List?.reduce((acc, item) => acc + item, 0);
-    avgFee = (totalNumber / iv60List?.length)?.toFixed(1);
-    totalAvailableShares = priceList?.reduce((accumulator, sum) => {
-        return accumulator + sum;
-    }, 0);
 
   
     const option = {
@@ -104,7 +83,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
         trigger: 'axis',
         hideDelay: 100, // Set the delay in milliseconds
     },
-    animation: $screenWidth < 640 ? false: true,
+    animation: false,
     grid: {
         left: '0%',
         right: '0%',
@@ -166,7 +145,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
         },
         {
             name: 'IV',
-            data: iv60List,
+            data: ivList,
             type: 'line',
             areaStyle: {opacity: 0.3},
             stack: 'ImpliedVolatility',
@@ -231,6 +210,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
   $: {
   if($assetType === 'stock' ? $stockTicker : $etfTicker && typeof window !== 'undefined') {
     isLoaded=false;
+    displayIV = 'iv60';
     const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker
     const asyncFunctions = [
       getImpliedVolatility(ticker)
@@ -273,12 +253,27 @@ function findLowestAndhighestIV(data, lastDateStr) {
   
         {#if rawData?.length !== 0}
   
-        <div class="w-full flex flex-col items-start">
+        <div class="w-full flex flex-col items-start mb-2">
             <div class="text-white text-[1rem] mt-2 mb-2 w-full">
                 Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of <span class="font-semibold">{ivRank}%</span>, with the current implied volatility standing at <span class="font-semibold">{rawData?.slice(-1)?.at(0)?.iv60}%</span>.
             </div>
         </div>
+
+        <select class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeStatement}>
+            <option disabled>Choose IV Period</option>
+            <option selected value="iv60">
+              60 Day IV
+            </option>
+            <option value="iv90">
+              90 Day IV
+            </option>
+            <option value="252dclshv">
+              1 Year historical volatility
+            </option>
+        </select>
   
+
+
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
           

src/lib/components/shadcn/Table/table.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTableAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils
 
 	type $$Props = HTMLTableAttributes;
 

src/lib/components/shadcn/accordion/accordion-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = AccordionPrimitive.ItemProps;
 

src/lib/components/shadcn/accordion/accordion-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
 	import ChevronDown from "lucide-svelte/icons/chevron-down";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = AccordionPrimitive.TriggerProps;
 	type $$Events = AccordionPrimitive.TriggerEvents;

src/lib/components/shadcn/button/button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button as ButtonPrimitive } from "bits-ui";
 	import { type Events, type Props, buttonVariants } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = Props;
 	type $$Events = Events;

src/lib/components/shadcn/card/card-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/shadcn/card/card-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 

src/lib/components/shadcn/card/card-footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/shadcn/card/card-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/shadcn/card/card-title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { HeadingLevel } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;

src/lib/components/shadcn/card/card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/shadcn/command/command-empty.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.EmptyProps;
 	let className: string | undefined | null = undefined;

src/lib/components/shadcn/command/command-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 	type $$Props = CommandPrimitive.GroupProps;
 
 	let className: string | undefined | null = undefined;

src/lib/components/shadcn/command/command-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
 	import Search from "lucide-svelte/icons/search";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.InputProps;
 

src/lib/components/shadcn/command/command-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.ItemProps;
 

src/lib/components/shadcn/command/command-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.ListProps;
 	let className: string | undefined | null = undefined;

src/lib/components/shadcn/command/command-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.SeparatorProps;
 	let className: string | undefined | null = undefined;

src/lib/components/shadcn/command/command-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 

src/lib/components/shadcn/command/command.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.CommandProps;
 

src/lib/components/shadcn/dialog/dialog-content.svelte

@@ -2,7 +2,7 @@
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import X from "lucide-svelte/icons/x";
 	import * as Dialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.ContentProps;
 

src/lib/components/shadcn/dialog/dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.DescriptionProps;
 

src/lib/components/shadcn/dialog/dialog-footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/shadcn/dialog/dialog-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/shadcn/dialog/dialog-overlay.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import { fade } from "svelte/transition";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.OverlayProps;
 

src/lib/components/shadcn/dialog/dialog-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.TitleProps;
 

src/lib/components/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;

src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.ContentProps;
 	type $$Events = DropdownMenuPrimitive.ContentEvents;

src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;

src/lib/components/shadcn/dropdown-menu/dropdown-menu-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.LabelProps & {
 		inset?: boolean;

src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import Circle from "lucide-svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;

src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.SeparatorProps;
 

src/lib/components/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 

src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 	type $$Events = DropdownMenuPrimitive.SubContentEvents;

src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;

src/lib/components/shadcn/input/input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from "svelte/elements";
 	import type { InputEvents } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLInputAttributes;
 	type $$Events = InputEvents;

src/lib/components/shadcn/progress/progress.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Progress as ProgressPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = ProgressPrimitive.Props;
 

src/lib/components/shadcn/select/index.ts

@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+};

src/lib/components/shadcn/select/select-content.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50,
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-[#09090B] text-white relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-800 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>

src/lib/components/shadcn/select/select-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"data-[highlighted]:bg-[#27272A] data-[highlighted]:text-white relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>

src/lib/components/shadcn/select/select-label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>

src/lib/components/shadcn/select/select-separator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />

src/lib/components/shadcn/select/select-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"border-input bg-[#09090B] ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-white flex h-10 w-full items-center justify-between rounded-md border border-gray-800 px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>

src/lib/components/shadcn/table/table-body.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 

src/lib/components/shadcn/table/table-caption.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 

src/lib/components/shadcn/table/table-cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTdAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLTdAttributes;
 

src/lib/components/shadcn/table/table-footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 

src/lib/components/shadcn/table/table-head.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLThAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLThAttributes;
 

src/lib/components/shadcn/table/table-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 

src/lib/components/shadcn/table/table-row.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
 		"data-state"?: unknown;

src/lib/components/shadcn/tooltip/tooltip-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = TooltipPrimitive.ContentProps;
 

src/routes/dark-pool-flow/+page.svelte

@@ -2,7 +2,7 @@
   import { numberOfUnreadNotification, screenWidth, isOpen } from '$lib/store';
   import { onMount, onDestroy } from 'svelte';
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
-  import { abbreviateNumber } from '$lib/utils.js';
+  import { abbreviateNumber } from '$lib/utils';
   import { goto } from '$app/navigation';
   
     export let data;