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

package/dist/esm/components/accordion/accordion.js

@@ -6,7 +6,8 @@ import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const A = o.Root, l = c.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
+import "../../utils/z-index.js";
+const u = o.Root, l = c.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ a(
   o.Item,
   {
     ref: e,
@@ -52,7 +53,7 @@ const f = c.forwardRef(({ className: r, innerClassName: t, children: e, ...s },
 ));
 f.displayName = o.Content.displayName;
 export {
-  A as Accordion,
+  u as Accordion,
   f as AccordionContent,
   l as AccordionItem,
   p as AccordionTrigger

package/dist/esm/components/address/address.js

@@ -1,11 +1,12 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { WithCopy as f } from "../with-copy/with-copy.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function j({
+import "../../utils/z-index.js";
+function N({
   address: o = "",
   short: p = !0,
   startChars: t = 6,
@@ -14,9 +15,9 @@ function j({
   children: c,
   className: e
 }) {
-  const l = p && o.length > t + i + 3 ? `${o.slice(0, t)}...${o.slice(-i)}` : o, n = /* @__PURE__ */ m("span", { className: u("font-mono text-sm", e), children: c || l });
-  return r && o ? /* @__PURE__ */ m(f, { toCopy: o, children: n }) : n;
+  const l = p && o.length > t + i + 3 ? `${o.slice(0, t)}...${o.slice(-i)}` : o, m = /* @__PURE__ */ n("span", { className: u("font-mono text-sm", e), children: c || l });
+  return r && o ? /* @__PURE__ */ n(f, { toCopy: o, children: m }) : m;
 }
 export {
-  j as Address
+  N as Address
 };

package/dist/esm/components/alert-badge/alert-badge.js

@@ -8,6 +8,7 @@ import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 function r({
   icon: e,
   size: a,

package/dist/esm/components/alert-dialog/alert-dialog.js

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as n } from "react/jsx-runtime";
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-alert-dialog";
 import * as i from "react";
 import "../buttons/back-button/back-button.js";
@@ -11,35 +11,38 @@ import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import { Z_INDEX as m } from "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
-const h = t.Root, k = t.Trigger, d = t.Portal, m = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const _ = t.Root, h = t.Trigger, c = t.Portal, n = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Overlay,
   {
     className: r(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      m.MODAL_ALERT,
+      "fixed inset-0 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       e
     ),
     ...a,
     ref: o
   }
 ));
-m.displayName = t.Overlay.displayName;
-const c = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ n(d, { children: [
-  /* @__PURE__ */ l(m, {}),
+n.displayName = t.Overlay.displayName;
+const p = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(c, { children: [
+  /* @__PURE__ */ l(n, {}),
   /* @__PURE__ */ l(
     t.Content,
     {
       ref: o,
       className: r(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-background p-4 sm:p-6 sm:w-full shadow-lg rounded-lg",
+        m.MODAL_ALERT,
+        "fixed left-[50%] top-[50%] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-background p-4 sm:p-6 sm:w-full shadow-lg rounded-lg",
         e
       ),
       ...a
     }
   )
 ] }));
-c.displayName = t.Content.displayName;
-const p = ({
+p.displayName = t.Content.displayName;
+const f = ({
   className: e,
   ...a
 }) => /* @__PURE__ */ l(
@@ -52,8 +55,8 @@ const p = ({
     ...a
   }
 );
-p.displayName = "AlertDialogHeader";
-const f = ({
+f.displayName = "AlertDialogHeader";
+const g = ({
   className: e,
   ...a
 }) => /* @__PURE__ */ l(
@@ -66,8 +69,8 @@ const f = ({
     ...a
   }
 );
-f.displayName = "AlertDialogFooter";
-const g = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+g.displayName = "AlertDialogFooter";
+const N = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Title,
   {
     ref: o,
@@ -75,8 +78,8 @@ const g = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
     ...a
   }
 ));
-g.displayName = t.Title.displayName;
-const N = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+N.displayName = t.Title.displayName;
+const A = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Description,
   {
     ref: o,
@@ -84,7 +87,7 @@ const N = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
     ...a
   }
 ));
-N.displayName = t.Description.displayName;
+A.displayName = t.Description.displayName;
 const y = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Action,
   {
@@ -94,7 +97,7 @@ const y = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   }
 ));
 y.displayName = t.Action.displayName;
-const x = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const D = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Cancel,
   {
     ref: o,
@@ -106,17 +109,17 @@ const x = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
     ...a
   }
 ));
-x.displayName = t.Cancel.displayName;
+D.displayName = t.Cancel.displayName;
 export {
-  h as AlertDialog,
+  _ as AlertDialog,
   y as AlertDialogAction,
-  x as AlertDialogCancel,
-  c as AlertDialogContent,
-  N as AlertDialogDescription,
-  f as AlertDialogFooter,
-  p as AlertDialogHeader,
-  m as AlertDialogOverlay,
-  d as AlertDialogPortal,
-  g as AlertDialogTitle,
-  k as AlertDialogTrigger
+  D as AlertDialogCancel,
+  p as AlertDialogContent,
+  A as AlertDialogDescription,
+  g as AlertDialogFooter,
+  f as AlertDialogHeader,
+  n as AlertDialogOverlay,
+  c as AlertDialogPortal,
+  N as AlertDialogTitle,
+  h as AlertDialogTrigger
 };

package/dist/esm/components/alert-modal/alert-modal.js

@@ -11,6 +11,7 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
 import "../modal/modal.js";
 import "@radix-ui/react-dialog";
@@ -20,22 +21,31 @@ import "../dialog/dialog-description.js";
 import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
-import { DialogModalContainer as c } from "../dialog/dialog-modal-container.js";
+import { DialogModalContainer as n } from "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
 import "viem";
 import "../input/input.js";
 import "../label/label.js";
 import { FormattedMessageTyped as o } from "../typed-intl/index.js";
-const n = s.forwardRef(
+const c = s.forwardRef(
   function({ show: e, title: i, body: m, onHide: r, onConfirm: l = r }, p) {
-    return /* @__PURE__ */ t(c, { ref: p, show: e, onClickOutside: r, children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-5", children: [
-      /* @__PURE__ */ t("h2", { className: "w-full text-xl font-semibold leading-6 text-center", children: /* @__PURE__ */ t(o, { messageId: i }) }),
-      /* @__PURE__ */ t("div", { className: "w-full text-center", children: /* @__PURE__ */ t(o, { messageId: m }) }),
-      /* @__PURE__ */ t("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ t(d, { onClick: l, className: "w-1/4", children: /* @__PURE__ */ t(o, { messageId: "components.alertModal.ok" }) }) })
-    ] }) });
+    return /* @__PURE__ */ t(
+      n,
+      {
+        ref: p,
+        show: e,
+        onClickOutside: r,
+        modal: { zIndexLayer: "MODAL_ALERT" },
+        children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-5", children: [
+          /* @__PURE__ */ t("h2", { className: "w-full text-xl font-semibold leading-6 text-center", children: /* @__PURE__ */ t(o, { messageId: i }) }),
+          /* @__PURE__ */ t("div", { className: "w-full text-center", children: /* @__PURE__ */ t(o, { messageId: m }) }),
+          /* @__PURE__ */ t("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ t(d, { onClick: l, className: "w-1/4", children: /* @__PURE__ */ t(o, { messageId: "components.alertModal.ok" }) }) })
+        ] })
+      }
+    );
   }
 );
-n.displayName = "AlertModal";
+c.displayName = "AlertModal";
 export {
-  n as AlertModal
+  c as AlertModal
 };

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

@@ -7,7 +7,8 @@ import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const g = p.forwardRef(
+import { Z_INDEX as g } from "../../utils/z-index.js";
+const w = p.forwardRef(
   ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
     "nav",
     {
@@ -22,8 +23,8 @@ const g = p.forwardRef(
     }
   )
 );
-g.displayName = "AppBar";
-const w = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
+w.displayName = "AppBar";
+const v = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
   "div",
   {
     ref: o,
@@ -32,8 +33,8 @@ const w = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__
     children: a
   }
 ));
-w.displayName = "AppBarSidePanel";
-const v = p.forwardRef(
+v.displayName = "AppBarSidePanel";
+const N = p.forwardRef(
   ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
     "div",
     {
@@ -48,8 +49,8 @@ const v = p.forwardRef(
     }
   )
 );
-v.displayName = "AppBarCenter";
-const N = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
+N.displayName = "AppBarCenter";
+const h = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
   "div",
   {
     ref: o,
@@ -62,8 +63,8 @@ const N = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__
     children: a
   }
 ));
-N.displayName = "AppBarCenterContent";
-const h = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className: o, ...s }, i) => /* @__PURE__ */ d(
+h.displayName = "AppBarCenterContent";
+const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className: o, ...s }, i) => /* @__PURE__ */ d(
   "div",
   {
     ref: i,
@@ -105,7 +106,7 @@ const h = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className
     ]
   }
 ));
-h.displayName = "AppBarNavItem";
+B.displayName = "AppBarNavItem";
 const f = {
   sm: "sm",
   md: "default",
@@ -114,7 +115,7 @@ const f = {
   sm: 12,
   md: 14,
   lg: 16
-}, B = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+}, y = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
   c,
   {
     ref: o,
@@ -133,8 +134,8 @@ const f = {
     )
   }
 ));
-B.displayName = "AppBarHamburgerButton";
-const y = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+y.displayName = "AppBarHamburgerButton";
+const b = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
   c,
   {
     ref: o,
@@ -143,18 +144,18 @@ const y = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE
     width: "compact",
     className: t("inline-flex", a),
     ...r,
-    children: /* @__PURE__ */ n(b, {})
+    children: /* @__PURE__ */ n(A, {})
   }
 ));
-y.displayName = "AppBarDotsButton";
-function b() {
+b.displayName = "AppBarDotsButton";
+function A() {
   return /* @__PURE__ */ d("span", { className: "inline-flex items-center justify-center gap-[2px]", children: [
     /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
     /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
     /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" })
   ] });
 }
-const A = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, ...s }, i) => /* @__PURE__ */ n(
+const R = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, ...s }, i) => /* @__PURE__ */ n(
   "div",
   {
     ref: i,
@@ -178,8 +179,8 @@ const A = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, .
     children: e
   }
 ));
-A.displayName = "AppBarMenuItem";
-const R = p.forwardRef(({ children: e, className: a, ...r }, o) => /* @__PURE__ */ n(
+R.displayName = "AppBarMenuItem";
+const D = p.forwardRef(({ children: e, className: a, ...r }, o) => /* @__PURE__ */ n(
   "div",
   {
     ref: o,
@@ -188,22 +189,22 @@ const R = p.forwardRef(({ children: e, className: a, ...r }, o) => /* @__PURE__
       "mt-2 p-1 overflow-hidden min-w-40",
       "bg-gray-40 rounded-xl",
       "shadow-[0_2px_16px_rgba(0,0,0,0.6)]",
-      "z-50",
+      g.DROPDOWN,
       a
     ),
     ...r,
     children: e
   }
 ));
-R.displayName = "AppBarDropdownMenu";
+D.displayName = "AppBarDropdownMenu";
 export {
-  g as AppBar,
-  v as AppBarCenter,
-  N as AppBarCenterContent,
-  y as AppBarDotsButton,
-  R as AppBarDropdownMenu,
-  B as AppBarHamburgerButton,
-  A as AppBarMenuItem,
-  h as AppBarNavItem,
-  w as AppBarSidePanel
+  w as AppBar,
+  N as AppBarCenter,
+  h as AppBarCenterContent,
+  b as AppBarDotsButton,
+  D as AppBarDropdownMenu,
+  y as AppBarHamburgerButton,
+  R as AppBarMenuItem,
+  B as AppBarNavItem,
+  v as AppBarSidePanel
 };

package/dist/esm/components/apy/apy.js

@@ -10,7 +10,8 @@ import "tailwind-merge";
 import "sonner";
 import { percentTemplate as s } from "../../utils/format-money.js";
 import "luxon";
-function j({
+import "../../utils/z-index.js";
+function v({
   apy: r,
   tooltip: e = /* @__PURE__ */ t(l, { messageId: "components.APY.tip" }),
   naText: o = "N/A"
@@ -26,5 +27,5 @@ function j({
   ) : /* @__PURE__ */ t(i, { children: m });
 }
 export {
-  j as Apy
+  v as Apy
 };

package/dist/esm/components/arc-loader/arc-loader.js

@@ -1,10 +1,11 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
 import { cva as C } from "class-variance-authority";
 import * as f from "react";
 import "@gearbox-protocol/sdk";
 import { cn as I } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const R = C(
   "relative inline-flex items-center justify-center"
 ), j = f.forwardRef(
@@ -15,14 +16,14 @@ const R = C(
     speed: $ = "1s",
     className: y
   }, u) => {
-    const c = f.useId().replace(/:/g, "-"), n = (t - e) / 2, r = t / 2, s = -90, x = 210, i = s * Math.PI / 180, l = (s + x) * Math.PI / 180, d = r + n * Math.cos(i), g = r + n * Math.sin(i), p = r + n * Math.cos(l), h = r + n * Math.sin(l), A = `M ${d} ${g} A ${n} ${n} 0 1 1 ${p} ${h}`, M = d / t * 100, L = g / t * 100, v = p / t * 100, w = h / t * 100;
+    const c = f.useId().replace(/:/g, "-"), n = (t - e) / 2, r = t / 2, s = -90, x = 210, i = s * Math.PI / 180, l = (s + x) * Math.PI / 180, d = r + n * Math.cos(i), p = r + n * Math.sin(i), g = r + n * Math.cos(l), m = r + n * Math.sin(l), A = `M ${d} ${p} A ${n} ${n} 0 1 1 ${g} ${m}`, M = d / t * 100, L = p / t * 100, v = g / t * 100, w = m / t * 100;
     return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
         className: I(R(), y),
         style: { width: t, height: t },
-        children: /* @__PURE__ */ m(
+        children: /* @__PURE__ */ h(
           "svg",
           {
             className: "absolute origin-center animate-spin",
@@ -34,7 +35,7 @@ const R = C(
             "aria-label": "Loading",
             children: [
               /* @__PURE__ */ o("title", { children: "Loading" }),
-              /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ m(
+              /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ h(
                 "linearGradient",
                 {
                   id: c,

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

@@ -1,4 +1,4 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import * as C from "react";
 import { Description as n } from "../description/description.js";
 import { ShortString as h } from "../short-string/short-string.js";
@@ -9,6 +9,7 @@ import "@gearbox-protocol/sdk";
 import { cn as E } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const Z = {
   default: 24,
   sm: 20,
@@ -28,9 +29,9 @@ const Z = {
     chainId: u,
     value: s,
     valueDescription: m,
-    size: r = "default",
-    iconSize: w = r,
-    gapSize: c = r,
+    size: e = "default",
+    iconSize: w = e,
+    gapSize: c = e,
     last: R,
     symbolMaxLength: b,
     descriptionMaxLength: L,
@@ -40,7 +41,7 @@ const Z = {
     className: j,
     height: y
   }, A) => {
-    const i = N || o?.title, a = r === "md" ? "default" : r;
+    const i = N || o?.title, a = e === "md" ? "default" : e;
     return /* @__PURE__ */ l(
       G,
       {
@@ -52,8 +53,8 @@ const Z = {
         last: R,
         height: y,
         children: [
-          /* @__PURE__ */ e(p, { size: a, className: "text-left", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ r(p, { size: a, className: "text-left", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ r(
               I,
               {
                 token: o,
@@ -63,9 +64,9 @@ const Z = {
               }
             ),
             /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
-              i && /* @__PURE__ */ e(h, { maxLength: b, children: i }),
-              i && t && /* @__PURE__ */ e(x, { height: g[c] }),
-              t && /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+              i && /* @__PURE__ */ r(h, { maxLength: b, children: i }),
+              i && t && /* @__PURE__ */ r(x, { height: g[c] }),
+              t && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(
                 h,
                 {
                   maxLength: L,
@@ -75,10 +76,10 @@ const Z = {
               ) })
             ] })
           ] }) }),
-          !f && /* @__PURE__ */ e(p, { size: a, className: "text-right", children: /* @__PURE__ */ l("div", { className: "w-full flex flex-col items-end justify-end", children: [
+          !f && /* @__PURE__ */ r(p, { size: a, className: "text-right", children: /* @__PURE__ */ l("div", { className: "w-full flex flex-col items-end justify-end", children: [
             s,
-            s && m && /* @__PURE__ */ e(x, { height: g[c] }),
-            m && /* @__PURE__ */ e(n, { children: m })
+            s && m && /* @__PURE__ */ r(x, { height: g[c] }),
+            m && /* @__PURE__ */ r(n, { children: m })
           ] }) })
         ]
       }