@gearbox-protocol/ui-kit 4.0.0-next.47 → 4.0.0-next.49

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

@@ -5,14 +5,11 @@ import "../buttons/back-button/back-button.js";
 import { Button as $ } 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 "../buttons/tab-button/tab-button.js";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as T } from "../../utils/cn.js";
-import "sonner";
 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";
@@ -27,7 +24,7 @@ function O({
   otherTooltip: i,
   fallbackTooltip: d
 }) {
-  const l = T(
+  const r = T(
     "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"
@@ -41,16 +38,16 @@ function O({
     "+",
     t
   ] });
-  return !o && !i ? /* @__PURE__ */ e("span", { className: l, style: c, children: u }) : /* @__PURE__ */ e(M, { title: o ? /* @__PURE__ */ e(
+  return !o && !i ? /* @__PURE__ */ e("span", { className: r, style: c, children: u }) : /* @__PURE__ */ e(M, { title: o ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: o,
-      className: l,
+      className: r,
       style: c,
       children: u
     }
-  ) : /* @__PURE__ */ e("span", { className: l, style: c, children: u }), placement: "top", children: i || d });
+  ) : /* @__PURE__ */ e("span", { className: r, style: c, children: u }), placement: "top", children: i || d });
 }
 function E(t) {
   return "balances" in t && t.balances !== void 0;
@@ -64,11 +61,11 @@ function W({
   iconSymbol: o,
   comment: i,
   explorerUrl: d,
-  iconSize: l = 24,
+  iconSize: r = 24,
   className: c
 }) {
   return /* @__PURE__ */ p("div", { className: T("flex items-center gap-3", c), children: [
-    /* @__PURE__ */ e(j, { token: o ?? n, size: l }),
+    /* @__PURE__ */ e(j, { token: o ?? n, size: r }),
     /* @__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: [
@@ -95,7 +92,7 @@ function _({
   maxAssets: o = 3,
   iconSize: i = 24,
   options: d,
-  className: l
+  className: r
 }) {
   const {
     mode: c = "default",
@@ -104,17 +101,17 @@ function _({
     onOtherClick: v,
     allocation: g
   } = d || {}, 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 s = t, l = 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(", "), m = s.length > o;
-    return [r, a, f, m];
+    return [l, a, f, m];
   }, [t, o, n]);
   return z(
     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, m = n[f], b = r === a.length - 1, N = w ? a.length - r : void 0, A = /* @__PURE__ */ e(j, { token: m, size: i });
+    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", r), children: [
+      y.map((s, l, a) => {
+        const f = typeof s == "string" ? s : s.token, m = n[f], b = l === a.length - 1, N = w ? a.length - l : void 0, A = /* @__PURE__ */ e(j, { token: m, size: i });
         return /* @__PURE__ */ e(
           "div",
           {
@@ -132,7 +129,7 @@ function _({
               }
             ) : A
           },
-          f ?? r
+          f ?? l
         );
       }),
       h && /* @__PURE__ */ e(
@@ -156,20 +153,20 @@ function q({
   className: d
 }) {
   const {
-    mode: l = "default",
+    mode: r = "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];
+  } = i || {}, g = r === "cascade", w = c && !v, [k, y, C, I] = S(() => {
+    const h = t.slice(0, n), s = t.slice(n), l = s.map((a) => a.symbol || "unknown").join(", ");
+    return [h, s, l, t.length > n];
   }, [t, n]);
   return z(
     v,
     /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", d), children: [
-      k.map((h, s, r) => {
-        const a = s === r.length - 1, f = g ? r.length - s : void 0, m = /* @__PURE__ */ e(j, { token: h, size: o });
+      k.map((h, s, l) => {
+        const a = s === l.length - 1, f = g ? l.length - s : void 0, m = /* @__PURE__ */ e(j, { token: h, size: o });
         return /* @__PURE__ */ e(
           "div",
           {
@@ -203,9 +200,9 @@ function q({
     ] })
   );
 }
-function rt(t) {
+function ot(t) {
   return H(t) ? /* @__PURE__ */ e(q, { ...t }) : E(t) ? /* @__PURE__ */ e(_, { ...t }) : /* @__PURE__ */ e(W, { ...t });
 }
 export {
-  rt as AssetsListCell
+  ot as AssetsListCell
 };

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

@@ -1,9 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import "react";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as a } from "../../utils/cn.js";
-import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
 const d = n(
@@ -28,10 +26,10 @@ const d = n(
     }
   }
 );
-function c({ className: r, variant: e, ...t }) {
+function p({ className: r, variant: e, ...t }) {
   return /* @__PURE__ */ o("div", { className: a(d({ variant: e }), r), ...t });
 }
 export {
-  c as Badge,
+  p as Badge,
   d as badgeVariants
 };

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

@@ -1,25 +1,23 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as i } from "../../utils/cn.js";
-import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-import { Badge as p } from "./badge.js";
+import { Badge as e } from "./badge.js";
 class s {
   static root = "chip-root";
 }
-class e {
+class p {
   static root = "chips-root";
   static chip = s.root;
 }
-function x({
+function l({
   children: t,
   tone: o = "neutral",
   className: a
 }) {
   return /* @__PURE__ */ r(
-    p,
+    e,
     {
       variant: o,
       className: i("shrink-0", a),
@@ -28,19 +26,19 @@ function x({
     }
   );
 }
-function C({ 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 {
-  x as Chip,
+  l as Chip,
   s as ChipTest,
-  C as Chips,
-  e as ChipsTest
+  u as Chips,
+  p as ChipsTest
 };

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

@@ -9,7 +9,6 @@ import "react";
 import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
 import { formatAssetAmount as w } from "../../../utils/format-asset-amount.js";
 import { formatMoney as T } from "../../../utils/format-money.js";
 import "luxon";
@@ -18,7 +17,7 @@ import "../../table/table.js";
 import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
 import { FormattedMessageTyped as N } from "../../typed-intl/index.js";
 import { AmountInputTest as s } from "./constants.js";
-function K({
+function J({
   tokens: i,
   balances: d,
   usdPrices: n,
@@ -47,7 +46,7 @@ function K({
             size: "sm",
             wrapperClassName: "overflow-visible",
             children: /* @__PURE__ */ e(g, { children: i.map((r, f) => {
-              const t = d?.get(r.address) ?? 0n, l = n?.get(r.address), x = Number(t) / 10 ** r.decimals, m = l !== void 0 ? T(x * l, 4) : void 0;
+              const l = d?.get(r.address) ?? 0n, t = n?.get(r.address), x = Number(l) / 10 ** r.decimals, m = t !== void 0 ? T(x * t, 4) : void 0;
               return /* @__PURE__ */ o(
                 v,
                 {
@@ -61,7 +60,7 @@ function K({
                       /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
                     ] }) }),
                     /* @__PURE__ */ e(a, { size: "sm", textAlign: "right", children: /* @__PURE__ */ o("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: w(t, r.decimals) }),
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: w(l, r.decimals) }),
                       m !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: m }) : null
                     ] }) })
                   ]
@@ -76,5 +75,5 @@ function K({
   );
 }
 export {
-  K as TokenSelectPanel
+  J as TokenSelectPanel
 };

package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js

@@ -6,11 +6,9 @@ import { Typography as d } from "../../typography/typography.js";
 import { VSpace as f } from "../../vspace/vspace.js";
 import { InfoList as b, InfoLine as i } from "../info-list/info-list.js";
 import "../../help-tip/help-tip.js";
-import "react";
 import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../points-icon/points-icon.js";
@@ -24,7 +22,7 @@ function p(t) {
 function u(t) {
   return typeof t == "number" ? t : t?.base;
 }
-function q({
+function V({
   data: t,
   dataTo: r
 }) {
@@ -85,6 +83,6 @@ function q({
   ) }) });
 }
 export {
-  q as BorrowRateBlock,
+  V as BorrowRateBlock,
   n as BorrowRateBlockTest
 };

package/dist/esm/components/base/detailed-page-title/detailed-page-title.js

@@ -4,18 +4,16 @@ import { Stack as r } from "../stack/stack.js";
 import { DetailedPageTitleCopyButton as j } from "../../detailed-page-title/detailed-page-title-copy-button.js";
 import { DetailedPageTitleExplorerDropdown as x } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
 import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
-import "react";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as m } from "../../../utils/cn.js";
-import "sonner";
 import "luxon";
 import "../../../utils/z-index.js";
 import { DetailedPageTitleTest as s } from "./constants.js";
-function J({
+function G({
   title: c,
-  browserTitle: p,
+  browserTitle: d,
   token: n,
-  icon: d,
+  icon: p,
   tokenIconSize: u = 32,
   disabled: g = !1,
   toCopy: i,
@@ -36,7 +34,7 @@ function J({
       ),
       children: /* @__PURE__ */ t(y, { size: u, token: n })
     }
-  ) : d, P = o != null || a != null || i != null || e != null && e.length > 0 ? /* @__PURE__ */ l(
+  ) : p, P = o != null || a != null || i != null || e != null && e.length > 0 ? /* @__PURE__ */ l(
     r,
     {
       direction: "row",
@@ -76,7 +74,7 @@ function J({
             children: [
               /* @__PURE__ */ l(r, { direction: "row", align: "center", gap: "sm", wrap: !0, className: "min-w-0", children: [
                 D,
-                /* @__PURE__ */ t(N, { title: c, browserTitle: p }),
+                /* @__PURE__ */ t(N, { title: c, browserTitle: d }),
                 f
               ] }),
               P
@@ -89,6 +87,6 @@ function J({
   );
 }
 export {
-  J as DetailedPageTitle,
+  G as DetailedPageTitle,
   s as DetailedPageTitleTest
 };

package/dist/esm/components/base/details-view/detail-aside/detail-aside-scope.js

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { createContext as l, useContext as a, useCallback as s, useRef as A, useMemo as f } from "react";
+import { createContext as l, useRef as A, useCallback as s, useMemo as f, useContext as a } from "react";
 import { defaultQuerySelectorAnchor as d } from "./sticky-controller.js";
 const i = l(null);
 function g({

package/dist/esm/components/base/details-view/detail-aside/detail-aside-screen-layout.js

@@ -1,41 +1,39 @@
 import { jsx as i } from "react/jsx-runtime";
 import { MainAsideLayout as n } from "../../../layout/main-aside-layout/main-aside-layout.js";
-import "react";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as o } from "../../../../utils/cn.js";
-import "sonner";
+import { cn as e } from "../../../../utils/cn.js";
 import "luxon";
 import "../../../../utils/z-index.js";
 import { DETAIL_MAIN_ASIDE_CLASS_NAME as d, DETAIL_MAIN_ASIDE_LAYOUT_CLASS_NAME as c } from "./constants.js";
 import { DetailAsideScope as _ } from "./detail-aside-scope.js";
 import { DetailAsideWrapper as f } from "./detail-aside-wrapper.js";
-function h({
-  children: e,
+function C({
+  children: o,
   aside: r,
   mainRef: t,
-  asidePosition: m,
-  centeredMain: a,
+  asidePosition: a,
+  centeredMain: m,
   className: A,
-  asideClassName: p,
-  mainClassName: s
+  asideClassName: s,
+  mainClassName: l
 }) {
-  const l = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
+  const p = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
   return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
     n,
     {
-      className: o(c, A),
-      asideClassName: o(d, p),
-      mainClassName: s,
+      className: e(c, A),
+      asideClassName: e(d, s),
+      mainClassName: l,
       mainRef: t,
-      aside: l,
-      asidePosition: m,
-      centeredMain: a,
+      aside: p,
+      asidePosition: a,
+      centeredMain: m,
       variant: "detail",
       stickyAside: !1,
-      children: e
+      children: o
     }
   ) });
 }
 export {
-  h as DetailAsideScreenLayout
+  C as DetailAsideScreenLayout
 };

package/dist/esm/components/base/details-view/index.js

@@ -1,12 +1,14 @@
-import { AsideAlignAnchor as t } from "./detail-aside/detail-aside-scope.js";
-import { DetailAsideScreenLayout as o } from "./detail-aside/detail-aside-screen-layout.js";
-import { DetailsView as s, DetailsViewLeftPane as l, DetailsViewManagePane as n } from "./details-view.js";
-import { DetailsViewTest as D } from "./constants.js";
+import { AsideAlignAnchor as t, DetailAsideScope as a, useDetailAsideAnchorGetter as o } from "./detail-aside/detail-aside-scope.js";
+import { DetailAsideScreenLayout as s } from "./detail-aside/detail-aside-screen-layout.js";
+import { DetailsView as n, DetailsViewLeftPane as A, DetailsViewManagePane as D } from "./details-view.js";
+import { DetailsViewTest as p } from "./constants.js";
 export {
   t as AsideAlignAnchor,
-  o as DetailAsideScreenLayout,
-  s as DetailsView,
-  l as DetailsViewLeftPane,
-  n as DetailsViewManagePane,
-  D as DetailsViewTest
+  a as DetailAsideScope,
+  s as DetailAsideScreenLayout,
+  n as DetailsView,
+  A as DetailsViewLeftPane,
+  D as DetailsViewManagePane,
+  p as DetailsViewTest,
+  o as useDetailAsideAnchorGetter
 };

package/dist/esm/components/base/health-factor-block/health-factor-block.js

@@ -1,72 +1,67 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useTitleText as x } from "../text/use-title-text.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useTitleText as g } from "../text/use-title-text.js";
 import { FadeoutLoading as c } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthFactor as p } from "../../health-factor/health-factor.js";
-import { FormattedMessageTyped as u } from "../../typed-intl/index.js";
-import { VerticalIndicator as B } from "../../vertical-indicator/vertical-indicator.js";
-import { APPROXIMATE_SYMBOL as v } from "../../../utils/format.js";
+import { HealthFactor as m } from "../../health-factor/health-factor.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as x } from "../../vertical-indicator/vertical-indicator.js";
 import { HealthFactorBlockTest as t } from "./constants.js";
-function j({
-  healthFactor: o,
-  healthFactorTo: l,
-  debt: i,
-  debtTo: f,
+function N({
+  healthFactor: a,
+  healthFactorTo: i,
+  debt: l,
+  debtTo: u,
   approximate: r,
-  zone: s,
-  isLoading: n,
+  zone: n,
+  isLoading: s,
   title: d,
-  tip: h,
-  testId: T
+  tip: v,
+  testId: f
 }) {
-  const g = x(), a = l !== void 0;
+  const h = g(), o = i !== void 0;
   return /* @__PURE__ */ e(
-    B,
+    x,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": T ?? t.root,
-      label: d !== void 0 ? g(d) : /* @__PURE__ */ e(u, { messageId: "components.healthFactorBlock.label" }),
-      tip: h ?? /* @__PURE__ */ e(u, { messageId: "components.healthFactorBlock.tip" }),
-      value: /* @__PURE__ */ e(c, { loading: n, children: o === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ m(
+      "data-testid": f ?? t.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.label" }),
+      tip: v ?? /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.tip" }),
+      value: /* @__PURE__ */ e(c, { loading: s, children: a === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ e(
         "span",
         {
           className: "inline-flex items-center",
           "data-testid": t.value,
-          children: [
-            r && !a ? /* @__PURE__ */ e("span", { className: "mr-0.5", children: v }) : null,
-            /* @__PURE__ */ e(
-              p,
-              {
-                value: o,
-                debt: i,
-                zone: a ? void 0 : s
-              }
-            )
-          ]
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: a,
+              debt: l,
+              zone: o ? void 0 : n,
+              approximate: r && !o
+            }
+          )
         }
       ) }),
-      valueTo: a ? /* @__PURE__ */ e(c, { loading: n, children: /* @__PURE__ */ m(
+      valueTo: o ? /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e(
         "span",
         {
           className: "inline-flex items-center",
           "data-testid": t.valueTo,
-          children: [
-            r ? /* @__PURE__ */ e("span", { className: "mr-0.5", children: v }) : null,
-            /* @__PURE__ */ e(
-              p,
-              {
-                value: l,
-                debt: f ?? i,
-                zone: s
-              }
-            )
-          ]
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: i,
+              debt: u ?? l,
+              zone: n,
+              approximate: r
+            }
+          )
         }
       ) }) : void 0
     }
   );
 }
 export {
-  j as HealthFactorBlock,
+  N as HealthFactorBlock,
   t as HealthFactorBlockTest
 };