@gearbox-protocol/permissionless-ui 1.22.0-next.99 → 1.22.1

package/dist/esm/components/overflow-container/overflow-container.js

@@ -4,19 +4,20 @@ import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const u = {
+import "../../utils/z-index.js";
+const m = {
   default: "rounded-lg",
   small: "rounded-[8px]"
-}, f = {
+}, u = {
   default: "border border-gray-20",
   light: "border border-gray-50",
   none: ""
 };
-function g({
+function C({
   children: o,
   maxHeight: e,
-  minHeight: d = e,
-  size: p = "default",
+  minHeight: p = e,
+  size: d = "default",
   borderColor: s = "default",
   outerPadding: a = "14px 12px 14px 0",
   innerPadding: l = "0 22px 0 16px",
@@ -28,8 +29,8 @@ function g({
     {
       className: t(
         "pt-3.5 pr-3 pl-0 pb-3.5",
-        u[p],
-        f[s],
+        m[d],
+        u[s],
         i
       ),
       style: { padding: a },
@@ -37,7 +38,7 @@ function g({
         "div",
         {
           className: t("overflow-y-auto w-full", n),
-          style: { maxHeight: e, minHeight: d },
+          style: { maxHeight: e, minHeight: p },
           children: l !== null ? /* @__PURE__ */ r("div", { style: { padding: l }, children: o }) : o
         }
       )
@@ -45,5 +46,5 @@ function g({
   );
 }
 export {
-  g as OverflowContainer
+  C as OverflowContainer
 };

package/dist/esm/components/page-title/page-title.js

@@ -1,11 +1,12 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import * as u from "react";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
+import * as C from "react";
 import "@gearbox-protocol/sdk";
-import { cn as l } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const v = d(
+import "../../utils/z-index.js";
+const A = o(
   "font-semibold leading-tight tracking-tight flex items-center gap-2",
   {
     variants: {
@@ -27,7 +28,7 @@ const v = d(
       variant: "default"
     }
   }
-), N = d(
+), T = o(
   "flex flex-col md:flex-row items-start md:items-center",
   {
     variants: {
@@ -41,63 +42,74 @@ const v = d(
       spacing: "default"
     }
   }
-), w = u.forwardRef(
+), V = C.forwardRef(
   ({
-    className: n,
-    size: x,
-    variant: f,
-    spacing: c,
-    backButton: i,
-    icon: m,
-    actions: a,
-    subtitle: s,
-    as: p = "h1",
-    children: g,
-    actionsPosition: r = "left",
-    ...o
-  }, h) => /* @__PURE__ */ t(
-    "div",
-    {
-      ref: h,
-      className: l("w-full flex items-center gap-4", n),
-      ...o,
-      children: [
-        i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center", children: i }),
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: l(
-              N({ spacing: c }),
-              r === "right" && "justify-between w-full"
-            ),
-            children: [
-              /* @__PURE__ */ e("div", { className: "flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3 min-w-0", children: [
-                m && /* @__PURE__ */ e("div", { className: "shrink-0", children: m }),
-                /* @__PURE__ */ t("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
-                    /* @__PURE__ */ e(
-                      p,
-                      {
-                        className: l(v({ size: x, variant: f }), "m-0"),
-                        children: g
-                      }
-                    ),
-                    a && r === "left" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
-                  ] }),
-                  s && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground mt-1", children: s })
-                ] })
-              ] }) }),
-              a && r === "right" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
-            ]
-          }
-        )
-      ]
-    }
-  )
+    className: x,
+    size: g,
+    variant: p,
+    spacing: m,
+    backButton: n,
+    icon: d,
+    actions: l,
+    subtitle: c,
+    as: h = "h1",
+    children: u,
+    actionsPosition: w = "left",
+    actionsPositionMd: f,
+    ...v
+  }, N) => {
+    const e = w === "right", a = f ? f === "right" : e, i = e !== a, y = i ? s(
+      "flex",
+      m === "sm" ? "gap-2" : m === "lg" ? "gap-6" : "gap-4",
+      e ? "flex-row items-center justify-between w-full" : "flex-col items-start",
+      a ? "md:flex-row md:items-center md:justify-between md:w-full" : "md:flex-row md:items-center md:justify-start"
+    ) : s(
+      T({ spacing: m }),
+      e && "justify-between w-full"
+    ), j = i ? s(
+      "shrink-0 items-center gap-2",
+      e ? "hidden" : "flex",
+      a ? "md:hidden" : "md:flex"
+    ) : "shrink-0 flex items-center gap-2", k = i ? s(
+      "shrink-0 items-center gap-2",
+      e ? "flex" : "hidden",
+      a ? "md:flex" : "md:hidden"
+    ) : "shrink-0 flex items-center gap-2", R = i ? !0 : !e, b = i ? !0 : e;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: N,
+        className: s("w-full flex items-center gap-4", x),
+        ...v,
+        children: [
+          n && /* @__PURE__ */ t("div", { className: "shrink-0 flex items-center", children: n }),
+          /* @__PURE__ */ r("div", { className: y, children: [
+            /* @__PURE__ */ t("div", { className: "flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-3 min-w-0", children: [
+              d && /* @__PURE__ */ t("div", { className: "shrink-0", children: d }),
+              /* @__PURE__ */ r("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ t(
+                    h,
+                    {
+                      className: s(A({ size: g, variant: p }), "m-0"),
+                      children: u
+                    }
+                  ),
+                  l && R && /* @__PURE__ */ t("div", { className: j, children: l })
+                ] }),
+                c && /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground mt-1", children: c })
+              ] })
+            ] }) }),
+            l && b && /* @__PURE__ */ t("div", { className: k, children: l })
+          ] })
+        ]
+      }
+    );
+  }
 );
-w.displayName = "PageTitle";
+V.displayName = "PageTitle";
 export {
-  w as PageTitle,
-  N as pageTitleRootVariants,
-  v as pageTitleVariants
+  V as PageTitle,
+  T as pageTitleRootVariants,
+  A as pageTitleVariants
 };

package/dist/esm/components/percent-indicator/percent-indicator.js

@@ -5,7 +5,8 @@ import { cn as n } from "../../utils/cn.js";
 import "sonner";
 import { percentTemplate as u } from "../../utils/format-money.js";
 import "luxon";
-function g({
+import "../../utils/z-index.js";
+function C({
   percent: t,
   decimals: r = 2,
   showColor: e = !0,
@@ -15,5 +16,5 @@ function g({
   return /* @__PURE__ */ m("div", { className: n("font-medium", e ? t >= 90 ? "text-destructive" : t >= 70 ? "text-orange-500" : t >= 50 ? "text-yellow-600" : "text-green-600" : "", o), ...i, children: u(t, r) });
 }
 export {
-  g as PercentIndicator
+  C as PercentIndicator
 };

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" }),