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

package/dist/esm/components/token-template/token-template.js

@@ -5,11 +5,12 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "@gearbox-protocol/sdk";
-import { negativeTokenTemplate as N, tokenTemplateString as P } from "../../utils/templates.js";
+import { negativeTokenTemplate as P, tokenTemplateString as V } from "../../utils/templates.js";
 import "luxon";
+import "../../utils/z-index.js";
 import { FormattedNumberString as d } from "../formatted-number/formatted-number.js";
 import { ShortString as g } from "../short-string/short-string.js";
-function B({
+function F({
   value: r,
   token: e,
   precision: m,
@@ -27,7 +28,7 @@ function B({
   ] });
 }
 export {
-  B as TokenTemplate,
-  N as negativeTokenTemplate,
-  P as tokenTemplateString
+  F as TokenTemplate,
+  P as negativeTokenTemplate,
+  V as tokenTemplateString
 };

package/dist/esm/components/tokens-list-cell/tokens-list-cell.js

@@ -1,5 +1,5 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import * as O from "react";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import * as M from "react";
 import { TokenIcon as z } from "../token-icon/token-icon.js";
 import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as y, Tooltip as T, TooltipTrigger as k, TooltipContent as b } from "../tooltip/tooltip.js";
@@ -7,52 +7,202 @@ import "@gearbox-protocol/sdk";
 import { cn as v } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function G({
+import "../../utils/z-index.js";
+import "../accordion/accordion.js";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
+import "../alert-badge/alert-badge.js";
+import "../alert-dialog/alert-dialog.js";
+import "../alert-modal/alert-modal.js";
+import "react-intl";
+import "../arc-loader/arc-loader.js";
+import "../asset-line/asset-line.js";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "../buttons/tab-button/tab-button.js";
+import "connectkit";
+import "wagmi";
+import "viem/siwe";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../base-link/base-link.js";
+import "../navigation-context/navigation-context.js";
+import "../button-checkbox/button-checkbox.js";
+import "../card-grid/card-grid.js";
+import "../cards/card/card.js";
+import "../carousel/carousel.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../checkbox-item/checkbox-item.js";
+import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../colored-text/colored-text.js";
+import "../input/input.js";
+import "../with-title/with-title.js";
+import "../smart-number-input/balance-indicator.js";
+import "../smart-number-input/smart-number-input.js";
+import "../points-icon/points-icon.js";
+import "../skeleton/skeleton.js";
+import "../vertical-indicator/vertical-indicator.js";
+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";
+import "../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../dialog/dialog-container.js";
+import "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import "../dialog/dialog-footer.js";
+import "../dialog/dialog-header.js";
+import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../label/label.js";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "../edit-input/edit-input.js";
+import "../fadeout-loading/fadeout-loading.js";
+import "../filter/filter-block.js";
+import "../filter/filter-checkbox-item.js";
+import "../filter/filter-chip.js";
+import "../filter/filter-chips.js";
+import "../filter/filter-dropdown-item.js";
+import "../filter/filter-group.js";
+import "../filter/filter-label.js";
+import "../search-line/search-line.js";
+import "../tabs/tabs.js";
+import "../filter/filter-modal-item.js";
+import "../filter/filter-radio-item.js";
+import "../filter/filter-separator.js";
+import "../filter/variants.js";
+import "../graph/formatters.js";
+import "lightweight-charts";
+import "../graph/graph-view.js";
+import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
+import "../horizontal-indicator/horizontal-indicator.js";
+import "../icon-button/icon-button.js";
+import "../layout/col/col.js";
+import "../layout/container/container.js";
+import "../layout/footer/footer.js";
+import "../layout/grid/grid.js";
+import "../layout/header/header.js";
+import "../layout/layout/layout.js";
+import "../page-title/page-title.js";
+import "../layout/social-icons/social-icons.js";
+import "../link/link.js";
+import { getSymbolOrIcon as P } from "../token-symbol/token-symbol.js";
+import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
+import "../loader/loader.js";
+import "../loading/loading.js";
+import "../loading-bar/loading-bar.js";
+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";
+import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
+import "../search-bar/search-bar.js";
+import "../segmented-control/segmented-control.js";
+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-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";
+import "../stat-badge/stat-badge.js";
+import "../status-dot/status-dot.js";
+import "../stepper/stepper.js";
+import "../switch/switch.js";
+import "../table/grid-table.js";
+import "../table/table.js";
+import "../table/grid-table-loader.js";
+import "../textarea/textarea.js";
+import "../theme-provider.js";
+import "../time-to-liquidation/time-to-liquidation.js";
+import "../tip-card/tip-card.js";
+import "../toggle/toggle.js";
+import "../typography/typography.js";
+import "../with-filter-button/with-filter-button.js";
+function Mr({
   balances: a,
-  tokensList: d,
-  maxAssets: s = 3,
-  iconSize: h = 24,
+  tokensList: l,
+  maxAssets: p = 3,
+  iconSize: c = 24,
   options: w,
   className: C
 }) {
   const {
-    mode: m = "default",
+    mode: d = "default",
     showIconTooltip: x = !0,
-    otherTooltip: j,
+    otherTooltip: I,
     onOtherClick: u
-  } = w || {}, [I, N, R, g] = O.useMemo(() => {
-    const t = a, n = t.slice(0, s), o = t.slice(s), i = o.map((r) => {
-      const p = typeof r == "string" ? r : r.token;
-      return d[p]?.symbol || "unknown";
-    }).join(", "), l = t.length > s;
-    return [n, o, i, l];
-  }, [a, s, d]), S = (t) => typeof t == "string" ? t : t.token, M = (t, n, o) => m === "cascade" ? {
-    zIndex: o - n,
+  } = w || {}, [j, N, S, g] = M.useMemo(() => {
+    const t = a, i = t.slice(0, p), r = t.slice(p), e = r.map((m) => {
+      const h = typeof m == "string" ? m : m.token;
+      return l[h]?.symbol || "unknown";
+    }).join(", "), n = t.length > p;
+    return [i, r, e, n];
+  }, [a, p, l]), O = (t) => typeof t == "string" ? t : t.token, R = (t, i, r) => d === "cascade" ? {
+    zIndex: r - i,
     marginRight: t ? 0 : -12
   } : {
     marginRight: t ? 0 : 4
   };
-  return /* @__PURE__ */ c("div", { className: v("relative inline-flex items-center", C), children: [
-    I.map((t, n, o) => {
-      const i = S(t), l = d[i], r = n === o.length - 1 && !g, p = M(r, n, o.length), f = /* @__PURE__ */ e(z, { symbol: l?.symbol, size: h });
-      return /* @__PURE__ */ e("div", { className: "relative", style: p, children: x ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
-        /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "cursor-help", children: f }) }),
-        /* @__PURE__ */ e(b, { children: l?.symbol || "Unknown" })
-      ] }) }) : f }, i);
+  return /* @__PURE__ */ s("div", { className: v("relative inline-flex items-center", C), children: [
+    j.map((t, i, r) => {
+      const e = O(t), n = l[e], m = i === r.length - 1 && !g, h = R(m, i, r.length), f = /* @__PURE__ */ o(z, { symbol: P(n), size: c });
+      return /* @__PURE__ */ o("div", { className: "relative", style: h, children: x ? /* @__PURE__ */ o(y, { children: /* @__PURE__ */ s(T, { children: [
+        /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o("span", { className: "cursor-help", children: f }) }),
+        /* @__PURE__ */ o(b, { children: n?.symbol || "Unknown" })
+      ] }) }) : f }, e);
     }),
-    g && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
-      /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ c(
+    g && /* @__PURE__ */ o(y, { children: /* @__PURE__ */ s(T, { children: [
+      /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ s(
         "button",
         {
           type: "button",
           className: v(
             "relative inline-flex items-center justify-center rounded-full bg-muted text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors",
-            m === "cascade" && "z-0"
+            d === "cascade" && "z-0"
           ),
           style: {
-            width: h,
-            height: h,
-            marginLeft: m === "cascade" ? -12 : 4
+            width: c,
+            height: c,
+            marginLeft: d === "cascade" ? -12 : 4
           },
           onClick: u ? (t) => {
             u(
@@ -65,10 +215,10 @@ function G({
           ]
         }
       ) }),
-      /* @__PURE__ */ e(b, { children: j || R })
+      /* @__PURE__ */ o(b, { children: I || S })
     ] }) })
   ] });
 }
 export {
-  G as TokensListCell
+  Mr as TokensListCell
 };

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -1,130 +1,156 @@
-import { jsx as i, jsxs as x } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-tooltip";
-import * as o from "react";
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-tooltip";
+import * as e from "react";
 import "@gearbox-protocol/sdk";
-import { cn as u } from "../../utils/cn.js";
+import { cn as k } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const C = 7, S = 12;
-function _({
-  children: D,
-  title: c,
-  placement: R = "top",
+import { Z_INDEX as J } from "../../utils/z-index.js";
+const L = e.createContext({ lockParent: () => {
+}, unlockParent: () => {
+} }), I = e.createContext(!1), A = 7, Q = 12;
+function U({
+  children: H,
+  title: d,
+  placement: K = "top",
   trigger: n = "hover",
-  triangle: T = !0,
-  delayShow: f = 5,
-  maxWidth: E = "200px",
-  minWidth: O,
-  type: P = "tooltip",
-  open: m,
-  onOpenChange: k,
-  className: A,
-  triggerClassName: h,
-  useTitleAsTrigger: L = !1
+  triangle: S = !0,
+  delayShow: h = 5,
+  maxWidth: W = "200px",
+  minWidth: _,
+  type: j = "tooltip",
+  open: C,
+  onOpenChange: P,
+  className: z,
+  triggerClassName: v,
+  useTitleAsTrigger: B = !1
 }) {
-  const [N, H] = o.useState(!1), l = o.useRef(null), r = o.useRef(null), p = m !== void 0, a = p ? m : N, t = o.useCallback(
-    (e) => {
-      p ? k?.(e) : H(e);
+  const [M, G] = e.useState(!1), [x, y] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = C !== void 0, s = p ? C : M, o = e.useCallback(
+    (t) => {
+      p ? P?.(t) : G(t);
     },
-    [p, k]
-  ), I = o.useCallback(
-    (e) => {
-      n !== "click" && t(e);
+    [p, P]
+  ), c = e.useContext(L), V = e.useMemo(
+    () => ({
+      lockParent: () => y(!0),
+      unlockParent: () => y(!1)
+    }),
+    []
+  ), R = e.useRef(!1);
+  R.current = x;
+  const l = e.useRef(
+    null
+  ), u = e.useCallback(() => {
+    l.current !== null && (clearTimeout(l.current), l.current = null);
+  }, []), X = e.useCallback(
+    (t) => {
+      if (n !== "click") {
+        if (t) {
+          u(), o(!0), c.lockParent();
+          return;
+        }
+        l.current = setTimeout(() => {
+          l.current = null, !R.current && (o(!1), c.unlockParent());
+        }, 100);
+      }
     },
-    [n, t]
-  ), K = o.useCallback(
-    (e) => {
-      n === "click" && (e.stopPropagation(), t(!a));
+    [n, o, c, u]
+  );
+  e.useEffect(() => u, [u]);
+  const Z = e.useCallback(
+    (t) => {
+      n === "click" && (t.stopPropagation(), o(!s));
     },
-    [n, a, t]
-  ), W = o.useCallback(
-    (e) => {
-      n === "click" && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), t(!a));
+    [n, s, o]
+  ), g = e.useCallback(
+    (t) => {
+      n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!s));
     },
-    [n, a, t]
+    [n, s, o]
   );
-  o.useEffect(() => {
-    if (n !== "click" || !a) return;
-    const e = (d) => {
-      const v = d.target;
-      l.current && !l.current.contains(v) && r.current && !r.current.contains(v) && t(!1);
-    }, w = (d) => {
-      d.key === "Escape" && t(!1);
+  e.useEffect(() => {
+    if (n !== "click" || !s) return;
+    const t = (m) => {
+      const O = m.target;
+      f.current && !f.current.contains(O) && i.current && !i.current.contains(O) && o(!1);
+    }, E = (m) => {
+      m.key === "Escape" && o(!1);
     };
-    return document.addEventListener("pointerdown", e), document.addEventListener("keydown", w), () => {
-      document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", w);
+    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", E), () => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", E);
     };
-  }, [n, a, t]);
-  const y = P === "modal-tooltip", b = T && !y, j = u(
-    // Base
-    "z-50 pointer-events-auto",
-    "animate-in fade-in-0 duration-100",
-    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-75",
-    // Type-specific
-    y ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased",
-    A
-  );
-  return /* @__PURE__ */ i(
-    s.Provider,
+  }, [n, s, o]);
+  const T = e.useRef(c.unlockParent);
+  T.current = c.unlockParent, e.useEffect(() => () => T.current(), []);
+  const b = j === "modal-tooltip", w = S && !b, q = k(
+    J.TOOLTIP,
+    "pointer-events-auto",
+    "animate-in fade-in-0 zoom-in-75 duration-150",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",
+    b ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
+    z
+  ), F = e.useContext(I), D = /* @__PURE__ */ N(
+    a.Root,
     {
-      delayDuration: n === "click" ? 0 : f,
-      skipDelayDuration: 0,
-      children: /* @__PURE__ */ x(
-        s.Root,
-        {
-          open: a,
-          onOpenChange: I,
-          delayDuration: n === "click" ? 0 : f,
-          children: [
-            /* @__PURE__ */ i(s.Trigger, { asChild: !0, children: L ? c : n === "click" ? /* @__PURE__ */ i(
-              "button",
-              {
-                ref: r,
-                type: "button",
-                onClick: K,
-                onKeyDown: W,
-                className: u(
-                  "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
-                  h
-                ),
-                children: c
-              }
-            ) : /* @__PURE__ */ i(
-              "span",
-              {
-                ref: r,
-                className: u("inline-flex", h),
-                children: c
-              }
-            ) }),
-            /* @__PURE__ */ i(s.Portal, { children: /* @__PURE__ */ x(
-              s.Content,
-              {
-                ref: l,
-                side: R,
-                sideOffset: b ? C - 4 : 8,
-                className: j,
-                style: { maxWidth: E, minWidth: O },
-                children: [
-                  D,
-                  b && /* @__PURE__ */ i(
-                    s.Arrow,
-                    {
-                      width: S,
-                      height: C,
-                      className: "fill-black/85"
-                    }
-                  )
-                ]
-              }
-            ) })
-          ]
-        }
-      )
+      open: s || x,
+      onOpenChange: X,
+      delayDuration: n === "click" ? 0 : h,
+      children: [
+        /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
+          "button",
+          {
+            ref: i,
+            type: "button",
+            onClick: Z,
+            onKeyDown: g,
+            className: k(
+              "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
+              v
+            ),
+            children: d
+          }
+        ) : /* @__PURE__ */ r(
+          "span",
+          {
+            ref: i,
+            className: k("inline-flex", v),
+            children: d
+          }
+        ) }),
+        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ N(
+          a.Content,
+          {
+            ref: f,
+            side: K,
+            sideOffset: w ? A - 4 : 8,
+            className: q,
+            style: { maxWidth: W, minWidth: _ },
+            children: [
+              /* @__PURE__ */ r(L.Provider, { value: V, children: H }),
+              w && /* @__PURE__ */ r(
+                a.Arrow,
+                {
+                  width: Q,
+                  height: A,
+                  className: "fill-black/85"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
     }
   );
+  return F ? D : /* @__PURE__ */ r(I.Provider, { value: !0, children: /* @__PURE__ */ r(
+    a.Provider,
+    {
+      delayDuration: n === "click" ? 0 : h,
+      skipDelayDuration: 300,
+      children: D
+    }
+  ) });
 }
-_.displayName = "SimpleTooltip";
+U.displayName = "SimpleTooltip";
 export {
-  _ as SimpleTooltip
+  U as SimpleTooltip
 };

package/dist/esm/components/tooltip/tooltip.js

@@ -5,22 +5,24 @@ import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const g = o.Provider, T = o.Root, b = o.Trigger, s = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+import { Z_INDEX as s } from "../../utils/z-index.js";
+const b = o.Provider, v = o.Root, x = o.Trigger, n = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
   o.Content,
   {
     ref: d,
     sideOffset: r,
     className: m(
-      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      s.TOOLTIP,
+      "overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       e
     ),
     ...i
   }
 ) }));
-s.displayName = o.Content.displayName;
+n.displayName = o.Content.displayName;
 export {
-  T as Tooltip,
-  s as TooltipContent,
-  g as TooltipProvider,
-  b as TooltipTrigger
+  v as Tooltip,
+  n as TooltipContent,
+  b as TooltipProvider,
+  x as TooltipTrigger
 };