@gearbox-protocol/ui-kit 4.0.0-next.51 → 4.0.0-next.52

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

@@ -1,13 +1,12 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { faEllipsis as x } from "@fortawesome/free-solid-svg-icons";
-import { useState as E, Children as N, isValidElement as f } from "react";
-import { InfoPortalProvider as v, InfoPortalOut as O } from "../info-portal/info-portal.js";
-import { SegmentedTabs as k, SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as B } from "../segmented-tabs/segmented-tabs.js";
-import { Stack as e } from "../stack/stack.js";
-import { useTitleText as j } from "../text/use-title-text.js";
-import { Button as z } from "../../buttons/button/button.js";
-import { StyledDialogContainer as V } from "../../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import { ConfirmMenu as F } from "../../confirm-menu/confirm-menu.js";
+import { faEllipsis as _ } from "@fortawesome/free-solid-svg-icons";
+import { createContext as E, useState as N, Children as O, isValidElement as g, useRef as k, useContext as B } from "react";
+import { SegmentedTabs as j, SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as z } from "../segmented-tabs/segmented-tabs.js";
+import { Stack as i } from "../stack/stack.js";
+import { useTitleText as R } from "../text/use-title-text.js";
+import { Button as V } from "../../buttons/button/button.js";
+import { StyledDialogContainer as F } from "../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { ConfirmMenu as G } from "../../confirm-menu/confirm-menu.js";
 import "../../modal/modal.js";
 import "@radix-ui/react-dialog";
 import "../../dialog/dialog-container.js";
@@ -21,103 +20,114 @@ import "luxon";
 import "../../../utils/z-index.js";
 import "../../dialog/dialog-header.js";
 import "../../dialog/dialog-title.js";
-import { DialogModalContainer as G } from "../../dialog/dialog-modal-container.js";
+import { DialogModalContainer as L } from "../../dialog/dialog-modal-container.js";
 import "../../dialog/dialog-overlay.js";
 import "viem";
 import "../../input/input.js";
 import "../../label/label.js";
-import { FaIcon as L } from "../../icons/fa-icon.js";
-import { SimpleDropdown as U } from "../../simple-dropdown/simple-dropdown.js";
-import { SimpleDropdownMenuItem as q } from "../../simple-dropdown/simple-dropdown-menu-item.js";
-import { ManagePaneTest as i } from "./constants.js";
-function H(o) {
+import { FaIcon as U } from "../../icons/fa-icon.js";
+import { SimpleDropdown as q } from "../../simple-dropdown/simple-dropdown.js";
+import { SimpleDropdownMenuItem as H } from "../../simple-dropdown/simple-dropdown-menu-item.js";
+import { ManagePaneTest as e } from "./constants.js";
+const C = E({
+  current: null
+});
+function J({ children: o }) {
+  const p = k(null);
+  return /* @__PURE__ */ n(C.Provider, { value: p, children: o });
+}
+function K() {
+  const o = B(C);
+  return /* @__PURE__ */ n("div", { ref: o });
+}
+function Q(o) {
   return null;
 }
-function J(o) {
+function W(o) {
   return null;
 }
-function K(o) {
+function X(o) {
   return null;
 }
-function Q(o) {
-  return f(o) && o.type === H;
+function Y(o) {
+  return g(o) && o.type === Q;
 }
-function R(o) {
-  return f(o) && o.type === J;
+function Z(o) {
+  return g(o) && o.type === W;
 }
-function W(o) {
-  return f(o) && o.type === K;
+function $(o) {
+  return g(o) && o.type === X;
 }
-function _t({
+function Et({
   children: o,
-  activeTab: g,
+  activeTab: p,
   onTabChange: M,
   header: I,
-  footer: S,
-  actions: l,
-  testId: C
+  footer: P,
+  actions: d,
+  testId: S
 }) {
-  const d = j(), [P, h] = E(null), m = N.toArray(o), T = m.filter(Q), w = m.find(R), p = m.filter(W), A = T.filter((t) => !t.props.hidden), D = T.find((t) => t.props.id === g)?.props.children, a = w?.props.items ?? [], y = new Set(p.map((t) => t.props.id)), c = p.find((t) => t.props.id === P), b = () => h(null), u = [
-    ...A.map((t) => ({
+  const m = R(), [w, h] = N(null), c = O.toArray(o), T = c.filter(Y), A = c.find(Z), a = c.filter($), x = T.filter((t) => !t.props.hidden), D = T.find((t) => t.props.id === p)?.props.children, l = A?.props.items ?? [], y = new Set(a.map((t) => t.props.id)), u = a.find((t) => t.props.id === w), b = () => h(null), f = [
+    ...x.map((t) => ({
       id: t.props.id,
-      item: d(t.props.title),
+      item: m(t.props.title),
       disabled: t.props.disabled,
-      testId: i.tab(t.props.id)
+      testId: e.tab(t.props.id)
     })),
-    ...p.map((t) => ({
+    ...a.map((t) => ({
       id: t.props.id,
-      item: d(t.props.title),
-      testId: i.tab(t.props.id)
+      item: m(t.props.title),
+      testId: e.tab(t.props.id)
     }))
   ];
-  return /* @__PURE__ */ r(v, { children: [
-    /* @__PURE__ */ r(e, { gap: "md", "data-testid": C ?? i.root, children: [
+  return /* @__PURE__ */ r(J, { children: [
+    /* @__PURE__ */ r(i, { gap: "md", "data-testid": S ?? e.root, children: [
       I,
-      u.length > 0 || a.length > 0 || l ? /* @__PURE__ */ r(e, { direction: "row", align: "center", gap: "sm", children: [
-        u.length > 0 ? /* @__PURE__ */ n(
-          k,
+      f.length > 0 || l.length > 0 || d ? /* @__PURE__ */ r(i, { direction: "row", align: "center", gap: "sm", children: [
+        f.length > 0 ? /* @__PURE__ */ n(
+          j,
           {
-            items: u,
-            activeTab: g,
+            items: f,
+            activeTab: p,
             onTabChange: (t) => {
-              const s = p.find((_) => _.props.id === t);
+              const s = a.find((v) => v.props.id === t);
               if (s) {
                 s.props.children != null && h(s.props.id), s.props.onClick?.();
                 return;
               }
               y.has(t) || M(t);
             },
-            testId: i.tabs
+            testId: e.tabs
           }
         ) : null,
-        a.length > 0 || l ? /* @__PURE__ */ r(
-          e,
+        l.length > 0 || d ? /* @__PURE__ */ r(
+          i,
           {
             direction: "row",
             align: "center",
             gap: "sm",
             className: "ml-auto",
             children: [
-              a.length > 0 ? /* @__PURE__ */ n(
-                U,
+              l.length > 0 ? /* @__PURE__ */ n(
+                q,
                 {
                   title: /* @__PURE__ */ n(
-                    z,
+                    V,
                     {
                       type: "button",
                       variant: "ghost",
                       size: "md",
-                      className: B,
+                      className: z,
                       "aria-label": "More actions",
-                      "data-testid": i.dropdown,
-                      children: /* @__PURE__ */ n(L, { icon: x, className: "size-4" })
+                      "data-testid": e.dropdown,
+                      children: /* @__PURE__ */ n(U, { icon: _, className: "size-4" })
                     }
                   ),
                   asChild: !0,
                   placement: "bottom",
                   align: "end",
-                  children: a.map((t) => /* @__PURE__ */ n(
-                    q,
+                  children: l.map((t) => /* @__PURE__ */ n(
+                    H,
                     {
                       onSelect: t.onSelect,
                       children: t.title
@@ -126,54 +136,54 @@ function _t({
                   ))
                 }
               ) : null,
-              l
+              d
             ]
           }
         ) : null
       ] }) : null,
       /* @__PURE__ */ r(
-        V,
+        F,
         {
-          "data-testid": i.body,
+          "data-testid": e.body,
           "data-aside-form-top": !0,
           children: [
-            /* @__PURE__ */ n(e, { children: /* @__PURE__ */ n(O, {}) }),
+            /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(K, {}) }),
             D
           ]
         }
       ),
-      S
+      P
     ] }),
-    c?.props.children != null ? /* @__PURE__ */ n(
-      G,
+    u?.props.children != null ? /* @__PURE__ */ n(
+      L,
       {
         show: !0,
         onClickOutside: b,
         dialog: { padding: "xl" },
-        children: /* @__PURE__ */ r("div", { "data-testid": i.actionDialog, children: [
+        children: /* @__PURE__ */ r("div", { "data-testid": e.actionDialog, children: [
           /* @__PURE__ */ n(
-            F,
+            G,
             {
               onClose: b,
-              title: d(c.props.title)
+              title: m(u.props.title)
             }
           ),
-          c.props.children
+          u.props.children
         ] })
       }
     ) : null
   ] });
 }
-function xt({
+function Nt({
   children: o
 }) {
-  return /* @__PURE__ */ n(e, { gap: "sm", "data-testid": i.message, children: o });
+  return /* @__PURE__ */ n(i, { gap: "sm", "data-testid": e.message, children: o });
 }
 export {
-  _t as ManagePane,
-  K as ManagePaneActionTab,
-  xt as ManagePaneMessage,
-  H as ManagePaneTab,
-  J as ManagePaneTabDropdown,
-  i as ManagePaneTest
+  Et as ManagePane,
+  X as ManagePaneActionTab,
+  Nt as ManagePaneMessage,
+  Q as ManagePaneTab,
+  W as ManagePaneTabDropdown,
+  e as ManagePaneTest
 };

package/dist/esm/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.js

@@ -7,10 +7,10 @@ import "clsx";
 import "tailwind-merge";
 import "luxon";
 import "../../../utils/z-index.js";
-import { PointsIcon as b } from "../../points-icon/points-icon.js";
 import "viem";
 import "react";
 import { PoolApyBreakdownCardTest as l } from "./constants.js";
+import { PointsIcon as b } from "../../points-icon/points-icon.js";
 import { TokenIcon as C } from "../../token-icon/token-icon.js";
 import "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";

package/dist/esm/components/base/position-assets/position-assets.js

@@ -8,7 +8,6 @@ import { APPROXIMATE_SYMBOL as k } from "../../../utils/format.js";
 import { formatMoney as g } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import "../../points-icon/points-icon.js";
 import { TokenBigint as p } from "../values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
@@ -19,7 +18,7 @@ import { TokenSymbol as T } from "../../token-symbol/token-symbol.js";
 import { Typography as u } from "../../typography/typography.js";
 import { PositionAssetsTest as d } from "./constants.js";
 const x = 1, U = 20;
-function q({
+function V({
   assets: s,
   to: n,
   empty: a,
@@ -110,7 +109,7 @@ function M(s, n) {
   return s === void 0 ? n : s === null || n === null ? null : Math.max(s, n);
 }
 export {
-  q as PositionAssets,
+  V as PositionAssets,
   d as PositionAssetsTest,
   S as visibleAssets
 };

package/dist/esm/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.js

@@ -8,9 +8,9 @@ import "tailwind-merge";
 import { formatLeverage as d } from "../../../utils/format-leverage.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import { PointsIcon as $ } from "../../points-icon/points-icon.js";
 import "viem";
 import "react";
+import { PointsIcon as $ } from "../../points-icon/points-icon.js";
 import { TokenIcon as j } from "../../token-icon/token-icon.js";
 import { FormattedMessageTyped as r } from "../../typed-intl/index.js";
 import "../../tooltip/simple-tooltip.js";

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

@@ -1,13 +1,12 @@
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { createContext as E, useContext as q, useMemo as d, Children as N, useRef as T, useEffect as D, isValidElement as R } from "react";
-import { SectionHeading as F } from "../section-heading/section-heading.js";
+import { createContext as E, useContext as q, useMemo as f, Children as B, useRef as g, useEffect as z, isValidElement as N } from "react";
+import { SectionHeading as D } from "../section-heading/section-heading.js";
 import { Stack as u } from "../stack/stack.js";
-import { StickyBar as M } from "../sticky-bar/sticky-bar.js";
-import { useTitleText as j } from "../text/use-title-text.js";
-import { TabItem as P, TabControl as V } from "../../tab-control/tab-control.js";
+import { useTitleText as R } from "../text/use-title-text.js";
+import { TabItem as F, TabControl as M } from "../../tab-control/tab-control.js";
 import { TabberTest as S } from "./constants.js";
-import { useDetailScrollSpy as W } from "./use-detail-scroll-spy.js";
-const k = E({});
+import { useDetailScrollSpy as P } from "./use-detail-scroll-spy.js";
+const j = E({});
 function A({
   id: e,
   title: o,
@@ -16,7 +15,7 @@ function A({
   children: m,
   hideHeading: a = !1
 }) {
-  const l = q(k), i = j(), n = !a;
+  const l = q(j), i = R(), n = !a;
   return /* @__PURE__ */ r(
     "section",
     {
@@ -26,7 +25,7 @@ function A({
       "data-testid": S.section,
       children: /* @__PURE__ */ p(u, { gap: "md", children: [
         n || c ? /* @__PURE__ */ p("div", { className: "flex items-center justify-between gap-3", children: [
-          n ? /* @__PURE__ */ r(F, { children: i(s) }) : /* @__PURE__ */ r("span", {}),
+          n ? /* @__PURE__ */ r(D, { children: i(s) }) : /* @__PURE__ */ r("span", {}),
           c
         ] }) : null,
         m
@@ -35,72 +34,72 @@ function A({
   );
 }
 A.displayName = "TabberSection";
-function g(e) {
-  return R(e) && e.type === A;
+function T(e) {
+  return N(e) && e.type === A;
 }
-function z({
+function V({
   item: e,
   ...o
 }) {
   return /* @__PURE__ */ p("div", { className: "flex items-stretch overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:h-0 [scrollbar-width:none]", children: [
-    /* @__PURE__ */ r("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ r(V, { ...o, showBorder: !0 }) }),
+    /* @__PURE__ */ r("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ r(M, { ...o, showBorder: !0 }) }),
     e && /* @__PURE__ */ r("div", { className: "w-auto shrink-0 grow-0 basis-auto", children: e })
   ] });
 }
-function G({
+function W({
   children: e,
   observeKey: o,
   initialSection: s,
   testId: c,
   mobileManagePane: m
 }) {
-  const a = d(
-    () => N.toArray(e).filter(g),
+  const a = f(
+    () => B.toArray(e).filter(T),
     [e]
-  ), l = d(
+  ), l = f(
     () => a.filter((t) => t.props.beforeBar !== !0),
     [a]
-  ), i = l.map((t) => t.props.id).join("|"), n = d(
+  ), i = l.map((t) => t.props.id).join("|"), n = f(
     () => i === "" ? [] : i.split("|"),
     [i]
-  ), w = T({}), f = d(() => {
+  ), w = g({}), d = f(() => {
     const t = {
       ...w.current
     };
-    for (const B of n)
-      t[B] === void 0 && (t[B] = { current: null });
+    for (const y of n)
+      t[y] === void 0 && (t[y] = { current: null });
     return w.current = t, t;
-  }, [n]), I = j(), { activeSection: b, scrollToSection: h } = W(
-    f,
+  }, [n]), I = R(), { activeSection: b, scrollToSection: h } = P(
+    d,
     n,
     o
-  ), x = T(!1), v = T(o);
-  D(() => {
+  ), x = g(!1), v = g(o);
+  z(() => {
     if (o !== v.current && (v.current = o, x.current = !1), x.current || !o) return;
     const t = s ?? n[0];
-    x.current = !0, !(t === void 0 || t === n[0]) && f[t] !== void 0 && requestAnimationFrame(() => {
+    x.current = !0, !(t === void 0 || t === n[0]) && d[t] !== void 0 && requestAnimationFrame(() => {
       h(t);
     });
-  }, [o, s, h, n, f]);
+  }, [o, s, h, n, d]);
   const H = l.map((t) => ({
     id: t.props.id,
     item: /* @__PURE__ */ r(
-      P,
+      F,
       {
         selected: b === t.props.id,
         label: I(t.props.title)
       }
     )
-  })), C = N.toArray(e), y = C.filter(
-    (t) => g(t) && t.props.beforeBar === !0
+  })), C = B.toArray(e), k = C.filter(
+    (t) => T(t) && t.props.beforeBar === !0
   ), O = C.filter(
-    (t) => !(g(t) && t.props.beforeBar === !0)
+    (t) => !(T(t) && t.props.beforeBar === !0)
   );
-  return /* @__PURE__ */ r(u, { gap: "lg", "data-testid": c ?? S.root, children: /* @__PURE__ */ p(k.Provider, { value: f, children: [
-    y.length > 0 ? /* @__PURE__ */ r(u, { gap: "xl", children: y }) : null,
+  return /* @__PURE__ */ r(u, { gap: "lg", "data-testid": c ?? S.root, children: /* @__PURE__ */ p(j.Provider, { value: d, children: [
+    k.length > 0 ? /* @__PURE__ */ r(u, { gap: "xl", children: k }) : null,
     m,
-    /* @__PURE__ */ r(M, { testId: S.bar, children: /* @__PURE__ */ r(
-      z,
+    /* @__PURE__ */ r(G, { testId: S.bar, children: /* @__PURE__ */ r(
+      V,
       {
         state: {
           id: b,
@@ -116,12 +115,25 @@ function G({
     /* @__PURE__ */ r(u, { gap: "xl", children: O })
   ] }) });
 }
-function K(e) {
-  return R(e) && e.type === G;
+function G({
+  children: e,
+  testId: o
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "sticky top-0 z-20 -mx-1 px-1 pt-3 sm:pt-4 bg-background/75 backdrop-blur-md backdrop-saturate-150",
+      "data-testid": o,
+      children: e
+    }
+  );
+}
+function $(e) {
+  return N(e) && e.type === W;
 }
 export {
-  G as Tabber,
+  W as Tabber,
   A as TabberSection,
   S as TabberTest,
-  K as isTabber
+  $ as isTabber
 };

package/dist/esm/components/base/token-amount/token-amount.js

@@ -8,9 +8,9 @@ import { APPROXIMATE_SYMBOL as l } from "../../../utils/format.js";
 import { formatMoney as c } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import "../../points-icon/points-icon.js";
 import "viem";
 import "react";
+import "../../points-icon/points-icon.js";
 import "../../token-icon/token-icon.js";
 import "react-intl";
 import "../../tooltip/simple-tooltip.js";

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

@@ -1,28 +1,26 @@
 import { PositionShortLabelTest as t, ValueTest as r } from "./constants.js";
 import { NoValue as i } from "./no-value.js";
 import { PnlValue as p } from "./pnl-value.js";
-import { PointsValue as u } from "./points-value.js";
-import { PositionShortLabel as V } from "./position-short-label.js";
-import { PositionStatusBadge as n } from "./position-status-badge.js";
-import { PositionTypeBadge as P } from "./position-type-badge.js";
-import { PriceImpactValue as g, priceImpact as T } from "./price-impact-value.js";
-import { ApyValue as d, HealthFactorValue as h, LeverageValue as B, TokenBigint as L, UsdValue as S, UtilizationValue as y, bps as I } from "./scalars.js";
+import { PositionShortLabel as u } from "./position-short-label.js";
+import { PositionStatusBadge as V } from "./position-status-badge.js";
+import { PositionTypeBadge as n } from "./position-type-badge.js";
+import { PriceImpactValue as P, priceImpact as c } from "./price-impact-value.js";
+import { ApyValue as T, HealthFactorValue as b, LeverageValue as d, TokenBigint as h, UsdValue as B, UtilizationValue as L, bps as S } from "./scalars.js";
 export {
-  d as ApyValue,
-  h as HealthFactorValue,
-  B as LeverageValue,
+  T as ApyValue,
+  b as HealthFactorValue,
+  d as LeverageValue,
   i as NoValue,
   p as PnlValue,
-  u as PointsValue,
-  V as PositionShortLabel,
+  u as PositionShortLabel,
   t as PositionShortLabelTest,
-  n as PositionStatusBadge,
-  P as PositionTypeBadge,
-  g as PriceImpactValue,
-  L as TokenBigint,
-  S as UsdValue,
-  y as UtilizationValue,
+  V as PositionStatusBadge,
+  n as PositionTypeBadge,
+  P as PriceImpactValue,
+  h as TokenBigint,
+  B as UsdValue,
+  L as UtilizationValue,
   r as ValueTest,
-  I as bps,
-  T as priceImpact
+  S as bps,
+  c as priceImpact
 };

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

@@ -4,9 +4,9 @@ import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-import "../points-icon/points-icon.js";
 import "viem";
 import "react";
+import "../points-icon/points-icon.js";
 import "../token-icon/token-icon.js";
 import "react-intl";
 import "../tooltip/simple-tooltip.js";