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

package/dist/esm/components/base/info-list/info-list.js

@@ -1,81 +1,80 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Stack as c } from "../stack/stack.js";
-import { useTitleText as n } from "../text/use-title-text.js";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { Stack as a } from "../stack/stack.js";
+import { useTitleText as l } from "../text/use-title-text.js";
+import { ValueTest as f } from "../values/constants.js";
+import "../../help-tip/help-tip.js";
 import "react";
-import { pointProgramsOf as f } from "../../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk";
+import "react-intl";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-import { PointsValue as l } from "../values/points-value.js";
-import "../../points-icon/points-icon.js";
+import "viem";
+import { PointsIcon as c } from "../../points-icon/points-icon.js";
 import "../../token-icon/token-icon.js";
+import { pointProgramsOf as d } from "../../../utils/internal/apy-breakdown.js";
 import "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
-import "react-intl";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
-import { Typography as u } from "../../typography/typography.js";
-import { VerticalIndicator as d } from "../../vertical-indicator/vertical-indicator.js";
-import { InfoListTest as i } from "./constants.js";
-function F({
+import { VerticalIndicator as u } from "../../vertical-indicator/vertical-indicator.js";
+import { InfoListTest as r } from "./constants.js";
+function D({
   children: t
 }) {
-  return /* @__PURE__ */ r(c, { gap: "sm", "data-testid": i.root, children: t });
+  return /* @__PURE__ */ o(a, { gap: "sm", "data-testid": r.root, children: t });
 }
-function g({
+function x({
   title: t,
-  value: o,
-  tip: e,
-  valueDescription: m,
-  valueTo: p,
-  testId: s
+  size: n = "sm",
+  align: e = "start",
+  "data-testid": i = r.line,
+  ...m
 }) {
-  const a = n();
-  return /* @__PURE__ */ r(
-    d,
+  const s = l();
+  return /* @__PURE__ */ o(
+    u,
     {
-      label: a(t),
-      tip: e,
-      value: o,
-      valueTo: p,
-      valueDescription: m,
-      size: "sm",
-      align: "center",
-      "data-testid": s ?? i.line
+      label: s(t),
+      size: n,
+      align: e,
+      "data-testid": i,
+      ...m
     }
   );
 }
-function G({
-  title: t
+function E({
+  data: t,
+  title: n = "components.yieldBreakdown.points"
 }) {
-  const o = n();
-  return /* @__PURE__ */ r(
-    u,
+  const e = t ? d(t) : [];
+  return e.length === 0 ? null : /* @__PURE__ */ o(
+    x,
     {
-      as: "span",
-      color: "secondary",
-      weight: "bold",
-      variant: "caption",
-      className: "tracking-[0.55px] uppercase",
-      "data-testid": i.sectionTitle,
-      children: o(t)
+      title: n,
+      value: /* @__PURE__ */ o(
+        "span",
+        {
+          className: "inline-flex flex-wrap items-center gap-1.5",
+          "data-testid": f.points,
+          children: e.map((i) => /* @__PURE__ */ p("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ o(
+              c,
+              {
+                reward: { name: i.name, type: i.id },
+                size: 16
+              }
+            ),
+            /* @__PURE__ */ o("span", { children: i.name })
+          ] }, i.id))
+        }
+      )
     }
   );
 }
-function H({
-  data: t,
-  title: o = "components.yieldBreakdown.points"
-}) {
-  return !t || f(t).length === 0 ? null : /* @__PURE__ */ r(g, { title: o, value: /* @__PURE__ */ r(l, { data: t }) });
-}
 export {
-  g as InfoLine,
-  F as InfoList,
-  i as InfoListTest,
-  G as InfoSectionTitle,
-  H as PointsInfoLine
+  x as InfoLine,
+  D as InfoList,
+  r as InfoListTest,
+  E as PointsInfoLine
 };

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

@@ -1,9 +1,9 @@
-class t {
-  static root = "leverage-input-root";
-  static slider = "leverage-input-slider";
-  static value = "leverage-input-value";
-  static reset = "leverage-input-reset";
-}
+const e = {
+  root: "leverage-input-root",
+  slider: "leverage-input-slider",
+  value: "leverage-input-value",
+  reset: "leverage-input-reset"
+};
 export {
-  t as LeverageInputTest
+  e as LeverageInputTest
 };

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

@@ -1,72 +1,86 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { useState as I } from "react";
-import { Stack as x } from "../stack/stack.js";
-import { useTitleText as y } from "../text/use-title-text.js";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Stack as I } from "../stack/stack.js";
+import { useTitleText as V } from "../text/use-title-text.js";
 import { EditInput as j } from "../../edit-input/edit-input.js";
 import { Slider as F } from "../../slider/slider.js";
-import "../../slider/slider-context.js";
 import { TextButton as O } from "../../text-button/text-button.js";
 import { SimpleTooltip as R } from "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
-import { useIntlTyped as B, FormattedMessageTyped as T } from "../../typed-intl/index.js";
-import { WithTitle as D } from "../../with-title/with-title.js";
-import { formatLeverage as b } from "../../../utils/format-leverage.js";
-import { LeverageInputTest as i } from "./constants.js";
-const o = 100, P = 10;
-function ee({
-  value: n,
-  onChange: s,
-  max: r,
-  min: l = 1,
+import { useIntlTyped as _, FormattedMessageTyped as b } from "../../typed-intl/index.js";
+import { cn as A } from "../../../utils/cn.js";
+import { formatLeverageExact as T } from "../../../utils/format-leverage.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../../utils/z-index.js";
+import { LeverageInputTest as l } from "./constants.js";
+const n = 100, B = 10, D = 10, P = {
+  sm: "text-[14px] mb-[14px]",
+  default: "text-body mb-[18px]",
+  md: "text-lg mb-[22px]",
+  lg: "text-[21px] mb-[22px]"
+};
+function z({
+  title: r,
+  children: a,
+  size: o = "default"
+}) {
+  return /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ t("div", { className: A("font-medium text-foreground", P[o]), children: r }),
+    a !== void 0 && /* @__PURE__ */ t("div", { children: a })
+  ] });
+}
+function re({
+  value: r,
+  onChange: a,
+  max: o,
+  min: m = 1,
   title: c,
   hint: d,
-  reset: a,
-  colorIntervals: w,
+  reset: i,
+  colorIntervals: E,
   colorIntervalLabel: N,
   size: S = "sm"
 }) {
-  const E = B(), C = y(), p = w ?? [
-    { start: l, end: r, color: "additionalSuccess" }
-  ], L = N ?? (p.length > 0 ? E.formatMessage({
+  const w = _(), L = V(), p = E ?? [], C = N ?? (p.length > 0 ? w.formatMessage({
     messageId: "components.leverageInput.available"
-  }) : void 0), [M, u] = I(void 0), [f, g] = I(""), h = M ?? n, v = (e) => {
-    s(_(e, l, r)), u(void 0);
+  }) : void 0), [M, u] = h(void 0), [f, x] = h(""), g = M ?? r, v = (e) => {
+    a(G(e, m, o)), u(void 0);
   }, k = () => {
     const e = Number.parseFloat(f.replace(",", "."));
     Number.isFinite(e) && v(e);
-  }, V = p.map((e) => ({
+  }, y = p.map((e) => ({
     ...e,
-    start: e.start * o,
-    end: e.end * o
+    start: e.start * n,
+    end: e.end * n
   }));
-  return /* @__PURE__ */ t("div", { "data-testid": i.root, children: /* @__PURE__ */ t(
-    D,
+  return /* @__PURE__ */ t("div", { "data-testid": l.root, children: /* @__PURE__ */ t(
+    z,
     {
       size: S,
-      title: /* @__PURE__ */ m(x, { direction: "row", align: "center", justify: "between", gap: "sm", children: [
-        /* @__PURE__ */ m("span", { className: "font-normal", children: [
-          c !== void 0 ? C(c) : /* @__PURE__ */ t(T, { messageId: "components.leverageInput.label" }),
+      title: /* @__PURE__ */ s(I, { direction: "row", align: "center", justify: "between", gap: "sm", children: [
+        /* @__PURE__ */ s("span", { className: "font-normal", children: [
+          c !== void 0 ? L(c) : /* @__PURE__ */ t(b, { messageId: "components.leverageInput.label" }),
           d ? /* @__PURE__ */ t("span", { className: "text-muted-foreground ml-1", children: d }) : null
         ] }),
-        /* @__PURE__ */ m(x, { direction: "row", align: "center", gap: "sm", children: [
+        /* @__PURE__ */ s(I, { direction: "row", align: "center", gap: "sm", children: [
           /* @__PURE__ */ t("div", { className: "flex w-[90px] flex-row flex-nowrap items-center", children: /* @__PURE__ */ t(
             j,
             {
               value: f,
               placeholder: "0",
-              label: `${b(h)}x`,
+              label: `${T(g)}x`,
               textButtonProps: {
                 className: "inline-flex items-center whitespace-nowrap"
               },
-              "data-testid": i.value,
+              "data-testid": l.value,
               onEditModeChange: (e) => {
-                e && g(b(n));
+                e && x(T(r));
               },
-              onChange: (e) => g(e.target.value),
+              onChange: (e) => x(e.target.value),
               onSubmit: k
             }
           ) }),
-          a ? /* @__PURE__ */ t(
+          i ? /* @__PURE__ */ t(
             R,
             {
               placement: "top",
@@ -78,12 +92,12 @@ function ee({
                   buttonColor: "secondaryDashed",
                   size: "sm",
                   className: "max-w-full truncate",
-                  onClick: a.onClick,
-                  "data-testid": a.testId ?? i.reset,
-                  children: /* @__PURE__ */ t(T, { messageId: "components.leverageInput.reset" })
+                  onClick: i.onClick,
+                  "data-testid": i.testId ?? l.reset,
+                  children: /* @__PURE__ */ t(b, { messageId: "components.leverageInput.reset" })
                 }
               ),
-              children: a.tooltip
+              children: i.tooltip
             }
           ) : null
         ] })
@@ -91,25 +105,25 @@ function ee({
       children: /* @__PURE__ */ t(
         F,
         {
-          from: l * o,
-          to: r * o,
-          precision: o,
-          value: h * o,
-          colorIntervals: V,
-          colorIntervalLabel: L,
-          markerStep: r > P ? 200 : 100,
-          "data-testid": i.slider,
-          onChangeValue: (e) => u(e / o),
-          onSubmitValue: (e) => v(e / o)
+          from: m * n,
+          to: o * n,
+          precision: B,
+          value: g * n,
+          colorIntervals: y,
+          colorIntervalLabel: C,
+          markerStep: o > D ? 200 : 100,
+          "data-testid": l.slider,
+          onChangeValue: (e) => u(e / n),
+          onSubmitValue: (e) => v(e / n)
         }
       )
     }
   ) });
 }
-function _(n, s, r) {
-  return Math.min(Math.max(n, s), r);
+function G(r, a, o) {
+  return Math.min(Math.max(r, a), o);
 }
 export {
-  ee as LeverageInput,
-  i as LeverageInputTest
+  re as LeverageInput,
+  l as LeverageInputTest
 };

package/dist/esm/components/base/leverage-preset-chips/leverage-preset-chips.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as m } from "react/jsx-runtime";
 import { SegmentedTabs as g } from "../segmented-tabs/segmented-tabs.js";
 import { FormattedMessageTyped as d } from "../../typed-intl/index.js";
-import { formatChipLeverage as l } from "../../../utils/leverage-presets.js";
+import { formatLeverage as l } from "../../../utils/format-leverage.js";
 import { LeveragePresetChipsTest as s } from "./constants.js";
 function u({
   options: e,

package/dist/esm/components/base/liquidation-params-table/constants.js

@@ -1,6 +1,6 @@
-class t {
-  static root = "liquidation-params-table-root";
-}
+const a = {
+  root: "liquidation-params-table-root"
+};
 export {
-  t as LiquidationParamsTableTest
+  a as LiquidationParamsTableTest
 };

package/dist/esm/components/base/liquidation-params-table/liquidation-params-table.js

@@ -1,26 +1,21 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react-intl";
 import "../../buttons/button/button.js";
-import "react";
-import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 import "../../table/grid-table.js";
-import "../../skeleton/skeleton.js";
-import { Table as d, TableHeader as c, TableRow as s, TableHead as m, TableBody as p, TableCell as r } from "../../table/table.js";
-import { FormattedMessageTyped as t } from "../../typed-intl/index.js";
+import { Table as d, TableHeader as c, TableRow as s, TableHead as m, TableBody as p, TableCell as a } from "../../table/table.js";
+import { FormattedMessageTyped as r } from "../../typed-intl/index.js";
 import { LiquidationParamsTableTest as u } from "./constants.js";
-function a(o) {
+function t(o) {
   return o / 100;
 }
-function z({
+function y({
   data: o
 }) {
-  const n = a(o.liquidationPremium), l = a(o.liquidationFee);
+  const n = t(o.liquidationPremium), l = t(o.liquidationFee);
   return /* @__PURE__ */ i(
     d,
     {
@@ -29,25 +24,25 @@ function z({
       "data-testid": u.root,
       children: [
         /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(s, { children: [
-          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.lt" }) }),
-          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.penalty" }) }),
-          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.premium" }) }),
-          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.fee" }) })
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, { messageId: "components.liquidationParamsTable.lt" }) }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, { messageId: "components.liquidationParamsTable.penalty" }) }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, { messageId: "components.liquidationParamsTable.premium" }) }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, { messageId: "components.liquidationParamsTable.fee" }) })
         ] }) }),
         /* @__PURE__ */ e(p, { children: /* @__PURE__ */ i(s, { children: [
-          /* @__PURE__ */ i(r, { className: "font-medium", children: [
-            a(o.liquidationThreshold).toFixed(2),
+          /* @__PURE__ */ i(a, { className: "font-medium", children: [
+            t(o.liquidationThreshold).toFixed(2),
             "%"
           ] }),
-          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+          /* @__PURE__ */ i(a, { className: "font-medium", children: [
             (n + l).toFixed(2),
             "%"
           ] }),
-          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+          /* @__PURE__ */ i(a, { className: "font-medium", children: [
             n.toFixed(2),
             "%"
           ] }),
-          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+          /* @__PURE__ */ i(a, { className: "font-medium", children: [
             l.toFixed(2),
             "%"
           ] })
@@ -57,6 +52,6 @@ function z({
   );
 }
 export {
-  z as LiquidationParamsTable,
+  y as LiquidationParamsTable,
   u as LiquidationParamsTableTest
 };

package/dist/esm/components/base/liquidation-price-block/constants.js

@@ -1,8 +1,8 @@
-class o {
-  static root = "liquidation-price-block-root";
-  static value = "liquidation-price-block-value";
-  static valueTo = "liquidation-price-block-value-to";
-}
+const i = {
+  root: "liquidation-price-block-root",
+  value: "liquidation-price-block-value",
+  valueTo: "liquidation-price-block-value-to"
+};
 export {
-  o as LiquidationPriceBlockTest
+  i as LiquidationPriceBlockTest
 };

package/dist/esm/components/base/liquidation-price-block/liquidation-price-block.js

@@ -1,67 +1,75 @@
-import { jsx as i, jsxs as P } from "react/jsx-runtime";
+import { jsx as i, jsxs as c, Fragment as T } from "react/jsx-runtime";
 import { useTitleText as b } from "../text/use-title-text.js";
-import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
-import { FormattedNumberString as T } from "../../formatted-number/formatted-number.js";
-import { HealthDot as g } from "../../status-elements/status-elements.js";
-import { FormattedMessageTyped as d } from "../../typed-intl/index.js";
-import { VerticalIndicator as h } from "../../vertical-indicator/vertical-indicator.js";
-import { bnToLiquidationPriceView as x } from "../../../utils/parse-input-to-bn.js";
-import { LiquidationPriceBlockTest as r } from "./constants.js";
-function q(e, o) {
+import { FadeoutLoading as u } from "../../fadeout-loading/fadeout-loading.js";
+import { FormattedNumberString as g } from "../../formatted-number/formatted-number.js";
+import { HealthDot as x } from "../../status-elements/status-elements.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as I } from "../../vertical-indicator/vertical-indicator.js";
+import { APPROXIMATE_SYMBOL as q } from "../../../utils/format.js";
+import { bnToLiquidationPriceView as B } from "../../../utils/parse-input-to-bn.js";
+import { LiquidationPriceBlockTest as n } from "./constants.js";
+function L(e, o) {
   if (!(!e || !o))
     return `${e.symbol} / ${o.symbol}`;
 }
-function D({
+function S({
   price: e,
   priceTo: o,
   collateral: t,
-  underlying: u,
-  zone: l,
-  isLoading: n,
-  title: a,
-  tip: p,
-  testId: f
+  underlying: r,
+  approximate: a,
+  zone: m,
+  isLoading: s,
+  title: d,
+  tip: v,
+  testId: P
 }) {
-  const v = b(), m = o !== void 0;
+  const h = b(), l = o !== void 0;
   return /* @__PURE__ */ i(
-    h,
+    I,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": f ?? r.root,
-      label: a !== void 0 ? v(a) : /* @__PURE__ */ i(d, { messageId: "components.liquidationPriceBlock.label" }),
-      tip: p ?? /* @__PURE__ */ i(d, { messageId: "components.liquidationPriceBlock.tip" }),
-      value: /* @__PURE__ */ i(s, { loading: n, children: /* @__PURE__ */ i(
-        c,
+      "data-testid": P ?? n.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ i(p, { messageId: "components.liquidationPriceBlock.label" }),
+      tip: v ?? /* @__PURE__ */ i(p, { messageId: "components.liquidationPriceBlock.tip" }),
+      value: /* @__PURE__ */ i(u, { loading: s, children: /* @__PURE__ */ i(
+        f,
         {
           price: e,
-          zone: m ? void 0 : l,
-          testId: r.value
+          approximate: a && !l,
+          zone: l ? void 0 : m,
+          testId: n.value
         }
       ) }),
-      valueTo: m ? /* @__PURE__ */ i(s, { loading: n, children: /* @__PURE__ */ i(
-        c,
+      valueTo: l ? /* @__PURE__ */ i(u, { loading: s, children: /* @__PURE__ */ i(
+        f,
         {
           price: o ?? null,
-          zone: l,
-          testId: r.valueTo
+          approximate: a,
+          zone: m,
+          testId: n.valueTo
         }
       ) }) : void 0,
-      valueDescription: q(t, u)
+      valueDescription: L(t, r)
     }
   );
 }
-function c({
+function f({
   price: e,
-  zone: o,
-  testId: t
+  approximate: o,
+  zone: t,
+  testId: r
 }) {
-  return /* @__PURE__ */ P("span", { className: "inline-flex items-center", "data-testid": t, children: [
-    e === void 0 ? "—" : e === null || e === 0n ? "N/A" : /* @__PURE__ */ i(T, { value: x(e) }),
-    o ? /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(g, { zone: o }) }) : null
+  return /* @__PURE__ */ c("span", { className: "inline-flex items-center", "data-testid": r, children: [
+    e === void 0 ? "—" : e === null || e === 0n ? "N/A" : /* @__PURE__ */ c(T, { children: [
+      o ? /* @__PURE__ */ i("span", { className: "mr-0.5", children: q }) : null,
+      /* @__PURE__ */ i(g, { value: B(e) })
+    ] }),
+    t ? /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(x, { zone: t }) }) : null
   ] });
 }
 export {
-  D as LiquidationPriceBlock,
-  r as LiquidationPriceBlockTest
+  S as LiquidationPriceBlock,
+  n as LiquidationPriceBlockTest
 };

package/dist/esm/components/base/manage-pane/constants.js

@@ -1,12 +1,12 @@
-class e {
-  static root = "manage-pane-root";
-  static tabs = "manage-pane-tabs";
-  static dropdown = "manage-pane-dropdown";
-  static body = "manage-pane-body";
-  static message = "manage-pane-message";
-  static actionDialog = "manage-pane-action-dialog";
-  static tab = (a) => `manage-pane-tab-${a}`;
-}
+const e = {
+  root: "manage-pane-root",
+  tabs: "manage-pane-tabs",
+  dropdown: "manage-pane-dropdown",
+  body: "manage-pane-body",
+  message: "manage-pane-message",
+  actionDialog: "manage-pane-action-dialog",
+  tab: (a) => `manage-pane-tab-${a}`
+};
 export {
   e as ManagePaneTest
 };