@gearbox-protocol/ui-kit 4.0.0-next.60 → 4.0.0-next.61

package/dist/esm/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.js

@@ -1,38 +1,28 @@
 import { jsxs as A, jsx as e, Fragment as C } from "react/jsx-runtime";
 import { calcNetStrategyApy as x, calcEffectiveBorrowApy as D } from "@gearbox-protocol/sdk/onchain";
 import { ApyBreakdownBody as P, formatBreakdownRate as i, ApyBreakdownRow as v, periodMessageId as k, ApyBreakdownDivider as q, BREAKDOWN_DASH as O } from "../apy-breakdown-body/apy-breakdown-body.js";
-import { NoValue as b } from "../values/no-value.js";
-import { totalApyOf as S, positiveTokenRewardsOf as L, pointProgramsOf as M } from "../../../utils/apy-breakdown.js";
-import "clsx";
-import "tailwind-merge";
-import { formatLeverage as d } from "../../../utils/format-leverage.js";
-import "luxon";
-import "../../../utils/z-index.js";
-import "viem";
-import "react";
-import { PointsIcon as $ } from "../../points-icon/points-icon.js";
-import { TokenIcon as j } from "../../token-icon/token-icon.js";
-import { FormattedMessageTyped as r } from "../../typed-intl/index.js";
-import "../../tooltip/simple-tooltip.js";
-import "../../tooltip/tooltip.js";
-import "../../badge/badge.js";
-import "../../badge/chip.js";
+import { NoValue as b } from "../../no-value/no-value.js";
+import { PointsIcon as S } from "../../points-icon/points-icon.js";
+import { TokenIcon as L } from "../../token-icon/token-icon.js";
+import { FormattedMessageTyped as s } from "../../typed-intl/index.js";
+import { formatLeverage as p } from "../../../utils/format-leverage.js";
+import { totalApyOf as M, positiveTokenRewardsOf as $, pointProgramsOf as j } from "../../../utils/internal/apy-breakdown.js";
 import { StrategyApyBreakdownCardTest as n } from "./constants.js";
-function z(c) {
-  const { borrowApyAvg7D: t, quotaRateAvg7D: p, liquidationThreshold: s } = c;
-  return t === void 0 || p === void 0 ? null : {
+function z(m) {
+  const { borrowApyAvg7D: t, quotaRateAvg7D: d, liquidationThreshold: r } = m;
+  return t === void 0 || d === void 0 ? null : {
     borrowApy: t,
-    quotaRate: p,
-    liquidationThreshold: s
+    quotaRate: d,
+    liquidationThreshold: r
   };
 }
-function re({
-  data: c,
+function Q({
+  data: m,
   leverage: t,
-  showFormula: p = !1,
-  period: s
+  showFormula: d = !1,
+  period: r
 }) {
-  const a = z(c), l = a && c.collateralApyAvg7D ? c.collateralApyAvg7D : void 0, f = a !== null && l !== void 0, g = f && a && l ? {
+  const a = z(m), l = a && m.collateralApyAvg7D ? m.collateralApyAvg7D : void 0, f = a !== null && l !== void 0, g = f && a && l ? {
     organicApy: x(
       a,
       l.organicApy,
@@ -44,26 +34,26 @@ function re({
       t
     ),
     ...l.rewards ? { rewards: l.rewards } : {}
-  } : null, m = f && a ? D(a, t) : null, u = g === null ? null : S(g), I = u === null || m === null ? null : u + m, N = l ? L(l) : [], B = l ? M(l) : [], T = N.map((o) => ({
+  } : null, c = f && a ? D(a, t) : null, u = g === null ? null : M(g), I = u === null || c === null ? null : u + c, N = l ? $(l) : [], B = l ? j(l) : [], T = N.map((o) => ({
     reward: o,
     value: Math.round(t * (o.supplyApr ?? 0))
-  })), y = I === null ? null : I - T.reduce((o, w) => o + w.value, 0), h = y !== null && t > 0 ? y / t : void 0, R = a && m !== null && t > 0 ? (m - a.borrowApy * (t - 1)) / t : void 0;
+  })), y = I === null ? null : I - T.reduce((o, w) => o + w.value, 0), h = y !== null && t > 0 ? y / t : void 0, R = a && c !== null && t > 0 ? (c - a.borrowApy * (t - 1)) / t : void 0;
   return /* @__PURE__ */ A(
     P,
     {
       testId: n.root,
       title: /* @__PURE__ */ e(
-        r,
+        s,
         {
           messageId: k(
-            s,
+            r,
             "components.yieldBreakdown.titleNetAtLeverage",
             "components.yieldBreakdown.titleNetAtLeverage7d"
           ),
-          values: { leverage: d(t) }
+          values: { leverage: p(t) }
         }
       ),
-      chip: u === null ? /* @__PURE__ */ e(b, { reason: s }) : i(u),
+      chip: u === null ? /* @__PURE__ */ e(b, { reason: r }) : i(u),
       chipPositive: (u ?? 0) > 0,
       chipTestId: n.net,
       children: [
@@ -74,22 +64,22 @@ function re({
             valueTestId: n.value,
             captionTestId: n.caption,
             label: /* @__PURE__ */ e(
-              r,
+              s,
               {
                 messageId: k(
-                  s,
+                  r,
                   "components.yieldBreakdown.collateralApy",
                   "components.yieldBreakdown.collateralApy7d"
                 )
               }
             ),
-            value: y === null ? /* @__PURE__ */ e(b, { reason: s }) : i(y),
-            subtext: p && h !== void 0 ? /* @__PURE__ */ e(
-              r,
+            value: y === null ? /* @__PURE__ */ e(b, { reason: r }) : i(y),
+            subtext: d && h !== void 0 ? /* @__PURE__ */ e(
+              s,
               {
                 messageId: "components.strategyApyBreakdownCard.formula",
                 values: {
-                  leverage: d(t),
+                  leverage: p(t),
                   base: i(h)
                 }
               }
@@ -103,14 +93,14 @@ function re({
             captionTestId: n.caption,
             label: /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1.5", children: [
               /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                r,
+                s,
                 {
                   messageId: "components.apyParts.extraAPY",
                   values: { symbol: o.token.symbol }
                 }
               ) }),
               /* @__PURE__ */ e(
-                j,
+                L,
                 {
                   token: o.token,
                   symbol: o.token.symbol,
@@ -120,12 +110,12 @@ function re({
               )
             ] }),
             value: i(w),
-            subtext: p ? /* @__PURE__ */ e(
-              r,
+            subtext: d ? /* @__PURE__ */ e(
+              s,
               {
                 messageId: "components.strategyApyBreakdownCard.formula",
                 values: {
-                  leverage: d(t),
+                  leverage: p(t),
                   base: i(o.supplyApr ?? 0)
                 }
               }
@@ -141,22 +131,22 @@ function re({
             valueTestId: n.value,
             captionTestId: n.caption,
             label: /* @__PURE__ */ e(
-              r,
+              s,
               {
                 messageId: k(
-                  s,
+                  r,
                   "components.yieldBreakdown.borrowRate",
                   "components.yieldBreakdown.borrowRate7d"
                 )
               }
             ),
-            value: m === null ? /* @__PURE__ */ e(b, { reason: s }) : i(-m),
-            subtext: p && a && R !== void 0 ? /* @__PURE__ */ e(
-              r,
+            value: c === null ? /* @__PURE__ */ e(b, { reason: r }) : i(-c),
+            subtext: d && a && R !== void 0 ? /* @__PURE__ */ e(
+              s,
               {
                 messageId: "components.strategyApyBreakdownCard.borrowFormula",
                 values: {
-                  leverage: d(t),
+                  leverage: p(t),
                   // What the position is charged per unit of itself: base
                   // interest plus the quota, added before either is rounded, so
                   // the caption is not the sum of two figures it also printed.
@@ -179,14 +169,14 @@ function re({
               captionTestId: n.caption,
               label: /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1.5", children: [
                 /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  r,
+                  s,
                   {
                     messageId: "components.yieldBreakdown.programPoints",
                     values: { name: o.name }
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  $,
+                  S,
                   {
                     reward: { name: o.name, type: o.id },
                     size: 16,
@@ -194,14 +184,14 @@ function re({
                   }
                 )
               ] }),
-              value: o.multiplier != null ? `${d(o.multiplier * t)}×` : O,
-              subtext: p && o.multiplier != null ? /* @__PURE__ */ e(
-                r,
+              value: o.multiplier != null ? `${p(o.multiplier * t)}×` : O,
+              subtext: d && o.multiplier != null ? /* @__PURE__ */ e(
+                s,
                 {
                   messageId: "components.strategyApyBreakdownCard.formula",
                   values: {
-                    leverage: d(t),
-                    base: d(o.multiplier)
+                    leverage: p(t),
+                    base: p(o.multiplier)
                   }
                 }
               ) : void 0
@@ -214,6 +204,6 @@ function re({
   );
 }
 export {
-  re as StrategyApyBreakdownCard,
+  Q as StrategyApyBreakdownCard,
   n as StrategyApyBreakdownCardTest
 };

package/dist/esm/components/base/tabber/index.js

@@ -1,10 +1,7 @@
-import { Tabber as b, TabberSection as o, isTabber as t } from "./tabber.js";
-import { useDetailScrollSpy as T } from "./use-detail-scroll-spy.js";
-import { TabberTest as f } from "./constants.js";
+import { Tabber as b, TabberSection as o } from "./tabber.js";
+import { TabberTest as T } from "./constants.js";
 export {
   b as Tabber,
   o as TabberSection,
-  f as TabberTest,
-  t as isTabber,
-  T as useDetailScrollSpy
+  T as TabberTest
 };

package/dist/esm/components/base/tabber/is-tabber.js

@@ -0,0 +1,8 @@
+import { isValidElement as t } from "react";
+import { Tabber as e } from "./tabber.js";
+function o(r) {
+  return t(r) && r.type === e;
+}
+export {
+  o as isTabber
+};

package/dist/esm/components/base/tabber/tabber.js

@@ -1,31 +1,32 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { createContext as E, useContext as q, useMemo as f, Children as B, useRef as g, useEffect as z, isValidElement as N } from "react";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { createContext as O, useContext as E, useMemo as f, Children as B, useRef as g, useEffect as q, isValidElement as z } from "react";
 import { SectionHeading as D } from "../section-heading/section-heading.js";
 import { Stack as u } from "../stack/stack.js";
-import { useTitleText as R } from "../text/use-title-text.js";
-import { TabItem as F, TabControl as M } from "../../tab-control/tab-control.js";
+import { useTitleText as N } from "../text/use-title-text.js";
+import { TabControl as F } from "../../tab-control/tab-control.js";
+import { TabItem as M } from "../../tab-control/tab-item.js";
 import { TabberTest as S } from "./constants.js";
 import { useDetailScrollSpy as P } from "./use-detail-scroll-spy.js";
-const j = E({});
-function A({
-  id: e,
+const R = O({});
+function j({
+  id: r,
   title: o,
   heading: s = o,
   actions: c,
   children: m,
   hideHeading: a = !1
 }) {
-  const l = q(j), i = R(), n = !a;
-  return /* @__PURE__ */ r(
+  const l = E(R), i = N(), n = !a;
+  return /* @__PURE__ */ e(
     "section",
     {
-      ref: l[e],
+      ref: l[r],
       className: "scroll-mt-28",
-      "data-scroll-section": e,
+      "data-scroll-section": r,
       "data-testid": S.section,
       children: /* @__PURE__ */ p(u, { gap: "md", children: [
         n || c ? /* @__PURE__ */ p("div", { className: "flex items-center justify-between gap-3", children: [
-          n ? /* @__PURE__ */ r(D, { children: i(s) }) : /* @__PURE__ */ r("span", {}),
+          n ? /* @__PURE__ */ e(D, { children: i(s) }) : /* @__PURE__ */ e("span", {}),
           c
         ] }) : null,
         m
@@ -33,29 +34,29 @@ function A({
     }
   );
 }
-A.displayName = "TabberSection";
-function T(e) {
-  return N(e) && e.type === A;
+j.displayName = "TabberSection";
+function T(r) {
+  return z(r) && r.type === j;
 }
 function V({
-  item: e,
+  item: r,
   ...o
 }) {
   return /* @__PURE__ */ p("div", { className: "flex items-stretch overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:h-0 [scrollbar-width:none]", children: [
-    /* @__PURE__ */ r("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ r(M, { ...o, showBorder: !0 }) }),
-    e && /* @__PURE__ */ r("div", { className: "w-auto shrink-0 grow-0 basis-auto", children: e })
+    /* @__PURE__ */ e("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ e(F, { ...o, showBorder: !0 }) }),
+    r && /* @__PURE__ */ e("div", { className: "w-auto shrink-0 grow-0 basis-auto", children: r })
   ] });
 }
-function W({
-  children: e,
+function $({
+  children: r,
   observeKey: o,
   initialSection: s,
   testId: c,
   mobileManagePane: m
 }) {
   const a = f(
-    () => B.toArray(e).filter(T),
-    [e]
+    () => B.toArray(r).filter(T),
+    [r]
   ), l = f(
     () => a.filter((t) => t.props.beforeBar !== !0),
     [a]
@@ -69,36 +70,36 @@ function W({
     for (const y of n)
       t[y] === void 0 && (t[y] = { current: null });
     return w.current = t, t;
-  }, [n]), I = R(), { activeSection: b, scrollToSection: h } = P(
+  }, [n]), A = N(), { activeSection: b, scrollToSection: h } = P(
     d,
     n,
     o
   ), x = g(!1), v = g(o);
-  z(() => {
+  q(() => {
     if (o !== v.current && (v.current = o, x.current = !1), x.current || !o) return;
     const t = s ?? n[0];
     x.current = !0, !(t === void 0 || t === n[0]) && d[t] !== void 0 && requestAnimationFrame(() => {
       h(t);
     });
   }, [o, s, h, n, d]);
-  const H = l.map((t) => ({
+  const I = l.map((t) => ({
     id: t.props.id,
-    item: /* @__PURE__ */ r(
-      F,
+    item: /* @__PURE__ */ e(
+      M,
       {
         selected: b === t.props.id,
-        label: I(t.props.title)
+        label: A(t.props.title)
       }
     )
-  })), C = B.toArray(e), k = C.filter(
+  })), C = B.toArray(r), k = C.filter(
     (t) => T(t) && t.props.beforeBar === !0
-  ), O = C.filter(
+  ), H = C.filter(
     (t) => !(T(t) && t.props.beforeBar === !0)
   );
-  return /* @__PURE__ */ r(u, { gap: "lg", "data-testid": c ?? S.root, children: /* @__PURE__ */ p(j.Provider, { value: d, children: [
-    k.length > 0 ? /* @__PURE__ */ r(u, { gap: "xl", children: k }) : null,
+  return /* @__PURE__ */ e(u, { gap: "lg", "data-testid": c ?? S.root, children: /* @__PURE__ */ p(R.Provider, { value: d, children: [
+    k.length > 0 ? /* @__PURE__ */ e(u, { gap: "xl", children: k }) : null,
     m,
-    /* @__PURE__ */ r(G, { testId: S.bar, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ e(W, { testId: S.bar, children: /* @__PURE__ */ e(
       V,
       {
         state: {
@@ -108,32 +109,28 @@ function W({
             h(t);
           }
         },
-        tabs: H,
+        tabs: I,
         item: null
       }
     ) }),
-    /* @__PURE__ */ r(u, { gap: "xl", children: O })
+    /* @__PURE__ */ e(u, { gap: "xl", children: H })
   ] }) });
 }
-function G({
-  children: e,
+function W({
+  children: r,
   testId: o
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
       className: "sticky top-0 z-20 -mx-1 px-1 pt-3 sm:pt-4 bg-background/75 backdrop-blur-md backdrop-saturate-150",
       "data-testid": o,
-      children: e
+      children: r
     }
   );
 }
-function $(e) {
-  return N(e) && e.type === W;
-}
 export {
-  W as Tabber,
-  A as TabberSection,
-  S as TabberTest,
-  $ as isTabber
+  $ as Tabber,
+  j as TabberSection,
+  S as TabberTest
 };

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

@@ -1,33 +1,34 @@
-import { jsx as t, jsxs as m, Fragment as f } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as T } from "react/jsx-runtime";
 import { useTitleText as h } from "../text/use-title-text.js";
+import { getTTLZones as g } from "./ttl.js";
+import { ttlLeft as L } from "./ttl-left.js";
 import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthDot as g } from "../../status-elements/status-elements.js";
+import { HealthDot as x } from "../../status-elements/status-elements.js";
 import { FormattedMessageTyped as u } from "../../typed-intl/index.js";
-import { VerticalIndicator as L } from "../../vertical-indicator/vertical-indicator.js";
-import { APPROXIMATE_SYMBOL as x } from "../../../utils/format.js";
-import { ttlLeft as I, getTTLZones as B } from "../../../utils/ttl.js";
+import { VerticalIndicator as I } from "../../vertical-indicator/vertical-indicator.js";
+import { APPROXIMATE_SYMBOL as B } from "../../../utils/format.js";
 import { TimeToLiquidationBlockTest as d } from "./constants.js";
-function j({
+function O({
   data: o,
   dataTo: n,
   approximate: r,
   zone: a,
   isLoading: e,
   title: i,
-  tip: p,
+  tip: c,
   testId: v
 }) {
-  const T = h(), l = n !== void 0;
+  const f = h(), l = n !== void 0;
   return /* @__PURE__ */ t(
-    L,
+    I,
     {
       align: "center",
       dimPreviousValue: !1,
       "data-testid": v ?? d.root,
-      label: i !== void 0 ? T(i) : /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.label" }),
-      tip: p ?? /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.tip" }),
+      label: i !== void 0 ? f(i) : /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.label" }),
+      tip: c ?? /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.tip" }),
       value: /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
-        c,
+        p,
         {
           milliseconds: o,
           approximate: r && !l,
@@ -36,7 +37,7 @@ function j({
         }
       ) }),
       valueTo: l ? /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
-        c,
+        p,
         {
           milliseconds: n ?? null,
           approximate: r,
@@ -47,22 +48,22 @@ function j({
     }
   );
 }
-function c({
+function p({
   milliseconds: o,
   approximate: n,
   zone: r,
   testId: a
 }) {
-  const e = o == null ? void 0 : I(o), i = r ?? (o == null ? void 0 : B(o));
+  const e = o == null ? void 0 : L(o), i = r ?? (o == null ? void 0 : g(o));
   return /* @__PURE__ */ m("span", { className: "inline-flex items-center", "data-testid": a, children: [
-    o === void 0 ? "—" : o === null ? "N/A" : /* @__PURE__ */ m(f, { children: [
-      n ? /* @__PURE__ */ t("span", { className: "mr-0.5", children: x }) : null,
+    o === void 0 ? "—" : o === null ? "N/A" : /* @__PURE__ */ m(T, { children: [
+      n ? /* @__PURE__ */ t("span", { className: "mr-0.5", children: B }) : null,
       e?.months !== void 0 ? `${e.months}mo` : e?.day !== void 0 ? `${e.day}d` : "<1d"
     ] }),
-    o != null && i ? /* @__PURE__ */ t("span", { className: "ml-1.5", children: /* @__PURE__ */ t(g, { zone: i }) }) : null
+    o != null && i ? /* @__PURE__ */ t("span", { className: "ml-1.5", children: /* @__PURE__ */ t(x, { zone: i }) }) : null
   ] });
 }
 export {
-  j as TimeToLiquidationBlock,
+  O as TimeToLiquidationBlock,
   d as TimeToLiquidationBlockTest
 };

package/dist/esm/components/base/time-to-liquidation-block/ttl-left.js

@@ -0,0 +1,10 @@
+import { Duration as i } from "luxon";
+function a(o) {
+  const s = typeof o == "bigint" ? Number(o) : o, t = i.fromMillis(s), n = t.as("months");
+  if (n > 3) return { months: Math.floor(n) };
+  const r = t.as("days");
+  if (r >= 1) return { day: Math.floor(r) };
+}
+export {
+  a as ttlLeft
+};

package/dist/esm/components/base/time-to-liquidation-block/ttl.js

@@ -0,0 +1,8 @@
+function t(n) {
+  if (!n) return;
+  const o = typeof n == "bigint" ? Number(n) : n;
+  return o >= 2592e6 ? "good" : o > 6048e5 ? "medium" : "bad";
+}
+export {
+  t as getTTLZones
+};

package/dist/esm/components/base/token-amount/token-amount.js

@@ -1,50 +1,36 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { Stack as s } from "../stack/stack.js";
-import { NoValue as a } from "../values/no-value.js";
-import "@gearbox-protocol/sdk/onchain";
-import "clsx";
-import "tailwind-merge";
-import { APPROXIMATE_SYMBOL as l } from "../../../utils/format.js";
-import { formatMoney as c } from "../../../utils/format-money.js";
-import "luxon";
-import "../../../utils/z-index.js";
-import "viem";
-import "react";
-import "../../points-icon/points-icon.js";
-import "../../token-icon/token-icon.js";
-import "react-intl";
-import "../../tooltip/simple-tooltip.js";
-import "../../tooltip/tooltip.js";
-import "../../badge/badge.js";
-import "../../badge/chip.js";
-import { TokenTemplate as u } from "../../token-template/token-template.js";
-import { Typography as f } from "../../typography/typography.js";
-import { TokenAmountTest as m } from "./constants.js";
-function X({
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { Stack as i } from "../stack/stack.js";
+import { NoValue as l } from "../../no-value/no-value.js";
+import { TokenTemplate as p } from "../../token-template/token-template.js";
+import { Typography as c } from "../../typography/typography.js";
+import { APPROXIMATE_SYMBOL as u } from "../../../utils/format.js";
+import { formatMoney as f } from "../../../utils/format-money.js";
+import { TokenAmountTest as n } from "./constants.js";
+function N({
   data: o,
-  token: e,
-  align: i = "end",
-  approximate: n
+  token: t,
+  align: m = "end",
+  approximate: s
 }) {
   if (o === null)
     return /* @__PURE__ */ r(
       "span",
       {
         className: "text-secondary-foreground",
-        "data-testid": m.root,
+        "data-testid": n.root,
         children: "—"
       }
     );
-  const p = e ?? o.token;
-  return /* @__PURE__ */ t(s, { gap: "xs", align: i, "data-testid": m.root, children: [
-    /* @__PURE__ */ t("span", { className: "flex items-center", children: [
-      n ? /* @__PURE__ */ r("span", { className: "mr-0.5", children: l }) : null,
-      /* @__PURE__ */ r(u, { value: o.value, token: p })
+  const a = t ?? o.token;
+  return /* @__PURE__ */ e(i, { gap: "xs", align: m, "data-testid": n.root, children: [
+    /* @__PURE__ */ e("span", { className: "flex items-center", children: [
+      s ? /* @__PURE__ */ r("span", { className: "mr-0.5", children: u }) : null,
+      /* @__PURE__ */ r(p, { value: o.value, token: a })
     ] }),
-    /* @__PURE__ */ r(f, { as: "span", variant: "caption", color: "secondary", children: o.valueUsd === null ? /* @__PURE__ */ r(a, {}) : c(o.valueUsd) })
+    /* @__PURE__ */ r(c, { as: "span", variant: "caption", color: "secondary", children: o.valueUsd === null ? /* @__PURE__ */ r(l, {}) : f(o.valueUsd) })
   ] });
 }
 export {
-  X as TokenAmount,
-  m as TokenAmountTest
+  N as TokenAmount,
+  n as TokenAmountTest
 };

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

@@ -1,11 +1,10 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { TokenSymbol as n } from "../../token-symbol/token-symbol.js";
+import { cn as f } from "../../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as p } from "../../../utils/cn.js";
-import "luxon";
 import "../../../utils/z-index.js";
-import { TokenPairSymbolTest as f } from "./constants.js";
-function b({
+import { TokenPairSymbolTest as p } from "./constants.js";
+function T({
   collateral: o,
   underlying: t,
   size: e = 32,
@@ -15,8 +14,8 @@ function b({
   return !t && !o ? null : o ? t ? /* @__PURE__ */ s(
     "span",
     {
-      className: p("relative z-0 inline-flex shrink-0 self-center", i),
-      "data-testid": f.root,
+      className: f("relative z-0 inline-flex shrink-0 self-center", i),
+      "data-testid": p.root,
       children: [
         /* @__PURE__ */ r("span", { className: "z-[1]", children: /* @__PURE__ */ r(n, { size: e, token: o }) }),
         /* @__PURE__ */ r("span", { className: "relative z-0", style: { right: `${m}%` }, children: /* @__PURE__ */ r(n, { size: e, token: t }) })
@@ -25,6 +24,6 @@ function b({
   ) : /* @__PURE__ */ r(n, { size: e, token: o }) : t ? /* @__PURE__ */ r(n, { size: e, token: t }) : null;
 }
 export {
-  b as TokenPairSymbol,
-  f as TokenPairSymbolTest
+  T as TokenPairSymbol,
+  p as TokenPairSymbolTest
 };