@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

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

@@ -1,212 +1,145 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { IconExternal as R } from "@gearbox-protocol/static";
-import { useMemo as S } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { IconExternal as j } from "@gearbox-protocol/static";
+import { useMemo as A } from "react";
 import "../buttons/back-button/back-button.js";
-import { Button as $ } from "../buttons/button/button.js";
+import { Button as z } from "../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 "@gearbox-protocol/sdk";
-import { cn as T } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
-import { CollateralAllocationTooltip as B } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
-import { TokenIcon as j } from "../token-icon/token-icon.js";
-import { SimpleTooltip as M } from "../tooltip/simple-tooltip.js";
+import { CollateralAllocationTooltip as L } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
+import { TokenIcon as N } from "../token-icon/token-icon.js";
+import { SimpleTooltip as v } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-function z(t, n) {
-  return t ? /* @__PURE__ */ e(B, { data: t, children: n }) : n;
+import { cn as f } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+function M(e, n) {
+  return e ? /* @__PURE__ */ t(L, { data: e, children: n }) : n;
 }
-function O({
-  count: t,
+function S({
+  count: e,
   iconSize: n,
   onOtherClick: o,
-  otherTooltip: i,
-  fallbackTooltip: m
+  otherTooltip: r,
+  fallbackTooltip: l
 }) {
-  const l = T(
+  const i = f(
     "inline-flex items-center justify-center rounded-full shrink-0",
     "bg-gray-50 text-foreground ml-1!",
     o && "cursor-pointer hover:bg-gray-70 transition-colors"
-  ), c = {
+  ), s = {
     width: n,
     height: n,
     minWidth: n,
     minHeight: n,
     zIndex: 0
-  }, u = /* @__PURE__ */ p("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
+  }, a = /* @__PURE__ */ d("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
     "+",
-    t
+    e
   ] });
-  return !o && !i ? /* @__PURE__ */ e("span", { className: l, style: c, children: u }) : /* @__PURE__ */ e(M, { title: o ? /* @__PURE__ */ e(
+  return !o && !r ? /* @__PURE__ */ t("span", { className: i, style: s, children: a }) : /* @__PURE__ */ t(v, { title: o ? /* @__PURE__ */ t(
     "button",
     {
       type: "button",
       onClick: o,
-      className: l,
-      style: c,
-      children: u
+      className: i,
+      style: s,
+      children: a
     }
-  ) : /* @__PURE__ */ e("span", { className: l, style: c, children: u }), placement: "top", children: i || m });
+  ) : /* @__PURE__ */ t("span", { className: i, style: s, children: a }), placement: "top", children: r || l });
 }
-function E(t) {
-  return "balances" in t && t.balances !== void 0;
+function $(e) {
+  return "tokens" in e && e.tokens !== void 0;
 }
-function H(t) {
-  return "tokens" in t && t.tokens !== void 0;
-}
-function W({
-  assetAddress: t,
+function B({
+  assetAddress: e,
   symbol: n,
   iconSymbol: o,
-  comment: i,
-  explorerUrl: m,
-  iconSize: l = 24,
-  className: c
+  comment: r,
+  explorerUrl: l,
+  iconSize: i = 24,
+  className: s
 }) {
-  return /* @__PURE__ */ p("div", { className: T("flex items-center gap-3", c), children: [
-    /* @__PURE__ */ e(j, { token: o ?? n, size: l }),
-    /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e("div", { className: "font-medium", children: n }),
-      i && /* @__PURE__ */ p("div", { className: "text-md text-muted-foreground", children: [
+  return /* @__PURE__ */ d("div", { className: f("flex items-center gap-3", s), children: [
+    /* @__PURE__ */ t(N, { token: o ?? n, size: i }),
+    /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ t("div", { className: "font-medium", children: n }),
+      r && /* @__PURE__ */ d("div", { className: "text-md text-muted-foreground", children: [
         "(",
-        i,
+        r,
         ")"
       ] }),
-      m && /* @__PURE__ */ e(
-        $,
+      l && /* @__PURE__ */ t(
+        z,
         {
           variant: "ghost",
           size: "sm",
           className: "text-muted-foreground hover:text-foreground p-0 h-auto",
-          onClick: () => window.open(`${m}/address/${t}`, "_blank"),
-          children: /* @__PURE__ */ e(R, { size: 12, className: "size-3" })
+          onClick: () => window.open(`${l}/address/${e}`, "_blank"),
+          children: /* @__PURE__ */ t(j, { size: 12, className: "size-3" })
         }
       )
     ] })
   ] });
 }
-function _({
-  balances: t,
-  tokensList: n,
-  maxAssets: o = 3,
-  iconSize: i = 24,
-  options: m,
+function E({
+  tokens: e,
+  maxAssets: n = 3,
+  iconSize: o = 24,
+  options: r,
   className: l
 }) {
   const {
-    mode: c = "default",
-    showIconTooltip: u = !0,
-    otherTooltip: x,
-    onOtherClick: v,
+    mode: i = "default",
+    showIconTooltip: s = !0,
+    otherTooltip: a,
+    onOtherClick: p,
     allocation: g
-  } = m || {}, w = c === "cascade", k = u && !g, [y, C, I, h] = S(() => {
-    const s = t, r = s.slice(0, o), a = s.slice(o), f = a.map((b) => {
-      const N = typeof b == "string" ? b : b.token;
-      return n[N]?.title || n[N]?.symbol || "unknown";
-    }).join(", "), d = s.length > o;
-    return [r, a, f, d];
-  }, [t, o, n]);
-  return z(
+  } = r || {}, x = i === "cascade", T = s && !g, [k, w, y, C] = A(() => {
+    const m = e.slice(0, n), c = e.slice(n), u = c.map((h) => h.symbol || "unknown").join(", ");
+    return [m, c, u, e.length > n];
+  }, [e, n]);
+  return M(
     g,
-    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", l), children: [
-      y.map((s, r, a) => {
-        const f = typeof s == "string" ? s : s.token, d = n[f], b = r === a.length - 1, N = w ? a.length - r : void 0, A = /* @__PURE__ */ e(j, { token: d, size: i });
-        return /* @__PURE__ */ e(
-          "div",
-          {
-            className: "flex-shrink-0 flex",
-            style: {
-              zIndex: N,
-              marginRight: b ? 0 : w ? -Math.round(i * 0.5) : 4
-            },
-            children: k ? /* @__PURE__ */ e(
-              M,
-              {
-                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: A }),
-                placement: "top",
-                children: d?.title || d?.symbol || "unknown"
-              }
-            ) : A
-          },
-          f ?? r
-        );
-      }),
-      h && /* @__PURE__ */ e(
-        O,
-        {
-          count: C.length,
-          iconSize: i,
-          onOtherClick: v,
-          otherTooltip: x,
-          fallbackTooltip: I
-        }
-      )
-    ] })
-  );
-}
-function q({
-  tokens: t,
-  maxAssets: n = 3,
-  iconSize: o = 24,
-  options: i,
-  className: m
-}) {
-  const {
-    mode: l = "default",
-    showIconTooltip: c = !0,
-    otherTooltip: u,
-    onOtherClick: x,
-    allocation: v
-  } = i || {}, g = l === "cascade", w = c && !v, [k, y, C, I] = S(() => {
-    const h = t.slice(0, n), s = t.slice(n), r = s.map((a) => a.symbol || "unknown").join(", ");
-    return [h, s, r, t.length > n];
-  }, [t, n]);
-  return z(
-    v,
-    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", m), children: [
-      k.map((h, s, r) => {
-        const a = s === r.length - 1, f = g ? r.length - s : void 0, d = /* @__PURE__ */ e(j, { token: h, size: o });
-        return /* @__PURE__ */ e(
+    /* @__PURE__ */ d("div", { className: f("relative inline-flex items-center", l), children: [
+      k.map((m, c, u) => {
+        const h = c === u.length - 1, I = x ? u.length - c : void 0, b = /* @__PURE__ */ t(N, { token: m, size: o });
+        return /* @__PURE__ */ t(
           "div",
           {
             className: "flex-shrink-0 flex",
             style: {
-              zIndex: f,
-              marginRight: a ? 0 : g ? -Math.round(o * 0.5) : 4
+              zIndex: I,
+              marginRight: h ? 0 : x ? -Math.round(o * 0.5) : 4
             },
-            children: w ? /* @__PURE__ */ e(
-              M,
+            children: T ? /* @__PURE__ */ t(
+              v,
               {
-                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: d }),
+                title: /* @__PURE__ */ t("span", { className: "inline-flex", children: b }),
                 placement: "top",
-                children: h.symbol || "unknown"
+                children: m.symbol || "unknown"
               }
-            ) : d
+            ) : b
           },
-          h.address ?? s
+          m.address ?? c
         );
       }),
-      I && /* @__PURE__ */ e(
-        O,
+      C && /* @__PURE__ */ t(
+        S,
         {
-          count: y.length,
+          count: w.length,
           iconSize: o,
-          onOtherClick: x,
-          otherTooltip: u,
-          fallbackTooltip: C
+          onOtherClick: p,
+          otherTooltip: a,
+          fallbackTooltip: y
         }
       )
     ] })
   );
 }
-function lt(t) {
-  return H(t) ? /* @__PURE__ */ e(q, { ...t }) : E(t) ? /* @__PURE__ */ e(_, { ...t }) : /* @__PURE__ */ e(W, { ...t });
+function Y(e) {
+  return $(e) ? /* @__PURE__ */ t(E, { ...e }) : /* @__PURE__ */ t(B, { ...e });
 }
 export {
-  lt as AssetsListCell
+  Y as AssetsListCell
 };

package/dist/esm/components/badge/badge.js

@@ -1,11 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const d = n(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-auto",
@@ -29,10 +25,9 @@ const d = n(
     }
   }
 );
-function l({ className: r, variant: e, ...t }) {
+function g({ className: r, variant: e, ...t }) {
   return /* @__PURE__ */ o("div", { className: a(d({ variant: e }), r), ...t });
 }
 export {
-  l as Badge,
-  d as badgeVariants
+  g as Badge
 };

package/dist/esm/components/badge/chip.js

@@ -1,47 +1,42 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { Badge as p } from "./badge.js";
-class s {
-  static root = "chip-root";
-}
-class e {
-  static root = "chips-root";
-  static chip = s.root;
-}
-function C({
+import { Badge as n } from "./badge.js";
+const s = {
+  root: "chip-root"
+}, p = {
+  root: "chips-root",
+  chip: s.root
+};
+function f({
   children: t,
   tone: o = "neutral",
-  className: a
+  className: e
 }) {
   return /* @__PURE__ */ r(
-    p,
+    n,
     {
       variant: o,
-      className: i("shrink-0", a),
+      className: i("shrink-0", e),
       "data-testid": s.root,
       children: t
     }
   );
 }
-function g({ children: t, className: o }) {
+function u({ children: t, className: o }) {
   return /* @__PURE__ */ r(
     "div",
     {
       className: i("flex shrink-0 items-center gap-x-2", o),
-      "data-testid": e.root,
+      "data-testid": p.root,
       children: t
     }
   );
 }
 export {
-  C as Chip,
+  f as Chip,
   s as ChipTest,
-  g as Chips,
-  e as ChipsTest
+  u as Chips,
+  p as ChipsTest
 };

package/dist/esm/components/badge/index.js

@@ -1,10 +1,9 @@
-import { Badge as i, badgeVariants as r } from "./badge.js";
-import { Chip as t, ChipTest as a, Chips as h, ChipsTest as o } from "./chip.js";
+import { Badge as h } from "./badge.js";
+import { Chip as o, ChipTest as r, Chips as s, ChipsTest as t } from "./chip.js";
 export {
-  i as Badge,
-  t as Chip,
-  a as ChipTest,
-  h as Chips,
-  o as ChipsTest,
-  r as badgeVariants
+  h as Badge,
+  o as Chip,
+  r as ChipTest,
+  s as Chips,
+  t as ChipsTest
 };

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

@@ -4,10 +4,9 @@ import { useState as x, useEffect as q } from "react";
 import { useTitleText as G } from "../text/use-title-text.js";
 import { Modal as H } from "../../modal/modal.js";
 import { useIntlTyped as J, FormattedMessageTyped as K } from "../../typed-intl/index.js";
-import "@gearbox-protocol/sdk/common-utils";
 import { useIsMobile as Q } from "../../../hooks/use-media-query.js";
-import { bnToInputView as M } from "../../../utils/bn-to-input-view.js";
 import { cn as R } from "../../../utils/cn.js";
+import { bnToInputView as M } from "../../../utils/internal/bn-to-input-view.js";
 import { parseInputToBN as S } from "../../../utils/parse-input-to-bn.js";
 import { BalanceIndicator as W } from "./balance-indicator.js";
 import { AmountInputTest as m } from "./constants.js";
@@ -44,12 +43,12 @@ const Y = g(
     defaultVariants: { size: "md" }
   }
 );
-function ge({
+function xe({
   amount: t,
   onAmount: s,
   token: r,
   tokens: n,
-  onToken: o,
+  onToken: a,
   balance: u,
   balances: B,
   usdPrices: j,
@@ -57,7 +56,7 @@ function ge({
   maxLabel: v,
   usdPrice: b,
   size: A,
-  disabled: a = !1,
+  disabled: o = !1,
   testId: D
 }) {
   const O = J(), y = G(), U = Q(), i = A ?? (U ? "sm" : "md"), l = r.decimals, [p, w] = x(
@@ -70,8 +69,8 @@ function ge({
   const $ = (d) => {
     const [F, V] = S(d.target.value, l);
     F === null || V === null || (w(V), s(F));
-  }, I = !!(n && n.length > 1 && o && !a), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
-    o?.(d), f(!1);
+  }, I = !!(n && n.length > 1 && a && !o), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
+    a?.(d), f(!1);
   }, C = () => f(!1);
   return /* @__PURE__ */ c(L, { children: [
     /* @__PURE__ */ c(
@@ -79,7 +78,7 @@ function ge({
       {
         "data-testid": D ?? m.root,
         "data-active": P,
-        "data-disabled": a,
+        "data-disabled": o,
         className: Y({ size: i }),
         children: [
           /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
@@ -100,7 +99,7 @@ function ge({
                 title: v !== void 0 ? y(v) : void 0,
                 token: r,
                 balance: u,
-                disabled: a,
+                disabled: o,
                 onMax: () => s(u)
               }
             ) : null
@@ -120,7 +119,7 @@ function ge({
                 onChange: $,
                 onFocus: () => z(!0),
                 onBlur: () => z(!1),
-                disabled: a,
+                disabled: o,
                 minLength: 1,
                 maxLength: 79,
                 title: O.formatMessage({
@@ -143,7 +142,7 @@ function ge({
               {
                 token: r,
                 size: i,
-                disabled: a
+                disabled: o
               }
             ) })
           ] }),
@@ -182,19 +181,19 @@ function ee(t, s) {
   if (!s) return null;
   const r = Number.parseFloat(t.replace(",", ".") || "0");
   if (!Number.isFinite(r) || r === 0) return null;
-  const n = r * s, o = Math.abs(n) < 100;
+  const n = r * s, a = Math.abs(n) < 100;
   try {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-      minimumFractionDigits: o ? 2 : 0,
-      maximumFractionDigits: o ? 2 : 0
+      minimumFractionDigits: a ? 2 : 0,
+      maximumFractionDigits: a ? 2 : 0
     }).format(n);
   } catch {
     return "$0";
   }
 }
 export {
-  ge as AmountInput,
+  xe as AmountInput,
   m as AmountInputTest
 };

package/dist/esm/components/base/amount-input/constants.js

@@ -1,14 +1,14 @@
-class a {
-  static root = "amount-input-root";
-  static input = "amount-input-field";
-  static max = "amount-input-max";
-  static token = "amount-input-token";
-  static label = "amount-input-label";
-  static balance = "amount-input-balance";
-  static usd = "amount-input-usd";
-  static selectPanel = "amount-input-select-panel";
-  static selectOption = "amount-input-select-option";
-}
+const t = {
+  root: "amount-input-root",
+  input: "amount-input-field",
+  max: "amount-input-max",
+  token: "amount-input-token",
+  label: "amount-input-label",
+  balance: "amount-input-balance",
+  usd: "amount-input-usd",
+  selectPanel: "amount-input-select-panel",
+  selectOption: "amount-input-select-option"
+};
 export {
-  a as AmountInputTest
+  t as AmountInputTest
 };

package/dist/esm/components/base/amount-input/index.js

@@ -1,8 +1,6 @@
-import { AmountInput as e } from "./amount-input.js";
-import { TokenSelectPanel as r } from "./token-select-panel.js";
+import { AmountInput as m } from "./amount-input.js";
 import { AmountInputTest as p } from "./constants.js";
 export {
-  e as AmountInput,
-  p as AmountInputTest,
-  r as TokenSelectPanel
+  m as AmountInput,
+  p as AmountInputTest
 };

package/dist/esm/components/base/amount-input/token-select-panel.js

@@ -1,73 +1,57 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../../buttons/button/button.js";
-import { VSpace as b } from "../../vspace/vspace.js";
-import { GridTable as g, GridTableBody as v, GridTableRow as w, GridTableCell as s } from "../../table/grid-table.js";
-import "../../skeleton/skeleton.js";
-import "react";
-import "@gearbox-protocol/sdk";
-import "clsx";
-import "tailwind-merge";
-import "sonner";
-import { formatAssetAmount as T } from "../../../utils/format-asset-amount.js";
+import { GridTable as u, GridTableBody as b, GridTableRow as g, GridTableCell as t } from "../../table/grid-table.js";
+import { TokenSymbol as v } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as w } from "../../typed-intl/index.js";
+import { VSpace as T } from "../../vspace/vspace.js";
 import { formatMoney as y } from "../../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../../utils/z-index.js";
-import "../../table/table.js";
-import { TokenSymbol as N } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as z } from "../../typed-intl/index.js";
-import { AmountInputTest as n } from "./constants.js";
-function d(o, i) {
-  if (o)
-    return o[i] ?? o[i.toLowerCase()];
-}
-function Q({
+import { formatAssetAmount as N } from "../../../utils/internal/format-asset-amount.js";
+import { AmountInputTest as m } from "./constants.js";
+function P({
   tokens: o,
-  balances: i,
-  usdPrices: p,
+  balances: d,
+  usdPrices: n,
   onSelect: c,
-  onClose: f
+  onClose: p
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ l(
     "div",
     {
-      "data-testid": n.selectPanel,
+      "data-testid": m.selectPanel,
       className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
       children: [
         /* @__PURE__ */ e(
           h,
           {
-            title: /* @__PURE__ */ e(z, { messageId: "components.amountInput.selectToken" }),
-            onClose: f
+            title: /* @__PURE__ */ e(w, { messageId: "components.amountInput.selectToken" }),
+            onClose: p
           }
         ),
-        /* @__PURE__ */ e(b, { size: 16 }),
+        /* @__PURE__ */ e(T, { size: 16 }),
         /* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
-          g,
+          u,
           {
             cols: "minmax(0,1fr) 120px",
             gap: 0,
             size: "sm",
             wrapperClassName: "overflow-visible",
-            children: /* @__PURE__ */ e(v, { children: o.map((r, x) => {
-              const l = d(i, r.address) ?? 0n, m = d(p, r.address), u = Number(l) / 10 ** r.decimals, a = m !== void 0 ? y(u * m, 4) : void 0;
-              return /* @__PURE__ */ t(
-                w,
+            children: /* @__PURE__ */ e(b, { children: o.map((r, f) => {
+              const a = d?.get(r.address) ?? 0n, s = n?.get(r.address), x = Number(a) / 10 ** r.decimals, i = s !== void 0 ? y(x * s, 4) : void 0;
+              return /* @__PURE__ */ l(
+                g,
                 {
-                  last: x === o.length - 1,
+                  last: f === o.length - 1,
                   height: "56px",
-                  "data-testid": n.selectOption,
+                  "data-testid": m.selectOption,
                   onRowClick: () => c(r),
                   children: [
-                    /* @__PURE__ */ e(s, { size: "sm", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ e(N, { token: r, size: 24, showSymbol: !1 }),
+                    /* @__PURE__ */ e(t, { size: "sm", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ e(v, { token: r, size: 24, showSymbol: !1 }),
                       /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
                     ] }) }),
-                    /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: T(l, r.decimals) }),
-                      a !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: a }) : null
+                    /* @__PURE__ */ e(t, { size: "sm", textAlign: "right", children: /* @__PURE__ */ l("div", { children: [
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: N(a, r.decimals) }),
+                      i !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: i }) : null
                     ] }) })
                   ]
                 },
@@ -81,5 +65,5 @@ function Q({
   );
 }
 export {
-  Q as TokenSelectPanel
+  P as TokenSelectPanel
 };