@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.3

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

@@ -1,118 +1,167 @@
-import { AmountInput as t } from "./amount-input/amount-input.js";
-import { DetailedPageTitle as a } from "./detailed-page-title/detailed-page-title.js";
-import { AsideAlignAnchor as m } from "./details-view/detail-aside/detail-aside-scope.js";
-import { DetailAsideScreenLayout as f } from "./details-view/detail-aside/detail-aside-screen-layout.js";
-import { DetailsView as x, DetailsViewLeftPane as T, DetailsViewManagePane as s } from "./details-view/details-view.js";
-import { HealthFactorBlockTest as u } from "./health-factor-block/constants.js";
-import { HealthFactorBlock as P } from "./health-factor-block/health-factor-block.js";
-import { HistoryChart as c } from "./history-chart/history-chart.js";
-import { InfoLine as B, InfoList as L } from "./info-list/info-list.js";
-import { InfoPortalOut as A, InfoPortalProvider as k } from "./info-portal/info-portal.js";
-import { LeverageInput as V } from "./leverage-input/leverage-input.js";
-import { LiquidationPriceBlockTest as H } from "./liquidation-price-block/constants.js";
-import { LiquidationPriceBlock as y } from "./liquidation-price-block/liquidation-price-block.js";
-import { ManagePane as w, ManagePaneMessage as E, ManagePaneTab as v, ManagePaneTabDropdown as C } from "./manage-pane/manage-pane.js";
-import { PageTitle as q } from "./page-title/page-title.js";
-import { ReviewButton as G } from "./review-button/review-button.js";
-import { SectionHeading as U } from "./section-heading/section-heading.js";
-import { SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as R, SegmentedTabs as z } from "./segmented-tabs/segmented-tabs.js";
-import { SPACE_HEIGHT as j, SPACE_PX as J } from "./spacing.js";
-import { Stack as Q } from "./stack/stack.js";
-import { StatBadge as Y, StatBadgeGrid as Z } from "./stat-badge/stat-badge.js";
-import { StickyBar as ee } from "./sticky-bar/sticky-bar.js";
-import { Tabber as te, TabberSection as re, isTabber as ae } from "./tabber/tabber.js";
-import { useDetailScrollSpy as me } from "./tabber/use-detail-scroll-spy.js";
-import { useTitleText as fe } from "./text/use-title-text.js";
-import { TimeToLiquidationBlockTest as xe } from "./time-to-liquidation-block/constants.js";
-import { TimeToLiquidationBlock as se } from "./time-to-liquidation-block/time-to-liquidation-block.js";
-import { TokenAmount as ue } from "./token-amount/token-amount.js";
-import { PositionShortLabelTest as Pe, ValueTest as Se } from "./values/constants.js";
-import { PnlValue as de } from "./values/pnl-value.js";
-import { PositionShortLabel as Le } from "./values/position-short-label.js";
-import { PositionTypeBadge as Ae } from "./values/position-type-badge.js";
-import { ApyValue as Ie, HealthFactorValue as Ve, LeverageValue as De, TokenBigint as He, UsdValue as he, UtilizationValue as ye } from "./values/scalars.js";
-import { AmountInputTest as we } from "./amount-input/constants.js";
-import { DetailedPageTitleTest as ve } from "./detailed-page-title/constants.js";
-import { DetailsViewTest as _e } from "./details-view/constants.js";
-import { HistoryChartTest as Fe } from "./history-chart/constants.js";
-import { InfoListTest as Ne } from "./info-list/constants.js";
-import { LeverageInputTest as Oe } from "./leverage-input/constants.js";
-import { ManagePaneTest as ze } from "./manage-pane/constants.js";
-import { PageTitleTest as je } from "./page-title/constants.js";
-import { ReviewButtonTest as Ke } from "./review-button/constants.js";
-import { SectionHeadingTest as We } from "./section-heading/constants.js";
-import { SegmentedTabsTest as Ze } from "./segmented-tabs/constants.js";
-import { StackTest as eo } from "./stack/constants.js";
-import { StatBadgeTest as to } from "./stat-badge/constants.js";
-import { StickyBarTest as ao } from "./sticky-bar/constants.js";
-import { TabberTest as mo } from "./tabber/constants.js";
-import { TokenAmountTest as fo } from "./token-amount/constants.js";
+import { AmountInput as r } from "./amount-input/amount-input.js";
+import { TokenSelectPanel as a } from "./amount-input/token-select-panel.js";
+import { BorrowRateBlock as p } from "./borrow-rate-block/borrow-rate-block.js";
+import { BorrowRateBlockTest as f } from "./borrow-rate-block/constants.js";
+import { ChartWithSideCard as x } from "./chart-with-side-card/chart-with-side-card.js";
+import { ChartWithSideCardTest as s } from "./chart-with-side-card/constants.js";
+import { DetailedPageTitle as d } from "./detailed-page-title/detailed-page-title.js";
+import { AsideAlignAnchor as P } from "./details-view/detail-aside/detail-aside-scope.js";
+import { DetailAsideScreenLayout as g } from "./details-view/detail-aside/detail-aside-screen-layout.js";
+import { DetailsView as k, DetailsViewLeftPane as B, DetailsViewManagePane as A } from "./details-view/details-view.js";
+import { HealthFactorBlockTest as L } from "./health-factor-block/constants.js";
+import { HealthFactorBlock as C } from "./health-factor-block/health-factor-block.js";
+import { HistoryChart as w } from "./history-chart/history-chart.js";
+import { InfoLine as h, InfoList as V, InfoSectionTitle as D } from "./info-list/info-list.js";
+import { InfoPortalOut as E, InfoPortalProvider as q } from "./info-portal/info-portal.js";
+import { LeverageInput as _ } from "./leverage-input/leverage-input.js";
+import { LiquidationParamsTableTest as R } from "./liquidation-params-table/constants.js";
+import { LiquidationParamsTable as G } from "./liquidation-params-table/liquidation-params-table.js";
+import { LiquidationPriceBlockTest as O } from "./liquidation-price-block/constants.js";
+import { LiquidationPriceBlock as z } from "./liquidation-price-block/liquidation-price-block.js";
+import { ManagePane as j, ManagePaneActionTab as J, ManagePaneMessage as K, ManagePaneTab as Q, ManagePaneTabDropdown as Y } from "./manage-pane/manage-pane.js";
+import { MoreAccordionTest as $ } from "./more-accordion/constants.js";
+import { MoreAccordion as oe } from "./more-accordion/more-accordion.js";
+import { NestedInfoStackTest as te } from "./nested-info-stack/constants.js";
+import { NestedInfoStack as ie } from "./nested-info-stack/nested-info-stack.js";
+import { PageTitle as me } from "./page-title/page-title.js";
+import { PoolApyBreakdownCardTest as ne } from "./pool-apy-breakdown-card/constants.js";
+import { PoolApyBreakdownCard as Te } from "./pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { ReviewButton as le } from "./review-button/review-button.js";
+import { SectionHeading as Se } from "./section-heading/section-heading.js";
+import { SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as ce, SegmentedTabs as ge } from "./segmented-tabs/segmented-tabs.js";
+import { SideCardTest as ke } from "./side-card/constants.js";
+import { SideCard as Ae } from "./side-card/side-card.js";
+import { SPACE_HEIGHT as Le, SPACE_PX as ye } from "./spacing.js";
+import { Stack as Ie } from "./stack/stack.js";
+import { StatBadge as Me, StatBadgeGrid as he } from "./stat-badge/stat-badge.js";
+import { StickyBar as De } from "./sticky-bar/sticky-bar.js";
+import { StrategyApyBreakdownCardTest as Ee } from "./strategy-apy-breakdown-card/constants.js";
+import { StrategyApyBreakdownCard as ve } from "./strategy-apy-breakdown-card/strategy-apy-breakdown-card.js";
+import { Tabber as Ne, TabberSection as Re, isTabber as Fe } from "./tabber/tabber.js";
+import { useDetailScrollSpy as Ue } from "./tabber/use-detail-scroll-spy.js";
+import { useTitleText as We } from "./text/use-title-text.js";
+import { TimeToLiquidationBlockTest as Xe } from "./time-to-liquidation-block/constants.js";
+import { TimeToLiquidationBlock as Je } from "./time-to-liquidation-block/time-to-liquidation-block.js";
+import { TitleMetaTest as Qe } from "./title-meta/constants.js";
+import { TitleMeta as Ze } from "./title-meta/title-meta.js";
+import { TokenAmount as eo } from "./token-amount/token-amount.js";
+import { TokenPairSymbolTest as ro } from "./token-pair-symbol/constants.js";
+import { TokenPairSymbol as ao } from "./token-pair-symbol/token-pair-symbol.js";
+import { TokenPairTitleTest as po } from "./token-pair-title/constants.js";
+import { TokenPairTitle as fo } from "./token-pair-title/token-pair-title.js";
+import { PositionShortLabelTest as xo, ValueTest as To } from "./values/constants.js";
+import { PnlValue as lo } from "./values/pnl-value.js";
+import { PositionShortLabel as Po } from "./values/position-short-label.js";
+import { PositionTypeBadge as go } from "./values/position-type-badge.js";
+import { ApyValue as ko, HealthFactorValue as Bo, LeverageValue as Ao, TokenBigint as bo, UsdValue as Lo, UtilizationValue as yo, bps as Co } from "./values/scalars.js";
+import { AmountInputTest as wo } from "./amount-input/constants.js";
+import { DetailedPageTitleTest as ho } from "./detailed-page-title/constants.js";
+import { DetailsViewTest as Do } from "./details-view/constants.js";
+import { HistoryChartTest as Eo } from "./history-chart/constants.js";
+import { InfoListTest as vo } from "./info-list/constants.js";
+import { LeverageInputTest as No } from "./leverage-input/constants.js";
+import { ManagePaneTest as Fo } from "./manage-pane/constants.js";
+import { PageTitleTest as Uo } from "./page-title/constants.js";
+import { ReviewButtonTest as Wo } from "./review-button/constants.js";
+import { SectionHeadingTest as Xo } from "./section-heading/constants.js";
+import { SegmentedTabsTest as Jo } from "./segmented-tabs/constants.js";
+import { StackTest as Qo } from "./stack/constants.js";
+import { StatBadgeTest as Zo } from "./stat-badge/constants.js";
+import { StickyBarTest as er } from "./sticky-bar/constants.js";
+import { TabberTest as rr } from "./tabber/constants.js";
+import { TokenAmountTest as ar } from "./token-amount/constants.js";
 export {
-  t as AmountInput,
-  we as AmountInputTest,
-  Ie as ApyValue,
-  m as AsideAlignAnchor,
-  f as DetailAsideScreenLayout,
-  a as DetailedPageTitle,
-  ve as DetailedPageTitleTest,
-  x as DetailsView,
-  T as DetailsViewLeftPane,
-  s as DetailsViewManagePane,
-  _e as DetailsViewTest,
-  P as HealthFactorBlock,
-  u as HealthFactorBlockTest,
-  Ve as HealthFactorValue,
-  c as HistoryChart,
-  Fe as HistoryChartTest,
-  B as InfoLine,
-  L as InfoList,
-  Ne as InfoListTest,
-  A as InfoPortalOut,
-  k as InfoPortalProvider,
-  V as LeverageInput,
-  Oe as LeverageInputTest,
-  De as LeverageValue,
-  y as LiquidationPriceBlock,
-  H as LiquidationPriceBlockTest,
-  w as ManagePane,
-  E as ManagePaneMessage,
-  v as ManagePaneTab,
-  C as ManagePaneTabDropdown,
-  ze as ManagePaneTest,
-  q as PageTitle,
-  je as PageTitleTest,
-  de as PnlValue,
-  Le as PositionShortLabel,
-  Pe as PositionShortLabelTest,
-  Ae as PositionTypeBadge,
-  G as ReviewButton,
-  Ke as ReviewButtonTest,
-  R as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
-  j as SPACE_HEIGHT,
-  J as SPACE_PX,
-  U as SectionHeading,
-  We as SectionHeadingTest,
-  z as SegmentedTabs,
-  Ze as SegmentedTabsTest,
-  Q as Stack,
-  eo as StackTest,
-  Y as StatBadge,
-  Z as StatBadgeGrid,
-  to as StatBadgeTest,
-  ee as StickyBar,
-  ao as StickyBarTest,
-  te as Tabber,
-  re as TabberSection,
-  mo as TabberTest,
-  se as TimeToLiquidationBlock,
-  xe as TimeToLiquidationBlockTest,
-  ue as TokenAmount,
-  fo as TokenAmountTest,
-  He as TokenBigint,
-  he as UsdValue,
-  ye as UtilizationValue,
-  Se as ValueTest,
-  ae as isTabber,
-  me as useDetailScrollSpy,
-  fe as useTitleText
+  r as AmountInput,
+  wo as AmountInputTest,
+  ko as ApyValue,
+  P as AsideAlignAnchor,
+  p as BorrowRateBlock,
+  f as BorrowRateBlockTest,
+  x as ChartWithSideCard,
+  s as ChartWithSideCardTest,
+  g as DetailAsideScreenLayout,
+  d as DetailedPageTitle,
+  ho as DetailedPageTitleTest,
+  k as DetailsView,
+  B as DetailsViewLeftPane,
+  A as DetailsViewManagePane,
+  Do as DetailsViewTest,
+  C as HealthFactorBlock,
+  L as HealthFactorBlockTest,
+  Bo as HealthFactorValue,
+  w as HistoryChart,
+  Eo as HistoryChartTest,
+  h as InfoLine,
+  V as InfoList,
+  vo as InfoListTest,
+  E as InfoPortalOut,
+  q as InfoPortalProvider,
+  D as InfoSectionTitle,
+  _ as LeverageInput,
+  No as LeverageInputTest,
+  Ao as LeverageValue,
+  G as LiquidationParamsTable,
+  R as LiquidationParamsTableTest,
+  z as LiquidationPriceBlock,
+  O as LiquidationPriceBlockTest,
+  j as ManagePane,
+  J as ManagePaneActionTab,
+  K as ManagePaneMessage,
+  Q as ManagePaneTab,
+  Y as ManagePaneTabDropdown,
+  Fo as ManagePaneTest,
+  oe as MoreAccordion,
+  $ as MoreAccordionTest,
+  ie as NestedInfoStack,
+  te as NestedInfoStackTest,
+  me as PageTitle,
+  Uo as PageTitleTest,
+  lo as PnlValue,
+  Te as PoolApyBreakdownCard,
+  ne as PoolApyBreakdownCardTest,
+  Po as PositionShortLabel,
+  xo as PositionShortLabelTest,
+  go as PositionTypeBadge,
+  le as ReviewButton,
+  Wo as ReviewButtonTest,
+  ce as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
+  Le as SPACE_HEIGHT,
+  ye as SPACE_PX,
+  Se as SectionHeading,
+  Xo as SectionHeadingTest,
+  ge as SegmentedTabs,
+  Jo as SegmentedTabsTest,
+  Ae as SideCard,
+  ke as SideCardTest,
+  Ie as Stack,
+  Qo as StackTest,
+  Me as StatBadge,
+  he as StatBadgeGrid,
+  Zo as StatBadgeTest,
+  De as StickyBar,
+  er as StickyBarTest,
+  ve as StrategyApyBreakdownCard,
+  Ee as StrategyApyBreakdownCardTest,
+  Ne as Tabber,
+  Re as TabberSection,
+  rr as TabberTest,
+  Je as TimeToLiquidationBlock,
+  Xe as TimeToLiquidationBlockTest,
+  Ze as TitleMeta,
+  Qe as TitleMetaTest,
+  eo as TokenAmount,
+  ar as TokenAmountTest,
+  bo as TokenBigint,
+  ao as TokenPairSymbol,
+  ro as TokenPairSymbolTest,
+  fo as TokenPairTitle,
+  po as TokenPairTitleTest,
+  a as TokenSelectPanel,
+  Lo as UsdValue,
+  yo as UtilizationValue,
+  To as ValueTest,
+  Co as bps,
+  Fe as isTabber,
+  Ue as useDetailScrollSpy,
+  We as useTitleText
 };

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

@@ -1,6 +1,7 @@
 class i {
   static root = "info-list-root";
   static line = "info-list-line";
+  static sectionTitle = "info-list-section-title";
 }
 export {
   i as InfoListTest

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

@@ -1,7 +1,8 @@
-import { InfoLine as t, InfoList as e } from "./info-list.js";
+import { InfoLine as e, InfoList as f, InfoSectionTitle as n } from "./info-list.js";
 import { InfoListTest as r } from "./constants.js";
 export {
-  t as InfoLine,
-  e as InfoList,
-  r as InfoListTest
+  e as InfoLine,
+  f as InfoList,
+  r as InfoListTest,
+  n as InfoSectionTitle
 };

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

@@ -1,36 +1,57 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Stack as a } from "../stack/stack.js";
-import { useTitleText as f } from "../text/use-title-text.js";
-import { VerticalIndicator as c } from "../../vertical-indicator/vertical-indicator.js";
-import { InfoListTest as r } from "./constants.js";
-function I({
+import { jsx as e } from "react/jsx-runtime";
+import { Stack as p } from "../stack/stack.js";
+import { useTitleText as r } from "../text/use-title-text.js";
+import { Typography as f } from "../../typography/typography.js";
+import { VerticalIndicator as l } from "../../vertical-indicator/vertical-indicator.js";
+import { InfoListTest as i } from "./constants.js";
+function h({
   children: t
 }) {
-  return /* @__PURE__ */ o(a, { gap: "sm", "data-testid": r.root, children: t });
+  return /* @__PURE__ */ e(p, { gap: "sm", "data-testid": i.root, children: t });
 }
-function L({
+function y({
   title: t,
-  value: i,
-  tip: e,
-  valueTo: n,
-  testId: m
+  value: o,
+  tip: n,
+  valueDescription: a,
+  valueTo: s,
+  testId: c
 }) {
-  const s = f();
-  return /* @__PURE__ */ o(
-    c,
+  const m = r();
+  return /* @__PURE__ */ e(
+    l,
     {
-      label: s(t),
-      tip: e,
-      value: i,
-      valueTo: n,
+      label: m(t),
+      tip: n,
+      value: o,
+      valueTo: s,
+      valueDescription: a,
       size: "sm",
       align: "center",
-      "data-testid": m ?? r.line
+      "data-testid": c ?? i.line
+    }
+  );
+}
+function L({
+  title: t
+}) {
+  const o = r();
+  return /* @__PURE__ */ e(
+    f,
+    {
+      as: "span",
+      color: "secondary",
+      weight: "bold",
+      variant: "caption",
+      className: "tracking-[0.55px] uppercase",
+      "data-testid": i.sectionTitle,
+      children: o(t)
     }
   );
 }
 export {
-  L as InfoLine,
-  I as InfoList,
-  r as InfoListTest
+  y as InfoLine,
+  h as InfoList,
+  i as InfoListTest,
+  L as InfoSectionTitle
 };

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

@@ -1,82 +1,85 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { useState as x } from "react";
-import { Stack as I } from "../stack/stack.js";
-import { useTitleText as k } from "../text/use-title-text.js";
-import { EditInput as V } from "../../edit-input/edit-input.js";
-import { Slider as F } from "../../slider/slider.js";
+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 { EditInput as F } from "../../edit-input/edit-input.js";
+import { Slider as j } from "../../slider/slider.js";
 import "../../slider/slider-context.js";
-import { TextButton as j } from "../../text-button/text-button.js";
-import { SimpleTooltip as y } from "../../tooltip/simple-tooltip.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 { FormattedMessageTyped as v } from "../../typed-intl/index.js";
-import { WithTitle as O } from "../../with-title/with-title.js";
+import { useIntlTyped as B, FormattedMessageTyped as T } from "../../typed-intl/index.js";
+import { WithTitle as D } from "../../with-title/with-title.js";
 import { LeverageInputTest as i } from "./constants.js";
-const o = 100, R = 10;
-function Q({
+const o = 100, P = 10;
+function Z({
   value: r,
   onChange: s,
   max: n,
-  min: m = 1,
-  step: w = 0.1,
+  min: l = 1,
   title: c,
   hint: d,
   reset: a,
-  colorIntervals: N,
-  colorIntervalLabel: b,
-  size: E = "sm"
+  colorIntervals: w,
+  colorIntervalLabel: N,
+  size: S = "sm"
 }) {
-  const S = k(), [C, p] = x(void 0), [u, f] = x(""), g = C ?? r, h = (e) => {
-    s(B(e, m, n)), p(void 0);
-  }, L = () => {
-    const e = Number.parseFloat(u.replace(",", "."));
-    Number.isFinite(e) && h(e);
-  }, M = N?.map((e) => ({
+  const E = B(), C = y(), p = w ?? [
+    { start: l, end: n, color: "additionalSuccess" }
+  ], L = N ?? (p.length > 0 ? E.formatMessage({
+    messageId: "components.leverageInput.available"
+  }) : void 0), [M, u] = I(void 0), [f, g] = I(""), h = M ?? r, v = (e) => {
+    s(_(e, l, n)), u(void 0);
+  }, k = () => {
+    const e = Number.parseFloat(f.replace(",", "."));
+    Number.isFinite(e) && v(e);
+  }, V = p.map((e) => ({
     ...e,
     start: e.start * o,
     end: e.end * o
   }));
   return /* @__PURE__ */ t("div", { "data-testid": i.root, children: /* @__PURE__ */ t(
-    O,
+    D,
     {
-      size: E,
-      title: /* @__PURE__ */ l(I, { direction: "row", align: "center", justify: "between", gap: "sm", children: [
-        /* @__PURE__ */ l("span", { className: "font-normal", children: [
-          c !== void 0 ? S(c) : /* @__PURE__ */ t(v, { messageId: "components.leverageInput.label" }),
+      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" }),
           d ? /* @__PURE__ */ t("span", { className: "text-muted-foreground ml-1", children: d }) : null
         ] }),
-        /* @__PURE__ */ l(I, { direction: "row", align: "center", gap: "sm", children: [
+        /* @__PURE__ */ m(x, { direction: "row", align: "center", gap: "sm", children: [
           /* @__PURE__ */ t("div", { className: "flex w-[90px] flex-row flex-nowrap items-center", children: /* @__PURE__ */ t(
-            V,
+            F,
             {
-              value: u,
+              value: f,
               placeholder: "0",
-              label: `×${T(g)}`,
+              label: `×${b(h)}`,
               textButtonProps: {
                 className: "inline-flex items-center whitespace-nowrap"
               },
               "data-testid": i.value,
               onEditModeChange: (e) => {
-                e && f(T(r));
+                e && g(b(r));
               },
-              onChange: (e) => f(e.target.value),
-              onSubmit: L
+              onChange: (e) => g(e.target.value),
+              onSubmit: k
             }
           ) }),
           a ? /* @__PURE__ */ t(
-            y,
+            R,
             {
               placement: "top",
               triangle: !1,
               triggerClassName: "inline-flex shrink-0",
               title: /* @__PURE__ */ t(
-                j,
+                O,
                 {
                   buttonColor: "secondaryDashed",
                   size: "sm",
                   className: "max-w-full truncate",
                   onClick: a.onClick,
                   "data-testid": a.testId ?? i.reset,
-                  children: /* @__PURE__ */ t(v, { messageId: "components.leverageInput.reset" })
+                  children: /* @__PURE__ */ t(T, { messageId: "components.leverageInput.reset" })
                 }
               ),
               children: a.tooltip
@@ -85,30 +88,30 @@ function Q({
         ] })
       ] }),
       children: /* @__PURE__ */ t(
-        F,
+        j,
         {
-          from: m * o,
+          from: l * o,
           to: n * o,
           precision: o,
-          value: g * o,
-          colorIntervals: M,
-          colorIntervalLabel: b,
-          markerStep: n > R ? 200 : w * o,
+          value: h * o,
+          colorIntervals: V,
+          colorIntervalLabel: L,
+          markerStep: n > P ? 200 : 100,
           "data-testid": i.slider,
-          onChangeValue: (e) => p(e / o),
-          onSubmitValue: (e) => h(e / o)
+          onChangeValue: (e) => u(e / o),
+          onSubmitValue: (e) => v(e / o)
         }
       )
     }
   ) });
 }
-function B(r, s, n) {
+function _(r, s, n) {
   return Math.min(Math.max(r, s), n);
 }
-function T(r) {
-  return (Math.round(r * 100) / 100).toFixed(2).replace(/\.?0+$/, "");
+function b(r) {
+  return (Math.round(r * 100) / 100).toFixed(2);
 }
 export {
-  Q as LeverageInput,
+  Z as LeverageInput,
   i as LeverageInputTest
 };

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

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

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

@@ -0,0 +1,6 @@
+import { LiquidationParamsTableTest as o } from "./constants.js";
+import { LiquidationParamsTable as e } from "./liquidation-params-table.js";
+export {
+  e as LiquidationParamsTable,
+  o as LiquidationParamsTableTest
+};

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

@@ -0,0 +1,62 @@
+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 "../../../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 { LiquidationParamsTableTest as u } from "./constants.js";
+function a(o) {
+  return o / 100;
+}
+function z({
+  data: o
+}) {
+  const n = a(o.liquidationPremium), l = a(o.liquidationFee);
+  return /* @__PURE__ */ i(
+    d,
+    {
+      size: "sm",
+      className: "min-w-[480px]",
+      "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(p, { children: /* @__PURE__ */ i(s, { children: [
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            a(o.liquidationThreshold).toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            (n + l).toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            n.toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            l.toFixed(2),
+            "%"
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  z as LiquidationParamsTable,
+  u as LiquidationParamsTableTest
+};