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

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

@@ -0,0 +1,137 @@
+import { ASIDE_ALIGN_ANCHOR_ATTR as N, DETAIL_ASIDE_STICKY_OFFSET_TOP_PX as q, DETAIL_ASIDE_STICKY_OFFSET_BOTTOM_PX as X, ASIDE_FORM_TOP_ATTR as Y, DETAIL_ASIDE_SPACER_PX as G, DETAIL_ASIDE_MODE_ATTR as K } from "./constants.js";
+import { computeSpacerPx as V, computeStickyLimits as Q, computeScrollLimits as U, reconcileAsideStickyMode as W, computeRelativeTop as j } from "./geometry.js";
+import { findScrollParentFromElement as J } from "./scroll-parent.js";
+function Z() {
+  return document.querySelector(`[${N}]`);
+}
+function ie({
+  root: s,
+  content: t,
+  motion: r,
+  getAnchor: L = Z,
+  onSpacerChange: x,
+  offsetTop: T = q,
+  offsetBottom: _ = X
+}) {
+  let o = "relative", m = 0, R = G, g = null, i = null, v = null;
+  const F = 120, h = () => {
+    t.setAttribute(K, o);
+  }, a = (() => {
+    const e = s.parentElement;
+    return e ? J(e) : window;
+  })(), u = a === window ? null : a, y = () => u ? u.getBoundingClientRect().height : window.innerHeight, E = () => u ? u.scrollTop : window.scrollY, S = () => Q(
+    y(),
+    t.offsetHeight,
+    T,
+    _
+  ), b = () => {
+    const e = s.getBoundingClientRect(), n = t.getBoundingClientRect(), c = e.top + R, p = Math.max(
+      0,
+      s.offsetHeight - R - t.offsetHeight
+    );
+    return j(
+      n.top,
+      c,
+      p
+    );
+  }, P = (e) => {
+    r.removeAttribute("data-detail-aside-bounce"), r.offsetWidth, r.setAttribute("data-detail-aside-bounce", e);
+  }, B = (e) => {
+    e.target === r && r.removeAttribute("data-detail-aside-bounce");
+  }, d = (e = !1) => {
+    const n = o;
+    o = "top", t.style.position = "sticky", t.style.top = `${T}px`, h(), e && n !== "top" && P("top");
+  }, C = (e = !1) => {
+    const n = o;
+    o = "bottom", t.style.position = "sticky", t.style.top = `${Math.round(S().bottomTop)}px`, h(), e && n !== "bottom" && P("bottom");
+  }, A = (e) => {
+    o = "relative", t.style.position = "relative", t.style.top = `${Math.round(e)}px`, h();
+  }, k = () => {
+    A(b());
+  }, w = () => {
+    const e = L();
+    if (e) {
+      const p = (s.querySelector(`[${Y}]`) ?? t).getBoundingClientRect().top - t.getBoundingClientRect().top, l = V(
+        e.getBoundingClientRect().top,
+        s.getBoundingClientRect().top,
+        p
+      );
+      l !== R && (R = l, x(l));
+    }
+    const n = S();
+    if (n.contentHeight <= n.availableHeight) {
+      d();
+      return;
+    }
+    o === "top" ? d() : o === "bottom" ? C() : k();
+  }, I = () => {
+    const e = S();
+    if (e.contentHeight <= e.availableHeight) {
+      o !== "top" && d();
+      return;
+    }
+    const c = u?.getBoundingClientRect()?.top ?? 0, p = U(
+      c,
+      y(),
+      T,
+      _
+    ), l = t.getBoundingClientRect(), f = W({
+      limits: e,
+      contentTop: l.top,
+      contentBottom: l.bottom,
+      scrollLimits: p
+    });
+    if (f !== o) {
+      if (f === "top") {
+        d();
+        return;
+      }
+      if (f === "bottom") {
+        C();
+        return;
+      }
+      A(b());
+    }
+  }, O = () => {
+    i !== null && clearTimeout(i), i = setTimeout(() => {
+      i = null, m = E(), I();
+    }, F);
+  }, z = () => {
+    const e = E(), n = e - m;
+    if (m = e, n === 0) {
+      O();
+      return;
+    }
+    const c = S();
+    if (c.contentHeight <= c.availableHeight) {
+      d();
+      return;
+    }
+    const l = u?.getBoundingClientRect()?.top ?? 0, f = l + T, $ = l + y() - _;
+    n > 0 ? (o === "top" && A(b()), o === "relative" && t.getBoundingClientRect().bottom <= $ && C(!0)) : (o === "bottom" && A(b()), o === "relative" && t.getBoundingClientRect().top >= f && d(!0));
+  }, D = () => {
+    g === null && (g = window.requestAnimationFrame(() => {
+      g = null, z(), O();
+    }));
+  }, M = () => {
+    i !== null && (clearTimeout(i), i = null), m = E(), I();
+  }, H = () => {
+    w();
+  };
+  return {
+    bind() {
+      m = E(), w(), v = new ResizeObserver(w), v.observe(s), v.observe(t);
+      const e = L();
+      e && v.observe(e), r.addEventListener("animationend", B), a.addEventListener("scroll", D, { passive: !0 }), a.addEventListener("scrollend", M, {
+        passive: !0
+      }), window.addEventListener("resize", H, { passive: !0 });
+    },
+    unbind() {
+      g !== null && window.cancelAnimationFrame(g), i !== null && clearTimeout(i), v?.disconnect(), r.removeEventListener("animationend", B), a.removeEventListener("scroll", D), a.removeEventListener("scrollend", M), window.removeEventListener("resize", H);
+    }
+  };
+}
+export {
+  ie as createDetailAsideStickyController,
+  Z as defaultQuerySelectorAnchor
+};

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

@@ -0,0 +1,31 @@
+import { useState as p, useRef as S, useLayoutEffect as d } from "react";
+import { DETAIL_ASIDE_SPACER_PX as h } from "./constants.js";
+import { useDetailAsideAnchorGetter as D } from "./detail-aside-scope.js";
+import { defaultQuerySelectorAnchor as t, createDetailAsideStickyController as y } from "./sticky-controller.js";
+function R({
+  rootRef: i,
+  contentRef: s,
+  motionRef: f,
+  getAnchor: e = t,
+  enabled: a = !0
+}) {
+  const [A, l] = p(h), m = D(), r = S(e ?? t);
+  return r.current = m ?? e ?? t, d(() => {
+    if (!a) return;
+    const o = i.current, n = s.current, c = f.current;
+    if (!o || !n || !c) return;
+    const u = y({
+      root: o,
+      content: n,
+      motion: c,
+      getAnchor: () => r.current(),
+      onSpacerChange: l
+    });
+    return u.bind(), () => {
+      u.unbind();
+    };
+  }, []), { spacerPx: A };
+}
+export {
+  R as useDetailAsideSticky
+};

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

@@ -0,0 +1,72 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { Children as u, cloneElement as g, isValidElement as c } from "react";
+import { Stack as l } from "../stack/stack.js";
+import { isTabber as A } from "../tabber/tabber.js";
+import { Container as P } from "../../layout/container/container.js";
+import { useIsMedium as x } from "../../../hooks/use-media-query.js";
+import { DetailsViewTest as o } from "./constants.js";
+import { AsideAlignAnchor as y } from "./detail-aside/detail-aside-scope.js";
+import { DetailAsideScreenLayout as w } from "./detail-aside/detail-aside-screen-layout.js";
+function N(e) {
+  return c(e) && e.type === b;
+}
+function D(e) {
+  return c(e) && e.type === h;
+}
+function V(e) {
+  return c(e) && e.type === y;
+}
+function q({
+  children: e,
+  mainRef: s,
+  className: n,
+  testId: a
+}) {
+  const t = x(), i = u.toArray(e), m = i.find(N), f = i.find(D)?.props.children ?? null, d = f != null ? /* @__PURE__ */ r(l, { gap: "md", "data-testid": o.managePane, children: f }) : null;
+  return /* @__PURE__ */ r(l, { className: "flex-col-12", "data-testid": a ?? o.root, children: /* @__PURE__ */ r(l, { className: "px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r(
+    w,
+    {
+      className: n,
+      mainRef: s,
+      aside: !t && d ? d : null,
+      children: /* @__PURE__ */ r(P, { padding: !1, children: m ? g(m, {
+        mobileManagePane: t ? d : null
+      }) : null })
+    }
+  ) }) });
+}
+function b({
+  children: e,
+  mobileManagePane: s
+}) {
+  const n = u.toArray(e);
+  if (s == null)
+    return /* @__PURE__ */ r(l, { className: "gap-3.5", "data-testid": o.leftPane, children: n });
+  const a = n.findIndex(A);
+  if (a !== -1) {
+    const i = n[a];
+    return /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
+      n.slice(0, a),
+      c(i) ? g(i, {
+        mobileManagePane: s
+      }) : i,
+      n.slice(a + 1)
+    ] });
+  }
+  let t = n.findIndex(V);
+  return t !== -1 ? t += 1 : t = n.length, /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
+    n.slice(0, t),
+    s,
+    n.slice(t)
+  ] });
+}
+function h(e) {
+  return null;
+}
+h.displayName = "DetailsViewManagePane";
+export {
+  q as DetailsView,
+  b as DetailsViewLeftPane,
+  h as DetailsViewManagePane,
+  o as DetailsViewTest
+};

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

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

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

@@ -0,0 +1,8 @@
+class a {
+  static root = "health-factor-block-root";
+  static value = "health-factor-block-value";
+  static valueTo = "health-factor-block-value-to";
+}
+export {
+  a as HealthFactorBlockTest
+};

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

@@ -0,0 +1,52 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useTitleText as f } from "../text/use-title-text.js";
+import { FadeoutLoading as m } from "../../fadeout-loading/fadeout-loading.js";
+import { HealthFactor as s } from "../../health-factor/health-factor.js";
+import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
+import { VerticalIndicator as F } from "../../vertical-indicator/vertical-indicator.js";
+import { HealthFactorBlockTest as o } from "./constants.js";
+function b({
+  hf: e,
+  hfTo: a,
+  debt: r,
+  debtTo: p,
+  zone: l,
+  isLoading: i,
+  title: d,
+  tip: u,
+  testId: v
+}) {
+  const h = f(), c = a !== void 0;
+  return /* @__PURE__ */ t(
+    F,
+    {
+      align: "center",
+      dimPreviousValue: !1,
+      "data-testid": v ?? o.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ t(n, { messageId: "components.healthFactorBlock.label" }),
+      tip: u ?? /* @__PURE__ */ t(n, { messageId: "components.healthFactorBlock.tip" }),
+      value: /* @__PURE__ */ t(m, { loading: i, children: e === void 0 ? /* @__PURE__ */ t("span", { "data-testid": o.value, children: "—" }) : /* @__PURE__ */ t(
+        s,
+        {
+          value: e,
+          debt: r,
+          zone: c ? void 0 : l,
+          "data-testid": o.value
+        }
+      ) }),
+      valueTo: c ? /* @__PURE__ */ t(m, { loading: i, children: /* @__PURE__ */ t(
+        s,
+        {
+          value: a,
+          debt: p ?? r,
+          zone: l,
+          "data-testid": o.valueTo
+        }
+      ) }) : void 0
+    }
+  );
+}
+export {
+  b as HealthFactorBlock,
+  o as HealthFactorBlockTest
+};

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

@@ -0,0 +1,6 @@
+import { HealthFactorBlockTest as r } from "./constants.js";
+import { HealthFactorBlock as a } from "./health-factor-block.js";
+export {
+  a as HealthFactorBlock,
+  r as HealthFactorBlockTest
+};

package/dist/esm/components/base/history-chart/constants.js

@@ -0,0 +1,9 @@
+class a {
+  static root = "history-chart-root";
+  static empty = "history-chart-empty";
+  static error = "history-chart-error";
+  static range = (t) => `history-chart-range-${t}`;
+}
+export {
+  a as HistoryChartTest
+};

package/dist/esm/components/base/history-chart/history-chart.js

@@ -0,0 +1,70 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import "@gearbox-protocol/static";
+import "../../checkbox/checkbox.js";
+import "../../checkbox/checkbox-labeled.js";
+import "../../select/select.js";
+import { TradingView as h } from "../../trading-view/trading-view.js";
+import { useIntlTyped as A } from "../../typed-intl/index.js";
+import { HistoryChartTest as v } from "./constants.js";
+const M = ["1d", "1w", "1m", "1y", "max"], x = {
+  "1d": "1D",
+  "1w": "1W",
+  "1m": "1M",
+  "1y": "1Y",
+  max: "MAX"
+};
+function N({
+  data: t,
+  range: r,
+  onRange: m,
+  isLoading: d = !1,
+  error: c,
+  yMeasureUnit: e = "none",
+  height: f,
+  seriesTitles: i,
+  priceLines: a,
+  zones: s,
+  showCurrentValue: y = !1,
+  yScaleMin: l
+}) {
+  const n = A(), u = g(() => t ? (Array.isArray(t) ? t : [t]).map(C(i)) : void 0, [t, i]);
+  return /* @__PURE__ */ p("div", { "data-testid": v.root, children: /* @__PURE__ */ p(
+    h,
+    {
+      data: u,
+      isLoading: d,
+      error: c ? n.formatMessage({ messageId: "components.historyChart.error" }) : void 0,
+      emptyMessage: n.formatMessage({
+        messageId: "components.historyChart.empty"
+      }),
+      yMeasureUnit: Array.isArray(e) ? [...e] : e,
+      height: f,
+      rangeList: M.map((o) => ({
+        value: o,
+        label: x[o]
+      })),
+      range: r,
+      setRange: (o) => m(o),
+      priceLineOptions: a ? [...a] : void 0,
+      zoneOptions: s ? [...s] : void 0,
+      showCurrentValue: y,
+      yScaleMin: l,
+      disableZoom: !0
+    }
+  ) });
+}
+function C(t) {
+  return (r) => ({
+    id: r.metric,
+    title: t?.[r.metric] ?? r.metric,
+    data: r.points.map((m) => ({
+      time: m.timestamp,
+      value: m.value
+    }))
+  });
+}
+export {
+  N as HistoryChart,
+  v as HistoryChartTest
+};

package/dist/esm/components/base/history-chart/index.js

@@ -0,0 +1,6 @@
+import { HistoryChart as o } from "./history-chart.js";
+import { HistoryChartTest as s } from "./constants.js";
+export {
+  o as HistoryChart,
+  s as HistoryChartTest
+};

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

@@ -0,0 +1,166 @@
+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 { 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 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";
+export {
+  r as AmountInput,
+  Io as AmountInputTest,
+  ko as ApyValue,
+  P as AsideAlignAnchor,
+  m as BorrowRateBlock,
+  f as BorrowRateBlockTest,
+  x as ChartWithSideCard,
+  s as ChartWithSideCardTest,
+  g as DetailAsideScreenLayout,
+  d as DetailedPageTitle,
+  Mo as DetailedPageTitleTest,
+  k as DetailsView,
+  B as DetailsViewLeftPane,
+  A as DetailsViewManagePane,
+  Vo as DetailsViewTest,
+  C as HealthFactorBlock,
+  L as HealthFactorBlockTest,
+  Bo as HealthFactorValue,
+  w as HistoryChart,
+  Ho as HistoryChartTest,
+  h as InfoLine,
+  V as InfoList,
+  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,
+  a as TokenSelectPanel,
+  Lo as UsdValue,
+  yo as UtilizationValue,
+  To as ValueTest,
+  Fe as isTabber,
+  Ue as useDetailScrollSpy,
+  We as useTitleText
+};

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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,57 @@
+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__ */ e(p, { gap: "sm", "data-testid": i.root, children: t });
+}
+function y({
+  title: t,
+  value: o,
+  tip: n,
+  valueDescription: a,
+  valueTo: s,
+  testId: c
+}) {
+  const m = r();
+  return /* @__PURE__ */ e(
+    l,
+    {
+      label: m(t),
+      tip: n,
+      value: o,
+      valueTo: s,
+      valueDescription: a,
+      size: "sm",
+      align: "center",
+      "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 {
+  y as InfoLine,
+  h as InfoList,
+  i as InfoListTest,
+  L as InfoSectionTitle
+};

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

@@ -0,0 +1,5 @@
+import { InfoPortalOut as t, InfoPortalProvider as f } from "./info-portal.js";
+export {
+  t as InfoPortalOut,
+  f as InfoPortalProvider
+};