@gearbox-protocol/ui-kit 4.0.0-next.42 → 4.0.0-next.44

package/dist/esm/components/base-table/base-table-line.js

@@ -1,30 +1,38 @@
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import "react-intl";
-import "../buttons/button/button.js";
+import { NoValue as G } from "../base/values/no-value.js";
 import "react";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as o } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
+import "../points-icon/points-icon.js";
+import "viem";
+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 "../buttons/button/button.js";
 import { GridTableRow as h, GridTableCell as u } from "../table/grid-table.js";
 import "../skeleton/skeleton.js";
 import "../table/table.js";
-import { Typography as G } from "../typography/typography.js";
-import { useIsMedium as k, useIsMobile as z } from "../../hooks/use-media-query.js";
-import { BaseTableLineTest as D } from "./constants.js";
-const O = "min-w-0 max-w-full overflow-hidden", P = o(
+import { Typography as k } from "../typography/typography.js";
+import { useIsMedium as z, useIsMobile as D } from "../../hooks/use-media-query.js";
+import { BaseTableLineTest as O } from "./constants.js";
+const P = "min-w-0 max-w-full overflow-hidden", S = s(
   "min-w-0 max-w-full self-stretch items-center overflow-x-clip py-2 pl-4",
   "[&_span.truncate]:whitespace-normal",
   "[&_div.overflow-hidden]:overflow-visible"
-), S = "min-w-0 max-w-full overflow-visible whitespace-nowrap";
+), F = "min-w-0 max-w-full overflow-visible whitespace-nowrap";
 function v({
   label: t,
   children: r
 }) {
   return /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col gap-1", children: [
     /* @__PURE__ */ i(
-      G,
+      k,
       {
         as: "span",
         variant: "caption",
@@ -36,62 +44,62 @@ function v({
     /* @__PURE__ */ i("div", { className: "min-w-0 text-sm", children: r })
   ] });
 }
-function ie({
+function pe({
   columns: t,
   cells: r,
-  last: x,
-  href: b,
+  last: b,
+  href: x,
   disabled: l = !1,
   disabledStyle: g = !1,
   accentClassName: C,
-  onRowClick: n,
+  onRowClick: m,
   "data-testid": N,
   minHeightClassName: L = "min-h-[66px]"
 }) {
-  const _ = k(), y = z(), m = t.filter((e) => e.mobile === "title"), d = m.length > 0 ? m : t.slice(0, 1), T = t.filter((e) => e.mobile === "badge"), B = new Set(d.map((e) => e.id)), p = t.filter(
+  const _ = z(), T = D(), n = t.filter((e) => e.mobile === "title"), p = n.length > 0 ? n : t.slice(0, 1), y = t.filter((e) => e.mobile === "badge"), B = new Set(p.map((e) => e.id)), d = t.filter(
     (e) => !B.has(e.id) && (e.mobile ?? "stat") === "stat"
-  ), j = t.filter((e) => e.mobile === "block"), c = {
-    last: x,
-    href: b,
+  ), j = t.filter((e) => e.mobile === "block"), f = {
+    last: b,
+    href: x,
     noHover: l,
     "data-disabled": l,
-    "data-testid": N ?? D.root,
-    onRowClick: l ? void 0 : n
-  }, f = o(
-    n && !l && "cursor-pointer",
+    "data-testid": N ?? O.root,
+    onRowClick: l ? void 0 : m
+  }, c = s(
+    m && !l && "cursor-pointer",
     g && "text-secondary-foreground!",
     l && "cursor-not-allowed",
     C
   );
-  return y ? /* @__PURE__ */ i(h, { ...c, className: f, children: /* @__PURE__ */ a(
+  return T ? /* @__PURE__ */ i(h, { ...f, className: c, children: /* @__PURE__ */ a(
     u,
     {
       span: "full",
       size: "sm",
-      className: o(
+      className: s(
         "flex min-w-0 max-w-full flex-col items-start gap-3 overflow-x-clip py-3",
         "[&_span.truncate]:whitespace-normal [&_div.overflow-hidden]:overflow-visible"
       ),
       children: [
         /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-          d.map((e) => /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: r[e.id] }, e.id)),
-          T.map((e) => /* @__PURE__ */ i("div", { children: r[e.id] }, e.id))
+          p.map((e) => /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: r[e.id] }, e.id)),
+          y.map((e) => /* @__PURE__ */ i("div", { children: r[e.id] }, e.id))
         ] }),
-        p.length > 0 && /* @__PURE__ */ i("div", { className: "grid w-full min-w-0 grid-cols-3 gap-x-2 gap-y-3 [&_*]:text-left [&_*]:justify-start", children: p.map((e) => /* @__PURE__ */ i(v, { label: e.title, children: r[e.id] }, e.id)) }),
+        d.length > 0 && /* @__PURE__ */ i("div", { className: "grid w-full min-w-0 grid-cols-3 gap-x-2 gap-y-3 [&_*]:text-left [&_*]:justify-start", children: d.map((e) => /* @__PURE__ */ i(v, { label: e.title, children: r[e.id] }, e.id)) }),
         j.map((e) => {
-          const s = r[e.id];
-          return s == null || s === !1 ? null : /* @__PURE__ */ i(v, { label: e.title, children: s }, e.id);
+          const o = r[e.id];
+          return o == null || o === !1 ? null : /* @__PURE__ */ i(v, { label: e.title, children: o }, e.id);
         })
       ]
     }
   ) }) : /* @__PURE__ */ i(
     h,
     {
-      ...c,
-      className: o(L, f),
-      children: t.map((e, s) => {
-        const I = e.justify ?? "start", M = s === 0, w = s === t.length - 1, A = e.mobile === "badge", E = o(
-          M ? P : A ? S : O,
+      ...f,
+      className: s(L, c),
+      children: t.map((e, o) => {
+        const I = e.justify ?? "start", M = o === 0, w = o === t.length - 1, A = e.mobile === "badge", E = s(
+          M ? S : A ? F : P,
           w && "pr-4",
           e.cellClassName
         );
@@ -102,7 +110,7 @@ function ie({
             textAlign: I === "end" ? "right" : "left",
             gapBefore: w ? _ ? "sm" : "md" : void 0,
             className: E,
-            children: r[e.id] ?? /* @__PURE__ */ i("span", { className: "text-secondary-foreground", children: "—" })
+            children: r[e.id] ?? /* @__PURE__ */ i(G, {})
           },
           e.id
         );
@@ -111,6 +119,6 @@ function ie({
   );
 }
 export {
-  ie as BaseTableLine,
-  D as BaseTableLineTest
+  pe as BaseTableLine,
+  O as BaseTableLineTest
 };

package/dist/esm/components/checkbox/checkbox-labeled.js

@@ -35,6 +35,7 @@ import "../token-symbol/token-symbol.js";
 import "../simple-accordion/simple-accordion.js";
 import "../tip-card/tip-card.js";
 import "../typography/typography.js";
+import "../help-tip/help-tip.js";
 import "../points-icon/points-icon.js";
 import "viem";
 import "../vertical-indicator/vertical-indicator.js";
@@ -81,7 +82,6 @@ import "../link/link.js";
 import "../rounded-image/rounded-image.js";
 import "../network-icon/network-indicator.js";
 import "../base-link/base-link.js";
-import "../help-tip/help-tip.js";
 import "../base-table/base-table-line.js";
 import "../navigation-context/navigation-context.js";
 import "../cards/card/card.js";

package/dist/esm/components/client-adapters/styled-button/styled-button.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as n from "react";
-import { Button as s } from "../../buttons/button/button.js";
+import { Button as p } from "../../buttons/button/button.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as p } from "../../../utils/cn.js";
+import { cn as s } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../../utils/z-index.js";
@@ -13,20 +13,14 @@ const c = {
   white: "white",
   success: "success"
 }, l = n.forwardRef(
-  ({
-    $size: t = "lg",
-    $width: r = "compact",
-    $color: o = "primary",
-    className: e,
-    ...i
-  }, m) => /* @__PURE__ */ a(
-    s,
+  ({ size: t = "lg", width: r = "compact", color: o = "primary", className: e, ...i }, m) => /* @__PURE__ */ a(
+    p,
     {
       ref: m,
       size: t,
       width: r,
       variant: c[o],
-      className: p("inline-block whitespace-normal", e),
+      className: s("inline-block whitespace-normal", e),
       ...i
     }
   )

package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js

@@ -35,6 +35,7 @@ import "../../token-symbol/token-symbol.js";
 import "../../simple-accordion/simple-accordion.js";
 import "../../tip-card/tip-card.js";
 import "../../typography/typography.js";
+import "../../help-tip/help-tip.js";
 import "../../points-icon/points-icon.js";
 import "viem";
 import "../../vertical-indicator/vertical-indicator.js";
@@ -82,7 +83,6 @@ import "../../link/link.js";
 import { RoundedImage as d } from "../../rounded-image/rounded-image.js";
 import "../../network-icon/network-indicator.js";
 import "../../base-link/base-link.js";
-import "../../help-tip/help-tip.js";
 import "../../base-table/base-table-line.js";
 import "../../navigation-context/navigation-context.js";
 import "../../cards/card/card.js";

package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js

@@ -1,4 +1,5 @@
-import { jsx as e, jsxs as a, Fragment as y } from "react/jsx-runtime";
+import { jsx as e, jsxs as m, Fragment as y } from "react/jsx-runtime";
+import { NoValue as b } from "../../base/values/no-value.js";
 import "react";
 import "@gearbox-protocol/sdk/onchain";
 import "clsx";
@@ -8,84 +9,84 @@ import { formatMoney as C } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../points-icon/points-icon.js";
-import { UtilizationValue as N } from "../../base/values/scalars.js";
+import { UtilizationValue as S } from "../../base/values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
-import { FormattedMessageTyped as m } from "../../typed-intl/index.js";
-import { AllocationWheel as S } from "../../collateral-allocation-tooltip/allocation-wheel.js";
+import { FormattedMessageTyped as a } from "../../typed-intl/index.js";
+import { AllocationWheel as k } from "../../collateral-allocation-tooltip/allocation-wheel.js";
 import "@fortawesome/free-solid-svg-icons";
 import "../../icons/fa-icon.js";
 import "../../token-icon/token-icon.js";
 import "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
-import { NameCell as k } from "../../name-cell/name-cell.js";
-import { ShortString as w } from "../../short-string/short-string.js";
+import { NameCell as w } from "../../name-cell/name-cell.js";
+import { ShortString as L } from "../../short-string/short-string.js";
 import "react-intl";
 import "../../buttons/button/button.js";
-import { GridTableRow as L, GridTableCell as o } from "../../table/grid-table.js";
+import { GridTableRow as U, GridTableCell as l } from "../../table/grid-table.js";
 import "../../skeleton/skeleton.js";
 import "../../table/table.js";
-import { TableLineSm as U, TableCellSm as n } from "../../table/table-sm.js";
-import { TokenSymbol as I } from "../../token-symbol/token-symbol.js";
-import { TokenTemplate as b } from "../../token-template/token-template.js";
-import { VerticalIndicator as P } from "../../vertical-indicator/vertical-indicator.js";
+import { TableLineSm as I, TableCellSm as n } from "../../table/table-sm.js";
+import { TokenSymbol as P } from "../../token-symbol/token-symbol.js";
+import { TokenTemplate as x } from "../../token-template/token-template.js";
+import { VerticalIndicator as j } from "../../vertical-indicator/vertical-indicator.js";
 import { PoolAssetsTableTest as p } from "./constants.js";
-function j(i, t) {
+function V(i, t) {
   if (t !== 0n)
     return Number(i * 10000n / t);
 }
 function B(i, t) {
   return t <= 0n || i <= 0n ? 0 : Number(i * 10000n / t) / 1e4;
 }
-function he({
+function fe({
   asset: i,
   underlyingToken: t,
-  last: x,
+  last: T,
   isCompact: c,
-  totalUsed: T,
-  colorIndex: z,
+  totalUsed: z,
+  colorIndex: A,
   explorerUrl: d
 }) {
-  const { token: r, limit: s, used: l } = i, A = c ? 40 : 21, h = B(l.value, T), u = () => /* @__PURE__ */ e(
-    k,
+  const { token: r, limit: s, used: o } = i, N = c ? 40 : 21, u = B(o.value, z), h = () => /* @__PURE__ */ e(
+    w,
     {
-      leading: /* @__PURE__ */ e(I, { size: 32, token: r }),
-      title: /* @__PURE__ */ e(w, { maxLength: A, children: r.symbol })
+      leading: /* @__PURE__ */ e(P, { size: 32, token: r }),
+      title: /* @__PURE__ */ e(L, { maxLength: N, children: r.symbol })
     }
-  ), f = () => /* @__PURE__ */ a(
+  ), f = () => /* @__PURE__ */ m(
     "div",
     {
       className: "flex items-center justify-end gap-2",
       "data-testid": p.exposureCell,
       children: [
         /* @__PURE__ */ e(
-          S,
+          k,
           {
-            share: h,
-            colorIndex: z,
-            idle: h === 0
+            share: u,
+            colorIndex: A,
+            idle: u === 0
           }
         ),
         /* @__PURE__ */ e(
-          P,
+          j,
           {
             value: /* @__PURE__ */ e(
-              b,
+              x,
               {
                 decimalPartLength: 2,
                 precision: 2,
                 showSymbol: !1,
                 token: t,
-                value: l.value
+                value: o.value
               }
             ),
-            valueDescription: l.valueUsd === null ? "—" : C(l.valueUsd)
+            valueDescription: o.valueUsd === null ? /* @__PURE__ */ e(b, {}) : C(o.valueUsd)
           }
         )
       ]
     }
-  ), g = () => /* @__PURE__ */ e("div", { "data-testid": p.capCell, children: s.value === 0n ? /* @__PURE__ */ e("span", { children: "—" }) : /* @__PURE__ */ e(
-    b,
+  ), g = () => /* @__PURE__ */ e("div", { "data-testid": p.capCell, children: s.value === 0n ? /* @__PURE__ */ e(b, {}) : /* @__PURE__ */ e(
+    x,
     {
       decimalPartLength: 2,
       precision: 2,
@@ -93,55 +94,55 @@ function he({
       token: t,
       value: s.value
     }
-  ) }), v = () => /* @__PURE__ */ e("div", { "data-testid": p.capUtilizationCell, children: /* @__PURE__ */ e(N, { data: j(l.value, s.value) }) });
+  ) }), v = () => /* @__PURE__ */ e("div", { "data-testid": p.capUtilizationCell, children: /* @__PURE__ */ e(S, { data: V(o.value, s.value) }) });
   return /* @__PURE__ */ e(
-    L,
+    U,
     {
-      last: x,
+      last: T,
       height: "auto",
       href: d ? `${d}/address/${r.address}` : void 0,
       target: "_blank",
       style: { minHeight: "75px" },
-      children: c ? /* @__PURE__ */ e(o, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ a(
-        U,
+      children: c ? /* @__PURE__ */ e(l, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ m(
+        I,
         {
           className: "w-full",
           columns: 3,
           columnsXs: 3,
-          title: u(),
+          title: h(),
           children: [
             /* @__PURE__ */ e(
               n,
               {
-                title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.exposure" }),
+                title: /* @__PURE__ */ e(a, { messageId: "components.poolAssetsTable.exposure" }),
                 children: f()
               }
             ),
             /* @__PURE__ */ e(
               n,
               {
-                title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.cap" }),
+                title: /* @__PURE__ */ e(a, { messageId: "components.poolAssetsTable.cap" }),
                 children: g()
               }
             ),
             /* @__PURE__ */ e(
               n,
               {
-                title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.capUtilization" }),
+                title: /* @__PURE__ */ e(a, { messageId: "components.poolAssetsTable.capUtilization" }),
                 children: v()
               }
             )
           ]
         }
-      ) }) : /* @__PURE__ */ a(y, { children: [
-        /* @__PURE__ */ e(o, { className: "pl-4", size: "sm", textAlign: "left", children: u() }),
-        /* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: f() }),
-        /* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: g() }),
-        /* @__PURE__ */ e(o, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
+      ) }) : /* @__PURE__ */ m(y, { children: [
+        /* @__PURE__ */ e(l, { className: "pl-4", size: "sm", textAlign: "left", children: h() }),
+        /* @__PURE__ */ e(l, { size: "sm", textAlign: "right", children: f() }),
+        /* @__PURE__ */ e(l, { size: "sm", textAlign: "right", children: g() }),
+        /* @__PURE__ */ e(l, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
       ] })
     }
   );
 }
 export {
-  he as PoolAssetsTableRow
+  fe as PoolAssetsTableRow
 };

package/dist/esm/components/compound-apy/compound-apy.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as x } from "react";
-import { YieldBreakdownTooltip as v } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { useId as v } from "react";
+import { NoValue as x } from "../base/values/no-value.js";
 import { totalApyOf as C, positiveTokenRewardsOf as I, pointProgramsOf as k } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk/onchain";
 import { bpsToPercent as P } from "../../utils/bps.js";
@@ -9,10 +9,18 @@ import "sonner";
 import { formatCompactPercent as O } from "../../utils/format-money.js";
 import "luxon";
 import "../../utils/z-index.js";
+import "../points-icon/points-icon.js";
+import "viem";
+import "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "../badge/badge.js";
+import "../badge/chip.js";
+import "react-intl";
+import { YieldBreakdownTooltip as F } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
 const l = 14;
-function F() {
-  const e = `additional-incentives-${x().replace(/:/g, "")}`;
-  return /* @__PURE__ */ n(
+function N() {
+  const t = `additional-incentives-${v().replace(/:/g, "")}`;
+  return /* @__PURE__ */ o(
     "svg",
     {
       width: l,
@@ -24,15 +32,15 @@ function F() {
       role: "img",
       "aria-label": "Incentives",
       children: [
-        /* @__PURE__ */ t("title", { children: "Incentives" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r("title", { children: "Incentives" }),
+        /* @__PURE__ */ r(
           "path",
           {
             d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z",
-            fill: `url(#${e})`
+            fill: `url(#${t})`
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "path",
           {
             d: "M7 3.75V10.25M3.75 7H10.25",
@@ -41,18 +49,18 @@ function F() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n(
+        /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ o(
           "linearGradient",
           {
-            id: e,
+            id: t,
             x1: "0",
             y1: "7",
             x2: "14",
             y2: "7",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ t("stop", { stopColor: "#FF2D8D" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#FF6C20" })
+              /* @__PURE__ */ r("stop", { stopColor: "#FF2D8D" }),
+              /* @__PURE__ */ r("stop", { offset: "1", stopColor: "#FF6C20" })
             ]
           }
         ) })
@@ -60,43 +68,43 @@ function F() {
     }
   );
 }
-function c(e) {
-  return e == null ? !1 : I(e).length > 0 || k(e).length > 0;
+function p(t) {
+  return t == null ? !1 : I(t).length > 0 || k(t).length > 0;
 }
-function U({
-  apy: e,
-  maxLeverage: p,
-  collateralApy: r,
-  borrowApy: d,
-  quotaRate: a,
-  decimals: m = 2,
+function W({
+  apy: t,
+  maxLeverage: m,
+  collateralApy: e,
+  borrowApy: c,
+  quotaRate: d,
+  decimals: a = 2,
   tooltip: f = !0,
   period: h,
-  className: o
+  className: i
 }) {
-  if (!e)
-    return /* @__PURE__ */ t("span", { className: "text-secondary-foreground", children: "—" });
-  const i = C(e), u = c(e) || c(r), g = f && i >= 1, s = () => {
-    const w = O(P(i), m);
-    return /* @__PURE__ */ n("div", { className: A("inline-flex items-center gap-1.5", o), children: [
-      /* @__PURE__ */ t("span", { className: "inline-flex items-center", children: w }),
-      u ? /* @__PURE__ */ t(F, {}) : null
+  if (!t)
+    return /* @__PURE__ */ r(x, {});
+  const n = C(t), u = p(t) || p(e), g = f && n >= 1, s = () => {
+    const w = O(P(n), a);
+    return /* @__PURE__ */ o("div", { className: A("inline-flex items-center gap-1.5", i), children: [
+      /* @__PURE__ */ r("span", { className: "inline-flex items-center", children: w }),
+      u ? /* @__PURE__ */ r(N, {}) : null
     ] });
   };
-  return g ? /* @__PURE__ */ t(
-    v,
+  return g ? /* @__PURE__ */ r(
+    F,
     {
-      supplyApy: e,
-      maxLeverage: p,
-      collateralApy: r,
-      borrowApy: d,
-      quotaRate: a,
+      supplyApy: t,
+      maxLeverage: m,
+      collateralApy: e,
+      borrowApy: c,
+      quotaRate: d,
       period: h,
-      className: o,
+      className: i,
       children: s()
     }
   ) : s();
 }
 export {
-  U as CompoundAPY
+  W as CompoundAPY
 };