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

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

@@ -1,47 +1,55 @@
-function l(e) {
+function p(e) {
   return {
     approve: !e.allowWalletBatching && (e.needsApproval || e.isApprovalPending),
     auth: !e.isAuthReady
   };
 }
-function p(e) {
+function l(e) {
   return !e.allowWalletBatching && (e.isApprovalPending || e.needsApproval);
 }
 function c(e, t) {
-  return l(t)[e];
+  return p(t)[e];
 }
-function i(e, t) {
+function u(e, t) {
   return t.completedStepsInSession?.includes(e) ?? !1;
 }
-function a(e, t) {
-  return c(e, t) || i(e, t);
+function i(e, t) {
+  return c(e, t) || u(e, t);
 }
 function f(e) {
   const t = [];
-  return a("approve", e) && t.push("approve"), a("auth", e) && t.push("auth"), t.push("execute"), t;
+  return i("approve", e) && t.push("approve"), i("auth", e) && t.push("auth"), t.push("execute"), t;
 }
 function v(e, t) {
-  return e.isCorrectChain ? p(e) ? "approve" : c("auth", e) ? "auth" : "execute" : t[0] ?? "execute";
+  return e.isCorrectChain ? l(e) ? "approve" : c("auth", e) ? "auth" : "execute" : t[0] ?? "execute";
 }
-function d(e, t, r, o) {
+function h(e, t, r, o) {
   const n = o.indexOf(r);
-  return o.indexOf(e) < n ? !0 : e === "execute" ? !1 : !!(i(e, t) && !c(e, t));
+  return o.indexOf(e) < n ? !0 : e === "execute" ? !1 : !!(u(e, t) && !c(e, t));
 }
-function h(e, t) {
+function d(e, t) {
   return e === "approve" && t.allowWalletBatching ? "approveBatch" : e === "auth" ? "auth" : e;
 }
 function S(e) {
-  const t = f(e), r = v(e, t);
-  return { steps: t.map((n) => {
-    const s = d(n, e, r, t) ? "completed" : n === r ? "active" : "upcoming";
+  return e.some((t) => t.id !== "execute");
+}
+function x(e) {
+  const t = f(e), r = v(e, t), o = t.map((n) => {
+    const s = h(n, e, r, t) ? "completed" : n === r ? "active" : "upcoming";
     return {
       id: n,
-      labelKey: h(n, e),
+      labelKey: d(n, e),
       status: s
     };
-  }), activeStepId: r };
+  });
+  return {
+    steps: o,
+    activeStepId: r,
+    showProgressStepper: S(o)
+  };
 }
 export {
-  S as computeTransactionExecutionSteps,
-  l as getTransactionExecutionStepRequirements
+  x as computeTransactionExecutionSteps,
+  p as getTransactionExecutionStepRequirements,
+  S as shouldShowTransactionProgressStepper
 };

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

@@ -1,6 +1,6 @@
-class o {
-  static root = "transaction-stepper-root";
+class s {
+  static root = "transaction-progress-stepper-root";
 }
 export {
-  o as TransactionStepperTest
+  s as TransactionProgressStepperTest
 };

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

@@ -1,11 +1,14 @@
-import { computeTransactionExecutionSteps as o, getTransactionExecutionStepRequirements as r } from "./computeTransactionExecutionSteps.js";
-import { TransactionStepperTest as p } from "./constants.js";
-import { HorizontalTransactionStepper as a } from "./HorizontalTransactionStepper.js";
-import { useCompletedStepsInSession as c } from "./useCompletedStepsInSession.js";
+import { computeTransactionExecutionSteps as r, getTransactionExecutionStepRequirements as s, shouldShowTransactionProgressStepper as t } from "./computeTransactionExecutionSteps.js";
+import { TransactionProgressStepperTest as p } from "./constants.js";
+import { TransactionProgressStepper as i } from "./TransactionProgressStepper.js";
+import { mergeCompletedStepsInSession as m, mergeStepsSeenInSession as c, useCompletedStepsInSession as g } from "./useCompletedStepsInSession.js";
 export {
-  a as HorizontalTransactionStepper,
-  p as TransactionStepperTest,
-  o as computeTransactionExecutionSteps,
-  r as getTransactionExecutionStepRequirements,
-  c as useCompletedStepsInSession
+  i as TransactionProgressStepper,
+  p as TransactionProgressStepperTest,
+  r as computeTransactionExecutionSteps,
+  s as getTransactionExecutionStepRequirements,
+  m as mergeCompletedStepsInSession,
+  c as mergeStepsSeenInSession,
+  t as shouldShowTransactionProgressStepper,
+  g as useCompletedStepsInSession
 };

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

@@ -1,39 +1,45 @@
-import { useState as a, useEffect as u } from "react";
-import { getTransactionExecutionStepRequirements as m } from "./computeTransactionExecutionSteps.js";
-function I({
-  sessionActive: n,
-  needsApproval: S,
-  isApprovalPending: i = !1,
-  allowWalletBatching: d,
-  isAuthReady: f
+import { useState as S, useEffect as i } from "react";
+import { getTransactionExecutionStepRequirements as c } from "./computeTransactionExecutionSteps.js";
+function m(e, n) {
+  const t = new Set(e);
+  return n.approve && t.add("approve"), n.auth && t.add("auth"), [...t];
+}
+function h(e, n, t) {
+  const p = new Set(e);
+  return n.includes("approve") && !t.approve && p.add("approve"), n.includes("auth") && !t.auth && p.add("auth"), [...p];
+}
+function v({
+  sessionActive: e,
+  needsApproval: n,
+  isApprovalPending: t = !1,
+  allowWalletBatching: p,
+  isAuthReady: d
 }) {
-  const [p, o] = a([]), [c, s] = a([]), e = m({
-    needsApproval: S,
-    isApprovalPending: i,
-    allowWalletBatching: d,
-    isAuthReady: f
+  const [s, a] = S([]), [f, u] = S([]), o = c({
+    needsApproval: n,
+    isApprovalPending: t,
+    allowWalletBatching: p,
+    isAuthReady: d
   });
-  return u(() => {
-    if (!n) {
-      o([]), s([]);
+  return i(() => {
+    if (!e) {
+      a([]), u([]);
       return;
     }
-    o((r) => {
-      const t = new Set(r);
-      return e.approve && t.add("approve"), e.auth && t.add("auth"), [...t];
-    });
-  }, [n, e.approve, e.auth]), u(() => {
-    n && s((r) => {
-      const t = new Set(r);
-      return p.includes("approve") && !e.approve && t.add("approve"), p.includes("auth") && !e.auth && t.add("auth"), [...t];
-    });
+    a((r) => m(r, o));
+  }, [e, o.approve, o.auth]), i(() => {
+    e && u(
+      (r) => h(r, s, o)
+    );
   }, [
-    n,
-    p,
-    e.approve,
-    e.auth
-  ]), c;
+    e,
+    s,
+    o.approve,
+    o.auth
+  ]), f;
 }
 export {
-  I as useCompletedStepsInSession
+  h as mergeCompletedStepsInSession,
+  m as mergeStepsSeenInSession,
+  v as useCompletedStepsInSession
 };

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

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { FadeoutLoading as c } from "../../../../fadeout-loading/fadeout-loading.js";
+import { TipCard as v } from "../../../../tip-card/tip-card.js";
+import { VerticalIndicator as i } from "../../../../vertical-indicator/vertical-indicator.js";
+import { VerticalList as b } from "../../../../vertical-list/vertical-list.js";
+import { PoolOperationConfirmDetailsTest as z } from "./constants.js";
+function L({
+  apyLabel: l,
+  apy: o,
+  apyLoading: r = !1,
+  poolTvlLabel: t,
+  poolTvl: a,
+  poolUtilizationLabel: m,
+  poolUtilization: s,
+  curatorLabel: n,
+  curatorValue: d,
+  poolLabel: f,
+  poolContractValue: p
+}) {
+  return /* @__PURE__ */ e(
+    v,
+    {
+      textColor: "light",
+      "data-testid": z.root,
+      children: /* @__PURE__ */ u(b, { children: [
+        o !== void 0 ? /* @__PURE__ */ e(
+          i,
+          {
+            size: "sm",
+            label: l,
+            value: /* @__PURE__ */ e(c, { loading: r, children: o })
+          }
+        ) : null,
+        /* @__PURE__ */ e(i, { size: "sm", label: t, value: a }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            size: "sm",
+            label: m,
+            value: s
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            size: "sm",
+            label: n,
+            value: d
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            size: "sm",
+            label: f,
+            value: p
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  L as PoolOperationConfirmDetails
+};

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

@@ -1,6 +1,6 @@
-class r {
-  static root = "pool-operation-confirm-summary-root";
+class t {
+  static root = "pool-operation-confirm-details-root";
 }
 export {
-  r as PoolOperationConfirmSummaryTest
+  t as PoolOperationConfirmDetailsTest
 };

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

@@ -1,6 +1,6 @@
-import { PoolOperationConfirmSummaryTest as m } from "./constants.js";
-import { PoolOperationConfirmSummary as t } from "./PoolOperationConfirmSummary.js";
+import { PoolOperationConfirmDetailsTest as e } from "./constants.js";
+import { PoolOperationConfirmDetails as i } from "./PoolOperationConfirmDetails.js";
 export {
-  t as PoolOperationConfirmSummary,
-  m as PoolOperationConfirmSummaryTest
+  i as PoolOperationConfirmDetails,
+  e as PoolOperationConfirmDetailsTest
 };

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

@@ -1,78 +1,114 @@
 import { AddressAvatar as e } from "./components/AddressAvatar.js";
-import { AddressParty as a } from "./components/AddressParty.js";
-import { AddressRow as p } from "./components/AddressRow.js";
+import { AddressParty as n } from "./components/AddressParty.js";
+import { AddressRow as i } from "./components/AddressRow.js";
 import { AmountRow as m } from "./components/AmountRow.js";
-import { getAddressLabel as f } from "./components/addressLabel.js";
+import { getAddressLabel as p } from "./components/addressLabel.js";
 import { CollapsibleCard as l } from "./components/CollapsibleCard.js";
-import { SectionDivider as u } from "./components/SectionDivider.js";
-import { TransferList as c } from "./components/TransferList.js";
-import { TransferRow as T } from "./components/TransferRow.js";
-import { TransactionConfirmDialogTest as S, transactionConfirmDialogShellVariants as g } from "./confirm/dialog/constants.js";
-import { TransactionConfirmDialogView as O } from "./confirm/dialog/TransactionConfirmDialogView.js";
-import { useTransactionConfirmDialog as h } from "./confirm/dialog/useTransactionConfirmDialog.js";
-import { useCalldataOperationPreview as A } from "./confirm/hooks/useCalldataOperationPreview.js";
-import { OperationPreviewContent as V } from "./confirm/preview/OperationPreviewContent.js";
-import { computeTransactionExecutionSteps as y, getTransactionExecutionStepRequirements as B } from "./confirm/stepper/computeTransactionExecutionSteps.js";
-import { TransactionStepperTest as E } from "./confirm/stepper/constants.js";
-import { HorizontalTransactionStepper as z } from "./confirm/stepper/HorizontalTransactionStepper.js";
-import { useCompletedStepsInSession as H } from "./confirm/stepper/useCompletedStepsInSession.js";
-import { PoolOperationConfirmSummaryTest as W } from "./confirm/summary/constants.js";
-import { PoolOperationConfirmSummary as F } from "./confirm/summary/PoolOperationConfirmSummary.js";
-import { useParsedTransaction as K } from "./hooks/useParsedTransaction.js";
-import { OperationBody as N } from "./operations/OperationBody.js";
-import { OperationsCard as U, hasOperationView as X } from "./operations/OperationsCard.js";
-import { PoolDepositView as Z } from "./operations/PoolDepositView.js";
-import { PoolRow as $ } from "./operations/PoolRow.js";
-import { PoolWithdrawView as or } from "./operations/PoolWithdrawView.js";
-import { PrerequisiteRow as tr } from "./prerequisites/PrerequisiteRow.js";
-import { PrerequisitesCard as ir } from "./prerequisites/PrerequisitesCard.js";
-import { prerequisiteDetailRenderers as nr, renderPrerequisiteDetail as mr } from "./prerequisites/prerequisiteDetails.js";
-import { usePrerequisites as fr } from "./prerequisites/usePrerequisites.js";
-import { BalanceChangeGroup as lr } from "./state-change/BalanceChangeGroup.js";
-import { BalanceChangeRow as ur } from "./state-change/BalanceChangeRow.js";
-import { PoolStateChangeCard as cr } from "./state-change/PoolStateChangeCard.js";
-import { StateChangeCard as Tr } from "./state-change/StateChangeCard.js";
-import { buildPoolOperationLabels as Sr } from "./utils/addressLabels.js";
-import { resolveToken as Dr } from "./utils/poolTokenInfo.js";
+import { SectionDivider as T } from "./components/SectionDivider.js";
+import { TransferList as u } from "./components/TransferList.js";
+import { TransferRow as S } from "./components/TransferRow.js";
+import { TransactionConfirmAmountFieldTest as w, TransactionConfirmAmountPairTest as g } from "./confirm/amounts/constants.js";
+import { TransactionConfirmAmountField as R } from "./confirm/amounts/TransactionConfirmAmountField.js";
+import { TransactionConfirmAmountPair as A } from "./confirm/amounts/TransactionConfirmAmountPair.js";
+import { computeTransactionConfirmDialogLayout as V } from "./confirm/dialog/computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as v, transactionConfirmDialogShellVariants as B, transactionConfirmShellContentVariants as F } from "./confirm/dialog/constants.js";
+import { TransactionConfirmDialogView as E } from "./confirm/dialog/TransactionConfirmDialogView.js";
+import { TransactionConfirmPageView as L } from "./confirm/dialog/TransactionConfirmPageView.js";
+import { TransactionConfirmShell as H } from "./confirm/dialog/TransactionConfirmShell.js";
+import { TransactionConfirmShellTest as G } from "./confirm/dialog/TransactionConfirmShell.constants.js";
+import { useTransactionConfirmDialog as j } from "./confirm/dialog/useTransactionConfirmDialog.js";
+import { useTransactionConfirmFlow as J } from "./confirm/dialog/useTransactionConfirmFlow.js";
+import { TransactionConfirmExecuteButton as M } from "./confirm/execution/TransactionConfirmExecuteButton.js";
+import { useCalldataOperationPreview as Q } from "./confirm/hooks/useCalldataOperationPreview.js";
+import { OperationPreviewContent as X } from "./confirm/preview/OperationPreviewContent.js";
+import { TransactionConfirmExecuteButtonTest as Z, TransactionConfirmFailureResultTest as _, TransactionConfirmSuccessResultTest as $, TransactionConfirmTxHashRowTest as oo } from "./confirm/result/constants.js";
+import { TransactionConfirmFailureResult as eo } from "./confirm/result/TransactionConfirmFailureResult.js";
+import { TransactionConfirmSuccessIcon as no } from "./confirm/result/TransactionConfirmSuccessIcon.js";
+import { TransactionConfirmSuccessResult as io } from "./confirm/result/TransactionConfirmSuccessResult.js";
+import { TransactionConfirmTxHashRow as mo } from "./confirm/result/TransactionConfirmTxHashRow.js";
+import { computeTransactionExecutionSteps as po, getTransactionExecutionStepRequirements as xo, shouldShowTransactionProgressStepper as lo } from "./confirm/stepper/computeTransactionExecutionSteps.js";
+import { TransactionProgressStepperTest as To } from "./confirm/stepper/constants.js";
+import { TransactionProgressStepper as uo } from "./confirm/stepper/TransactionProgressStepper.js";
+import { mergeCompletedStepsInSession as Po, mergeStepsSeenInSession as wo, useCompletedStepsInSession as go } from "./confirm/stepper/useCompletedStepsInSession.js";
+import { PoolOperationConfirmDetailsTest as Ro } from "./confirm/summary/constants.js";
+import { PoolOperationConfirmDetails as Ao } from "./confirm/summary/PoolOperationConfirmDetails.js";
+import { useParsedTransaction as Vo } from "./hooks/useParsedTransaction.js";
+import { OperationBody as vo } from "./operations/OperationBody.js";
+import { OperationsCard as Fo, hasOperationView as bo } from "./operations/OperationsCard.js";
+import { PoolDepositView as Io } from "./operations/PoolDepositView.js";
+import { PoolRow as yo } from "./operations/PoolRow.js";
+import { PoolWithdrawView as ko } from "./operations/PoolWithdrawView.js";
+import { PrerequisiteRow as Wo } from "./prerequisites/PrerequisiteRow.js";
+import { PrerequisitesCard as zo } from "./prerequisites/PrerequisitesCard.js";
+import { prerequisiteDetailRenderers as Ko, renderPrerequisiteDetail as Mo } from "./prerequisites/prerequisiteDetails.js";
+import { usePrerequisites as Qo } from "./prerequisites/usePrerequisites.js";
+import { BalanceChangeGroup as Xo } from "./state-change/BalanceChangeGroup.js";
+import { BalanceChangeRow as Zo } from "./state-change/BalanceChangeRow.js";
+import { PoolStateChangeCard as $o } from "./state-change/PoolStateChangeCard.js";
+import { StateChangeCard as rr } from "./state-change/StateChangeCard.js";
+import { buildPoolOperationLabels as tr } from "./utils/addressLabels.js";
+import { resolveToken as ar } from "./utils/poolTokenInfo.js";
 export {
   e as AddressAvatar,
-  a as AddressParty,
-  p as AddressRow,
+  n as AddressParty,
+  i as AddressRow,
   m as AmountRow,
-  lr as BalanceChangeGroup,
-  ur as BalanceChangeRow,
+  Xo as BalanceChangeGroup,
+  Zo as BalanceChangeRow,
   l as CollapsibleCard,
-  z as HorizontalTransactionStepper,
-  N as OperationBody,
-  V as OperationPreviewContent,
-  U as OperationsCard,
-  Z as PoolDepositView,
-  F as PoolOperationConfirmSummary,
-  W as PoolOperationConfirmSummaryTest,
-  $ as PoolRow,
-  cr as PoolStateChangeCard,
-  or as PoolWithdrawView,
-  tr as PrerequisiteRow,
-  ir as PrerequisitesCard,
-  u as SectionDivider,
-  Tr as StateChangeCard,
-  S as TransactionConfirmDialogTest,
-  O as TransactionConfirmDialogView,
-  E as TransactionStepperTest,
-  c as TransferList,
-  T as TransferRow,
-  Sr as buildPoolOperationLabels,
-  y as computeTransactionExecutionSteps,
-  f as getAddressLabel,
-  B as getTransactionExecutionStepRequirements,
-  X as hasOperationView,
-  nr as prerequisiteDetailRenderers,
-  mr as renderPrerequisiteDetail,
-  Dr as resolveToken,
-  g as transactionConfirmDialogShellVariants,
-  A as useCalldataOperationPreview,
-  H as useCompletedStepsInSession,
-  K as useParsedTransaction,
-  fr as usePrerequisites,
-  h as useTransactionConfirmDialog
+  vo as OperationBody,
+  X as OperationPreviewContent,
+  Fo as OperationsCard,
+  Io as PoolDepositView,
+  Ao as PoolOperationConfirmDetails,
+  Ro as PoolOperationConfirmDetailsTest,
+  yo as PoolRow,
+  $o as PoolStateChangeCard,
+  ko as PoolWithdrawView,
+  Wo as PrerequisiteRow,
+  zo as PrerequisitesCard,
+  T as SectionDivider,
+  rr as StateChangeCard,
+  R as TransactionConfirmAmountField,
+  w as TransactionConfirmAmountFieldTest,
+  A as TransactionConfirmAmountPair,
+  g as TransactionConfirmAmountPairTest,
+  v as TransactionConfirmDialogTest,
+  E as TransactionConfirmDialogView,
+  M as TransactionConfirmExecuteButton,
+  Z as TransactionConfirmExecuteButtonTest,
+  eo as TransactionConfirmFailureResult,
+  _ as TransactionConfirmFailureResultTest,
+  L as TransactionConfirmPageView,
+  H as TransactionConfirmShell,
+  G as TransactionConfirmShellTest,
+  no as TransactionConfirmSuccessIcon,
+  io as TransactionConfirmSuccessResult,
+  $ as TransactionConfirmSuccessResultTest,
+  mo as TransactionConfirmTxHashRow,
+  oo as TransactionConfirmTxHashRowTest,
+  uo as TransactionProgressStepper,
+  To as TransactionProgressStepperTest,
+  u as TransferList,
+  S as TransferRow,
+  tr as buildPoolOperationLabels,
+  V as computeTransactionConfirmDialogLayout,
+  po as computeTransactionExecutionSteps,
+  p as getAddressLabel,
+  xo as getTransactionExecutionStepRequirements,
+  bo as hasOperationView,
+  Po as mergeCompletedStepsInSession,
+  wo as mergeStepsSeenInSession,
+  Ko as prerequisiteDetailRenderers,
+  Mo as renderPrerequisiteDetail,
+  ar as resolveToken,
+  lo as shouldShowTransactionProgressStepper,
+  B as transactionConfirmDialogShellVariants,
+  F as transactionConfirmShellContentVariants,
+  Q as useCalldataOperationPreview,
+  go as useCompletedStepsInSession,
+  Vo as useParsedTransaction,
+  Qo as usePrerequisites,
+  j as useTransactionConfirmDialog,
+  J as useTransactionConfirmFlow
 };

package/dist/esm/components/confirm-menu/confirm-menu.js

@@ -1,44 +1,47 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import * as a from "react";
-import { IconButton as s } from "../icon-button/icon-button.js";
-import { faXmark as t } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as c } from "../icons/fa-icon.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import * as s from "react";
+import { IconButton as t } from "../icon-button/icon-button.js";
+import { faXmark as c } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as p } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-import { cn as i } from "../../utils/cn.js";
+import { cn as l } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const f = a.forwardRef(
-  ({ title: o, onClose: e, className: m }, n) => /* @__PURE__ */ l(
+const f = s.forwardRef(
+  ({ title: m, titleAddon: i, onClose: e, className: o }, a) => /* @__PURE__ */ n(
     "div",
     {
-      ref: n,
-      className: i(
+      ref: a,
+      className: l(
         "flex flex-nowrap items-center w-full max-w-full shrink-0 basis-full",
-        m
+        o
       ),
       children: [
-        /* @__PURE__ */ r("div", { className: "flex min-w-0 grow shrink-0 basis-[0%] flex-nowrap", children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: i(
-              "font-normal min-h-[min-content]",
-              "text-[21px] leading-[25px]"
-            ),
-            children: o
-          }
-        ) }),
-        /* @__PURE__ */ r("div", { className: "shrink-0 pl-2", children: /* @__PURE__ */ r(
-          s,
+        /* @__PURE__ */ n("div", { className: "flex min-w-0 grow shrink-0 basis-[0%] flex-nowrap items-center gap-2", children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: l(
+                "font-normal min-h-[min-content]",
+                "text-[21px] leading-[25px]"
+              ),
+              children: m
+            }
+          ),
+          i ? /* @__PURE__ */ r("div", { className: "shrink-0", children: i }) : null
+        ] }),
+        e ? /* @__PURE__ */ r("div", { className: "shrink-0 pl-2", children: /* @__PURE__ */ r(
+          t,
           {
             buttonType: "hollow",
             size: 30,
             onClick: e,
             "aria-label": "Close",
-            children: /* @__PURE__ */ r(c, { icon: t, className: "size-5" })
+            children: /* @__PURE__ */ r(p, { icon: c, className: "size-5" })
           }
-        ) })
+        ) }) : null
       ]
     }
   )