@gearbox-protocol/ui-kit 4.0.0-next.2 → 4.0.0-next.21

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

@@ -1,166 +1,181 @@
 import { AmountInput as r } from "./amount-input/amount-input.js";
 import { TokenSelectPanel as a } from "./amount-input/token-select-panel.js";
-import { BorrowRateBlock as m } from "./borrow-rate-block/borrow-rate-block.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 { ChartWithSideCardTest as T } 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 { AsideAlignAnchor as S } 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 { HealthFactorBlock as y } from "./health-factor-block/health-factor-block.js";
+import { HistoryChart as h } from "./history-chart/history-chart.js";
+import { InfoLine as M, InfoList as V, InfoSectionTitle as D, PointsInfoLine as H } 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 pe } 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 mo } 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 } from "./values/scalars.js";
-import { AmountInputTest as Io } from "./amount-input/constants.js";
-import { DetailedPageTitleTest as Mo } from "./detailed-page-title/constants.js";
-import { DetailsViewTest as Vo } from "./details-view/constants.js";
-import { HistoryChartTest as Ho } from "./history-chart/constants.js";
-import { InfoListTest as qo } from "./info-list/constants.js";
-import { LeverageInputTest as _o } from "./leverage-input/constants.js";
-import { ManagePaneTest as Ro } from "./manage-pane/constants.js";
-import { PageTitleTest as Go } from "./page-title/constants.js";
-import { ReviewButtonTest as Oo } from "./review-button/constants.js";
-import { SectionHeadingTest as zo } from "./section-heading/constants.js";
-import { SegmentedTabsTest as jo } from "./segmented-tabs/constants.js";
-import { StackTest as Ko } from "./stack/constants.js";
-import { StatBadgeTest as Yo } from "./stat-badge/constants.js";
-import { StickyBarTest as $o } from "./sticky-bar/constants.js";
-import { TabberTest as or } from "./tabber/constants.js";
-import { TokenAmountTest as tr } from "./token-amount/constants.js";
+import { LeverageInput as N } from "./leverage-input/leverage-input.js";
+import { LeveragePresetChipsTest as F } from "./leverage-preset-chips/constants.js";
+import { LeveragePresetChips as U } from "./leverage-preset-chips/leverage-preset-chips.js";
+import { LiquidationParamsTableTest as W } from "./liquidation-params-table/constants.js";
+import { LiquidationParamsTable as X } from "./liquidation-params-table/liquidation-params-table.js";
+import { LiquidationPriceBlockTest as J } from "./liquidation-price-block/constants.js";
+import { LiquidationPriceBlock as Q } from "./liquidation-price-block/liquidation-price-block.js";
+import { ManagePane as Z, ManagePaneActionTab as $, ManagePaneMessage as ee, ManagePaneTab as oe, ManagePaneTabDropdown as re } from "./manage-pane/manage-pane.js";
+import { MoreAccordionTest as ae } from "./more-accordion/constants.js";
+import { MoreAccordion as pe } from "./more-accordion/more-accordion.js";
+import { NestedInfoStackTest as fe } from "./nested-info-stack/constants.js";
+import { NestedInfoStack as xe } from "./nested-info-stack/nested-info-stack.js";
+import { PageHeadProvider as Te, PageTitle as le } from "./page-title/page-title.js";
+import { PoolApyBreakdownCardTest as Pe } from "./pool-apy-breakdown-card/constants.js";
+import { PoolApyBreakdownCard as ce } from "./pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PositionAssetsTest as ue } from "./position-assets/constants.js";
+import { PositionAssets as Be } from "./position-assets/position-assets.js";
+import { ReviewButton as be } from "./review-button/review-button.js";
+import { SectionHeading as Ce } from "./section-heading/section-heading.js";
+import { SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as Ie, SegmentedTabs as he } from "./segmented-tabs/segmented-tabs.js";
+import { SideCardTest as Me } from "./side-card/constants.js";
+import { SideCard as De } from "./side-card/side-card.js";
+import { SPACE_HEIGHT as ve, SPACE_PX as Ee } from "./spacing.js";
+import { Stack as _e } from "./stack/stack.js";
+import { StatBadge as Re, StatBadgeGrid as Fe } from "./stat-badge/stat-badge.js";
+import { StickyBar as Ue } from "./sticky-bar/sticky-bar.js";
+import { StrategyApyBreakdownCardTest as We } from "./strategy-apy-breakdown-card/constants.js";
+import { StrategyApyBreakdownCard as Xe } from "./strategy-apy-breakdown-card/strategy-apy-breakdown-card.js";
+import { Tabber as Je, TabberSection as Ke, isTabber as Qe } from "./tabber/tabber.js";
+import { useDetailScrollSpy as Ze } from "./tabber/use-detail-scroll-spy.js";
+import { useTitleText as eo } from "./text/use-title-text.js";
+import { TimeToLiquidationBlockTest as ro } from "./time-to-liquidation-block/constants.js";
+import { TimeToLiquidationBlock as ao } from "./time-to-liquidation-block/time-to-liquidation-block.js";
+import { TitleMetaTest as po } from "./title-meta/constants.js";
+import { TitleMeta as fo } from "./title-meta/title-meta.js";
+import { TokenAmount as xo } from "./token-amount/token-amount.js";
+import { TokenPairSymbolTest as To } from "./token-pair-symbol/constants.js";
+import { TokenPairSymbol as Po } from "./token-pair-symbol/token-pair-symbol.js";
+import { TokenPairTitleTest as co } from "./token-pair-title/constants.js";
+import { TokenPairTitle as uo } from "./token-pair-title/token-pair-title.js";
+import { PositionShortLabelTest as Bo, ValueTest as Ao } from "./values/constants.js";
+import { PnlValue as Lo } from "./values/pnl-value.js";
+import { PointsValue as yo } from "./values/points-value.js";
+import { PositionShortLabel as ho } from "./values/position-short-label.js";
+import { PositionStatusBadge as Mo } from "./values/position-status-badge.js";
+import { PositionTypeBadge as Do } from "./values/position-type-badge.js";
+import { ApyValue as vo, HealthFactorValue as Eo, LeverageValue as qo, TokenBigint as _o, UsdValue as No, UtilizationValue as Ro, bps as Fo } from "./values/scalars.js";
+import { AmountInputTest as Uo } from "./amount-input/constants.js";
+import { DetailedPageTitleTest as Wo } from "./detailed-page-title/constants.js";
+import { DetailsViewTest as Xo } from "./details-view/constants.js";
+import { HistoryChartTest as Jo } from "./history-chart/constants.js";
+import { InfoListTest as Qo } from "./info-list/constants.js";
+import { LeverageInputTest as Zo } from "./leverage-input/constants.js";
+import { ManagePaneTest as er } from "./manage-pane/constants.js";
+import { PageTitleTest as rr } from "./page-title/constants.js";
+import { ReviewButtonTest as ar } from "./review-button/constants.js";
+import { SectionHeadingTest as pr } from "./section-heading/constants.js";
+import { SegmentedTabsTest as fr } from "./segmented-tabs/constants.js";
+import { StackTest as xr } from "./stack/constants.js";
+import { StatBadgeTest as Tr } from "./stat-badge/constants.js";
+import { StickyBarTest as dr } from "./sticky-bar/constants.js";
+import { TabberTest as Sr } from "./tabber/constants.js";
+import { TokenAmountTest as gr } from "./token-amount/constants.js";
 export {
   r as AmountInput,
-  Io as AmountInputTest,
-  ko as ApyValue,
-  P as AsideAlignAnchor,
-  m as BorrowRateBlock,
+  Uo as AmountInputTest,
+  vo as ApyValue,
+  S as AsideAlignAnchor,
+  p as BorrowRateBlock,
   f as BorrowRateBlockTest,
   x as ChartWithSideCard,
-  s as ChartWithSideCardTest,
+  T as ChartWithSideCardTest,
   g as DetailAsideScreenLayout,
   d as DetailedPageTitle,
-  Mo as DetailedPageTitleTest,
+  Wo as DetailedPageTitleTest,
   k as DetailsView,
   B as DetailsViewLeftPane,
   A as DetailsViewManagePane,
-  Vo as DetailsViewTest,
-  C as HealthFactorBlock,
+  Xo as DetailsViewTest,
+  y as HealthFactorBlock,
   L as HealthFactorBlockTest,
-  Bo as HealthFactorValue,
-  w as HistoryChart,
-  Ho as HistoryChartTest,
-  h as InfoLine,
+  Eo as HealthFactorValue,
+  h as HistoryChart,
+  Jo as HistoryChartTest,
+  M as InfoLine,
   V as InfoList,
-  qo as InfoListTest,
+  Qo as InfoListTest,
   E as InfoPortalOut,
   q as InfoPortalProvider,
   D as InfoSectionTitle,
-  _ as LeverageInput,
-  _o 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,
-  Ro as ManagePaneTest,
-  oe as MoreAccordion,
-  $ as MoreAccordionTest,
-  ie as NestedInfoStack,
-  te as NestedInfoStackTest,
-  pe as PageTitle,
-  Go as PageTitleTest,
-  lo as PnlValue,
-  Te as PoolApyBreakdownCard,
-  ne as PoolApyBreakdownCardTest,
-  Po as PositionShortLabel,
-  xo as PositionShortLabelTest,
-  go as PositionTypeBadge,
-  le as ReviewButton,
-  Oo as ReviewButtonTest,
-  ce as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
-  Le as SPACE_HEIGHT,
-  ye as SPACE_PX,
-  Se as SectionHeading,
-  zo as SectionHeadingTest,
-  ge as SegmentedTabs,
-  jo as SegmentedTabsTest,
-  Ae as SideCard,
-  ke as SideCardTest,
-  Ie as Stack,
-  Ko as StackTest,
-  Me as StatBadge,
-  he as StatBadgeGrid,
-  Yo as StatBadgeTest,
-  De as StickyBar,
-  $o as StickyBarTest,
-  ve as StrategyApyBreakdownCard,
-  Ee as StrategyApyBreakdownCardTest,
-  Ne as Tabber,
-  Re as TabberSection,
-  or as TabberTest,
-  Je as TimeToLiquidationBlock,
-  Xe as TimeToLiquidationBlockTest,
-  Ze as TitleMeta,
-  Qe as TitleMetaTest,
-  eo as TokenAmount,
-  tr as TokenAmountTest,
-  bo as TokenBigint,
-  ao as TokenPairSymbol,
-  ro as TokenPairSymbolTest,
-  fo as TokenPairTitle,
-  mo as TokenPairTitleTest,
+  N as LeverageInput,
+  Zo as LeverageInputTest,
+  U as LeveragePresetChips,
+  F as LeveragePresetChipsTest,
+  qo as LeverageValue,
+  X as LiquidationParamsTable,
+  W as LiquidationParamsTableTest,
+  Q as LiquidationPriceBlock,
+  J as LiquidationPriceBlockTest,
+  Z as ManagePane,
+  $ as ManagePaneActionTab,
+  ee as ManagePaneMessage,
+  oe as ManagePaneTab,
+  re as ManagePaneTabDropdown,
+  er as ManagePaneTest,
+  pe as MoreAccordion,
+  ae as MoreAccordionTest,
+  xe as NestedInfoStack,
+  fe as NestedInfoStackTest,
+  Te as PageHeadProvider,
+  le as PageTitle,
+  rr as PageTitleTest,
+  Lo as PnlValue,
+  H as PointsInfoLine,
+  yo as PointsValue,
+  ce as PoolApyBreakdownCard,
+  Pe as PoolApyBreakdownCardTest,
+  Be as PositionAssets,
+  ue as PositionAssetsTest,
+  ho as PositionShortLabel,
+  Bo as PositionShortLabelTest,
+  Mo as PositionStatusBadge,
+  Do as PositionTypeBadge,
+  be as ReviewButton,
+  ar as ReviewButtonTest,
+  Ie as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
+  ve as SPACE_HEIGHT,
+  Ee as SPACE_PX,
+  Ce as SectionHeading,
+  pr as SectionHeadingTest,
+  he as SegmentedTabs,
+  fr as SegmentedTabsTest,
+  De as SideCard,
+  Me as SideCardTest,
+  _e as Stack,
+  xr as StackTest,
+  Re as StatBadge,
+  Fe as StatBadgeGrid,
+  Tr as StatBadgeTest,
+  Ue as StickyBar,
+  dr as StickyBarTest,
+  Xe as StrategyApyBreakdownCard,
+  We as StrategyApyBreakdownCardTest,
+  Je as Tabber,
+  Ke as TabberSection,
+  Sr as TabberTest,
+  ao as TimeToLiquidationBlock,
+  ro as TimeToLiquidationBlockTest,
+  fo as TitleMeta,
+  po as TitleMetaTest,
+  xo as TokenAmount,
+  gr as TokenAmountTest,
+  _o as TokenBigint,
+  Po as TokenPairSymbol,
+  To as TokenPairSymbolTest,
+  uo as TokenPairTitle,
+  co as TokenPairTitleTest,
   a as TokenSelectPanel,
-  Lo as UsdValue,
-  yo as UtilizationValue,
-  To as ValueTest,
-  Fe as isTabber,
-  Ue as useDetailScrollSpy,
-  We as useTitleText
+  No as UsdValue,
+  Ro as UtilizationValue,
+  Ao as ValueTest,
+  Fo as bps,
+  Qe as isTabber,
+  Ze as useDetailScrollSpy,
+  eo as useTitleText
 };

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

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

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

@@ -1,43 +1,61 @@
-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 { 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 "react";
+import { pointProgramsOf as f } from "../../../utils/apy-breakdown.js";
+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 { PointsValue as l } from "../values/points-value.js";
+import "viem";
+import "../../points-icon/points-icon.js";
+import "../../token-icon/token-icon.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 h({
+function G({
   children: t
 }) {
-  return /* @__PURE__ */ e(p, { gap: "sm", "data-testid": i.root, children: t });
+  return /* @__PURE__ */ r(c, { gap: "sm", "data-testid": i.root, children: t });
 }
-function y({
+function g({
   title: t,
   value: o,
-  tip: n,
-  valueDescription: a,
-  valueTo: s,
-  testId: c
+  tip: e,
+  valueDescription: m,
+  valueTo: p,
+  testId: s
 }) {
-  const m = r();
-  return /* @__PURE__ */ e(
-    l,
+  const a = n();
+  return /* @__PURE__ */ r(
+    d,
     {
-      label: m(t),
-      tip: n,
+      label: a(t),
+      tip: e,
       value: o,
-      valueTo: s,
-      valueDescription: a,
+      valueTo: p,
+      valueDescription: m,
       size: "sm",
       align: "center",
-      "data-testid": c ?? i.line
+      "data-testid": s ?? i.line
     }
   );
 }
-function L({
+function H({
   title: t
 }) {
-  const o = r();
-  return /* @__PURE__ */ e(
-    f,
+  const o = n();
+  return /* @__PURE__ */ r(
+    u,
     {
       as: "span",
       color: "secondary",
@@ -49,9 +67,16 @@ function L({
     }
   );
 }
+function J({
+  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 {
-  y as InfoLine,
-  h as InfoList,
+  g as InfoLine,
+  G as InfoList,
   i as InfoListTest,
-  L as InfoSectionTitle
+  H as InfoSectionTitle,
+  J as PointsInfoLine
 };

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

@@ -2,20 +2,21 @@ 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 { 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 Z({
-  value: r,
+function ee({
+  value: n,
   onChange: s,
-  max: n,
+  max: r,
   min: l = 1,
   title: c,
   hint: d,
@@ -25,11 +26,11 @@ function Z({
   size: S = "sm"
 }) {
   const E = B(), C = y(), p = w ?? [
-    { start: l, end: n, color: "additionalSuccess" }
+    { start: l, end: r, 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);
+  }) : void 0), [M, u] = I(void 0), [f, g] = I(""), h = M ?? n, v = (e) => {
+    s(_(e, l, r)), u(void 0);
   }, k = () => {
     const e = Number.parseFloat(f.replace(",", "."));
     Number.isFinite(e) && v(e);
@@ -49,17 +50,17 @@ function Z({
         ] }),
         /* @__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(
-            F,
+            j,
             {
               value: f,
               placeholder: "0",
-              label: `×${b(h)}`,
+              label: `${b(h)}x`,
               textButtonProps: {
                 className: "inline-flex items-center whitespace-nowrap"
               },
               "data-testid": i.value,
               onEditModeChange: (e) => {
-                e && g(b(r));
+                e && g(b(n));
               },
               onChange: (e) => g(e.target.value),
               onSubmit: k
@@ -88,15 +89,15 @@ function Z({
         ] })
       ] }),
       children: /* @__PURE__ */ t(
-        j,
+        F,
         {
           from: l * o,
-          to: n * o,
+          to: r * o,
           precision: o,
           value: h * o,
           colorIntervals: V,
           colorIntervalLabel: L,
-          markerStep: n > P ? 200 : 100,
+          markerStep: r > P ? 200 : 100,
           "data-testid": i.slider,
           onChangeValue: (e) => u(e / o),
           onSubmitValue: (e) => v(e / o)
@@ -105,13 +106,10 @@ function Z({
     }
   ) });
 }
-function _(r, s, n) {
-  return Math.min(Math.max(r, s), n);
-}
-function b(r) {
-  return (Math.round(r * 100) / 100).toFixed(2);
+function _(n, s, r) {
+  return Math.min(Math.max(n, s), r);
 }
 export {
-  Z as LeverageInput,
+  ee as LeverageInput,
   i as LeverageInputTest
 };

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

@@ -0,0 +1,7 @@
+const e = {
+  root: "leverage-preset-chips-root",
+  chip: "leverage-preset-chips-chip"
+};
+export {
+  e as LeveragePresetChipsTest
+};

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

@@ -0,0 +1,6 @@
+import { LeveragePresetChipsTest as s } from "./constants.js";
+import { LeveragePresetChips as o } from "./leverage-preset-chips.js";
+export {
+  o as LeveragePresetChips,
+  s as LeveragePresetChipsTest
+};

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

@@ -0,0 +1,39 @@
+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 { LeveragePresetChipsTest as s } from "./constants.js";
+function u({
+  options: e,
+  value: r,
+  onChange: a
+}) {
+  if (e.length === 0) return null;
+  const i = r != null && e.includes(r) ? String(r) : String(e[e.length - 1]);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "flex items-center gap-2",
+      "data-testid": s.root,
+      children: [
+        /* @__PURE__ */ m("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ m(d, { messageId: "components.leveragePresetChips.label" }) }),
+        /* @__PURE__ */ m(
+          g,
+          {
+            items: e.map((t) => ({
+              id: String(t),
+              item: `${l(t)}×`,
+              testId: s.chip
+            })),
+            activeTab: i,
+            onTabChange: (t) => a(Number(t))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  u as LeveragePresetChips,
+  s as LeveragePresetChipsTest
+};