@gearbox-protocol/permissionless-ui 1.22.0-next.98 → 1.22.0

package/dist/esm/components/pool-apy-tooltip/pool-apy-tooltip.js

@@ -1,6 +1,7 @@
 import { jsx as e, jsxs as o, Fragment as x } from "react/jsx-runtime";
-import { faPlus as T } from "@fortawesome/free-solid-svg-icons";
-import { IconLighting as k } from "@gearbox-protocol/static";
+import { faPlus as N } from "@fortawesome/free-solid-svg-icons";
+import { IconLighting as T } from "@gearbox-protocol/static";
+import { getRewardTokenSymbol as k } from "../compound-apy/compound-apy.js";
 import { FaIcon as S } from "../icons/fa-icon.js";
 import { PointsIcon as _ } from "../points-icon/points-icon.js";
 import { Skeleton as z } from "../skeleton/skeleton.js";
@@ -8,19 +9,19 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as y } from "../../utils/cn.js";
 import "sonner";
-import { percentTemplate as a } from "../../utils/format-money.js";
-import { getStatic as A } from "../../utils/static.js";
+import { percentTemplate as r } from "../../utils/format-money.js";
 import "luxon";
+import "../../utils/z-index.js";
 import { TokenIcon as C } from "../token-icon/token-icon.js";
 import { SimpleTooltip as Y } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import { FormattedMessageTyped as n } from "../typed-intl/index.js";
 import { VerticalIndicator as l } from "../vertical-indicator/vertical-indicator.js";
 import { VerticalList as u } from "../vertical-list/vertical-list.js";
-const L = {
+const A = {
   supplyAPY: "components.apyParts.supplyAPY",
   tokenYield: "components.apyParts.tokenYield"
-}, $ = {
+}, L = {
   supplyAPY: "components.apyParts.supplyAPY.tip",
   tokenYield: "components.apyParts.tokenYield.tip"
 }, v = {
@@ -28,28 +29,25 @@ const L = {
   "cross-chain-deposit": "components.apyParts.points.condition.crossDeposit",
   holding: void 0
 };
-function E(r) {
-  return r === "GEAR" ? { icon: A("/logo/logo_symbol.png") } : r;
+function $({ children: d }) {
+  return /* @__PURE__ */ e("div", { className: "w-[110px] grid grid-cols-2 items-end text-end", children: d });
 }
-function O({ children: r }) {
-  return /* @__PURE__ */ e("div", { className: "w-[110px] grid grid-cols-2 items-end text-end", children: r });
-}
-function ne({
-  children: r,
+function oe({
+  children: d,
   totalAPY: f,
   baseAPY: c,
   extraAPY: h,
-  points: i,
-  apy7DAgo: s,
-  externalAPY: d,
+  points: s,
+  apy7DAgo: a,
+  externalAPY: m,
   tokensList: I,
   className: g
 }) {
-  if (!(f !== void 0 || c && c.length > 0 || h && h.length > 0 || i && i.length > 0))
-    return /* @__PURE__ */ e("span", { className: g, children: r });
-  const P = !s || s.totalAPYLoading || s.loading7DAgo, b = !!s, m = (t, p) => b ? /* @__PURE__ */ o(O, { children: [
+  if (!(f !== void 0 || c && c.length > 0 || h && h.length > 0 || s && s.length > 0))
+    return /* @__PURE__ */ e("span", { className: g, children: d });
+  const P = !a || a.totalAPYLoading || a.loading7DAgo, b = !!a, p = (t, i) => b ? /* @__PURE__ */ o($, { children: [
     /* @__PURE__ */ e("span", { children: t }),
-    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: P, children: p }) })
+    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: P, children: i }) })
   ] }) : t, w = /* @__PURE__ */ o(
     "div",
     {
@@ -73,29 +71,29 @@ function ne({
                   messageId: "components.apyParts.title"
                 }
               ) }),
-              value: /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: m("1D", "7D") })
+              value: /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: p("1D", "7D") })
             }
           ),
-          c?.map((t, p) => /* @__PURE__ */ e(
+          c?.map((t, i) => /* @__PURE__ */ e(
             l,
             {
               size: "sm",
-              label: /* @__PURE__ */ e(n, { messageId: L[t.type] }),
+              label: /* @__PURE__ */ e(n, { messageId: A[t.type] }),
               description: /* @__PURE__ */ e(
                 n,
                 {
-                  messageId: $[t.type]
+                  messageId: L[t.type]
                 }
               ),
-              value: m(
-                a(t.apy),
-                a(s?.baseAPY?.[p]?.apy || 0)
+              value: p(
+                r(t.apy),
+                r(a?.baseAPY?.[i]?.apy || 0)
               )
             },
             `base-${t.type}-${t.apy}`
           )),
           h?.map((t) => {
-            const N = I?.[t.rewardToken]?.symbol || t.rewardTokenSymbol;
+            const i = I?.[t.rewardToken];
             return /* @__PURE__ */ e(
               l,
               {
@@ -111,7 +109,7 @@ function ne({
                   /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(
                     C,
                     {
-                      symbol: E(N),
+                      symbol: k(i, t.rewardTokenSymbol),
                       size: 14
                     }
                   ) })
@@ -122,9 +120,9 @@ function ne({
                     messageId: "components.apyParts.extraAPY.tip"
                   }
                 ),
-                value: m(
-                  a(t.apy),
-                  a(t.apy)
+                value: p(
+                  r(t.apy),
+                  r(t.apy)
                 )
               },
               `extra-${t.rewardToken}-${t.apy}`
@@ -142,13 +140,13 @@ function ne({
                 messageId: "components.apyParts.totalAPY"
               }
             ) }),
-            value: m(
-              a(f || 0),
-              a(s?.totalAPY || 0)
+            value: p(
+              r(f || 0),
+              r(a?.totalAPY || 0)
             )
           }
         ) }),
-        d && /* @__PURE__ */ e(
+        m && /* @__PURE__ */ e(
           "div",
           {
             className: y(
@@ -160,14 +158,14 @@ function ne({
             children: /* @__PURE__ */ e(
               n,
               {
-                messageId: d.tooltip,
+                messageId: m.tooltip,
                 values: {
-                  name: d.name,
+                  name: m.name,
                   value: /* @__PURE__ */ o(x, { children: [
-                    /* @__PURE__ */ e("span", { className: "text-gray-90 mr-1.5", children: /* @__PURE__ */ e(k, { size: 14, style: { verticalAlign: "top" } }) }),
+                    /* @__PURE__ */ e("span", { className: "text-gray-90 mr-1.5", children: /* @__PURE__ */ e(T, { size: 14, style: { verticalAlign: "top" } }) }),
                     /* @__PURE__ */ o("span", { className: "font-bold", children: [
                       "+",
-                      a(d.apy)
+                      r(m.apy)
                     ] })
                   ] })
                 }
@@ -175,7 +173,7 @@ function ne({
             )
           }
         ),
-        i && i.length > 0 && /* @__PURE__ */ o(x, { children: [
+        s && s.length > 0 && /* @__PURE__ */ o(x, { children: [
           /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
             "div",
             {
@@ -186,11 +184,11 @@ function ne({
                 "rounded-full",
                 "bg-gray-20"
               ),
-              children: /* @__PURE__ */ e(S, { icon: T, className: "size-2.5 text-white" })
+              children: /* @__PURE__ */ e(S, { icon: N, className: "size-2.5 text-white" })
             }
           ) }),
           /* @__PURE__ */ e("div", { className: "h-6" }),
-          /* @__PURE__ */ e(u, { children: i.map((t) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e(u, { children: s.map((t) => /* @__PURE__ */ e(
             l,
             {
               size: "sm",
@@ -241,12 +239,12 @@ function ne({
       type: "modal-tooltip",
       minWidth: "100%",
       maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: g, children: r }),
+      title: /* @__PURE__ */ e("span", { className: g, children: d }),
       triggerClassName: g,
       children: w
     }
   );
 }
 export {
-  ne as PoolAPYTooltip
+  oe as PoolAPYTooltip
 };

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

@@ -5,10 +5,11 @@ import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const f = {
   primary: "#e0369c",
   secondary: "#fff"
-}, j = m.forwardRef(({ children: t, size: i = 24, color: s = "primary", className: l }, c) => {
+}, v = m.forwardRef(({ children: t, size: i = 24, color: s = "primary", className: l }, c) => {
   const e = i + 8, o = f[s];
   return /* @__PURE__ */ d("div", { ref: c, className: a("relative", l), children: [
     /* @__PURE__ */ r(
@@ -38,5 +39,5 @@ const f = {
   ] });
 });
 export {
-  j as PoolIndicatorIcon
+  v as PoolIndicatorIcon
 };

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

@@ -1,9 +1,10 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const a = {
   primary: "border-primary bg-primary",
   secondary: "border-secondary bg-secondary",
@@ -11,15 +12,15 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function u({
-  size: e = 24,
+function y({
+  size: r = 24,
   color: n = "primary",
   className: s,
   children: d
 }) {
-  const t = e + 8, l = a[n];
+  const t = r + 8, l = a[n];
   return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "div",
       {
         className: o(
@@ -35,7 +36,7 @@ function u({
         }
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "div",
       {
         className: o(
@@ -43,17 +44,17 @@ function u({
           l.split(" ")[1]
         ),
         style: {
-          top: -e / 4,
-          right: -e / 4,
-          width: e * 7 / 12,
-          height: e * 7 / 12,
+          top: -r / 4,
+          right: -r / 4,
+          width: r * 7 / 12,
+          height: r * 7 / 12,
           zIndex: 1
         },
         children: /* @__PURE__ */ i(
           "svg",
           {
-            width: e / 3,
-            height: e / 3,
+            width: r / 3,
+            height: r / 3,
             viewBox: "0 0 8 8",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
@@ -61,8 +62,8 @@ function u({
             role: "img",
             "aria-label": "Pool Points Indicator",
             children: [
-              /* @__PURE__ */ r("title", { children: "Pool Points" }),
-              /* @__PURE__ */ r("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+              /* @__PURE__ */ e("title", { children: "Pool Points" }),
+              /* @__PURE__ */ e("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
             ]
           }
         )
@@ -72,5 +73,5 @@ function u({
   ] });
 }
 export {
-  u as PoolPointsIndicator
+  y as PoolPointsIndicator
 };

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

@@ -1,17 +1,18 @@
-import { jsxs as t, jsx as l } from "react/jsx-runtime";
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
 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(
+import "../../utils/z-index.js";
+const p = u.forwardRef(
   ({
     className: o,
     value: e,
     variant: i = "default",
     size: n = "default",
-    showLabel: a = !1,
+    showLabel: t = !1,
     ...m
   }, d) => {
     const f = {
@@ -24,7 +25,7 @@ const g = u.forwardRef(
       warning: "bg-warning",
       danger: "bg-destructive"
     };
-    return /* @__PURE__ */ t("div", { className: s("flex w-full items-center", a && "gap-3"), children: [
+    return /* @__PURE__ */ a("div", { className: s("flex w-full items-center", t && "gap-3"), children: [
       /* @__PURE__ */ l(
         r.Root,
         {
@@ -47,14 +48,14 @@ const g = u.forwardRef(
           )
         }
       ),
-      a && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: [
+      t && /* @__PURE__ */ a("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: [
         e,
         "%"
       ] })
     ] });
   }
 );
-g.displayName = r.Root.displayName;
+p.displayName = r.Root.displayName;
 export {
-  g as Progress
+  p as Progress
 };

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

@@ -7,17 +7,18 @@ import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const c = 33.33, N = {
+import "../../utils/z-index.js";
+const m = 33.33, N = {
   1: { intervalStart: 0, intervalEnd: x, startFrom: 0 },
   2: {
     intervalStart: x,
     intervalEnd: l,
-    startFrom: c
+    startFrom: m
   },
   3: {
     intervalStart: l,
     intervalEnd: Math.ceil(l * 1.2),
-    startFrom: c * 2
+    startFrom: m * 2
   }
 };
 function w(t) {
@@ -25,7 +26,7 @@ function w(t) {
   return r === "good" ? 3 : r === "medium" ? 2 : 1;
 }
 function y(t, r) {
-  const { intervalStart: s, intervalEnd: n, startFrom: a } = N[r], f = Math.min(Math.max(t, s), n) - s, p = n - s, u = f / p * c;
+  const { intervalStart: s, intervalEnd: n, startFrom: a } = N[r], f = Math.min(Math.max(t, s), n) - s, p = n - s, u = f / p * m;
   return a + u;
 }
 const E = g(
@@ -36,7 +37,7 @@ const E = g(
   ].join(" ")
 ), d = "mx-[2.5px] h-2 flex-1 shrink-0 basis-0 rounded-[2px]", F = b.forwardRef(
   ({ progress: t, tip: r, children: s }, n) => {
-    const a = w(t), m = y(t, a);
+    const a = w(t), c = y(t, a);
     return /* @__PURE__ */ o("div", { ref: n, className: i(E()), children: [
       r != null && r !== "" && /* @__PURE__ */ e("div", { className: "absolute right-4 top-4 z-[1] leading-none", children: /* @__PURE__ */ e(h, { maxWidth: "350px", minWidth: "350px", children: r }) }),
       /* @__PURE__ */ e("div", { className: "mb-4 text-base font-medium leading-5", children: s }),
@@ -72,7 +73,7 @@ const E = g(
           "div",
           {
             className: "absolute top-1/2 h-5 w-0.5 -translate-y-1/2 bg-foreground",
-            style: { left: `${m}%` },
+            style: { left: `${c}%` },
             "aria-hidden": !0,
             children: [
               /* @__PURE__ */ e("span", { className: " absolute left-1/2 -top-1/8 h-0 w-0 -translate-x-1/2 translate-y-1/2 border-4 border-transparent border-t-foreground border-b-0" }),

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

@@ -1,34 +1,35 @@
 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 { cn as u } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function k({
+import "../../utils/z-index.js";
+function N({
   value: l,
-  size: e = 40,
+  size: r = 40,
   strokeWidth: t = 4,
   indicatorColor: m = "hsl(var(--primary))",
   trackColor: f = "hsl(var(--muted))",
   className: h,
   children: i
 }) {
-  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;
+  const o = Math.max(0, Math.min(100, l || 0)), e = r / 2, s = e - t / 2, c = 2 * Math.PI * s, p = (100 - o) * c / 100;
   return /* @__PURE__ */ n(
     "div",
     {
-      className: p(
+      className: u(
         "relative inline-flex items-center justify-center",
         h
       ),
-      style: { width: e, height: e },
+      style: { width: r, height: r },
       children: [
         /* @__PURE__ */ n(
           "svg",
           {
-            width: e,
-            height: e,
-            viewBox: `0 0 ${e} ${e}`,
+            width: r,
+            height: r,
+            viewBox: `0 0 ${r} ${r}`,
             className: "rotate-[-90deg]",
             "aria-label": `Progress: ${o}%`,
             role: "img",
@@ -36,8 +37,8 @@ function k({
               /* @__PURE__ */ a(
                 "circle",
                 {
-                  cx: r,
-                  cy: r,
+                  cx: e,
+                  cy: e,
                   r: s,
                   fill: "transparent",
                   stroke: f,
@@ -47,14 +48,14 @@ function k({
               /* @__PURE__ */ a(
                 "circle",
                 {
-                  cx: r,
-                  cy: r,
+                  cx: e,
+                  cy: e,
                   r: s,
                   fill: "transparent",
                   stroke: m,
                   strokeWidth: t,
                   strokeDasharray: c,
-                  strokeDashoffset: u,
+                  strokeDashoffset: p,
                   strokeLinecap: "round",
                   className: "transition-[stroke-dashoffset] duration-300 ease-in-out"
                 }
@@ -68,5 +69,5 @@ function k({
   );
 }
 export {
-  k as ProgressCircle
+  N as ProgressCircle
 };

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

@@ -6,6 +6,7 @@ import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const g = s("w-full flex flex-col gap-4"), f = s(
   [
     "group flex shrink-0 items-center justify-center",

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

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

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

@@ -4,6 +4,7 @@ import "@gearbox-protocol/sdk";
 import { cn as b } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const v = {
   "flex-start": "items-start",
   "flex-end": "items-end",
@@ -18,7 +19,7 @@ const v = {
   "space-around": "justify-around",
   "space-evenly": "justify-evenly"
 };
-function J({
+function N({
   $align: n,
   align: i,
   $justify: r,
@@ -52,5 +53,5 @@ function J({
   );
 }
 export {
-  J as Row
+  N as Row
 };

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

@@ -1,14 +1,15 @@
 import { jsx as e, jsxs as y } from "react/jsx-runtime";
-import { cva as i } from "class-variance-authority";
+import { cva as l } from "class-variance-authority";
 import { useState as n } from "react";
 import { faMagnifyingGlass as b } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as w } from "../icons/fa-icon.js";
 import { Input as V } from "../input/input.js";
 import "@gearbox-protocol/sdk";
-import { cn as l } from "../../utils/cn.js";
+import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const B = i("relative w-full transition-all duration-200", {
+import "../../utils/z-index.js";
+const z = l("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -20,7 +21,7 @@ const B = i("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), I = i("transition-all duration-200 pl-10", {
+}), B = l("transition-all duration-200 pl-10", {
   variants: {
     active: {
       true: "",
@@ -58,7 +59,7 @@ const B = i("relative w-full transition-all duration-200", {
     theme: "light"
   }
 });
-function A({
+function D({
   onChange: c,
   placeholder: m = "Search...",
   className: u,
@@ -70,12 +71,12 @@ function A({
     const s = N.target.value;
     r || p(s), c(s);
   };
-  return /* @__PURE__ */ e("div", { className: l(B({ size: f }), u), children: /* @__PURE__ */ y("div", { className: "relative", children: [
+  return /* @__PURE__ */ e("div", { className: i(z({ size: f }), u), children: /* @__PURE__ */ y("div", { className: "relative", children: [
     /* @__PURE__ */ e(
       w,
       {
         icon: b,
-        className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
+        className: "absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
       }
     ),
     /* @__PURE__ */ e(
@@ -87,11 +88,11 @@ function A({
         onChange: x,
         onFocus: () => a(!0),
         onBlur: () => a(!1),
-        className: l(I({ active: v, theme: d }))
+        className: i(B({ active: v, theme: d }))
       }
     )
   ] }) });
 }
 export {
-  A as SearchBar
+  D as SearchBar
 };

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

@@ -9,6 +9,7 @@ import "@gearbox-protocol/sdk";
 import { cn as f } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const D = x("relative w-full transition-all duration-200", {
   variants: {
     size: {