@gearbox-protocol/permissionless-ui 1.22.0-next.46 → 1.22.0-next.48

package/dist/esm/components/table/grid-loading-line.js

@@ -4,7 +4,8 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-function x({
+import "luxon";
+function y({
   height: e = "70px",
   columns: i = 6,
   cellClassName: o,
@@ -35,5 +36,5 @@ function x({
   );
 }
 export {
-  x as GridLoadingLine
+  y as GridLoadingLine
 };

package/dist/esm/components/table/table-sm.js

@@ -3,7 +3,8 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-function h({
+import "luxon";
+function S({
   title: s,
   className: o,
   children: r,
@@ -14,7 +15,7 @@ function h({
     /* @__PURE__ */ e("div", { className: "text-sm", children: r })
   ] });
 }
-function S({
+function j({
   title: s,
   columnsXs: o = 1,
   columnsSm: r,
@@ -24,7 +25,7 @@ function S({
   children: p,
   ...x
 }) {
-  const c = o, m = r ?? c, d = l ?? m, g = a ?? d;
+  const m = o, c = r ?? m, d = l ?? c, g = a ?? d;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -40,8 +41,8 @@ function S({
           {
             className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
-              "--grid-cols-xs": c,
-              "--grid-cols-sm": m,
+              "--grid-cols-xs": m,
+              "--grid-cols-sm": c,
               "--grid-cols-md": d,
               "--grid-cols-lg": g
             },
@@ -53,6 +54,6 @@ function S({
   );
 }
 export {
-  h as TableCellSm,
-  S as TableLineSm
+  S as TableCellSm,
+  j as TableLineSm
 };

package/dist/esm/components/table/table.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { cva as d } from "class-variance-authority";
 import * as l from "react";
 import { Button as u } from "../buttons/button/button.js";
@@ -9,6 +9,7 @@ import { TooltipProvider as h, Tooltip as T, TooltipTrigger as N, TooltipContent
 import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const w = d("w-full caption-bottom", {
   variants: {
     size: {
@@ -21,10 +22,10 @@ const w = d("w-full caption-bottom", {
     size: "default"
   }
 }), v = l.forwardRef(
-  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ r(
+  ({ className: t, size: a, ...e }, i) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ r(
     "table",
     {
-      ref: s,
+      ref: i,
       className: o(w({ size: a, className: t })),
       ...e
     }
@@ -96,10 +97,10 @@ const V = d(
     }
   }
 ), n = l.forwardRef(
-  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
+  ({ className: t, size: a, ...e }, i) => /* @__PURE__ */ r(
     "th",
     {
-      ref: s,
+      ref: i,
       className: o(V({ size: a, className: t })),
       ...e
     }
@@ -118,10 +119,10 @@ const _ = d("align-middle flex items-center", {
     size: "default"
   }
 }), B = l.forwardRef(
-  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
+  ({ className: t, size: a, ...e }, i) => /* @__PURE__ */ r(
     "td",
     {
-      ref: s,
+      ref: i,
       className: o(_({ size: a, className: t })),
       ...e
     }
@@ -142,20 +143,20 @@ const S = l.forwardRef(
     title: t,
     isSorted: a,
     direction: e,
-    setSort: s,
+    setSort: i,
     placement: f = "right",
     children: m,
     className: c,
     ...b
-  }, p) => /* @__PURE__ */ r(n, { ref: p, className: c, ...b, children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ i(T, { delayDuration: 200, children: [
-    /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ i(
+  }, p) => /* @__PURE__ */ r(n, { ref: p, className: c, ...b, children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ s(T, { delayDuration: 200, children: [
+    /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ s(
       "div",
       {
         className: o(
           "group flex items-center gap-1 w-fit cursor-pointer hover:text-foreground",
           f === "left" ? "flex-row-reverse" : "flex-row"
         ),
-        onClick: () => s(e === "asc" ? "desc" : "asc"),
+        onClick: () => i(e === "asc" ? "desc" : "asc"),
         children: [
           m,
           /* @__PURE__ */ r(
@@ -180,7 +181,7 @@ const S = l.forwardRef(
         ]
       }
     ) }),
-    /* @__PURE__ */ i(y, { side: "top", children: [
+    /* @__PURE__ */ s(y, { side: "top", children: [
       "Sort by ",
       t
     ] })

package/dist/esm/components/tabs/tabs.js

@@ -4,44 +4,45 @@ import * as i from "react";
 import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-const g = e.Root, n = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
+import "luxon";
+const p = e.Root, n = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.List,
   {
-    ref: r,
+    ref: a,
     className: s(
       "inline-flex h-fit items-center justify-start bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6 overflow-x-auto overflow-y-hidden navbar-scrollbar min-w-max",
       t
     ),
-    ...a
+    ...r
   }
 ));
 n.displayName = e.List.displayName;
-const d = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
+const d = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.Trigger,
   {
-    ref: r,
+    ref: a,
     className: s(
       "inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer shrink-0",
       t
     ),
-    ...a
+    ...r
   }
 ));
 d.displayName = e.Trigger.displayName;
-const f = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
+const f = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.Content,
   {
-    ref: r,
+    ref: a,
     className: s(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       t
     ),
-    ...a
+    ...r
   }
 ));
 f.displayName = e.Content.displayName;
 export {
-  g as Tabs,
+  p as Tabs,
   f as TabsContent,
   n as TabsList,
   d as TabsTrigger

package/dist/esm/components/text-button/text-button.js

@@ -1,9 +1,10 @@
-import { jsxs as v, Fragment as D, jsx as t } from "react/jsx-runtime";
+import { jsxs as v, Fragment as D, jsx as e } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
 import * as g from "react";
 import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const f = n("", {
   variants: {
     buttonColor: {
@@ -48,32 +49,32 @@ const f = n("", {
     children: y,
     icon: s,
     size: h = "default",
-    buttonColor: e = "primaryDashed",
+    buttonColor: t = "primaryDashed",
     width: x = "compact",
     as: a = "button",
     className: b,
     disabled: r,
     ...d
   }, c) => {
-    const i = a === "a", l = o(
+    const i = a === "a", p = o(
       "group inline-block p-0 leading-[100%] font-normal bg-transparent border-none cursor-pointer transition-colors",
       w({ size: h, width: x }),
-      !i && f({ buttonColor: e }),
+      !i && f({ buttonColor: t }),
       r && "text-gray-110 cursor-default [&_svg]:text-gray-110",
       b
-    ), p = i ? o(f({ buttonColor: e }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
-      /* @__PURE__ */ t(
+    ), l = i ? o(f({ buttonColor: t }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ e(
         "span",
         {
           className: o(
             "inline-block",
-            N({ borderColor: e }),
-            r && e !== "empty" && "border-gray-110"
+            N({ borderColor: t }),
+            r && t !== "empty" && "border-gray-110"
           ),
           children: y
         }
       ),
-      s && /* @__PURE__ */ t(
+      s && /* @__PURE__ */ e(
         "span",
         {
           className: o(
@@ -83,20 +84,20 @@ const f = n("", {
           children: s
         }
       )
-    ] }), m = p ? /* @__PURE__ */ t("span", { className: p, children: u }) : u;
-    return a === "button" ? /* @__PURE__ */ t(
+    ] }), m = l ? /* @__PURE__ */ e("span", { className: l, children: u }) : u;
+    return a === "button" ? /* @__PURE__ */ e(
       "button",
       {
         ref: c,
         type: "button",
-        className: l,
+        className: p,
         disabled: r,
         ...d,
         children: m
       }
     ) : g.createElement(
       a,
-      { ref: c, className: l, ...d },
+      { ref: c, className: p, ...d },
       m
     );
   }

package/dist/esm/components/textarea/textarea.js

@@ -4,6 +4,7 @@ import * as s from "react";
 import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const d = l(
   "flex w-full rounded-md border border-[rgb(100,100,100)] px-3 py-2 shadow-sm transition-colors placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none",
   {
@@ -24,10 +25,10 @@ const d = l(
     }
   }
 ), b = s.forwardRef(
-  ({ className: t, size: e, variant: r, ...o }, a) => /* @__PURE__ */ i(
+  ({ className: t, size: r, variant: e, ...o }, a) => /* @__PURE__ */ i(
     "textarea",
     {
-      className: n(d({ size: e, variant: r, className: t })),
+      className: n(d({ size: r, variant: e, className: t })),
       ref: a,
       ...o
     }

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

@@ -1,45 +1,159 @@
-import { jsxs as s, jsx as a, Fragment as e } from "react/jsx-runtime";
-import { Duration as m } from "luxon";
-import { useMemo as c } from "react";
-import { StatusDot as d } from "../status-dot/status-dot.js";
-const f = {
-  good: "success",
-  medium: "warning",
-  bad: "alert",
-  critical: "alert",
-  liquidation: "alert"
-};
-function u(r) {
-  const t = m.fromMillis(r), o = t.as("months");
-  if (o > 3) return { months: Math.floor(o) };
-  const n = t.as("days");
-  if (n >= 1) return { day: Math.floor(n) };
-}
-function x({
-  timeToLiquidation: r,
-  ttlZone: t,
-  className: o
-}) {
-  const n = c(() => {
+import { jsxs as o, jsx as m, Fragment as t } from "react/jsx-runtime";
+import * as d from "react";
+import { useMemo as a } from "react";
+import "@gearbox-protocol/sdk";
+import { cn as f } from "../../utils/cn.js";
+import "sonner";
+import { ttlLeft as h } from "../../utils/ttl.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 "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.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 "../token-icon/token-icon.js";
+import "connectkit";
+import "wagmi";
+import "viem/siwe";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../base-link/base-link.js";
+import "react-router-dom";
+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 "../description/description.js";
+import "react-intl";
+import "../icon-button/icon-button.js";
+import "../currency-button/currency-button.js";
+import "../skeleton/skeleton.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 "../page-title/page-title.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 "../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 "../token-symbol/token-symbol.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 "../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 "../../utils/reactochart-compat.js";
+import { HealthDot as u } from "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
+import "react-markdown";
+import "remark-gfm";
+import "../navbar/navbar.js";
+import "../navbar/navbar-indicator-context.js";
+import "../navitem/navitem.js";
+import "../points-icon/points-icon.js";
+import "../progress/progress.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 "../slider/slider.js";
+import "../spinner/spinner.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 "../tip-card/tip-card.js";
+import "../typography/typography.js";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../with-filter-button/with-filter-button.js";
+const N = d.forwardRef(function({ timeToLiquidation: r, ttlZone: i, className: l }, s) {
+  const p = a(() => {
     if (r !== null)
-      return u(Number(r));
-  }, [r]), { months: l, day: i } = n || {};
-  return /* @__PURE__ */ s("div", { className: `flex items-center ${o || ""}`, children: [
-    r !== null ? /* @__PURE__ */ s(e, { children: [
-      l && /* @__PURE__ */ s(e, { children: [
-        l,
+      return h(r);
+  }, [r]), { months: e, day: n } = p || {}, c = () => "N/A";
+  return /* @__PURE__ */ o("div", { ref: s, className: f("flex items-center", l), children: [
+    r !== null ? /* @__PURE__ */ o(t, { children: [
+      e && /* @__PURE__ */ o(t, { children: [
+        e,
         "mo"
       ] }),
-      i && /* @__PURE__ */ s(e, { children: [
-        i,
+      n && /* @__PURE__ */ o(t, { children: [
+        n,
         "d"
       ] }),
-      !n && /* @__PURE__ */ a(e, { children: "<1d" })
-    ] }) : "N/A",
-    t && /* @__PURE__ */ a("span", { className: "ml-1.5", children: /* @__PURE__ */ a(d, { variant: f[t], size: "sm" }) })
+      !p && /* @__PURE__ */ m(t, { children: "<1d" })
+    ] }) : c(),
+    i && /* @__PURE__ */ m("span", { className: "ml-1.5", children: /* @__PURE__ */ m(u, { zone: i }) })
   ] });
-}
+});
+N.displayName = "TimeToLiquidation";
 export {
-  x as TimeToLiquidation,
-  x as default
+  N as TimeToLiquidation
 };

package/dist/esm/components/tip-card/tip-card.js

@@ -4,6 +4,7 @@ import * as f from "react";
 import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const p = t("rounded-lg p-5 text-[14px]", {
   variants: {
     backgroundColor: {

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

@@ -10,6 +10,7 @@ import "@gearbox-protocol/sdk";
 import { cn as I } from "../../utils/cn.js";
 import "sonner";
 import { getNetworkIcon as T } from "../../utils/network-icons.js";
+import "luxon";
 const R = N("", {
   variants: {
     marginSize: {

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

@@ -5,20 +5,21 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "@gearbox-protocol/sdk";
-import { negativeTokenTemplate as I, tokenTemplateString as N } from "../../utils/templates.js";
+import { negativeTokenTemplate as N, tokenTemplateString as P } from "../../utils/templates.js";
+import "luxon";
 import { FormattedNumberString as d } from "../formatted-number/formatted-number.js";
 import { ShortString as g } from "../short-string/short-string.js";
-function A({
+function B({
   value: r,
   token: e,
   precision: m,
-  formatter: n = T,
-  noFormattedAmountValue: i = "-",
+  formatter: i = T,
+  noFormattedAmountValue: n = "-",
   showSymbol: p = !0,
   maxLength: a = 1 / 0,
   ...f
 }) {
-  const { decimals: l = 18, title: s } = e || {}, t = n(r, l, m), c = t === i;
+  const { decimals: l = 18, title: s } = e || {}, t = i(r, l, m), c = t === n;
   return /* @__PURE__ */ u("span", { children: [
     /* @__PURE__ */ o(d, { value: t, ...f }),
     " ",
@@ -26,7 +27,7 @@ function A({
   ] });
 }
 export {
-  A as TokenTemplate,
-  I as negativeTokenTemplate,
-  N as tokenTemplateString
+  B as TokenTemplate,
+  N as negativeTokenTemplate,
+  P as tokenTemplateString
 };

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

@@ -6,8 +6,9 @@ import { TooltipProvider as y, Tooltip as T, TooltipTrigger as k, TooltipContent
 import "@gearbox-protocol/sdk";
 import { cn as v } from "../../utils/cn.js";
 import "sonner";
-function F({
-  balances: p,
+import "luxon";
+function G({
+  balances: a,
   tokensList: d,
   maxAssets: s = 3,
   iconSize: h = 24,
@@ -20,12 +21,12 @@ function F({
     otherTooltip: j,
     onOtherClick: u
   } = w || {}, [I, N, R, g] = O.useMemo(() => {
-    const t = p, n = t.slice(0, s), o = t.slice(s), i = o.map((r) => {
-      const a = typeof r == "string" ? r : r.token;
-      return d[a]?.symbol || "unknown";
+    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];
-  }, [p, s, d]), S = (t) => typeof t == "string" ? t : t.token, M = (t, n, o) => m === "cascade" ? {
+  }, [a, s, d]), S = (t) => typeof t == "string" ? t : t.token, M = (t, n, o) => m === "cascade" ? {
     zIndex: o - n,
     marginRight: t ? 0 : -12
   } : {
@@ -33,8 +34,8 @@ function F({
   };
   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, a = M(r, n, o.length), f = /* @__PURE__ */ e(z, { symbol: l?.symbol, size: h });
-      return /* @__PURE__ */ e("div", { className: "relative", style: a, children: x ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
+      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);
@@ -69,5 +70,5 @@ function F({
   ] });
 }
 export {
-  F as TokensListCell
+  G as TokensListCell
 };

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

@@ -2,8 +2,9 @@ import { jsx as i, jsxs as x } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-tooltip";
 import * as o from "react";
 import "@gearbox-protocol/sdk";
-import { cn as p } from "../../utils/cn.js";
+import { cn as d } from "../../utils/cn.js";
 import "sonner";
+import "luxon";
 const C = 7, j = 12;
 function S({
   children: D,
@@ -43,17 +44,17 @@ function S({
   );
   o.useEffect(() => {
     if (n !== "click" || !a) return;
-    const e = (d) => {
-      const v = d.target;
+    const e = (p) => {
+      const v = p.target;
       c.current && !c.current.contains(v) && s.current && !s.current.contains(v) && t(!1);
-    }, w = (d) => {
-      d.key === "Escape" && t(!1);
+    }, w = (p) => {
+      p.key === "Escape" && t(!1);
     };
     return document.addEventListener("pointerdown", e), document.addEventListener("keydown", w), () => {
       document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", w);
     };
   }, [n, a, t]);
-  const y = P === "modal-tooltip", b = T && !y, W = p(
+  const y = P === "modal-tooltip", b = T && !y, W = d(
     // Base
     "break-all",
     "z-50 pointer-events-auto",
@@ -82,7 +83,7 @@ function S({
                 type: "button",
                 onClick: I,
                 onKeyDown: K,
-                className: p(
+                className: d(
                   "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
                   h
                 ),
@@ -92,7 +93,7 @@ function S({
               "span",
               {
                 ref: s,
-                className: p("inline-flex", h),
+                className: d("inline-flex", h),
                 children: u
               }
             ) }),