@deframe-sdk/components 0.1.14 → 0.1.16

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight, HiArr
 import * as React6 from 'react';
 import React6__default, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdArrowRight, MdArrowDropDown, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
+import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
 import { PiClockCountdownBold } from 'react-icons/pi';
 
@@ -168,14 +168,14 @@ function PrimaryButton(_a) {
     /** enabled state */
     enabled: [
       "hover:opacity-90",
-      "text-[var(--deframe-widget-color-text-primary)]",
+      "text-[color:var(--deframe-widget-color-text-inverse)]",
       "bg-[var(--deframe-widget-color-brand-primary)]",
       "border-[color:var(--deframe-widget-color-border-primary)]",
       "cursor-pointer"
     ].join(" "),
     /** disabled state */
     disabled: [
-      "text-[var(--deframe-widget-color-text-primary-disabled)]",
+      "text-[color:var(--deframe-widget-color-text-inverse-disabled)]",
       "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
       "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
       "cursor-not-allowed"
@@ -231,7 +231,7 @@ function SecondaryButton(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-brand-secondary)]",
+      "text-[color:var(--deframe-widget-color-text-secondary)]",
       "border-[color:var(--deframe-widget-color-border-secondary)]",
       "hover:opacity-90",
       "cursor-pointer"
@@ -291,7 +291,7 @@ function TertiaryButton(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-brand-tertiary)]",
+      "text-[color:var(--deframe-widget-color-text-tertiary)]",
       "hover:opacity-90",
       "cursor-pointer"
     ].join(" "),
@@ -418,12 +418,12 @@ function Link(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-brand-primary)]",
+      "text-[color:var(--deframe-widget-color-text-highlight)]",
       "underline",
       "cursor-pointer"
     ].join(" "),
     disabled: [
-      "text-[var(--deframe-widget-color-brand-primary-disabled)]",
+      "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
       "cursor-not-allowed",
       "pointer-events-none"
     ].join(" ")
@@ -885,25 +885,35 @@ var Text = React6.forwardRef(
     var _b = _a, {
       children,
       as: Component = "p",
+      disabled = false,
       className = ""
     } = _b, props = __objRest(_b, [
       "children",
       "as",
+      "disabled",
       "className"
     ]);
     const baseClasses = [
       "[font-family:var(--deframe-widget-font-family)]",
       "[font-size:var(--deframe-widget-font-size-md)]",
       "[line-height:var(--deframe-widget-font-leading-md)]",
-      "[font-weight:var(--deframe-widget-font-weight-regular)]",
-      "text-[color:var(--deframe-widget-color-text-primary)]"
+      "[font-weight:var(--deframe-widget-font-weight-regular)]"
     ].join(" ");
-    const textClasses = twMerge(baseClasses, className);
+    const stateClasses = {
+      enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
+      disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
+    };
+    const textClasses = twMerge(
+      baseClasses,
+      stateClasses[disabled ? "disabled" : "enabled"],
+      className
+    );
     return React6.createElement(
       Component,
       __spreadValues({
         ref,
-        className: textClasses
+        className: textClasses,
+        "aria-disabled": disabled || void 0
       }, props),
       children
     );
@@ -916,10 +926,12 @@ var TextAccent = React6.forwardRef(
     var _b = _a, {
       as = "span",
       variant = "accent-medium",
+      disabled = false,
       className = ""
     } = _b, props = __objRest(_b, [
       "as",
       "variant",
+      "disabled",
       "className"
     ]);
     const accentVariants = {
@@ -939,8 +951,16 @@ var TextAccent = React6.forwardRef(
         "[font-weight:var(--deframe-widget-font-weight-semibold)]"
       ].join(" ")
     };
+    const stateClasses = {
+      enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
+      disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
+    };
     const variantClass = accentVariants[variant];
-    const accentClasses = twMerge(variantClass, className);
+    const accentClasses = twMerge(
+      variantClass,
+      stateClasses[disabled ? "disabled" : "enabled"],
+      className
+    );
     return /* @__PURE__ */ jsx(
       Text_default,
       __spreadValues({
@@ -948,7 +968,8 @@ var TextAccent = React6.forwardRef(
         as,
         className: accentClasses,
         "data-slot": "text-accent",
-        "data-test-id": "text-accent"
+        "data-test-id": "text-accent",
+        "aria-disabled": disabled || void 0
       }, props)
     );
   }
@@ -959,18 +980,15 @@ var TextBody = React6.forwardRef(
     var _b = _a, {
       as = "p",
       variant = "text-medium",
+      disabled = false,
       className = ""
     } = _b, props = __objRest(_b, [
       "as",
       "variant",
+      "disabled",
       "className"
     ]);
     const bodyVariants = {
-      "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]": [
-        "[font-size:var(--deframe-widget-font-size-lg)]",
-        "[line-height:var(--deframe-widget-font-leading-lg)]",
-        "[font-weight:var(--deframe-widget-font-weight-regular)]"
-      ].join(" "),
       "text-large": [
         "[font-size:var(--deframe-widget-font-size-lg)]",
         "[line-height:var(--deframe-widget-font-leading-lg)]",
@@ -987,8 +1005,16 @@ var TextBody = React6.forwardRef(
         "[font-weight:var(--deframe-widget-font-weight-regular)]"
       ].join(" ")
     };
+    const stateClasses = {
+      enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
+      disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
+    };
     const variantClass = bodyVariants[variant];
-    const bodyClasses = twMerge(variantClass, className);
+    const bodyClasses = twMerge(
+      variantClass,
+      stateClasses[disabled ? "disabled" : "enabled"],
+      className
+    );
     return /* @__PURE__ */ jsx(
       Text_default,
       __spreadValues({
@@ -996,7 +1022,8 @@ var TextBody = React6.forwardRef(
         as,
         className: bodyClasses,
         "data-slot": "text-body",
-        "data-test-id": "text-body"
+        "data-test-id": "text-body",
+        "aria-disabled": disabled || void 0
       }, props)
     );
   }
@@ -1007,10 +1034,12 @@ var TextHeading = React6.forwardRef(
     var _b = _a, {
       as,
       variant = "h2",
+      disabled = false,
       className = ""
     } = _b, props = __objRest(_b, [
       "as",
       "variant",
+      "disabled",
       "className"
     ]);
     const headingVariants = {
@@ -1045,8 +1074,16 @@ var TextHeading = React6.forwardRef(
         "[font-weight:var(--deframe-widget-font-weight-bold)]"
       ].join(" ")
     };
+    const stateClasses = {
+      enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
+      disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
+    };
     const variantClass = headingVariants[variant];
-    const headingClasses = twMerge(variantClass, className);
+    const headingClasses = twMerge(
+      variantClass,
+      stateClasses[disabled ? "disabled" : "enabled"],
+      className
+    );
     return /* @__PURE__ */ jsx(
       Text_default,
       __spreadValues({
@@ -1054,7 +1091,8 @@ var TextHeading = React6.forwardRef(
         as: variant === "h-large" ? "h1" : variant,
         className: headingClasses,
         "data-slot": "text-heading",
-        "data-test-id": "text-heading"
+        "data-test-id": "text-heading",
+        "aria-disabled": disabled || void 0
       }, props)
     );
   }
@@ -1573,7 +1611,7 @@ function BannerNotificationMessage(_a) {
   return /* @__PURE__ */ jsx(
     TextBody,
     __spreadValues({
-      variant: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
+      variant: "text-medium",
       "data-slot": "banner-notification-message",
       "data-test-id": "banner-notification-message",
       className: twMerge("text-inherit", className)
@@ -1879,7 +1917,7 @@ var SummaryDetails = ({
               /* @__PURE__ */ jsx(
                 TextBody,
                 {
-                  variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
+                  variant: "text-small",
                   className: twMerge("text-[color:var(--deframe-widget-color-text-tertiary)]", item.labelClassName),
                   children: item.label
                 }
@@ -1887,7 +1925,7 @@ var SummaryDetails = ({
               typeof item.value === "string" ? /* @__PURE__ */ jsx(
                 TextBody,
                 {
-                  variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
+                  variant: "text-small",
                   className: twMerge("text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", item.valueClassName),
                   children: item.value
                 }
@@ -2573,45 +2611,6 @@ var HistoryWithdrawDetailsView = ({
     ] }) })
   ] });
 };
-var SwapNetworkSelectorView = ({
-  chainLabel,
-  chainImage,
-  onClick,
-  directionLabel = "De",
-  testId = "swap-network-selector",
-  className
-}) => {
-  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsxs("div", { "data-test-id": testId, className: twMerge(baseClasses, className), children: [
-    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-testid": testId,
-        type: "button",
-        onClick,
-        className: "ml-[var(--deframe-widget-size-gap-lg)] bg-[var(--deframe-widget-color-bg-tertiary)] border border-[color:var(--deframe-widget-color-border-tertiary)] rounded-[var(--deframe-widget-size-radius-md)] flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] hover:border-[color:var(--deframe-widget-color-border-secondary)] transition-colors [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] cursor-pointer",
-        "aria-label": `${directionLabel} ${chainLabel}`,
-        children: [
-          chainImage ? /* @__PURE__ */ jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-[var(--deframe-widget-size-radius-full)]" }) : null,
-          /* @__PURE__ */ jsx("span", { children: chainLabel }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
-        ]
-      }
-    )
-  ] });
-};
-var SwapQuoteHeaderView = ({
-  label,
-  timerElement,
-  className
-}) => {
-  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-header", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
-  ] }) });
-};
 var SwapAmountInputView = ({
   value,
   hasError,
@@ -2669,127 +2668,6 @@ var SwapAmountInputView = ({
     })
   );
 };
-var SwapOutputAmountView = ({
-  displayOutput,
-  isLoading,
-  loadingElement,
-  searchingQuoteLabel = "Searching quote...",
-  className
-}) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] 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__ */ jsxs("div", { "data-test-id": "swap-quote-errors", children: [
-    hasQuoteError && /* @__PURE__ */ jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsx(
-      BannerNotification,
-      {
-        type: "inline",
-        variant: "error",
-        message: quoteErrorMessage
-      }
-    ) }),
-    hasBytecodeError && /* @__PURE__ */ jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsx(
-      BannerNotification,
-      {
-        type: "inline",
-        variant: "error",
-        message: bytecodeErrorMessage
-      }
-    ) })
-  ] });
-};
-var SLIPPAGE_OPTIONS = [10, 50, 100];
-var SwapSlippageToleranceButtonsView = ({
-  slippageBps,
-  onSelect,
-  formatPercentage,
-  className
-}) => {
-  const baseClasses = "flex gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-slippage-tolerance-buttons", className: twMerge(baseClasses, className), children: SLIPPAGE_OPTIONS.map((option) => {
-    const isActive = slippageBps === option;
-    const activeClasses = "border-[color:var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_18%,transparent)]";
-    const inactiveClasses = "border-[color:var(--deframe-widget-color-border-tertiary)] text-[color:var(--deframe-widget-color-text-secondary)] bg-[var(--deframe-widget-color-bg-primary)]";
-    const buttonBase = "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-xs)] border [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] cursor-pointer";
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        "data-test-id": `slippage-option-${option}`,
-        type: "button",
-        onClick: () => onSelect(option),
-        className: 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-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] overflow-hidden hover:border-[color:var(--deframe-widget-color-border-primary)] transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      "data-test-id": testId,
-      type: "button",
-      onClick,
-      className: twMerge(baseClasses, className),
-      "aria-label": token ? token.symbol : selectTokenLabel,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: token ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          token.logoURI ? /* @__PURE__ */ jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)]" }) : /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-secondary)] flex items-center justify-center text-[10px] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
-          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: token.symbol })
-        ] }) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
-      ]
-    }
-  );
-};
-var SwapQuoteBlockchainCostsView = ({
-  totalCostFormatted,
-  feePercentage,
-  gasCostFormatted,
-  protocolFee,
-  blockchainCostsLabel = "Blockchain Costs",
-  networkGasLabel = "Network Gas",
-  protocolFeeLabel = "Protocol Fee",
-  collapseLabel = "Collapse",
-  expandLabel = "Expand"
-}) => {
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-blockchain-costs", children: /* @__PURE__ */ jsx(
-    CollapsibleInfoRow,
-    {
-      label: blockchainCostsLabel,
-      value: `${totalCostFormatted} ~ ${feePercentage}%`,
-      defaultOpen: true,
-      collapseLabel,
-      expandLabel,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
-        /* @__PURE__ */ jsxs(InfoRowWithIcon, { children: [
-          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: networkGasLabel }),
-          /* @__PURE__ */ jsx(InfoRowIconValue, { children: gasCostFormatted })
-        ] }),
-        /* @__PURE__ */ jsxs(InfoRowWithIcon, { borderBottom: true, children: [
-          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
-          /* @__PURE__ */ jsx(InfoRowIconValue, { children: protocolFee })
-        ] })
-      ] })
-    }
-  ) });
-};
 var ChooseAStrategyActionsheetView = ({
   isOpen,
   currentActionSheetId,
@@ -2832,7 +2710,7 @@ var ChooseAStrategyActionsheetView = ({
             /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
             /* @__PURE__ */ jsxs(ListItemContent, { className: "gap-[var(--deframe-widget-size-gap-xs)]", children: [
               /* @__PURE__ */ jsx(TextBody, { children: resolvedYieldLabel }),
-              /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: Badge })
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: Badge })
             ] }),
             /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
               /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--deframe-widget-color-state-success)]", children: [
@@ -2858,8 +2736,16 @@ var StrategyDetailsView = ({
   headerTitle = "Details",
   strategyInfoTitle = "Strategy Info",
   depositButtonLabel = "Deposit",
-  backAriaLabel = "Back"
+  backAriaLabel = "Back",
+  error,
+  notFoundMessage
 }) => {
+  if (error) {
+    return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: error }) });
+  }
+  if (notFoundMessage) {
+    return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark p-md", children: notFoundMessage }) });
+  }
   return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
     /* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
     /* @__PURE__ */ jsx("div", { "data-test-id": "strategy-details-content", className: "flex-1 min-h-0 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] py-[var(--deframe-widget-size-padding-y-lg)] pb-[var(--deframe-widget-size-padding-y-xxl)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)] min-h-full", children: [
@@ -2867,7 +2753,7 @@ var StrategyDetailsView = ({
         /* @__PURE__ */ jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-[var(--deframe-widget-size-radius-full)]" }),
         /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: title })
       ] }),
-      /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }),
+      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }),
       /* @__PURE__ */ jsx(
         SummaryDetails,
         {
@@ -2960,7 +2846,7 @@ var SearchEmptyState = ({
       /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsx(MdOutlineSearchOff, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)]" }) }),
       /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }) })
+    /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
   ] }) });
 };
 var CollapsibleSection = ({
@@ -2995,7 +2881,7 @@ var CollapsibleSection = ({
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary-dark)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
-            subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle }),
             /* @__PURE__ */ jsx(
               motion.svg,
               {
@@ -4030,7 +3916,7 @@ var ChooseAnAssetSwapView = ({
           ] }),
           searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0", children: [
             isFetching && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
-              /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
               /* @__PURE__ */ jsx(LoadingDots, {})
             ] }) }),
             displayedTokens.map((token, index) => {
@@ -4050,11 +3936,11 @@ var ChooseAnAssetSwapView = ({
                     /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
                     /* @__PURE__ */ jsxs(ListItemContent, { children: [
                       /* @__PURE__ */ jsx(TextBody, { children: token.name }),
-                      /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: token.symbol })
+                      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: token.symbol })
                     ] }),
                     /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
                       /* @__PURE__ */ jsx(TextBody, { children: formattedBalance }),
-                      /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
+                      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
                     ] })
                   ]
                 },
@@ -4068,77 +3954,77 @@ var ChooseAnAssetSwapView = ({
     }
   ) });
 };
-var SwapFormView = ({
-  labels,
-  onHistoryClick,
-  fromCard,
-  switchButton,
-  toCard,
-  advancedSettings,
-  transactionDetails,
-  confirmButton
+var SwapTokenSelectorView = ({
+  token,
+  onClick,
+  testId = "swap-token-selector",
+  selectTokenLabel = "Select token",
+  className
 }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "swap-form-view",
-        className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-md", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
-              /* @__PURE__ */ jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
-              labels.subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "data-testid": "swap-history-button",
-                type: "button",
-                onClick: onHistoryClick,
-                className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
-                "aria-label": labels.historyAriaLabel,
-                children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
-            fromCard,
-            switchButton,
-            toCard
-          ] }),
-          advancedSettings,
-          /* @__PURE__ */ jsx("div", { className: "pb-xl", children: transactionDetails })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "swap-flow-footer",
-        className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
-        children: confirmButton
-      }
-    )
-  ] });
+  const baseClasses = "h-[56px] border border-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] overflow-hidden hover:border-[color:var(--deframe-widget-color-border-primary)] transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-test-id": testId,
+      type: "button",
+      onClick,
+      className: twMerge(baseClasses, className),
+      "aria-label": token ? token.symbol : selectTokenLabel,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: token ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          token.logoURI ? /* @__PURE__ */ jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)]" }) : /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-secondary)] flex items-center justify-center text-[10px] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: token.symbol })
+        ] }) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+      ]
+    }
+  );
 };
-var SwapFromCardView = ({
-  labels,
-  selectedToken,
-  onTokenClick,
-  balanceFormatted,
-  balanceUsdFormatted,
-  onBalanceClick,
+var SwapNetworkSelectorView = ({
   chainLabel,
   chainImage,
-  onNetworkClick,
-  amountValue,
-  amountHasError,
+  onClick,
+  directionLabel = "De",
+  testId = "swap-network-selector",
+  className
+}) => {
+  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": testId, className: twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-testid": testId,
+        type: "button",
+        onClick,
+        className: "ml-[var(--deframe-widget-size-gap-lg)] bg-[var(--deframe-widget-color-bg-tertiary)] border border-[color:var(--deframe-widget-color-border-tertiary)] rounded-[var(--deframe-widget-size-radius-md)] flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] hover:border-[color:var(--deframe-widget-color-border-secondary)] transition-colors [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] cursor-pointer",
+        "aria-label": `${directionLabel} ${chainLabel}`,
+        children: [
+          chainImage ? /* @__PURE__ */ jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-[var(--deframe-widget-size-radius-full)]" }) : null,
+          /* @__PURE__ */ jsx("span", { children: chainLabel }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+        ]
+      }
+    )
+  ] });
+};
+var SwapFromCardView = ({
+  labels,
+  selectedToken,
+  onTokenClick,
+  balanceFormatted,
+  balanceUsdFormatted,
+  onBalanceClick,
+  chainLabel,
+  chainImage,
+  onNetworkClick,
+  amountValue,
+  amountHasError,
   onAmountChange,
   maxFractionDigits,
   amountUsdFormatted,
   isAmountUsdLoading,
-  amountSlot
+  field
 }) => {
   return /* @__PURE__ */ jsx(SectionCard, { className: "flex flex-col gap-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-md items-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm flex-1", children: [
@@ -4193,7 +4079,7 @@ var SwapFromCardView = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 items-end justify-center gap-xs", children: amountSlot != null ? amountSlot : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-xs", children: [
       /* @__PURE__ */ jsx(
         SwapAmountInputView,
         {
@@ -4201,7 +4087,8 @@ var SwapFromCardView = ({
           hasError: amountHasError,
           onChange: onAmountChange,
           maxFractionDigits,
-          ariaLabel: labels.amountPlaceholder
+          ariaLabel: labels.amountPlaceholder,
+          field
         }
       ),
       /* @__PURE__ */ jsx(
@@ -4213,9 +4100,19 @@ var SwapFromCardView = ({
           children: isAmountUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : amountUsdFormatted
         }
       )
-    ] }) })
+    ] })
   ] }) });
 };
+var SwapOutputAmountView = ({
+  displayOutput,
+  isLoading,
+  loadingElement,
+  searchingQuoteLabel = "Searching quote...",
+  className
+}) => {
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+};
 var SwapToCardView = ({
   labels,
   selectedToken,
@@ -4293,6 +4190,152 @@ var SwapToCardView = ({
     ] })
   ] }) });
 };
+var SLIPPAGE_OPTIONS = [10, 50, 100];
+var SwapSlippageToleranceButtonsView = ({
+  slippageBps,
+  onSelect,
+  formatPercentage,
+  className
+}) => {
+  const baseClasses = "flex gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-slippage-tolerance-buttons", className: twMerge(baseClasses, className), children: SLIPPAGE_OPTIONS.map((option) => {
+    const isActive = slippageBps === option;
+    const activeClasses = "border-[color:var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_18%,transparent)]";
+    const inactiveClasses = "border-[color:var(--deframe-widget-color-border-tertiary)] text-[color:var(--deframe-widget-color-text-secondary)] bg-[var(--deframe-widget-color-bg-primary)]";
+    const buttonBase = "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-xs)] border [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] cursor-pointer";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-test-id": `slippage-option-${option}`,
+        type: "button",
+        onClick: () => onSelect(option),
+        className: twMerge(buttonBase, isActive ? activeClasses : inactiveClasses),
+        "aria-label": `${formatPercentage(option)}% slippage`,
+        "aria-pressed": isActive,
+        children: formatPercentage(option)
+      },
+      option
+    );
+  }) });
+};
+var SwapAdvancedSettingsView = ({
+  title,
+  isOpen,
+  onOpenChange,
+  slippageBps,
+  onSlippageSelect,
+  formatPercentage,
+  percentageOptions,
+  onPercentageClick,
+  slippageFormatted,
+  collapseText,
+  expandText,
+  maxLabel
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "pb-2 mt-md", children: /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsxs(
+    CollapsibleSection,
+    {
+      title,
+      subtitle: slippageFormatted,
+      open: isOpen,
+      onOpenChange,
+      collapseText,
+      expandText,
+      children: [
+        /* @__PURE__ */ jsx(
+          SwapSlippageToleranceButtonsView,
+          {
+            slippageBps,
+            onSelect: onSlippageSelect,
+            formatPercentage,
+            className: "mt-md"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "w-full mt-md", children: /* @__PURE__ */ jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
+          const isMax = index === percentageOptions.length - 1;
+          const label = isMax ? maxLabel : `${pct / 100}%`;
+          return /* @__PURE__ */ jsx(
+            PercentageButton,
+            {
+              type: "button",
+              onClick: () => onPercentageClick(pct),
+              children: label
+            },
+            pct
+          );
+        }) }) })
+      ]
+    }
+  ) }) });
+};
+var SwapQuoteHeaderView = ({
+  label,
+  timerElement,
+  className
+}) => {
+  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-header", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
+  ] }) });
+};
+var SwapQuoteBlockchainCostsView = ({
+  totalCostFormatted,
+  feePercentage,
+  gasCostFormatted,
+  protocolFee,
+  blockchainCostsLabel = "Blockchain Costs",
+  networkGasLabel = "Network Gas",
+  protocolFeeLabel = "Protocol Fee",
+  collapseLabel = "Collapse",
+  expandLabel = "Expand"
+}) => {
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-blockchain-costs", children: /* @__PURE__ */ jsx(
+    CollapsibleInfoRow,
+    {
+      label: blockchainCostsLabel,
+      value: `${totalCostFormatted} ~ ${feePercentage}%`,
+      defaultOpen: true,
+      collapseLabel,
+      expandLabel,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+        /* @__PURE__ */ jsxs(InfoRowWithIcon, { children: [
+          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: networkGasLabel }),
+          /* @__PURE__ */ jsx(InfoRowIconValue, { children: gasCostFormatted })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRowWithIcon, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
+          /* @__PURE__ */ jsx(InfoRowIconValue, { children: protocolFee })
+        ] })
+      ] })
+    }
+  ) });
+};
+var SwapQuoteErrorsView = ({
+  hasQuoteError,
+  hasBytecodeError,
+  quoteErrorMessage = "Unable to get quote for this transaction",
+  bytecodeErrorMessage = "Error building transaction"
+}) => {
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "swap-quote-errors", children: [
+    hasQuoteError && /* @__PURE__ */ jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: quoteErrorMessage
+      }
+    ) }),
+    hasBytecodeError && /* @__PURE__ */ jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: bytecodeErrorMessage
+      }
+    ) })
+  ] });
+};
 var SwapQuoteDetailsView = ({
   labels,
   isVisible,
@@ -4378,56 +4421,6 @@ var SwapQuoteDetailsView = ({
     )
   ] });
 };
-var SwapAdvancedSettingsView = ({
-  title,
-  isOpen,
-  onOpenChange,
-  slippageBps,
-  onSlippageSelect,
-  formatPercentage,
-  percentageOptions,
-  onPercentageClick,
-  slippageFormatted,
-  collapseText,
-  expandText,
-  maxLabel
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: "pb-2 mt-md", children: /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsxs(
-    CollapsibleSection,
-    {
-      title,
-      subtitle: slippageFormatted,
-      open: isOpen,
-      onOpenChange,
-      collapseText,
-      expandText,
-      children: [
-        /* @__PURE__ */ jsx(
-          SwapSlippageToleranceButtonsView,
-          {
-            slippageBps,
-            onSelect: onSlippageSelect,
-            formatPercentage,
-            className: "mt-md"
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "w-full mt-md", children: /* @__PURE__ */ jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
-          const isMax = index === percentageOptions.length - 1;
-          const label = isMax ? maxLabel : `${pct / 100}%`;
-          return /* @__PURE__ */ jsx(
-            PercentageButton,
-            {
-              type: "button",
-              onClick: () => onPercentageClick(pct),
-              children: label
-            },
-            pct
-          );
-        }) }) })
-      ]
-    }
-  ) }) });
-};
 var ConfirmSwapButtonView = ({
   buttonLabel,
   disabled,
@@ -4447,6 +4440,73 @@ var ConfirmSwapButtonView = ({
     }
   ) });
 };
+var SwapFormView = ({
+  onSubmit,
+  formRef,
+  labels,
+  onHistoryClick,
+  onSwitchTokens,
+  switchTokensAriaLabel,
+  fromCard,
+  toCard,
+  advancedSettings,
+  transactionDetails,
+  confirmButton
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "swap-form-view",
+        className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
+        children: /* @__PURE__ */ jsx("form", { ref: formRef, onSubmit, "data-testid": "swap-flow-form", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-md", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
+              /* @__PURE__ */ jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
+              labels.subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "data-testid": "swap-history-button",
+                type: "button",
+                onClick: onHistoryClick,
+                className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
+                "aria-label": labels.historyAriaLabel,
+                children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
+            /* @__PURE__ */ jsx(SwapFromCardView, __spreadValues({}, fromCard)),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-center -my-5 relative z-10", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                "data-testid": "swap-switch-tokens-button",
+                type: "button",
+                onClick: onSwitchTokens,
+                className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
+                "aria-label": switchTokensAriaLabel,
+                children: /* @__PURE__ */ jsx(MdOutlineSwapVert, { className: "w-5 h-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(SwapToCardView, __spreadValues({}, toCard))
+          ] }),
+          /* @__PURE__ */ jsx(SwapAdvancedSettingsView, __spreadValues({}, advancedSettings)),
+          /* @__PURE__ */ jsx("div", { className: "pb-xl", children: /* @__PURE__ */ jsx(SwapQuoteDetailsView, __spreadValues({}, transactionDetails)) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "swap-flow-footer",
+        className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
+        children: /* @__PURE__ */ jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
+      }
+    )
+  ] });
+};
 var ChooseANetworkView = ({
   labels,
   autoFocus = true,
@@ -5059,7 +5119,14 @@ var EarnDesktopView = ({
   transactions
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ jsx(Fragment, { children: loadingSkeleton });
+    if (loadingSkeleton) {
+      return /* @__PURE__ */ jsx(Fragment, { children: loadingSkeleton });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] w-full flex-1 min-h-0 animate-pulse px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-24 rounded bg-[var(--deframe-widget-color-bg-secondary)]" }),
+      /* @__PURE__ */ jsx("div", { className: "h-40 rounded bg-[var(--deframe-widget-color-bg-secondary)]" }),
+      /* @__PURE__ */ jsx("div", { className: "h-60 rounded bg-[var(--deframe-widget-color-bg-secondary)]" })
+    ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto w-full flex-1 min-h-0 pb-[var(--deframe-widget-size-padding-y-lg)] gap-[var(--deframe-widget-size-gap-md)]", children: [
     /* @__PURE__ */ jsx(EarnInvestmentSummaryView, __spreadValues({}, summary)),
@@ -5068,28 +5135,32 @@ var EarnDesktopView = ({
     /* @__PURE__ */ jsx(EarnRecentTransactionsView, __spreadValues({}, transactions))
   ] });
 };
-var EarnInvestmentDetailsView = ({
-  title,
-  onBack,
-  tokenIcon,
-  fiatBalance,
-  profitAmount,
-  tokenAmount,
-  investedLabel,
-  earningsLabel,
-  summaryTitle,
-  summaryItems,
-  pastActivitiesTitle,
-  transactions,
-  onTransactionClick,
-  showMoreButton,
-  onLoadMore,
-  loadMoreLabel,
-  depositLabel,
-  onDeposit,
-  withdrawLabel,
-  onWithdraw
-}) => {
+var EarnInvestmentDetailsView = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx(BackgroundContainer, { children: props.loadingSkeleton });
+  }
+  const {
+    title,
+    onBack,
+    tokenIcon,
+    fiatBalance,
+    profitAmount,
+    tokenAmount,
+    investedLabel,
+    earningsLabel,
+    summaryTitle,
+    summaryItems,
+    pastActivitiesTitle,
+    transactions,
+    onTransactionClick,
+    showMoreButton,
+    onLoadMore,
+    loadMoreLabel,
+    depositLabel,
+    onDeposit,
+    withdrawLabel,
+    onWithdraw
+  } = props;
   return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
     /* @__PURE__ */ jsxs(Navbar, { children: [
       /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
@@ -6341,6 +6412,6 @@ var EarnWithdrawFailedView = ({
   );
 };
 
-export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFromCardView, SwapHistoryView, SwapNetworkSelectorView, SwapOutputAmountView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteBlockchainCostsView, SwapQuoteDetailsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapTokenSelectorView, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
+export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFromCardView, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map