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

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

@@ -0,0 +1,208 @@
+import { jsx as e, jsxs as i, Fragment as x } from "react/jsx-runtime";
+import { faBell as h } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as g } 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 n } 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 s = /* @__PURE__ */ i(x, { children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: c(
+          "mt-[5px] size-[7px] shrink-0 rounded-full",
+          t.isReady ? "bg-success" : "bg-gray-50"
+        )
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ e(
+          n,
+          {
+            as: "span",
+            variant: "bodySmall",
+            className: "truncate text-foreground",
+            children: t.title
+          }
+        ),
+        /* @__PURE__ */ e(
+          n,
+          {
+            as: "span",
+            variant: "bodySmall",
+            color: t.isReady ? "success" : "muted",
+            className: "shrink-0 text-right",
+            children: t.statusLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(n, { as: "span", variant: "bodySmall", color: "muted", children: t.positionName })
+    ] })
+  ] });
+  return t.isClickable && 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: s
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-testid": a.requestRow,
+      className: "flex w-full items-start gap-2 py-4",
+      children: s
+    }
+  );
+}
+function L({
+  open: t,
+  onOpenChange: s,
+  deferredRows: o,
+  successRows: d,
+  deferredCount: m,
+  hasReady: u,
+  hasAny: f,
+  onClear: p
+}) {
+  return /* @__PURE__ */ e(
+    y,
+    {
+      open: t,
+      onOpenChange: s,
+      align: "end",
+      asChild: !0,
+      className: "w-[460px] max-w-[calc(100vw-32px)] bg-modal p-0",
+      title: /* @__PURE__ */ i(
+        "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(g, { icon: h, 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__ */ i(
+        "div",
+        {
+          "data-testid": a.panel,
+          className: "flex flex-col p-8",
+          children: [
+            f ? null : /* @__PURE__ */ e(
+              n,
+              {
+                as: "span",
+                variant: "bodySmall",
+                color: "muted",
+                "data-testid": a.empty,
+                children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.empty" })
+              }
+            ),
+            o.length > 0 ? /* @__PURE__ */ i(
+              "div",
+              {
+                className: "flex flex-col",
+                "data-testid": a.requestsSection,
+                children: [
+                  /* @__PURE__ */ e(
+                    n,
+                    {
+                      as: "span",
+                      variant: "bodySmall",
+                      className: "pb-2 font-medium text-foreground",
+                      children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.requests" })
+                    }
+                  ),
+                  /* @__PURE__ */ e("div", { className: "-mr-2 flex max-h-[40dvh] flex-col divide-y divide-gray-60 overflow-y-auto overflow-x-hidden pr-2 [scrollbar-gutter:stable]", children: o.map((l) => /* @__PURE__ */ e(b, { row: l }, l.id)) })
+                ]
+              }
+            ) : null,
+            d.length > 0 ? /* @__PURE__ */ i(
+              "div",
+              {
+                className: c(
+                  "flex flex-col",
+                  o.length > 0 && "mt-4 pt-4"
+                ),
+                "data-testid": a.successSection,
+                children: [
+                  /* @__PURE__ */ i("div", { className: "flex items-center justify-between pb-2", children: [
+                    /* @__PURE__ */ e(
+                      n,
+                      {
+                        as: "span",
+                        variant: "bodySmall",
+                        className: "font-medium text-foreground",
+                        children: /* @__PURE__ */ e(r, { messageId: "components.notificationCenter.recent" })
+                      }
+                    ),
+                    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: "-mr-2 flex max-h-[30dvh] flex-col overflow-y-auto overflow-x-hidden pr-2 [scrollbar-gutter:stable]", children: d.map((l) => /* @__PURE__ */ i(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": a.successRow,
+                      onClick: l.onView,
+                      className: "flex cursor-pointer items-center justify-between gap-3 py-2 text-left hover:opacity-80",
+                      children: [
+                        /* @__PURE__ */ e(
+                          n,
+                          {
+                            as: "span",
+                            variant: "bodySmall",
+                            className: "truncate text-foreground",
+                            children: l.label
+                          }
+                        ),
+                        /* @__PURE__ */ e(n, { as: "span", variant: "caption", color: "muted", children: l.timestampLabel })
+                      ]
+                    },
+                    l.id
+                  )) })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  L as NotificationCenter
+};

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

@@ -3,10 +3,11 @@ import "react";
 import { getSortForField as r } from "../../../hooks/use-filter.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "@gearbox-protocol/sdk";
+import "../../breakpoint-provider.js";
 import { HeadCell as a } from "../../head-cell/head-cell.js";
 import { GridTableRow as g, GridTableHead as i } from "../../table/grid-table.js";
 import { useIntlTyped as f, FormattedMessageTyped as n } from "../../typed-intl/index.js";
-function j({
+function y({
   sort: l
 }) {
   const s = f(), { state: t, set: o } = l, m = () => o("usage", "desc"), d = () => o("rate", "desc"), p = () => o("name", "desc");
@@ -50,5 +51,5 @@ function j({
   ] });
 }
 export {
-  j as PoolAssetsTableHead
+  y as PoolAssetsTableHead
 };

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

@@ -1,36 +1,45 @@
-import { jsx as e, jsxs as t, Fragment as L } from "react/jsx-runtime";
+import { jsx as e, jsxs as t, Fragment as N } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk/common-utils";
 import "@gearbox-protocol/sdk";
-import { useIsMobile as N, useIsDesktop as S } from "../../../hooks/use-media-query.js";
+import { useIsMobile as y, useIsDesktop as L } from "../../../hooks/use-media-query.js";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as A } from "../../../utils/format-money.js";
+import { percentageTemplate as S } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import { Description as w } from "../../description/description.js";
 import { ShortString as c } from "../../short-string/short-string.js";
-import { GridTableRow as y, GridTableCell as s } from "../../table/grid-table.js";
-import { TableLineSm as z, TableCellSm as p } from "../../table/table-sm.js";
-import { TokenSymbol as I } from "../../token-symbol/token-symbol.js";
+import { GridTableRow as A, GridTableCell as s } from "../../table/grid-table.js";
+import { TableLineSm as k, TableCellSm as p } from "../../table/table-sm.js";
+import { TokenSymbol as v } from "../../token-symbol/token-symbol.js";
 import { TokenTemplate as d } from "../../token-template/token-template.js";
-import { FormattedMessageTyped as l } from "../../typed-intl/index.js";
+import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
+import { Typography as w } from "../../typography/typography.js";
 function O({
   poolName: h,
-  token: o,
+  token: l,
   currentQuota: g,
   underlyingToken: r,
   last: u
 }) {
-  const { limit: f, totalQuoted: x, rate: T } = g, i = N(), b = S() ? 21 : i ? 40 : 16, m = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
-    /* @__PURE__ */ e(I, { token: o, size: 32 }),
+  const { limit: f, totalQuoted: x, rate: T } = g, a = y(), b = L() ? 21 : a ? 40 : 16, i = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
+    /* @__PURE__ */ e(v, { token: l, size: 32 }),
     /* @__PURE__ */ t("span", { className: "ml-1.5 md:ml-2.5 text-left", children: [
-      /* @__PURE__ */ e(c, { maxLength: b, children: o?.title }),
-      /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(c, { maxLength: 20, children: h }) })
+      /* @__PURE__ */ e(c, { maxLength: b, children: l?.title }),
+      /* @__PURE__ */ e(
+        w,
+        {
+          variant: "caption",
+          color: "secondary",
+          as: "span",
+          className: "block",
+          children: /* @__PURE__ */ e(c, { maxLength: 20, children: h })
+        }
+      )
     ] })
-  ] }), a = () => A(T), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-    l,
+  ] }), m = () => S(T), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+    o,
     {
       messageId: "components.poolAssetsTable.usage",
       values: {
@@ -60,7 +69,7 @@ function O({
     }
   ) });
   return /* @__PURE__ */ e(
-    y,
+    A,
     {
       last: u,
       height: "auto",
@@ -68,33 +77,33 @@ function O({
       style: {
         minHeight: "75px"
       },
-      children: i ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
-        z,
+      children: a ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+        k,
         {
           columns: 2,
           columnsXs: 2,
-          title: m(),
+          title: i(),
           className: "w-full",
           children: [
             /* @__PURE__ */ e(
               p,
               {
-                title: /* @__PURE__ */ e(l, { messageId: "components.poolAssetsTable.rate" }),
-                children: a()
+                title: /* @__PURE__ */ e(o, { messageId: "components.poolAssetsTable.rate" }),
+                children: m()
               }
             ),
             /* @__PURE__ */ e(
               p,
               {
-                title: /* @__PURE__ */ e(l, { messageId: "components.poolAssetsTable.limits" }),
+                title: /* @__PURE__ */ e(o, { messageId: "components.poolAssetsTable.limits" }),
                 children: n()
               }
             )
           ]
         }
-      ) }) : /* @__PURE__ */ t(L, { children: [
-        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: m() }),
-        /* @__PURE__ */ e(s, { textAlign: "right", size: "sm", children: a() }),
+      ) }) : /* @__PURE__ */ t(N, { children: [
+        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: i() }),
+        /* @__PURE__ */ e(s, { textAlign: "right", size: "sm", children: m() }),
         /* @__PURE__ */ e(s, { textAlign: "right", className: "pr-4", size: "sm", children: n() })
       ] })
     }

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

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

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

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

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

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

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

@@ -0,0 +1,186 @@
+import { jsx as r } from "react/jsx-runtime";
+import "../../../../accordion/accordion.js";
+import "../../../../alert-badge/alert-badge.js";
+import "../../../../alert-dialog/alert-dialog.js";
+import "../../../../alert-modal/alert-modal.js";
+import "@gearbox-protocol/static";
+import "react";
+import "../../../../buttons/back-button/back-button.js";
+import "../../../../buttons/button/button.js";
+import "../../../../buttons/copy-button/copy-button.js";
+import "../../../../buttons/external-button/external-button.js";
+import "../../../../buttons/filter-button/filter-button.js";
+import "../../../../buttons/navigation-button/navigation-button.js";
+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";
+import "../../../../buttons/tab-button/tab-button.js";
+import "../../../../token-icon/token-icon.js";
+import "../../../../tooltip/simple-tooltip.js";
+import "../../../../tooltip/tooltip.js";
+import "wagmi";
+import "../../../../auth/wallet-ui-context.js";
+import "../../../../badge/badge.js";
+import "react-intl";
+import "../../../../simple-dropdown/simple-dropdown.js";
+import "../../../../simple-dropdown/simple-dropdown-menu-item.js";
+import "../../../../token-symbol/token-symbol.js";
+import "../../../../typography/typography.js";
+import "../../../../detailed-page-title/detailed-page-title-copy-button.js";
+import "../../../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
+import "../../../../base/details-view/detail-aside/detail-aside-scope.js";
+import "../../../../layout/main-aside-layout/main-aside-layout.js";
+import "../../../../base/details-view/details-view.js";
+import "../../../../fadeout-loading/fadeout-loading.js";
+import "../../../../health-factor/health-factor.js";
+import "../../../../vertical-indicator/vertical-indicator.js";
+import "../../../../checkbox/checkbox.js";
+import "../../../../checkbox/checkbox-labeled.js";
+import "../../../../select/select.js";
+import "../../../../breakpoint-provider.js";
+import "lightweight-charts";
+import "../../../../graph/formatters.js";
+import "../../../../graph/graph-view.js";
+import "../../../../base/info-portal/info-portal.js";
+import "../../../../edit-input/edit-input.js";
+import "../../../../slider/slider.js";
+import "../../../../slider/slider-context.js";
+import "../../../../text-button/text-button.js";
+import "../../../../with-title/with-title.js";
+import "../../../../status-elements/status-elements.js";
+import "@fortawesome/free-solid-svg-icons";
+import "react-router-dom";
+import { StyledDialogContainer as s } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../../../../icons/fa-icon.js";
+import "../../../../skeleton/skeleton.js";
+import "../../../../base/tabber/tabber.js";
+import "../../../../points-icon/points-icon.js";
+import "../../../../base-link/base-link.js";
+import "../../../../navigation-context/navigation-context.js";
+import "../../../../cards/card/card.js";
+import "../../../../checkbox-item/checkbox-item.js";
+import "../../../../client-adapters/styled-button/styled-button.js";
+import "../../../../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../../../../table/grid-table.js";
+import "../../../../help-tip/help-tip.js";
+import "../amounts/TransactionConfirmAmountField.js";
+import { TransactionConfirmDialogTest as C, transactionConfirmModalContainerVariants as u, transactionConfirmDialogShellVariants as M } from "./constants.js";
+import { ConfirmMenu as T } from "../../../../confirm-menu/confirm-menu.js";
+import { TransactionConfirmShell as g } from "./TransactionConfirmShell.js";
+import "../../../../spinner-loader/spinner-loader.js";
+import "../../../../detailed-apy/detailed-apy.js";
+import { Modal as h } from "../../../../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../../../../dialog/dialog-container.js";
+import "../../../../dialog/dialog-content.js";
+import "../../../../dialog/dialog-description.js";
+import "../../../../dialog/dialog-footer.js";
+import "../../../../dialog/dialog-header.js";
+import "../../../../dialog/dialog-title.js";
+import "../../../../dialog/dialog-modal-container.js";
+import "../../../../dialog/dialog-overlay.js";
+import "viem";
+import "../../../../input/input.js";
+import "../../../../label/label.js";
+import "../../../../dropdown-menu/dropdown-menu.js";
+import "../../../../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../../../../dropdown-menu/dropdown-menu-content.js";
+import "../../../../dropdown-menu/dropdown-menu-item.js";
+import "../../../../dropdown-menu/dropdown-menu-label.js";
+import "../../../../dropdown-menu/dropdown-menu-radio-item.js";
+import "../../../../dropdown-menu/dropdown-menu-separator.js";
+import "../../../../dropdown-menu/dropdown-menu-shortcut.js";
+import "../../../../dropdown-menu/dropdown-menu-sub-content.js";
+import "../../../../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "../../../../filter/filter-block.js";
+import "../../../../filter/filter-checkbox-item.js";
+import "../../../../filter/filter-chip.js";
+import "../../../../filter/filter-chips.js";
+import "../../../../filter/filter-dropdown-item.js";
+import "../../../../filter/filter-group.js";
+import "../../../../filter/filter-label.js";
+import "../../../../search-line/search-line.js";
+import "../../../../tabs/tabs.js";
+import "../../../../filter/filter-modal-item.js";
+import "../../../../filter/filter-radio-item.js";
+import "../../../../filter/filter-separator.js";
+import "../../../../filter/variants.js";
+import "../../../../icon-button/icon-button.js";
+import "../../../../layout/app-footer/app-footer.js";
+import "../../../../layout/app-header/app-header.js";
+import "../../../../layout/col/col.js";
+import "../../../../layout/container/container.js";
+import "../../../../layout/footer/footer.js";
+import "../../../../layout/grid/grid.js";
+import "../../../../layout/header/header.js";
+import "../../../../layout/layout/layout.js";
+import "../../../../page-title/page-title.js";
+import "../../../../layout/social-icons/social-icons.js";
+import "../../../../legal-agreement/legal-agreement-theme.js";
+import "../../../../link/link.js";
+import "../../../../loader/loader.js";
+import "../../../../loading/loading.js";
+import "../../../../loading-bar/loading-bar.js";
+import "../../../../navbar/navbar.js";
+import "../../../../navbar/navbar-indicator-context.js";
+import "../../../../app-bar/app-bar.js";
+import "../../../../navitem/navitem.js";
+import "../../../../rounded-image/rounded-image.js";
+import "../../../../segmented-control/segmented-control.js";
+import "../../../../separate-line/separate-line.js";
+import "../../../../simple-accordion/simple-accordion.js";
+import "../../../../spinner/spinner.js";
+import "../../../../split-list/split-list.js";
+import "../../../../status-dot/status-dot.js";
+import "../../../../table/table.js";
+import "../../../../table/grid-table-loader.js";
+import "../../../../textarea/textarea.js";
+import "../../../../theme-provider.js";
+import "../../../../tip-card/tip-card.js";
+function oi({
+  open: i,
+  onClose: t,
+  title: m,
+  titleAddon: p,
+  hideTitleAddonOnResult: n = !0,
+  containerClassName: a,
+  containerTestId: e,
+  shellTestId: d,
+  phase: o = "confirm",
+  ...l
+}) {
+  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(
+        M(),
+        a ?? u()
+      ),
+      "data-testid": e,
+      children: /* @__PURE__ */ r(
+        g,
+        {
+          ...l,
+          header: /* @__PURE__ */ r(
+            T,
+            {
+              title: m,
+              titleAddon: f,
+              onClose: t
+            }
+          ),
+          "data-testid": d ?? C.root,
+          phase: o
+        }
+      )
+    }
+  ) });
+}
+export {
+  oi as TransactionConfirmModalView
+};