@gearbox-protocol/ui-kit 3.14.0-next.14 → 3.14.0-next.15

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

@@ -0,0 +1,79 @@
+import { jsxs as e, jsx as o, Fragment as c } from "react/jsx-runtime";
+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 "react";
+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 { SkeletonStack as C } from "../../../../skeleton/skeleton-stack.js";
+import { VSpace as l } from "../../../../vspace/vspace.js";
+import { shouldShowTransactionProgressStepper as S } from "../stepper/computeTransactionExecutionSteps.js";
+import { TransactionProgressStepper as P } from "../stepper/TransactionProgressStepper.js";
+import { computeTransactionConfirmDialogLayout as y } from "./computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as r, transactionConfirmShellContentVariants as N } from "./constants.js";
+function K({
+  phase: h = "confirm",
+  header: a,
+  preview: p,
+  previewLoading: d = !1,
+  previewError: m,
+  previewErrorTitle: f = "Unable to preview transaction",
+  previewClassName: u = "flex max-h-[50vh] min-w-0 flex-col gap-4 overflow-x-hidden overflow-y-auto",
+  execution: w,
+  progressSteps: i,
+  renderProgressStepLabel: n,
+  result: s,
+  className: v,
+  "data-testid": x = r.root
+}) {
+  const g = !!(i && n && S(i)), t = y(h, g);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: N({ className: v }),
+      "data-testid": x,
+      children: [
+        a,
+        a ? /* @__PURE__ */ o(l, { height: 16 }) : null,
+        t.showResult && s ? /* @__PURE__ */ o("div", { "data-testid": r.result, children: s }) : null,
+        t.showResult ? null : /* @__PURE__ */ e(c, { children: [
+          t.showPreview ? /* @__PURE__ */ o("div", { className: u, children: d ? /* @__PURE__ */ o(C, { lines: 3 }) : m ? /* @__PURE__ */ o(
+            T,
+            {
+              err: m,
+              title: f
+            }
+          ) : p }) : null,
+          t.showPreview && t.showExecution ? /* @__PURE__ */ o(l, { height: 24 }) : null,
+          t.showExecution ? /* @__PURE__ */ o(
+            "div",
+            {
+              className: "min-w-0 w-full",
+              "data-testid": r.execution,
+              children: w
+            }
+          ) : null
+        ] }),
+        t.showProgressStepper && i && n ? /* @__PURE__ */ e(c, { children: [
+          /* @__PURE__ */ o(l, { height: 24 }),
+          /* @__PURE__ */ o("div", { "data-testid": r.progress, children: /* @__PURE__ */ o(
+            P,
+            {
+              steps: i,
+              renderLabel: n
+            }
+          ) })
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  K as TransactionConfirmShell
+};

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

@@ -0,0 +1,35 @@
+function r(s, e) {
+  switch (s) {
+    case "confirm":
+      return {
+        showPreview: !0,
+        showExecution: !0,
+        showProgressStepper: e,
+        showResult: !1
+      };
+    case "awaiting_receipt":
+      return {
+        showPreview: !0,
+        showExecution: !0,
+        showProgressStepper: e,
+        showResult: !1
+      };
+    case "success":
+      return {
+        showPreview: !1,
+        showExecution: !1,
+        showProgressStepper: e,
+        showResult: !0
+      };
+    case "failure":
+      return {
+        showPreview: !1,
+        showExecution: !1,
+        showProgressStepper: !1,
+        showResult: !0
+      };
+  }
+}
+export {
+  r as computeTransactionConfirmDialogLayout
+};

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

@@ -1,12 +1,17 @@
 import { cva as o } from "class-variance-authority";
-class i {
+class r {
   static root = "transaction-confirm-dialog-root";
   static execution = "transaction-confirm-dialog-execution";
+  static progress = "transaction-confirm-dialog-progress";
+  static result = "transaction-confirm-dialog-result";
 }
-const n = o(
-  "w-full max-w-full md:w-[560px] md:max-w-[560px]"
+const i = o(
+  "box-border w-full max-w-full md:w-[560px] md:max-w-[560px]"
+), n = o(
+  "box-border w-full min-w-0 max-w-full"
 );
 export {
-  i as TransactionConfirmDialogTest,
-  n as transactionConfirmDialogShellVariants
+  r as TransactionConfirmDialogTest,
+  i as transactionConfirmDialogShellVariants,
+  n as transactionConfirmShellContentVariants
 };

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

@@ -1,9 +1,20 @@
-import { TransactionConfirmDialogTest as a, transactionConfirmDialogShellVariants as i } from "./constants.js";
-import { TransactionConfirmDialogView as t } from "./TransactionConfirmDialogView.js";
-import { useTransactionConfirmDialog as f } from "./useTransactionConfirmDialog.js";
+import { computeTransactionConfirmDialogLayout as n } from "./computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as i, transactionConfirmDialogShellVariants as t, transactionConfirmShellContentVariants as e } from "./constants.js";
+import { TransactionConfirmDialogView as f } from "./TransactionConfirmDialogView.js";
+import { TransactionConfirmPageView as l } from "./TransactionConfirmPageView.js";
+import { TransactionConfirmShell as C } from "./TransactionConfirmShell.js";
+import { TransactionConfirmShellTest as p } from "./TransactionConfirmShell.constants.js";
+import { useTransactionConfirmDialog as g } from "./useTransactionConfirmDialog.js";
+import { useTransactionConfirmFlow as h } from "./useTransactionConfirmFlow.js";
 export {
-  a as TransactionConfirmDialogTest,
-  t as TransactionConfirmDialogView,
-  i as transactionConfirmDialogShellVariants,
-  f as useTransactionConfirmDialog
+  i as TransactionConfirmDialogTest,
+  f as TransactionConfirmDialogView,
+  l as TransactionConfirmPageView,
+  C as TransactionConfirmShell,
+  p as TransactionConfirmShellTest,
+  n as computeTransactionConfirmDialogLayout,
+  t as transactionConfirmDialogShellVariants,
+  e as transactionConfirmShellContentVariants,
+  g as useTransactionConfirmDialog,
+  h as useTransactionConfirmFlow
 };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,36 @@
+import { useState as o, useCallback as e } from "react";
+function k() {
+  const [a, c] = o(!1), [u, s] = o("confirm"), [f, i] = o(void 0), [l, r] = o(0), t = e(() => {
+    s("confirm"), i(void 0), r(0);
+  }, []), m = e(() => {
+    t(), c(!0);
+  }, [t]), p = e(() => {
+    c(!1), t();
+  }, [t]), b = e(() => {
+    r((n) => n + 1);
+  }, []), g = e(
+    (n) => {
+      i(n), s("awaiting_receipt");
+    },
+    []
+  ), h = e(() => {
+    s("success");
+  }, []), d = e(() => {
+    s("failure");
+  }, []);
+  return {
+    open: a,
+    phase: u,
+    submittedTx: f,
+    refreshNonce: l,
+    openDialog: m,
+    closeDialog: p,
+    bumpRefreshNonce: b,
+    beginAwaitingReceipt: g,
+    markSuccess: h,
+    markFailure: d
+  };
+}
+export {
+  k as useTransactionConfirmFlow
+};

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

@@ -0,0 +1,30 @@
+import { jsx as o, jsxs as a, Fragment as s } from "react/jsx-runtime";
+import { Button as f } from "../../../../buttons/button/button.js";
+import { SpinnerLoader as d } from "../../../../spinner-loader/spinner-loader.js";
+import { TransactionConfirmExecuteButtonTest as u } from "../result/constants.js";
+function B({
+  isLoading: t = !1,
+  disabled: e,
+  children: r,
+  width: n = "wide",
+  size: i = "lg",
+  ...m
+}) {
+  return /* @__PURE__ */ o(
+    f,
+    {
+      "data-testid": u.root,
+      width: n,
+      size: i,
+      disabled: e || t,
+      ...m,
+      children: t ? /* @__PURE__ */ a(s, { children: [
+        /* @__PURE__ */ o(d, { size: 18, width: 2 }),
+        r
+      ] }) : r
+    }
+  );
+}
+export {
+  B as TransactionConfirmExecuteButton
+};

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

@@ -0,0 +1,4 @@
+import { TransactionConfirmExecuteButton as n } from "./TransactionConfirmExecuteButton.js";
+export {
+  n as TransactionConfirmExecuteButton
+};

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

@@ -1,26 +1,62 @@
-import { TransactionConfirmDialogTest as e, transactionConfirmDialogShellVariants as t } from "./dialog/constants.js";
-import { TransactionConfirmDialogView as a } from "./dialog/TransactionConfirmDialogView.js";
-import { useTransactionConfirmDialog as m } from "./dialog/useTransactionConfirmDialog.js";
-import { useCalldataOperationPreview as s } from "./hooks/useCalldataOperationPreview.js";
-import { OperationPreviewContent as x } from "./preview/OperationPreviewContent.js";
-import { computeTransactionExecutionSteps as c, getTransactionExecutionStepRequirements as T } from "./stepper/computeTransactionExecutionSteps.js";
-import { TransactionStepperTest as C } from "./stepper/constants.js";
-import { HorizontalTransactionStepper as g } from "./stepper/HorizontalTransactionStepper.js";
-import { useCompletedStepsInSession as O } from "./stepper/useCompletedStepsInSession.js";
-import { PoolOperationConfirmSummaryTest as w } from "./summary/constants.js";
-import { PoolOperationConfirmSummary as v } from "./summary/PoolOperationConfirmSummary.js";
+import { TransactionConfirmAmountFieldTest as t, TransactionConfirmAmountPairTest as e } 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 c, transactionConfirmDialogShellVariants as T, transactionConfirmShellContentVariants as l } from "./dialog/constants.js";
+import { TransactionConfirmDialogView as C } from "./dialog/TransactionConfirmDialogView.js";
+import { TransactionConfirmPageView as S } from "./dialog/TransactionConfirmPageView.js";
+import { TransactionConfirmShell as P } from "./dialog/TransactionConfirmShell.js";
+import { TransactionConfirmShellTest as w } from "./dialog/TransactionConfirmShell.constants.js";
+import { useTransactionConfirmDialog as R } from "./dialog/useTransactionConfirmDialog.js";
+import { useTransactionConfirmFlow as F } from "./dialog/useTransactionConfirmFlow.js";
+import { TransactionConfirmExecuteButton as E } from "./execution/TransactionConfirmExecuteButton.js";
+import { useCalldataOperationPreview as O } from "./hooks/useCalldataOperationPreview.js";
+import { OperationPreviewContent as v } from "./preview/OperationPreviewContent.js";
+import { TransactionConfirmExecuteButtonTest as H, TransactionConfirmFailureResultTest as q, TransactionConfirmSuccessResultTest as y, TransactionConfirmTxHashRowTest as L } from "./result/constants.js";
+import { TransactionConfirmFailureResult as j } from "./result/TransactionConfirmFailureResult.js";
+import { TransactionConfirmSuccessIcon as z } from "./result/TransactionConfirmSuccessIcon.js";
+import { TransactionConfirmSuccessResult as J } from "./result/TransactionConfirmSuccessResult.js";
+import { TransactionConfirmTxHashRow as M } from "./result/TransactionConfirmTxHashRow.js";
+import { computeTransactionExecutionSteps as Q, getTransactionExecutionStepRequirements as U, shouldShowTransactionProgressStepper as W } from "./stepper/computeTransactionExecutionSteps.js";
+import { TransactionProgressStepperTest as Y } from "./stepper/constants.js";
+import { TransactionProgressStepper as _ } from "./stepper/TransactionProgressStepper.js";
+import { mergeCompletedStepsInSession as oo, mergeStepsSeenInSession as ro, useCompletedStepsInSession as to } from "./stepper/useCompletedStepsInSession.js";
+import { PoolOperationConfirmDetailsTest as no } from "./summary/constants.js";
+import { PoolOperationConfirmDetails as io } from "./summary/PoolOperationConfirmDetails.js";
 export {
-  g as HorizontalTransactionStepper,
-  x as OperationPreviewContent,
-  v as PoolOperationConfirmSummary,
-  w as PoolOperationConfirmSummaryTest,
-  e as TransactionConfirmDialogTest,
-  a as TransactionConfirmDialogView,
-  C as TransactionStepperTest,
-  c as computeTransactionExecutionSteps,
-  T as getTransactionExecutionStepRequirements,
-  t as transactionConfirmDialogShellVariants,
-  s as useCalldataOperationPreview,
-  O as useCompletedStepsInSession,
-  m as useTransactionConfirmDialog
+  v as OperationPreviewContent,
+  io as PoolOperationConfirmDetails,
+  no as PoolOperationConfirmDetailsTest,
+  a as TransactionConfirmAmountField,
+  t as TransactionConfirmAmountFieldTest,
+  s as TransactionConfirmAmountPair,
+  e as TransactionConfirmAmountPairTest,
+  c as TransactionConfirmDialogTest,
+  C as TransactionConfirmDialogView,
+  E as TransactionConfirmExecuteButton,
+  H as TransactionConfirmExecuteButtonTest,
+  j as TransactionConfirmFailureResult,
+  q as TransactionConfirmFailureResultTest,
+  S as TransactionConfirmPageView,
+  P as TransactionConfirmShell,
+  w as TransactionConfirmShellTest,
+  z as TransactionConfirmSuccessIcon,
+  J as TransactionConfirmSuccessResult,
+  y as TransactionConfirmSuccessResultTest,
+  M as TransactionConfirmTxHashRow,
+  L as TransactionConfirmTxHashRowTest,
+  _ as TransactionProgressStepper,
+  Y as TransactionProgressStepperTest,
+  f as computeTransactionConfirmDialogLayout,
+  Q as computeTransactionExecutionSteps,
+  U as getTransactionExecutionStepRequirements,
+  oo as mergeCompletedStepsInSession,
+  ro as mergeStepsSeenInSession,
+  W as shouldShowTransactionProgressStepper,
+  T as transactionConfirmDialogShellVariants,
+  l as transactionConfirmShellContentVariants,
+  O as useCalldataOperationPreview,
+  to as useCompletedStepsInSession,
+  R as useTransactionConfirmDialog,
+  F as useTransactionConfirmFlow
 };

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

@@ -0,0 +1,55 @@
+import { jsxs as s, jsx as e, Fragment as n } from "react/jsx-runtime";
+import { faXmark as o } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../../../../icons/fa-icon.js";
+import { VSpace as r } from "../../../../vspace/vspace.js";
+import { TransactionConfirmFailureResultTest as a } from "./constants.js";
+function v({
+  title: d,
+  description: m,
+  footerAction: i,
+  iconSize: t = 48
+}) {
+  const l = t + 32;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: "flex w-full flex-col items-center text-center",
+      "data-testid": a.root,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex items-center justify-center rounded-full border-2 border-destructive bg-destructive/10",
+            style: { width: l, height: l },
+            children: /* @__PURE__ */ e(
+              c,
+              {
+                icon: o,
+                className: "text-destructive",
+                style: { width: t, height: t }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(r, { height: 24 }),
+        /* @__PURE__ */ e("div", { className: "text-xl font-medium leading-tight md:text-2xl", children: d }),
+        /* @__PURE__ */ e(r, { height: 12 }),
+        /* @__PURE__ */ e("div", { className: "text-sm text-secondary-foreground", children: m }),
+        i ? /* @__PURE__ */ s(n, { children: [
+          /* @__PURE__ */ e(r, { height: 24 }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-full",
+              "data-testid": a.footer,
+              children: i
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  v as TransactionConfirmFailureResult
+};

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

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import { faCheck as t } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../../../../icons/fa-icon.js";
+import { useIsMobile as i } from "../../../../../hooks/use-media-query.js";
+function a() {
+  const e = i(), o = e ? 80 : 120, s = e ? 36 : 42;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "flex items-center justify-center rounded-full border-2 border-success",
+      style: { width: o, height: o },
+      children: /* @__PURE__ */ r(
+        c,
+        {
+          icon: t,
+          className: "text-success",
+          style: { width: s, height: s }
+        }
+      )
+    }
+  );
+}
+export {
+  a as TransactionConfirmSuccessIcon
+};

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

@@ -0,0 +1,60 @@
+import { jsxs as l, jsx as e, Fragment as r } from "react/jsx-runtime";
+import { VSpace as t } from "../../../../vspace/vspace.js";
+import { useIsMobile as u } from "../../../../../hooks/use-media-query.js";
+import { TransactionConfirmSuccessResultTest as i } from "./constants.js";
+import { TransactionConfirmSuccessIcon as f } from "./TransactionConfirmSuccessIcon.js";
+function v({
+  headline: o,
+  subtitle: d,
+  txHashRow: n,
+  footerAction: a
+}) {
+  const s = u(), m = s ? 20 : 32, h = s ? 12 : 16, c = s ? 24 : 32;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: "flex w-full flex-col items-center text-center",
+      "data-testid": i.root,
+      children: [
+        /* @__PURE__ */ e(t, { height: m }),
+        /* @__PURE__ */ e(f, {}),
+        /* @__PURE__ */ e(t, { height: 24 }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "text-xl font-medium leading-tight md:text-2xl",
+            "data-testid": i.headline,
+            children: o
+          }
+        ),
+        /* @__PURE__ */ e(t, { height: h }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "text-sm text-secondary-foreground",
+            "data-testid": i.subtitle,
+            children: d
+          }
+        ),
+        n ? /* @__PURE__ */ l(r, { children: [
+          /* @__PURE__ */ e(t, { height: c }),
+          /* @__PURE__ */ e("div", { className: "w-full text-center", children: n })
+        ] }) : null,
+        a ? /* @__PURE__ */ l(r, { children: [
+          /* @__PURE__ */ e(t, { height: c }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-full",
+              "data-testid": i.footer,
+              children: a
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  v as TransactionConfirmSuccessResult
+};

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

@@ -0,0 +1,21 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { TransactionConfirmTxHashRowTest as t } from "./constants.js";
+function o({
+  txHashLink: r,
+  addToWalletLink: a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex w-full flex-wrap items-center justify-center gap-6 sm:gap-8",
+      "data-testid": t.root,
+      children: [
+        a ? /* @__PURE__ */ i("div", { "data-testid": t.addToWallet, children: a }) : null,
+        /* @__PURE__ */ i("div", { "data-testid": t.txHashLink, children: r })
+      ]
+    }
+  );
+}
+export {
+  o as TransactionConfirmTxHashRow
+};

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

@@ -0,0 +1,24 @@
+class s {
+  static root = "transaction-confirm-success-result-root";
+  static headline = "transaction-confirm-success-result-headline";
+  static subtitle = "transaction-confirm-success-result-subtitle";
+  static footer = "transaction-confirm-success-result-footer";
+}
+class o {
+  static root = "transaction-confirm-failure-result-root";
+  static footer = "transaction-confirm-failure-result-footer";
+}
+class a {
+  static root = "transaction-confirm-tx-hash-row-root";
+  static txHashLink = "transaction-confirm-tx-hash-row-tx-hash-link";
+  static addToWallet = "transaction-confirm-tx-hash-row-add-to-wallet";
+}
+class r {
+  static root = "transaction-confirm-execute-button-root";
+}
+export {
+  r as TransactionConfirmExecuteButtonTest,
+  o as TransactionConfirmFailureResultTest,
+  s as TransactionConfirmSuccessResultTest,
+  a as TransactionConfirmTxHashRowTest
+};

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

@@ -0,0 +1,15 @@
+import { TransactionConfirmExecuteButtonTest as n, TransactionConfirmFailureResultTest as s, TransactionConfirmSuccessResultTest as t, TransactionConfirmTxHashRowTest as a } from "./constants.js";
+import { TransactionConfirmFailureResult as i } from "./TransactionConfirmFailureResult.js";
+import { TransactionConfirmSuccessIcon as T } from "./TransactionConfirmSuccessIcon.js";
+import { TransactionConfirmSuccessResult as m } from "./TransactionConfirmSuccessResult.js";
+import { TransactionConfirmTxHashRow as x } from "./TransactionConfirmTxHashRow.js";
+export {
+  n as TransactionConfirmExecuteButtonTest,
+  i as TransactionConfirmFailureResult,
+  s as TransactionConfirmFailureResultTest,
+  T as TransactionConfirmSuccessIcon,
+  m as TransactionConfirmSuccessResult,
+  t as TransactionConfirmSuccessResultTest,
+  x as TransactionConfirmTxHashRow,
+  a as TransactionConfirmTxHashRowTest
+};

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

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../../utils/z-index.js";
+import { TransactionProgressStepperTest as m } from "./constants.js";
+function c({ status: t }) {
+  const a = t === "active", r = t === "completed";
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: o(
+        "relative z-10 block size-[9px] shrink-0 rounded-full",
+        a && "bg-foreground",
+        r && "bg-gray-50",
+        !a && !r && "border border-gray-50 bg-transparent"
+      ),
+      "aria-hidden": !0
+    }
+  );
+}
+function w({
+  steps: t,
+  renderLabel: a
+}) {
+  return /* @__PURE__ */ e(
+    "ol",
+    {
+      className: "m-0 flex w-full list-none p-0",
+      "data-testid": m.root,
+      children: t.map((r, n) => {
+        const l = n === t.length - 1, s = r.status === "active";
+        return /* @__PURE__ */ i(
+          "li",
+          {
+            className: "flex min-w-0 flex-1 flex-col items-center",
+            "aria-current": s ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ i("div", { className: "flex w-full items-center", children: [
+                n > 0 ? /* @__PURE__ */ e("span", { className: "h-px min-w-0 flex-1 bg-gray-50", "aria-hidden": !0 }) : /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }),
+                /* @__PURE__ */ e(c, { status: r.status }),
+                l ? /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ e("span", { className: "h-px min-w-0 flex-1 bg-gray-50", "aria-hidden": !0 })
+              ] }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: o(
+                    "mt-3 max-w-full truncate px-1 text-center text-xs leading-snug",
+                    s ? "font-medium text-foreground" : "font-normal text-secondary-foreground"
+                  ),
+                  children: a(r)
+                }
+              )
+            ]
+          },
+          r.id
+        );
+      })
+    }
+  );
+}
+export {
+  w as TransactionProgressStepper
+};