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

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,75 +1,63 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { ChevronRight as g } from "lucide-react";
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { IconExpand as h } from "@gearbox-protocol/static";
 import { Link as x } from "react-router-dom";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function j({
-  items: o,
-  onClick: u,
-  currentStep: f,
-  disabledSteps: i,
-  className: m
+import "luxon";
+const i = "text-sm! transition-colors text-muted-foreground! hover:text-foreground!";
+function A({
+  items: n,
+  onClick: d,
+  currentStep: m,
+  disabledSteps: p,
+  className: f
 }) {
-  if (!o || o.length === 0)
-    return null;
-  const d = !!u;
-  return /* @__PURE__ */ e(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      className: c("flex items-center gap-2", m),
-      children: /* @__PURE__ */ e("ol", { className: "flex items-center gap-2 flex-wrap", children: o.map((r, t) => {
-        const s = t === o.length - 1, l = f === t, n = i?.(r, t) ?? !1, a = d && !n, p = r.href || r.step || `${r.label}-${t}`;
-        return /* @__PURE__ */ h("li", { className: "flex items-center gap-2", children: [
-          d ? (
-            // Wizard mode: use button
-            /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                onClick: () => a && u(r, t),
-                disabled: n,
-                className: c(
-                  "text-sm transition-colors",
-                  l ? "text-foreground font-medium" : "text-muted-foreground",
-                  a && !l && "hover:text-foreground cursor-pointer",
-                  n && "opacity-50 cursor-not-allowed",
-                  !a && !l && "cursor-default"
-                ),
-                children: r.label
-              }
-            )
-          ) : r.href && !s ? (
-            // Navigation mode with href
-            /* @__PURE__ */ e(
-              x,
-              {
-                to: r.href,
-                className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-                children: r.label
-              }
-            )
-          ) : (
-            // Navigation mode without href (last item or no href)
-            /* @__PURE__ */ e(
-              "span",
-              {
-                className: c(
-                  "text-sm",
-                  s ? "text-foreground font-medium" : "text-muted-foreground"
-                ),
-                children: r.label
-              }
-            )
-          ),
-          !s && /* @__PURE__ */ e(g, { className: "h-4 w-4 text-muted-foreground" })
-        ] }, p);
-      }) })
-    }
-  );
+  return !n || n.length === 0 ? null : /* @__PURE__ */ r("nav", { "aria-label": "breadcrumb", className: c("flex items-center", f), children: /* @__PURE__ */ r("ol", { className: "flex items-center gap-2.5 flex-wrap", children: n.map((e, t, u) => {
+    const { href: o } = e, s = t === u.length - 1, l = m === t, a = p?.(e, t) ?? !1, g = o || e.step || `${e.label}-${t}`;
+    return /* @__PURE__ */ b("li", { className: "group flex items-center gap-2", children: [
+      !!o && !s && !l && !a ? (
+        // Navigation with href
+        /* @__PURE__ */ r(x, { to: o, className: i, children: e.label })
+      ) : !!d && !o && !s && !l && !a ? (
+        // Wizard mode: use button
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => d(e, t),
+            disabled: a,
+            className: c(i, "cursor-pointer"),
+            children: e.label
+          }
+        )
+      ) : (
+        // Last item or no href/button
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: c(
+              "text-sm",
+              l ? "text-foreground" : "text-muted-foreground"
+            ),
+            children: e.label
+          }
+        )
+      ),
+      (!s || u.length === 1) && /* @__PURE__ */ r(
+        h,
+        {
+          size: 10,
+          className: "text-muted-foreground group-hover:text-foreground transition-colors",
+          style: {
+            transform: "rotate(-90deg)"
+          }
+        }
+      )
+    ] }, g);
+  }) }) });
 }
 export {
-  j as BreadCrumbs
+  A as BreadCrumbs
 };

package/dist/esm/components/button-checkbox/button-checkbox.js

@@ -1,53 +1,61 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Check as a } from "lucide-react";
+import { faCheck as c } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as l } from "../icons/fa-icon.js";
 import "react";
-import { cn as c } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const l = {
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const x = {
   sm: "px-2 py-1 text-xs gap-1",
   md: "px-3 py-1.5 text-sm gap-1.5",
   lg: "px-4 py-2 text-base gap-2"
-}, x = {
-  sm: 12,
-  md: 14,
-  lg: 16
 };
-function h({
-  checked: r = !1,
+function k({
+  checked: o = !1,
   onChange: n,
-  children: s,
-  disabled: o = !1,
-  size: t = "md",
-  className: m
+  children: p,
+  disabled: t = !1,
+  size: r = "md",
+  className: s
 }) {
   return /* @__PURE__ */ i(
     "label",
     {
-      className: c(
+      className: m(
         "inline-flex items-center rounded-md border font-medium transition-colors cursor-pointer",
-        l[t],
-        r ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-accent",
-        o && "opacity-50 cursor-not-allowed",
-        m
+        x[r],
+        o ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-accent",
+        t && "opacity-50 cursor-not-allowed",
+        s
       ),
       children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
-            checked: r,
-            onChange: (p) => n?.(p.target.checked),
-            disabled: o,
+            checked: o,
+            onChange: (a) => n?.(a.target.checked),
+            disabled: t,
             className: "sr-only"
           }
         ),
-        r && /* @__PURE__ */ e(a, { size: x[t] }),
-        s
+        o && /* @__PURE__ */ e(
+          l,
+          {
+            icon: c,
+            className: m(
+              r === "sm" && "size-3",
+              r === "md" && "size-3.5",
+              r === "lg" && "size-4"
+            )
+          }
+        ),
+        p
       ]
     }
   );
 }
 export {
-  h as ButtonCheckbox
+  k as ButtonCheckbox
 };

package/dist/esm/components/buttons/back-button/back-button.js

@@ -1,11 +1,13 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { cva as f } from "class-variance-authority";
-import { ArrowLeft as u } from "lucide-react";
+import { faArrowLeft as u } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../../icons/fa-icon.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as x } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const c = f("flex items-center transition-colors", {
+import "luxon";
+const p = f("flex items-center transition-colors", {
   variants: {
     variant: {
       default: "text-muted-foreground hover:text-foreground",
@@ -31,7 +33,7 @@ function l({
 }) {
   return /* @__PURE__ */ a("a", { href: t, className: r, onClick: e, children: o });
 }
-function y({
+function j({
   href: t,
   text: r,
   onClick: e,
@@ -44,16 +46,16 @@ function y({
     m,
     {
       href: t,
-      className: x(c({ variant: i, size: n, className: o })),
+      className: x(p({ variant: i, size: n, className: o })),
       onClick: e,
       children: [
-        /* @__PURE__ */ a(u, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ a(c, { icon: u, className: "mr-2 size-4" }),
         r || "Back"
       ]
     }
   );
 }
 export {
-  y as BackButton,
-  c as backButtonVariants
+  j as BackButton,
+  p as backButtonVariants
 };

package/dist/esm/components/buttons/button/button.js

@@ -1,11 +1,13 @@
 import { jsx as p } from "react/jsx-runtime";
 import { Slot as c } from "@radix-ui/react-slot";
-import { cva as y } from "class-variance-authority";
-import * as x from "react";
+import { cva as x } from "class-variance-authority";
+import * as y from "react";
+import "@gearbox-protocol/sdk";
 import { cn as e } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const h = y(
+import "luxon";
+const h = x(
+  // TODO: remove !
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:!cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([style*='width']):not([style*='height'])]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
   {
     variants: {
@@ -47,12 +49,13 @@ const h = y(
         blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground disabled:opacity-50",
         "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground disabled:opacity-50"
       },
+      // TODO: remove !
       size: {
         auto: "h-auto p-1.5",
         xs: "px-3 py-0.5 text-xs rounded-full",
-        sm: "h-7 px-3 !text-xs !leading-[14px] rounded-sm",
-        default: "px-4 h-10 !text-[15px] !leading-[18px] rounded-xl",
-        lg: "px-4 h-11 !text-[16px] !leading-[19px] rounded-full",
+        sm: "h-7 px-3 !text-xs !leading-[14px] rounded-[6px]",
+        default: "px-4 h-[40px] !text-[15px] !leading-[18px] rounded-[12px]",
+        lg: "px-4 h-[44px] !text-[16px] !leading-[19px] rounded-[22px]",
         icon: "h-9 w-9 p-2"
       },
       width: {
@@ -66,7 +69,7 @@ const h = y(
       width: "compact"
     }
   }
-), f = x.forwardRef(
+), f = y.forwardRef(
   ({
     className: t,
     variant: d,
@@ -76,8 +79,8 @@ const h = y(
     disabled: o,
     onClick: n,
     ...b
-  }, l) => {
-    const g = s ? c : "button", u = (r) => {
+  }, g) => {
+    const l = s ? c : "button", u = (r) => {
       if (o) {
         r.preventDefault(), r.stopPropagation();
         return;
@@ -85,10 +88,10 @@ const h = y(
       n?.(r);
     };
     return /* @__PURE__ */ p(
-      g,
+      l,
       {
         className: e(h({ variant: d, size: a, className: t, width: i })),
-        ref: l,
+        ref: g,
         disabled: o,
         onClick: u,
         ...b

package/dist/esm/components/buttons/copy-button/copy-button.js

@@ -1,56 +1,65 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { Check as h, Copy as C } from "lucide-react";
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { IconCopy as h } from "@gearbox-protocol/static";
 import * as r from "react";
-import { Button as x } from "../button/button.js";
+import { Button as C } from "../button/button.js";
+import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as w } from "../../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as a } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const w = {
+import "luxon";
+const N = {
   3: "h-3 w-3",
   "3.5": "h-3.5 w-3.5",
   4: "h-4 w-4",
   5: "h-5 w-5",
   6: "h-6 w-6"
-}, N = r.forwardRef(
-  ({ text: c, className: n, iconSize: l = "3.5", successDuration: p = 1500, ...m }, u) => {
-    const [t, s] = r.useState(!1), o = r.useRef(null), f = async () => {
+}, b = {
+  3: 12,
+  "3.5": 14,
+  4: 16,
+  5: 20,
+  6: 24
+}, j = r.forwardRef(
+  ({ text: n, className: l, iconSize: i = "3.5", successDuration: p = 1500, ...m }, u) => {
+    const [e, s] = r.useState(!1), o = r.useRef(null), f = async () => {
       try {
-        await navigator.clipboard.writeText(c), o.current && clearTimeout(o.current), s(!0), o.current = setTimeout(() => {
+        await navigator.clipboard.writeText(n), o.current && clearTimeout(o.current), s(!0), o.current = setTimeout(() => {
           s(!1);
         }, p);
       } catch (d) {
         console.error("Failed to copy:", d);
       }
-    }, i = w[l];
+    }, c = N[i];
     return /* @__PURE__ */ y(
-      x,
+      C,
       {
         ref: u,
         variant: "text",
         size: "auto",
-        className: a("p-1! border-0! relative", n),
+        className: a("p-1! border-0! relative", l),
         onClick: f,
-        title: t ? "Copied!" : "Copy to clipboard",
+        title: e ? "Copied!" : "Copy to clipboard",
         ...m,
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: a(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                t ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                e ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
               ),
-              children: /* @__PURE__ */ e(h, { className: i })
+              children: /* @__PURE__ */ t(w, { icon: x, className: c })
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: a(
                 "flex items-center justify-center transition-all duration-200",
-                t ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                e ? "opacity-0 scale-50" : "opacity-100 scale-100"
               ),
-              children: /* @__PURE__ */ e(C, { className: i })
+              children: /* @__PURE__ */ t(h, { size: b[i], className: c })
             }
           )
         ]
@@ -58,7 +67,7 @@ const w = {
     );
   }
 );
-N.displayName = "CopyButton";
+j.displayName = "CopyButton";
 export {
-  N as CopyButton
+  j as CopyButton
 };

package/dist/esm/components/buttons/external-button/external-button.js

@@ -1,31 +1,44 @@
-import { jsx as o } from "react/jsx-runtime";
-import { ExternalLink as m } from "lucide-react";
+import { jsx as t } from "react/jsx-runtime";
+import { IconExternal as m } from "@gearbox-protocol/static";
 import * as p from "react";
 import { Button as s } from "../button/button.js";
-import { cn as t } from "../../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import { cn as r } from "../../../utils/cn.js";
+import "sonner";
+import "luxon";
 const c = {
   3: "!h-3 !w-3",
   "3.5": "!h-3.5 !w-3.5",
   4: "!h-4 !w-4",
   5: "!h-5 !w-5",
   6: "!h-6 !w-6"
-}, l = p.forwardRef(
-  ({ url: r, className: n, iconSize: a = "3.5", ...e }, i) => /* @__PURE__ */ o(
+}, l = {
+  3: 12,
+  "3.5": 14,
+  4: 16,
+  5: 20,
+  6: 24
+}, w = p.forwardRef(
+  ({ url: n, className: a, iconSize: o = "3.5", ...e }, i) => /* @__PURE__ */ t(
     s,
     {
       ref: i,
       variant: "text",
       size: "auto",
-      className: t("p-1! border-0!", n),
-      onClick: () => window.open(r, "_blank"),
+      className: r("p-1! border-0!", a),
+      onClick: () => window.open(n, "_blank"),
       ...e,
-      children: /* @__PURE__ */ o(m, { className: t(c[a]) })
+      children: /* @__PURE__ */ t(
+        m,
+        {
+          size: l[o],
+          className: r(c[o])
+        }
+      )
     }
   )
 );
-l.displayName = "ExternalButton";
+w.displayName = "ExternalButton";
 export {
-  l as ExternalButton
+  w as ExternalButton
 };

package/dist/esm/components/buttons/filter-button/filter-button.js

@@ -1,26 +1,26 @@
-import { jsxs as s, jsx as f } from "react/jsx-runtime";
-import { Filter as n } from "lucide-react";
-import * as u from "react";
-import { Button as p } from "../button/button.js";
-const c = u.forwardRef(
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { IconSliderSimple as f } from "@gearbox-protocol/static";
+import * as p from "react";
+import { Button as u } from "../button/button.js";
+const c = p.forwardRef(
   ({
     className: t,
     label: r = "Filter",
-    showIcon: o = !0,
-    variant: e = "outline",
+    showIcon: e = !0,
+    variant: o = "outline",
     size: i = "default",
     children: m,
     ...l
-  }, a) => /* @__PURE__ */ s(
-    p,
+  }, s) => /* @__PURE__ */ a(
+    u,
     {
-      ref: a,
-      variant: e,
+      ref: s,
+      variant: o,
       size: i,
       className: t,
       ...l,
       children: [
-        o && /* @__PURE__ */ f(n, { className: "h-4 w-4" }),
+        e && /* @__PURE__ */ n(f, { size: 16, className: "size-4" }),
         m || r
       ]
     }

package/dist/esm/components/buttons/navigation-button/navigation-button.js

@@ -1,10 +1,11 @@
 import { jsx as i } from "react/jsx-runtime";
-import a from "react";
+import * as a from "react";
 import { BaseLink as s } from "../../base-link/base-link.js";
+import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const l = a.forwardRef(({ href: o, text: t, isActive: e, ...r }, n) => /* @__PURE__ */ i(
+import "luxon";
+const m = a.forwardRef(({ href: o, text: r, isActive: e, ...t }, n) => /* @__PURE__ */ i(
   s,
   {
     href: o,
@@ -15,11 +16,11 @@ const l = a.forwardRef(({ href: o, text: t, isActive: e, ...r }, n) => /* @__PUR
       e ? "bg-secondary md:bg-transparent text-foreground" : ""
     ),
     "data-active": e,
-    ...r,
-    children: t
+    ...t,
+    children: r
   }
 ));
-l.displayName = "NavButton";
+m.displayName = "NavButton";
 export {
-  l as NavigationButton
+  m as NavigationButton
 };

package/dist/esm/components/buttons/range-buttons/range-buttons.js

@@ -1,9 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function p({
+import "luxon";
+function x({
   range: n,
   rangeList: o,
   setRange: i,
@@ -29,5 +30,5 @@ function p({
   )) });
 }
 export {
-  p as RangeButtons
+  x as RangeButtons
 };

package/dist/esm/components/card-grid/card-grid.js

@@ -1,9 +1,10 @@
 import { jsx as m } from "react/jsx-runtime";
 import { cva as a } from "class-variance-authority";
 import * as e from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const p = a("grid w-full", {
   variants: {
     columns: {
@@ -62,10 +63,10 @@ const p = a("grid w-full", {
     className: s,
     columns: r,
     columnsLg: i,
-    columnsMd: d,
-    columnsSm: o,
-    gap: l,
-    justifyItemContent: t,
+    columnsMd: o,
+    columnsSm: d,
+    gap: t,
+    justifyItemContent: l,
     ...c
   }, g) => /* @__PURE__ */ m(
     "div",
@@ -75,10 +76,10 @@ const p = a("grid w-full", {
         p({
           columns: r,
           columnsLg: i,
-          columnsMd: d,
-          columnsSm: o,
-          gap: l,
-          justifyItemContent: t,
+          columnsMd: o,
+          columnsSm: d,
+          gap: t,
+          justifyItemContent: l,
           className: s
         })
       ),

package/dist/esm/components/cards/card/card.js

@@ -1,10 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cva as i } from "class-variance-authority";
+import { cva as s } from "class-variance-authority";
 import * as o from "react";
+import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const n = i(
+import "luxon";
+const n = s(
   "rounded-xl border border-border bg-card text-card-foreground",
   {
     variants: {
@@ -19,10 +20,10 @@ const n = i(
     }
   }
 ), c = o.forwardRef(
-  ({ className: r, variant: a, ...e }, s) => /* @__PURE__ */ t(
+  ({ className: r, variant: a, ...e }, i) => /* @__PURE__ */ t(
     "div",
     {
-      ref: s,
+      ref: i,
       className: d(n({ variant: a, className: r })),
       ...e
     }