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

package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js

@@ -1,67 +1,55 @@
-import { jsx as e, jsxs as s, Fragment as C } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
+import { jsx as e, jsxs as o, Fragment as v } from "react/jsx-runtime";
+import { NoValue as S } from "../../no-value/no-value.js";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
-import { formatMoney as S } from "../../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { formatMoney as I } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-import "../../points-icon/points-icon.js";
-import { UtilizationValue as y } from "../../base/values/scalars.js";
+import { UtilizationValue as B } from "../../base/values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
-import { FormattedMessageTyped as m } from "../../typed-intl/index.js";
-import { AllocationWheel as L } from "../../collateral-allocation-tooltip/allocation-wheel.js";
-import "@fortawesome/free-solid-svg-icons";
-import "../../icons/fa-icon.js";
-import "../../token-icon/token-icon.js";
-import "../../tooltip/simple-tooltip.js";
-import "../../tooltip/tooltip.js";
-import { NameCell as U } from "../../name-cell/name-cell.js";
-import { ShortString as x } from "../../short-string/short-string.js";
-import "react-intl";
-import "../../buttons/button/button.js";
-import { GridTableRow as k, GridTableCell as o } from "../../table/grid-table.js";
-import "../../skeleton/skeleton.js";
-import "../../table/table.js";
-import { TableLineSm as w, TableCellSm as a } from "../../table/table-sm.js";
-import { TokenSymbol as I } from "../../token-symbol/token-symbol.js";
-import { TokenTemplate as b } from "../../token-template/token-template.js";
-import { VerticalIndicator as P } from "../../vertical-indicator/vertical-indicator.js";
-import { PoolAssetsTableTest as n } from "./constants.js";
-function j(i, t) {
-  if (t !== 0n)
-    return Number(i * 10000n / t);
+import { useIntlTyped as L, FormattedMessageTyped as m } from "../../typed-intl/index.js";
+import { AllocationWheel as P } from "../../collateral-allocation-tooltip/allocation-wheel.js";
+import { HelpTip as U } from "../../help-tip/help-tip.js";
+import { NameCell as j } from "../../name-cell/name-cell.js";
+import { ShortString as E } from "../../short-string/short-string.js";
+import { GridTableRow as M, GridTableCell as s } from "../../table/grid-table.js";
+import { TableLineSm as V, TableCellSm as p } from "../../table/table-sm.js";
+import { TokenSymbol as D } from "../../token-symbol/token-symbol.js";
+import { TokenTemplate as N } from "../../token-template/token-template.js";
+import { VerticalIndicator as F } from "../../vertical-indicator/vertical-indicator.js";
+import { PoolAssetsTableTest as a } from "./constants.js";
+function G(l, t) {
+  return l >= t ? 1e4 : Number(l * 10000n / t);
 }
-function B(i, t) {
-  return t <= 0n || i <= 0n ? 0 : Number(i * 10000n / t) / 1e4;
+function H(l, t) {
+  return t <= 0n || l <= 0n ? 0 : Number(l * 10000n / t) / 1e4;
 }
-function he({
-  poolName: i,
-  asset: t,
-  underlyingToken: p,
-  last: T,
+function me({
+  asset: l,
+  underlyingToken: t,
+  last: y,
   isCompact: c,
   totalUsed: z,
-  colorIndex: A
+  colorIndex: A,
+  explorerUrl: d
 }) {
-  const { token: d, limit: r, used: l } = t, N = c ? 40 : 21, u = B(l.value, z), h = () => /* @__PURE__ */ e(
-    U,
+  const w = L(), { token: n, limit: r, used: i } = l, C = c ? 40 : 21, u = H(i.value, z), k = r.value < i.value, h = w.formatMessage({
+    messageId: "components.poolAssetsTable.capBelowExposure.tip"
+  }), f = () => /* @__PURE__ */ e(
+    j,
     {
-      leading: /* @__PURE__ */ e(I, { size: 32, token: d }),
-      title: /* @__PURE__ */ e(x, { maxLength: N, children: d.name }),
-      subtitle: /* @__PURE__ */ e(x, { maxLength: 20, children: i })
+      leading: /* @__PURE__ */ e(D, { size: 32, token: n }),
+      title: /* @__PURE__ */ e(E, { maxLength: C, children: n.symbol })
     }
-  ), f = () => /* @__PURE__ */ s(
+  ), g = () => /* @__PURE__ */ o(
     "div",
     {
       className: "flex items-center justify-end gap-2",
-      "data-testid": n.exposureCell,
+      "data-testid": a.exposureCell,
       children: [
         /* @__PURE__ */ e(
-          L,
+          P,
           {
             share: u,
             colorIndex: A,
@@ -69,80 +57,104 @@ function he({
           }
         ),
         /* @__PURE__ */ e(
-          P,
+          F,
           {
             value: /* @__PURE__ */ e(
-              b,
+              N,
               {
                 decimalPartLength: 2,
                 precision: 2,
                 showSymbol: !1,
-                token: p,
-                value: l.value
+                token: t,
+                value: i.value
               }
             ),
-            valueDescription: l.valueUsd === null ? "—" : S(l.valueUsd)
+            valueDescription: i.valueUsd === null ? /* @__PURE__ */ e(S, {}) : I(i.valueUsd)
           }
         )
       ]
     }
-  ), g = () => /* @__PURE__ */ e("div", { "data-testid": n.capCell, children: r.value === 0n ? /* @__PURE__ */ e("span", { children: "—" }) : /* @__PURE__ */ e(
-    b,
+  ), x = () => /* @__PURE__ */ o(
+    "span",
     {
-      decimalPartLength: 2,
-      precision: 2,
-      showSymbol: !1,
-      token: p,
-      value: r.value
+      className: "inline-flex items-center gap-1",
+      "data-testid": a.capCell,
+      children: [
+        /* @__PURE__ */ e(
+          N,
+          {
+            decimalPartLength: 2,
+            precision: 2,
+            showSymbol: !1,
+            token: t,
+            value: r.value
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "inline-flex w-3.5 shrink-0 justify-center", children: k && /* @__PURE__ */ o(v, { children: [
+          /* @__PURE__ */ e(
+            U,
+            {
+              "data-testid": a.capBelowExposureTip,
+              tabIndex: 0,
+              onClick: (b) => {
+                b.preventDefault(), b.stopPropagation();
+              },
+              children: h
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: h })
+        ] }) })
+      ]
     }
-  ) }), v = () => /* @__PURE__ */ e("div", { "data-testid": n.capUtilizationCell, children: /* @__PURE__ */ e(y, { data: j(l.value, r.value) }) });
+  ), T = () => /* @__PURE__ */ e("div", { "data-testid": a.capUtilizationCell, children: /* @__PURE__ */ e(B, { data: G(i.value, r.value) }) });
   return /* @__PURE__ */ e(
-    k,
+    M,
     {
-      last: T,
+      last: y,
       height: "auto",
-      className: "cursor-default",
+      href: d ? `${d}/address/${n.address}` : void 0,
+      target: "_blank",
       style: { minHeight: "75px" },
-      children: c ? /* @__PURE__ */ e(o, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ s(
-        w,
+      children: c ? /* @__PURE__ */ e(s, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ o(
+        V,
         {
           className: "w-full",
           columns: 3,
           columnsXs: 3,
-          title: h(),
+          title: f(),
           children: [
             /* @__PURE__ */ e(
-              a,
+              p,
               {
                 title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.exposure" }),
-                children: f()
+                children: g()
               }
             ),
             /* @__PURE__ */ e(
-              a,
+              p,
               {
                 title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.cap" }),
-                children: g()
+                children: x()
               }
             ),
             /* @__PURE__ */ e(
-              a,
+              p,
               {
                 title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.capUtilization" }),
-                children: v()
+                children: T()
               }
             )
           ]
         }
-      ) }) : /* @__PURE__ */ s(C, { children: [
-        /* @__PURE__ */ e(o, { className: "pl-4", size: "sm", textAlign: "left", children: h() }),
-        /* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: f() }),
-        /* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: g() }),
-        /* @__PURE__ */ e(o, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
+      ) }) : /* @__PURE__ */ o(v, { children: [
+        /* @__PURE__ */ e(s, { className: "pl-4", size: "sm", textAlign: "left", children: f() }),
+        /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: g() }),
+        /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: x() }),
+        /* @__PURE__ */ e(s, { className: "pr-4", size: "sm", textAlign: "right", children: T() })
       ] })
     }
   );
 }
 export {
-  he as PoolAssetsTableRow
+  me as PoolAssetsTableRow
 };

package/dist/esm/components/composites/pool-assets-table/pool-assets-table.js

@@ -2,59 +2,52 @@ import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { Card as f } from "../../cards/card/card.js";
 import "clsx";
 import "tailwind-merge";
-import "react";
 import "@fortawesome/free-solid-svg-icons";
+import "react";
 import "../../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-import "react-intl";
-import "../../buttons/button/button.js";
 import { GridTable as b, GridTableHeader as T, GridTableBody as h } from "../../table/grid-table.js";
-import "../../skeleton/skeleton.js";
-import "../../table/table.js";
 import { useIsMobile as u } from "../../../hooks/use-media-query.js";
 import { useObservedWidthKey as x } from "../../../hooks/use-observed-width-key.js";
 import { PoolAssetsTableTest as v } from "./constants.js";
 import { PoolAssetsTableHead as w } from "./pool-assets-table-head.js";
 import { PoolAssetsTableRow as A } from "./pool-assets-table-row.js";
 const C = 680;
-function q({
+function k({
   list: t,
-  poolName: s,
-  sort: p,
-  underlyingToken: l
+  sort: m,
+  underlyingToken: l,
+  explorerUrl: a
 }) {
-  const a = u(), { ref: d, widthKey: m } = x(), i = m > 0 ? m < C : a, n = t.reduce((r, e) => r + e.used.value, 0n);
-  return /* @__PURE__ */ o(f, { ref: d, className: "overflow-hidden rounded-lg p-2", children: /* @__PURE__ */ c(
+  const d = u(), { ref: n, widthKey: i } = x(), s = i > 0 ? i < C : d, p = t.reduce((e, r) => e + r.used.value, 0n);
+  return /* @__PURE__ */ o(f, { ref: n, className: "overflow-hidden rounded-lg p-2", children: /* @__PURE__ */ c(
     b,
     {
-      cols: i ? "1fr" : "1fr max-content max-content minmax(0,1fr)",
+      cols: s ? "1fr" : "1fr max-content max-content minmax(0,1fr)",
       "data-testid": v.root,
       gap: 0,
       size: "lg",
       wrapperClassName: "overflow-visible",
       children: [
-        !i && /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o(w, { sort: p }) }),
-        /* @__PURE__ */ o(h, { children: t.map((r, e) => /* @__PURE__ */ o(
+        !s && /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o(w, { sort: m }) }),
+        /* @__PURE__ */ o(h, { children: t.map((e, r) => /* @__PURE__ */ o(
           A,
           {
-            asset: r,
-            poolName: s,
+            asset: e,
             underlyingToken: l,
-            last: e === t.length - 1,
-            isCompact: i,
-            totalUsed: n,
-            colorIndex: e
+            last: r === t.length - 1,
+            isCompact: s,
+            totalUsed: p,
+            colorIndex: r,
+            explorerUrl: a
           },
-          r.token.address
+          e.token.address
         )) })
       ]
     }
   ) });
 }
 export {
-  q as PoolAssetsTable
+  k as PoolAssetsTable
 };

package/dist/esm/components/composites/pool-assets-table/sort-for-field.js

@@ -0,0 +1,7 @@
+const e = (o, r) => {
+  if (o === r?.field)
+    return r.sort;
+};
+export {
+  e as getSortForField
+};

package/dist/esm/components/composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js

@@ -1,18 +1,16 @@
-import { jsxs as n, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
 import { cva as g } from "class-variance-authority";
-import { FadeoutLoading as h } from "../../../../fadeout-loading/fadeout-loading.js";
-import { TokenIcon as u } from "../../../../token-icon/token-icon.js";
-import { TokenTemplate as v } from "../../../../token-template/token-template.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import { resolveAmountSlots as h } from "./amount-slots.js";
+import { FadeoutLoading as y } from "../../../../fadeout-loading/fadeout-loading.js";
+import { TokenIcon as v } from "../../../../token-icon/token-icon.js";
+import { TokenTemplate as A } from "../../../../token-template/token-template.js";
 import { cn as k } from "../../../../../utils/cn.js";
-import "sonner";
-import { formatMoney as N } from "../../../../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { APPROXIMATE_SYMBOL as N } from "../../../../../utils/format.js";
+import { formatMoney as T } from "../../../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../../../utils/z-index.js";
-import { TransactionConfirmAmountFieldTest as T } from "./constants.js";
-const b = "≈", F = g(
+import { TransactionConfirmAmountFieldTest as b } from "./constants.js";
+const S = g(
   "flex w-full items-center justify-between bg-gray-20 px-4 py-3",
   {
     variants: {
@@ -30,48 +28,46 @@ const b = "≈", F = g(
     defaultVariants: { position: "first", size: "md" }
   }
 );
-function E({
-  label: a,
-  primaryAmount: o,
-  secondaryAmount: t,
-  loading: d = !1,
-  position: m,
-  size: p = "md",
-  maxLength: c,
-  approximate: f
-}) {
-  const { isApproximate: i = !1, approximateSymbol: r = b } = f || {}, x = o && "node" in o ? o.node : /* @__PURE__ */ n(l, { children: [
-    o.token && /* @__PURE__ */ e(u, { token: o.token, size: 16 }),
-    /* @__PURE__ */ n("span", { children: [
-      i && /* @__PURE__ */ e("span", { children: r }),
+function U(r) {
+  const {
+    label: l,
+    loading: d = !1,
+    position: p,
+    size: c = "md",
+    maxLength: f,
+    approximate: u
+  } = r, { isApproximate: i = !1, approximateSymbol: a = N } = u || {}, { primaryAmount: o, secondaryAmount: n } = h(r), x = o && "node" in o ? o.node : /* @__PURE__ */ t(s, { children: [
+    o.token && /* @__PURE__ */ e(v, { token: o.token, size: 16 }),
+    /* @__PURE__ */ t("span", { children: [
+      i && /* @__PURE__ */ e("span", { children: a }),
       /* @__PURE__ */ e(
-        v,
+        A,
         {
           value: o?.value,
           token: o.token,
-          maxLength: c
+          maxLength: f
         }
       )
     ] })
-  ] }), s = t && "node" in t ? t.node : t?.valueUSD ? /* @__PURE__ */ n(l, { children: [
-    i && /* @__PURE__ */ e("span", { children: r }),
-    N(t.valueUSD)
+  ] }), m = n && "node" in n ? n.node : n?.valueUSD ? /* @__PURE__ */ t(s, { children: [
+    i && /* @__PURE__ */ e("span", { children: a }),
+    T(n.valueUSD)
   ] }) : null;
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: k(F({ position: m, size: p })),
-      "data-testid": T.root,
+      className: k(S({ position: p, size: c })),
+      "data-testid": b.root,
       children: [
-        /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground", children: a }),
-        /* @__PURE__ */ n("div", { className: "flex flex-col items-end gap-0.5", children: [
-          /* @__PURE__ */ e(h, { loading: d, children: /* @__PURE__ */ e("span", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground", children: x }) }),
-          s && /* @__PURE__ */ e("span", { className: "text-xs leading-[130%] text-secondary-foreground", children: s })
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground", children: l }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col items-end gap-0.5", children: [
+          /* @__PURE__ */ e(y, { loading: d, children: /* @__PURE__ */ e("span", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground", children: x }) }),
+          m && /* @__PURE__ */ e("span", { className: "text-xs leading-[130%] text-secondary-foreground", children: m })
         ] })
       ]
     }
   );
 }
 export {
-  E as TransactionConfirmAmountField
+  U as TransactionConfirmAmountField
 };

package/dist/esm/components/composites/tx-preview/confirm/amounts/amount-slots.js

@@ -0,0 +1,15 @@
+function t(n) {
+  if (n.primaryAmount !== void 0)
+    return {
+      primaryAmount: n.primaryAmount,
+      secondaryAmount: n.secondaryAmount
+    };
+  const { amount: o } = n;
+  return {
+    primaryAmount: { value: o?.value, token: o?.token },
+    secondaryAmount: { valueUSD: o?.valueUsd ?? void 0 }
+  };
+}
+export {
+  t as resolveAmountSlots
+};

package/dist/esm/components/composites/tx-preview/confirm/amounts/constants.js

@@ -1,10 +1,6 @@
-class t {
-  static root = "transaction-confirm-amount-field-root";
-}
-class a {
-  static root = "transaction-confirm-amount-pair-root";
-}
+const o = {
+  root: "transaction-confirm-amount-field-root"
+};
 export {
-  t as TransactionConfirmAmountFieldTest,
-  a as TransactionConfirmAmountPairTest
+  o as TransactionConfirmAmountFieldTest
 };

package/dist/esm/components/composites/tx-preview/confirm/amounts/index.js

@@ -1,7 +1,6 @@
-import { TransactionConfirmAmountFieldTest as r, TransactionConfirmAmountPairTest as t } from "./constants.js";
-import { TransactionConfirmAmountField as m } from "./TransactionConfirmAmountField.js";
+import { TransactionConfirmAmountFieldTest as r } from "./constants.js";
+import { TransactionConfirmAmountField as i } from "./TransactionConfirmAmountField.js";
 export {
-  m as TransactionConfirmAmountField,
-  r as TransactionConfirmAmountFieldTest,
-  t as TransactionConfirmAmountPairTest
+  i as TransactionConfirmAmountField,
+  r as TransactionConfirmAmountFieldTest
 };

package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.js

@@ -2,33 +2,27 @@ import { jsx as r, jsxs as l, Fragment as v } from "react/jsx-runtime";
 import { StyledDialogContainer as S } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
 import { ConfirmMenu as k } from "../../../../confirm-menu/confirm-menu.js";
 import { ErrorLineMessage as T } from "../../../../error-message/error-line-message.js";
-import "react-intl";
-import "../../../../buttons/button/button.js";
-import "../../../../dialog/dialog-container.js";
-import { useIntlTyped as N, FormattedMessageTyped as P } from "../../../../typed-intl/index.js";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as I } from "../../../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { Modal as N } from "../../../../modal/modal.js";
+import { SkeletonStack as P } from "../../../../skeleton/skeleton-stack.js";
+import { Spinner as I } from "../../../../spinner/spinner.js";
+import { useIntlTyped as M, FormattedMessageTyped as L } from "../../../../typed-intl/index.js";
+import { Typography as A } from "../../../../typography/typography.js";
+import { VSpace as p } from "../../../../vspace/vspace.js";
+import { cn as D } from "../../../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../../../utils/z-index.js";
-import { Modal as M } from "../../../../modal/modal.js";
-import { SkeletonStack as L } from "../../../../skeleton/skeleton-stack.js";
-import { Spinner as A } from "../../../../spinner/spinner.js";
-import { Typography as D } from "../../../../typography/typography.js";
-import { VSpace as f } from "../../../../vspace/vspace.js";
 import { ProgressStepper as V } from "../stepper/ProgressStepper.js";
 import { computeTransactionConfirmDialogLayout as z } from "./computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as m, transactionConfirmModalContainerVariants as E, transactionConfirmDialogShellVariants as R, transactionConfirmShellContentVariants as j, transactionConfirmPreviewScrollVariants as y } from "./constants.js";
-function me(e) {
+import { TransactionConfirmDialogTest as c } from "./constants.js";
+import { transactionConfirmModalContainerVariants as E, transactionConfirmDialogShellVariants as R, transactionConfirmShellContentVariants as j, transactionConfirmPreviewScrollVariants as y } from "./transaction-confirm-dialog.variants.js";
+function ie(e) {
   const {
     mode: t,
-    open: c = !0,
+    open: m = !0,
     phase: d = "confirm",
     onClose: a,
     title: n,
-    titleAddon: p,
+    titleAddon: f,
     hideTitleAddonOnResult: i = !0,
     body: o,
     className: s,
@@ -36,11 +30,11 @@ function me(e) {
     "data-testid": w,
     shellTestId: x
   } = e;
-  if (t === "dialog" && !c) return null;
-  const u = o.kind === "ready" ? d : "confirm", C = u !== "confirm" && u !== "awaiting_receipt" && i ? void 0 : p, h = /* @__PURE__ */ r(
+  if (t === "dialog" && !m) return null;
+  const u = o.kind === "ready" ? d : "confirm", C = u !== "confirm" && u !== "awaiting_receipt" && i ? void 0 : f, h = /* @__PURE__ */ r(
     S,
     {
-      className: I(
+      className: D(
         R(),
         t === "dialog" ? E() : null,
         s
@@ -52,7 +46,7 @@ function me(e) {
           body: o,
           phase: u,
           previewClassName: g,
-          testId: x ?? m.root,
+          testId: x ?? c.root,
           header: /* @__PURE__ */ r(
             k,
             {
@@ -65,16 +59,16 @@ function me(e) {
       )
     }
   );
-  return t === "page" ? h : /* @__PURE__ */ r(M, { show: !0, onClickOutside: a, zIndexLayer: "MODAL", children: h });
+  return t === "page" ? h : /* @__PURE__ */ r(N, { show: !0, onClickOutside: a, zIndexLayer: "MODAL", children: h });
 }
 function O({
   body: e,
   phase: t,
-  previewClassName: c,
+  previewClassName: m,
   testId: d,
   header: a
 }) {
-  const n = e.kind === "ready" ? e.stepper : void 0, p = !!(n && n.length > 0), i = z(t, p), o = e.kind === "ready" ? B(e, t) : void 0, s = e.kind === "ready" ? e.execution : void 0;
+  const n = e.kind === "ready" ? e.stepper : void 0, f = !!(n && n.length > 0), i = z(t, f), o = e.kind === "ready" ? B(e, t) : void 0, s = e.kind === "ready" ? e.execution : void 0;
   return /* @__PURE__ */ l(
     "div",
     {
@@ -82,12 +76,12 @@ function O({
       "data-testid": d,
       children: [
         /* @__PURE__ */ r("div", { className: "shrink-0", children: a }),
-        /* @__PURE__ */ r(f, { size: "sm" }),
+        /* @__PURE__ */ r(p, { size: "sm" }),
         i.showResult && o ? /* @__PURE__ */ r(
           "div",
           {
             className: "flex min-h-0 flex-1 flex-col",
-            "data-testid": m.result,
+            "data-testid": c.result,
             children: o
           }
         ) : null,
@@ -95,27 +89,27 @@ function O({
           i.showPreview ? /* @__PURE__ */ r(
             "div",
             {
-              className: c ?? y(),
+              className: m ?? y(),
               children: /* @__PURE__ */ r(F, { body: e })
             }
           ) : null,
-          i.showPreview && i.showExecution && s ? /* @__PURE__ */ r(f, { size: "md" }) : null,
+          i.showPreview && i.showExecution && s ? /* @__PURE__ */ r(p, { size: "md" }) : null,
           i.showExecution && s ? /* @__PURE__ */ r(
             "div",
             {
               className: "min-w-0 w-full shrink-0",
-              "data-testid": m.execution,
+              "data-testid": c.execution,
               children: s
             }
           ) : null
         ] }),
         i.showProgressStepper && n ? /* @__PURE__ */ l(v, { children: [
-          /* @__PURE__ */ r(f, { size: "md" }),
+          /* @__PURE__ */ r(p, { size: "md" }),
           /* @__PURE__ */ r(
             "div",
             {
               className: "shrink-0",
-              "data-testid": m.progress,
+              "data-testid": c.progress,
               children: /* @__PURE__ */ r(V, { tone: "muted", steps: n })
             }
           )
@@ -127,10 +121,10 @@ function O({
 function F({
   body: e
 }) {
-  const t = N();
+  const t = M();
   return e.kind === "loading" ? /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center gap-3 py-8", children: [
-    /* @__PURE__ */ r(A, {}),
-    /* @__PURE__ */ r(D, { variant: "bodySmall", color: "muted", as: "p", children: /* @__PURE__ */ r(P, { messageId: "components.transactionConfirm.previewLoading" }) })
+    /* @__PURE__ */ r(I, {}),
+    /* @__PURE__ */ r(A, { variant: "bodySmall", color: "muted", as: "p", children: /* @__PURE__ */ r(L, { messageId: "components.transactionConfirm.previewLoading" }) })
   ] }) : e.kind === "error" ? /* @__PURE__ */ r(
     T,
     {
@@ -139,7 +133,7 @@ function F({
         messageId: "components.transactionConfirm.previewErrorTitle"
       })
     }
-  ) : e.previewLoading ? /* @__PURE__ */ r(L, { lines: 3 }) : /* @__PURE__ */ r(v, { children: e.preview });
+  ) : e.previewLoading ? /* @__PURE__ */ r(P, { lines: 3 }) : /* @__PURE__ */ r(v, { children: e.preview });
 }
 function B(e, t) {
   if (e.result) {
@@ -148,5 +142,5 @@ function B(e, t) {
   }
 }
 export {
-  me as TransactionConfirmShell
+  ie as TransactionConfirmShell
 };