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

package/dist/esm/components/trading-view/trading-view.js

@@ -1,12 +1,16 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { useMemo as d, useCallback as O, useRef as D } from "react";
-import { toast as $ } from "sonner";
-import { useIsMobile as P } from "../../hooks/use-media-query.js";
-import { RangeButtons as q } from "../buttons/range-buttons/range-buttons.js";
-import { DEFAULT_SERIES_COLORS as i } from "../graph/graph.js";
-import { GraphViewWithData as J } from "../graph/graph-view.js";
-import { GraphDropdown as K } from "./graph-dropdown.js";
-const Q = ({ size: e = 16 }) => /* @__PURE__ */ f(
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { useMemo as d, useCallback as P, useRef as N } from "react";
+import { toast as q } from "sonner";
+import { useIsMobile as J } from "../../hooks/use-media-query.js";
+import "@gearbox-protocol/sdk";
+import { cn as K } from "../../utils/cn.js";
+import "luxon";
+import "../../utils/z-index.js";
+import { RangeButtons as Q } from "../buttons/range-buttons/range-buttons.js";
+import { DEFAULT_SERIES_COLORS as l } from "../graph/graph.js";
+import { GraphViewWithData as X } from "../graph/graph-view.js";
+import { GraphDropdown as Y } from "./graph-dropdown.js";
+const Z = ({ size: e = 16 }) => /* @__PURE__ */ f(
   "svg",
   {
     width: e,
@@ -19,11 +23,11 @@ const Q = ({ size: e = 16 }) => /* @__PURE__ */ f(
     strokeLinejoin: "round",
     "aria-label": "Expand fullscreen",
     children: [
-      /* @__PURE__ */ t("title", { children: "Expand fullscreen" }),
-      /* @__PURE__ */ t("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
+      /* @__PURE__ */ r("title", { children: "Expand fullscreen" }),
+      /* @__PURE__ */ r("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
     ]
   }
-), X = ({ size: e = 16 }) => /* @__PURE__ */ f(
+), G = ({ size: e = 16 }) => /* @__PURE__ */ f(
   "svg",
   {
     width: e,
@@ -36,105 +40,107 @@ const Q = ({ size: e = 16 }) => /* @__PURE__ */ f(
     strokeLinejoin: "round",
     "aria-label": "Exit fullscreen",
     children: [
-      /* @__PURE__ */ t("title", { children: "Exit fullscreen" }),
-      /* @__PURE__ */ t("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
+      /* @__PURE__ */ r("title", { children: "Exit fullscreen" }),
+      /* @__PURE__ */ r("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
     ]
   }
 );
-function se({
+function he({
   data: e,
   yMeasureUnit: n,
   height: h = 306,
-  defaultGraph: g,
-  onGraphSelected: b,
-  graphs: w,
-  isMultipleSelect: I,
-  range: N,
-  rangeList: L,
+  defaultGraph: p,
+  onGraphSelected: x,
+  graphs: v,
+  isMultipleSelect: L,
+  range: j,
+  rangeList: A,
   setRange: E,
-  onGraphExpanded: y,
+  onGraphExpanded: g,
   isGraphExpanded: S,
-  onUnselectSeries: j,
-  graphsWithNoData: R,
-  loadingGraphs: V,
-  noDataMessage: A = "No data available for this graph",
-  currentValueDecimals: B
+  onUnselectSeries: R,
+  graphsWithNoData: V,
+  loadingGraphs: B,
+  noDataMessage: k = "No data available for this graph",
+  currentValueDecimals: M,
+  containerClassName: _,
+  ...F
 }) {
-  const s = d(() => Array.isArray(e) ? e : e ? [e] : [], [e]), k = d(() => Array.isArray(e) && e.length > 1, [e]), M = P(), _ = O(
-    (c, x) => {
-      $.error(A);
+  const s = d(() => Array.isArray(e) ? e : e ? [e] : [], [e]), C = d(() => Array.isArray(e) && e.length > 1, [e]), D = J(), T = P(
+    (m, w) => {
+      q.error(k);
     },
-    [A]
-  ), F = d(() => {
+    [k]
+  ), W = d(() => {
     if (n)
       return Array.isArray(n) ? n[0] : n;
-  }, [n]), T = /* @__PURE__ */ f("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
-    /* @__PURE__ */ t("div", { children: b && w && g && /* @__PURE__ */ t(
-      K,
+  }, [n]), z = (!D && g || A.length > 0 || x && v && p) && /* @__PURE__ */ f("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
+    /* @__PURE__ */ r("div", { children: x && v && p && /* @__PURE__ */ r(
+      Y,
       {
-        onSelected: b,
-        items: w,
-        defaultItem: g,
-        multiple: I,
-        graphsWithNoData: R,
-        loadingGraphs: V,
-        onNoDataSelected: _
+        onSelected: x,
+        items: v,
+        defaultItem: p,
+        multiple: L,
+        graphsWithNoData: V,
+        loadingGraphs: B,
+        onNoDataSelected: T
       }
     ) }),
     /* @__PURE__ */ f("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [
-      /* @__PURE__ */ t(q, { range: N, rangeList: L, setRange: E }),
-      !M && y && /* @__PURE__ */ t(
+      /* @__PURE__ */ r(Q, { range: j, rangeList: A, setRange: E }),
+      !D && g && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           className: "px-2.5 py-1.5 flex min-w-[44px] min-h-[26px] justify-center items-center text-xs leading-[14px] font-medium text-center rounded-md border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-muted border-muted text-muted-foreground hover:border-secondary ml-1.5",
-          onClick: y,
-          children: S ? /* @__PURE__ */ t(X, { size: 16 }) : /* @__PURE__ */ t(Q, { size: 16 })
+          onClick: g,
+          children: S ? /* @__PURE__ */ r(G, { size: 16 }) : /* @__PURE__ */ r(Z, { size: 16 })
         }
       )
     ] })
-  ] }), a = D(/* @__PURE__ */ new Map()), p = D(0), W = d(() => {
-    const c = Array.isArray(n) ? n : void 0;
-    return s.map((x, C) => {
-      const u = x?.title || `Series ${C + 1}`;
-      if (!a.current.has(u)) {
-        const r = new Set(
+  ] }), a = N(/* @__PURE__ */ new Map()), b = N(0), H = d(() => {
+    const m = Array.isArray(n) ? n : void 0;
+    return s.map((w, I) => {
+      const c = w?.title || `Series ${I + 1}`;
+      if (!a.current.has(c)) {
+        const t = new Set(
           Array.from(a.current.values())
         );
-        let o = p.current;
-        for (let l = 0; l < i.length; l++) {
-          const m = (p.current + l) % i.length;
-          if (!r.has(m)) {
-            o = m;
+        let o = b.current;
+        for (let i = 0; i < l.length; i++) {
+          const u = (b.current + i) % l.length;
+          if (!t.has(u)) {
+            o = u;
             break;
           }
         }
-        a.current.set(u, o), p.current = (o + 1) % i.length;
+        a.current.set(c, o), b.current = (o + 1) % l.length;
       }
-      const H = a.current.get(u) ?? 0, v = i[H % i.length];
+      const $ = a.current.get(c) ?? 0, y = l[$ % l.length];
       return {
-        data: [...x?.data || []].sort((r, o) => {
-          const l = typeof r.time == "number" ? r.time : Number(r.time), m = typeof o.time == "number" ? o.time : Number(o.time);
-          return l - m;
-        }).reduce((r, o) => {
-          const l = o.time;
-          return r.length === 0 || r[r.length - 1].time !== l ? r.push({
-            time: l,
+        data: [...w?.data || []].sort((t, o) => {
+          const i = typeof t.time == "number" ? t.time : Number(t.time), u = typeof o.time == "number" ? o.time : Number(o.time);
+          return i - u;
+        }).reduce((t, o) => {
+          const i = o.time;
+          return t.length === 0 || t[t.length - 1].time !== i ? t.push({
+            time: i,
             value: o.value
-          }) : r[r.length - 1] = {
-            time: l,
+          }) : t[t.length - 1] = {
+            time: i,
             value: o.value
-          }, r;
+          }, t;
         }, []),
-        label: u,
-        yMeasureUnit: c?.[C] ?? (Array.isArray(n) ? void 0 : n),
-        color: v.line,
-        topColor: v.top,
-        bottomColor: v.bottom
+        label: c,
+        yMeasureUnit: m?.[I] ?? (Array.isArray(n) ? void 0 : n),
+        color: y.line,
+        topColor: y.top,
+        bottomColor: y.bottom
       };
     });
-  }, [s, n]), z = k && s.length > 0 ? s.some((c) => !c) : !e;
-  return /* @__PURE__ */ t(
+  }, [s, n]), O = C && s.length > 0 ? s.some((m) => !m) : !e;
+  return /* @__PURE__ */ r(
     "div",
     {
       style: {
@@ -142,23 +148,24 @@ function se({
         height: h ? `${h}px` : void 0
       },
       className: "w-full",
-      children: /* @__PURE__ */ t(
-        J,
+      children: /* @__PURE__ */ r(
+        X,
         {
-          series: W,
-          loading: z,
-          toolbar: T,
+          series: H,
+          loading: O,
+          toolbar: z,
           size: h ? "full" : "default",
-          containerClassName: "h-full",
-          showLegend: k,
-          onUnselectSeries: j,
-          yMeasureUnit: F,
-          currentValueDecimals: B
+          containerClassName: K("h-full", _),
+          showLegend: C,
+          onUnselectSeries: R,
+          yMeasureUnit: W,
+          currentValueDecimals: M,
+          ...F
         }
       )
     }
   );
 }
 export {
-  se as TradingView
+  he as TradingView
 };

package/dist/esm/components/typography/typography.js

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const g = x("", {
   variants: {
     variant: {
@@ -85,12 +86,12 @@ const g = x("", {
     truncate: a,
     as: l,
     ...h
-  }, d) => {
-    const m = l || f[t || "body"];
+  }, m) => {
+    const d = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      m,
+      d,
       {
-        ref: d,
+        ref: m,
         className: p(
           g({
             variant: t,

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

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import { Description as f } from "../description/description.js";
 import { HelpTip as v } from "../help-tip/help-tip.js";
 const y = l(

package/dist/esm/components/vertical-list/vertical-list.js

@@ -1,10 +1,11 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { cva as c } from "class-variance-authority";
 import * as r from "react";
 import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const u = c("flex flex-col [&>li:empty]:hidden", {
   variants: {
     rowGap: {
@@ -32,29 +33,29 @@ const u = c("flex flex-col [&>li:empty]:hidden", {
   }
 }), y = r.forwardRef(
   ({
-    className: i,
+    className: s,
     rowGap: f = "default",
     divided: a = !1,
-    nested: n = !1,
-    children: p,
+    nested: p = !1,
+    children: n,
     ...m
   }, d) => {
-    const o = r.Children.toArray(p).filter(
+    const o = r.Children.toArray(n).filter(
       (e) => e != null
     );
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ i(
       "ul",
       {
         ref: d,
         className: t(
-          u({ rowGap: f, divided: a, nested: n }),
+          u({ rowGap: f, divided: a, nested: p }),
           "list-none",
-          i
+          s
         ),
         ...m,
         children: o.map((e, l) => {
           const b = r.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
-          return /* @__PURE__ */ s(
+          return /* @__PURE__ */ i(
             "li",
             {
               className: t(

package/dist/esm/components/with-copy/with-copy.js

@@ -7,6 +7,7 @@ import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import "../accordion/accordion.js";
 import "../alert-badge/alert-badge.js";
 import "../alert-dialog/alert-dialog.js";
@@ -30,7 +31,7 @@ import "viem/siwe";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../base-link/base-link.js";
-import "react-router-dom";
+import "../navigation-context/navigation-context.js";
 import "../button-checkbox/button-checkbox.js";
 import "../card-grid/card-grid.js";
 import "../cards/card/card.js";
@@ -53,6 +54,7 @@ import "../vertical-list/vertical-list.js";
 import "../confirm-menu/confirm-menu.js";
 import "../currency-button/currency-button.js";
 import "../description/description.js";
+import "../detailed-apy/detailed-apy.js";
 import "../detailed-page-title/detailed-page-title.js";
 import "../detailed-page-title/detailed-page-title-copy-button.js";
 import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
@@ -120,7 +122,9 @@ import "react-markdown";
 import "remark-gfm";
 import "../navbar/navbar.js";
 import "../navbar/navbar-indicator-context.js";
+import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
+import "../simple-dropdown/simple-dropdown.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress/progress.js";
 import "../progress-bar/progress-bar.js";
@@ -132,10 +136,10 @@ import "../select/select.js";
 import "../separate-line/separate-line.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.js";
-import "../simple-dropdown/simple-dropdown.js";
 import "../simple-dropdown/simple-dropdown-menu-item.js";
 import "../slider/slider.js";
 import "../slider/slider-context.js";
+import "@radix-ui/react-slider";
 import "../spinner/spinner.js";
 import "../spinner-loader/spinner-loader.js";
 import "../split-list/split-list.js";
@@ -153,7 +157,7 @@ import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
 import "../typography/typography.js";
 import "../with-filter-button/with-filter-button.js";
-function vr({
+function jr({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -235,5 +239,5 @@ function vr({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  vr as WithCopy
+  jr as WithCopy
 };

package/dist/esm/components/with-filter-button/with-filter-button.js

@@ -6,6 +6,7 @@ import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const j = z.forwardRef(
   ({
     children: r,

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

@@ -5,7 +5,8 @@ import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const l = a("", {
+import "../../utils/z-index.js";
+const p = a("", {
   variants: {
     size: {
       sm: "text-[14px] mb-[14px]",
@@ -18,7 +19,7 @@ const l = a("", {
     size: "default"
   }
 });
-function v({
+function b({
   title: m,
   children: t,
   size: o = "default",
@@ -30,7 +31,7 @@ function v({
       {
         className: e(
           "text-foreground font-medium",
-          l({ size: o }),
+          p({ size: o }),
           r
         ),
         children: m
@@ -40,5 +41,5 @@ function v({
   ] });
 }
 export {
-  v as WithTitle
+  b as WithTitle
 };

package/dist/esm/configs/tailwind-preset.js

@@ -3,6 +3,14 @@ import a from "tailwindcss-animate";
 const e = {
   darkMode: "class",
   safelist: [
+    // Modal/layer z-index — must be in CSS so Loading (400) stays below other modals (600)
+    "z-[400]",
+    "z-[600]",
+    "z-[650]",
+    "z-[700]",
+    "z-[800]",
+    "z-[9000]",
+    "z-[10000]",
     // Grid columns - dynamically generated in Grid component
     { pattern: /^grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
     { pattern: /^(xs|sm|md|lg|xl):grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },