@turtleclub/ui 0.2.0 → 0.3.0-beta.1

package/dist/index.js

@@ -1,13 +1,13 @@
-import { clsx as X } from "clsx";
-import { twMerge as q } from "tailwind-merge";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { clsx as U } from "clsx";
+import { twMerge as X } from "tailwind-merge";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import * as b from "react";
-import { useState as I, useEffect as J } from "react";
+import { useState as j, useEffect as q } from "react";
 import { cva as N } from "class-variance-authority";
-import * as Q from "@radix-ui/react-label";
+import * as J from "@radix-ui/react-label";
 import * as C from "@radix-ui/react-scroll-area";
 import * as v from "@radix-ui/react-select";
-import { ChevronDownIcon as D, ChevronUpIcon as U, ExternalLinkIcon as ee, XIcon as te, CheckIcon as re, TurtleIcon as ae, ChevronDown as ne, ChevronsRight as oe, Edit3 as se } from "lucide-react";
+import { ChevronDownIcon as D, ChevronUpIcon as Q, ExternalLinkIcon as ee, XIcon as te, CheckIcon as re, TurtleIcon as ae, ChevronDown as ne, ChevronsRight as oe, Edit3 as se } from "lucide-react";
 import * as ie from "@radix-ui/react-separator";
 import { useTheme as le } from "next-themes";
 import { Toaster as de } from "sonner";
@@ -16,8 +16,8 @@ import * as H from "@radix-ui/react-toggle-group";
 import * as ce from "@radix-ui/react-toggle";
 import * as L from "@radix-ui/react-tooltip";
 import { Slot as me } from "@radix-ui/react-slot";
-function s(...t) {
-  return q(X(t));
+function i(...t) {
+  return X(U(t));
 }
 const A = N(
   "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",
@@ -50,26 +50,26 @@ const A = N(
     }
   }
 ), G = b.forwardRef(
-  ({ className: t, variant: r, size: a, cursor: o, type: d, prompt: c, ...l }, n) => c ? /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+  ({ className: t, variant: r, size: a, cursor: s, type: l, prompt: c, ...d }, n) => c ? /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e("span", { className: "text-primary text-sm font-medium shrink-0", children: c }),
     /* @__PURE__ */ e(
       "input",
       {
-        type: d,
+        type: l,
         "data-slot": "input",
-        className: s(A({ variant: r, size: a, cursor: o, className: t })),
+        className: i(A({ variant: r, size: a, cursor: s, className: t })),
         ref: n,
-        ...l
+        ...d
       }
     )
   ] }) : /* @__PURE__ */ e(
     "input",
     {
-      type: d,
+      type: l,
       "data-slot": "input",
-      className: s(A({ variant: r, size: a, cursor: o, className: t })),
+      className: i(A({ variant: r, size: a, cursor: s, className: t })),
       ref: n,
-      ...l
+      ...d
     }
   )
 );
@@ -79,10 +79,10 @@ function Ye({
   ...r
 }) {
   return /* @__PURE__ */ e(
-    Q.Root,
+    J.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",
         t
       ),
@@ -95,11 +95,11 @@ function ue({
   children: r,
   ...a
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ o(
     C.Root,
     {
       "data-slot": "scroll-area",
-      className: s("relative overflow-hidden", t),
+      className: i("relative overflow-hidden", t),
       ...a,
       children: [
         /* @__PURE__ */ e(
@@ -126,7 +126,7 @@ function fe({
     {
       "data-slot": "scroll-area-scrollbar",
       orientation: r,
-      className: s(
+      className: i(
         "flex touch-none p-px transition-colors select-none",
         r === "vertical" && "h-full w-2.5 border-l border-l-transparent",
         r === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
@@ -149,23 +149,23 @@ function pe({ ...t }) {
 function Ze({ ...t }) {
   return /* @__PURE__ */ e(v.Group, { "data-slot": "select-group", ...t });
 }
-function Xe({ ...t }) {
+function Ue({ ...t }) {
   return /* @__PURE__ */ e(v.Value, { "data-slot": "select-value", ...t });
 }
 function xe({
   className: t,
   size: r = "default",
   variant: a = "bordered",
-  children: o,
-  ...d
+  children: s,
+  ...l
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ o(
     v.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": r,
       "data-variant": a,
-      className: s(
+      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 data-[size=xs]:h-8 data-[size=xs]:px-4 data-[size=xs]:py-2 data-[size=xs]:text-xs focus:ring-0",
         // Border variants
@@ -176,9 +176,9 @@ function xe({
         "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
         t
       ),
-      ...d,
+      ...l,
       children: [
-        o,
+        s,
         /* @__PURE__ */ e(v.Icon, { asChild: !0, children: /* @__PURE__ */ e(D, { className: "size-4 opacity-50" }) })
       ]
     }
@@ -188,26 +188,26 @@ function he({
   className: t,
   children: r,
   position: a = "popper",
-  ...o
+  ...s
 }) {
-  return /* @__PURE__ */ e(v.Portal, { children: /* @__PURE__ */ i(
+  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",
         t
       ),
       position: a,
-      ...o,
+      ...s,
       children: [
         /* @__PURE__ */ e(be, {}),
         /* @__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"
             ),
@@ -219,12 +219,12 @@ function he({
     }
   ) });
 }
-function qe({ className: t, ...r }) {
+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", t),
+      className: i("text-muted-foreground px-2 py-1.5 text-xs", t),
       ...r
     }
   );
@@ -234,11 +234,11 @@ function ge({
   children: r,
   ...a
 }) {
-  return /* @__PURE__ */ i(
+  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",
@@ -249,7 +249,7 @@ function ge({
       ),
       ...a,
       children: [
-        /* @__PURE__ */ i("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" }) })
         ] }),
@@ -258,7 +258,7 @@ function ge({
     }
   );
 }
-function Je({
+function qe({
   className: t,
   ...r
 }) {
@@ -266,7 +266,7 @@ function Je({
     v.Separator,
     {
       "data-slot": "select-separator",
-      className: s("bg-border pointer-events-none -mx-1 my-1 h-px", t),
+      className: i("bg-border pointer-events-none -mx-1 my-1 h-px", t),
       ...r
     }
   );
@@ -279,9 +279,9 @@ function be({
     v.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: s("flex cursor-default items-center justify-center py-1", t),
+      className: i("flex cursor-default items-center justify-center py-1", t),
       ...r,
-      children: /* @__PURE__ */ e(U, { className: "size-4" })
+      children: /* @__PURE__ */ e(Q, { className: "size-4" })
     }
   );
 }
@@ -293,17 +293,17 @@ function ve({
     v.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: s("flex cursor-default items-center justify-center py-1", t),
+      className: i("flex cursor-default items-center justify-center py-1", t),
       ...r,
       children: /* @__PURE__ */ e(D, { className: "size-4" })
     }
   );
 }
-function Qe({
+function Je({
   className: t,
   orientation: r = "horizontal",
   decorative: a = !0,
-  ...o
+  ...s
 }) {
   return /* @__PURE__ */ e(
     ie.Root,
@@ -311,15 +311,15 @@ function Qe({
       "data-slot": "separator",
       decorative: a,
       orientation: r,
-      className: s(
+      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",
         t
       ),
-      ...o
+      ...s
     }
   );
 }
-const Ue = ({ ...t }) => {
+const Qe = ({ ...t }) => {
   const { theme: r = "system" } = le();
   return /* @__PURE__ */ e(
     de,
@@ -343,7 +343,7 @@ function et({
     $.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",
         t
       ),
@@ -352,7 +352,7 @@ function et({
         $.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"
           )
         }
@@ -384,14 +384,14 @@ function tt({
   className: t,
   variant: r,
   size: a,
-  ...o
+  ...s
 }) {
   return /* @__PURE__ */ e(
     ce.Root,
     {
       "data-slot": "toggle",
-      className: s(M({ variant: r, size: a, className: t })),
-      ...o
+      className: i(M({ variant: r, size: a, className: t })),
+      ...s
     }
   );
 }
@@ -403,8 +403,8 @@ function rt({
   className: t,
   variant: r,
   size: a,
-  children: o,
-  ...d
+  children: s,
+  ...l
 }) {
   return /* @__PURE__ */ e(
     H.Root,
@@ -412,12 +412,12 @@ function rt({
       "data-slot": "toggle-group",
       "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",
         t
       ),
-      ...d,
-      children: /* @__PURE__ */ e(W.Provider, { value: { variant: r, size: a }, children: o })
+      ...l,
+      children: /* @__PURE__ */ e(W.Provider, { value: { variant: r, size: a }, children: s })
     }
   );
 }
@@ -425,8 +425,8 @@ function at({
   className: t,
   children: r,
   variant: a,
-  size: o,
-  ...d
+  size: s,
+  ...l
 }) {
   const c = b.useContext(W);
   return /* @__PURE__ */ e(
@@ -434,16 +434,16 @@ function at({
     {
       "data-slot": "toggle-group-item",
       "data-variant": c.variant || a,
-      "data-size": c.size || o,
-      className: s(
+      "data-size": c.size || s,
+      className: i(
         M({
           variant: c.variant || a,
-          size: c.size || o
+          size: c.size || s
         }),
         "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",
         t
       ),
-      ...d,
+      ...l,
       children: r
     }
   );
@@ -475,18 +475,18 @@ function st({
   className: t,
   sideOffset: r = 0,
   children: a,
-  ...o
+  ...s
 }) {
-  return /* @__PURE__ */ e(L.Portal, { children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(L.Portal, { children: /* @__PURE__ */ o(
     L.Content,
     {
       "data-slot": "tooltip-content",
       sideOffset: r,
-      className: s(
+      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",
         t
       ),
-      ...o,
+      ...s,
       children: [
         a,
         /* @__PURE__ */ e(L.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
@@ -531,15 +531,15 @@ function V({
   className: t,
   variant: r,
   size: a,
-  rounded: o,
-  asChild: d = !1,
+  rounded: s,
+  asChild: l = !1,
   ...c
 }) {
   return /* @__PURE__ */ e(
-    d ? me : "button",
+    l ? me : "button",
     {
       "data-slot": "button",
-      className: s(Ne({ variant: r, size: a, rounded: o, className: t })),
+      className: i(Ne({ variant: r, size: a, rounded: s, className: t })),
       ...c
     }
   );
@@ -586,16 +586,16 @@ function w({
   className: t,
   variant: r,
   padding: a,
-  rounded: o,
-  gradientBorder: d,
+  rounded: s,
+  gradientBorder: l,
   ...c
 }) {
-  const l = d ?? (r === "container" ? "white" : "none"), n = l !== "none", f = T({ gradientBorder: l }), p = s(
-    T({ variant: r, padding: a, rounded: o, gradientBorder: "none", className: t })
+  const d = l ?? (r === "container" ? "white" : "none"), n = d !== "none", f = T({ gradientBorder: d }), p = i(
+    T({ variant: r, padding: a, rounded: s, gradientBorder: "none", className: t })
   );
   if (n) {
-    const u = T({ rounded: o });
-    return /* @__PURE__ */ e("div", { className: s(f, u, "p-[1px] h-full"), "data-slot": "card-wrapper", children: /* @__PURE__ */ e("div", { "data-slot": "card", className: s(p, "h-full"), ...c }) });
+    const u = T({ rounded: s });
+    return /* @__PURE__ */ e("div", { className: i(f, u, "p-[1px] h-full"), "data-slot": "card-wrapper", children: /* @__PURE__ */ e("div", { "data-slot": "card", className: i(p, "h-full"), ...c }) });
   }
   return /* @__PURE__ */ e("div", { "data-slot": "card", className: p, ...c });
 }
@@ -604,7 +604,7 @@ function it({ className: t, ...r }) {
     "div",
     {
       "data-slot": "card-header",
-      className: s("flex flex-col space-y-1.5 p-6", t),
+      className: i("flex flex-col space-y-1.5 p-6", t),
       ...r
     }
   );
@@ -614,7 +614,7 @@ function lt({ className: t, children: r, ...a }) {
     "h3",
     {
       "data-slot": "card-title",
-      className: s("text-2xl font-semibold leading-none tracking-tight", t),
+      className: i("text-2xl font-semibold leading-none tracking-tight", t),
       ...a,
       children: r
     }
@@ -625,20 +625,20 @@ function dt({ className: t, ...r }) {
     "p",
     {
       "data-slot": "card-description",
-      className: s("text-sm text-muted-foreground", t),
+      className: i("text-sm text-muted-foreground", t),
       ...r
     }
   );
 }
 function ct({ className: t, ...r }) {
-  return /* @__PURE__ */ e("div", { "data-slot": "card-content", className: s("p-6 pt-0", t), ...r });
+  return /* @__PURE__ */ e("div", { "data-slot": "card-content", className: i("p-6 pt-0", t), ...r });
 }
 function mt({ className: t, ...r }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "card-footer",
-      className: s("flex items-center p-6 pt-0", t),
+      className: i("flex items-center p-6 pt-0", t),
       ...r
     }
   );
@@ -665,13 +665,13 @@ const we = N(
     }
   }
 ), O = b.forwardRef(
-  ({ className: t, variant: r, size: a, asChild: o = !1, ...d }, c) => /* @__PURE__ */ e(
+  ({ className: t, variant: r, size: a, asChild: s = !1, ...l }, c) => /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "chip",
-      className: s(we({ variant: r, size: a, className: t })),
+      className: i(we({ variant: r, size: a, className: t })),
       ref: c,
-      ...d
+      ...l
     }
   )
 );
@@ -697,34 +697,34 @@ const ke = N(
     }
   }
 ), K = b.forwardRef(
-  ({ className: t, size: r, variant: a, children: o, spinning: d = !0, ...c }, l) => /* @__PURE__ */ i(
+  ({ className: t, size: r, variant: a, children: s, spinning: l = !0, ...c }, d) => /* @__PURE__ */ o(
     "div",
     {
-      ref: l,
-      className: s(ke({ size: r, variant: a }), t),
+      ref: d,
+      className: i(ke({ size: r, variant: a }), t),
       ...c,
       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",
               {
-                "animate-spin": d,
-                "animate-none": !d
+                "animate-spin": l,
+                "animate-none": !l
               }
             ),
             style: {
-              background: d ? "conic-gradient(from 0deg, transparent 0deg, var(--primary) 180deg, transparent 360deg)" : "conic-gradient(from 0deg, var(--primary) 0deg, var(--primary) 360deg)",
+              background: l ? "conic-gradient(from 0deg, transparent 0deg, var(--primary) 180deg, transparent 360deg)" : "conic-gradient(from 0deg, var(--primary) 0deg, var(--primary) 360deg)",
               padding: "1px",
               borderRadius: "9999px"
             },
             children: /* @__PURE__ */ e(
               "div",
               {
-                className: s(
+                className: i(
                   "w-full h-full rounded-full",
                   a === "transparent" ? "bg-transparent" : "bg-background"
                 )
@@ -732,7 +732,7 @@ const ke = N(
             )
           }
         ),
-        /* @__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: s })
       ]
     }
   )
@@ -771,36 +771,36 @@ const Se = N("inline-flex items-center gap-2 font-medium", {
   base: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-8 h-8"
-}, j = b.forwardRef(
+}, I = b.forwardRef(
   ({
     className: t,
     variant: r,
     textSize: a,
-    icon: o,
-    children: d,
+    icon: s,
+    children: l,
     iconPosition: c = "left",
-    iconSize: l = "sm",
+    iconSize: d = "sm",
     iconClassName: n,
     ...f
   }, p) => {
     const u = () => {
       var m;
-      return typeof o == "string" ? /* @__PURE__ */ e(
+      return typeof s == "string" ? /* @__PURE__ */ e(
         "img",
         {
-          src: o,
+          src: s,
           alt: "",
-          className: s(E[l], "object-contain", n)
+          className: i(E[d], "object-contain", n)
         }
-      ) : /* @__PURE__ */ e("span", { className: s("shrink-0", n), children: b.isValidElement(o) ? b.cloneElement(o, {
-        className: s(E[l], (m = o.props) == null ? void 0 : m.className)
-      }) : o });
+      ) : /* @__PURE__ */ e("span", { className: i("shrink-0", n), children: b.isValidElement(s) ? b.cloneElement(s, {
+        className: i(E[d], (m = s.props) == null ? void 0 : m.className)
+      }) : s });
     };
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: p,
-        className: s(
+        className: i(
           Se({ variant: r, textSize: a }),
           c === "right" && "flex-row-reverse",
           t
@@ -808,13 +808,13 @@ const Se = N("inline-flex items-center gap-2 font-medium", {
         ...f,
         children: [
           u(),
-          /* @__PURE__ */ e("span", { children: d })
+          /* @__PURE__ */ e("span", { children: l })
         ]
       }
     );
   }
 );
-j.displayName = "LabelWithIcon";
+I.displayName = "LabelWithIcon";
 const ze = N("flex w-full", {
   variants: {
     variant: {
@@ -842,25 +842,25 @@ const ze = N("flex w-full", {
     }
   }
 ), _e = b.forwardRef(
-  ({ className: t, variant: r, activeValue: a, children: o, ...d }, c) => {
-    const l = b.useRef(null), n = b.useRef(null), f = b.useCallback(() => {
-      if (r !== "menuBar" || !l.current || !n.current) return;
-      const p = l.current.querySelector('[data-active="true"]');
+  ({ className: t, variant: r, activeValue: a, children: s, ...l }, c) => {
+    const d = b.useRef(null), n = b.useRef(null), f = b.useCallback(() => {
+      if (r !== "menuBar" || !d.current || !n.current) return;
+      const p = d.current.querySelector('[data-active="true"]');
       p && (n.current.style.width = `${p.offsetWidth}px`, n.current.style.left = `${p.offsetLeft}px`);
     }, [r]);
     return b.useEffect(() => {
       if (r !== "menuBar") return;
       f();
       const p = new ResizeObserver(f);
-      return l.current && p.observe(l.current), () => {
+      return d.current && p.observe(d.current), () => {
         p.disconnect();
       };
-    }, [a, f, r]), /* @__PURE__ */ i(
+    }, [a, f, r]), /* @__PURE__ */ o(
       "nav",
       {
-        ref: c || l,
-        className: s(ze({ variant: r, className: t })),
-        ...d,
+        ref: c || d,
+        className: i(ze({ variant: r, className: t })),
+        ...l,
         children: [
           r === "menuBar" && /* @__PURE__ */ e(
             "div",
@@ -869,7 +869,7 @@ const ze = N("flex w-full", {
               className: "absolute bottom-0 h-full origin-left rounded-full bg-secondary transition-all duration-300"
             }
           ),
-          o
+          s
         ]
       }
     );
@@ -877,28 +877,28 @@ const ze = N("flex w-full", {
 );
 _e.displayName = "NavigationBar";
 const Ce = b.forwardRef(
-  ({ className: t, variant: r, active: a, value: o, ...d }, c) => {
+  ({ className: t, variant: r, active: a, value: s, ...l }, c) => {
     const n = r === "menuBarDefault" || r === "menuBarActive" ? a ? "menuBarActive" : "menuBarDefault" : a ? "active" : r || "default", f = n === "menuBarDefault" || n === "menuBarActive";
     return /* @__PURE__ */ e(
       "button",
       {
         ref: c,
         "data-active": a,
-        "data-value": o,
-        className: s(
+        "data-value": s,
+        className: i(
           Le({
             variant: n,
             className: t
           }),
           !f && "px-4 py-2 rounded-md"
         ),
-        ...d
+        ...l
       }
     );
   }
 );
 Ce.displayName = "NavigationItem";
-const je = N("space-y-1", {
+const Ie = N("space-y-1", {
   variants: {
     size: {
       sm: "p-2",
@@ -915,7 +915,7 @@ const je = N("space-y-1", {
     size: "default",
     align: "center"
   }
-}), Ie = N("font-bold", {
+}), je = N("font-bold", {
   variants: {
     color: {
       primary: "text-foreground",
@@ -952,36 +952,27 @@ const je = N("space-y-1", {
     title: t,
     value: r,
     color: a = "primary",
-    valueSize: o = "default",
-    titleSize: d = "default",
+    valueSize: s = "default",
+    titleSize: l = "default",
     size: c = "default",
-    align: l = "center",
-    icon: n,
+    align: d = "center",
+    iconUrl: n,
     subtitle: f,
     className: p,
     ...u
-  }, m) => /* @__PURE__ */ i(
+  }, m) => /* @__PURE__ */ o(
     w,
     {
       ref: m,
       variant: "item",
-      className: s(je({ size: c, align: l }), p),
+      className: i(Ie({ size: c, align: d }), p),
       ...u,
       children: [
-        n && /* @__PURE__ */ e(
-          "div",
-          {
-            className: s(
-              "flex mb-2",
-              l === "left" && "justify-start",
-              l === "center" && "justify-center",
-              l === "right" && "justify-end"
-            ),
-            children: n
-          }
-        ),
-        /* @__PURE__ */ e("p", { className: Be({ size: d }), children: t }),
-        /* @__PURE__ */ e("p", { className: Ie({ color: a, size: o }), children: r }),
+        /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+          n && /* @__PURE__ */ e("img", { src: n, alt: `${t}-icon`, className: "w-5 h-5 rounded-full" }),
+          /* @__PURE__ */ e("p", { className: Be({ size: l }), children: t })
+        ] }),
+        /* @__PURE__ */ e("p", { className: je({ color: a, size: s }), children: r }),
         f && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground/70", children: f })
       ]
     }
@@ -992,23 +983,23 @@ function ut({
   className: t,
   title: r,
   titleIcon: a,
-  url: o,
-  topCards: d,
+  url: s,
+  topCards: l,
   bottomCards: c
 }) {
-  const l = /* @__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(w, { variant: "container", className: s("space-y-4", t), children: /* @__PURE__ */ e("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ i("div", { className: "space-y-4", children: [
-    (r || a) && /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ e(j, { icon: a || l, textSize: "lg", iconSize: "lg", children: r }),
-      o && /* @__PURE__ */ e(V, { variant: "transparentWhite", size: "icon", className: "ml-auto", children: /* @__PURE__ */ e("a", { href: o, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(ee, {}) }) })
+  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(w, { variant: "container", 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__ */ o("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ e(I, { icon: a || d, textSize: "lg", iconSize: "lg", children: r }),
+      s && /* @__PURE__ */ e(V, { variant: "transparentWhite", size: "icon", className: "ml-auto", children: /* @__PURE__ */ e("a", { href: s, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(ee, {}) }) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3", children: d.map((n, f) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3", children: l.map((n, f) => /* @__PURE__ */ e(
       R,
       {
         title: n.title,
         value: n.value,
         color: n.color || "primary",
-        icon: n.icon,
+        iconUrl: n.iconUrl,
         size: "sm",
         valueSize: "sm",
         titleSize: "sm",
@@ -1019,6 +1010,7 @@ function ut({
     /* @__PURE__ */ e("div", { className: "space-y-2", children: c.map((n, f) => /* @__PURE__ */ e(
       R,
       {
+        iconUrl: n.iconUrl,
         title: n.title,
         value: n.value,
         color: n.color || "primary",
@@ -1036,12 +1028,12 @@ function ft({
   items: t,
   itemKey: r,
   columns: a,
-  defaultComparator: o,
-  hasScrollableContainer: d,
+  defaultComparator: s,
+  hasScrollableContainer: l,
   render: c,
-  className: l
+  className: d
 }) {
-  const [n, f] = I(o || null), [p, u] = I("desc"), m = (g) => {
+  const [n, f] = j(s || null), [p, u] = j("desc"), m = (g) => {
     n === g ? u(p === "asc" ? "desc" : "asc") : (f(g), u("desc"));
   }, x = [...t].sort((g, k) => {
     if (!n) return 0;
@@ -1053,21 +1045,21 @@ function ft({
   return /* @__PURE__ */ e(
     "div",
     {
-      className: s(
+      className: i(
         "w-full overflow-auto",
-        d && "max-h-[600px] overflow-y-auto",
-        l
+        l && "max-h-[600px] overflow-y-auto",
+        d
       ),
-      children: /* @__PURE__ */ i("table", { className: "managed-table w-full", children: [
+      children: /* @__PURE__ */ o("table", { className: "managed-table w-full", children: [
         /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: a.map((g) => /* @__PURE__ */ e(
           "th",
           {
-            className: s(
+            className: i(
               "px-3 py-1 text-left text-xs font-normal text-muted-foreground h-6",
               g.comparator && "cursor-pointer select-none"
             ),
             onClick: () => g.comparator && m(g.name),
-            children: /* @__PURE__ */ i("span", { className: "flex items-center gap-1", children: [
+            children: /* @__PURE__ */ o("span", { className: "flex items-center gap-1", children: [
               g.name,
               g.comparator && n === g.name && /* @__PURE__ */ e("span", { className: "text-xs", children: p === "asc" ? "↑" : "↓" })
             ] })
@@ -1080,17 +1072,17 @@ function ft({
   );
 }
 function pt({ children: t, className: r, ...a }) {
-  return /* @__PURE__ */ e("td", { className: s("p-2 align-middle text-foreground", r), ...a, children: t });
+  return /* @__PURE__ */ e("td", { className: i("p-2 align-middle text-foreground", r), ...a, children: t });
 }
 const Te = b.forwardRef(
   ({
     className: t,
     icon: r,
     name: a,
-    tvl: o,
-    turtleBoost: d,
+    tvl: s,
+    turtleBoost: l,
     yield: c,
-    onSelect: l,
+    onSelect: d,
     selected: n = !1,
     ...f
   }, p) => {
@@ -1101,25 +1093,25 @@ const Te = b.forwardRef(
         ref: p,
         variant: "container",
         padding: "sm",
-        className: s(
+        className: i(
           "cursor-pointer transition-all duration-200 hover:shadow-md w-full",
           n && "ring-2 ring-primary ring-offset-2",
           t
         ),
-        onClick: l,
+        onClick: d,
         ...f,
-        children: /* @__PURE__ */ i("div", { className: "flex gap-4 items-start justify-between", children: [
-          /* @__PURE__ */ i("div", { className: "flex flex-col min-w-0 flex-1 items-start justify-start gap-1", children: [
-            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground truncate", children: /* @__PURE__ */ e(j, { icon: r || u, textSize: "sm", iconSize: "sm", children: a }) }),
-            /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
-              o && /* @__PURE__ */ i("span", { className: "text-xs text-muted-foreground", children: [
+        children: /* @__PURE__ */ o("div", { className: "flex gap-4 items-start justify-between", children: [
+          /* @__PURE__ */ o("div", { className: "flex flex-col min-w-0 flex-1 items-start justify-start gap-1", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground truncate", children: /* @__PURE__ */ e(I, { icon: r || u, textSize: "sm", iconSize: "sm", children: a }) }),
+            /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+              s && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
                 "TVL: ",
-                o
+                s
               ] }),
-              d && /* @__PURE__ */ i("span", { className: "text-xs text-muted-foreground", children: [
-                o ? " | " : "",
+              l && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
+                s ? " | " : "",
                 " Turtle Boost: ",
-                d
+                l
               ] })
             ] })
           ] }),
@@ -1135,10 +1127,10 @@ const Ve = b.forwardRef(
     className: t,
     title: r,
     titleIcon: a,
-    yield: o,
-    details: d = [],
+    yield: s,
+    details: l = [],
     badges: c = [],
-    externalLink: l,
+    externalLink: d,
     ...n
   }, f) => {
     const p = /* @__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" }) }) }), u = () => /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
@@ -1150,25 +1142,25 @@ const Ve = b.forwardRef(
         d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
       }
     ) });
-    return /* @__PURE__ */ i(w, { ref: f, className: s("p-4 space-y-4", t), ...n, children: [
-      (r || a) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ e("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ e(j, { icon: a || p, textSize: "lg", iconSize: "lg", children: r }) }),
-        o && /* @__PURE__ */ i("div", { className: "text-right", children: [
-          /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-primary", children: o }),
+    return /* @__PURE__ */ o(w, { ref: f, className: i("p-4 space-y-4", t), ...n, children: [
+      (r || a) && /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ e(I, { icon: a || p, textSize: "lg", iconSize: "lg", children: r }) }),
+        s && /* @__PURE__ */ o("div", { className: "text-right", children: [
+          /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-primary", children: s }),
           /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "APY" })
         ] })
       ] }),
-      d.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-3", children: d.map((m, x) => /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(w, { className: "p-3", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+      l.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-3", children: l.map((m, x) => /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(w, { className: "p-3", children: /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
           m.icon,
           /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: m.label })
         ] }),
-        /* @__PURE__ */ e("span", { className: s("text-sm font-medium", m.highlight && "text-primary"), children: m.value })
+        /* @__PURE__ */ e("span", { className: i("text-sm font-medium", m.highlight && "text-primary"), children: m.value })
       ] }) }) }, x)) }),
-      c.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: c.map((m, x) => /* @__PURE__ */ i(
+      c.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: c.map((m, x) => /* @__PURE__ */ o(
         "div",
         {
-          className: s(
+          className: i(
             "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium",
             m.variant === "secondary" && "bg-secondary text-secondary-foreground",
             m.variant === "outline" && "border border-border bg-background",
@@ -1181,16 +1173,16 @@ const Ve = b.forwardRef(
         },
         x
       )) }),
-      l && /* @__PURE__ */ e("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ i(
+      d && /* @__PURE__ */ e("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ o(
         "a",
         {
-          href: l.href,
+          href: d.href,
           target: "_blank",
           rel: "noopener noreferrer",
           className: "inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors",
           children: [
-            l.icon,
-            l.text,
+            d.icon,
+            d.text,
             /* @__PURE__ */ e(u, {})
           ]
         }
@@ -1204,10 +1196,10 @@ const Re = b.forwardRef(
     className: t,
     title: r,
     description: a,
-    txHash: o,
-    explorerUrl: d,
+    txHash: s,
+    explorerUrl: l,
     estimatedTime: c,
-    amount: l,
+    amount: d,
     token: n,
     protocol: f,
     steps: p = [],
@@ -1228,69 +1220,69 @@ const Re = b.forwardRef(
         d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
       }
     ) }), 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" }) }), P = (h) => h.length <= 12 ? h : `${h.slice(0, 6)}...${h.slice(-6)}`;
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ o(
       w,
       {
         ref: S,
-        className: s(
+        className: i(
           "p-4 text-center space-y-3",
           u === "compact" && "p-3 space-y-2",
           t
         ),
         ..._,
         children: [
-          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(K, { spinning: !m && !x, size: u === "compact" ? "sm" : "default", children: x ? /* @__PURE__ */ e(te, { className: s(u === "compact" ? "w-5 h-5" : "w-6 h-6", "text-destructive") }) : m ? /* @__PURE__ */ e(re, { className: s(u === "compact" ? "w-5 h-5" : "w-6 h-6", "text-primary") }) : /* @__PURE__ */ e(ae, { className: s(u === "compact" ? "w-5 h-5" : "w-6 h-6", "text-primary") }) }) }),
-          /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(K, { spinning: !m && !x, size: u === "compact" ? "sm" : "default", children: x ? /* @__PURE__ */ e(te, { className: i(u === "compact" ? "w-5 h-5" : "w-6 h-6", "text-destructive") }) : m ? /* @__PURE__ */ e(re, { className: i(u === "compact" ? "w-5 h-5" : "w-6 h-6", "text-primary") }) : /* @__PURE__ */ e(ae, { className: i(u === "compact" ? "w-5 h-5" : "w-6 h-6", "text-primary") }) }) }),
+          /* @__PURE__ */ o("div", { className: "space-y-1", children: [
             /* @__PURE__ */ e(
               "h3",
               {
-                className: s(
+                className: i(
                   "font-medium text-foreground",
                   u === "compact" ? "text-xs" : "text-sm"
                 ),
                 children: r || z
               }
             ),
-            /* @__PURE__ */ e("p", { className: s("text-muted-foreground", "text-xs"), children: a || B })
+            /* @__PURE__ */ e("p", { className: i("text-muted-foreground", "text-xs"), children: a || B })
           ] }),
-          m && !x && (l || n || f) && /* @__PURE__ */ i("div", { className: "p-2 bg-muted/50 rounded-lg space-y-1", children: [
-            l && n && /* @__PURE__ */ i("div", { className: "text-xs font-medium", children: [
-              l,
+          m && !x && (d || n || f) && /* @__PURE__ */ o("div", { className: "p-2 bg-muted/50 rounded-lg space-y-1", children: [
+            d && n && /* @__PURE__ */ o("div", { className: "text-xs font-medium", children: [
+              d,
               " ",
               n
             ] }),
-            f && /* @__PURE__ */ i("div", { className: "text-xs text-muted-foreground", children: [
+            f && /* @__PURE__ */ o("div", { className: "text-xs text-muted-foreground", children: [
               "via ",
               f
             ] })
           ] }),
-          o && !x && /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+          s && !x && /* @__PURE__ */ o("div", { className: "space-y-1", children: [
             /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "Transaction Hash" }),
-            d ? /* @__PURE__ */ i(
+            l ? /* @__PURE__ */ o(
               "a",
               {
-                href: `${d}/tx/${o}`,
+                href: `${l}/tx/${s}`,
                 target: "_blank",
                 rel: "noopener noreferrer",
                 className: "inline-flex items-center gap-2 text-xs text-primary hover:text-primary/80 transition-colors",
                 children: [
-                  P(o),
+                  P(s),
                   /* @__PURE__ */ e(F, {})
                 ]
               }
-            ) : /* @__PURE__ */ e("div", { className: "text-xs font-mono text-foreground", children: P(o) })
+            ) : /* @__PURE__ */ e("div", { className: "text-xs font-mono text-foreground", children: P(s) })
           ] }),
-          !m && !x && c && /* @__PURE__ */ i("div", { className: "text-xs text-muted-foreground", children: [
+          !m && !x && c && /* @__PURE__ */ o("div", { className: "text-xs text-muted-foreground", children: [
             "Estimated time: ",
             c
           ] }),
-          !m && !x && p.length > 0 && /* @__PURE__ */ i("div", { className: "space-y-2 pt-2 border-t border-border", children: [
+          !m && !x && p.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: p.map((h, Z) => /* @__PURE__ */ i("div", { className: "flex items-center gap-3 text-left", children: [
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: p.map((h, 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",
                     h.completed && "bg-primary border-primary text-primary-foreground",
                     h.current && !h.completed && "border-primary text-primary animate-pulse",
@@ -1299,11 +1291,11 @@ const Re = b.forwardRef(
                   children: h.completed ? /* @__PURE__ */ e(Y, {}) : h.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__ */ i("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-xs",
                       h.completed && "text-foreground",
                       h.current && !h.completed && "text-foreground font-medium",
@@ -1312,16 +1304,16 @@ const Re = b.forwardRef(
                     children: h.label
                   }
                 ),
-                h.txHash && d && /* @__PURE__ */ i(
+                h.txHash && l && /* @__PURE__ */ o(
                   "a",
                   {
-                    href: `${d}/tx/${h.txHash}`,
+                    href: `${l}/tx/${h.txHash}`,
                     target: "_blank",
                     rel: "noopener noreferrer",
                     className: "inline-flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors ml-2",
                     title: `View transaction: ${h.txHash}`,
                     children: [
-                      /* @__PURE__ */ i("span", { className: "font-mono", children: [
+                      /* @__PURE__ */ o("span", { className: "font-mono", children: [
                         h.txHash.slice(0, 6),
                         "...",
                         h.txHash.slice(-4)
@@ -1333,10 +1325,10 @@ const Re = b.forwardRef(
               ] })
             ] }, Z)) })
           ] }),
-          (m || x) && y && (g || k) && /* @__PURE__ */ i(
+          (m || x) && y && (g || k) && /* @__PURE__ */ o(
             "div",
             {
-              className: s(
+              className: i(
                 "flex gap-2 pt-2",
                 u === "compact" ? "flex-col" : "flex-row justify-center"
               ),
@@ -1372,22 +1364,22 @@ const De = ({
   tokens: t,
   value: r,
   onValueChange: a,
-  placeholder: o = "Select token",
-  disabled: d,
+  placeholder: s = "Select token",
+  disabled: l,
   className: c,
-  variant: l = "bordered",
+  variant: d = "bordered",
   size: n = "default"
 }) => {
   const f = r || (t.length > 0 ? t[0].address : void 0), p = t.find((u) => u.address === f);
-  return J(() => {
+  return q(() => {
     !r && t.length > 0 && a && a(t[0].address);
-  }, [r, t, a]), /* @__PURE__ */ i(pe, { value: f, onValueChange: a, disabled: d, children: [
+  }, [r, t, a]), /* @__PURE__ */ o(pe, { value: f, onValueChange: a, disabled: l, children: [
     /* @__PURE__ */ e(
       xe,
       {
-        variant: l,
+        variant: d,
         size: n,
-        className: s(
+        className: i(
           "w-auto min-w-[80px] bg-muted hover:bg-muted/80 rounded-md font-medium",
           "focus:ring-2 focus:ring-primary/20 focus:outline-none",
           n === "xs" && "min-w-[80px] gap-2",
@@ -1395,10 +1387,10 @@ const De = ({
           n === "default" && "min-w-[80px] gap-1.5",
           c
         ),
-        children: p ? /* @__PURE__ */ i(
+        children: p ? /* @__PURE__ */ o(
           "div",
           {
-            className: s(
+            className: i(
               "flex items-center",
               n === "xs" && "gap-2",
               n === "sm" && "gap-1.5",
@@ -1408,7 +1400,7 @@ const De = ({
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: s(
+                  className: i(
                     "flex items-center justify-center",
                     n === "xs" && "w-3.5 h-3",
                     n === "sm" && "w-4 h-3.5",
@@ -1420,7 +1412,7 @@ const De = ({
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: s(
+                  className: i(
                     "font-medium",
                     n === "xs" && "text-xs",
                     n === "sm" && "text-sm",
@@ -1434,42 +1426,48 @@ const De = ({
         ) : /* @__PURE__ */ e(
           "span",
           {
-            className: s(
+            className: i(
               "text-muted-foreground",
               n === "xs" && "text-xs",
               n === "sm" && "text-sm",
               n === "default" && "text-sm"
             ),
-            children: o
+            children: s
           }
         )
       }
     ),
-    /* @__PURE__ */ e(he, { className: "border border-muted", children: t.map((u) => /* @__PURE__ */ e(ge, { value: u.address, className: "cursor-pointer py-2", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ e(
-        "span",
-        {
-          className: s(
-            "flex items-center justify-center",
-            n === "xs" && "w-3.5 h-3.5",
-            n === "sm" && "w-4 h-4",
-            n === "default" && "w-5 h-4"
-          ),
-          children: u.icon
-        }
-      ),
-      /* @__PURE__ */ e(
-        "span",
-        {
-          className: s(
-            "font-medium",
-            n === "xs" && "text-xs",
-            n === "sm" && "text-sm",
-            n === "default" && "text-sm"
-          ),
-          children: u.symbol
-        }
-      )
+    /* @__PURE__ */ e(he, { className: "border border-muted gap-2", children: t.map((u) => /* @__PURE__ */ e(ge, { value: u.address, className: "cursor-pointer py-2", children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: i(
+              "flex items-center justify-center",
+              n === "xs" && "w-3.5 h-3.5",
+              n === "sm" && "w-4 h-4",
+              n === "default" && "w-5 h-4"
+            ),
+            children: u.icon
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: i(
+              "font-medium",
+              n === "xs" && "text-xs",
+              n === "sm" && "text-sm",
+              n === "default" && "text-sm"
+            ),
+            children: u.symbol
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o("span", { className: "text-white/80 text-xs", children: [
+        "≈ ",
+        u.balance
+      ] })
     ] }) }, u.address)) })
   ] });
 }, Fe = b.forwardRef(
@@ -1477,10 +1475,10 @@ const De = ({
     className: t,
     value: r = "",
     onChange: a,
-    tokens: o,
-    selectedToken: d,
+    tokens: s,
+    selectedToken: l,
     onTokenChange: c,
-    usdValue: l,
+    usdValue: d,
     balance: n,
     onMaxClick: f,
     placeholder: p = "0",
@@ -1489,12 +1487,12 @@ const De = ({
     isWalletConnected: x = !0,
     ...g
   }, k) => {
-    const y = o.find((S) => S.address === d), _ = (S) => {
+    const y = s.find((S) => S.address === l), _ = (S) => {
       const z = S.target.value;
       /^\d*\.?\d*$/.test(z) && (a == null || a(z));
     };
-    return x ? /* @__PURE__ */ i(w, { ref: k, className: s("space-y-3", u && "opacity-50", t), ...g, children: [
-      /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+    return x ? /* @__PURE__ */ o(w, { ref: k, className: i("space-y-3", u && "opacity-50", t), ...g, children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
           G,
           {
@@ -1509,8 +1507,8 @@ const De = ({
         !m && /* @__PURE__ */ e(
           De,
           {
-            tokens: o,
-            value: d,
+            tokens: s,
+            value: l,
             onValueChange: c,
             disabled: u,
             placeholder: "Select token",
@@ -1520,13 +1518,13 @@ const De = ({
           }
         )
       ] }),
-      /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ e("div", { children: l && /* @__PURE__ */ i("span", { children: [
-          "≈ $",
-          l
+      /* @__PURE__ */ o("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ e("div", { children: d && /* @__PURE__ */ o("span", { children: [
+          "≈ ",
+          d
         ] }) }),
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-          n && /* @__PURE__ */ i("span", { className: "text-xs", children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+          n && /* @__PURE__ */ o("span", { className: "text-xs", children: [
             "Balance: ",
             n,
             " ",
@@ -1538,7 +1536,7 @@ const De = ({
               variant: "default",
               size: "xs",
               onClick: f,
-              className: s(
+              className: i(
                 "cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors text-xs px-2 py-0.5 h-5",
                 u && "cursor-not-allowed opacity-50"
               ),
@@ -1551,7 +1549,7 @@ const De = ({
       w,
       {
         ref: k,
-        className: s("flex items-center justify-center py-8", t),
+        className: i("flex items-center justify-center py-8", t),
         ...g,
         children: /* @__PURE__ */ e("div", { className: "text-center", children: /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "Connect your wallet to continue" }) })
       }
@@ -1564,37 +1562,37 @@ const Pe = b.forwardRef(
     className: t,
     swapFee: r,
     slippageInUsd: a,
-    deposit: o,
-    receive: d,
+    deposit: s,
+    receive: l,
     equivalentInUsd: c,
-    networkFee: l,
+    networkFee: d,
     networkFeeInUsd: n,
     defaultOpen: f = !1,
     slippageSelector: p,
     ...u
   }, m) => {
     const [x, g] = b.useState(f);
-    return /* @__PURE__ */ i(w, { ref: m, className: s("overflow-hidden", t), ...u, children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ o(w, { ref: m, className: i("overflow-hidden", t), ...u, children: [
+      /* @__PURE__ */ o(
         "button",
         {
           onClick: () => g(!x),
           className: "w-full flex items-center justify-between p-1 hover:bg-muted/50 transition-colors",
           children: [
-            /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ i("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: [
+                s,
                 " = ",
-                d
+                l
               ] }),
-              /* @__PURE__ */ i("span", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
                 "(≈ $",
                 c,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ i("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
               ] }),
@@ -1603,20 +1601,20 @@ const Pe = b.forwardRef(
           ]
         }
       ),
-      x && /* @__PURE__ */ i("div", { className: "transition-all animate-in fade-in-0 duration-300 px-2 py-4 space-y-2", children: [
+      x && /* @__PURE__ */ o("div", { className: "transition-all animate-in fade-in-0 duration-300 px-2 py-4 space-y-2", children: [
         p && /* @__PURE__ */ e("div", { className: "text-sm", children: p }),
-        /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-sm", children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center justify-between text-sm", children: [
           /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: "Swap Fee" }),
-          r ? /* @__PURE__ */ i("span", { className: "font-medium", children: [
+          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" })
         ] }),
-        !!l && /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-sm", children: [
+        !!d && /* @__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__ */ i("span", { className: "font-medium", children: [
-            /* @__PURE__ */ e("span", { className: "text-xs text-foreground", children: l }),
-            n && /* @__PURE__ */ i("span", { className: "text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ o("span", { className: "font-medium", children: [
+            /* @__PURE__ */ e("span", { className: "text-xs text-foreground", children: d }),
+            n && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
               "(≈ $",
               n,
               ")"
@@ -1629,12 +1627,12 @@ const Pe = b.forwardRef(
 );
 Pe.displayName = "SwapDetails";
 const xt = ({ className: t, tokens: r = [], defaultOpen: a = !1 }) => {
-  const [o, d] = b.useState(a), c = (l) => /* @__PURE__ */ e("div", { className: "w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-xs font-bold text-primary", children: l.charAt(0) }) });
-  return r.length === 0 ? null : /* @__PURE__ */ i(w, { className: s("overflow-hidden", t), children: [
-    /* @__PURE__ */ i(
+  const [s, l] = b.useState(a), c = (d) => /* @__PURE__ */ e("div", { className: "w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-xs font-bold text-primary", children: d.charAt(0) }) });
+  return r.length === 0 ? null : /* @__PURE__ */ o(w, { className: i("overflow-hidden", t), children: [
+    /* @__PURE__ */ o(
       "button",
       {
-        onClick: () => d(!o),
+        onClick: () => l(!s),
         className: "w-full flex items-center justify-between p-1 hover:bg-muted/50 transition-colors",
         children: [
           /* @__PURE__ */ e("span", { className: "text-xs font-medium", children: "Swap Route" }),
@@ -1642,41 +1640,41 @@ const xt = ({ className: t, tokens: r = [], defaultOpen: a = !1 }) => {
         ]
       }
     ),
-    o && /* @__PURE__ */ e("div", { className: "px-3 pb-3", 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-2 w-full", children: r.map((l, n) => /* @__PURE__ */ i(b.Fragment, { children: [
+    s && /* @__PURE__ */ e("div", { className: "px-3 pb-3", 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-2 w-full", children: r.map((d, n) => /* @__PURE__ */ o(b.Fragment, { children: [
       /* @__PURE__ */ e(w, { variant: "item", className: "rounded-full flex-shrink-0 p-2", children: /* @__PURE__ */ e(
-        j,
+        I,
         {
-          icon: l.icon || c(l.symbol),
+          icon: d.icon || c(d.symbol),
           textSize: "xs",
           iconSize: "xs",
-          children: /* @__PURE__ */ e("span", { className: "gap-2", children: l.symbol })
+          children: /* @__PURE__ */ e("span", { className: "gap-2", children: d.symbol })
         }
       ) }),
       n < r.length - 1 && /* @__PURE__ */ e(oe, { className: "w-3 h-3 text-primary flex-shrink-0" })
-    ] }, `${l.symbol}-${n}`)) }) }) })
+    ] }, `${d.symbol}-${n}`)) }) }) })
   ] });
 };
 function ht({ value: t, onChange: r }) {
-  const [a, o] = I(!1), [d, c] = I(t.toString()), l = () => {
-    o(!0), c(t.toString());
+  const [a, s] = j(!1), [l, c] = j(t.toString()), d = () => {
+    s(!0), c(t.toString());
   }, n = (m) => {
     const x = m.target.value;
     /^\d*\.?\d*$/.test(x) && c(x);
   }, f = () => {
-    const m = parseFloat(d);
-    !isNaN(m) && m >= 0.1 && m <= 100 ? (r(m), o(!1)) : (c(t.toString()), o(!1));
+    const m = parseFloat(l);
+    !isNaN(m) && m >= 0.1 && m <= 100 ? (r(m), s(!1)) : (c(t.toString()), s(!1));
   };
-  return /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+  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__ */ i("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
       a ? /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: d,
+          value: l,
           onChange: n,
           onKeyDown: (m) => {
-            m.key === "Enter" ? f() : m.key === "Escape" && (c(t.toString()), o(!1));
+            m.key === "Enter" ? f() : m.key === "Escape" && (c(t.toString()), s(!1));
           },
           onBlur: () => {
             f();
@@ -1684,14 +1682,14 @@ function ht({ value: t, onChange: r }) {
           className: "w-10 h-5 text-xs text-right bg-transparent border-none outline-none text-foreground focus:ring-0",
           autoFocus: !0
         }
-      ) : /* @__PURE__ */ i("span", { className: "text-xs font-medium text-foreground", children: [
+      ) : /* @__PURE__ */ o("span", { className: "text-xs font-medium text-foreground", children: [
         t,
         "%"
       ] }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: l,
+          onClick: d,
           className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors",
           children: /* @__PURE__ */ e(se, { size: 10 })
         }
@@ -1816,7 +1814,7 @@ export {
   R as InfoCard,
   G as Input,
   Ye as Label,
-  j as LabelWithIcon,
+  I as LabelWithIcon,
   ft as ManagedTable,
   _e as NavigationBar,
   Ce as NavigationItem,
@@ -1830,19 +1828,19 @@ export {
   he as SelectContent,
   Ze as SelectGroup,
   ge as SelectItem,
-  qe as SelectLabel,
+  Xe as SelectLabel,
   ve as SelectScrollDownButton,
   be as SelectScrollUpButton,
-  Je as SelectSeparator,
+  qe as SelectSeparator,
   xe as SelectTrigger,
-  Xe as SelectValue,
-  Qe as Separator,
+  Ue as SelectValue,
+  Je as Separator,
   ht as SlippageSelector,
   Pe as SwapDetails,
   Fe as SwapInput,
   et as Switch,
   pt as TableCell,
-  Ue as Toaster,
+  Qe as Toaster,
   tt as Toggle,
   rt as ToggleGroup,
   at as ToggleGroupItem,
@@ -1855,7 +1853,7 @@ export {
   Ne as buttonVariants,
   T as cardVariants,
   we as chipVariants,
-  s as cn,
+  i as cn,
   ke as iconAnimationVariants,
   A as inputVariants,
   Se as labelWithIconVariants,