@turtleclub/ui 0.0.6 → 0.1.0

package/dist/index.js

@@ -1,25 +1,25 @@
-import { clsx as q } from "clsx";
-import { twMerge as J } from "tailwind-merge";
-import { jsxs as n, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { clsx as X } from "clsx";
+import { twMerge as q } from "tailwind-merge";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import * as x from "react";
-import { useEffect as Q } from "react";
+import { useEffect as J, useState as V } from "react";
 import { cva as b } from "class-variance-authority";
-import * as U from "@radix-ui/react-label";
-import * as L from "@radix-ui/react-scroll-area";
+import * as Q from "@radix-ui/react-label";
+import * as S from "@radix-ui/react-scroll-area";
 import * as v from "@radix-ui/react-select";
-import { ChevronDownIcon as _, ChevronUpIcon as ee, XIcon as te, CheckIcon as re, TurtleIcon as ae, ChevronsRightIcon as ne } from "lucide-react";
-import * as oe from "@radix-ui/react-separator";
-import { useTheme as se } from "next-themes";
-import { Toaster as ie } from "sonner";
-import * as B from "@radix-ui/react-switch";
-import * as A from "@radix-ui/react-toggle-group";
-import * as le from "@radix-ui/react-toggle";
+import { ChevronDownIcon as _, ChevronUpIcon as U, XIcon as ee, CheckIcon as te, TurtleIcon as re, ChevronDown as ae, ChevronsRight as ne, Edit3 as oe } from "lucide-react";
+import * as se from "@radix-ui/react-separator";
+import { useTheme as ie } from "next-themes";
+import { Toaster as le } from "sonner";
+import * as R from "@radix-ui/react-switch";
+import * as $ from "@radix-ui/react-toggle-group";
+import * as de from "@radix-ui/react-toggle";
 import * as k from "@radix-ui/react-tooltip";
-import { Slot as de } from "@radix-ui/react-slot";
-function s(...r) {
-  return J(q(r));
+import { Slot as ce } from "@radix-ui/react-slot";
+function i(...t) {
+  return q(X(t));
 }
-const V = b(
+const D = b(
   "flex w-full bg-transparent text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground transition-colors outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -49,17 +49,17 @@ const V = b(
       cursor: "primary"
     }
   }
-), D = x.forwardRef(
-  ({ className: r, variant: t, size: a, cursor: o, type: l, prompt: c, ...i }, d) => c ? /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ e("span", { className: "text-primary text-sm font-medium shrink-0", children: c }),
+), A = x.forwardRef(
+  ({ className: t, variant: r, size: a, cursor: n, type: l, prompt: d, ...s }, c) => d ? /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e("span", { className: "text-primary text-sm font-medium shrink-0", children: d }),
     /* @__PURE__ */ e(
       "input",
       {
         type: l,
         "data-slot": "input",
-        className: s(V({ variant: t, size: a, cursor: o, className: r })),
-        ref: d,
-        ...i
+        className: i(D({ variant: r, size: a, cursor: n, className: t })),
+        ref: c,
+        ...s
       }
     )
   ] }) : /* @__PURE__ */ e(
@@ -67,74 +67,74 @@ const V = b(
     {
       type: l,
       "data-slot": "input",
-      className: s(V({ variant: t, size: a, cursor: o, className: r })),
-      ref: d,
-      ...i
+      className: i(D({ variant: r, size: a, cursor: n, className: t })),
+      ref: c,
+      ...s
     }
   )
 );
-D.displayName = "Input";
-function Me({
-  className: r,
-  ...t
+A.displayName = "Input";
+function Ke({
+  className: t,
+  ...r
 }) {
   return /* @__PURE__ */ e(
-    U.Root,
+    Q.Root,
     {
       "data-slot": "label",
-      className: s(
+      className: i(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        r
+        t
       ),
-      ...t
+      ...r
     }
   );
 }
-function ce({
-  className: r,
-  children: t,
+function ue({
+  className: t,
+  children: r,
   ...a
 }) {
-  return /* @__PURE__ */ n(
-    L.Root,
+  return /* @__PURE__ */ o(
+    S.Root,
     {
       "data-slot": "scroll-area",
-      className: s("relative", r),
+      className: i("relative", t),
       ...a,
       children: [
         /* @__PURE__ */ e(
-          L.Viewport,
+          S.Viewport,
           {
             "data-slot": "scroll-area-viewport",
             className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children: t
+            children: r
           }
         ),
-        /* @__PURE__ */ e($, {}),
-        /* @__PURE__ */ e(L.Corner, {})
+        /* @__PURE__ */ e(me, {}),
+        /* @__PURE__ */ e(S.Corner, {})
       ]
     }
   );
 }
-function $({
-  className: r,
-  orientation: t = "vertical",
+function me({
+  className: t,
+  orientation: r = "vertical",
   ...a
 }) {
   return /* @__PURE__ */ e(
-    L.ScrollAreaScrollbar,
+    S.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
-      orientation: t,
-      className: s(
+      orientation: r,
+      className: i(
         "flex touch-none p-px transition-colors select-none",
-        t === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        t === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        r
+        r === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        r === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        t
       ),
       ...a,
       children: /* @__PURE__ */ e(
-        L.ScrollAreaThumb,
+        S.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
           className: "bg-border relative flex-1 rounded-full"
@@ -143,35 +143,35 @@ function $({
     }
   );
 }
-function me({ ...r }) {
-  return /* @__PURE__ */ e(v.Root, { "data-slot": "select", ...r });
+function fe({ ...t }) {
+  return /* @__PURE__ */ e(v.Root, { "data-slot": "select", ...t });
 }
-function Ye({ ...r }) {
-  return /* @__PURE__ */ e(v.Group, { "data-slot": "select-group", ...r });
+function Ye({ ...t }) {
+  return /* @__PURE__ */ e(v.Group, { "data-slot": "select-group", ...t });
 }
-function Ze({ ...r }) {
-  return /* @__PURE__ */ e(v.Value, { "data-slot": "select-value", ...r });
+function Ze({ ...t }) {
+  return /* @__PURE__ */ e(v.Value, { "data-slot": "select-value", ...t });
 }
-function ue({
-  className: r,
-  size: t = "default",
+function pe({
+  className: t,
+  size: r = "default",
   children: a,
-  ...o
+  ...n
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ o(
     v.Trigger,
     {
       "data-slot": "select-trigger",
-      "data-size": t,
-      className: s(
+      "data-size": r,
+      className: i(
         // Turtle Design System - transparent trigger with wise white text
         "flex w-fit items-center justify-between gap-2 bg-transparent px-3 py-2 text-sm text-foreground whitespace-nowrap transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 border-none focus:ring-0",
         "data-[placeholder]:text-muted-foreground",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground",
         "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
-        r
+        t
       ),
-      ...o,
+      ...n,
       children: [
         a,
         /* @__PURE__ */ e(v.Icon, { asChild: !0, children: /* @__PURE__ */ e(_, { className: "size-4 opacity-50" }) })
@@ -179,175 +179,175 @@ function ue({
     }
   );
 }
-function fe({
-  className: r,
-  children: t,
+function xe({
+  className: t,
+  children: r,
   position: a = "popper",
-  ...o
+  ...n
 }) {
-  return /* @__PURE__ */ e(v.Portal, { children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(v.Portal, { children: /* @__PURE__ */ o(
     v.Content,
     {
       "data-slot": "select-content",
-      className: s(
+      className: i(
         // Turtle Design System - ninja black background for content
         "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md",
         a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        r
+        t
       ),
       position: a,
-      ...o,
+      ...n,
       children: [
-        /* @__PURE__ */ e(xe, {}),
+        /* @__PURE__ */ e(ge, {}),
         /* @__PURE__ */ e(
           v.Viewport,
           {
-            className: s(
+            className: i(
               "p-1",
               a === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
             ),
-            children: t
+            children: r
           }
         ),
-        /* @__PURE__ */ e(he, {})
+        /* @__PURE__ */ e(ve, {})
       ]
     }
   ) });
 }
-function Xe({ className: r, ...t }) {
+function Xe({ className: t, ...r }) {
   return /* @__PURE__ */ e(
     v.Label,
     {
       "data-slot": "select-label",
-      className: s("text-muted-foreground px-2 py-1.5 text-xs", r),
-      ...t
+      className: i("text-muted-foreground px-2 py-1.5 text-xs", t),
+      ...r
     }
   );
 }
-function pe({
-  className: r,
-  children: t,
+function he({
+  className: t,
+  children: r,
   ...a
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ o(
     v.Item,
     {
       "data-slot": "select-item",
-      className: s(
+      className: i(
         // Turtle Design System - items with wise white alpha (2%) background and ninja black text
         "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm text-foreground outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "bg-muted hover:bg-muted/80 focus:bg-muted/80",
         // wise white alpha (2%) background
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        r
+        t
       ),
       ...a,
       children: [
-        /* @__PURE__ */ n("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: [
+        /* @__PURE__ */ o("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: [
           /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-muted-foreground/30 transition-colors" }),
           /* @__PURE__ */ e(v.ItemIndicator, { className: "absolute", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-primary" }) })
         ] }),
-        /* @__PURE__ */ e(v.ItemText, { children: t })
+        /* @__PURE__ */ e(v.ItemText, { children: r })
       ]
     }
   );
 }
 function qe({
-  className: r,
-  ...t
+  className: t,
+  ...r
 }) {
   return /* @__PURE__ */ e(
     v.Separator,
     {
       "data-slot": "select-separator",
-      className: s("bg-border pointer-events-none -mx-1 my-1 h-px", r),
-      ...t
+      className: i("bg-border pointer-events-none -mx-1 my-1 h-px", t),
+      ...r
     }
   );
 }
-function xe({
-  className: r,
-  ...t
+function ge({
+  className: t,
+  ...r
 }) {
   return /* @__PURE__ */ e(
     v.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: s("flex cursor-default items-center justify-center py-1", r),
-      ...t,
-      children: /* @__PURE__ */ e(ee, { className: "size-4" })
+      className: i("flex cursor-default items-center justify-center py-1", t),
+      ...r,
+      children: /* @__PURE__ */ e(U, { className: "size-4" })
     }
   );
 }
-function he({
-  className: r,
-  ...t
+function ve({
+  className: t,
+  ...r
 }) {
   return /* @__PURE__ */ e(
     v.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: s("flex cursor-default items-center justify-center py-1", r),
-      ...t,
+      className: i("flex cursor-default items-center justify-center py-1", t),
+      ...r,
       children: /* @__PURE__ */ e(_, { className: "size-4" })
     }
   );
 }
 function Je({
-  className: r,
-  orientation: t = "horizontal",
+  className: t,
+  orientation: r = "horizontal",
   decorative: a = !0,
-  ...o
+  ...n
 }) {
   return /* @__PURE__ */ e(
-    oe.Root,
+    se.Root,
     {
       "data-slot": "separator",
       decorative: a,
-      orientation: t,
-      className: s(
+      orientation: r,
+      className: i(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        r
+        t
       ),
-      ...o
+      ...n
     }
   );
 }
-const Ke = ({ ...r }) => {
-  const { theme: t = "system" } = se();
+const Qe = ({ ...t }) => {
+  const { theme: r = "system" } = ie();
   return /* @__PURE__ */ e(
-    ie,
+    le,
     {
-      theme: t,
+      theme: r,
       className: "toaster group",
       style: {
         "--normal-bg": "var(--popover)",
         "--normal-text": "var(--popover-foreground)",
         "--normal-border": "var(--border)"
       },
-      ...r
+      ...t
     }
   );
 };
-function Qe({
-  className: r,
-  ...t
+function Ue({
+  className: t,
+  ...r
 }) {
   return /* @__PURE__ */ e(
-    B.Root,
+    R.Root,
     {
       "data-slot": "switch",
-      className: s(
+      className: i(
         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        r
+        t
       ),
-      ...t,
+      ...r,
       children: /* @__PURE__ */ e(
-        B.Thumb,
+        R.Thumb,
         {
           "data-slot": "switch-thumb",
-          className: s(
+          className: i(
             "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
           )
         }
@@ -355,7 +355,7 @@ function Qe({
     }
   );
 }
-const H = b(
+const E = b(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
@@ -375,113 +375,113 @@ const H = b(
     }
   }
 );
-function Ue({
-  className: r,
-  variant: t,
+function et({
+  className: t,
+  variant: r,
   size: a,
-  ...o
+  ...n
 }) {
   return /* @__PURE__ */ e(
-    le.Root,
+    de.Root,
     {
       "data-slot": "toggle",
-      className: s(H({ variant: t, size: a, className: r })),
-      ...o
+      className: i(E({ variant: r, size: a, className: t })),
+      ...n
     }
   );
 }
-const E = x.createContext({
+const H = x.createContext({
   size: "default",
   variant: "default"
 });
-function et({
-  className: r,
-  variant: t,
+function tt({
+  className: t,
+  variant: r,
   size: a,
-  children: o,
+  children: n,
   ...l
 }) {
   return /* @__PURE__ */ e(
-    A.Root,
+    $.Root,
     {
       "data-slot": "toggle-group",
-      "data-variant": t,
+      "data-variant": r,
       "data-size": a,
-      className: s(
+      className: i(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        r
+        t
       ),
       ...l,
-      children: /* @__PURE__ */ e(E.Provider, { value: { variant: t, size: a }, children: o })
+      children: /* @__PURE__ */ e(H.Provider, { value: { variant: r, size: a }, children: n })
     }
   );
 }
-function tt({
-  className: r,
-  children: t,
+function rt({
+  className: t,
+  children: r,
   variant: a,
-  size: o,
+  size: n,
   ...l
 }) {
-  const c = x.useContext(E);
+  const d = x.useContext(H);
   return /* @__PURE__ */ e(
-    A.Item,
+    $.Item,
     {
       "data-slot": "toggle-group-item",
-      "data-variant": c.variant || a,
-      "data-size": c.size || o,
-      className: s(
-        H({
-          variant: c.variant || a,
-          size: c.size || o
+      "data-variant": d.variant || a,
+      "data-size": d.size || n,
+      className: i(
+        E({
+          variant: d.variant || a,
+          size: d.size || n
         }),
         "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        r
+        t
       ),
       ...l,
-      children: t
+      children: r
     }
   );
 }
-function ge({
-  delayDuration: r = 0,
-  ...t
+function be({
+  delayDuration: t = 0,
+  ...r
 }) {
   return /* @__PURE__ */ e(
     k.Provider,
     {
       "data-slot": "tooltip-provider",
-      delayDuration: r,
-      ...t
+      delayDuration: t,
+      ...r
     }
   );
 }
-function rt({
-  ...r
-}) {
-  return /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(k.Root, { "data-slot": "tooltip", ...r }) });
-}
 function at({
-  ...r
+  ...t
 }) {
-  return /* @__PURE__ */ e(k.Trigger, { "data-slot": "tooltip-trigger", ...r });
+  return /* @__PURE__ */ e(be, { children: /* @__PURE__ */ e(k.Root, { "data-slot": "tooltip", ...t }) });
 }
 function nt({
-  className: r,
-  sideOffset: t = 0,
+  ...t
+}) {
+  return /* @__PURE__ */ e(k.Trigger, { "data-slot": "tooltip-trigger", ...t });
+}
+function ot({
+  className: t,
+  sideOffset: r = 0,
   children: a,
-  ...o
+  ...n
 }) {
-  return /* @__PURE__ */ e(k.Portal, { children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(k.Portal, { children: /* @__PURE__ */ o(
     k.Content,
     {
       "data-slot": "tooltip-content",
-      sideOffset: t,
-      className: s(
+      sideOffset: r,
+      className: i(
         "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        r
+        t
       ),
-      ...o,
+      ...n,
       children: [
         a,
         /* @__PURE__ */ e(k.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
@@ -489,7 +489,7 @@ function nt({
     }
   ) });
 }
-const ve = b(
+const ye = b(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none border",
   {
     variants: {
@@ -523,23 +523,23 @@ const ve = b(
   }
 );
 function F({
-  className: r,
-  variant: t,
+  className: t,
+  variant: r,
   size: a,
-  rounded: o,
+  rounded: n,
   asChild: l = !1,
-  ...c
+  ...d
 }) {
   return /* @__PURE__ */ e(
-    l ? de : "button",
+    l ? ce : "button",
     {
       "data-slot": "button",
-      className: s(ve({ variant: t, size: a, rounded: o, className: r })),
-      ...c
+      className: i(ye({ variant: r, size: a, rounded: n, className: t })),
+      ...d
     }
   );
 }
-const be = b("transition-all", {
+const Ne = b("transition-all", {
   variants: {
     variant: {
       // Turtle Design System variants
@@ -571,66 +571,66 @@ const be = b("transition-all", {
   }
 });
 function y({
-  className: r,
-  variant: t,
+  className: t,
+  variant: r,
   padding: a,
-  rounded: o,
+  rounded: n,
   ...l
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "card",
-      className: s(be({ variant: t, padding: a, rounded: o, className: r })),
+      className: i(Ne({ variant: r, padding: a, rounded: n, className: t })),
       ...l
     }
   );
 }
-function ot({ className: r, ...t }) {
+function st({ className: t, ...r }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "card-header",
-      className: s("flex flex-col space-y-1.5 p-6", r),
-      ...t
+      className: i("flex flex-col space-y-1.5 p-6", t),
+      ...r
     }
   );
 }
-function st({ className: r, children: t, ...a }) {
+function it({ className: t, children: r, ...a }) {
   return /* @__PURE__ */ e(
     "h3",
     {
       "data-slot": "card-title",
-      className: s("text-2xl font-semibold leading-none tracking-tight", r),
+      className: i("text-2xl font-semibold leading-none tracking-tight", t),
       ...a,
-      children: t
+      children: r
     }
   );
 }
-function it({ className: r, ...t }) {
+function lt({ className: t, ...r }) {
   return /* @__PURE__ */ e(
     "p",
     {
       "data-slot": "card-description",
-      className: s("text-sm text-muted-foreground", r),
-      ...t
+      className: i("text-sm text-muted-foreground", t),
+      ...r
     }
   );
 }
-function lt({ className: r, ...t }) {
-  return /* @__PURE__ */ e("div", { "data-slot": "card-content", className: s("p-6 pt-0", r), ...t });
+function dt({ className: t, ...r }) {
+  return /* @__PURE__ */ e("div", { "data-slot": "card-content", className: i("p-6 pt-0", t), ...r });
 }
-function dt({ className: r, ...t }) {
+function ct({ className: t, ...r }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "card-footer",
-      className: s("flex items-center p-6 pt-0", r),
-      ...t
+      className: i("flex items-center p-6 pt-0", t),
+      ...r
     }
   );
 }
-const ye = b(
+const we = b(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer border-none rounded-full",
   {
     variants: {
@@ -651,19 +651,19 @@ const ye = b(
       size: "default"
     }
   }
-), O = x.forwardRef(
-  ({ className: r, variant: t, size: a, asChild: o = !1, ...l }, c) => /* @__PURE__ */ e(
+), M = x.forwardRef(
+  ({ className: t, variant: r, size: a, asChild: n = !1, ...l }, d) => /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "chip",
-      className: s(ye({ variant: t, size: a, className: r })),
-      ref: c,
+      className: i(we({ variant: r, size: a, className: t })),
+      ref: d,
       ...l
     }
   )
 );
-O.displayName = "Chip";
-const Ne = b(
+M.displayName = "Chip";
+const ke = b(
   "relative inline-flex items-center justify-center rounded-full",
   {
     variants: {
@@ -683,18 +683,18 @@ const Ne = b(
       variant: "default"
     }
   }
-), W = x.forwardRef(
-  ({ className: r, size: t, variant: a, children: o, spinning: l = !0, ...c }, i) => /* @__PURE__ */ n(
+), O = x.forwardRef(
+  ({ className: t, size: r, variant: a, children: n, spinning: l = !0, ...d }, s) => /* @__PURE__ */ o(
     "div",
     {
-      ref: i,
-      className: s(Ne({ size: t, variant: a }), r),
-      ...c,
+      ref: s,
+      className: i(ke({ size: r, variant: a }), t),
+      ...d,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: s(
+            className: i(
               "absolute inset-0 rounded-full",
               "bg-gradient-to-r from-transparent via-primary to-transparent",
               "animate-spin",
@@ -711,7 +711,7 @@ const Ne = b(
             children: /* @__PURE__ */ e(
               "div",
               {
-                className: s(
+                className: i(
                   "w-full h-full rounded-full",
                   a === "transparent" ? "bg-transparent" : "bg-background"
                 )
@@ -719,13 +719,13 @@ const Ne = b(
             )
           }
         ),
-        /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center justify-center", children: o })
+        /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center justify-center", children: n })
       ]
     }
   )
 );
-W.displayName = "IconAnimation";
-const we = b("inline-flex items-center gap-2 font-medium", {
+O.displayName = "IconAnimation";
+const ze = b("inline-flex items-center gap-2 font-medium", {
   variants: {
     variant: {
       default: "text-foreground",
@@ -758,51 +758,51 @@ const we = b("inline-flex items-center gap-2 font-medium", {
   base: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-8 h-8"
-}, S = x.forwardRef(
+}, L = x.forwardRef(
   ({
-    className: r,
-    variant: t,
+    className: t,
+    variant: r,
     textSize: a,
-    icon: o,
+    icon: n,
     children: l,
-    iconPosition: c = "left",
-    iconSize: i = "sm",
-    iconClassName: d,
-    ...f
-  }, m) => {
-    const h = () => {
+    iconPosition: d = "left",
+    iconSize: s = "sm",
+    iconClassName: c,
+    ...m
+  }, f) => {
+    const g = () => {
       var u;
-      return typeof o == "string" ? /* @__PURE__ */ e(
+      return typeof n == "string" ? /* @__PURE__ */ e(
         "img",
         {
-          src: o,
+          src: n,
           alt: "",
-          className: s(P[i], "object-contain", d)
+          className: i(P[s], "object-contain", c)
         }
-      ) : /* @__PURE__ */ e("span", { className: s("shrink-0", d), children: x.isValidElement(o) ? x.cloneElement(o, {
-        className: s(P[i], (u = o.props) == null ? void 0 : u.className)
-      }) : o });
+      ) : /* @__PURE__ */ e("span", { className: i("shrink-0", c), children: x.isValidElement(n) ? x.cloneElement(n, {
+        className: i(P[s], (u = n.props) == null ? void 0 : u.className)
+      }) : n });
     };
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ o(
       "div",
       {
-        ref: m,
-        className: s(
-          we({ variant: t, textSize: a }),
-          c === "right" && "flex-row-reverse",
-          r
+        ref: f,
+        className: i(
+          ze({ variant: r, textSize: a }),
+          d === "right" && "flex-row-reverse",
+          t
         ),
-        ...f,
+        ...m,
         children: [
-          h(),
+          g(),
           /* @__PURE__ */ e("span", { children: l })
         ]
       }
     );
   }
 );
-S.displayName = "LabelWithIcon";
-const ke = b("flex w-full", {
+L.displayName = "LabelWithIcon";
+const Se = b("flex w-full", {
   variants: {
     variant: {
       default: "justify-between border border-border shadow-sm bg-background",
@@ -813,7 +813,7 @@ const ke = b("flex w-full", {
   defaultVariants: {
     variant: "default"
   }
-}), ze = b(
+}), Le = b(
   "flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
   {
     variants: {
@@ -828,64 +828,64 @@ const ke = b("flex w-full", {
       variant: "default"
     }
   }
-), Le = x.forwardRef(
-  ({ className: r, variant: t, activeValue: a, children: o, ...l }, c) => {
-    const i = x.useRef(null), d = x.useRef(null), f = x.useCallback(() => {
-      if (t !== "menuBar" || !i.current || !d.current) return;
-      const m = i.current.querySelector('[data-active="true"]');
-      m && (d.current.style.width = `${m.offsetWidth}px`, d.current.style.left = `${m.offsetLeft}px`);
-    }, [t]);
+), je = x.forwardRef(
+  ({ className: t, variant: r, activeValue: a, children: n, ...l }, d) => {
+    const s = x.useRef(null), c = x.useRef(null), m = x.useCallback(() => {
+      if (r !== "menuBar" || !s.current || !c.current) return;
+      const f = s.current.querySelector('[data-active="true"]');
+      f && (c.current.style.width = `${f.offsetWidth}px`, c.current.style.left = `${f.offsetLeft}px`);
+    }, [r]);
     return x.useEffect(() => {
-      if (t !== "menuBar") return;
-      f();
-      const m = new ResizeObserver(f);
-      return i.current && m.observe(i.current), () => {
-        m.disconnect();
+      if (r !== "menuBar") return;
+      m();
+      const f = new ResizeObserver(m);
+      return s.current && f.observe(s.current), () => {
+        f.disconnect();
       };
-    }, [a, f, t]), /* @__PURE__ */ n(
+    }, [a, m, r]), /* @__PURE__ */ o(
       "nav",
       {
-        ref: c || i,
-        className: s(ke({ variant: t, className: r })),
+        ref: d || s,
+        className: i(Se({ variant: r, className: t })),
         ...l,
         children: [
-          t === "menuBar" && /* @__PURE__ */ e(
+          r === "menuBar" && /* @__PURE__ */ e(
             "div",
             {
-              ref: d,
+              ref: c,
               className: "absolute bottom-0 h-full origin-left rounded-full bg-secondary transition-all duration-300"
             }
           ),
-          o
+          n
         ]
       }
     );
   }
 );
-Le.displayName = "NavigationBar";
-const Se = x.forwardRef(
-  ({ className: r, variant: t, active: a, value: o, ...l }, c) => {
-    const d = t === "menuBarDefault" || t === "menuBarActive" ? a ? "menuBarActive" : "menuBarDefault" : a ? "active" : t || "default", f = d === "menuBarDefault" || d === "menuBarActive";
+je.displayName = "NavigationBar";
+const Ce = x.forwardRef(
+  ({ className: t, variant: r, active: a, value: n, ...l }, d) => {
+    const c = r === "menuBarDefault" || r === "menuBarActive" ? a ? "menuBarActive" : "menuBarDefault" : a ? "active" : r || "default", m = c === "menuBarDefault" || c === "menuBarActive";
     return /* @__PURE__ */ e(
       "button",
       {
-        ref: c,
+        ref: d,
         "data-active": a,
-        "data-value": o,
-        className: s(
-          ze({
-            variant: d,
-            className: r
+        "data-value": n,
+        className: i(
+          Le({
+            variant: c,
+            className: t
           }),
-          !f && "px-4 py-2 rounded-md"
+          !m && "px-4 py-2 rounded-md"
         ),
         ...l
       }
     );
   }
 );
-Se.displayName = "NavigationItem";
-const je = b("space-y-1", {
+Ce.displayName = "NavigationItem";
+const Ie = b("space-y-1", {
   variants: {
     size: {
       sm: "p-2",
@@ -923,7 +923,7 @@ const je = b("space-y-1", {
     color: "primary",
     size: "default"
   }
-}), Ie = b("font-medium text-muted-foreground", {
+}), Te = b("font-medium text-muted-foreground", {
   variants: {
     size: {
       sm: "text-xs",
@@ -934,107 +934,107 @@ const je = b("space-y-1", {
   defaultVariants: {
     size: "default"
   }
-}), C = x.forwardRef(
+}), I = x.forwardRef(
   ({
-    title: r,
-    value: t,
+    title: t,
+    value: r,
     color: a = "primary",
-    valueSize: o = "default",
+    valueSize: n = "default",
     titleSize: l = "default",
-    size: c = "default",
-    align: i = "center",
-    icon: d,
-    subtitle: f,
-    className: m,
-    ...h
-  }, u) => /* @__PURE__ */ n(
+    size: d = "default",
+    align: s = "center",
+    icon: c,
+    subtitle: m,
+    className: f,
+    ...g
+  }, u) => /* @__PURE__ */ o(
     y,
     {
       ref: u,
       variant: "item",
-      className: s(je({ size: c, align: i }), m),
-      ...h,
+      className: i(Ie({ size: d, align: s }), f),
+      ...g,
       children: [
-        d && /* @__PURE__ */ e(
+        c && /* @__PURE__ */ e(
           "div",
           {
-            className: s(
+            className: i(
               "flex mb-2",
-              i === "left" && "justify-start",
-              i === "center" && "justify-center",
-              i === "right" && "justify-end"
+              s === "left" && "justify-start",
+              s === "center" && "justify-center",
+              s === "right" && "justify-end"
             ),
-            children: d
+            children: c
           }
         ),
-        /* @__PURE__ */ e("p", { className: Ie({ size: l }), children: r }),
-        /* @__PURE__ */ e("p", { className: _e({ color: a, size: o }), children: t }),
-        f && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground/70", children: f })
+        /* @__PURE__ */ e("p", { className: Te({ size: l }), children: t }),
+        /* @__PURE__ */ e("p", { className: _e({ color: a, size: n }), children: r }),
+        m && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground/70", children: m })
       ]
     }
   )
 );
-C.displayName = "InfoCard";
-function ct({
-  className: r,
-  title: t,
+I.displayName = "InfoCard";
+function ut({
+  className: t,
+  title: r,
   titleIcon: a,
-  topCards: o,
+  topCards: n,
   bottomCards: l
 }) {
-  const c = /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" }) }) });
-  return /* @__PURE__ */ e(y, { className: s("space-y-4", r), children: /* @__PURE__ */ e("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ n("div", { className: "space-y-4", children: [
-    (t || a) && /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(S, { icon: a || c, textSize: "lg", iconSize: "lg", children: t }) }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3", children: o.map((i, d) => /* @__PURE__ */ e(
-      C,
+  const d = /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" }) }) });
+  return /* @__PURE__ */ e(y, { className: i("space-y-4", t), children: /* @__PURE__ */ e("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ o("div", { className: "space-y-4", children: [
+    (r || a) && /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(L, { icon: a || d, textSize: "lg", iconSize: "lg", children: r }) }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3", children: n.map((s, c) => /* @__PURE__ */ e(
+      I,
       {
-        title: i.title,
-        value: i.value,
-        color: i.color || "primary",
-        icon: i.icon,
+        title: s.title,
+        value: s.value,
+        color: s.color || "primary",
+        icon: s.icon,
         size: "sm",
         valueSize: "sm",
         titleSize: "sm",
         align: "left"
       },
-      d
+      c
     )) }),
-    /* @__PURE__ */ e("div", { className: "space-y-2", children: l.map((i, d) => /* @__PURE__ */ e(
-      C,
+    /* @__PURE__ */ e("div", { className: "space-y-2", children: l.map((s, c) => /* @__PURE__ */ e(
+      I,
       {
-        title: i.title,
-        value: i.value,
-        color: i.color || "primary",
+        title: s.title,
+        value: s.value,
+        color: s.color || "primary",
         size: "sm",
         valueSize: "sm",
         titleSize: "sm",
         align: "left",
         className: "w-full"
       },
-      d
+      c
     )) })
   ] }) }) });
 }
-const Ce = x.forwardRef(
-  ({ className: r, icon: t, name: a, tvl: o, yield: l, onSelect: c, selected: i = !1, ...d }, f) => {
-    const m = /* @__PURE__ */ e("div", { className: "w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" }) }) });
+const Be = x.forwardRef(
+  ({ className: t, icon: r, name: a, tvl: n, yield: l, onSelect: d, selected: s = !1, ...c }, m) => {
+    const f = /* @__PURE__ */ e("div", { className: "w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" }) }) });
     return /* @__PURE__ */ e(
       y,
       {
-        ref: f,
-        className: s(
+        ref: m,
+        className: i(
           "cursor-pointer transition-all duration-200 hover:shadow-md w-full",
-          i && "ring-2 ring-primary ring-offset-2",
-          r
+          s && "ring-2 ring-primary ring-offset-2",
+          t
         ),
-        onClick: c,
-        ...d,
-        children: /* @__PURE__ */ n("div", { className: "flex gap-12 items-start justify-between", children: [
-          /* @__PURE__ */ n("div", { className: "flex flex-col min-w-0 flex-1 items-start justify-start", children: [
-            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground truncate", children: /* @__PURE__ */ e(S, { icon: t || m, textSize: "2xl", children: a }) }),
-            o && /* @__PURE__ */ n("span", { className: "text-xs text-muted-foreground", children: [
+        onClick: d,
+        ...c,
+        children: /* @__PURE__ */ o("div", { className: "flex gap-12 items-start justify-between", children: [
+          /* @__PURE__ */ o("div", { className: "flex flex-col min-w-0 flex-1 items-start justify-start", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground truncate", children: /* @__PURE__ */ e(L, { icon: r || f, textSize: "2xl", children: a }) }),
+            n && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
               "TVL: ",
-              o
+              n
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: l && /* @__PURE__ */ e("span", { className: "text-lg font-bold text-primary", children: l }) })
@@ -1043,19 +1043,19 @@ const Ce = x.forwardRef(
     );
   }
 );
-Ce.displayName = "OpportunityItem";
-const Te = x.forwardRef(
+Be.displayName = "OpportunityItem";
+const Ve = x.forwardRef(
   ({
-    className: r,
-    title: t,
+    className: t,
+    title: r,
     titleIcon: a,
-    yield: o,
+    yield: n,
     details: l = [],
-    badges: c = [],
-    externalLink: i,
-    ...d
-  }, f) => {
-    const m = /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" }) }) }), h = () => /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+    badges: d = [],
+    externalLink: s,
+    ...c
+  }, m) => {
+    const f = /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" }) }) }), g = () => /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
       "path",
       {
         strokeLinecap: "round",
@@ -1064,25 +1064,25 @@ const Te = x.forwardRef(
         d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
       }
     ) });
-    return /* @__PURE__ */ n(y, { ref: f, className: s("p-4 space-y-4", r), ...d, children: [
-      (t || a) && /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ e(S, { icon: a || m, textSize: "lg", iconSize: "lg", children: t }) }),
-        o && /* @__PURE__ */ n("div", { className: "text-right", children: [
-          /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-primary", children: o }),
+    return /* @__PURE__ */ o(y, { ref: m, className: i("p-4 space-y-4", t), ...c, children: [
+      (r || a) && /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ e(L, { icon: a || f, textSize: "lg", iconSize: "lg", children: r }) }),
+        n && /* @__PURE__ */ o("div", { className: "text-right", children: [
+          /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-primary", children: n }),
           /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "APY" })
         ] })
       ] }),
-      l.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-3", children: l.map((u, g) => /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(y, { className: "p-3", children: /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      l.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-3", children: l.map((u, h) => /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(y, { className: "p-3", children: /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
           u.icon,
           /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: u.label })
         ] }),
-        /* @__PURE__ */ e("span", { className: s("text-sm font-medium", u.highlight && "text-primary"), children: u.value })
-      ] }) }) }, g)) }),
-      c.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: c.map((u, g) => /* @__PURE__ */ n(
+        /* @__PURE__ */ e("span", { className: i("text-sm font-medium", u.highlight && "text-primary"), children: u.value })
+      ] }) }) }, h)) }),
+      d.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: d.map((u, h) => /* @__PURE__ */ o(
         "div",
         {
-          className: s(
+          className: i(
             "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium",
             u.variant === "secondary" && "bg-secondary text-secondary-foreground",
             u.variant === "outline" && "border border-border bg-background",
@@ -1093,47 +1093,47 @@ const Te = x.forwardRef(
             u.text
           ]
         },
-        g
+        h
       )) }),
-      i && /* @__PURE__ */ e("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ n(
+      s && /* @__PURE__ */ e("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ o(
         "a",
         {
-          href: i.href,
+          href: s.href,
           target: "_blank",
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors",
           children: [
-            i.icon,
-            i.text,
-            /* @__PURE__ */ e(h, {})
+            s.icon,
+            s.text,
+            /* @__PURE__ */ e(g, {})
           ]
         }
       ) })
     ] });
   }
 );
-Te.displayName = "OpportunityDetails";
+Ve.displayName = "OpportunityDetails";
 const Re = x.forwardRef(
   ({
-    className: r,
-    title: t,
+    className: t,
+    title: r,
     description: a,
-    txHash: o,
+    txHash: n,
     explorerUrl: l,
-    estimatedTime: c,
-    amount: i,
-    token: d,
-    protocol: f,
-    steps: m = [],
-    variant: h = "default",
+    estimatedTime: d,
+    amount: s,
+    token: c,
+    protocol: m,
+    steps: f = [],
+    variant: g = "default",
     completed: u = !1,
-    cancelled: g = !1,
+    cancelled: h = !1,
     onViewDetails: N,
     onClose: w,
-    showActions: I = !0,
+    showActions: C = !0,
     ...z
   }, j) => {
-    const M = g ? "Transaction Cancelled" : u ? "Transaction Completed" : "Processing Transaction", Y = g ? "Transaction was cancelled by user" : u ? "Your transaction has been successfully processed!" : "Please wait while your transaction is being processed...", T = ({ size: p = "w-4 h-4" }) => /* @__PURE__ */ e("svg", { className: p, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+    const G = h ? "Transaction Cancelled" : u ? "Transaction Completed" : "Processing Transaction", K = h ? "Transaction was cancelled by user" : u ? "Your transaction has been successfully processed!" : "Please wait while your transaction is being processed...", T = ({ size: p = "w-4 h-4" }) => /* @__PURE__ */ e("svg", { className: p, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
       "path",
       {
         strokeLinecap: "round",
@@ -1141,83 +1141,83 @@ const Re = x.forwardRef(
         strokeWidth: 2,
         d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
       }
-    ) }), Z = () => /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), R = (p) => p.length <= 12 ? p : `${p.slice(0, 6)}...${p.slice(-6)}`;
-    return /* @__PURE__ */ n(
+    ) }), Y = () => /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), B = (p) => p.length <= 12 ? p : `${p.slice(0, 6)}...${p.slice(-6)}`;
+    return /* @__PURE__ */ o(
       y,
       {
         ref: j,
-        className: s(
+        className: i(
           "p-6 text-center space-y-4",
-          h === "compact" && "p-4 space-y-3",
-          r
+          g === "compact" && "p-4 space-y-3",
+          t
         ),
         ...z,
         children: [
-          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(W, { spinning: !u && !g, size: h === "compact" ? "default" : "lg", children: g ? /* @__PURE__ */ e(te, { className: "w-8 h-8 text-destructive" }) : u ? /* @__PURE__ */ e(re, { className: "w-8 h-8 text-primary" }) : /* @__PURE__ */ e(ae, { className: "w-8 h-8 text-primary" }) }) }),
-          /* @__PURE__ */ n("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(O, { spinning: !u && !h, size: g === "compact" ? "default" : "lg", children: h ? /* @__PURE__ */ e(ee, { className: "w-8 h-8 text-destructive" }) : u ? /* @__PURE__ */ e(te, { className: "w-8 h-8 text-primary" }) : /* @__PURE__ */ e(re, { className: "w-8 h-8 text-primary" }) }) }),
+          /* @__PURE__ */ o("div", { className: "space-y-2", children: [
             /* @__PURE__ */ e(
               "h3",
               {
-                className: s(
+                className: i(
                   "font-medium text-foreground",
-                  h === "compact" ? "text-sm" : "text-base"
+                  g === "compact" ? "text-sm" : "text-base"
                 ),
-                children: t || M
+                children: r || G
               }
             ),
-            /* @__PURE__ */ e("p", { className: s("text-muted-foreground", h === "compact" ? "text-xs" : "text-sm"), children: a || Y })
+            /* @__PURE__ */ e("p", { className: i("text-muted-foreground", g === "compact" ? "text-xs" : "text-sm"), children: a || K })
           ] }),
-          u && !g && (i || d || f) && /* @__PURE__ */ n("div", { className: "p-3 bg-muted/50 rounded-lg space-y-1", children: [
-            i && d && /* @__PURE__ */ n("div", { className: "text-sm font-medium", children: [
-              i,
+          u && !h && (s || c || m) && /* @__PURE__ */ o("div", { className: "p-3 bg-muted/50 rounded-lg space-y-1", children: [
+            s && c && /* @__PURE__ */ o("div", { className: "text-sm font-medium", children: [
+              s,
               " ",
-              d
+              c
             ] }),
-            f && /* @__PURE__ */ n("div", { className: "text-xs text-muted-foreground", children: [
+            m && /* @__PURE__ */ o("div", { className: "text-xs text-muted-foreground", children: [
               "via ",
-              f
+              m
             ] })
           ] }),
-          o && !g && /* @__PURE__ */ n("div", { className: "space-y-1", children: [
+          n && !h && /* @__PURE__ */ o("div", { className: "space-y-1", children: [
             /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "Transaction Hash" }),
-            l ? /* @__PURE__ */ n(
+            l ? /* @__PURE__ */ o(
               "a",
               {
-                href: `${l}/tx/${o}`,
+                href: `${l}/tx/${n}`,
                 target: "_blank",
                 rel: "noopener noreferrer",
                 className: "inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors",
                 children: [
-                  R(o),
+                  B(n),
                   /* @__PURE__ */ e(T, {})
                 ]
               }
-            ) : /* @__PURE__ */ e("div", { className: "text-sm font-mono text-foreground", children: R(o) })
+            ) : /* @__PURE__ */ e("div", { className: "text-sm font-mono text-foreground", children: B(n) })
           ] }),
-          !u && !g && c && /* @__PURE__ */ n("div", { className: "text-xs text-muted-foreground", children: [
+          !u && !h && d && /* @__PURE__ */ o("div", { className: "text-xs text-muted-foreground", children: [
             "Estimated time: ",
-            c
+            d
           ] }),
-          !u && !g && m.length > 0 && /* @__PURE__ */ n("div", { className: "space-y-2 pt-2 border-t border-border", children: [
+          !u && !h && f.length > 0 && /* @__PURE__ */ o("div", { className: "space-y-2 pt-2 border-t border-border", children: [
             /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted-foreground text-left", children: "Progress" }),
-            /* @__PURE__ */ e("div", { className: "space-y-2", children: m.map((p, X) => /* @__PURE__ */ n("div", { className: "flex items-center gap-3 text-left", children: [
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: f.map((p, Z) => /* @__PURE__ */ o("div", { className: "flex items-center gap-3 text-left", children: [
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: s(
+                  className: i(
                     "flex items-center justify-center w-5 h-5 rounded-full border-2 flex-shrink-0",
                     p.completed && "bg-primary border-primary text-primary-foreground",
                     p.current && !p.completed && "border-primary text-primary animate-pulse",
                     !p.completed && !p.current && "border-muted-foreground/30 text-muted-foreground"
                   ),
-                  children: p.completed ? /* @__PURE__ */ e(Z, {}) : p.current ? /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-primary animate-pulse" }) : /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-muted-foreground/30" })
+                  children: p.completed ? /* @__PURE__ */ e(Y, {}) : p.current ? /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-primary animate-pulse" }) : /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-muted-foreground/30" })
                 }
               ),
-              /* @__PURE__ */ n("div", { className: "flex-1 flex items-center justify-between", children: [
+              /* @__PURE__ */ o("div", { className: "flex-1 flex items-center justify-between", children: [
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: s(
+                    className: i(
                       "text-sm",
                       p.completed && "text-foreground",
                       p.current && !p.completed && "text-foreground font-medium",
@@ -1226,7 +1226,7 @@ const Re = x.forwardRef(
                     children: p.label
                   }
                 ),
-                p.txHash && l && /* @__PURE__ */ n(
+                p.txHash && l && /* @__PURE__ */ o(
                   "a",
                   {
                     href: `${l}/tx/${p.txHash}`,
@@ -1235,7 +1235,7 @@ const Re = x.forwardRef(
                     className: "inline-flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors ml-2",
                     title: `View transaction: ${p.txHash}`,
                     children: [
-                      /* @__PURE__ */ n("span", { className: "font-mono", children: [
+                      /* @__PURE__ */ o("span", { className: "font-mono", children: [
                         p.txHash.slice(0, 6),
                         "...",
                         p.txHash.slice(-4)
@@ -1245,21 +1245,21 @@ const Re = x.forwardRef(
                   }
                 )
               ] })
-            ] }, X)) })
+            ] }, Z)) })
           ] }),
-          (u || g) && I && (N || w) && /* @__PURE__ */ n(
+          (u || h) && C && (N || w) && /* @__PURE__ */ o(
             "div",
             {
-              className: s(
+              className: i(
                 "flex gap-2 pt-2",
-                h === "compact" ? "flex-col" : "flex-row justify-center"
+                g === "compact" ? "flex-col" : "flex-row justify-center"
               ),
               children: [
-                !g && N && /* @__PURE__ */ e(
+                !h && N && /* @__PURE__ */ e(
                   F,
                   {
                     variant: "transparentWhite",
-                    size: h === "compact" ? "sm" : "default",
+                    size: g === "compact" ? "sm" : "default",
                     onClick: N,
                     children: "View Details"
                   }
@@ -1268,9 +1268,9 @@ const Re = x.forwardRef(
                   F,
                   {
                     variant: "default",
-                    size: h === "compact" ? "sm" : "default",
+                    size: g === "compact" ? "sm" : "default",
                     onClick: w,
-                    children: g ? "Try Again" : "Done"
+                    children: h ? "Try Again" : "Done"
                   }
                 )
               ]
@@ -1282,106 +1282,106 @@ const Re = x.forwardRef(
   }
 );
 Re.displayName = "TxStatus";
-const G = x.forwardRef(
-  ({ tokens: r, value: t, onValueChange: a, placeholder: o = "Select token", disabled: l, className: c }, i) => {
-    const d = t || (r.length > 0 ? r[0].address : void 0), f = r.find((m) => m.address === d);
-    return Q(() => {
-      !t && r.length > 0 && a && a(r[0].address);
-    }, [t, r, a]), /* @__PURE__ */ n(me, { value: d, onValueChange: a, disabled: l, children: [
+const W = x.forwardRef(
+  ({ tokens: t, value: r, onValueChange: a, placeholder: n = "Select token", disabled: l, className: d }, s) => {
+    const c = r || (t.length > 0 ? t[0].address : void 0), m = t.find((f) => f.address === c);
+    return J(() => {
+      !r && t.length > 0 && a && a(t[0].address);
+    }, [r, t, a]), /* @__PURE__ */ o(fe, { value: c, onValueChange: a, disabled: l, children: [
       /* @__PURE__ */ e(
-        ue,
+        pe,
         {
-          ref: i,
-          className: s(
+          ref: s,
+          className: i(
             "w-auto min-w-[80px] h-8 px-2 py-1 bg-muted hover:bg-muted/80 border-none rounded-md text-sm font-medium",
             "focus:ring-2 focus:ring-primary/20 focus:outline-none",
-            c
+            d
           ),
-          children: f ? /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ e("span", { className: "w-4 h-4 flex items-center justify-center", children: f.icon }),
-            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: f.symbol })
-          ] }) : /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: o })
+          children: m ? /* @__PURE__ */ o("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ e("span", { className: "w-4 h-4 flex items-center justify-center", children: m.icon }),
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: m.symbol })
+          ] }) : /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: n })
         }
       ),
-      /* @__PURE__ */ e(fe, { children: r.map((m) => /* @__PURE__ */ e(pe, { value: m.address, className: "cursor-pointer", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e("span", { className: "w-4 h-4 flex items-center justify-center", children: m.icon }),
-        /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: m.symbol })
-      ] }) }, m.address)) })
+      /* @__PURE__ */ e(xe, { children: t.map((f) => /* @__PURE__ */ e(he, { value: f.address, className: "cursor-pointer", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e("span", { className: "w-4 h-4 flex items-center justify-center", children: f.icon }),
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: f.symbol })
+      ] }) }, f.address)) })
     ] });
   }
 );
-G.displayName = "TokenSelector";
-const Be = x.forwardRef(
+W.displayName = "TokenSelector";
+const De = x.forwardRef(
   ({
-    className: r,
-    value: t = "",
+    className: t,
+    value: r = "",
     onChange: a,
-    tokens: o,
+    tokens: n,
     selectedToken: l,
-    onTokenChange: c,
-    usdValue: i,
-    balance: d,
-    onMaxClick: f,
-    placeholder: m = "0",
-    disabled: h = !1,
+    onTokenChange: d,
+    usdValue: s,
+    balance: c,
+    onMaxClick: m,
+    placeholder: f = "0",
+    disabled: g = !1,
     hideTokenSelector: u = !1,
-    ...g
+    ...h
   }, N) => {
-    const w = o.find((z) => z.address === l), I = (z) => {
+    const w = n.find((z) => z.address === l), C = (z) => {
       const j = z.target.value;
       /^\d*\.?\d*$/.test(j) && (a == null || a(j));
     };
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ o(
       y,
       {
         ref: N,
-        className: s("space-y-3", h && "opacity-50", r),
-        ...g,
+        className: i("space-y-3", g && "opacity-50", t),
+        ...h,
         children: [
-          /* @__PURE__ */ n("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
-              D,
+              A,
               {
                 variant: "nofocus",
-                value: t,
-                onChange: I,
-                placeholder: m,
-                disabled: h,
+                value: r,
+                onChange: C,
+                placeholder: f,
+                disabled: g,
                 className: "text-2xl font-medium border-none bg-transparent p-0 h-auto focus:ring-0"
               }
             ) }),
             !u && /* @__PURE__ */ e(
-              G,
+              W,
               {
-                tokens: o,
+                tokens: n,
                 value: l,
-                onValueChange: c,
-                disabled: h,
+                onValueChange: d,
+                disabled: g,
                 placeholder: "Select token"
               }
             )
           ] }),
-          /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ e("div", { children: i && /* @__PURE__ */ n("span", { children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ e("div", { children: s && /* @__PURE__ */ o("span", { children: [
               "≈ $",
-              i
+              s
             ] }) }),
-            /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-              d && /* @__PURE__ */ n("span", { children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              c && /* @__PURE__ */ o("span", { children: [
                 "Balance: ",
-                d,
+                c,
                 " ",
                 (w == null ? void 0 : w.symbol) || ""
               ] }),
-              f && /* @__PURE__ */ e(
-                O,
+              m && /* @__PURE__ */ e(
+                M,
                 {
                   variant: "default",
                   size: "xs",
-                  onClick: f,
-                  className: s(
+                  onClick: m,
+                  className: i(
                     "cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors text-xs",
-                    h && "cursor-not-allowed opacity-50"
+                    g && "cursor-not-allowed opacity-50"
                   ),
                   children: "MAX"
                 }
@@ -1393,43 +1393,43 @@ const Be = x.forwardRef(
     );
   }
 );
-Be.displayName = "SwapInput";
-const Ve = x.forwardRef(
+De.displayName = "SwapInput";
+const Fe = x.forwardRef(
   ({
-    className: r,
-    swapFee: t,
+    className: t,
+    swapFee: r,
     slippageInUsd: a,
-    deposit: o,
+    deposit: n,
     receive: l,
-    equivalentInUsd: c,
-    networkFee: i,
-    networkFeeInUsd: d,
-    showFree: f = !1,
+    equivalentInUsd: d,
+    networkFee: s,
+    networkFeeInUsd: c,
     defaultOpen: m = !1,
-    ...h
+    slippageSelector: f,
+    ...g
   }, u) => {
-    const [g, N] = x.useState(m);
-    return /* @__PURE__ */ n(y, { ref: u, className: s("overflow-hidden", r), ...h, children: [
-      /* @__PURE__ */ n(
+    const [h, N] = x.useState(m);
+    return /* @__PURE__ */ o(y, { ref: u, className: i("overflow-hidden", t), ...g, children: [
+      /* @__PURE__ */ o(
         "button",
         {
-          onClick: () => N(!g),
+          onClick: () => N(!h),
           className: "w-full flex items-center justify-between p-1 hover:bg-muted/50 transition-colors",
           children: [
-            /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ n("span", { className: "text-sm font-medium", children: [
-                o,
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ o("span", { className: "text-sm font-medium", children: [
+                n,
                 " = ",
                 l
               ] }),
-              /* @__PURE__ */ n("span", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
                 "(≈ $",
-                c,
+                d,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ n("span", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
                 "≈ $",
                 a
               ] }),
@@ -1438,76 +1438,103 @@ const Ve = x.forwardRef(
           ]
         }
       ),
-      g && /* @__PURE__ */ n("div", { className: "transition-all animate-in fade-in-0 duration-300", children: [
-        /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-sm", children: [
+      h && /* @__PURE__ */ o("div", { className: "transition-all animate-in fade-in-0 duration-300 px-2 py-4 space-y-2", children: [
+        f && /* @__PURE__ */ e("div", { className: "text-sm", children: f }),
+        /* @__PURE__ */ o("div", { className: "flex items-center justify-between text-sm", children: [
           /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: "Swap Fee" }),
-          t ? /* @__PURE__ */ n("span", { className: "font-medium", children: [
-            t,
+          r ? /* @__PURE__ */ o("span", { className: "font-medium", children: [
+            r,
             "%"
           ] }) : /* @__PURE__ */ e("span", { className: "text-xs px-2 py-1 bg-primary/10 text-primary rounded-full font-medium", children: "FREE" })
         ] }),
-        /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-sm", children: [
+        !!s && /* @__PURE__ */ o("div", { className: "flex items-center justify-between text-sm", children: [
           /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: "Network Fee" }),
-          /* @__PURE__ */ n("span", { className: "font-medium", children: [
-            /* @__PURE__ */ e("span", { className: "text-xs text-foreground", children: i }),
-            d ? /* @__PURE__ */ n("span", { className: "text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ o("span", { className: "font-medium", children: [
+            /* @__PURE__ */ e("span", { className: "text-xs text-foreground", children: s }),
+            c && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
               "(≈ $",
-              d,
+              c,
               ")"
-            ] }) : /* @__PURE__ */ e("span", { className: "text-xs px-2 py-1 bg-primary/10 text-primary rounded-full font-medium", children: "FREE" })
+            ] })
           ] })
         ] })
       ] })
     ] });
   }
 );
-Ve.displayName = "SwapDetails";
-const Fe = x.forwardRef(
-  ({ className: r, tokens: t = [], variant: a = "default", defaultOpen: o = !1, ...l }, c) => {
-    const [i, d] = x.useState(o), f = (m) => /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-xs font-bold text-primary", children: m.charAt(0) }) });
-    return t.length === 0 ? null : /* @__PURE__ */ n(y, { ref: c, className: s("overflow-hidden", r), ...l, children: [
-      /* @__PURE__ */ n(
+Fe.displayName = "SwapDetails";
+const mt = ({ className: t, tokens: r = [], defaultOpen: a = !1 }) => {
+  const [n, l] = x.useState(a), d = (s) => /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-xs font-bold text-primary", children: s.charAt(0) }) });
+  return r.length === 0 ? null : /* @__PURE__ */ o(y, { className: i("overflow-hidden", t), children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        onClick: () => l(!n),
+        className: "w-full flex items-center justify-between p-2 hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Swap Route" }),
+          /* @__PURE__ */ e(ae, { className: "w-4 h-4 text-primary" })
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(ue, { className: "rounded-md whitespace-nowrap", children: /* @__PURE__ */ e("div", { className: "flex flex-row items-center justify-center gap-2 overflow-x-auto py-3 w-full", children: r.map((s, c) => /* @__PURE__ */ o(x.Fragment, { children: [
+      /* @__PURE__ */ e(y, { variant: "item", className: "rounded-full flex-shrink-0 p-3", children: /* @__PURE__ */ e(
+        L,
+        {
+          icon: s.icon || d(s.symbol),
+          textSize: "xs",
+          iconSize: "sm",
+          children: /* @__PURE__ */ e("span", { className: "gap-2", children: s.symbol })
+        }
+      ) }),
+      c < r.length - 1 && /* @__PURE__ */ e(ne, { className: "w-4 h-4 text-primary flex-shrink-0" })
+    ] }, `${s.symbol}-${c}`)) }) }) })
+  ] });
+};
+function ft({ value: t, onChange: r }) {
+  const [a, n] = V(!1), [l, d] = V(t.toString()), s = () => {
+    n(!0), d(t.toString());
+  }, c = (u) => {
+    const h = u.target.value;
+    /^\d*\.?\d*$/.test(h) && d(h);
+  }, m = () => {
+    const u = parseFloat(l);
+    !isNaN(u) && u >= 0.1 && u <= 100 ? (r(u), n(!1)) : (d(t.toString()), n(!1));
+  };
+  return /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-muted-foreground", children: "Max Slippage" }),
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+      a ? /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: l,
+          onChange: c,
+          onKeyDown: (u) => {
+            u.key === "Enter" ? m() : u.key === "Escape" && (d(t.toString()), n(!1));
+          },
+          onBlur: () => {
+            m();
+          },
+          className: "w-10 h-5 text-xs text-right bg-transparent border-none outline-none text-foreground focus:ring-0",
+          autoFocus: !0
+        }
+      ) : /* @__PURE__ */ o("span", { className: "text-xs font-medium text-foreground", children: [
+        t,
+        "%"
+      ] }),
+      /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => d(!i),
-          className: "w-full flex items-center justify-between p-2 hover:bg-muted/50 transition-colors",
-          children: [
-            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Swap Route" }),
-            /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ n("span", { className: "text-xs text-muted-foreground", children: [
-                t.length,
-                " token",
-                t.length > 1 ? "s" : ""
-              ] }),
-              /* @__PURE__ */ e(_, { className: "w-4 h-4 text-primary" })
-            ] })
-          ]
+          onClick: s,
+          className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ e(oe, { size: 10 })
         }
-      ),
-      i && /* @__PURE__ */ e("div", { className: "px-4 pb-4 border-t border-border", children: /* @__PURE__ */ n(ce, { className: "rounded-md whitespace-nowrap", children: [
-        /* @__PURE__ */ e("div", { className: "flex items-center justify-between gap-2 overflow-x-auto py-3", children: t.map((m, h) => /* @__PURE__ */ n(K, { children: [
-          /* @__PURE__ */ e(y, { variant: "item", className: "p-2 rounded-full", children: /* @__PURE__ */ e(
-            S,
-            {
-              icon: m.icon || f(m.symbol),
-              textSize: "xs",
-              iconSize: "sm",
-              children: /* @__PURE__ */ n("span", { className: "gap-2", children: [
-                m.amount,
-                " ",
-                m.symbol
-              ] })
-            }
-          ) }, h),
-          h < t.length - 1 && /* @__PURE__ */ e("div", { className: "flex-shrink-0 mx-1", children: /* @__PURE__ */ e(ne, { className: "w-4 h-4 text-primary" }) })
-        ] })) }),
-        /* @__PURE__ */ e($, { orientation: "horizontal", className: "h-2" })
-      ] }) })
-    ] });
-  }
-);
-Fe.displayName = "RouteDetails";
-const mt = {
+      )
+    ] })
+  ] });
+}
+const pt = {
   colors: {
     // Turtle brand colors
     neonGreen: "oklch(0.86 0.16 142.5)",
@@ -1614,59 +1641,60 @@ const mt = {
 export {
   F as Button,
   y as Card,
-  lt as CardContent,
-  it as CardDescription,
-  dt as CardFooter,
-  ot as CardHeader,
-  st as CardTitle,
-  O as Chip,
-  W as IconAnimation,
-  C as InfoCard,
-  D as Input,
-  Me as Label,
-  S as LabelWithIcon,
-  Le as NavigationBar,
-  Se as NavigationItem,
-  Te as OpportunityDetails,
-  ct as OpportunityDetailsV1,
-  Ce as OpportunityItem,
-  Fe as RouteDetails,
-  ce as ScrollArea,
-  $ as ScrollBar,
-  me as Select,
-  fe as SelectContent,
+  dt as CardContent,
+  lt as CardDescription,
+  ct as CardFooter,
+  st as CardHeader,
+  it as CardTitle,
+  M as Chip,
+  O as IconAnimation,
+  I as InfoCard,
+  A as Input,
+  Ke as Label,
+  L as LabelWithIcon,
+  je as NavigationBar,
+  Ce as NavigationItem,
+  Ve as OpportunityDetails,
+  ut as OpportunityDetailsV1,
+  Be as OpportunityItem,
+  mt as RouteDetails,
+  ue as ScrollArea,
+  me as ScrollBar,
+  fe as Select,
+  xe as SelectContent,
   Ye as SelectGroup,
-  pe as SelectItem,
+  he as SelectItem,
   Xe as SelectLabel,
-  he as SelectScrollDownButton,
-  xe as SelectScrollUpButton,
+  ve as SelectScrollDownButton,
+  ge as SelectScrollUpButton,
   qe as SelectSeparator,
-  ue as SelectTrigger,
+  pe as SelectTrigger,
   Ze as SelectValue,
   Je as Separator,
-  Ve as SwapDetails,
-  Be as SwapInput,
-  Qe as Switch,
-  Ke as Toaster,
-  Ue as Toggle,
-  et as ToggleGroup,
-  tt as ToggleGroupItem,
-  G as TokenSelector,
-  rt as Tooltip,
-  nt as TooltipContent,
-  ge as TooltipProvider,
-  at as TooltipTrigger,
+  ft as SlippageSelector,
+  Fe as SwapDetails,
+  De as SwapInput,
+  Ue as Switch,
+  Qe as Toaster,
+  et as Toggle,
+  tt as ToggleGroup,
+  rt as ToggleGroupItem,
+  W as TokenSelector,
+  at as Tooltip,
+  ot as TooltipContent,
+  be as TooltipProvider,
+  nt as TooltipTrigger,
   Re as TxStatus,
-  ve as buttonVariants,
-  be as cardVariants,
-  ye as chipVariants,
-  s as cn,
-  Ne as iconAnimationVariants,
-  V as inputVariants,
-  we as labelWithIconVariants,
-  ke as navigationBarVariants,
-  ze as navigationItemVariants,
-  H as toggleVariants,
-  mt as tokens
+  ye as buttonVariants,
+  Ne as cardVariants,
+  we as chipVariants,
+  i as cn,
+  ke as iconAnimationVariants,
+  D as inputVariants,
+  ze as labelWithIconVariants,
+  Se as navigationBarVariants,
+  Le as navigationItemVariants,
+  E as toggleVariants,
+  pt as tokens
 };
 //# sourceMappingURL=index.js.map