@gearbox-protocol/ui-kit 3.4.0 → 3.5.0

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -62,9 +62,15 @@ import "../points-icon/points-icon.js";
 import "../skeleton/skeleton.js";
 import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
+import "../description/description.js";
+import "../rounded-image/rounded-image.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../token-symbol/token-symbol.js";
+import "../help-tip/help-tip.js";
+import "../table/grid-table.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";
@@ -109,12 +115,10 @@ 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 { Link as I } from "../link/link.js";
-import "../token-symbol/token-symbol.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
 import "../text-button/text-button.js";
@@ -127,11 +131,8 @@ import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
 import "../page-title/page-title.js";
-import "../progress/progress.js";
-import "../pool-indicator-icon/pool-indicator-icon.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";
@@ -149,7 +150,6 @@ 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";

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

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as o, Fragment as x } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as b } from "react/jsx-runtime";
 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";
@@ -41,19 +41,19 @@ function ne({
   points: s,
   apy7DAgo: a,
   externalAPY: m,
-  tokensList: I,
+  tokensList: w,
   className: g
 }) {
   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: [
+  const I = !a || !!a.totalAPYLoading || !!a.loading7DAgo, x = !!a, p = (t, i) => x ? /* @__PURE__ */ o($, { children: [
     /* @__PURE__ */ e("span", { children: t }),
-    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: P, children: i }) })
-  ] }) : t, w = /* @__PURE__ */ o(
+    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: I, children: i }) })
+  ] }) : t, P = /* @__PURE__ */ o(
     "div",
     {
       className: y(
-        "w-[370px] p-6",
+        "w-[370px] max-w-[calc(100vw-32px)] p-6",
         "bg-popover",
         "border border-border",
         "rounded-lg",
@@ -62,7 +62,7 @@ function ne({
       ),
       children: [
         /* @__PURE__ */ o(u, { children: [
-          b && /* @__PURE__ */ e(
+          x && /* @__PURE__ */ e(
             l,
             {
               size: "sm",
@@ -94,7 +94,7 @@ function ne({
             `base-${t.type}-${t.apy}`
           )),
           h?.map((t) => {
-            const i = I?.[t.rewardToken];
+            const i = w?.[t.rewardToken];
             return /* @__PURE__ */ e(
               l,
               {
@@ -162,7 +162,7 @@ function ne({
                 messageId: m.tooltip,
                 values: {
                   name: m.name,
-                  value: /* @__PURE__ */ o(x, { children: [
+                  value: /* @__PURE__ */ o(b, { children: [
                     /* @__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: [
                       "+",
@@ -174,7 +174,7 @@ function ne({
             )
           }
         ),
-        s && s.length > 0 && /* @__PURE__ */ o(x, { children: [
+        s && s.length > 0 && /* @__PURE__ */ o(b, { children: [
           /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
             "div",
             {
@@ -242,7 +242,7 @@ function ne({
       maxWidth: "100%",
       title: /* @__PURE__ */ e("span", { className: g, children: d }),
       triggerClassName: g,
-      children: w
+      children: P
     }
   );
 }

package/dist/esm/components/time-to-liquidation/time-to-liquidation.js

@@ -52,9 +52,15 @@ import "../points-icon/points-icon.js";
 import "../skeleton/skeleton.js";
 import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
+import "../description/description.js";
+import "../rounded-image/rounded-image.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../token-symbol/token-symbol.js";
+import "../help-tip/help-tip.js";
+import "../table/grid-table.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";
@@ -99,7 +105,6 @@ 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";
@@ -113,7 +118,6 @@ import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import "../link/link.js";
-import "../token-symbol/token-symbol.js";
 import "../../utils/reactochart-compat.js";
 import { HealthDot as u } from "../status-elements/status-elements.js";
 import "../text-button/text-button.js";
@@ -127,11 +131,8 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
-import "../progress/progress.js";
-import "../pool-indicator-icon/pool-indicator-icon.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";
@@ -149,7 +150,6 @@ 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";

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

@@ -51,9 +51,15 @@ import "../points-icon/points-icon.js";
 import "../skeleton/skeleton.js";
 import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
+import "../description/description.js";
+import "../rounded-image/rounded-image.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import { getSymbolOrIcon as P } from "../token-symbol/token-symbol.js";
+import "../help-tip/help-tip.js";
+import "../table/grid-table.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";
@@ -98,7 +104,6 @@ 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";
@@ -112,7 +117,6 @@ import "../layout/main-aside-layout/main-aside-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";
@@ -126,11 +130,8 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
-import "../progress/progress.js";
-import "../pool-indicator-icon/pool-indicator-icon.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";
@@ -148,7 +149,6 @@ 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";

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

@@ -1,4 +1,4 @@
-import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { jsxs as L, jsx as r } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-tooltip";
 import * as e from "react";
 import "@gearbox-protocol/sdk";
@@ -6,95 +6,95 @@ import { cn as k } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
-import { Z_INDEX as J } from "../../utils/z-index.js";
-const L = e.createContext({ lockParent: () => {
+import { Z_INDEX as F } from "../../utils/z-index.js";
+const I = e.createContext({ lockParent: () => {
 }, unlockParent: () => {
-} }), I = e.createContext(!1), A = 7, Q = 12;
-function U({
-  children: H,
+} }), A = e.createContext(!1), H = 7, J = 12;
+function Q({
+  children: K,
   title: d,
-  placement: K = "top",
+  placement: S = "top",
   trigger: n = "hover",
-  triangle: S = !0,
+  triangle: W = !0,
   delayShow: h = 5,
-  maxWidth: W = "200px",
+  maxWidth: C = "200px",
   minWidth: _,
   type: j = "tooltip",
-  open: C,
-  onOpenChange: P,
+  open: P,
+  onOpenChange: v,
   className: z,
-  triggerClassName: v,
+  triggerClassName: x,
   useTitleAsTrigger: B = !1
 }) {
-  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(
+  const [M, g] = e.useState(!1), [y, w] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = P !== void 0, c = p ? P : M, o = e.useCallback(
     (t) => {
-      p ? P?.(t) : G(t);
+      p ? v?.(t) : g(t);
     },
-    [p, P]
-  ), c = e.useContext(L), V = e.useMemo(
+    [p, v]
+  ), s = e.useContext(I), G = e.useMemo(
     () => ({
-      lockParent: () => y(!0),
-      unlockParent: () => y(!1)
+      lockParent: () => w(!0),
+      unlockParent: () => w(!1)
     }),
     []
   ), R = e.useRef(!1);
-  R.current = x;
+  R.current = y;
   const l = e.useRef(
     null
   ), u = e.useCallback(() => {
     l.current !== null && (clearTimeout(l.current), l.current = null);
-  }, []), X = e.useCallback(
+  }, []), V = e.useCallback(
     (t) => {
       if (n !== "click") {
         if (t) {
-          u(), o(!0), c.lockParent();
+          u(), o(!0), s.lockParent();
           return;
         }
         l.current = setTimeout(() => {
-          l.current = null, !R.current && (o(!1), c.unlockParent());
+          l.current = null, !R.current && (o(!1), s.unlockParent());
         }, 100);
       }
     },
-    [n, o, c, u]
+    [n, o, s, u]
   );
   e.useEffect(() => u, [u]);
-  const Z = e.useCallback(
+  const X = e.useCallback(
     (t) => {
-      n === "click" && (t.stopPropagation(), o(!s));
+      n === "click" && (t.stopPropagation(), o(!c));
     },
-    [n, s, o]
-  ), g = e.useCallback(
+    [n, c, o]
+  ), Z = e.useCallback(
     (t) => {
-      n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!s));
+      n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!c));
     },
-    [n, s, o]
+    [n, c, o]
   );
   e.useEffect(() => {
-    if (n !== "click" || !s) return;
+    if (n !== "click" || !c) return;
     const t = (m) => {
-      const O = m.target;
-      f.current && !f.current.contains(O) && i.current && !i.current.contains(O) && o(!1);
-    }, E = (m) => {
+      const N = m.target;
+      f.current && !f.current.contains(N) && i.current && !i.current.contains(N) && o(!1);
+    }, O = (m) => {
       m.key === "Escape" && o(!1);
     };
-    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", E), () => {
-      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", E);
+    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", O), () => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", O);
     };
-  }, [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,
+  }, [n, c, o]);
+  const T = e.useRef(s.unlockParent);
+  T.current = s.unlockParent, e.useEffect(() => () => T.current(), []);
+  const b = j === "modal-tooltip", D = W && !b, $ = k(
+    F.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(
+  ), q = e.useContext(A), E = /* @__PURE__ */ L(
     a.Root,
     {
-      open: s || x,
-      onOpenChange: X,
+      open: c || y,
+      onOpenChange: V,
       delayDuration: n === "click" ? 0 : h,
       children: [
         /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
@@ -102,11 +102,11 @@ function U({
           {
             ref: i,
             type: "button",
-            onClick: Z,
-            onKeyDown: g,
+            onClick: X,
+            onKeyDown: Z,
             className: k(
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
-              v
+              x
             ),
             children: d
           }
@@ -114,25 +114,29 @@ function U({
           "span",
           {
             ref: i,
-            className: k("inline-flex", v),
+            className: k("inline-flex", x),
             children: d
           }
         ) }),
-        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ N(
+        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ L(
           a.Content,
           {
             ref: f,
-            side: K,
-            sideOffset: w ? A - 4 : 8,
-            className: q,
-            style: { maxWidth: W, minWidth: _ },
+            side: S,
+            sideOffset: D ? H - 4 : 8,
+            collisionPadding: 8,
+            className: $,
+            style: {
+              maxWidth: C ? `min(${C}, calc(100vw - 16px))` : "calc(100vw - 16px)",
+              minWidth: _
+            },
             children: [
-              /* @__PURE__ */ r(L.Provider, { value: V, children: H }),
-              w && /* @__PURE__ */ r(
+              /* @__PURE__ */ r(I.Provider, { value: G, children: K }),
+              D && /* @__PURE__ */ r(
                 a.Arrow,
                 {
-                  width: Q,
-                  height: A,
+                  width: J,
+                  height: H,
                   className: "fill-black/85"
                 }
               )
@@ -142,16 +146,16 @@ function U({
       ]
     }
   );
-  return F ? D : /* @__PURE__ */ r(I.Provider, { value: !0, children: /* @__PURE__ */ r(
+  return q ? E : /* @__PURE__ */ r(A.Provider, { value: !0, children: /* @__PURE__ */ r(
     a.Provider,
     {
       delayDuration: n === "click" ? 0 : h,
       skipDelayDuration: 300,
-      children: D
+      children: E
     }
   ) });
 }
-U.displayName = "SimpleTooltip";
+Q.displayName = "SimpleTooltip";
 export {
-  U as SimpleTooltip
+  Q as SimpleTooltip
 };

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

@@ -51,9 +51,15 @@ import "../points-icon/points-icon.js";
 import "../skeleton/skeleton.js";
 import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
+import "../description/description.js";
+import "../rounded-image/rounded-image.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../token-symbol/token-symbol.js";
+import "../help-tip/help-tip.js";
+import "../table/grid-table.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";
@@ -98,7 +104,6 @@ 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";
@@ -112,7 +117,6 @@ import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import "../link/link.js";
-import "../token-symbol/token-symbol.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
 import "../text-button/text-button.js";
@@ -126,11 +130,8 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
-import "../progress/progress.js";
-import "../pool-indicator-icon/pool-indicator-icon.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";
@@ -148,7 +149,6 @@ 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";