@gearbox-protocol/permissionless-ui 1.22.0-next.46 → 1.22.0-next.48

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -3,6 +3,7 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const a = {
   primary: "border-primary bg-primary",
   secondary: "border-secondary bg-secondary",
@@ -10,27 +11,27 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function p({
+function u({
   size: e = 24,
   color: n = "primary",
   className: s,
   children: d
 }) {
-  const l = e + 8, t = a[n];
+  const t = e + 8, l = a[n];
   return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
     /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full border-2",
-          t.split(" ")[0]
+          l.split(" ")[0]
           // border color
         ),
         style: {
           top: -4,
           left: -4,
-          width: l,
-          height: l
+          width: t,
+          height: t
         }
       }
     ),
@@ -39,7 +40,7 @@ function p({
       {
         className: o(
           "absolute flex items-center justify-center rounded-full",
-          t.split(" ")[1]
+          l.split(" ")[1]
         ),
         style: {
           top: -e / 4,
@@ -71,5 +72,5 @@ function p({
   ] });
 }
 export {
-  p as PoolPointsIndicator
+  u as PoolPointsIndicator
 };

package/dist/esm/components/progress/progress.js

@@ -1,13 +1,14 @@
 import { jsxs as t, jsx as l } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-progress";
+import * as r from "@radix-ui/react-progress";
 import * as u from "react";
 import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const g = u.forwardRef(
   ({
     className: o,
-    value: r,
+    value: e,
     variant: i = "default",
     size: n = "default",
     showLabel: a = !1,
@@ -25,7 +26,7 @@ const g = u.forwardRef(
     };
     return /* @__PURE__ */ t("div", { className: s("flex w-full items-center", a && "gap-3"), children: [
       /* @__PURE__ */ l(
-        e.Root,
+        r.Root,
         {
           ref: d,
           className: s(
@@ -35,25 +36,25 @@ const g = u.forwardRef(
           ),
           ...m,
           children: /* @__PURE__ */ l(
-            e.Indicator,
+            r.Indicator,
             {
               className: s(
                 "h-full w-full flex-1 transition-all",
                 c[i]
               ),
-              style: { transform: `translateX(-${100 - (r || 0)}%)` }
+              style: { transform: `translateX(-${100 - (e || 0)}%)` }
             }
           )
         }
       ),
       a && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: [
-        r,
+        e,
         "%"
       ] })
     ] });
   }
 );
-g.displayName = e.Root.displayName;
+g.displayName = r.Root.displayName;
 export {
   g as Progress
 };

package/dist/esm/components/progress-circle/progress-circle.js

@@ -1,19 +1,20 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-function j({
+import "luxon";
+function k({
   value: l,
   size: e = 40,
   strokeWidth: t = 4,
   indicatorColor: m = "hsl(var(--primary))",
   trackColor: f = "hsl(var(--muted))",
   className: h,
-  children: c
+  children: i
 }) {
-  const i = Math.max(0, Math.min(100, l || 0)), r = e / 2, s = r - t / 2, n = 2 * Math.PI * s, u = (100 - i) * n / 100;
-  return /* @__PURE__ */ o(
+  const o = Math.max(0, Math.min(100, l || 0)), r = e / 2, s = r - t / 2, c = 2 * Math.PI * s, u = (100 - o) * c / 100;
+  return /* @__PURE__ */ n(
     "div",
     {
       className: p(
@@ -22,14 +23,14 @@ function j({
       ),
       style: { width: e, height: e },
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "svg",
           {
             width: e,
             height: e,
             viewBox: `0 0 ${e} ${e}`,
             className: "rotate-[-90deg]",
-            "aria-label": `Progress: ${i}%`,
+            "aria-label": `Progress: ${o}%`,
             role: "img",
             children: [
               /* @__PURE__ */ a(
@@ -52,7 +53,7 @@ function j({
                   fill: "transparent",
                   stroke: m,
                   strokeWidth: t,
-                  strokeDasharray: n,
+                  strokeDasharray: c,
                   strokeDashoffset: u,
                   strokeLinecap: "round",
                   className: "transition-[stroke-dashoffset] duration-300 ease-in-out"
@@ -61,11 +62,11 @@ function j({
             ]
           }
         ),
-        c && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: c })
+        i && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: i })
       ]
     }
   );
 }
 export {
-  j as ProgressCircle
+  k as ProgressCircle
 };

package/dist/esm/components/radio-group/radio-group.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-radio-group";
 import * as t from "react";
 import { faCircle as p } from "@fortawesome/free-solid-svg-icons";
@@ -6,6 +6,7 @@ import { FaIcon as f } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const u = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
   a.Root,
   {
@@ -34,25 +35,25 @@ const l = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
   }
 ));
 l.displayName = a.Item.displayName;
-const y = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n }, c) => /* @__PURE__ */ m("div", { className: "flex items-start space-x-3", children: [
+const y = t.forwardRef(({ value: r, label: i, description: o, disabled: m, ...n }, c) => /* @__PURE__ */ d("div", { className: "flex items-start space-x-3", children: [
   /* @__PURE__ */ e(
     l,
     {
       ref: c,
       value: r,
       id: r,
-      disabled: d,
+      disabled: m,
       ...n
     }
   ),
-  /* @__PURE__ */ m("div", { className: "grid gap-1.5 leading-none", children: [
+  /* @__PURE__ */ d("div", { className: "grid gap-1.5 leading-none", children: [
     /* @__PURE__ */ e(
       "label",
       {
         htmlFor: r,
         className: s(
           "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
-          d && "opacity-50 cursor-not-allowed"
+          m && "opacity-50 cursor-not-allowed"
         ),
         children: i
       }

package/dist/esm/components/rounded-image/rounded-image.js

@@ -5,15 +5,16 @@ import "@gearbox-protocol/sdk";
 import { cn as k } from "../../utils/cn.js";
 import "sonner";
 import { getStatic as w } from "../../utils/static.js";
-const c = w("/tokens/default.svg"), f = /* @__PURE__ */ new Map();
+import "luxon";
+const c = w("/tokens/default.svg"), i = /* @__PURE__ */ new Map();
 function d(e) {
-  return f.get(e) ? c : e;
+  return i.get(e) ? c : e;
 }
 const N = b.forwardRef(
   ({
     className: e,
     size: o,
-    rounded: i = !0,
+    rounded: f = !0,
     style: l,
     src: r,
     defaultIcon: u = c,
@@ -25,7 +26,7 @@ const N = b.forwardRef(
       d(r), a(void 0), n(!1), t.current = !1;
     }, [r]);
     const y = (I) => {
-      t.current || (t.current = !0, f.set(I.currentTarget.src, !0), a(u));
+      t.current || (t.current = !0, i.set(I.currentTarget.src, !0), a(u));
     }, R = () => {
       n(!0);
     };
@@ -39,7 +40,7 @@ const N = b.forwardRef(
           alt: "",
           className: k(
             m === "cover" ? "object-cover" : "object-contain",
-            i && "rounded-full",
+            f && "rounded-full",
             !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
             e
           ),

package/dist/esm/components/row/row.js

@@ -3,6 +3,7 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as b } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const v = {
   "flex-start": "items-start",
   "flex-end": "items-end",
@@ -17,13 +18,13 @@ const v = {
   "space-around": "justify-around",
   "space-evenly": "justify-evenly"
 };
-function G({
+function J({
   $align: n,
   align: i,
   $justify: r,
-  justify: a,
-  $flexDirection: l = "row",
-  flexDirection: o,
+  justify: o,
+  $flexDirection: a = "row",
+  flexDirection: l,
   $wrap: f = !0,
   wrap: c,
   $gap: m,
@@ -32,7 +33,7 @@ function G({
   children: x,
   ...y
 }) {
-  const e = i || n, t = a || r, d = o || l, j = c ?? f, s = p ?? m;
+  const e = i || n, t = o || r, d = l || a, j = c ?? f, s = p ?? m;
   return /* @__PURE__ */ w(
     "div",
     {
@@ -51,5 +52,5 @@ function G({
   );
 }
 export {
-  G as Row
+  J as Row
 };

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

@@ -7,6 +7,7 @@ import { Input as V } from "../input/input.js";
 import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const B = i("relative w-full transition-all duration-200", {
   variants: {
     size: {
@@ -57,19 +58,19 @@ const B = i("relative w-full transition-all duration-200", {
     theme: "light"
   }
 });
-function M({
+function A({
   onChange: c,
-  placeholder: u = "Search...",
-  className: m,
+  placeholder: m = "Search...",
+  className: u,
   size: f,
   theme: d = "light",
   value: t
 }) {
-  const [h, g] = n(""), [p, a] = n(!1), r = t !== void 0, o = r ? t : h, v = o !== "" || p, x = (N) => {
+  const [h, p] = n(""), [g, a] = n(!1), r = t !== void 0, o = r ? t : h, v = o !== "" || g, x = (N) => {
     const s = N.target.value;
-    r || g(s), c(s);
+    r || p(s), c(s);
   };
-  return /* @__PURE__ */ e("div", { className: l(B({ size: f }), m), children: /* @__PURE__ */ y("div", { className: "relative", children: [
+  return /* @__PURE__ */ e("div", { className: l(B({ size: f }), u), children: /* @__PURE__ */ y("div", { className: "relative", children: [
     /* @__PURE__ */ e(
       w,
       {
@@ -81,7 +82,7 @@ function M({
       V,
       {
         type: "search",
-        placeholder: u,
+        placeholder: m,
         value: o,
         onChange: x,
         onFocus: () => a(!0),
@@ -92,5 +93,5 @@ function M({
   ] }) });
 }
 export {
-  M as SearchBar
+  A as SearchBar
 };

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

@@ -8,6 +8,7 @@ import { Input as V } from "../input/input.js";
 import "@gearbox-protocol/sdk";
 import { cn as f } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const D = x("relative w-full transition-all duration-200", {
   variants: {
     size: {
@@ -70,8 +71,8 @@ const D = x("relative w-full transition-all duration-200", {
   }
 }), v = r.forwardRef(
   ({
-    className: n,
-    size: o,
+    className: o,
+    size: n,
     searchState: c,
     placeholder: m = "Search...",
     theme: l = "light",
@@ -94,7 +95,7 @@ const D = x("relative w-full transition-all duration-200", {
       "div",
       {
         ref: w,
-        className: f(D({ size: o }), n),
+        className: f(D({ size: n }), o),
         ...b,
         children: /* @__PURE__ */ g(
           "form",
@@ -158,8 +159,8 @@ const D = x("relative w-full transition-all duration-200", {
 v.displayName = "SearchLine";
 const R = r.forwardRef(
   ({
-    searchState: n,
-    children: o,
+    searchState: o,
+    children: n,
     placeholder: c = "Search...",
     theme: m = "light",
     className: l
@@ -172,11 +173,11 @@ const R = r.forwardRef(
         l
       ),
       children: [
-        /* @__PURE__ */ e("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children: o }),
+        /* @__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(
           v,
           {
-            searchState: n,
+            searchState: o,
             placeholder: c,
             theme: m,
             size: "full"

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

@@ -4,6 +4,7 @@ import * as g from "react";
 import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const h = u(
   "relative z-0 flex w-full flex-row flex-nowrap items-center bg-gray-30",
   {

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

@@ -7,9 +7,10 @@ import { FaIcon as i } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const h = (a) => /* @__PURE__ */ t(e.Root, { ...a });
 h.displayName = "Select";
-const D = e.Group, U = e.Value, x = g(
+const U = e.Group, L = 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: {
@@ -139,13 +140,13 @@ z.displayName = e.Separator.displayName;
 export {
   h as Select,
   w as SelectContent,
-  D as SelectGroup,
+  U as SelectGroup,
   v as SelectItem,
   S as SelectLabel,
   f as SelectScrollDownButton,
   p as SelectScrollUpButton,
   z as SelectSeparator,
   N as SelectTrigger,
-  U as SelectValue,
+  L as SelectValue,
   x as selectTriggerVariants
 };

package/dist/esm/components/separate-line/index.js

@@ -0,0 +1,4 @@
+import { SeparateLine as a } from "./separate-line.js";
+export {
+  a as SeparateLine
+};

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

@@ -0,0 +1,28 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as p from "react";
+import "@gearbox-protocol/sdk";
+import { cn as d } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const s = p.forwardRef(
+  ({ outOfBound: r = 0, margin: e = 10, left: t = 0, thickness: o = 1, className: i }, a) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: a,
+      className: d(
+        "relative flex flex-row flex-nowrap items-center justify-center border-b border-gray-20",
+        i
+      ),
+      style: {
+        left: t ? -t : void 0,
+        margin: e ? `${e}px 0` : void 0,
+        width: r ? `calc(100% + ${r}px)` : void 0,
+        borderBottomWidth: o
+      }
+    }
+  )
+);
+s.displayName = "SeparateLine";
+export {
+  s as SeparateLine
+};

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

@@ -4,17 +4,18 @@ import * as e from "react";
 import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const s = e.forwardRef(
-  ({ className: a, orientation: r = "horizontal", decorative: t = !0, ...m }, p) => /* @__PURE__ */ i(
+  ({ className: t, orientation: r = "horizontal", decorative: a = !0, ...m }, p) => /* @__PURE__ */ i(
     o.Root,
     {
       ref: p,
-      decorative: t,
+      decorative: a,
       orientation: r,
       className: l(
         "shrink-0 bg-border",
         r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        a
+        t
       ),
       ...m
     }

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

@@ -1,20 +1,21 @@
 import { jsx as r } from "react/jsx-runtime";
-import { SimpleTooltip as m } from "../tooltip/simple-tooltip.js";
+import { SimpleTooltip as f } 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({
+import "luxon";
+function j({
   children: o,
   maxLength: t,
-  showTooltip: f = !0,
+  showTooltip: m = !0,
   className: i
 }) {
   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;
+  return typeof o == "string" && t !== void 0 ? m && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(f, { title: n(o, t), children: o }) : n(o, t) : o;
 }
 export {
-  g as ShortString
+  j as ShortString
 };

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

@@ -1,4 +1,4 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import "../buttons/back-button/back-button.js";
 import "../buttons/button/button.js";
 import { CopyButton as m } from "../buttons/copy-button/copy-button.js";
@@ -11,26 +11,27 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import { shortenHash as s } from "../../utils/format.js";
+import "luxon";
 import "../buttons/tab-button/tab-button.js";
 import { Identicon as a } from "./identicon.js";
-function B({
-  confirmation: e,
+function C({
+  confirmation: r,
   note: o,
   explorerUrl: i
 }) {
-  return /* @__PURE__ */ r("div", { className: "group relative flex items-center", children: [
+  return /* @__PURE__ */ e("div", { className: "group relative flex items-center", children: [
     /* @__PURE__ */ t("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
-    /* @__PURE__ */ r("div", { className: "ml-10 flex items-center gap-2", children: [
-      /* @__PURE__ */ t(a, { address: e, size: 32 }),
-      /* @__PURE__ */ t("span", { className: "text-foreground whitespace-nowrap", children: s(e) }),
+    /* @__PURE__ */ e("div", { className: "ml-10 flex items-center gap-2", children: [
+      /* @__PURE__ */ t(a, { address: r, size: 32 }),
+      /* @__PURE__ */ t("span", { className: "text-foreground whitespace-nowrap", children: s(r) }),
       o && /* @__PURE__ */ t("span", { className: "text-gray-500 text-xs whitespace-nowrap", children: o }),
-      /* @__PURE__ */ r("div", { className: "flex opacity-0 transition-opacity group-hover:opacity-100", children: [
-        /* @__PURE__ */ t(m, { text: e }),
+      /* @__PURE__ */ e("div", { className: "flex opacity-0 transition-opacity group-hover:opacity-100", children: [
+        /* @__PURE__ */ t(m, { text: r }),
         i && /* @__PURE__ */ t(p, { url: i })
       ] })
     ] })
   ] });
 }
 export {
-  B as ConfirmationItem
+  C as ConfirmationItem
 };

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

@@ -3,29 +3,30 @@ import { useMemo as c } from "react";
 import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 import { Skeleton as n } from "./skeleton.js";
 const l = {
   sm: "space-y-2",
   md: "space-y-3",
   lg: "space-y-4"
 };
-function g({
+function h({
   lines: o = 5,
-  className: e,
-  gap: t = "md"
+  className: t,
+  gap: e = "md"
 }) {
   const s = c(
     () => Array.from({ length: o }, () => crypto.randomUUID()),
     [o]
   );
-  return /* @__PURE__ */ m("div", { className: r(l[t], e), children: s.map((a, p) => /* @__PURE__ */ m(
+  return /* @__PURE__ */ m("div", { className: r(l[e], t), children: s.map((p, a) => /* @__PURE__ */ m(
     n,
     {
-      className: r("h-4 w-full", p === o - 1 && "w-3/4")
+      className: r("h-4 w-full", a === o - 1 && "w-3/4")
     },
-    a
+    p
   )) });
 }
 export {
-  g as SkeletonStack
+  h as SkeletonStack
 };

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

@@ -4,6 +4,7 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as w } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const c = p("animate-pulse rounded-md bg-muted", {
   variants: {
     variant: {
@@ -48,21 +49,21 @@ const c = p("animate-pulse rounded-md bg-muted", {
     height: "md"
   }
 });
-function S({
+function V({
   className: s,
   variant: l,
   speed: n,
   width: t,
   height: e,
-  loading: d = !0,
+  loading: m = !0,
   children: i,
-  style: m,
+  style: d,
   ...h
 }) {
-  if (!d && i !== void 0)
+  if (!m && i !== void 0)
     return /* @__PURE__ */ a(f, { children: i });
   const r = typeof t == "number", o = typeof e == "number", u = {
-    ...m,
+    ...d,
     ...r && { width: `${t}px` },
     ...o && { height: `${e}px` }
   };
@@ -84,6 +85,6 @@ function S({
   );
 }
 export {
-  S as Skeleton,
+  V as Skeleton,
   c as skeletonVariants
 };