@gearbox-protocol/ui-kit 3.14.0-next.41 → 3.14.0-next.42

package/dist/esm/components/composites/index.js

@@ -1,87 +1,89 @@
 import { CreditAccountHistory as r } from "./credit-account-history/credit-account-history.js";
 import { GEARBOX_PROTOCOL_INFO as a, ZERO_ADDRESS as l, isMulticallOperation as p } from "./credit-account-history/types.js";
-import { OracleComponent as s } from "./oracles-and-lt-table/oracle-component.js";
-import { OraclesAndLTLineView as i } from "./oracles-and-lt-table/oracles-and-lt-line-view.js";
-import { OraclesAndLTTableView as u } from "./oracles-and-lt-table/oracles-and-lt-table.js";
-import { OraclesAndLTTableHead as C } from "./oracles-and-lt-table/oracles-and-lt-table-head.js";
-import { OraclesList as T, getPriceFeedInfo as P } from "./oracles-and-lt-table/oracles-list.js";
-import { PoolAssetsTable as w } from "./pool-assets-table/pool-assets-table.js";
-import { PoolAssetsTableHead as g } from "./pool-assets-table/pool-assets-table-head.js";
-import { PoolAssetsTableRow as c } from "./pool-assets-table/pool-assets-table-row.js";
-import { overflowContainerClassName as F, overflowWrapClassName as y } from "./pool-credit-manager-info/overflow-layout.js";
-import { PoolCreditManagerInfo as S } from "./pool-credit-manager-info/pool-credit-manager-info.js";
-import { PoolCreditManagersTable as M } from "./pool-credit-managers-table/pool-credit-managers-table.js";
-import { PoolCreditManagersTableHead as v } from "./pool-credit-managers-table/pool-credit-managers-table-head.js";
-import { PoolCreditManagersTableRow as E } from "./pool-credit-managers-table/pool-credit-managers-table-row.js";
-import { balanceColumn as V, borrowApyColumn as W, borrowedColumn as _, collateralColumn as G, customColumn as Y, defaultPoolName as Z, poolColumn as z, supplyApyColumn as B, supplyColumn as X, utilizationColumn as h } from "./pool-table/columns.js";
-import { PoolTable as k } from "./pool-table/pool-table.js";
-import { customStrategyColumn as J, strategyColumn as K, strategyLeverageColumn as Q, strategyRewardsColumn as U } from "./strategies-table/columns.js";
-import { APYFeature as oo, APYFeatureTooltip as eo } from "./strategies-table/components/apy-feature/apy-feature.js";
-import { RWAFeature as to, StrategiesRewardsCell as ao, StrategyPoints as lo, ZeroSlippageFeature as po } from "./strategies-table/components/cells/cells.js";
-import { DisabledWrap as so, Plus as no, TitleGrid as io } from "./strategies-table/components/cells/cells.styles.js";
-import { Feature as uo } from "./strategies-table/components/feature/feature.js";
-import { FeatureRoot as Co } from "./strategies-table/components/feature/feature.styles.js";
-import { StrategiesTableNotFoundLine as Po } from "./strategies-table/components/not-found-line.js";
-import { PointsFeature as wo, PointsFeatureTooltip as Ro, PointsLabel as go } from "./strategies-table/components/points-feature/points-feature.js";
-import { RewardsTooltip as co, RewardsTooltipHover as Oo } from "./strategies-table/components/rewards-tooltip/rewards-tooltip.js";
-import { RewardsTooltipRoot as yo } from "./strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
-import { RewardsTooltipView as So } from "./strategies-table/components/rewards-tooltip/rewards-tooltip-view.js";
-import { RewardsTooltipContent as Mo } from "./strategies-table/components/rewards-tooltip/tooltip-content.js";
-import { StrategiesTable as vo } from "./strategies-table/components/strategies-table.js";
+import { NotificationCenter as s } from "./notification-center/notification-center.js";
+import { OracleComponent as n } from "./oracles-and-lt-table/oracle-component.js";
+import { OraclesAndLTLineView as u } from "./oracles-and-lt-table/oracles-and-lt-line-view.js";
+import { OraclesAndLTTableView as C } from "./oracles-and-lt-table/oracles-and-lt-table.js";
+import { OraclesAndLTTableHead as T } from "./oracles-and-lt-table/oracles-and-lt-table-head.js";
+import { OraclesList as b, getPriceFeedInfo as w } from "./oracles-and-lt-table/oracles-list.js";
+import { PoolAssetsTable as g } from "./pool-assets-table/pool-assets-table.js";
+import { PoolAssetsTableHead as A } from "./pool-assets-table/pool-assets-table-head.js";
+import { PoolAssetsTableRow as F } from "./pool-assets-table/pool-assets-table-row.js";
+import { overflowContainerClassName as L, overflowWrapClassName as S } from "./pool-credit-manager-info/overflow-layout.js";
+import { PoolCreditManagerInfo as H } from "./pool-credit-manager-info/pool-credit-manager-info.js";
+import { PoolCreditManagersTable as v } from "./pool-credit-managers-table/pool-credit-managers-table.js";
+import { PoolCreditManagersTableHead as E } from "./pool-credit-managers-table/pool-credit-managers-table-head.js";
+import { PoolCreditManagersTableRow as V } from "./pool-credit-managers-table/pool-credit-managers-table-row.js";
+import { balanceColumn as _, borrowApyColumn as G, borrowedColumn as Y, collateralColumn as Z, customColumn as z, defaultPoolName as B, poolColumn as X, supplyApyColumn as h, supplyColumn as j, utilizationColumn as k } from "./pool-table/columns.js";
+import { PoolTable as J } from "./pool-table/pool-table.js";
+import { customStrategyColumn as Q, strategyColumn as U, strategyLeverageColumn as $, strategyRewardsColumn as oo } from "./strategies-table/columns.js";
+import { APYFeature as ro, APYFeatureTooltip as to } from "./strategies-table/components/apy-feature/apy-feature.js";
+import { RWAFeature as lo, StrategiesRewardsCell as po, StrategyPoints as mo, ZeroSlippageFeature as so } from "./strategies-table/components/cells/cells.js";
+import { DisabledWrap as no, Plus as fo, TitleGrid as uo } from "./strategies-table/components/cells/cells.styles.js";
+import { Feature as Co } from "./strategies-table/components/feature/feature.js";
+import { FeatureRoot as Po } from "./strategies-table/components/feature/feature.styles.js";
+import { StrategiesTableNotFoundLine as wo } from "./strategies-table/components/not-found-line.js";
+import { PointsFeature as go, PointsFeatureTooltip as co, PointsLabel as Ao } from "./strategies-table/components/points-feature/points-feature.js";
+import { RewardsTooltip as Fo, RewardsTooltipHover as yo } from "./strategies-table/components/rewards-tooltip/rewards-tooltip.js";
+import { RewardsTooltipRoot as So } from "./strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
+import { RewardsTooltipView as Ho } from "./strategies-table/components/rewards-tooltip/rewards-tooltip-view.js";
+import { RewardsTooltipContent as vo } from "./strategies-table/components/rewards-tooltip/tooltip-content.js";
+import { StrategiesTable as Eo } from "./strategies-table/components/strategies-table.js";
 export {
-  oo as APYFeature,
-  eo as APYFeatureTooltip,
+  ro as APYFeature,
+  to as APYFeatureTooltip,
   r as CreditAccountHistory,
-  so as DisabledWrap,
-  uo as Feature,
-  Co as FeatureRoot,
+  no as DisabledWrap,
+  Co as Feature,
+  Po as FeatureRoot,
   a as GEARBOX_PROTOCOL_INFO,
-  s as OracleComponent,
-  i as OraclesAndLTLineView,
-  C as OraclesAndLTTableHead,
-  u as OraclesAndLTTableView,
-  T as OraclesList,
-  no as Plus,
-  wo as PointsFeature,
-  Ro as PointsFeatureTooltip,
-  go as PointsLabel,
-  w as PoolAssetsTable,
-  g as PoolAssetsTableHead,
-  c as PoolAssetsTableRow,
-  S as PoolCreditManagerInfo,
-  M as PoolCreditManagersTable,
-  v as PoolCreditManagersTableHead,
-  E as PoolCreditManagersTableRow,
-  k as PoolTable,
-  to as RWAFeature,
-  co as RewardsTooltip,
-  Mo as RewardsTooltipContent,
-  Oo as RewardsTooltipHover,
-  yo as RewardsTooltipRoot,
-  So as RewardsTooltipView,
-  ao as StrategiesRewardsCell,
-  vo as StrategiesTable,
-  Po as StrategiesTableNotFoundLine,
-  lo as StrategyPoints,
-  io as TitleGrid,
+  s as NotificationCenter,
+  n as OracleComponent,
+  u as OraclesAndLTLineView,
+  T as OraclesAndLTTableHead,
+  C as OraclesAndLTTableView,
+  b as OraclesList,
+  fo as Plus,
+  go as PointsFeature,
+  co as PointsFeatureTooltip,
+  Ao as PointsLabel,
+  g as PoolAssetsTable,
+  A as PoolAssetsTableHead,
+  F as PoolAssetsTableRow,
+  H as PoolCreditManagerInfo,
+  v as PoolCreditManagersTable,
+  E as PoolCreditManagersTableHead,
+  V as PoolCreditManagersTableRow,
+  J as PoolTable,
+  lo as RWAFeature,
+  Fo as RewardsTooltip,
+  vo as RewardsTooltipContent,
+  yo as RewardsTooltipHover,
+  So as RewardsTooltipRoot,
+  Ho as RewardsTooltipView,
+  po as StrategiesRewardsCell,
+  Eo as StrategiesTable,
+  wo as StrategiesTableNotFoundLine,
+  mo as StrategyPoints,
+  uo as TitleGrid,
   l as ZERO_ADDRESS,
-  po as ZeroSlippageFeature,
-  V as balanceColumn,
-  W as borrowApyColumn,
-  _ as borrowedColumn,
-  G as collateralColumn,
-  Y as customColumn,
-  J as customStrategyColumn,
-  Z as defaultPoolName,
-  P as getPriceFeedInfo,
+  so as ZeroSlippageFeature,
+  _ as balanceColumn,
+  G as borrowApyColumn,
+  Y as borrowedColumn,
+  Z as collateralColumn,
+  z as customColumn,
+  Q as customStrategyColumn,
+  B as defaultPoolName,
+  w as getPriceFeedInfo,
   p as isMulticallOperation,
-  F as overflowContainerClassName,
-  y as overflowWrapClassName,
-  z as poolColumn,
-  K as strategyColumn,
-  Q as strategyLeverageColumn,
-  U as strategyRewardsColumn,
-  B as supplyApyColumn,
-  X as supplyColumn,
-  h as utilizationColumn
+  L as overflowContainerClassName,
+  S as overflowWrapClassName,
+  X as poolColumn,
+  U as strategyColumn,
+  $ as strategyLeverageColumn,
+  oo as strategyRewardsColumn,
+  h as supplyApyColumn,
+  j as supplyColumn,
+  k as utilizationColumn
 };

package/dist/esm/components/composites/notification-center/index.js

@@ -0,0 +1,4 @@
+import { NotificationCenter as e } from "./notification-center.js";
+export {
+  e as NotificationCenter
+};

package/dist/esm/components/composites/notification-center/notification-center.js

@@ -0,0 +1,208 @@
+import { jsx as e, jsxs as n, Fragment as x } from "react/jsx-runtime";
+import { faBell as g } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as h } from "../../icons/fa-icon.js";
+import { SimpleDropdown as y } from "../../simple-dropdown/simple-dropdown.js";
+import "../../simple-dropdown/simple-dropdown-menu-item.js";
+import { FormattedMessageTyped as r } from "../../typed-intl/index.js";
+import { Typography as i } from "../../typography/typography.js";
+import { notificationCenterTestIds as a } from "../../../test-ids/notification-center.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as c } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+function b({ row: t }) {
+  const l = /* @__PURE__ */ n(x, { children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: c(
+          "mt-[5px] size-[7px] shrink-0 rounded-full",
+          t.isReady ? "bg-success" : "bg-gray-50"
+        )
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            as: "span",
+            variant: "bodySmall",
+            className: "truncate text-foreground",
+            children: t.title
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            as: "span",
+            variant: "bodySmall",
+            color: t.isReady ? "success" : "muted",
+            className: "shrink-0 text-right",
+            children: t.statusLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { as: "span", variant: "bodySmall", color: "muted", children: t.positionName })
+    ] })
+  ] });
+  return t.isReady && t.onExecute ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      "data-testid": a.requestRow,
+      onClick: t.onExecute,
+      className: "flex w-full cursor-pointer items-start gap-2 py-4 text-left hover:opacity-80",
+      children: l
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-testid": a.requestRow,
+      className: "flex w-full items-start gap-2 py-4",
+      children: l
+    }
+  );
+}
+function L({
+  open: t,
+  onOpenChange: l,
+  deferredRows: o,
+  successRows: d,
+  deferredCount: m,
+  hasReady: u,
+  hasAny: f,
+  onClear: p
+}) {
+  return /* @__PURE__ */ e(
+    y,
+    {
+      open: t,
+      onOpenChange: l,
+      align: "end",
+      asChild: !0,
+      className: "w-[460px] max-w-[calc(100vw-32px)] bg-modal p-0",
+      title: /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "data-testid": a.trigger,
+          className: "relative flex size-8 items-center justify-center rounded-md text-secondary-foreground hover:text-foreground",
+          children: [
+            /* @__PURE__ */ e(h, { icon: g, className: "size-4" }),
+            m > 0 ? /* @__PURE__ */ e(
+              "span",
+              {
+                "data-testid": a.badge,
+                className: c(
+                  "absolute -right-0.5 -top-0.5 flex size-[15px] items-center justify-center rounded-full text-[10px] font-medium leading-none text-white",
+                  u ? "bg-primary" : "bg-gray-50"
+                ),
+                children: m
+              }
+            ) : null
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          "data-testid": a.panel,
+          className: "flex flex-col p-8",
+          children: [
+            f ? null : /* @__PURE__ */ e(
+              i,
+              {
+                as: "span",
+                variant: "bodySmall",
+                color: "muted",
+                "data-testid": a.empty,
+                children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.empty" })
+              }
+            ),
+            o.length > 0 ? /* @__PURE__ */ n(
+              "div",
+              {
+                className: "flex flex-col",
+                "data-testid": a.requestsSection,
+                children: [
+                  /* @__PURE__ */ n("div", { className: "flex items-center justify-between pb-2", children: [
+                    /* @__PURE__ */ e(
+                      i,
+                      {
+                        as: "span",
+                        variant: "bodySmall",
+                        className: "font-medium text-foreground",
+                        children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.requests" })
+                      }
+                    ),
+                    p ? /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        "data-testid": a.clear,
+                        onClick: p,
+                        className: "cursor-pointer text-xs text-secondary-foreground hover:text-foreground",
+                        children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.clear" })
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "flex flex-col divide-y divide-gray-60", children: o.map((s) => /* @__PURE__ */ e(b, { row: s }, s.id)) })
+                ]
+              }
+            ) : null,
+            d.length > 0 ? /* @__PURE__ */ n(
+              "div",
+              {
+                className: c(
+                  "flex flex-col",
+                  o.length > 0 && "mt-4 border-t border-gray-60 pt-4"
+                ),
+                "data-testid": a.successSection,
+                children: [
+                  /* @__PURE__ */ e(
+                    i,
+                    {
+                      as: "span",
+                      variant: "bodySmall",
+                      className: "pb-2 font-medium text-foreground",
+                      children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.recent" })
+                    }
+                  ),
+                  d.map((s) => /* @__PURE__ */ n(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": a.successRow,
+                      onClick: s.onView,
+                      className: "flex cursor-pointer items-center justify-between gap-3 py-2 text-left hover:opacity-80",
+                      children: [
+                        /* @__PURE__ */ e(
+                          i,
+                          {
+                            as: "span",
+                            variant: "bodySmall",
+                            className: "truncate text-foreground",
+                            children: s.label
+                          }
+                        ),
+                        /* @__PURE__ */ e(i, { as: "span", variant: "caption", color: "muted", children: s.timestampLabel })
+                      ]
+                    },
+                    s.id
+                  ))
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  L as NotificationCenter
+};

package/dist/esm/components/composites/notification-center/types.js

@@ -0,0 +1 @@
+

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

@@ -21,15 +21,17 @@ import { TokenSymbol as Y } from "../../token-symbol/token-symbol.js";
 import { FormattedMessageTyped as f } from "../../typed-intl/index.js";
 import { poolTableTestIds as z } from "../../../test-ids/pool-table.js";
 import "../credit-account-history/credit-account-history.js";
+import "@fortawesome/free-solid-svg-icons";
+import "../../icons/fa-icon.js";
+import "../../simple-dropdown/simple-dropdown.js";
+import "../../simple-dropdown/simple-dropdown-menu-item.js";
+import "../../typography/typography.js";
 import "@gearbox-protocol/static";
 import "../../base-link/base-link.js";
 import "../../client-adapters/styled-rounded-image/styled-rounded-image.js";
 import "../../tooltip/simple-tooltip.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "../../table/grid-table.js";
-import "../../typography/typography.js";
-import "@fortawesome/free-solid-svg-icons";
-import "../../icons/fa-icon.js";
 import "../../help-tip/help-tip.js";
 import "../../tooltip/tooltip.js";
 import "../../card-grid/card-grid.js";
@@ -139,7 +141,6 @@ import "../../navbar/navbar.js";
 import "../../navbar/navbar-indicator-context.js";
 import "../../app-bar/app-bar.js";
 import "../../navitem/navitem.js";
-import "../../simple-dropdown/simple-dropdown.js";
 import "../../points-icon/points-icon.js";
 import "../../progress/progress.js";
 import "../../progress-bar/progress-bar.js";
@@ -151,7 +152,6 @@ import "../../select/select.js";
 import "../../separate-line/separate-line.js";
 import "../../separator/separator.js";
 import "../../simple-accordion/simple-accordion.js";
-import "../../simple-dropdown/simple-dropdown-menu-item.js";
 import "../../slider/slider.js";
 import "../../slider/slider-context.js";
 import "@radix-ui/react-slider";

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

@@ -50,9 +50,11 @@ import "../../../../with-title/with-title.js";
 import "../../../../smart-number-input/balance-indicator.js";
 import "../../../../smart-number-input/smart-number-input.js";
 import "../../../credit-account-history/credit-account-history.js";
+import "../../../../simple-dropdown/simple-dropdown.js";
+import "../../../../simple-dropdown/simple-dropdown-menu-item.js";
+import "../../../../typography/typography.js";
 import "../../../../table/grid-table.js";
 import { getSymbolOrIcon as x } from "../../../../token-symbol/token-symbol.js";
-import "../../../../typography/typography.js";
 import "../../../../help-tip/help-tip.js";
 import "../../../../description/description.js";
 import { TokenTemplate as g } from "../../../../token-template/token-template.js";
@@ -141,7 +143,6 @@ import "../../../../navbar/navbar.js";
 import "../../../../navbar/navbar-indicator-context.js";
 import "../../../../app-bar/app-bar.js";
 import "../../../../navitem/navitem.js";
-import "../../../../simple-dropdown/simple-dropdown.js";
 import "../../../../progress-bar/progress-bar.js";
 import "../../../../radio-group/radio-group.js";
 import "../../../../search-bar/search-bar.js";
@@ -149,7 +150,6 @@ import "../../../../segmented-control/segmented-control.js";
 import "../../../../select/select.js";
 import "../../../../separator/separator.js";
 import "../../../../simple-accordion/simple-accordion.js";
-import "../../../../simple-dropdown/simple-dropdown-menu-item.js";
 import "../../../../slider/slider.js";
 import "../../../../slider/slider-context.js";
 import "@radix-ui/react-slider";

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

@@ -52,9 +52,11 @@ import "../../../../with-title/with-title.js";
 import "../../../../smart-number-input/balance-indicator.js";
 import "../../../../smart-number-input/smart-number-input.js";
 import "../../../credit-account-history/credit-account-history.js";
+import "../../../../simple-dropdown/simple-dropdown.js";
+import "../../../../simple-dropdown/simple-dropdown-menu-item.js";
+import "../../../../typography/typography.js";
 import "../../../../table/grid-table.js";
 import "../../../../token-symbol/token-symbol.js";
-import "../../../../typography/typography.js";
 import "../../../../help-tip/help-tip.js";
 import "../../../../description/description.js";
 import "../../../../confirm-menu/confirm-menu.js";
@@ -141,7 +143,6 @@ import "../../../../navbar/navbar.js";
 import "../../../../navbar/navbar-indicator-context.js";
 import "../../../../app-bar/app-bar.js";
 import "../../../../navitem/navitem.js";
-import "../../../../simple-dropdown/simple-dropdown.js";
 import "../../../../progress-bar/progress-bar.js";
 import "../../../../radio-group/radio-group.js";
 import "../../../../search-bar/search-bar.js";
@@ -149,7 +150,6 @@ import "../../../../segmented-control/segmented-control.js";
 import "../../../../select/select.js";
 import "../../../../separator/separator.js";
 import "../../../../simple-accordion/simple-accordion.js";
-import "../../../../simple-dropdown/simple-dropdown-menu-item.js";
 import "../../../../slider/slider.js";
 import "../../../../slider/slider-context.js";
 import "@radix-ui/react-slider";

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

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as a } from "../../../../../utils/cn.js";
@@ -6,68 +6,78 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { ProgressStepperTest as u } from "./constants.js";
-function f({
-  status: t
+import { ProgressStepperTest as p } from "./constants.js";
+function x({
+  status: r
 }) {
-  const n = t === "active", e = t === "completed";
-  return /* @__PURE__ */ r(
+  const n = r === "active", e = r === "completed";
+  return /* @__PURE__ */ t(
     "span",
     {
       className: a(
         "relative z-10 block size-[9px] shrink-0 rounded-full",
-        n && "bg-foreground",
-        e && "bg-gray-50",
+        // 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"
       ),
       "aria-hidden": !0
     }
   );
 }
-function l(t) {
+function c(r, n) {
   return a(
     "h-px min-w-0 flex-1",
-    t ? "border-t border-dashed border-gray-50" : "bg-gray-50"
+    r ? "bg-foreground" : n ? "border-t border-dashed border-gray-50" : "bg-gray-50"
   );
 }
-function k({
-  steps: t,
+function h(r) {
+  return r === "completed" || r === "active";
+}
+function D({
+  steps: r,
   className: n
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     "ol",
     {
       className: a("m-0 flex w-full list-none p-0", n),
-      "data-testid": u.root,
-      children: t.map((e, s) => {
-        const c = s === 0, m = s === t.length - 1, i = e.status === "active", d = t[s + 1];
-        return /* @__PURE__ */ o(
+      "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(
           "li",
           {
             className: "flex min-w-0 flex-1 flex-col items-center",
             "aria-current": i ? "step" : void 0,
             children: [
-              /* @__PURE__ */ o("div", { className: "flex w-full items-center", children: [
-                c ? /* @__PURE__ */ r("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ o("span", { className: "relative flex min-w-0 flex-1 items-center", children: [
-                  /* @__PURE__ */ r(
+              /* @__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__ */ t(
                     "span",
                     {
-                      className: l(e.connectorDashed),
+                      className: c(
+                        u,
+                        e.connectorDashed
+                      ),
                       "aria-hidden": !0
                     }
                   ),
-                  e.connectorMarker ? /* @__PURE__ */ r("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
+                  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__ */ r(f, { status: e.status }),
-                m ? /* @__PURE__ */ r("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ r(
+                /* @__PURE__ */ t(x, { status: e.status }),
+                m ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", "aria-hidden": !0 }) : /* @__PURE__ */ t(
                   "span",
                   {
-                    className: l(d?.connectorDashed),
+                    className: c(
+                      f,
+                      l?.connectorDashed
+                    ),
                     "aria-hidden": !0
                   }
                 )
               ] }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ t(
                 "span",
                 {
                   className: a(
@@ -86,5 +96,5 @@ function k({
   );
 }
 export {
-  k as ProgressStepper
+  D as ProgressStepper
 };

package/dist/esm/components/composites/tx-preview/operations/OperationsCard.js

@@ -51,9 +51,11 @@ import "../../../with-title/with-title.js";
 import "../../../smart-number-input/balance-indicator.js";
 import "../../../smart-number-input/smart-number-input.js";
 import "../../credit-account-history/credit-account-history.js";
+import "../../../simple-dropdown/simple-dropdown.js";
+import "../../../simple-dropdown/simple-dropdown-menu-item.js";
+import "../../../typography/typography.js";
 import "../../../table/grid-table.js";
 import "../../../token-symbol/token-symbol.js";
-import "../../../typography/typography.js";
 import "../../../help-tip/help-tip.js";
 import "../../../description/description.js";
 import "../../../confirm-menu/confirm-menu.js";
@@ -141,7 +143,6 @@ import "../../../navbar/navbar.js";
 import "../../../navbar/navbar-indicator-context.js";
 import "../../../app-bar/app-bar.js";
 import "../../../navitem/navitem.js";
-import "../../../simple-dropdown/simple-dropdown.js";
 import "../../../progress-bar/progress-bar.js";
 import "../../../radio-group/radio-group.js";
 import "../../../search-bar/search-bar.js";
@@ -149,7 +150,6 @@ import "../../../segmented-control/segmented-control.js";
 import "../../../select/select.js";
 import "../../../separator/separator.js";
 import "../../../simple-accordion/simple-accordion.js";
-import "../../../simple-dropdown/simple-dropdown-menu-item.js";
 import "../../../slider/slider.js";
 import "../../../slider/slider-context.js";
 import "@radix-ui/react-slider";