@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

package/dist/esm/components/dropdown-menu/dropdown-menu-checkbox-item.js

@@ -1,31 +1,33 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-dropdown-menu";
-import { Check as d } from "lucide-react";
-import * as l from "react";
-import { cn as p } from "../../utils/cn.js";
-import "sonner";
+import * as d from "react";
+import { faCheck as l } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as p } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-const f = l.forwardRef(
-  ({ className: r, children: t, checked: s, onCheckedChange: n, disabled: a, ...i }, c) => /* @__PURE__ */ m(
+import { cn as f } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const u = d.forwardRef(
+  ({ className: r, children: t, checked: n, onCheckedChange: s, disabled: i, ...a }, c) => /* @__PURE__ */ m(
     o.CheckboxItem,
     {
       ref: c,
-      className: p(
+      className: f(
         "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:text-foreground hover:bg-secondary focus-visible:outline-none focus:bg-secondary focus:text-foreground data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         r
       ),
-      checked: s,
-      onCheckedChange: n,
-      disabled: a,
-      ...i,
+      checked: n,
+      onCheckedChange: s,
+      disabled: i,
+      ...a,
       children: [
-        /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(d, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(p, { icon: l, className: "size-4" }) }) }),
         t
       ]
     }
   )
 );
-f.displayName = o.CheckboxItem.displayName;
+u.displayName = o.CheckboxItem.displayName;
 export {
-  f as DropdownMenuCheckboxItem
+  u as DropdownMenuCheckboxItem
 };

package/dist/esm/components/dropdown-menu/dropdown-menu-content.js

@@ -1,16 +1,17 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-dropdown-menu";
 import * as i from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const m = i.forwardRef(({ className: e, sideOffset: a = 4, ...d }, r) => /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
   t.Content,
   {
     ref: r,
     sideOffset: a,
     className: n(
-      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card p-1 text-popover-foreground shadow-lg",
+      "z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-gray-40 p-1 text-popover-foreground shadow-lg",
       "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",
       e
     ),

package/dist/esm/components/dropdown-menu/dropdown-menu-item.js

@@ -1,9 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-dropdown-menu";
 import * as i from "react";
+import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const d = i.forwardRef(({ className: o, inset: r, ...t }, s) => /* @__PURE__ */ n(
   e.Item,
   {

package/dist/esm/components/dropdown-menu/dropdown-menu-label.js

@@ -1,19 +1,20 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-dropdown-menu";
-import * as t from "react";
+import * as a from "react";
+import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const s = t.forwardRef(({ className: m, inset: r, ...e }, p) => /* @__PURE__ */ a(
+import "luxon";
+const s = a.forwardRef(({ className: m, inset: r, ...p }, e) => /* @__PURE__ */ t(
   o.Label,
   {
-    ref: p,
+    ref: e,
     className: i(
       "px-2 py-1.5 text-sm font-semibold",
       r && "pl-8",
       m
     ),
-    ...e
+    ...p
   }
 ));
 s.displayName = o.Label.displayName;

package/dist/esm/components/dropdown-menu/dropdown-menu-radio-item.js

@@ -1,26 +1,28 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-dropdown-menu";
-import { Circle as n } from "lucide-react";
-import * as c from "react";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dropdown-menu";
+import * as s from "react";
+import { faCircle as m } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as d } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const l = c.forwardRef(({ className: o, children: r, ...a }, i) => /* @__PURE__ */ s(
-  t.RadioItem,
+import "luxon";
+const l = s.forwardRef(({ className: t, children: r, ...a }, i) => /* @__PURE__ */ n(
+  o.RadioItem,
   {
     ref: i,
     className: d(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      o
+      t
     ),
     ...a,
     children: [
-      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(n, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(c, { icon: m, className: "size-2 fill-current" }) }) }),
       r
     ]
   }
 ));
-l.displayName = t.RadioItem.displayName;
+l.displayName = o.RadioItem.displayName;
 export {
   l as DropdownMenuRadioItem
 };

package/dist/esm/components/dropdown-menu/dropdown-menu-separator.js

@@ -1,9 +1,10 @@
 import { jsx as p } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-dropdown-menu";
 import * as t from "react";
+import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const i = t.forwardRef(({ className: o, ...m }, a) => /* @__PURE__ */ p(
   r.Separator,
   {

package/dist/esm/components/dropdown-menu/dropdown-menu-shortcut.js

@@ -1,8 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const m = ({
   className: t,
   ...o

package/dist/esm/components/dropdown-menu/dropdown-menu-sub-content.js

@@ -1,15 +1,16 @@
 import { jsx as d } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-dropdown-menu";
 import * as i from "react";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const n = i.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ d(
   t.SubContent,
   {
     ref: a,
     className: r(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-gray-40 p-1 text-popover-foreground shadow-lg 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",
       o
     ),
     ...e

package/dist/esm/components/dropdown-menu/dropdown-menu-sub-trigger.js

@@ -1,23 +1,24 @@
-import { jsxs as i, jsx as m } from "react/jsx-runtime";
+import { jsxs as n, jsx as m } from "react/jsx-runtime";
+import { IconExpand as a } from "@gearbox-protocol/static";
 import * as e from "@radix-ui/react-dropdown-menu";
-import { ChevronRight as a } from "lucide-react";
 import * as p from "react";
+import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const g = p.forwardRef(({ className: r, inset: o, children: t, ...s }, n) => /* @__PURE__ */ i(
+import "luxon";
+const g = p.forwardRef(({ className: r, inset: o, children: s, ...t }, i) => /* @__PURE__ */ n(
   e.SubTrigger,
   {
-    ref: n,
+    ref: i,
     className: c(
       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       o && "pl-8",
       r
     ),
-    ...s,
+    ...t,
     children: [
-      t,
-      /* @__PURE__ */ m(a, { className: "ml-auto" })
+      s,
+      /* @__PURE__ */ m(a, { size: 16, className: "ml-auto [&_svg]:size-4" })
     ]
   }
 ));

package/dist/esm/components/edit-input/edit-input.js

@@ -1,96 +1,123 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { Pencil as z, Check as I, X as R } from "lucide-react";
-import * as s from "react";
-import { Input as S } from "../input/input.js";
-import { cn as l } from "../../utils/cn.js";
-import "sonner";
+import { jsx as t } from "react/jsx-runtime";
+import { IconEditPen as z } from "@gearbox-protocol/static";
+import { cva as D } from "class-variance-authority";
+import * as r from "react";
+import { faArrowRight as K } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as N } from "../icons/fa-icon.js";
+import { Input as L } from "../input/input.js";
+import { TextButton as M } from "../text-button/text-button.js";
 import "@gearbox-protocol/sdk";
-function L({
-  value: n = "",
-  onChange: g,
-  placeholder: m,
-  disabled: o,
-  onBlur: y,
-  onSubmit: C,
-  onEditModeChange: E,
-  label: f,
-  inputSize: k = "md",
-  className: p
+import { cn as f } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const S = D("", {
+  variants: {
+    labelHeight: {
+      xs: "h-auto",
+      sm: "h-8",
+      md: "h-10",
+      lg: "h-11"
+    }
+  },
+  defaultVariants: {
+    labelHeight: "sm"
+  }
+}), V = {
+  xs: "xs",
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+};
+function W({
+  label: c,
+  value: m,
+  onChange: d,
+  onSubmit: u,
+  onEditModeChange: p,
+  textButtonProps: h = {},
+  inputSize: s = "sm",
+  colorTheme: x = "filledLight",
+  placeholder: g,
+  inputMode: E = "decimal",
+  autoComplete: w = "off",
+  autoCorrect: y = "off",
+  type: I = "text",
+  spellCheck: b = "false",
+  className: a,
+  onKeyDown: k,
+  ...v
 }) {
-  const [r, N] = s.useState(!1), [x, i] = s.useState(n), c = s.useRef(null);
-  s.useEffect(() => {
-    i(n);
-  }, [n]), s.useEffect(() => {
-    r && c.current && c.current.focus();
-  }, [r]);
-  const a = (t) => {
-    N(t), E?.(t);
-  }, u = () => {
-    g?.(x), C?.(), a(!1);
-  }, d = () => {
-    i(n), a(!1);
-  }, b = (t) => {
-    t.key === "Enter" ? u() : t.key === "Escape" && d();
-  }, w = {
-    xs: "h-6 text-[10px]",
-    sm: "h-7 text-xs",
-    md: "h-9 text-sm",
-    lg: "h-11 text-base"
+  const [i, C] = r.useState(!1), n = r.useRef(null);
+  r.useEffect(() => {
+    i && n.current && n.current.focus();
+  }, [i]);
+  const o = (e) => {
+    C(e), p?.(e);
+  }, l = () => {
+    u?.(), o(!1);
+  }, H = () => {
+    o(!1);
+  }, R = (e) => {
+    e.key === "Enter" ? l() : e.key === "Escape" && H(), k?.(e);
+  }, j = () => {
+    o(!0);
   };
-  return r ? /* @__PURE__ */ h("div", { className: l("inline-flex items-center gap-1", p), children: [
-    f && /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground mr-1", children: f }),
-    /* @__PURE__ */ e(
-      S,
-      {
-        ref: c,
-        type: "text",
-        value: x,
-        onChange: (t) => i(t.target.value),
-        onBlur: () => {
-          y?.(), u();
-        },
-        onKeyDown: b,
-        placeholder: m,
-        disabled: o,
-        className: l("w-auto min-w-[100px]", w[k])
-      }
-    ),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: u,
-        className: "p-1 text-green-600 hover:bg-green-100 rounded",
-        children: /* @__PURE__ */ e(I, { size: 14 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: d,
-        className: "p-1 text-red-600 hover:bg-red-100 rounded",
-        children: /* @__PURE__ */ e(R, { size: 14 })
-      }
-    )
-  ] }) : /* @__PURE__ */ h(
-    "button",
+  return i ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: f(
+        "relative w-full flex flex-row flex-nowrap justify-end items-center",
+        a
+      ),
+      children: /* @__PURE__ */ t(
+        L,
+        {
+          ref: n,
+          value: m,
+          size: V[s],
+          colorTheme: x,
+          onChange: d,
+          inputMode: E,
+          placeholder: g,
+          autoComplete: w,
+          autoCorrect: y,
+          type: I,
+          spellCheck: b,
+          onKeyDown: R,
+          endingIcon: /* @__PURE__ */ t(
+            N,
+            {
+              icon: K,
+              className: "size-[18px] text-primary",
+              "aria-hidden": !0
+            }
+          ),
+          onEndingIconClick: l,
+          ...v
+        }
+      )
+    }
+  ) : /* @__PURE__ */ t(
+    "div",
     {
-      type: "button",
-      onClick: () => !o && a(!0),
-      className: l(
-        "inline-flex items-center gap-1.5 text-foreground hover:text-primary transition-colors",
-        o && "opacity-50 cursor-not-allowed",
-        p
+      className: f(
+        "flex w-full justify-end items-center cursor-pointer",
+        S({ labelHeight: s }),
+        a
       ),
-      disabled: o,
-      children: [
-        /* @__PURE__ */ e("span", { children: n || m || "Click to edit" }),
-        !o && /* @__PURE__ */ e(z, { size: 14, className: "text-muted-foreground" })
-      ]
+      children: /* @__PURE__ */ t(
+        M,
+        {
+          ...h,
+          icon: /* @__PURE__ */ t(z, { size: 12, className: "mb-[3px] shrink-0", "aria-hidden": !0 }),
+          tabIndex: -1,
+          onClick: j,
+          children: c
+        }
+      )
     }
   );
 }
 export {
-  L as EditInput
+  W as EditInput
 };

package/dist/esm/components/error-message/error-line-message.js

@@ -1,22 +1,23 @@
 import { jsxs as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function a({
-  err: e,
-  title: t,
+import "luxon";
+function d({
+  err: t,
+  title: e,
   className: o
 }) {
   return /* @__PURE__ */ r("div", { className: i("text-destructive", o), children: [
     /* @__PURE__ */ r("strong", { children: [
-      t ?? "Error",
+      e ?? "Error",
       ":"
     ] }),
     " ",
-    e.message
+    t.message
   ] });
 }
 export {
-  a as ErrorLineMessage
+  d as ErrorLineMessage
 };

package/dist/esm/components/error-message/error-message.js

@@ -4,10 +4,11 @@ import { Button as i } from "../buttons/button/button.js";
 import { DialogContainer as l } from "../dialog/dialog-container.js";
 import { FormattedMessageTyped as d } from "../typed-intl/index.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function N({
+import "luxon";
+function j({
   err: t,
   btnTitle: s,
   onClick: o,
@@ -35,5 +36,5 @@ function N({
   );
 }
 export {
-  N as ErrorMessage
+  j as ErrorMessage
 };

package/dist/esm/components/error-view/error-view.js

@@ -1,39 +1,40 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { BackButton as x } from "../buttons/back-button/back-button.js";
 import "react";
-import { cn as r } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-function h({
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+function u({
   status: m,
   message: t,
-  backButton: l,
+  backButton: r,
   className: n
 }) {
   const o = t.length > 32 ? "default" : "large";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: r(
+      className: l(
         "w-full h-full flex items-center justify-center py-16",
         n
       ),
       children: /* @__PURE__ */ i(
         "div",
         {
-          className: r(
+          className: l(
             "flex flex-col items-center max-w-md mx-auto px-4 py-8 text-center",
             o === "default" && "gap-4"
           ),
           children: [
             /* @__PURE__ */ e("h1", { className: "text-6xl md:text-9xl font-bold text-foreground font-mono", children: m }),
-            /* @__PURE__ */ i("div", { className: r("flex flex-col items-center gap-4"), children: [
+            /* @__PURE__ */ i("div", { className: l("flex flex-col items-center gap-4"), children: [
               o === "large" ? /* @__PURE__ */ e("h2", { className: "text-2xl font-semibold text-foreground", children: t }) : /* @__PURE__ */ e("p", { className: "text-lg text-foreground", children: t }),
-              l && /* @__PURE__ */ e(
+              r && /* @__PURE__ */ e(
                 x,
                 {
-                  text: l.text,
-                  href: l.href,
+                  text: r.text,
+                  href: r.href,
                   className: "inline-flex items-center text-md"
                 }
               )
@@ -45,5 +46,5 @@ function h({
   );
 }
 export {
-  h as ErrorView
+  u as ErrorView
 };

package/dist/esm/components/explorer-links-dropdown/explorer-links-dropdown.js

@@ -1,6 +1,6 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { ExternalLink as k } from "lucide-react";
-import * as c from "react";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { IconExternal as k } from "@gearbox-protocol/static";
+import * as m from "react";
 import { DropdownMenu as C, DropdownMenuTrigger as b } from "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
 import { DropdownMenuContent as D } from "../dropdown-menu/dropdown-menu-content.js";
@@ -11,10 +11,11 @@ import "../dropdown-menu/dropdown-menu-separator.js";
 import "../dropdown-menu/dropdown-menu-shortcut.js";
 import "../dropdown-menu/dropdown-menu-sub-content.js";
 import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "@gearbox-protocol/sdk";
 import { cn as M } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const m = {
+import "luxon";
+const s = {
   1: [
     { name: "Etherscan", url: "https://etherscan.io" },
     { name: "Blockscout", url: "https://eth.blockscout.com" }
@@ -32,7 +33,7 @@ const m = {
 function N(e, r, n) {
   return n ? `${e}/tx/${n}` : r ? `${e}/address/${r}` : e;
 }
-function q({
+function y({
   explorerLinks: e,
   opened: r,
   opens: n = "right",
@@ -44,16 +45,16 @@ function q({
   className: f,
   children: d
 }) {
-  const [g, i] = c.useState(r ?? !1);
-  c.useEffect(() => {
+  const [g, i] = m.useState(r ?? !1);
+  m.useEffect(() => {
     r !== void 0 && i(r);
   }, [r]);
   const x = (t) => {
     i(t), t || p?.();
-  }, E = e ?? m[h] ?? m[1];
-  return /* @__PURE__ */ s(C, { open: g, onOpenChange: x, children: [
+  }, E = e ?? s[h] ?? s[1];
+  return /* @__PURE__ */ c(C, { open: g, onOpenChange: x, children: [
     /* @__PURE__ */ o(b, { asChild: !0, children: /* @__PURE__ */ o("span", { className: M("cursor-pointer", f), children: d || a || "Explorer" }) }),
-    /* @__PURE__ */ o(D, { align: n === "left" ? "start" : "end", children: E?.map((t) => /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ s(
+    /* @__PURE__ */ o(D, { align: n === "left" ? "start" : "end", children: E?.map((t) => /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ c(
       "a",
       {
         href: N(t.url, l, u),
@@ -76,5 +77,5 @@ function q({
   ] });
 }
 export {
-  q as ExplorerLinksDropdown
+  y as ExplorerLinksDropdown
 };

package/dist/esm/components/fadeout-loading/fadeout-loading.js

@@ -1,22 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as p } from "../../utils/cn.js";
-import "sonner";
+import { jsx as p } from "react/jsx-runtime";
+import * as s from "react";
 import "@gearbox-protocol/sdk";
-const d = n.forwardRef(
-  ({ className: o, loading: a = !1, duration: t = 150, children: i, style: e, ...r }, s) => /* @__PURE__ */ m(
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const d = s.forwardRef(
+  ({ className: t, loading: o, duration: a = 100, children: r, style: i, ...m }, e) => /* @__PURE__ */ p(
     "span",
     {
-      ref: s,
-      className: p("inline-flex", o),
+      ref: e,
+      className: n(t),
       style: {
-        opacity: a ? 0.5 : 1,
-        transition: `opacity ${t}ms ease-in-out`,
-        ...e
+        opacity: o ? 0.5 : 1,
+        transition: `opacity ${a}ms ease-in-out`,
+        ...i
       },
-      "data-loading": a,
-      ...r,
-      children: i
+      "data-loading": o,
+      ...m,
+      children: r
     }
   )
 );