@deframe-sdk/components 0.1.5 → 0.1.7

package/dist/index.js

@@ -5,6 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React6 = require('react');
 var framerMotion = require('framer-motion');
 var md = require('react-icons/md');
+var hi2 = require('react-icons/hi2');
+var io5 = require('react-icons/io5');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1443,6 +1445,130 @@ var SummaryDetails = ({
     }
   );
 };
+var SummaryDetailsCryptoControlV2 = ({
+  title,
+  items,
+  defaultOpen = false,
+  className = "",
+  summaryClassName = "",
+  contentClassName = "",
+  showDividers = true
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "details",
+    {
+      "data-test-id": "summary-details-v2",
+      "data-slot": "summary-details-v2",
+      className: tailwindMerge.twMerge(
+        "bg-[var(--color-bg-subtle,#1a1a1a)] rounded-lg border border-border-default dark:border-border-default-dark p-4 w-full max-w-[320px] group",
+        className
+      ),
+      open: defaultOpen,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "summary",
+          {
+            "data-test-id": "summary-details-v2-summary",
+            "data-slot": "summary-details-v2-summary",
+            className: tailwindMerge.twMerge("cursor-pointer list-none", summaryClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "summary-details-v2-title",
+                  "data-slot": "summary-details-v2-title",
+                  className: "text-[15px] font-semibold text-text-primary dark:text-text-primary-dark",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  "data-test-id": "summary-details-v2-chevron",
+                  "data-slot": "summary-details-v2-chevron",
+                  className: "w-4 h-4 text-text-secondary dark:text-text-secondary-dark transition-transform duration-300 group-open:rotate-180 flex-shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 9l7 7 7-7" })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "summary-details-v2-top-divider",
+            "data-slot": "summary-details-v2-top-divider",
+            className: "h-px bg-border-default dark:bg-border-default-dark mt-3"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "summary-details-v2-content",
+            "data-slot": "summary-details-v2-content",
+            className: tailwindMerge.twMerge("mt-0", contentClassName),
+            children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-test-id": "summary-details-v2-row",
+                  "data-slot": "summary-details-v2-row",
+                  className: "flex justify-between items-center py-[10px] gap-3",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "summary-details-v2-row-label",
+                        "data-slot": "summary-details-v2-row-label",
+                        className: tailwindMerge.twMerge(
+                          "text-[11px] font-medium uppercase tracking-[0.07em] text-text-tertiary dark:text-text-tertiary-dark flex-shrink-0",
+                          item.labelClassName
+                        ),
+                        children: item.label
+                      }
+                    ),
+                    typeof item.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "summary-details-v2-row-value",
+                        "data-slot": "summary-details-v2-row-value",
+                        className: tailwindMerge.twMerge(
+                          "text-[13px] font-semibold text-text-primary dark:text-text-primary-dark text-right",
+                          item.valueClassName
+                        ),
+                        children: item.value
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-test-id": "summary-details-v2-row-value",
+                        "data-slot": "summary-details-v2-row-value",
+                        className: tailwindMerge.twMerge("text-right", item.valueClassName),
+                        children: item.value
+                      }
+                    )
+                  ]
+                }
+              ),
+              showDividers && i < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": "summary-details-v2-row-divider",
+                  "data-slot": "summary-details-v2-row-divider",
+                  className: "h-px bg-border-default dark:bg-border-default-dark"
+                }
+              )
+            ] }, i))
+          }
+        )
+      ]
+    }
+  );
+};
 var ActionSheet = ({
   id,
   currentActionSheetId,
@@ -1709,30 +1835,1633 @@ function DeframeComponentsProvider({
     }
   );
 }
+var InfoRow = ({ children, borderBottom, className }) => {
+  const baseClasses = "self-stretch inline-flex justify-between items-start";
+  const borderClasses = borderBottom ? "border-b border-border-default dark:border-border-default-dark pb-sm" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row", className: tailwindMerge.twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoLabel = ({ children, className }) => {
+  const baseClasses = "text-sm text-text-secondary dark:text-text-secondary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-label", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var variantClasses = {
+  default: "text-text-primary dark:text-text-primary-dark",
+  success: "text-state-success",
+  warning: "text-state-warning",
+  error: "text-state-error"
+};
+var InfoValue = ({ children, variant = "default", className }) => {
+  const baseClasses = "text-sm font-semibold";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-value", className: tailwindMerge.twMerge(baseClasses, variantClasses[variant], className), children });
+};
+var InfoRowWithIcon = ({ children, borderBottom, className }) => {
+  const baseClasses = "flex items-start justify-between h-[17px]";
+  const borderClasses = borderBottom ? "border-b border-border-default dark:border-border-default-dark pb-sm" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-with-icon", className: tailwindMerge.twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoRowIconLabel = ({ children, className }) => {
+  const baseClasses = "text-sm text-text-secondary dark:text-text-secondary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "info-row-icon-label", className: tailwindMerge.twMerge(baseClasses, className), children: [
+    "\u2022 ",
+    children
+  ] });
+};
+var InfoRowIconValue = ({ children, className }) => {
+  const baseClasses = "text-sm font-semibold text-text-primary dark:text-text-primary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-icon-value", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var CollapsibleInfoRow = ({
+  label,
+  value,
+  children,
+  defaultOpen = false,
+  className,
+  collapseLabel,
+  expandLabel
+}) => {
+  const [isOpen, setIsOpen] = React6__namespace.default.useState(defaultOpen);
+  const baseClasses = "flex flex-col gap-sm w-full";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "collapsible-info-row", className: tailwindMerge.twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: "flex items-start justify-between w-full text-left h-[18px] cursor-pointer",
+        "aria-expanded": isOpen,
+        "aria-label": `${isOpen ? collapseLabel : expandLabel} ${label}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[2px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm text-text-secondary dark:text-text-secondary-dark", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronUp, { className: "w-3 h-3 text-text-secondary dark:text-text-secondary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-text-secondary dark:text-text-secondary-dark" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm font-semibold text-text-secondary dark:text-text-secondary-dark", children: value })
+        ]
+      }
+    ),
+    isOpen && children
+  ] });
+};
+var BackgroundContainer = ({ children, className }) => {
+  const baseClasses = "w-full flex-1 min-h-0 px-md bg-bg-default lg:bg-bg-subtle dark:bg-bg-default-dark lg:dark:bg-bg-subtle-dark text-text-primary dark:text-text-primary-dark flex flex-col relative overflow-y-auto";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "background-container", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var SectionCard = ({ children, className }) => {
+  const baseClasses = "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised rounded shadow-sm p-md flex flex-col gap-sm";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "section-card", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var Navbar = ({ children, className }) => {
+  const baseClasses = "w-full px-sm pr-md pt-sm pb-md border-b items-center border-border-subtle dark:border-border-subtle-dark flex";
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "data-test-id": "navbar", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var gapClasses = {
+  xs: "gap-xs",
+  sm: "gap-sm",
+  md: "gap-md",
+  lg: "gap-lg"
+};
+var FlexCol = ({ children, className, gap = "xs" }) => {
+  const baseClasses = "flex flex-col";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-col", className: tailwindMerge.twMerge(baseClasses, gapClasses[gap], className), children });
+};
+var gapClasses2 = {
+  xs: "gap-xs",
+  sm: "gap-sm",
+  md: "gap-md",
+  lg: "gap-lg"
+};
+var FlexRow = ({ children, className, gap = "xs" }) => {
+  const baseClasses = "flex items-center";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-row", className: tailwindMerge.twMerge(baseClasses, gapClasses2[gap], className), children });
+};
+var ScrollableContent = ({ children, className }) => {
+  const baseClasses = "flex-1 overflow-y-auto px-md py-lg";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "scrollable-content", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
+  const baseClasses = "w-full px-sm pr-md pt-sm pb-md border-b border-border-subtle dark:border-border-subtle-dark flex items-center";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "details-header", className: tailwindMerge.twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        "data-test-id": "details-header-back-button",
+        onClick: onBack,
+        className: "w-12 h-12 rounded-full flex items-center justify-center text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary cursor-pointer",
+        "aria-label": backAriaLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronLeft, { className: "w-6 h-6 text-text-tertiary dark:text-text-tertiary-dark" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h-large", children: title }) })
+  ] });
+};
+var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
+  const baseClasses = "w-12 h-12 rounded-full flex items-center justify-center text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary transition-colors cursor-pointer";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": testId != null ? testId : "close-button",
+      onClick,
+      className: tailwindMerge.twMerge(baseClasses, className),
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "w-6 h-6" })
+    }
+  );
+};
+var HighRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "high-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-size": "Small",
+      "data-type": "Failed",
+      className: "h-6 px-2 py-1 opacity-95 bg-red-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-state-error flex justify-center items-center gap-1",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-start text-state-error text-xs font-normal font-poppins leading-4", children: label }) })
+    }
+  ) });
+};
+var MediumRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "medium-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-size": "Small",
+      "data-type": "Warning",
+      className: "h-6 px-2 py-1 opacity-95 bg-amber-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-state-warning flex justify-center items-center gap-1",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-start text-state-warning text-xs font-normal font-poppins leading-4", children: label }) })
+    }
+  ) });
+};
+var LowRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "low-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-size": "Small",
+      "data-type": "Completed",
+      className: "h-6 px-2 py-1 opacity-95 bg-teal-600/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-state-success flex justify-center items-center gap-1",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-start text-state-success text-xs font-normal font-poppins leading-4", children: label }) })
+    }
+  ) });
+};
+var gapClasses3 = {
+  xs: "gap-xs",
+  sm: "gap-sm",
+  md: "gap-md",
+  lg: "gap-lg"
+};
+var HistoryFlexCol = ({ children, className, gap = "xs" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "history-flex-col", className: tailwindMerge.twMerge("flex flex-col", gapClasses3[gap], className), children });
+var TransactionTypeLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "transaction-type-label", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark", children });
+var Amount = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "amount", className: "text-accent-md-mobile text-text-secondary dark:text-text-secondary-dark", children });
+var AmountInUsd = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-test-id": "amount-in-usd", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark", children: [
+  "~ ",
+  children
+] });
+var TokenIcon = ({ src, alt }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    "data-test-id": "token-icon",
+    src,
+    alt,
+    className: "w-8 h-8 rounded-full",
+    onError: (e) => {
+      const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
+      e.target.src = `https://placehold.co/40x40?text=${fallbackText}`;
+    }
+  }
+);
+var SuccessBadge = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "success-badge", className: "bg-[rgba(43,161,118,0.12)] flex items-center gap-xs px-[8px] py-[2px] rounded-[24px]", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-state-success" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children })
+] });
+var truncateHash = (hash, chars = 6) => {
+  if (hash.length <= chars * 2 + 3) return hash;
+  return `${hash.slice(0, chars + 2)}...${hash.slice(-chars)}`;
+};
+var TransactionId = ({ hash }) => {
+  if (!hash) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-test-id": "transaction-id", className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children: "-" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "transaction-id", className: "flex items-center gap-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children: truncateHash(hash) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AddressDisplay,
+      {
+        address: hash,
+        className: "border-none bg-transparent p-0 gap-0",
+        textClassName: "hidden"
+      }
+    )
+  ] });
+};
+var ExplorerLink = ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "a",
+  {
+    "data-test-id": "explorer-link",
+    href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "text-brand-primary underline text-sm font-semibold font-poppins",
+    children
+  }
+);
+var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxRuntime.jsxs(HistoryFlexCol, { className: "items-end", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-primary", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark font-semibold", children: primary }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-secondary", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark", children: secondary })
+] });
+var HistoryDepositDetailsView = ({
+  transactionTypeLabel,
+  symbol,
+  amountWithSymbol,
+  amountInUsdFormatted,
+  shouldShowFlow,
+  assetIn,
+  assetOut,
+  primaryAssetIconUrl,
+  protocolLabel,
+  statusLabel,
+  txHash,
+  date,
+  explorerUrl,
+  onClose,
+  labels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.transactionDetailsTitle, onBack: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
+        shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetIn.amount,
+                " ",
+                assetIn.symbol
+              ] }),
+              assetIn.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetIn.amountInUSD }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetOut.amount,
+                " ",
+                assetOut.symbol
+              ] }),
+              assetOut.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetOut.amountInUSD }) : null
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsxRuntime.jsx(FlexCol, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountWithSymbol }),
+            amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.currencyLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: symbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.totalAmountLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountInUsdFormatted, secondary: amountWithSymbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.operationCostLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: labels.operationCostSponsoredLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.protocolLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: protocolLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.statusLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionIdLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.dateLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: date })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+};
+var HistoryWithdrawDetailsView = ({
+  transactionTypeLabel,
+  symbol,
+  amountWithSymbol,
+  amountInUsdFormatted,
+  shouldShowFlow,
+  assetIn,
+  assetOut,
+  primaryAssetIconUrl,
+  protocolLabel,
+  statusLabel,
+  txHash,
+  date,
+  explorerUrl,
+  onClose,
+  labels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.transactionDetailsTitle, onBack: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
+        shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetIn.amount,
+                " ",
+                assetIn.symbol
+              ] }),
+              assetIn.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetIn.amountInUSD }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetOut.amount,
+                " ",
+                assetOut.symbol
+              ] }),
+              assetOut.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetOut.amountInUSD }) : null
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsxRuntime.jsx(FlexCol, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountWithSymbol }),
+            amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.currencyLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: symbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.totalAmountLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountInUsdFormatted, secondary: amountWithSymbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.operationCostLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: labels.operationCostSponsoredLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.protocolLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: protocolLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.statusLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionIdLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.dateLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: date })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+};
+var SwapNetworkSelectorView = ({
+  chainLabel,
+  chainImage,
+  onClick,
+  directionLabel = "De",
+  testId = "swap-network-selector",
+  className
+}) => {
+  const baseClasses = "flex flex-row items-center gap-xs";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        "data-testid": testId,
+        type: "button",
+        onClick,
+        className: "ml-6 bg-bg-muted dark:bg-bg-muted-dark border border-border-subtle dark:border-border-subtle-dark rounded-lg flex items-center gap-xs px-sm py-xs hover:border-border-default dark:hover:border-border-default-dark transition-colors text-text-sm text-text-secondary dark:text-text-secondary-dark cursor-pointer",
+        "aria-label": `${directionLabel} ${chainLabel}`,
+        children: [
+          chainImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-full" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: chainLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-text-tertiary dark:text-text-tertiary-dark" }) })
+        ]
+      }
+    )
+  ] });
+};
+var SwapQuoteHeaderView = ({
+  label,
+  timerElement,
+  className
+}) => {
+  const baseClasses = "border-b border-border-default dark:border-border-default-dark pb-sm";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "font-semibold text-text-secondary dark:text-text-secondary-dark inline-flex items-center", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-md", children: timerElement })
+  ] }) });
+};
+var SwapAmountInputView = ({
+  value,
+  hasError,
+  onChange,
+  maxFractionDigits = 6,
+  field,
+  ariaLabel = "Amount to swap",
+  className
+}) => {
+  const normalizeAmountInput = (raw) => {
+    let val = raw.replace(/[^\d.,]/g, "");
+    const endsWithSeparator = /[.,]$/.test(val);
+    val = val.replace(/,/g, ".");
+    const firstDot = val.indexOf(".");
+    if (firstDot !== -1) {
+      const intPart = val.slice(0, firstDot);
+      const fractional = val.slice(firstDot + 1).replace(/\./g, "").slice(0, maxFractionDigits);
+      if (fractional.length > 0) {
+        val = `${intPart}.${fractional}`;
+      } else {
+        val = endsWithSeparator ? `${intPart}.` : intPart;
+      }
+    }
+    if (val.startsWith(".")) {
+      val = `0${val}`;
+    }
+    return val;
+  };
+  const baseClasses = "text-h2-mobile font-extrabold bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-text-disabled dark:placeholder:text-text-disabled-dark";
+  const colorClasses = hasError ? "text-state-error dark:text-state-error" : "text-text-primary dark:text-text-primary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    __spreadProps(__spreadValues({
+      "data-test-id": "swap-flow-amount-input",
+      placeholder: "0.00",
+      type: "text",
+      inputMode: "decimal",
+      autoComplete: "off",
+      "aria-label": ariaLabel,
+      min: "0",
+      step: "any",
+      value,
+      className: tailwindMerge.twMerge(baseClasses, colorClasses, className)
+    }, field), {
+      onChange: (event) => {
+        let normalized = normalizeAmountInput(event.target.value);
+        if (normalized && parseFloat(normalized) < 0) {
+          normalized = "0";
+        }
+        onChange(normalized);
+      },
+      onWheel: (event) => {
+        event.currentTarget.blur();
+      }
+    })
+  );
+};
+var SwapOutputAmountView = ({
+  displayOutput,
+  isLoading,
+  loadingElement,
+  searchingQuoteLabel = "Searching quote...",
+  className
+}) => {
+  const baseClasses = "text-h2-mobile font-extrabold text-right w-full min-w-[120px] text-text-primary dark:text-text-primary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "text-text-disabled dark:text-text-disabled-dark inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+};
+var SwapQuoteErrorsView = ({
+  hasQuoteError,
+  hasBytecodeError,
+  quoteErrorMessage = "Unable to get quote for this transaction",
+  bytecodeErrorMessage = "Error building transaction"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "swap-quote-errors", children: [
+    hasQuoteError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: quoteErrorMessage
+      }
+    ) }),
+    hasBytecodeError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: bytecodeErrorMessage
+      }
+    ) })
+  ] });
+};
+var SLIPPAGE_OPTIONS = [10, 50, 100];
+var SwapSlippageToleranceButtonsView = ({
+  slippageBps,
+  onSelect,
+  formatPercentage,
+  className
+}) => {
+  const baseClasses = "flex gap-xs";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-slippage-tolerance-buttons", className: tailwindMerge.twMerge(baseClasses, className), children: SLIPPAGE_OPTIONS.map((option) => {
+    const isActive = slippageBps === option;
+    const activeClasses = "border-brand-primary text-brand-primary bg-brand-tint dark:bg-brand-tint-dark";
+    const inactiveClasses = "border-border-subtle dark:border-border-subtle-dark text-text-secondary dark:text-text-secondary-dark bg-bg-default dark:bg-bg-default-dark";
+    const buttonBase = "px-sm py-xs rounded border text-text-sm cursor-pointer";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        "data-test-id": `slippage-option-${option}`,
+        type: "button",
+        onClick: () => onSelect(option),
+        className: tailwindMerge.twMerge(buttonBase, isActive ? activeClasses : inactiveClasses),
+        "aria-label": `${formatPercentage(option)}% slippage`,
+        "aria-pressed": isActive,
+        children: [
+          formatPercentage(option),
+          "%"
+        ]
+      },
+      option
+    );
+  }) });
+};
+var SwapTokenSelectorView = ({
+  token,
+  onClick,
+  testId = "swap-token-selector",
+  selectTokenLabel = "Select token",
+  className
+}) => {
+  const baseClasses = "h-[56px] border border-border-default dark:border-border-default-dark rounded overflow-hidden hover:border-border-strong dark:hover:border-border-strong-dark transition-colors flex items-center px-sm py-[6px] w-full cursor-pointer";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-test-id": testId,
+      type: "button",
+      onClick,
+      className: tailwindMerge.twMerge(baseClasses, className),
+      "aria-label": token ? token.symbol : selectTokenLabel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-sm flex-1", children: token ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          token.logoURI ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-full" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-raised dark:bg-bg-raised-dark text-text-secondary dark:text-text-secondary-dark flex items-center justify-center text-[10px] font-semibold", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-text-secondary dark:text-text-secondary-dark", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-text-tertiary dark:text-text-tertiary-dark" }) })
+      ]
+    }
+  );
+};
+var SwapQuoteBlockchainCostsView = ({
+  totalCostFormatted,
+  feePercentage,
+  gasCostFormatted,
+  protocolFee,
+  blockchainCostsLabel = "Blockchain Costs",
+  networkGasLabel = "Network Gas",
+  protocolFeeLabel = "Protocol Fee",
+  collapseLabel = "Collapse",
+  expandLabel = "Expand"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-blockchain-costs", children: /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsibleInfoRow,
+    {
+      label: blockchainCostsLabel,
+      value: `${totalCostFormatted} ~ ${feePercentage}%`,
+      defaultOpen: true,
+      collapseLabel,
+      expandLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRowWithIcon, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconLabel, { children: networkGasLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconValue, { children: gasCostFormatted })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRowWithIcon, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconValue, { children: protocolFee })
+        ] })
+      ] })
+    }
+  ) });
+};
+var ChooseAStrategyActionsheetView = ({
+  isOpen,
+  currentActionSheetId,
+  assetName,
+  apy,
+  logoUrl,
+  riskLevel,
+  onStrategyClick,
+  onClose,
+  yieldLabel,
+  apyLabel = "APY",
+  riskBadgeLabels,
+  closeAriaLabel = "Close"
+}) => {
+  const resolvedYieldLabel = yieldLabel != null ? yieldLabel : `Yield ${assetName}`;
+  const badges = {
+    low: /* @__PURE__ */ jsxRuntime.jsx(LowRiskBadge, { label: riskBadgeLabels.low }),
+    medium: /* @__PURE__ */ jsxRuntime.jsx(MediumRiskBadge, { label: riskBadgeLabels.medium }),
+    high: /* @__PURE__ */ jsxRuntime.jsx(HighRiskBadge, { label: riskBadgeLabels.high })
+  };
+  const Badge = badges[riskLevel];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "choose-strategy-actionsheet", className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ActionSheet,
+    {
+      id: "choose-strategy",
+      currentActionSheetId,
+      isOpen,
+      onClose,
+      position: "bottom",
+      height: "full",
+      contentClassName: "w-full max-w-[620px] mx-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { children: resolvedYieldLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("br", {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { className: "flex-shrink-0", onClick: onStrategyClick, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-full" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: resolvedYieldLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: Badge })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-state-success", children: [
+                apy,
+                "% ",
+                apyLabel
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(hi2.HiArrowRight, { className: "w-4 h-4" })
+            ] }) })
+          ] }) })
+        ] })
+      ] })
+    }
+  ) });
+};
+var StrategyDetailsView = ({
+  logoUrl,
+  title,
+  description,
+  strategyInfo,
+  onBack,
+  onDeposit,
+  headerTitle = "Details",
+  strategyInfoTitle = "Strategy Info",
+  depositButtonLabel = "Deposit",
+  backAriaLabel = "Back"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "strategy-details-content", className: "flex-1 min-h-0 overflow-y-auto p-md py-lg pb-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-lg min-h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-start gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h5", children: title })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SummaryDetails,
+        {
+          title: strategyInfoTitle,
+          items: strategyInfo,
+          defaultOpen: true,
+          className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "strategy-details-footer", className: "sticky bottom-0 left-0 right-0 border-t border-border-subtle dark:border-border-subtle-dark px-md py-md", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositButtonLabel }) })
+  ] });
+};
+var ProgressIndicator = ({
+  progress,
+  className = ""
+}) => {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative h-[12px] w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-[4px] bg-brand-primary rounded-lg transition-all duration-300",
+        style: { width: `${clampedProgress}%` }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-[4px] bg-bg-muted dark:bg-bg-muted-dark rounded-lg ml-1" })
+  ] }) });
+};
+var LoadingDots = ({ className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex gap-0.5 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
+  ] });
+};
+var SearchInput = ({
+  placeholder = "Search",
+  value: controlledValue,
+  disabled = false,
+  onChange,
+  onSearch,
+  className = "",
+  inputClassName,
+  autoFocus = false,
+  containerTestId,
+  inputTestId
+}) => {
+  const [internalValue, setInternalValue] = React6.useState(controlledValue || "");
+  React6.useEffect(() => {
+    if (controlledValue !== void 0) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleInputChange = (newValue) => {
+    setInternalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+    onSearch == null ? void 0 : onSearch(newValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex items-center relative ${className}`, "data-testid": containerTestId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "data-testid": inputTestId,
+        type: "text",
+        value: internalValue,
+        placeholder,
+        disabled,
+        autoFocus,
+        onChange: (e) => handleInputChange(e.target.value),
+        className: [
+          "w-full h-full rounded p-4 pr-12 leading-normal tracking-wide",
+          !inputClassName ? "bg-bg-subtle dark:bg-bg-subtle-dark" : "",
+          "placeholder:text-text-disabled dark:placeholder:text-text-disabled-dark text-text-primary dark:text-text-primary-dark",
+          "focus:outline-none focus:ring-2 focus:ring-brand-primary",
+          disabled ? "cursor-not-allowed opacity-50" : "",
+          inputClassName || ""
+        ].filter(Boolean).join(" ")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearch, { className: "w-4 h-4 text-text-secondary absolute right-4" })
+  ] });
+};
+var SearchEmptyState = ({
+  title,
+  description
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md py-20", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearchOff, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h3", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: description }) })
+  ] }) });
+};
+var CollapsibleSection = ({
+  title,
+  subtitle,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  className = "",
+  collapseText,
+  expandText
+}) => {
+  const [internalOpen, setInternalOpen] = React6__namespace.default.useState(defaultOpen);
+  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    const newOpenState = !isOpen;
+    if (controlledOpen === void 0) {
+      setInternalOpen(newOpenState);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpenState);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-sm w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        className: "flex items-center justify-between w-full text-left cursor-pointer",
+        "aria-expanded": isOpen,
+        "aria-label": `${isOpen ? collapseText : expandText} ${title}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { className: "text-white font-medium", children: title }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-xs", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: subtitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.svg,
+              {
+                className: "w-5 h-5 text-gray-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                animate: { rotate: isOpen ? 180 : 0 },
+                transition: { duration: 0.2, ease: "easeInOut" },
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 9l7 7 7-7" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2, ease: "easeInOut" },
+        style: { overflow: "hidden" },
+        children
+      }
+    ) })
+  ] });
+};
+var TransactionScreenIcon = ({
+  type,
+  gradient = "linear-gradient(135deg, #F6A700 0%, #F59E0B 100%)"
+}) => {
+  if (type === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-20 h-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full bg-brand-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }) });
+  }
+  if (type === "warning") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-bg-default dark:text-bg-default-dark", fill: "currentColor", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 5.33334C15.6444 5.33334 15.3111 5.51112 15.1111 5.8L5.11112 21.8C4.91112 22.0889 4.91112 22.4667 5.11112 22.7556C5.31112 23.0444 5.64445 23.2222 6.00001 23.2222H26C26.3556 23.2222 26.6889 23.0444 26.8889 22.7556C27.0889 22.4667 27.0889 22.0889 26.8889 21.8L16.8889 5.8C16.6889 5.51112 16.3556 5.33334 16 5.33334ZM16 10.6667C16.5333 10.6667 17 11.1333 17 11.6667V16C17 16.5333 16.5333 17 16 17C15.4667 17 15 16.5333 15 16V11.6667C15 11.1333 15.4667 10.6667 16 10.6667ZM16 19.3333C16.7333 19.3333 17.3333 19.9333 17.3333 20.6667C17.3333 21.4 16.7333 22 16 22C15.2667 22 14.6667 21.4 14.6667 20.6667C14.6667 19.9333 15.2667 19.3333 16 19.3333Z" }) }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-8 h-8 text-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.66659 8.33301H7.33325V7.08301C7.33325 6.62468 7.15374 6.23231 6.79471 5.90593C6.43568 5.57954 6.00409 5.41634 5.49992 5.41634C4.99575 5.41634 4.56415 5.57954 4.20513 5.90593C3.8461 6.23231 3.66659 6.62468 3.66659 7.08301V8.33301ZM5.49992 4.58301C6.00409 4.58301 6.43568 4.41981 6.79471 4.09342C7.15374 3.76704 7.33325 3.37467 7.33325 2.91634V1.66634H3.66659V2.91634C3.66659 3.37467 3.8461 3.76704 4.20513 4.09342C4.56415 4.41981 4.99575 4.58301 5.49992 4.58301ZM2.29159 9.16634C2.16172 9.16634 2.05287 9.12641 1.96502 9.04655C1.87718 8.96669 1.83325 8.86773 1.83325 8.74968C1.83325 8.63162 1.87718 8.53266 1.96502 8.4528C2.05287 8.37294 2.16172 8.33301 2.29159 8.33301H2.74992V7.08301C2.74992 6.6594 2.85877 6.26183 3.07648 5.8903C3.29419 5.51877 3.59784 5.2219 3.98742 4.99967C3.59784 4.77745 3.29419 4.48058 3.07648 4.10905C2.85877 3.73752 2.74992 3.33995 2.74992 2.91634V1.66634H2.29159C2.16172 1.66634 2.05287 1.62641 1.96502 1.54655C1.87718 1.46669 1.83325 1.36773 1.83325 1.24967C1.83325 1.13162 1.87718 1.03266 1.96502 0.952799C2.05287 0.872938 2.16172 0.833008 2.29159 0.833008H8.70825C8.83811 0.833008 8.94697 0.872938 9.03481 0.952799C9.12266 1.03266 9.16659 1.13162 9.16659 1.24967C9.16659 1.36773 9.12266 1.46669 9.03481 1.54655C8.94697 1.62641 8.83811 1.66634 8.70825 1.66634H8.24992V2.91634C8.24992 3.33995 8.14106 3.73752 7.92336 4.10905C7.70565 4.48058 7.402 4.77745 7.01242 4.99967C7.402 5.2219 7.70565 5.51877 7.92336 5.8903C8.14106 6.26183 8.24992 6.6594 8.24992 7.08301V8.33301H8.70825C8.83811 8.33301 8.94697 8.37294 9.03481 8.4528C9.12266 8.53266 9.16659 8.63162 9.16659 8.74968C9.16659 8.86773 9.12266 8.96669 9.03481 9.04655C8.94697 9.12641 8.83811 9.16634 8.70825 9.16634H2.29159Z", fill: "currentColor" }) }) }) });
+};
+var TransactionScreen = ({
+  progress,
+  iconType,
+  iconGradient,
+  title,
+  description,
+  onClose,
+  onBack,
+  backTitle = "",
+  actions,
+  children,
+  testId
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    onBack && /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: backTitle, onBack }),
+    onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: "flex justify-start px-md pt-md", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-md pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-md py-lg flex flex-col gap-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-md pt-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionScreenIcon, { type: iconType, gradient: iconGradient }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h-large", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-md-mobile font-poppins text-text-secondary dark:text-text-secondary-dark text-center", style: { maxWidth: "350px" }, children: description })
+      ] }),
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+    ] }),
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-md pb-md", children: actions })
+  ] }) });
+};
+var TransactionScreenInvestmentCard = ({
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken
+}) => {
+  const [hasImageError, setHasImageError] = React6__namespace.default.useState(false);
+  React6__namespace.default.useEffect(() => {
+    setHasImageError(false);
+  }, [iconSrc]);
+  const shouldShowImage = Boolean(iconSrc) && !hasImageError;
+  const fallbackLabel = (iconAlt || "?").slice(0, 1).toUpperCase();
+  return /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-accent-lg-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: strategyName }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+        apyLabel,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-state-success", children: apyValue })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center", children: shouldShowImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconSrc, alt: iconAlt, className: "w-6 h-6 rounded-full", onError: () => setHasImageError(true) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-text-secondary dark:text-text-secondary-dark", children: fallbackLabel }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: amountUSD }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: amountToken })
+      ] })
+    ] })
+  ] }) });
+};
+function StepStatusIcon({ status }) {
+  switch (status) {
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4", style: { color: "var(--color-state-success, #2BA176)" } }) });
+    case "processing":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoTimeOutline, { className: "w-4 h-4", style: { color: "var(--color-state-warning, #F6A700)" } }) });
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoAlertCircleOutline, { className: "w-4 h-4", style: { color: "var(--color-state-error, #FF4D4F)" } }) });
+  }
+}
+function StepStatusText({
+  step,
+  completedText,
+  processingText,
+  failedText,
+  viewOnExplorerText
+}) {
+  if (step.statusText) {
+    const textColorClass2 = step.status === "completed" ? "text-text-primary dark:text-text-primary-dark" : step.status === "processing" ? "text-text-secondary dark:text-text-secondary-dark" : step.status === "failed" ? "text-state-error" : "text-text-disabled dark:text-text-disabled-dark";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${textColorClass2}`, children: step.statusText });
+  }
+  if (step.status === "completed" && step.explorerUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: step.explorerUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-sm text-brand-primary dark:text-brand-primary-dark underline hover:no-underline",
+        children: viewOnExplorerText
+      }
+    );
+  }
+  const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
+  const textColorClass = step.status === "completed" ? "text-text-primary dark:text-text-primary-dark" : step.status === "processing" ? "text-text-secondary dark:text-text-secondary-dark" : "text-state-error";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${textColorClass}`, children: defaultText });
+}
+function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-primary dark:text-text-primary-dark font-medium", children: step.label }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: step.value }) : /* @__PURE__ */ jsxRuntime.jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
+  ] });
+}
+function TransactionProcessingDetails({
+  steps,
+  className = "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised",
+  defaultOpen = true,
+  labels
+}) {
+  if (!steps || steps.length === 0) {
+    return null;
+  }
+  const getProcessingSteps = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        step.status && /* @__PURE__ */ jsxRuntime.jsx(StepStatusIcon, { status: step.status }),
+        index < steps.length - 1 && step.status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px flex-1 min-h-[16px] bg-white my-1" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-2 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
+    ] }, `step-${index}`)) });
+  };
+  const items = [
+    {
+      label: "",
+      value: getProcessingSteps(),
+      valueClassName: "flex flex-col gap-0 w-full"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SummaryDetails,
+    {
+      title: labels.title,
+      items,
+      defaultOpen,
+      className
+    }
+  );
+}
+var TokenWithChainBadge = ({
+  tokenLogoUrl,
+  tokenAlt,
+  chainLogoUrl,
+  chainName
+}) => {
+  const fallbackText = encodeURIComponent((tokenAlt || "TOK").slice(0, 3).toUpperCase());
+  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-10 h-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: tokenLogoUrl || fallbackSrc,
+        alt: tokenAlt || "",
+        className: "object-cover w-10 h-10 rounded-full",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ),
+    chainLogoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: chainLogoUrl,
+        alt: chainName,
+        className: "absolute object-cover w-6 h-6 p-px bg-white border rounded-full -bottom-1 -right-1 border-bg-default",
+        onError: (e) => {
+          e.target.style.display = "none";
+        }
+      }
+    )
+  ] });
+};
+var SwapProcessingView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  transactionSteps,
+  onClose,
+  onGoToHistory,
+  titleText,
+  descriptionPrefix,
+  activityHistoryText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-processing-screen",
+      onClose,
+      progress,
+      iconType: "processing",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-processing-title", children: titleText }),
+      description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        descriptionPrefix,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "font-semibold underline underline-offset-2 cursor-pointer text-brand-primary",
+            onClick: onGoToHistory,
+            children: [
+              activityHistoryText,
+              "."
+            ]
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapCrossChainProcessingView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  originChainId,
+  destinationChainId,
+  originChainLogoUrl,
+  originChainName,
+  destinationChainLogoUrl,
+  destinationChainName,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  title,
+  description,
+  transactionSteps,
+  onClose,
+  onGoToHistory,
+  viewHistoryText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      onClose,
+      progress,
+      iconType: "processing",
+      title,
+      description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        description,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "font-semibold underline cursor-pointer underline-offset-2 text-brand-primary",
+            onClick: onGoToHistory,
+            children: viewHistoryText
+          }
+        ),
+        "."
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between w-full px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TokenWithChainBadge,
+              {
+                tokenLogoUrl: fromTokenIcon,
+                tokenAlt: fromTokenSymbol,
+                chainId: originChainId,
+                chainLogoUrl: originChainLogoUrl,
+                chainName: originChainName
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 p-2 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md left-1/2 top-1/2 bg-brand-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TokenWithChainBadge,
+              {
+                tokenLogoUrl: toTokenIcon,
+                tokenAlt: toTokenSymbol,
+                chainId: destinationChainId,
+                chainLogoUrl: destinationChainLogoUrl,
+                chainName: destinationChainName
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapSignatureWarningView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  errorTitle,
+  errorDescription,
+  transactionSteps,
+  onCancel,
+  onTryAgain,
+  cancelButtonText,
+  retryButtonText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-signature-warning-screen",
+      onClose: onCancel,
+      progress,
+      iconType: "warning",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-signature-warning-title", children: errorTitle }),
+      description: errorDescription,
+      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-signature-warning-actions", className: "flex gap-sm w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { "data-testid": "swap-signature-warning-cancel", className: "flex-1", onClick: onCancel, children: cancelButtonText }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-signature-warning-retry", className: "flex-1", onClick: onTryAgain, children: retryButtonText })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapSuccessView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  transactionSteps,
+  onClose,
+  onStartNewSwap,
+  onGoToWallet,
+  labels,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-success-screen",
+      onClose,
+      progress: 100,
+      iconType: "success",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-success-title", children: labels.title }),
+      description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        labels.descriptionPrefix,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "font-semibold", children: [
+          formattedInputAmount,
+          " ",
+          fromTokenSymbol
+        ] }),
+        " ",
+        labels.descriptionMiddle,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "font-semibold", children: [
+          formattedOutputAmount,
+          " ",
+          toTokenSymbol
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        labels.descriptionSuffix,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold text-brand-primary cursor-pointer", onClick: onGoToWallet, children: labels.walletLinkText })
+      ] }),
+      actions: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "swap-start-new-wrapper", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-start-new-button", className: "w-full", onClick: onStartNewSwap, children: labels.startNewSwapButton }) }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var SwapTransactionFailedView = ({
+  fromTokenSymbol,
+  fromTokenIcon,
+  toTokenSymbol,
+  toTokenIcon,
+  formattedInputAmount,
+  formattedOutputAmount,
+  formattedInputAmountUSD,
+  formattedOutputAmountUSD,
+  progress,
+  errorTitle,
+  errorDescription,
+  transactionSteps,
+  hasExplorerLink,
+  onBack,
+  onViewExplorer,
+  onTryAgain,
+  viewOnExplorerText,
+  retryButtonText,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TransactionScreen,
+    {
+      testId: "swap-failed-screen",
+      onClose: onBack,
+      progress,
+      iconType: "warning",
+      iconGradient: "linear-gradient(135deg, #EF4444 0%, #DC2626 100%)",
+      title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-failed-title", children: errorTitle }),
+      description: errorDescription,
+      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-failed-actions", className: "flex gap-sm w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { "data-testid": "swap-failed-view-explorer", className: "flex-1", onClick: onViewExplorer, disabled: !hasExplorerLink, children: viewOnExplorerText }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-failed-retry", className: "flex-1", onClick: onTryAgain, children: retryButtonText })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedInputAmount,
+                " ",
+                fromTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+                "~",
+                formattedOutputAmount,
+                " ",
+                toTokenSymbol
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var ChooseAnAssetSwapView = ({
+  actionSheetId,
+  isOpen,
+  currentActionSheetId,
+  onClose,
+  onSearch,
+  autoFocus,
+  displayedTokens,
+  hasMore,
+  onLoadMore,
+  findBalance,
+  isFetching,
+  onAssetClick,
+  labels,
+  formatTokenAmount,
+  formatCurrencyValue
+}) => {
+  const [searchValue, setSearchValue] = React6__namespace.default.useState("");
+  const handleSearch = (value) => {
+    setSearchValue(value);
+    onSearch(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", "data-testid": `swap-token-actionsheet-wrapper-${actionSheetId}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ActionSheet,
+    {
+      id: actionSheetId,
+      currentActionSheetId,
+      isOpen,
+      onClose,
+      position: "bottom",
+      height: "full",
+      contentClassName: "w-full max-w-[620px] mx-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { children: labels.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SearchInput,
+              {
+                onSearch: handleSearch,
+                placeholder: labels.searchPlaceholder,
+                autoFocus,
+                inputClassName: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised lg:dark:!bg-bg-raised-dark",
+                containerTestId: `swap-token-search-container-${actionSheetId}`,
+                inputTestId: `swap-token-search-input-${actionSheetId}`
+              }
+            )
+          ] }),
+          searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: [
+            isFetching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+            ] }) }),
+            displayedTokens.map((token, index) => {
+              const balance = findBalance(token);
+              const tokenPriceUSD = Number(balance == null ? void 0 : balance.priceUSD) || 0;
+              const formattedBalance = (balance == null ? void 0 : balance.amountUI) ? formatTokenAmount(balance.amountUI, tokenPriceUSD, 2) : "0";
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                ListItem,
+                {
+                  className: "w-full flex-shrink-0",
+                  onClick: () => onAssetClick(token),
+                  "data-testid": `swap-token-item-${token.symbol.toLowerCase()}-${token.chainId}`,
+                  "data-address": token.address,
+                  "data-chain-id": token.chainId,
+                  "data-symbol": token.symbol,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-full" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: token.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: token.symbol })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: formattedBalance }),
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
+                    ] })
+                  ]
+                },
+                `token-${token.address}-${index}`
+              );
+            }),
+            hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: labels.loadMoreButton }) })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+};
 
 exports.ActionButton = ActionButton;
 exports.ActionSheet = ActionSheet;
 exports.AddressDisplay = AddressDisplay;
+exports.BackgroundContainer = BackgroundContainer;
 exports.BannerNotification = BannerNotification;
+exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
+exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
+exports.CloseButton = CloseButton;
+exports.CollapsibleInfoRow = CollapsibleInfoRow;
+exports.CollapsibleSection = CollapsibleSection;
 exports.ConnectWalletList = ConnectWalletList;
 exports.Currency = Currency;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
+exports.DetailsHeader = DetailsHeader;
 exports.Fiat = Currency;
+exports.FlexCol = FlexCol;
+exports.FlexRow = FlexRow;
+exports.HighRiskBadge = HighRiskBadge;
+exports.HistoryDepositDetailsView = HistoryDepositDetailsView;
+exports.HistoryWithdrawDetailsView = HistoryWithdrawDetailsView;
+exports.InfoLabel = InfoLabel;
+exports.InfoRow = InfoRow;
+exports.InfoRowIconLabel = InfoRowIconLabel;
+exports.InfoRowIconValue = InfoRowIconValue;
+exports.InfoRowWithIcon = InfoRowWithIcon;
+exports.InfoValue = InfoValue;
 exports.Input = Input;
 exports.Link = Link;
 exports.ListItem = ListItem;
 exports.ListItemContent = ListItemContent;
 exports.ListItemLeftSide = ListItemLeftSide;
 exports.ListItemRightSide = ListItemRightSide;
+exports.LoadingDots = LoadingDots;
+exports.LowRiskBadge = LowRiskBadge;
+exports.MediumRiskBadge = MediumRiskBadge;
+exports.Navbar = Navbar;
 exports.PercentageButton = PercentageButton;
 exports.PrimaryButton = PrimaryButton;
+exports.ProgressIndicator = ProgressIndicator;
+exports.ScrollableContent = ScrollableContent;
+exports.SearchEmptyState = SearchEmptyState;
+exports.SearchInput = SearchInput;
 exports.SecondaryButton = SecondaryButton;
+exports.SectionCard = SectionCard;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectItem = SelectItem;
 exports.SelectTrigger = SelectTrigger;
 exports.Skeleton = Skeleton;
+exports.StepDisplay = StepDisplay;
+exports.StepStatusIcon = StepStatusIcon;
+exports.StepStatusText = StepStatusText;
+exports.StrategyDetailsView = StrategyDetailsView;
 exports.SummaryDetails = SummaryDetails;
+exports.SummaryDetailsCryptoControlV2 = SummaryDetailsCryptoControlV2;
+exports.SwapAmountInputView = SwapAmountInputView;
+exports.SwapCrossChainProcessingView = SwapCrossChainProcessingView;
+exports.SwapNetworkSelectorView = SwapNetworkSelectorView;
+exports.SwapOutputAmountView = SwapOutputAmountView;
+exports.SwapProcessingView = SwapProcessingView;
+exports.SwapQuoteBlockchainCostsView = SwapQuoteBlockchainCostsView;
+exports.SwapQuoteErrorsView = SwapQuoteErrorsView;
+exports.SwapQuoteHeaderView = SwapQuoteHeaderView;
+exports.SwapSignatureWarningView = SwapSignatureWarningView;
+exports.SwapSlippageToleranceButtonsView = SwapSlippageToleranceButtonsView;
+exports.SwapSuccessView = SwapSuccessView;
+exports.SwapTokenSelectorView = SwapTokenSelectorView;
+exports.SwapTransactionFailedView = SwapTransactionFailedView;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
@@ -1743,6 +3472,11 @@ exports.TextAccent = TextAccent_default;
 exports.TextBody = TextBody_default;
 exports.TextHeading = TextHeading_default;
 exports.Title = Title;
+exports.TokenWithChainBadge = TokenWithChainBadge;
+exports.TransactionProcessingDetails = TransactionProcessingDetails;
+exports.TransactionScreen = TransactionScreen;
+exports.TransactionScreenIcon = TransactionScreenIcon;
+exports.TransactionScreenInvestmentCard = TransactionScreenInvestmentCard;
 exports.WalletItem = WalletItem;
 exports.WalletList = ConnectWalletList;
 exports.WalletListContainer = WalletListContainer;