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

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

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

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

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

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

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

package/dist/esm/components/base/page-title/index.js

@@ -1,6 +1,7 @@
-import { PageTitle as o } from "./page-title.js";
-import { PageTitleTest as T } from "./constants.js";
+import { PageHeadProvider as o, PageTitle as t } from "./page-title.js";
+import { PageTitleTest as P } from "./constants.js";
 export {
-  o as PageTitle,
-  T as PageTitleTest
+  o as PageHeadProvider,
+  t as PageTitle,
+  P as PageTitleTest
 };

package/dist/esm/components/base/page-title/page-title.js

@@ -1,38 +1,46 @@
-import { jsxs as c, Fragment as d, jsx as g } from "react/jsx-runtime";
-import { useIntlTyped as T } from "../../typed-intl/index.js";
-import { Typography as x } from "../../typography/typography.js";
-import { PageTitleTest as a } from "./constants.js";
-function r(t) {
+import { jsx as s, jsxs as g, Fragment as p } from "react/jsx-runtime";
+import { createContext as x, useContext as T } from "react";
+import { useIntlTyped as l } from "../../typed-intl/index.js";
+import { Typography as u } from "../../typography/typography.js";
+import { PageTitleTest as y } from "./constants.js";
+const m = x(null);
+function b({
+  children: t,
+  render: e
+}) {
+  return /* @__PURE__ */ s(m.Provider, { value: e, children: t });
+}
+function n(t) {
   return typeof t == "string" || !!t && typeof t == "object" && "messageId" in t;
 }
-function i(t, o) {
-  return o === void 0 ? "" : typeof o == "string" ? o : t.formatMessage(o);
+function i(t, e) {
+  return e === void 0 ? "" : typeof e == "string" ? e : t.formatMessage(e);
 }
-function j({
+function I({
   title: t,
-  browserTitle: o,
-  head: s,
-  as: m = "h1",
+  browserTitle: e,
+  as: d = "h1",
   className: f
 }) {
-  const e = T(), p = r(t) ? i(e, t) : t, n = i(
-    e,
-    o ?? (r(t) ? t : void 0)
+  const o = l(), c = T(m), a = n(t) ? i(o, t) : t, r = i(
+    o,
+    e ?? (n(t) ? t : void 0)
   );
-  return /* @__PURE__ */ c(d, { children: [
-    n ? s?.(n) : null,
-    /* @__PURE__ */ g(
-      x,
+  return /* @__PURE__ */ g(p, { children: [
+    r ? c?.(r) : null,
+    /* @__PURE__ */ s(
+      u,
       {
-        as: m,
+        as: d,
         className: f ?? "m-0 text-3xl leading-none font-medium",
-        "data-testid": a.root,
-        children: p
+        "data-testid": y.root,
+        children: a
       }
     )
   ] });
 }
 export {
-  j as PageTitle,
-  a as PageTitleTest
+  b as PageHeadProvider,
+  I as PageTitle,
+  y as PageTitleTest
 };

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

@@ -1,58 +1,51 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { FormattedMessageTyped as d } from "../../typed-intl/index.js";
-import { VerticalIndicator as i } from "../../vertical-indicator/vertical-indicator.js";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
+import { VerticalIndicator as m } from "../../vertical-indicator/vertical-indicator.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentTemplate as m } from "../../../utils/format-money.js";
+import { percentTemplate as a } from "../../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-import { SideCard as n } from "../side-card/side-card.js";
-import { PoolApyBreakdownCardTest as p } from "./constants.js";
-function t({
+import { SideCard as d } from "../side-card/side-card.js";
+import { PoolApyBreakdownCardTest as i } from "./constants.js";
+function e({
   title: r,
-  value: e
+  value: t
 }) {
   return /* @__PURE__ */ o(
-    i,
+    m,
     {
       size: "sm",
-      label: /* @__PURE__ */ o(d, { messageId: r }),
-      value: /* @__PURE__ */ o("span", { "data-testid": p.value, children: e === void 0 ? "—" : m(e / 100) })
+      label: /* @__PURE__ */ o(n, { messageId: r }),
+      value: /* @__PURE__ */ o("span", { "data-testid": i.value, children: t === void 0 ? "—" : a(t / 100) })
     }
   );
 }
-function T({
+function I({
   data: r
 }) {
-  return /* @__PURE__ */ a(
-    n,
+  return /* @__PURE__ */ p(
+    d,
     {
       title: "components.poolApyBreakdownCard.title",
-      testId: p.root,
+      testId: i.root,
       children: [
         /* @__PURE__ */ o(
-          t,
+          e,
           {
-            title: "components.poolApyBreakdownCard.apy1d",
-            value: r?.apy1d
+            title: "components.poolApyBreakdownCard.organicApy",
+            value: r?.organicApy
           }
         ),
         /* @__PURE__ */ o(
-          t,
+          e,
           {
-            title: "components.poolApyBreakdownCard.apy7d",
-            value: r?.apy7d
-          }
-        ),
-        /* @__PURE__ */ o(
-          t,
-          {
-            title: "components.poolApyBreakdownCard.apy30d",
-            value: r?.apy30d
+            title: "components.poolApyBreakdownCard.incentiveApy",
+            value: r?.incentiveApy
           }
         )
       ]
@@ -60,6 +53,6 @@ function T({
   );
 }
 export {
-  T as PoolApyBreakdownCard,
-  p as PoolApyBreakdownCardTest
+  I as PoolApyBreakdownCard,
+  i as PoolApyBreakdownCardTest
 };

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

@@ -0,0 +1,8 @@
+class t {
+  static root = "position-assets-root";
+  static row = "position-assets-row";
+  static empty = "position-assets-empty";
+}
+export {
+  t as PositionAssetsTest
+};

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

@@ -0,0 +1,6 @@
+import { PositionAssetsTest as t } from "./constants.js";
+import { PositionAssets as i } from "./position-assets.js";
+export {
+  i as PositionAssets,
+  t as PositionAssetsTest
+};