@gearbox-protocol/ui-kit 3.14.0-next.60 → 3.14.0-next.61

package/dist/esm/components/composites/tx-preview/confirm/{preview/OperationPreviewContent.js → dialog/TransactionConfirmModalView.js}

@@ -1,19 +1,15 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import "@gearbox-protocol/sdk/preview";
-import "../../../../vertical-indicator/vertical-indicator.js";
-import "../../components/AddressAvatar.js";
+import { jsx as r } from "react/jsx-runtime";
+import "../../../../accordion/accordion.js";
 import "@gearbox-protocol/static";
 import "react";
 import "@fortawesome/free-solid-svg-icons";
 import "../../../../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-import "clsx";
-import "tailwind-merge";
+import { cn as c } from "../../../../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import "../../../../accordion/accordion.js";
 import "../../../../alert-badge/alert-badge.js";
 import "../../../../alert-dialog/alert-dialog.js";
 import "../../../../alert-modal/alert-modal.js";
@@ -44,7 +40,7 @@ import "../../../../checkbox/checkbox.js";
 import "../../../../checkbox/checkbox-labeled.js";
 import "../../../../checkbox-item/checkbox-item.js";
 import "../../../../client-adapters/styled-button/styled-button.js";
-import "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { StyledDialogContainer as s } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
 import "../../../../client-adapters/styled-rounded-image/styled-rounded-image.js";
 import "../../../../colored-text/colored-text.js";
 import "../../../../input/input.js";
@@ -59,9 +55,10 @@ import "../../../../table/grid-table.js";
 import "../../../../token-symbol/token-symbol.js";
 import "../../../../help-tip/help-tip.js";
 import "../../../../description/description.js";
-import "../../../../confirm-menu/confirm-menu.js";
+import { ConfirmMenu as C } from "../../../../confirm-menu/confirm-menu.js";
 import "../../../../dialog/dialog-modal-container.js";
 import "../../../../text-button/text-button.js";
+import "../../../../vertical-indicator/vertical-indicator.js";
 import "../../../../points-icon/points-icon.js";
 import "../../../../skeleton/skeleton.js";
 import "../../../../vertical-list/vertical-list.js";
@@ -74,12 +71,16 @@ import "../../../../icon-button/icon-button.js";
 import "../../../../separate-line/separate-line.js";
 import "../../../../tip-card/tip-card.js";
 import "../../../strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
+import "../amounts/TransactionConfirmAmountField.js";
+import { TransactionConfirmDialogTest as u, transactionConfirmModalContainerVariants as M, transactionConfirmDialogShellVariants as T } from "./constants.js";
+import { TransactionConfirmShell as g } from "./TransactionConfirmShell.js";
+import "../../../../spinner-loader/spinner-loader.js";
 import "../../../../currency-button/currency-button.js";
 import "../../../../detailed-apy/detailed-apy.js";
 import "../../../../detailed-page-title/detailed-page-title.js";
 import "../../../../detailed-page-title/detailed-page-title-copy-button.js";
 import "../../../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import "../../../../modal/modal.js";
+import { Modal as h } from "../../../../modal/modal.js";
 import "@radix-ui/react-dialog";
 import "../../../../dialog/dialog-container.js";
 import "../../../../dialog/dialog-content.js";
@@ -154,7 +155,6 @@ import "../../../../slider/slider.js";
 import "../../../../slider/slider-context.js";
 import "@radix-ui/react-slider";
 import "../../../../spinner/spinner.js";
-import "../../../../spinner-loader/spinner-loader.js";
 import "../../../../split-list/split-list.js";
 import "../../../../stat-badge/stat-badge.js";
 import "../../../../status-dot/status-dot.js";
@@ -167,29 +167,47 @@ import "../../../../theme-provider.js";
 import "../../../../time-to-liquidation/time-to-liquidation.js";
 import "../../../../toggle/toggle.js";
 import "../../../../with-filter-button/with-filter-button.js";
-import { OperationsCard as e } from "../../operations/OperationsCard.js";
-import { StateChangeCard as n } from "../../state-change/StateChangeCard.js";
-function uo({
-  sdk: r,
-  operation: t,
-  simulation: m,
-  isSimulating: p,
-  wallet: o
+function Li({
+  open: i,
+  onClose: t,
+  title: m,
+  titleAddon: p,
+  hideTitleAddonOnResult: n = !0,
+  containerClassName: a,
+  containerTestId: e,
+  shellTestId: d,
+  phase: o = "confirm",
+  ...l
 }) {
-  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ i(e, { sdk: r, transaction: t, wallet: o }),
-    /* @__PURE__ */ i(
-      n,
-      {
-        sdk: r,
-        data: t,
-        simulation: m,
-        isLoading: p,
-        wallet: o
-      }
-    )
-  ] });
+  if (!i) return null;
+  const f = o !== "confirm" && o !== "awaiting_receipt" && n ? void 0 : p;
+  return /* @__PURE__ */ r(h, { show: i, onClickOutside: t, zIndexLayer: "MODAL", children: /* @__PURE__ */ r(
+    s,
+    {
+      className: c(
+        T(),
+        a ?? M()
+      ),
+      "data-testid": e,
+      children: /* @__PURE__ */ r(
+        g,
+        {
+          ...l,
+          header: /* @__PURE__ */ r(
+            C,
+            {
+              title: m,
+              titleAddon: f,
+              onClose: t
+            }
+          ),
+          "data-testid": d ?? u.root,
+          phase: o
+        }
+      )
+    }
+  ) });
 }
 export {
-  uo as OperationPreviewContent
+  Li as TransactionConfirmModalView
 };

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

@@ -1,70 +1,53 @@
-import { jsx as r } from "react/jsx-runtime";
-import { StyledDialogContainer as w } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import { ConfirmMenu as D } from "../../../../confirm-menu/confirm-menu.js";
+import { jsx as i } from "react/jsx-runtime";
+import { StyledDialogContainer as l } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { ConfirmMenu as c } from "../../../../confirm-menu/confirm-menu.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as S } from "../../../../../utils/cn.js";
+import { cn as p } from "../../../../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { TransactionConfirmDialogTest as h, transactionConfirmDialogShellVariants as x } from "./constants.js";
-import { TransactionConfirmShell as A } from "./TransactionConfirmShell.js";
-function B({
-  onClose: i,
+import { TransactionConfirmDialogTest as s, transactionConfirmDialogShellVariants as C } from "./constants.js";
+import { TransactionConfirmShell as g } from "./TransactionConfirmShell.js";
+function M({
+  title: r,
+  titleAddon: t,
+  hideTitleAddonOnResult: n = !0,
+  containerClassName: m,
+  containerTestId: a,
+  shellTestId: e,
   phase: o = "confirm",
-  title: t,
-  titleAddon: n,
-  preview: a,
-  previewLoading: m = !1,
-  previewError: e,
-  previewErrorTitle: f = "Unable to preview transaction",
-  previewClassName: l,
-  execution: c,
-  progressSteps: d,
-  renderProgressStepLabel: p,
-  result: s,
-  hideTitleAddonOnResult: C = !0,
-  containerClassName: g,
-  containerTestId: T,
-  shellTestId: u
+  ...d
 }) {
-  const v = o !== "confirm" && o !== "awaiting_receipt" && C ? void 0 : n;
-  return /* @__PURE__ */ r(
-    w,
+  const f = o !== "confirm" && o !== "awaiting_receipt" && n ? void 0 : t;
+  return /* @__PURE__ */ i(
+    l,
     {
-      className: S(
-        x(),
-        g
+      className: p(
+        C(),
+        m
       ),
-      "data-testid": T,
-      children: /* @__PURE__ */ r(
-        A,
+      "data-testid": a,
+      children: /* @__PURE__ */ i(
+        g,
         {
-          phase: o,
-          header: /* @__PURE__ */ r(
-            D,
+          ...d,
+          header: /* @__PURE__ */ i(
+            c,
             {
-              title: t,
-              titleAddon: v,
-              onClose: i
+              title: r,
+              titleAddon: f,
+              onClose: void 0
             }
           ),
-          preview: a,
-          previewLoading: m,
-          previewError: e,
-          previewErrorTitle: f,
-          previewClassName: l,
-          execution: c,
-          progressSteps: d,
-          renderProgressStepLabel: p,
-          result: s,
-          "data-testid": u ?? h.root
+          "data-testid": e ?? s.root,
+          phase: o
         }
       )
     }
   );
 }
 export {
-  B as TransactionConfirmPageView
+  M as TransactionConfirmPageView
 };

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

@@ -1,5 +1,5 @@
-import { jsxs as l, jsx as i, Fragment as g } from "react/jsx-runtime";
-import { ErrorLineMessage as N } from "../../../../error-message/error-line-message.js";
+import { jsxs as s, jsx as i, Fragment as N } from "react/jsx-runtime";
+import { ErrorLineMessage as C } from "../../../../error-message/error-line-message.js";
 import "react-intl";
 import "../../../../buttons/button/button.js";
 import "../../../../dialog/dialog-container.js";
@@ -11,74 +11,78 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { SkeletonStack as C } from "../../../../skeleton/skeleton-stack.js";
-import { VSpace as a } from "../../../../vspace/vspace.js";
-import { TransactionProgressStepper as S } from "../stepper/TransactionProgressStepper.js";
-import { shouldShowTransactionProgressStepper as T } from "../stepper/transactionExecutionStepTypes.js";
-import { computeTransactionConfirmDialogLayout as k } from "./computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as r, transactionConfirmShellContentVariants as P, transactionConfirmPreviewScrollVariants as V } from "./constants.js";
-function O({
-  phase: c = "confirm",
+import { SkeletonStack as S } from "../../../../skeleton/skeleton-stack.js";
+import { VSpace as e } from "../../../../vspace/vspace.js";
+import { ProgressStepper as k } from "../stepper/ProgressStepper.js";
+import { shouldShowTransactionProgressStepper as P } from "../stepper/transactionExecutionStepTypes.js";
+import { computeTransactionConfirmDialogLayout as T } from "./computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as r, transactionConfirmShellContentVariants as V, transactionConfirmPreviewScrollVariants as j } from "./constants.js";
+function Q({
+  phase: h = "confirm",
   header: n,
-  preview: h,
-  previewLoading: d = !1,
-  previewError: s,
+  preview: d,
+  previewLoading: u = !1,
+  previewError: m,
   previewErrorTitle: p = "Unable to preview transaction",
-  previewClassName: f = V(),
-  execution: u,
+  previewClassName: f = j(),
+  execution: w,
   progressSteps: o,
-  renderProgressStepLabel: e,
-  result: m,
-  className: w,
-  "data-testid": v = r.root
+  renderProgressStepLabel: l,
+  result: c,
+  className: v,
+  "data-testid": x = r.root
 }) {
-  const x = !!(o && e && T(o)), t = k(c, x);
-  return /* @__PURE__ */ l(
+  const g = !!(o && l && P(o)), t = T(h, g);
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: P({ className: w }),
-      "data-testid": v,
+      className: V({ className: v }),
+      "data-testid": x,
       children: [
         n ? /* @__PURE__ */ i("div", { className: "shrink-0", children: n }) : null,
-        n ? /* @__PURE__ */ i(a, { height: 16 }) : null,
-        t.showResult && m ? /* @__PURE__ */ i(
+        n ? /* @__PURE__ */ i(e, { height: 16 }) : null,
+        t.showResult && c ? /* @__PURE__ */ i(
           "div",
           {
             className: "min-h-0",
             "data-testid": r.result,
-            children: m
+            children: c
           }
         ) : null,
-        t.showResult ? null : /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-          t.showPreview ? /* @__PURE__ */ i("div", { className: f, children: d ? /* @__PURE__ */ i(C, { lines: 3 }) : s ? /* @__PURE__ */ i(
-            N,
+        t.showResult ? null : /* @__PURE__ */ s("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+          t.showPreview ? /* @__PURE__ */ i("div", { className: f, children: u ? /* @__PURE__ */ i(S, { lines: 3 }) : m ? /* @__PURE__ */ i(
+            C,
             {
-              err: s,
+              err: m,
               title: p
             }
-          ) : h }) : null,
-          t.showPreview && t.showExecution ? /* @__PURE__ */ i(a, { height: 24 }) : null,
+          ) : d }) : null,
+          t.showPreview && t.showExecution ? /* @__PURE__ */ i(e, { height: 24 }) : null,
           t.showExecution ? /* @__PURE__ */ i(
             "div",
             {
               className: "min-w-0 w-full shrink-0",
               "data-testid": r.execution,
-              children: u
+              children: w
             }
           ) : null
         ] }),
-        t.showProgressStepper && o && e ? /* @__PURE__ */ l(g, { children: [
-          /* @__PURE__ */ i(a, { height: 24 }),
+        t.showProgressStepper && o && l ? /* @__PURE__ */ s(N, { children: [
+          /* @__PURE__ */ i(e, { height: 24 }),
           /* @__PURE__ */ i(
             "div",
             {
               className: "shrink-0",
               "data-testid": r.progress,
               children: /* @__PURE__ */ i(
-                S,
+                k,
                 {
-                  steps: o,
-                  renderLabel: e
+                  tone: "muted",
+                  steps: o.map((a) => ({
+                    id: a.id,
+                    status: a.status,
+                    label: l(a)
+                  }))
                 }
               )
             }
@@ -89,5 +93,5 @@ function O({
   );
 }
 export {
-  O as TransactionConfirmShell
+  Q as TransactionConfirmShell
 };

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

@@ -1,20 +1,14 @@
 import { computeTransactionConfirmDialogLayout as n } from "./computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as i, transactionConfirmDialogShellVariants as t, transactionConfirmModalContainerVariants as e, transactionConfirmPreviewScrollVariants as m, transactionConfirmShellContentVariants as f } from "./constants.js";
-import { TransactionConfirmDialogView as l } from "./TransactionConfirmDialogView.js";
+import { TransactionConfirmDialogTest as i, transactionConfirmDialogShellVariants as t, transactionConfirmModalContainerVariants as e, transactionConfirmPreviewScrollVariants as m, transactionConfirmShellContentVariants as s } from "./constants.js";
+import { TransactionConfirmModalView as l } from "./TransactionConfirmModalView.js";
 import { TransactionConfirmPageView as C } from "./TransactionConfirmPageView.js";
-import { TransactionConfirmShell as p } from "./TransactionConfirmShell.js";
-import { TransactionConfirmShellTest as g } from "./TransactionConfirmShell.constants.js";
-import { useTransactionConfirmDialog as D } from "./useTransactionConfirmDialog.js";
 export {
   i as TransactionConfirmDialogTest,
-  l as TransactionConfirmDialogView,
+  l as TransactionConfirmModalView,
   C as TransactionConfirmPageView,
-  p as TransactionConfirmShell,
-  g as TransactionConfirmShellTest,
   n as computeTransactionConfirmDialogLayout,
   t as transactionConfirmDialogShellVariants,
   e as transactionConfirmModalContainerVariants,
   m as transactionConfirmPreviewScrollVariants,
-  f as transactionConfirmShellContentVariants,
-  D as useTransactionConfirmDialog
+  s as transactionConfirmShellContentVariants
 };

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

@@ -1,57 +1,40 @@
 import { TransactionConfirmAmountFieldTest as n, TransactionConfirmAmountPairTest as t } from "./amounts/constants.js";
-import { TransactionConfirmAmountField as a } from "./amounts/TransactionConfirmAmountField.js";
-import { TransactionConfirmAmountPair as s } from "./amounts/TransactionConfirmAmountPair.js";
-import { computeTransactionConfirmDialogLayout as f } from "./dialog/computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as p, transactionConfirmDialogShellVariants as T, transactionConfirmModalContainerVariants as l, transactionConfirmPreviewScrollVariants as C, transactionConfirmShellContentVariants as x } from "./dialog/constants.js";
-import { TransactionConfirmDialogView as S } from "./dialog/TransactionConfirmDialogView.js";
-import { TransactionConfirmPageView as g } from "./dialog/TransactionConfirmPageView.js";
-import { TransactionConfirmShell as w } from "./dialog/TransactionConfirmShell.js";
-import { TransactionConfirmShellTest as R } from "./dialog/TransactionConfirmShell.constants.js";
-import { useTransactionConfirmDialog as d } from "./dialog/useTransactionConfirmDialog.js";
-import { TransactionConfirmExecuteButton as F } from "./execution/TransactionConfirmExecuteButton.js";
-import { OperationPreviewContent as v } from "./preview/OperationPreviewContent.js";
-import { TransactionConfirmExecuteButtonTest as E, TransactionConfirmFailureResultTest as H, TransactionConfirmSuccessResultTest as y, TransactionConfirmTxHashRowTest as I } from "./result/constants.js";
-import { TransactionConfirmFailureResult as M } from "./result/TransactionConfirmFailureResult.js";
-import { TransactionConfirmSuccessIcon as j } from "./result/TransactionConfirmSuccessIcon.js";
-import { TransactionConfirmSuccessResult as q } from "./result/TransactionConfirmSuccessResult.js";
-import { TransactionConfirmTxHashRow as G } from "./result/TransactionConfirmTxHashRow.js";
-import { ProgressStepperTest as K, TransactionProgressStepperTest as N } from "./stepper/constants.js";
-import { ProgressStepper as U } from "./stepper/ProgressStepper.js";
-import { TransactionProgressStepper as X } from "./stepper/TransactionProgressStepper.js";
-import { shouldShowTransactionProgressStepper as Z } from "./stepper/transactionExecutionStepTypes.js";
-import { PoolOperationConfirmDetailsTest as $ } from "./summary/constants.js";
-import { PoolOperationConfirmDetails as ro } from "./summary/PoolOperationConfirmDetails.js";
+import { TransactionConfirmAmountField as e } from "./amounts/TransactionConfirmAmountField.js";
+import { computeTransactionConfirmDialogLayout as s } from "./dialog/computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as f, transactionConfirmDialogShellVariants as c, transactionConfirmModalContainerVariants as T, transactionConfirmPreviewScrollVariants as p, transactionConfirmShellContentVariants as C } from "./dialog/constants.js";
+import { TransactionConfirmModalView as u } from "./dialog/TransactionConfirmModalView.js";
+import { TransactionConfirmPageView as S } from "./dialog/TransactionConfirmPageView.js";
+import { TransactionConfirmExecuteButton as h } from "./execution/TransactionConfirmExecuteButton.js";
+import { TransactionConfirmExecuteButtonTest as P, TransactionConfirmFailureResultTest as R, TransactionConfirmSuccessResultTest as V, TransactionConfirmTxHashRowTest as d } from "./result/constants.js";
+import { TransactionConfirmFailureResult as A } from "./result/TransactionConfirmFailureResult.js";
+import { TransactionConfirmSuccessIcon as B } from "./result/TransactionConfirmSuccessIcon.js";
+import { TransactionConfirmSuccessResult as H } from "./result/TransactionConfirmSuccessResult.js";
+import { TransactionConfirmTxHashRow as v } from "./result/TransactionConfirmTxHashRow.js";
+import { ProgressStepperTest as I } from "./stepper/constants.js";
+import { ProgressStepper as b } from "./stepper/ProgressStepper.js";
+import { shouldShowTransactionProgressStepper as k } from "./stepper/transactionExecutionStepTypes.js";
 export {
-  v as OperationPreviewContent,
-  ro as PoolOperationConfirmDetails,
-  $ as PoolOperationConfirmDetailsTest,
-  U as ProgressStepper,
-  K as ProgressStepperTest,
-  a as TransactionConfirmAmountField,
+  b as ProgressStepper,
+  I as ProgressStepperTest,
+  e as TransactionConfirmAmountField,
   n as TransactionConfirmAmountFieldTest,
-  s as TransactionConfirmAmountPair,
   t as TransactionConfirmAmountPairTest,
-  p as TransactionConfirmDialogTest,
-  S as TransactionConfirmDialogView,
-  F as TransactionConfirmExecuteButton,
-  E as TransactionConfirmExecuteButtonTest,
-  M as TransactionConfirmFailureResult,
-  H as TransactionConfirmFailureResultTest,
-  g as TransactionConfirmPageView,
-  w as TransactionConfirmShell,
-  R as TransactionConfirmShellTest,
-  j as TransactionConfirmSuccessIcon,
-  q as TransactionConfirmSuccessResult,
-  y as TransactionConfirmSuccessResultTest,
-  G as TransactionConfirmTxHashRow,
-  I as TransactionConfirmTxHashRowTest,
-  X as TransactionProgressStepper,
-  N as TransactionProgressStepperTest,
-  f as computeTransactionConfirmDialogLayout,
-  Z as shouldShowTransactionProgressStepper,
-  T as transactionConfirmDialogShellVariants,
-  l as transactionConfirmModalContainerVariants,
-  C as transactionConfirmPreviewScrollVariants,
-  x as transactionConfirmShellContentVariants,
-  d as useTransactionConfirmDialog
+  f as TransactionConfirmDialogTest,
+  h as TransactionConfirmExecuteButton,
+  P as TransactionConfirmExecuteButtonTest,
+  A as TransactionConfirmFailureResult,
+  R as TransactionConfirmFailureResultTest,
+  u as TransactionConfirmModalView,
+  S as TransactionConfirmPageView,
+  B as TransactionConfirmSuccessIcon,
+  H as TransactionConfirmSuccessResult,
+  V as TransactionConfirmSuccessResultTest,
+  v as TransactionConfirmTxHashRow,
+  d as TransactionConfirmTxHashRowTest,
+  s as computeTransactionConfirmDialogLayout,
+  k as shouldShowTransactionProgressStepper,
+  c as transactionConfirmDialogShellVariants,
+  T as transactionConfirmModalContainerVariants,
+  p as transactionConfirmPreviewScrollVariants,
+  C as transactionConfirmShellContentVariants
 };

package/dist/esm/components/composites/tx-preview/confirm/stepper/ProgressStepper.js

@@ -1,77 +1,82 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as a } from "../../../../../utils/cn.js";
+import { cn as o } from "../../../../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
 import { ProgressStepperTest as p } from "./constants.js";
 function x({
-  status: r
+  status: r,
+  tone: n
 }) {
-  const n = r === "active", e = r === "completed";
+  const a = r === "active", e = r === "completed";
   return /* @__PURE__ */ t(
     "span",
     {
-      className: a(
+      className: o(
         "relative z-10 block size-[9px] shrink-0 rounded-full",
-        // Reached steps (done + current) are solid white so the dot matches the
-        // white "reached" connector running into it; only upcoming stays hollow.
-        (n || e) && "bg-foreground",
-        !n && !e && "border border-gray-50 bg-transparent"
+        // Reached steps (done + current) are solid so the dot matches the
+        // "reached" connector running into it; only upcoming stays hollow.
+        a && "bg-foreground",
+        e && (n === "muted" ? "bg-gray-50" : "bg-foreground"),
+        !a && !e && "border border-gray-50 bg-transparent"
       ),
       "aria-hidden": !0
     }
   );
 }
-function c(r, n) {
-  return a(
+function d(r, n, a) {
+  return o(
     "h-px min-w-0 flex-1",
-    r ? "bg-foreground" : n ? "border-t border-dashed border-gray-50" : "bg-gray-50"
+    r ? a === "muted" ? "bg-gray-50" : "bg-foreground" : n ? "border-t border-dashed border-gray-50" : "bg-gray-50"
   );
 }
 function h(r) {
   return r === "completed" || r === "active";
 }
-function D({
+function F({
   steps: r,
-  className: n
+  tone: n = "foreground",
+  className: a
 }) {
   return /* @__PURE__ */ t(
     "ol",
     {
-      className: a("m-0 flex w-full list-none p-0", n),
+      className: o("m-0 flex w-full list-none p-0", a),
       "data-testid": p.root,
-      children: r.map((e, o) => {
-        const d = o === 0, m = o === r.length - 1, i = e.status === "active", l = r[o + 1], u = h(e.status), f = e.status === "completed" || e.status === "active" && !!l?.connectorMarker;
-        return /* @__PURE__ */ s(
+      children: r.map((e, s) => {
+        const m = s === 0, u = s === r.length - 1, l = e.status === "active", c = r[s + 1], f = h(e.status), g = e.status === "completed" || e.status === "active" && !!c?.connectorMarker;
+        return /* @__PURE__ */ i(
           "li",
           {
             className: "flex min-w-0 flex-1 flex-col items-center",
-            "aria-current": i ? "step" : void 0,
+            "aria-current": l ? "step" : void 0,
             children: [
-              /* @__PURE__ */ s("div", { className: "flex w-full items-center", children: [
-                d ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ s("span", { className: "relative flex min-w-0 flex-1 items-center", children: [
+              /* @__PURE__ */ i("div", { className: "flex w-full items-center", children: [
+                m ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ i("span", { className: "relative flex min-w-0 flex-1 items-center", children: [
                   /* @__PURE__ */ t(
                     "span",
                     {
-                      className: c(
-                        u,
-                        e.connectorDashed
+                      className: d(
+                        f,
+                        e.connectorDashed,
+                        n
                       ),
                       "aria-hidden": !0
                     }
                   ),
                   e.connectorMarker ? /* @__PURE__ */ t("span", { className: "-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 z-10 flex items-center", children: e.connectorMarker }) : null
                 ] }),
-                /* @__PURE__ */ t(x, { status: e.status }),
-                m ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ t(
+                /* @__PURE__ */ t(x, { status: e.status, tone: n }),
+                u ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ t(
                   "span",
                   {
-                    className: c(
-                      f,
-                      l?.connectorDashed
+                    className: d(
+                      g,
+                      c?.connectorDashed,
+                      n
                     ),
                     "aria-hidden": !0
                   }
@@ -80,9 +85,9 @@ function D({
               /* @__PURE__ */ t(
                 "span",
                 {
-                  className: a(
+                  className: o(
                     "mt-3 max-w-full truncate px-1 text-center text-xs leading-snug",
-                    i ? "font-medium text-foreground" : "font-normal text-secondary-foreground"
+                    l ? "font-medium text-foreground" : "font-normal text-secondary-foreground"
                   ),
                   children: e.label
                 }
@@ -96,5 +101,5 @@ function D({
   );
 }
 export {
-  D as ProgressStepper
+  F as ProgressStepper
 };

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

@@ -1,10 +1,6 @@
-class r {
-  static root = "transaction-progress-stepper-root";
-}
-class t {
+class s {
   static root = "progress-stepper-root";
 }
 export {
-  t as ProgressStepperTest,
-  r as TransactionProgressStepperTest
+  s as ProgressStepperTest
 };