@deframe-sdk/components 0.1.13 → 0.1.14

package/dist/index.mjs

@@ -1,11 +1,12 @@
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight } from 'react-icons/hi2';
+import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
 import * as React6 from 'react';
 import React6__default, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline } from 'react-icons/md';
+import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, 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';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -2391,6 +2392,7 @@ var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxs(HistoryFlexC
   /* @__PURE__ */ jsx("p", { "data-test-id": "two-line-value-primary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: primary }),
   /* @__PURE__ */ jsx("p", { "data-test-id": "two-line-value-secondary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: secondary })
 ] });
+var NotFoundMessage = ({ children }) => /* @__PURE__ */ jsx("div", { "data-test-id": "not-found-message", className: "flex flex-col items-center justify-center h-full", children: /* @__PURE__ */ jsx("p", { className: "text-[color:var(--deframe-widget-color-text-primary)]", children }) });
 var HistoryDepositDetailsView = ({
   transactionTypeLabel,
   symbol,
@@ -4445,7 +4447,1900 @@ var ConfirmSwapButtonView = ({
     }
   ) });
 };
+var ChooseANetworkView = ({
+  labels,
+  autoFocus = true,
+  chains,
+  pageSize = 10,
+  onChainClick
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [page, setPage] = useState(1);
+  useEffect(() => {
+    setPage(1);
+  }, [searchValue]);
+  const filteredChains = chains.filter(
+    (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
+  );
+  const displayedChains = filteredChains.slice(0, page * pageSize);
+  const hasMore = filteredChains.length > page * pageSize;
+  return /* @__PURE__ */ jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+      /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          value: searchValue,
+          onChange: setSearchValue,
+          placeholder: labels.searchPlaceholder,
+          autoFocus
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "choose-a-network-list",
+        className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0",
+        children: [
+          displayedChains.map((chain) => /* @__PURE__ */ jsxs(
+            ListItem,
+            {
+              className: "w-full flex-shrink-0",
+              onClick: () => onChainClick(chain.chainId),
+              "data-testid": `choose-network-item-${chain.chainId}`,
+              "data-chain-id": chain.chainId,
+              children: [
+                /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: chain.imageUrl,
+                    alt: chain.name,
+                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
+              ]
+            },
+            `chain-${chain.chainId}`
+          )),
+          hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
+        ]
+      }
+    )
+  ] }) });
+};
+var SkeletonItem = () => /* @__PURE__ */ jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] min-h-[72px] flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-32 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "w-24 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)] flex-shrink-0 ml-[var(--deframe-widget-size-gap-sm)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-20 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
+    /* @__PURE__ */ jsx("div", { className: "w-16 h-3 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" })
+  ] })
+] });
+var SkeletonGroup = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+  /* @__PURE__ */ jsx("div", { className: "w-40 h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded animate-pulse" }),
+  /* @__PURE__ */ jsx(SkeletonItem, {}),
+  /* @__PURE__ */ jsx(SkeletonItem, {})
+] });
+var LoadingSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
+  /* @__PURE__ */ jsx(SkeletonGroup, {}),
+  /* @__PURE__ */ jsx(SkeletonGroup, {})
+] });
+var EmptyState = ({ title, description }) => /* @__PURE__ */ jsx("div", { className: "w-full flex-1 py-[var(--deframe-widget-size-padding-y-md)] flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-sm)] overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)]", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)] text-center", children: [
+    /* @__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(PiClockCountdownBold, { className: "w-10 h-10 text-[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: "text-small", children: description }) })
+] }) });
+var SwapItemIcon = ({ src, alt }) => {
+  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
+  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
+  const resolvedSrc = src || fallbackSrc;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center border border-[var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-[var(--deframe-widget-color-text-primary)]" }) })
+  ] });
+};
+var SwapHistoryView = ({
+  labels,
+  isLoading,
+  items,
+  onItemClick,
+  pageSize = 10
+}) => {
+  const [visibleCount, setVisibleCount] = React6__default.useState(pageSize);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsx(LoadingSkeleton, {}) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsx(EmptyState, { title: labels.emptyTitle, description: labels.emptyDescription }) });
+  }
+  const visibleItems = items.slice(0, visibleCount);
+  const grouped = /* @__PURE__ */ new Map();
+  for (const item of visibleItems) {
+    const group = grouped.get(item.dateKey);
+    if (group) {
+      group.push(item);
+    } else {
+      grouped.set(item.dateKey, [item]);
+    }
+  }
+  const sortedDates = Array.from(grouped.keys()).sort((a, b) => b.localeCompare(a));
+  const hasMore = items.length > visibleCount;
+  return /* @__PURE__ */ jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
+    sortedDates.map((dateKey) => {
+      const groupItems = grouped.get(dateKey);
+      return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: groupItems[0].dateLabel }),
+        groupItems.map((item) => /* @__PURE__ */ jsxs(
+          ListItem,
+          {
+            onClick: () => onItemClick(item.id),
+            containerClassName: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]",
+            children: [
+              /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(SwapItemIcon, { src: item.iconUrl, alt: item.iconAlt }) }),
+              /* @__PURE__ */ jsxs(ListItemContent, { children: [
+                /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]", children: item.title }),
+                /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: item.subtitle })
+              ] }),
+              /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
+                /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)] whitespace-nowrap", children: item.amountFormatted }),
+                item.amountUsd && /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap", children: item.amountUsd })
+              ] })
+            ]
+          },
+          item.id
+        ))
+      ] }, dateKey);
+    }),
+    hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
+  ] }) });
+};
+var HistorySwapDetailsView = (props) => {
+  const { labels, onBack, status } = props;
+  if (status === "not-found") {
+    return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+      /* @__PURE__ */ jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
+      /* @__PURE__ */ jsx(NotFoundMessage, { children: labels.notFoundMessage })
+    ] });
+  }
+  if (status === "unavailable") {
+    return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+      /* @__PURE__ */ jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
+      /* @__PURE__ */ jsx(NotFoundMessage, { children: labels.detailsUnavailableMessage })
+    ] });
+  }
+  const {
+    symbolIn,
+    amountInFormatted,
+    amountInUsd,
+    tokenInLogoUrl,
+    chainInName,
+    symbolOut,
+    amountOutFormatted,
+    amountOutUsd,
+    tokenOutLogoUrl,
+    chainOutName,
+    routeOrNetworkLabel,
+    routeOrNetworkValue,
+    statusLabel,
+    txHash,
+    dateFormatted,
+    explorerUrl
+  } = props;
+  return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsx(DetailsHeader, { title: labels.headerTitle, onBack }),
+    /* @__PURE__ */ jsx(ScrollableContent, { children: /* @__PURE__ */ jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(TransactionTypeLabel, { children: labels.swapLabel }),
+        /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { src: tokenInLogoUrl, alt: symbolIn }),
+            /* @__PURE__ */ jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsx(Amount, { children: amountInFormatted }),
+              amountInUsd ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountInUsd }) : chainInName ? /* @__PURE__ */ jsx(AmountInUsd, { children: chainInName }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { src: tokenOutLogoUrl, alt: symbolOut }),
+            /* @__PURE__ */ jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsx(Amount, { children: amountOutFormatted }),
+              amountOutUsd ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountOutUsd }) : chainOutName ? /* @__PURE__ */ jsx(AmountInUsd, { children: chainOutName }) : null
+            ] })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(SectionCard, { className: "!p-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: routeOrNetworkValue })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.sentLabel }),
+          /* @__PURE__ */ jsx(TwoLineValue, { primary: amountInFormatted, secondary: amountInUsd != null ? amountInUsd : "-" })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.receivedLabel }),
+          /* @__PURE__ */ jsx(TwoLineValue, { primary: amountOutFormatted, secondary: amountOutUsd != null ? amountOutUsd : "-" })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.statusLabel }),
+          /* @__PURE__ */ jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.txIdLabel }),
+          /* @__PURE__ */ jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.dateLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { className: "font-[var(--deframe-widget-font-family)]", children: dateFormatted })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsx(InfoLabel, { className: "font-[var(--deframe-widget-font-family)]", children: labels.transactionLabel }),
+          /* @__PURE__ */ jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+};
+var SwapWidgetFallbackView = ({
+  title,
+  description,
+  buttonLabel,
+  onButtonClick
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "swap-widget-fallback",
+      className: "flex flex-col items-center justify-center h-full px-[var(--deframe-widget-size-padding-x-md)] text-center gap-[var(--deframe-widget-size-gap-md)]",
+      children: [
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h-large", children: title }),
+        /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: description }),
+        /* @__PURE__ */ jsx(PrimaryButton, { className: "w-full", onClick: onButtonClick, children: buttonLabel })
+      ]
+    }
+  );
+};
+var ApyRange = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "text-right justify-center text-text-highlight text-xs font-normal leading-4", children });
+};
+var variantStyles = {
+  primary: "text-text-primary dark:text-text-primary-dark text-text-md",
+  secondary: "text-text-secondary dark:text-text-secondary-dark text-text-sm font-poppins"
+};
+var Label = ({ children, variant = "primary", className }) => {
+  return /* @__PURE__ */ jsx("div", { className: twMerge(variantStyles[variant], className), children });
+};
+var HistoryItemSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "w-full bg-bg-subtle dark:bg-bg-subtle-dark rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-32 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "w-24 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-xs flex-shrink-0 ml-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-20 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
+    /* @__PURE__ */ jsx("div", { className: "w-16 h-3 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" })
+  ] })
+] });
+var HistoryGroupSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-xs", children: [
+  /* @__PURE__ */ jsx("div", { className: "w-40 h-4 bg-bg-muted dark:bg-bg-muted-dark rounded animate-pulse" }),
+  /* @__PURE__ */ jsx(HistoryItemSkeleton, {}),
+  /* @__PURE__ */ jsx(HistoryItemSkeleton, {})
+] });
+var HistoryListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-md", children: [
+  /* @__PURE__ */ jsx(HistoryGroupSkeleton, {}),
+  /* @__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";
+  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 })
+  ] }, card.label)) });
+};
+var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsx(PiClockCountdownBold, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
+    /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
+] }) });
+var StrategyGridCard = ({
+  logoUrl,
+  title,
+  subtitle,
+  apyFormatted,
+  apyLabel,
+  onClick,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    onClick,
+    "data-test-id": "strategy-grid-card",
+    className: twMerge(
+      "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] rounded-[var(--deframe-widget-size-radius-sm)] h-[136px] min-h-[136px] flex-shrink-0",
+      "bg-[var(--deframe-widget-color-bg-primary)]",
+      "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
+      "transition-colors cursor-pointer text-left w-full",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("img", { src: logoUrl, alt: title, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          /* @__PURE__ */ jsx(TextBody, { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] text-right", children: apyLabel }),
+          /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-brand-primary)]", children: apyFormatted })
+        ] })
+      ] })
+    ]
+  }
+);
+var BackButton = ({ onClick, ariaLabel = "Back", className }) => {
+  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-test-id": "back-button",
+      onClick,
+      className: twMerge(baseClasses, className),
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(HiArrowLeft, { className: "w-6 h-6" })
+    }
+  );
+};
+var EarnBalanceCard = ({
+  tokenIcon,
+  fiatBalance,
+  profitAmount,
+  tokenAmount,
+  investedLabel,
+  earningsLabel,
+  isFetching = false
+}) => {
+  const displayedTokenAmount = isFetching ? "..." : tokenAmount;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-row gap-[var(--deframe-widget-size-gap-md)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 h-24 px-[var(--deframe-widget-size-padding-x-lg)] bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)] rounded shadow-sm flex flex-col items-start justify-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: investedLabel }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+        tokenIcon && /* @__PURE__ */ jsx("div", { className: "w-5 h-5", children: typeof tokenIcon === "string" ? /* @__PURE__ */ jsx("img", { src: tokenIcon, alt: "Token", className: "w-5 h-5 rounded-full" }) : tokenIcon }),
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: displayedTokenAmount })
+      ] }),
+      /* @__PURE__ */ jsxs(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
+        "~",
+        fiatBalance
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 h-24 px-[var(--deframe-widget-size-padding-x-lg)] bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)] rounded shadow-sm flex flex-col items-start justify-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: earningsLabel }),
+      /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: profitAmount })
+    ] })
+  ] });
+};
+var EarnInvestmentSummaryView = ({
+  overviewDescription,
+  totalInvestedLabel,
+  totalInvestedValue,
+  totalReturnLabel,
+  totalReturnValue,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
+    /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
+    /* @__PURE__ */ jsx(
+      WalletBalances,
+      {
+        cards: [
+          { label: totalInvestedLabel, value: totalInvestedValue },
+          { label: totalReturnLabel, value: totalReturnValue }
+        ],
+        variant: "raised",
+        className: "grid grid-cols-2 gap-md !mt-0"
+      }
+    )
+  ] });
+};
+var EarnInvestedSectionView = ({
+  sectionTitle,
+  items,
+  onItemClick,
+  className
+}) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: twMerge(
+        "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
+        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
+              className: twMerge(
+                "flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+                "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
+                "transition-colors cursor-pointer text-left w-full",
+                !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.logoUrl,
+                    alt: item.assetName,
+                    className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx(TextBody, { className: "font-medium truncate", children: item.assetName }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)] truncate", children: item.subtitle })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx(TextBody, { className: "font-medium", children: item.balanceFormatted }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
+                ] })
+              ]
+            },
+            item.strategyId
+          );
+        }) })
+      ]
+    }
+  );
+};
+var EarnExploreGridView = ({
+  sectionTitle,
+  loadingLabel,
+  errorLabel,
+  emptySearchTitle,
+  emptySearchDescription,
+  isLoading,
+  error,
+  strategies,
+  searchBar,
+  chipGroup,
+  hasFilters,
+  onStrategyClick,
+  className
+}) => {
+  const showEmptyState = hasFilters && strategies.length === 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: twMerge(
+          "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
+          "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
+          /* @__PURE__ */ jsxs("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            loadingLabel,
+            /* @__PURE__ */ jsx(LoadingDots, {})
+          ] })
+        ]
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: twMerge(
+          "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
+          "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
+          /* @__PURE__ */ jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)]", children: errorLabel })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: twMerge(
+        "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
+        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: sectionTitle }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
+          searchBar,
+          chipGroup
+        ] }),
+        showEmptyState && /* @__PURE__ */ jsx("div", { className: "lg:h-[440px] flex items-center justify-center", children: /* @__PURE__ */ jsx(SearchEmptyState, { title: emptySearchTitle, description: emptySearchDescription }) }),
+        !showEmptyState && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "explore-strategies-grid grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-[var(--deframe-widget-size-gap-md)] overflow-y-auto pr-[var(--deframe-widget-size-padding-x-sm)] h-[440px] auto-rows-[136px]",
+            children: strategies.map((strategy) => /* @__PURE__ */ jsx(
+              StrategyGridCard,
+              {
+                logoUrl: strategy.logoUrl,
+                title: strategy.title,
+                subtitle: strategy.subtitle,
+                apyFormatted: strategy.apyFormatted,
+                apyLabel: strategy.apyLabel,
+                onClick: () => onStrategyClick == null ? void 0 : onStrategyClick(strategy.id)
+              },
+              strategy.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnRecentTransactionsView = ({
+  sectionTitle,
+  viewAllLabel,
+  isLoading,
+  hasMore,
+  hasItems,
+  historyList,
+  emptyTitle,
+  emptyDescription,
+  onViewAll,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: twMerge(
+        "flex flex-col gap-md p-lg",
+        "bg-bg-subtle dark:bg-bg-subtle-dark rounded",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: sectionTitle }),
+          hasMore && onViewAll && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onViewAll,
+              className: "text-brand-primary dark:text-brand-primary-dark hover:underline",
+              children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: viewAllLabel })
+            }
+          )
+        ] }),
+        isLoading ? /* @__PURE__ */ jsx(HistoryListSkeleton, {}) : hasItems ? historyList : /* @__PURE__ */ jsx(HistoryTabEmpty, { title: emptyTitle, description: emptyDescription })
+      ]
+    }
+  );
+};
+var EarnDesktopView = ({
+  isLoading,
+  loadingSkeleton,
+  summary,
+  invested,
+  explore,
+  transactions
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: loadingSkeleton });
+  }
+  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)),
+    /* @__PURE__ */ jsx(EarnInvestedSectionView, __spreadValues({}, invested)),
+    /* @__PURE__ */ jsx(EarnExploreGridView, __spreadValues({}, explore)),
+    /* @__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
+}) => {
+  return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxs(Navbar, { children: [
+      /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
+      /* @__PURE__ */ jsx(TextHeading, { variant: "h1", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0 px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] gap-[var(--deframe-widget-size-gap-md)]", children: [
+      /* @__PURE__ */ jsx(
+        EarnBalanceCard,
+        {
+          tokenIcon,
+          fiatBalance,
+          profitAmount,
+          tokenAmount,
+          investedLabel,
+          earningsLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryDetails,
+        {
+          title: summaryTitle,
+          items: summaryItems,
+          defaultOpen: true,
+          className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[var(--deframe-widget-size-radius-sm)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pastActivitiesTitle }),
+        /* @__PURE__ */ jsxs("div", { className: "investment-activities-list flex flex-col gap-[var(--deframe-widget-size-gap-sm)] overflow-y-auto max-h-[280px] pr-[var(--deframe-widget-size-padding-x-sm)]", children: [
+          transactions.map((tx) => /* @__PURE__ */ jsxs(
+            ListItem,
+            {
+              onClick: () => onTransactionClick(tx.id),
+              children: [
+                /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: tokenIcon, alt: "Token", className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
+                /* @__PURE__ */ jsxs(ListItemContent, { children: [
+                  /* @__PURE__ */ jsx(TextBody, { children: tx.action }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: tx.date })
+                ] }),
+                /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
+                  /* @__PURE__ */ jsx(TextBody, { children: tx.usdAmount }),
+                  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: tx.tokenAmount })
+                ] })
+              ]
+            },
+            `tx-history-${tx.id}`
+          )),
+          showMoreButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 left-0 right-0 border-t border-[var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
+      /* @__PURE__ */ jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositLabel }),
+      /* @__PURE__ */ jsx(PrimaryButton, { onClick: onWithdraw, className: "w-full", children: withdrawLabel })
+    ] }) })
+  ] });
+};
+var GroupLabel = ({ children }) => /* @__PURE__ */ jsx("div", { className: "text-text-secondary dark:text-text-secondary-dark text-sm font-medium font-poppins py-3", children });
+var GroupedStrategyListView = ({
+  isLoading,
+  loadingLabel,
+  error,
+  errorLabel,
+  investedLabel,
+  investedItems,
+  bestPerformanceLabel,
+  bestPerformanceItems,
+  allStrategiesLabel,
+  allStrategiesItems
+}) => {
+  const hasInvested = investedItems.length > 0;
+  const hasBestPerformance = bestPerformanceItems.length > 0;
+  const hasAllStrategies = allStrategiesItems.length > 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center py-md", children: [
+      loadingLabel,
+      " ",
+      /* @__PURE__ */ jsx(LoadingDots, {})
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
+      errorLabel,
+      ": ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm flex-1 min-h-0 overflow-y-auto", children: [
+    hasInvested && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GroupLabel, { children: investedLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: investedItems.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ jsx(TextBody, { children: item.balanceFormatted }),
+                /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.profitFormatted })
+              ] }),
+              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `invested-${item.id}`
+      )) })
+    ] }),
+    hasBestPerformance && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GroupLabel, { children: bestPerformanceLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: bestPerformanceItems.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
+              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `best-${item.id}`
+      )) })
+    ] }),
+    hasAllStrategies && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GroupLabel, { children: allStrategiesLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-sm", children: allStrategiesItems.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.logoUrl,
+                alt: item.subtitle,
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(TextBody, { children: item.title }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ jsx(ApyRange, { children: item.apyFormatted }),
+              /* @__PURE__ */ jsx(MdArrowRight, { className: "w-6 h-6" })
+            ] }) })
+          ]
+        },
+        `all-${item.id}`
+      )) })
+    ] })
+  ] });
+};
+var DateLabel = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children });
+};
+var ArrowBadge = ({ isDeposit }) => {
+  return /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsx(MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
+};
+var TokenIconWithBadge = ({ src, alt, isDeposit }) => {
+  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
+  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
+  const resolvedSrc = src || fallbackSrc;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ArrowBadge, { isDeposit })
+  ] });
+};
+var SwapIconWithBadge = ({ src, alt }) => {
+  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
+  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
+  const resolvedSrc = src || fallbackSrc;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: resolvedSrc,
+        alt,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.target.src = fallbackSrc;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: /* @__PURE__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) })
+  ] });
+};
+var AmountDisplay = ({ amount, usdAmount }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Label, { className: "text-accent-sm-mobile whitespace-nowrap", children: amount }),
+    usdAmount ? /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "whitespace-nowrap", children: usdAmount }) : null
+  ] });
+};
+var HistoryListView = ({
+  groups,
+  showLoadMore,
+  onLoadMore,
+  loadMoreLabel,
+  itemClassName
+}) => {
+  if (groups.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
+    groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-sm", children: [
+      /* @__PURE__ */ jsx(DateLabel, { children: group.dateLabel }),
+      group.items.map((item) => /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          onClick: () => item.onClick(),
+          containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
+          children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
+              TokenIconWithBadge,
+              {
+                src: item.iconUrl,
+                alt: item.iconAlt,
+                isDeposit: item.isDeposit
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
+              /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
+          ]
+        },
+        item.id
+      ))
+    ] }, group.dateLabel)),
+    showLoadMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-sm", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: onLoadMore, children: loadMoreLabel }) })
+  ] });
+};
+var EarnTokenSelectorView = ({
+  selectedToken,
+  onTokenClick,
+  isLoading,
+  selectTokenLabel,
+  chainLabel,
+  chainImage,
+  chainDirectionLabel,
+  chainDisabledTitle
+}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onTokenClick,
+      className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.logoURI) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: selectedToken.logoURI,
+              alt: selectedToken.symbol,
+              className: "w-6 h-6 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
+        ] }) : isLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: true,
+        title: chainDisabledTitle,
+        className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
+        children: [
+          chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
+          /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+        ]
+      }
+    )
+  ] })
+] });
+var EarnAmountInputView = ({
+  value,
+  onChange,
+  ariaLabel,
+  dollarAmountFormatted,
+  availableBalanceFormatted
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end justify-between min-h-[86px] text-right", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-[color:var(--deframe-widget-color-text-secondary)]", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          placeholder: "0.00",
+          type: "text",
+          inputMode: "decimal",
+          autoComplete: "off",
+          "aria-label": ariaLabel,
+          value,
+          min: "0",
+          step: "any",
+          className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[105px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+          onChange,
+          onWheel: (event) => {
+            event.currentTarget.blur();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", children: dollarAmountFormatted })
+    ] }),
+    availableBalanceFormatted && /* @__PURE__ */ jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] whitespace-nowrap", children: availableBalanceFormatted })
+  ] });
+};
+var EarnPercentageButtonsView = ({
+  onPercentageClick,
+  maxLabel
+}) => /* @__PURE__ */ jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)] w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
+  /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(2500), children: "25%" }),
+  /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(5e3), children: "50%" }),
+  /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(7500), children: "75%" }),
+  /* @__PURE__ */ jsx(PercentageButton, { onClick: () => onPercentageClick(1e4), children: maxLabel })
+] }) });
+var EarnWithdrawTokenSelectorView = ({
+  selectedToken,
+  onTokenClick,
+  selectTokenLabel,
+  chainLabel,
+  chainImage,
+  chainDirectionLabel,
+  chainDisabledTitle
+}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onTokenClick,
+      className: "flex-1 h-[56px] border border-[var(--deframe-widget-color-border-primary)] rounded overflow-hidden hover:border-[var(--deframe-widget-color-border-primary)] transition-colors",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-between px-[var(--deframe-widget-size-padding-x-sm)] py-[6px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: (selectedToken == null ? void 0 : selectedToken.symbol) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          selectedToken.logoURI && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: selectedToken.logoURI,
+              alt: selectedToken.symbol,
+              className: "w-6 h-6 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: selectedToken.symbol })
+        ] }) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center", children: /* @__PURE__ */ jsx(MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] items-center", children: [
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: chainDirectionLabel }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: true,
+        title: chainDisabledTitle,
+        className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
+        children: [
+          chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
+          /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsx(MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
+        ]
+      }
+    )
+  ] })
+] });
+var EarnNoBalanceNotificationView = ({
+  prompt,
+  actionLabel,
+  onAction
+}) => /* @__PURE__ */ jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)]", children: /* @__PURE__ */ jsx(SectionCard, { className: "bg-[var(--deframe-widget-color-state-warning)]/10 border border-[var(--deframe-widget-color-state-warning)]/20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
+    /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-warning)] flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: prompt }) })
+  ] }),
+  /* @__PURE__ */ jsx(
+    PrimaryButton,
+    {
+      type: "button",
+      onClick: onAction,
+      className: "w-full mt-[var(--deframe-widget-size-gap-sm)]",
+      children: actionLabel
+    }
+  )
+] }) }) });
+var EarnTxStatusCardView = ({
+  statusLabel,
+  isProcessing,
+  successMessage,
+  errorMessage
+}) => /* @__PURE__ */ jsxs(SectionCard, { children: [
+  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+    isProcessing && /* @__PURE__ */ jsxs("svg", { className: "h-5 w-5 animate-spin text-[color:var(--deframe-widget-color-brand-primary)]", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
+      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-[color:var(--deframe-widget-color-text-secondary)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: statusLabel })
+  ] }) }),
+  successMessage && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] rounded px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] bg-[var(--deframe-widget-color-state-success)]/10 text-[color:var(--deframe-widget-color-state-success)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: successMessage }),
+  errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)] rounded px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] bg-[var(--deframe-widget-color-state-error)]/10 text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: errorMessage })
+] });
+var EarnBytecodeErrorView = ({
+  errorTitle,
+  errorMessage
+}) => /* @__PURE__ */ jsx("div", { className: "rounded px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)] bg-[var(--deframe-widget-color-state-error)]/10 border border-[var(--deframe-widget-color-state-error)]/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
+  /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-error)] flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }),
+  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[color:var(--deframe-widget-color-state-error)] [font-weight:var(--deframe-widget-font-weight-medium)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)] mb-[var(--deframe-widget-size-gap-xs)]", children: errorTitle }),
+    /* @__PURE__ */ jsx("div", { className: "text-[color:var(--deframe-widget-color-text-primary)] [font-size:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-family)]", children: errorMessage })
+  ] })
+] }) });
+var EarnPositionCardView = ({
+  balanceUSD,
+  balanceToken,
+  icon,
+  iconAlt
+}) => /* @__PURE__ */ jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+  icon && /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: icon,
+      alt: iconAlt,
+      className: "w-6 h-6 rounded-full"
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: balanceUSD }),
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-tertiary)]", children: balanceToken })
+  ] })
+] }) }) }) });
+var EarnDepositFormView = ({
+  // Header / Layout
+  headerTitle,
+  onBack,
+  progress,
+  pageTitle,
+  subtitle,
+  onSubmit,
+  // Token selector
+  selectedToken,
+  onTokenClick,
+  isLoadingToken,
+  selectTokenLabel,
+  // Chain selector
+  chainLabel,
+  chainImage,
+  chainDirectionLabel,
+  chainDisabledTitle,
+  // Amount input
+  amountValue,
+  onAmountChange,
+  amountAriaLabel,
+  dollarAmountFormatted,
+  availableBalanceFormatted,
+  // No balance notification
+  showNoBalanceNotification,
+  noBalancePrompt,
+  goToSwapLabel,
+  onGoToSwap,
+  // Percentage buttons
+  onPercentageClick,
+  maxLabel,
+  // TX status
+  showTxStatus,
+  txStatusLabel,
+  isTxProcessing,
+  isTxSuccess,
+  isTxError,
+  txSuccessMessage,
+  txErrorMessage,
+  // Bytecode error
+  bytecodeErrorMessage,
+  transactionErrorLabel,
+  // Quote details
+  isQuoteValid,
+  isFetchingQuote,
+  quoteDetails,
+  // Submit button
+  submitDisabled,
+  submitButtonText
+}) => /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+  /* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack }),
+  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(ProgressIndicator, { progress }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
+      /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pageTitle }),
+      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit, children: [
+      /* @__PURE__ */ jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
+        /* @__PURE__ */ jsx(
+          EarnTokenSelectorView,
+          {
+            selectedToken,
+            onTokenClick,
+            isLoading: isLoadingToken,
+            selectTokenLabel,
+            chainLabel,
+            chainImage,
+            chainDirectionLabel,
+            chainDisabledTitle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EarnAmountInputView,
+          {
+            value: amountValue,
+            onChange: onAmountChange,
+            ariaLabel: amountAriaLabel,
+            dollarAmountFormatted,
+            availableBalanceFormatted
+          }
+        )
+      ] }) }) }),
+      showNoBalanceNotification && /* @__PURE__ */ jsx(
+        EarnNoBalanceNotificationView,
+        {
+          prompt: noBalancePrompt,
+          actionLabel: goToSwapLabel,
+          onAction: onGoToSwap
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EarnPercentageButtonsView,
+        {
+          onPercentageClick,
+          maxLabel
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
+        showTxStatus && /* @__PURE__ */ jsx(
+          EarnTxStatusCardView,
+          {
+            statusLabel: txStatusLabel,
+            isProcessing: isTxProcessing,
+            successMessage: isTxSuccess ? txSuccessMessage : void 0,
+            errorMessage: isTxError ? txErrorMessage : void 0
+          }
+        ),
+        bytecodeErrorMessage && /* @__PURE__ */ jsx(
+          EarnBytecodeErrorView,
+          {
+            errorTitle: transactionErrorLabel,
+            errorMessage: bytecodeErrorMessage
+          }
+        ),
+        isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsx(SectionCard, { children: quoteDetails.map((detail, idx) => /* @__PURE__ */ jsxs(InfoRow, { borderBottom: detail.borderBottom, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: detail.label }),
+          /* @__PURE__ */ jsx(InfoValue, { children: detail.value })
+        ] }, `${detail.label}-${idx}`)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsx(
+        PrimaryButton,
+        {
+          type: "submit",
+          className: "w-full text-[#252050]",
+          disabled: submitDisabled,
+          "aria-disabled": submitDisabled,
+          children: submitButtonText
+        }
+      ) })
+    ] })
+  ] }) })
+] });
+var EarnWithdrawFormView = ({
+  // Header / Layout
+  headerTitle,
+  onBack,
+  progress,
+  pageTitle,
+  subtitle,
+  onSubmit,
+  // Position card
+  positionBalanceUSD,
+  positionBalanceToken,
+  strategyIcon,
+  strategyName,
+  // Token selector
+  selectedToken,
+  onTokenClick,
+  selectTokenLabel,
+  // Chain selector
+  chainLabel,
+  chainImage,
+  chainDirectionLabel,
+  chainDisabledTitle,
+  // Amount input
+  amountValue,
+  onAmountChange,
+  amountAriaLabel,
+  dollarAmountFormatted,
+  // Percentage buttons
+  onPercentageClick,
+  maxLabel,
+  // TX status
+  showTxStatus,
+  txStatusLabel,
+  isTxProcessing,
+  isTxSuccess,
+  isTxError,
+  txSuccessMessage,
+  txErrorMessage,
+  // Bytecode error
+  bytecodeErrorMessage,
+  transactionErrorLabel,
+  // Quote details
+  isQuoteValid,
+  isFetchingQuote,
+  summaryTitle,
+  summaryItems,
+  // Submit button
+  submitDisabled,
+  submitButtonText
+}) => /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+  /* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack }),
+  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)] pb-[var(--deframe-widget-size-padding-y-md)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)]", children: /* @__PURE__ */ jsx(ProgressIndicator, { progress }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)]", children: [
+      /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: pageTitle }),
+      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit, children: [
+      /* @__PURE__ */ jsx(
+        EarnPositionCardView,
+        {
+          balanceUSD: positionBalanceUSD,
+          balanceToken: positionBalanceToken,
+          icon: strategyIcon,
+          iconAlt: strategyName
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(SectionCard, { className: "focus-within:bg-[var(--deframe-widget-color-bg-tertiary)] transition-colors", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
+        /* @__PURE__ */ jsx(
+          EarnWithdrawTokenSelectorView,
+          {
+            selectedToken,
+            onTokenClick,
+            selectTokenLabel,
+            chainLabel,
+            chainImage,
+            chainDirectionLabel,
+            chainDisabledTitle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EarnAmountInputView,
+          {
+            value: amountValue,
+            onChange: onAmountChange,
+            ariaLabel: amountAriaLabel,
+            dollarAmountFormatted
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ jsx(
+        EarnPercentageButtonsView,
+        {
+          onPercentageClick,
+          maxLabel
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)] mt-[var(--deframe-widget-size-gap-md)]", children: [
+        showTxStatus && /* @__PURE__ */ jsx(
+          EarnTxStatusCardView,
+          {
+            statusLabel: txStatusLabel,
+            isProcessing: isTxProcessing,
+            successMessage: isTxSuccess ? txSuccessMessage : void 0,
+            errorMessage: isTxError ? txErrorMessage : void 0
+          }
+        ),
+        bytecodeErrorMessage && /* @__PURE__ */ jsx(
+          EarnBytecodeErrorView,
+          {
+            errorTitle: transactionErrorLabel,
+            errorMessage: bytecodeErrorMessage
+          }
+        ),
+        isQuoteValid && !isFetchingQuote && !bytecodeErrorMessage && /* @__PURE__ */ jsx(
+          SummaryDetails,
+          {
+            title: summaryTitle,
+            items: summaryItems,
+            defaultOpen: false,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "pt-[var(--deframe-widget-size-padding-y-md)] px-[var(--deframe-widget-size-padding-x-md)] w-full", children: /* @__PURE__ */ jsx(
+        PrimaryButton,
+        {
+          type: "submit",
+          className: "w-full",
+          disabled: submitDisabled,
+          "aria-disabled": submitDisabled,
+          children: submitButtonText
+        }
+      ) })
+    ] })
+  ] }) })
+] });
+var EarnDepositProcessingView = ({
+  progress,
+  title,
+  descriptionPrefix,
+  activityHistoryText,
+  onGoToHistory,
+  onBack,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "processing",
+      title,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        descriptionPrefix,
+        " ",
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
+            onClick: onGoToHistory,
+            children: activityHistoryText
+          }
+        )
+      ] }),
+      onBack,
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnDepositSuccessView = ({
+  title,
+  descriptionPrefix,
+  formattedAmount,
+  tokenSymbol,
+  descriptionSuffix,
+  descriptionLinkText,
+  onClose,
+  exploreMoreLabel,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress: 100,
+      iconType: "success",
+      title,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        descriptionPrefix,
+        /* @__PURE__ */ jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
+          " ",
+          formattedAmount,
+          " ",
+          tokenSymbol,
+          " "
+        ] }),
+        descriptionSuffix,
+        " ",
+        /* @__PURE__ */ jsx(
+          "strong",
+          {
+            className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer",
+            onClick: onClose,
+            children: descriptionLinkText
+          }
+        )
+      ] }),
+      onClose,
+      actions: /* @__PURE__ */ jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnDepositWarningView = ({
+  progress,
+  title,
+  description,
+  backTitle,
+  onBack,
+  cancelLabel,
+  onCancel,
+  retryLabel,
+  onRetry,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "warning",
+      title,
+      description,
+      onBack,
+      backTitle,
+      actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
+        /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnDepositFailedView = ({
+  progress,
+  title,
+  description,
+  backTitle,
+  onBack,
+  viewExplorerLabel,
+  onViewExplorer,
+  viewExplorerDisabled,
+  retryLabel,
+  onRetry,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  iconGradient,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "warning",
+      iconGradient,
+      title,
+      description,
+      onBack,
+      backTitle,
+      actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
+        /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
+        /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnWithdrawProcessingView = ({
+  progress,
+  title,
+  descriptionPrefix,
+  activityHistoryText,
+  descriptionSuffix,
+  onGoToHistory,
+  onBack,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "processing",
+      title,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        descriptionPrefix,
+        " ",
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
+            onClick: onGoToHistory,
+            children: activityHistoryText
+          }
+        ),
+        " ",
+        descriptionSuffix
+      ] }),
+      onBack,
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnWithdrawSuccessView = ({
+  title,
+  descriptionPrefix,
+  formattedAmount,
+  tokenSymbol,
+  descriptionSuffix,
+  descriptionLinkText,
+  onClose,
+  exploreMoreLabel,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress: 100,
+      iconType: "success",
+      title,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        descriptionPrefix,
+        /* @__PURE__ */ jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
+          " ",
+          formattedAmount,
+          " ",
+          tokenSymbol,
+          " "
+        ] }),
+        descriptionSuffix,
+        " ",
+        /* @__PURE__ */ jsx("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)]", children: descriptionLinkText })
+      ] }),
+      onClose,
+      actions: /* @__PURE__ */ jsx(PrimaryButton, { className: "w-full", onClick: onClose, children: exploreMoreLabel }),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnWithdrawWarningView = ({
+  progress,
+  title,
+  description,
+  backTitle,
+  onBack,
+  cancelLabel,
+  onCancel,
+  retryLabel,
+  onRetry,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "warning",
+      title,
+      description,
+      onBack,
+      backTitle,
+      actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
+        /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
+var EarnWithdrawFailedView = ({
+  progress,
+  title,
+  description,
+  backTitle,
+  onBack,
+  viewExplorerLabel,
+  onViewExplorer,
+  viewExplorerDisabled,
+  retryLabel,
+  onRetry,
+  strategyName,
+  apyLabel,
+  apyValue,
+  iconSrc,
+  iconAlt,
+  iconGradient,
+  amountUSD,
+  amountToken,
+  transactionSteps,
+  processingDetailsLabels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TransactionScreen,
+    {
+      progress,
+      iconType: "warning",
+      iconGradient,
+      title,
+      description,
+      onBack,
+      backTitle,
+      actions: /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
+        /* @__PURE__ */ jsx(SecondaryButton, { className: "flex-1", onClick: onViewExplorer, disabled: viewExplorerDisabled, children: viewExplorerLabel }),
+        /* @__PURE__ */ jsx(PrimaryButton, { className: "flex-1", onClick: onRetry, children: retryLabel })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransactionScreenInvestmentCard,
+          {
+            strategyName,
+            apyLabel,
+            apyValue,
+            iconSrc,
+            iconAlt,
+            amountUSD,
+            amountToken
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TransactionProcessingDetails,
+          {
+            steps: transactionSteps,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-primary)]",
+            labels: processingDetailsLabels
+          }
+        )
+      ]
+    }
+  );
+};
 
-export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, 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, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFromCardView, SwapNetworkSelectorView, SwapOutputAmountView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteBlockchainCostsView, SwapQuoteDetailsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapTokenSelectorView, SwapTransactionFailedView, SwapTransactionFailedViewSimple, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, 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, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map