@gearbox-protocol/permissionless-ui 1.22.0-next.4 → 1.22.0-next.41

package/dist/esm/components/search-line/search-line.js

@@ -1,12 +1,14 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { cva as g } from "class-variance-authority";
-import { Search as S, ArrowRight as j, Loader2 as C } from "lucide-react";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { IconPending as C } from "@gearbox-protocol/static";
+import { cva as x } from "class-variance-authority";
 import * as r from "react";
+import { faMagnifyingGlass as I, faArrowRight as S } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as p } from "../icons/fa-icon.js";
 import { Input as V } from "../input/input.js";
+import "@gearbox-protocol/sdk";
 import { cn as f } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const R = g("relative w-full transition-all duration-200", {
+const F = x("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -18,7 +20,7 @@ const R = g("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), D = g("transition-all duration-200 pr-10", {
+}), R = x("transition-all duration-200 pr-10", {
   variants: {
     active: {
       true: "",
@@ -55,7 +57,7 @@ const R = g("relative w-full transition-all duration-200", {
     active: !1,
     theme: "light"
   }
-}), x = r.forwardRef(
+}), v = r.forwardRef(
   ({
     className: i,
     size: n,
@@ -63,13 +65,13 @@ const R = g("relative w-full transition-all duration-200", {
     placeholder: c = "Search...",
     theme: m = "light",
     showSearchIcon: s = !1,
-    customIcon: v,
+    customIcon: N,
     onSubmit: t,
-    ...N
-  }, w) => {
-    const { value: a, handleSubmit: l, handleInput: b, loading: d } = o, [y, u] = r.useState(!1), h = a !== "" || y, k = r.useCallback(
-      (z) => {
-        z.preventDefault(), l({ preventDefault: () => {
+    ...w
+  }, b) => {
+    const { value: a, handleSubmit: l, handleInput: y, loading: d } = o, [k, u] = r.useState(!1), h = a !== "" || k, z = r.useCallback(
+      (j) => {
+        j.preventDefault(), l({ preventDefault: () => {
         } }), t && t(a);
       },
       [l, t, a]
@@ -80,22 +82,22 @@ const R = g("relative w-full transition-all duration-200", {
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: w,
-        className: f(R({ size: n }), i),
-        ...N,
-        children: /* @__PURE__ */ p(
+        ref: b,
+        className: f(F({ size: n }), i),
+        ...w,
+        children: /* @__PURE__ */ g(
           "form",
           {
-            onSubmit: k,
+            onSubmit: z,
             onFocus: () => u(!0),
             onBlur: () => u(!1),
             className: "relative",
             children: [
               s && /* @__PURE__ */ e(
-                S,
+                p,
                 {
-                  className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
-                  size: 18
+                  icon: I,
+                  className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
                 }
               ),
               /* @__PURE__ */ e(
@@ -104,9 +106,9 @@ const R = g("relative w-full transition-all duration-200", {
                   type: "search",
                   placeholder: c,
                   value: a,
-                  onChange: b,
+                  onChange: y,
                   className: f(
-                    D({ active: h, theme: m }),
+                    R({ active: h, theme: m }),
                     s && "pl-10"
                   )
                 }
@@ -118,14 +120,20 @@ const R = g("relative w-full transition-all duration-200", {
                   onClick: L,
                   className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
                   "aria-label": "Submit search",
-                  children: v || /* @__PURE__ */ e(j, { className: "text-primary", size: 18 })
+                  children: N || /* @__PURE__ */ e(
+                    p,
+                    {
+                      icon: S,
+                      className: "text-primary size-[18px]"
+                    }
+                  )
                 }
               ),
               d && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
                 C,
                 {
-                  className: "text-muted-foreground animate-spin",
-                  size: 18
+                  size: 18,
+                  className: "text-muted-foreground animate-spin"
                 }
               ) })
             ]
@@ -135,15 +143,15 @@ const R = g("relative w-full transition-all duration-200", {
     );
   }
 );
-x.displayName = "SearchLine";
-const F = r.forwardRef(
+v.displayName = "SearchLine";
+const D = r.forwardRef(
   ({
     searchState: i,
     children: n,
     placeholder: o = "Search...",
     theme: c = "light",
     className: m
-  }, s) => /* @__PURE__ */ p(
+  }, s) => /* @__PURE__ */ g(
     "div",
     {
       ref: s,
@@ -154,7 +162,7 @@ const F = r.forwardRef(
       children: [
         /* @__PURE__ */ e("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children: n }),
         /* @__PURE__ */ e("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ e(
-          x,
+          v,
           {
             searchState: i,
             placeholder: o,
@@ -166,10 +174,10 @@ const F = r.forwardRef(
     }
   )
 );
-F.displayName = "WithSearchLine";
+D.displayName = "WithSearchLine";
 export {
-  x as SearchLine,
-  F as WithSearchLine,
-  D as searchLineInputVariants,
-  R as searchLineVariants
+  v as SearchLine,
+  D as WithSearchLine,
+  R as searchLineInputVariants,
+  F as searchLineVariants
 };

package/dist/esm/components/segmented-control/segmented-control.js

@@ -1,9 +1,9 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { cva as k } from "class-variance-authority";
 import * as z from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const C = k(
   "relative flex flex-row flex-nowrap items-center bg-muted rounded-md",
   {

package/dist/esm/components/select/select.js

@@ -1,14 +1,15 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-select";
-import { cva as u } from "class-variance-authority";
-import { ChevronDown as c, ChevronUp as h, Check as g } from "lucide-react";
+import { cva as g } from "class-variance-authority";
 import * as l from "react";
+import { faCaretDown as m, faCaretUp as b, faCheck as y } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as i } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const b = (a) => /* @__PURE__ */ t(e.Root, { ...a });
-b.displayName = "Select";
-const T = e.Group, V = e.Value, y = u(
+const h = (a) => /* @__PURE__ */ t(e.Root, { ...a });
+h.displayName = "Select";
+const D = e.Group, U = e.Value, x = g(
   "group flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
   {
     variants: {
@@ -28,20 +29,26 @@ const T = e.Group, V = e.Value, y = u(
       variant: "default"
     }
   }
-), w = l.forwardRef(({ className: a, children: o, size: r, variant: d, ...n }, f) => /* @__PURE__ */ i(
+), N = l.forwardRef(({ className: a, children: o, size: r, variant: d, ...n }, u) => /* @__PURE__ */ c(
   e.Trigger,
   {
-    ref: f,
-    className: s(y({ size: r, variant: d, className: a })),
+    ref: u,
+    className: s(x({ size: r, variant: d, className: a })),
     ...n,
     children: [
       o,
-      /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(c, { className: "h-4 w-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" }) })
+      /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(
+        i,
+        {
+          icon: m,
+          className: "size-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180"
+        }
+      ) })
     ]
   }
 ));
-w.displayName = e.Trigger.displayName;
-const m = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+N.displayName = e.Trigger.displayName;
+const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.ScrollUpButton,
   {
     ref: r,
@@ -50,11 +57,11 @@ const m = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
       a
     ),
     ...o,
-    children: /* @__PURE__ */ t(h, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ t(i, { icon: b, className: "size-4" })
   }
 ));
-m.displayName = e.ScrollUpButton.displayName;
-const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+p.displayName = e.ScrollUpButton.displayName;
+const f = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.ScrollDownButton,
   {
     ref: r,
@@ -63,11 +70,11 @@ const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
       a
     ),
     ...o,
-    children: /* @__PURE__ */ t(c, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ t(i, { icon: m, className: "size-4" })
   }
 ));
-p.displayName = e.ScrollDownButton.displayName;
-const x = l.forwardRef(({ className: a, children: o, position: r = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ i(
+f.displayName = e.ScrollDownButton.displayName;
+const w = l.forwardRef(({ className: a, children: o, position: r = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ c(
   e.Content,
   {
     ref: n,
@@ -79,7 +86,7 @@ const x = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
     position: r,
     ...d,
     children: [
-      /* @__PURE__ */ t(m, {}),
+      /* @__PURE__ */ t(p, {}),
       /* @__PURE__ */ t(
         e.Viewport,
         {
@@ -90,12 +97,12 @@ const x = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
           children: o
         }
       ),
-      /* @__PURE__ */ t(p, {})
+      /* @__PURE__ */ t(f, {})
     ]
   }
 ) }));
-x.displayName = e.Content.displayName;
-const N = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+w.displayName = e.Content.displayName;
+const S = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.Label,
   {
     ref: r,
@@ -103,8 +110,8 @@ const N = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
     ...o
   }
 ));
-N.displayName = e.Label.displayName;
-const S = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__ */ i(
+S.displayName = e.Label.displayName;
+const v = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__ */ c(
   e.Item,
   {
     ref: d,
@@ -114,13 +121,13 @@ const S = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__
     ),
     ...r,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(g, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(i, { icon: y, className: "size-4" }) }) }),
       /* @__PURE__ */ t(e.ItemText, { children: o })
     ]
   }
 ));
-S.displayName = e.Item.displayName;
-const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+v.displayName = e.Item.displayName;
+const z = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
   e.Separator,
   {
     ref: r,
@@ -128,17 +135,17 @@ const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
     ...o
   }
 ));
-v.displayName = e.Separator.displayName;
+z.displayName = e.Separator.displayName;
 export {
-  b as Select,
-  x as SelectContent,
-  T as SelectGroup,
-  S as SelectItem,
-  N as SelectLabel,
-  p as SelectScrollDownButton,
-  m as SelectScrollUpButton,
-  v as SelectSeparator,
-  w as SelectTrigger,
-  V as SelectValue,
-  y as selectTriggerVariants
+  h as Select,
+  w as SelectContent,
+  D as SelectGroup,
+  v as SelectItem,
+  S as SelectLabel,
+  f as SelectScrollDownButton,
+  p as SelectScrollUpButton,
+  z as SelectSeparator,
+  N as SelectTrigger,
+  U as SelectValue,
+  x as selectTriggerVariants
 };

package/dist/esm/components/separator/separator.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-separator";
 import * as e from "react";
+import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const s = e.forwardRef(
   ({ className: a, orientation: r = "horizontal", decorative: t = !0, ...m }, p) => /* @__PURE__ */ i(
     o.Root,

package/dist/esm/components/short-string/short-string.js

@@ -1,27 +1,20 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { TooltipProvider as p, Tooltip as c, TooltipTrigger as d, TooltipContent as f } from "../tooltip/tooltip.js";
-import { cn as a } from "../../utils/cn.js";
-function m({
-  children: t,
-  maxLength: i,
-  className: n,
-  showTooltip: o = !0
+import { jsx as r } from "react/jsx-runtime";
+import { SimpleTooltip as m } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import { isLongString as u, shortenString as S } from "../../utils/shorten-string.js";
+function g({
+  children: o,
+  maxLength: t,
+  showTooltip: f = !0,
+  className: i
 }) {
-  if (i === void 0) {
-    const l = /* @__PURE__ */ r("span", { className: a("inline-block max-w-full truncate", n), children: t });
-    return o ? /* @__PURE__ */ r(p, { delayDuration: 200, children: /* @__PURE__ */ u(c, { children: [
-      /* @__PURE__ */ r(d, { asChild: !0, children: l }),
-      /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("p", { children: t }) })
-    ] }) }) : l;
-  }
-  if (!t || t.length <= i)
-    return /* @__PURE__ */ r("span", { className: n, children: t });
-  const e = `${t.slice(0, i)}...`;
-  return o ? /* @__PURE__ */ r(p, { delayDuration: 200, children: /* @__PURE__ */ u(c, { children: [
-    /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r("span", { className: n, children: e }) }),
-    /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("p", { children: t }) })
-  ] }) }) : /* @__PURE__ */ r("span", { className: n, children: e });
+  const n = (e, p) => p === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ r("span", { className: i, children: S(e, p) });
+  return typeof o == "string" && t !== void 0 ? f && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(m, { title: n(o, t), children: o }) : n(o, t) : o;
 }
 export {
-  m as ShortString
+  g as ShortString
 };

package/dist/esm/components/signatures/confirmation-item.js

@@ -6,11 +6,11 @@ import { ExternalButton as p } from "../buttons/external-button/external-button.
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
 import { shortenHash as s } from "../../utils/format.js";
-import "@gearbox-protocol/sdk";
 import "../buttons/tab-button/tab-button.js";
 import { Identicon as a } from "./identicon.js";
 function B({

package/dist/esm/components/signatures/vertical-timeline.js

@@ -1,55 +1,56 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { Check as n, X as o } from "lucide-react";
-import { useState as d } from "react";
-function f({
-  steps: r,
-  minWidth: c = 300
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { faCheck as m, faXmark as d } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../icons/fa-icon.js";
+function b({
+  steps: s,
+  minWidth: i = 300
 }) {
-  const [s, i] = d(r.map(() => !1));
-  return /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ a("div", { className: `relative min-w-[${c}px]`, children: [
+  const [r, o] = n(s.map(() => !1));
+  return /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ l("div", { className: `relative min-w-[${i}px]`, children: [
     /* @__PURE__ */ t("div", { className: "absolute left-[11px] top-[2px] bottom-[20px] w-[2px] h-[calc(100%-20px)] bg-gray-800" }),
-    /* @__PURE__ */ t("div", { className: "space-y-4", children: r.map((e, l) => /* @__PURE__ */ a(
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: s.map((e, a) => /* @__PURE__ */ l(
       "div",
       {
         children: [
-          e.type === "default" && e.status !== "not-started" && /* @__PURE__ */ a("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ a(
+          e.type === "default" && e.status !== "not-started" && /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ l(
               "div",
               {
                 className: `absolute left-[2px] flex h-5 w-5 items-center justify-center rounded-full ${e.status === "success" ? "bg-green-500" : e.status === "error" ? "bg-red-500" : "border-2 border-gray-600 bg-transparent"}`,
                 children: [
-                  e.status === "success" && /* @__PURE__ */ t(n, { className: "h-3 w-3 text-black" }),
-                  e.status === "error" && /* @__PURE__ */ t(o, { className: "h-3 w-3 text-black" })
+                  e.status === "success" && /* @__PURE__ */ t(c, { icon: m, className: "size-3 text-black" }),
+                  e.status === "error" && /* @__PURE__ */ t(c, { icon: d, className: "size-3 text-black" })
                 ]
               }
             ),
             /* @__PURE__ */ t("span", { className: "ml-10 text-foreground", children: e.title })
           ] }),
-          e.type === "extention" && e.status !== "not-started" && /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ a("div", { className: "relative flex items-center", children: [
+          e.type === "extention" && e.status !== "not-started" && /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
               /* @__PURE__ */ t("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
               /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => i([
-                    ...s.slice(0, l),
-                    !s[l],
-                    ...s.slice(l + 1)
+                  onClick: () => o([
+                    ...r.slice(0, a),
+                    !r[a],
+                    ...r.slice(a + 1)
                   ]),
                   className: "ml-10 text-green-500 hover:underline cursor-pointer",
-                  children: s[l] ? "Hide all" : "Show all"
+                  children: r[a] ? "Hide all" : "Show all"
                 }
               )
             ] }),
-            s[l] && e.children
+            r[a] && e.children
           ] })
         ]
       },
-      `step-${l}`
+      `step-${a}`
     )) })
   ] }) });
 }
 export {
-  f as VerticalTimeline
+  b as VerticalTimeline
 };

package/dist/esm/components/skeleton/skeleton-stack.js

@@ -1,8 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useMemo as c } from "react";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import { Skeleton as n } from "./skeleton.js";
 const l = {
   sm: "space-y-2",

package/dist/esm/components/skeleton/skeleton.js

@@ -1,9 +1,9 @@
 import { jsx as a, Fragment as f } from "react/jsx-runtime";
 import { cva as p } from "class-variance-authority";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as w } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const c = p("animate-pulse rounded-md bg-muted", {
   variants: {
     variant: {

package/dist/esm/components/slider/slider.js

@@ -2,9 +2,9 @@ import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import * as l from "@radix-ui/react-slider";
 import * as D from "react";
 import { useMemo as v } from "react";
+import "@gearbox-protocol/sdk";
 import { cn as x } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function A(r) {
   return {
     start: r.start ?? r.from ?? 0,

package/dist/esm/components/slider-token/slider-token.js

@@ -2,9 +2,9 @@ import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { Slider as b } from "../slider/slider.js";
 import { TokenSymbol as v } from "../token-symbol/token-symbol.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as N } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function z({
   from: s = 0,
   to: r = 100,