@deframe-sdk/components 0.1.15 → 0.1.17

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';
 
@@ -231,14 +231,14 @@ function SecondaryButton(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-text-secondary)]",
-      "border-[color:var(--deframe-widget-color-border-secondary)]",
+      "text-[color:var(--deframe-widget-color-brand-primary)]",
+      "border-[color:var(--deframe-widget-color-brand-primary)]",
       "hover:opacity-90",
       "cursor-pointer"
     ].join(" "),
     disabled: [
-      "text-[color:var(--deframe-widget-color-text-secondary-disabled)]",
-      "border-[color:var(--deframe-widget-color-border-secondary-disabled)]",
+      "text-[color:var(--deframe-widget-color-brand-primary-disabled)]",
+      "border-[color:var(--deframe-widget-color-brand-primary-disabled)]",
       "cursor-not-allowed"
     ].join(" ")
   };
@@ -368,14 +368,21 @@ function InputField(_a) {
     "transition-colors"
   ].join(" ");
   const stateClasses = {
-    error: "border border-[var(--deframe-widget-color-state-error)]",
+    default: [
+      "border border-[var(--deframe-widget-color-border-primary)]",
+      "bg-[var(--deframe-widget-color-bg-raised)]"
+    ].join(" "),
+    error: [
+      "border border-[var(--deframe-widget-color-state-error)]",
+      "bg-[var(--deframe-widget-color-bg-raised)]"
+    ].join(" "),
     disabled: [
       "border",
       "border-[var(--deframe-widget-color-border-primary-disabled)]",
+      "bg-[var(--deframe-widget-color-bg-raised-disabled)]",
       "opacity-60",
       "cursor-not-allowed"
-    ].join(" "),
-    default: "border border-[var(--deframe-widget-color-border-primary)]"
+    ].join(" ")
   };
   const stateKey = hasError ? "error" : disabled ? "disabled" : "default";
   const fieldClasses = twMerge(baseClasses, stateClasses[stateKey], className);
@@ -418,12 +425,12 @@ function Link(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-text-highlight)]",
-      "underline",
+      "text-[color:var(--deframe-widget-color-text-primary)]",
+      "hover:underline",
       "cursor-pointer"
     ].join(" "),
     disabled: [
-      "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
+      "text-[color:var(--deframe-widget-color-text-primary-disabled)]",
       "cursor-not-allowed",
       "pointer-events-none"
     ].join(" ")
@@ -2611,45 +2618,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: "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 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 SwapAmountInputView = ({
   value,
   hasError,
@@ -2707,127 +2675,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: "text-small", 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,
@@ -2896,8 +2743,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: [
@@ -4106,56 +3961,56 @@ 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",
+  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 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: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        "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
+        "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)]" }) })
+        ]
       }
     )
   ] });
@@ -4176,7 +4031,7 @@ var SwapFromCardView = ({
   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: [
@@ -4231,7 +4086,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,
         {
@@ -4239,7 +4094,8 @@ var SwapFromCardView = ({
           hasError: amountHasError,
           onChange: onAmountChange,
           maxFractionDigits,
-          ariaLabel: labels.amountPlaceholder
+          ariaLabel: labels.amountPlaceholder,
+          field
         }
       ),
       /* @__PURE__ */ jsx(
@@ -4251,9 +4107,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,
@@ -4331,6 +4197,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,
@@ -4401,7 +4413,7 @@ var SwapQuoteDetailsView = ({
         title: labels.headerLabel,
         items,
         defaultOpen: isVisible,
-        className: "bg-bg-subtle dark:bg-bg-subtle-dark rounded shadow-sm p-md flex flex-col lg:!bg-bg-raised"
+        className: "rounded shadow-sm p-md flex flex-col bg-[var(--deframe-widget-color-bg-subtle)] lg:bg-[var(--deframe-widget-color-bg-raised)]"
       },
       `details-${isVisible}`
     ),
@@ -4416,56 +4428,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,
@@ -4485,6 +4447,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,
@@ -4791,7 +4820,7 @@ var HistoryListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-s
   /* @__PURE__ */ jsx(HistoryGroupSkeleton, {})
 ] });
 var WalletBalances = ({ cards, variant = "subtle", className }) => {
-  const bgClass = variant === "raised" ? "bg-bg-raised dark:bg-bg-raised-dark" : "bg-bg-subtle dark:bg-bg-subtle-dark";
+  const bgClass = variant === "raised" ? "bg-[var(--deframe-widget-color-bg-raised)]" : "bg-[var(--deframe-widget-color-bg-subtle)]";
   return /* @__PURE__ */ jsx("div", { className: twMerge("w-full flex flex-row gap-4 mt-md", className), children: cards.map((card) => /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1 h-auto px-6 py-4 rounded shadow-sm flex flex-col items-start justify-start gap-xs", bgClass), children: [
     /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: card.label }),
     /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value })
@@ -5097,7 +5126,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)),
@@ -5106,28 +5142,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 }),
@@ -6379,6 +6419,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