@deframe-sdk/components 0.1.30 → 0.1.31

package/dist/index.js

@@ -1783,7 +1783,7 @@ var BannerNotification = (_a) => {
   const bannerClasses = tailwindMerge.twMerge(
     baseClasses,
     typeClasses[t],
-    variantTextClasses[v],
+    t === "toast" ? "text-white" : variantTextClasses[v],
     isExiting && "opacity-0 -translate-y-2",
     className
   );
@@ -7617,6 +7617,68 @@ var StrategyGridCard = ({
     ]
   }
 );
+var strategyCardClasses = [
+  "w-full",
+  "bg-[var(--deframe-widget-color-bg-secondary)]",
+  "border border-[color:var(--deframe-widget-color-border-secondary)]",
+  "rounded-[var(--deframe-widget-size-radius-md)]",
+  "p-[var(--deframe-widget-size-padding-x-md)]",
+  "flex flex-row items-center justify-between",
+  "gap-[var(--deframe-widget-size-gap-md)]",
+  "hover:border-[color:var(--deframe-widget-color-border-primary)]",
+  "transition-colors"
+].join(" ");
+var StrategyGridCardSimple = ({
+  logoUrl,
+  title,
+  chainName,
+  apyFormatted,
+  riskLevel,
+  onInvestClick,
+  labels
+}) => {
+  var _a, _b, _c, _d, _e;
+  const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
+  const riskBadgeMap = {
+    low: /* @__PURE__ */ jsxRuntime.jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Risco Baixo" }),
+    medium: /* @__PURE__ */ jsxRuntime.jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "Risco M\xE9dio" }),
+    high: /* @__PURE__ */ jsxRuntime.jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Risco Alto" })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      "data-slot": "strategy-grid-card-simple",
+      "data-test-id": "strategy-grid-card-simple",
+      className: strategyCardClasses,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: title, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: chainName })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: (_e = labels == null ? void 0 : labels.apyLabel) != null ? _e : "Rendimento" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-lg)] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-family)] leading-none mt-[2px]", children: apyFormatted })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 whitespace-nowrap", children: riskBadgeMap[riskLevel] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PrimaryButton,
+            {
+              "data-test-id": "strategy-grid-card-simple-invest",
+              "aria-label": `${investLabel} ${title}`,
+              onClick: onInvestClick,
+              className: "h-9 text-[13px] px-[var(--deframe-widget-size-padding-x-md)]",
+              children: investLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 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__ */ jsxRuntime.jsx(
@@ -7778,6 +7840,770 @@ var GroupedStrategyListView = ({
     ] })
   ] });
 };
+var DEFAULT_COLOR_TOKEN = "var(--deframe-widget-color-brand-primary)";
+var ImageBannerCard = ({
+  imageUrl,
+  alt,
+  onClick,
+  apyFormatted,
+  description,
+  colorToken = DEFAULT_COLOR_TOKEN
+}) => {
+  const isClickable = !!onClick;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "image-banner-card",
+      "data-test-id": "image-banner-card",
+      "aria-label": alt,
+      onClick,
+      className: tailwindMerge.twMerge(
+        "relative w-full overflow-hidden text-left",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "border",
+        "transition-[transform,opacity] duration-150",
+        isClickable ? "cursor-pointer active:scale-[0.98]" : "cursor-default"
+      ),
+      style: {
+        background: `linear-gradient(to right, color-mix(in srgb, ${colorToken} 10%, #080a0e) 0%, #080a0e 55%, #050507 100%)`,
+        borderColor: `color-mix(in srgb, ${colorToken} 22%, transparent)`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-row items-stretch w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] z-[1] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)]",
+            style: { flex: imageUrl ? "0 0 55%" : "1 1 auto" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "image-banner-card-name",
+                  className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.08em]",
+                  style: { color: `color-mix(in srgb, ${colorToken} 80%, var(--deframe-widget-color-text-secondary))` },
+                  children: alt
+                }
+              ),
+              apyFormatted && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "image-banner-card-apy", className: "flex items-baseline gap-[4px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-[38px] [font-weight:var(--deframe-widget-font-weight-bold)] font-[var(--deframe-widget-font-family)] leading-[1]",
+                    style: { color: colorToken },
+                    children: apyFormatted
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.1em]",
+                    style: { color: `color-mix(in srgb, ${colorToken} 60%, transparent)` },
+                    children: "APY"
+                  }
+                )
+              ] }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-test-id": "image-banner-card-description",
+                  className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        imageUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "image-banner-card-image-wrapper",
+            className: "relative flex-1 overflow-hidden",
+            style: { minHeight: 160 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  "data-test-id": "image-banner-card-image",
+                  src: imageUrl,
+                  alt: "",
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 w-full h-full object-cover object-center"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: "linear-gradient(to right, #080a0e 0%, transparent 40%)"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+var GRID_COLS = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
+var HISTORY_PAGE_SIZE = 5;
+var HISTORY_CONFIG = {
+  deposit: { label: "Depositado", color: "var(--deframe-widget-color-state-info)" },
+  withdraw: { label: "Sacado", color: "var(--deframe-widget-color-text-secondary)" },
+  interest: { label: "Juros Recebidos", color: "var(--deframe-widget-color-brand-primary)" }
+};
+var EarnHubStrategyCard = ({
+  logoUrl,
+  assetName,
+  network,
+  investedFormatted,
+  earningsFormatted,
+  isLoading,
+  onInvestClick,
+  onWithdrawClick,
+  history = [],
+  labels
+}) => {
+  var _a, _b, _c, _d, _e;
+  const [expanded, setExpanded] = React6__namespace.default.useState(false);
+  const [showAll, setShowAll] = React6__namespace.default.useState(false);
+  const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
+  const withdrawLabel = (_b = labels == null ? void 0 : labels.withdrawLabel) != null ? _b : "Sacar";
+  const historyTitle = (_c = labels == null ? void 0 : labels.historyTitle) != null ? _c : "Hist\xF3rico";
+  const visibleHistory = showAll ? history : history.slice(0, HISTORY_PAGE_SIZE);
+  const hasMore = history.length > HISTORY_PAGE_SIZE && !showAll;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      "data-slot": "earn-hub-strategy-card",
+      "data-test-id": "earn-hub-strategy-card",
+      className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] list-none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "earn-hub-strategy-card-main",
+            onClick: () => setExpanded((v) => !v),
+            className: tailwindMerge.twMerge(
+              GRID_COLS,
+              "items-center cursor-pointer",
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[13px]",
+              "transition-colors duration-150",
+              "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[36px] h-[36px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: assetName, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: assetName }),
+                  network && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: network })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 40, height: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-[length:var(--deframe-widget-font-size-md)] [font-weight:var(--deframe-widget-font-weight-bold)] font-[var(--deframe-widget-font-family)] leading-none",
+                  style: { color: "var(--deframe-widget-color-brand-primary)" },
+                  children: earningsFormatted
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 60, height: 16 }) : investedFormatted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)]", children: investedFormatted }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: (_d = labels == null ? void 0 : labels.investedLabel) != null ? _d : "investido" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    className: tailwindMerge.twMerge(
+                      "flex-shrink-0 text-[color:var(--deframe-widget-color-text-tertiary)] transition-transform duration-200",
+                      expanded && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-test-id": "earn-hub-strategy-card-detail",
+            className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-md)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex gap-[var(--deframe-widget-size-gap-sm)] mb-[var(--deframe-widget-size-gap-md)]",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    onWithdrawClick != null && /* @__PURE__ */ jsxRuntime.jsx(
+                      SecondaryButton,
+                      {
+                        className: "h-9 text-[13px] flex-1",
+                        onClick: onWithdrawClick,
+                        children: withdrawLabel
+                      }
+                    ),
+                    onInvestClick != null && /* @__PURE__ */ jsxRuntime.jsx(
+                      PrimaryButton,
+                      {
+                        className: "h-9 text-[13px] flex-1",
+                        onClick: onInvestClick,
+                        children: investLabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              history.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-strategy-card-history", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: historyTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-none m-0 p-0", children: visibleHistory.map((entry) => {
+                  var _a2;
+                  const config = (_a2 = HISTORY_CONFIG[entry.type]) != null ? _a2 : HISTORY_CONFIG.deposit;
+                  const isClickable = !!entry.onClick;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "li",
+                    {
+                      "data-test-id": "earn-hub-strategy-card-history-entry",
+                      onClick: entry.onClick ? () => entry.onClick() : void 0,
+                      className: tailwindMerge.twMerge(
+                        "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
+                        "py-[10px]",
+                        "border-t border-[color:var(--deframe-widget-color-border-tertiary)]",
+                        isClickable && "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_40%,transparent)] rounded-[var(--deframe-widget-size-radius-xs)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: "w-[6px] h-[6px] rounded-full flex-shrink-0",
+                              style: { background: config.color }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] leading-none flex-shrink-0", children: entry.date }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] leading-none",
+                              style: { color: config.color },
+                              children: config.label
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)] leading-none flex-shrink-0", children: entry.amount })
+                      ]
+                    },
+                    entry.id
+                  );
+                }) }),
+                hasMore && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowAll(true),
+                    className: tailwindMerge.twMerge(
+                      "mt-[var(--deframe-widget-size-gap-sm)] w-full",
+                      "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)]",
+                      "text-[color:var(--deframe-widget-color-text-secondary)]",
+                      "font-[var(--deframe-widget-font-family)]",
+                      "hover:text-[color:var(--deframe-widget-color-brand-primary)]",
+                      "transition-colors duration-150 cursor-pointer",
+                      "py-[var(--deframe-widget-size-padding-y-xs)]",
+                      "border-t border-[color:var(--deframe-widget-color-border-tertiary)]",
+                      "outline-none bg-transparent border-x-0 border-b-0"
+                    ),
+                    children: (_e = labels == null ? void 0 : labels.showMoreLabel) != null ? _e : `Ver mais (${history.length - HISTORY_PAGE_SIZE} itens)`
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var SimpleEmptyState = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "earn-empty-state",
+      "data-test-id": "earn-empty-state",
+      className: "flex flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)] border-t border-[color:var(--deframe-widget-color-border-secondary)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex h-[48px] w-[48px] items-center justify-center rounded-full",
+            style: {
+              background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 10%, transparent)",
+              color: "var(--deframe-widget-color-brand-primary)"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 20c0-4 3.6-7 8-7s8 3 8 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)] text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-md)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]", children: "Nenhuma caixinha ativa" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[240px] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "Escolha uma das caixinhas acima para come\xE7ar a render." })
+        ] })
+      ]
+    }
+  );
+};
+var EARN_CATEGORY_DEFINITIONS = [
+  {
+    id: "dolar",
+    imageUrl: "/mascot-usd.png",
+    alt: "Caixinha de D\xF3lar",
+    title: "Caixinha de D\xF3lar",
+    assetFilter: ["USDC", "USDT", "DAI", "thbill"]
+  },
+  {
+    id: "real",
+    imageUrl: "/mascot-brl.png",
+    alt: "Caixinha de Real",
+    title: "Caixinha de Real",
+    assetFilter: ["BRLA"]
+  }
+];
+var wrapperBaseClasses = [
+  "w-full max-w-[900px] mx-auto flex flex-col",
+  "gap-[var(--deframe-widget-size-gap-md)]"
+].join(" ");
+var statCardClasses = [
+  "w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+  "bg-[var(--deframe-widget-color-bg-secondary)]",
+  "border border-[color:var(--deframe-widget-color-border-secondary)]",
+  "rounded-[var(--deframe-widget-size-radius-md)]",
+  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
+].join(" ");
+var statCardLabelClasses = [
+  "text-[color:var(--deframe-widget-color-text-tertiary)]",
+  "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)]",
+  "uppercase tracking-[0.08em] [line-height:1.4]"
+].join(" ");
+var statCardValueDefaultClasses = [
+  "text-[color:var(--deframe-widget-color-text-primary)]",
+  "text-[28px] [font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]"
+].join(" ");
+var statCardValuePositiveClasses = [
+  "text-[color:var(--deframe-widget-color-brand-primary)]",
+  "text-[28px] [font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]"
+].join(" ");
+var statCardDescriptionClasses = [
+  "text-[color:var(--deframe-widget-color-text-secondary)]",
+  "text-[13px] [line-height:1.45]"
+].join(" ");
+var listPanelClasses = [
+  "w-full self-start flex flex-col",
+  "bg-[var(--deframe-widget-color-bg-secondary)]",
+  "border border-[color:var(--deframe-widget-color-border-secondary)]",
+  "rounded-[var(--deframe-widget-size-radius-md)]",
+  "overflow-hidden"
+].join(" ");
+var sectionHeaderClasses = [
+  "flex items-center justify-between",
+  "px-[var(--deframe-widget-size-padding-x-md)]",
+  "pt-[var(--deframe-widget-size-padding-y-md)]",
+  "pb-[var(--deframe-widget-size-padding-y-sm)]"
+].join(" ");
+var sectionTitleClasses = [
+  "text-[color:var(--deframe-widget-color-text-primary)]",
+  "text-[length:var(--deframe-widget-font-size-md)]",
+  "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+  "font-[var(--deframe-widget-font-family)]",
+  "leading-[var(--deframe-widget-font-leading-md)]"
+].join(" ");
+var columnHeaderClasses = [
+  "text-[length:var(--deframe-widget-font-size-xs)]",
+  "[font-weight:var(--deframe-widget-font-weight-medium)]",
+  "uppercase tracking-[0.08em]",
+  "text-[color:var(--deframe-widget-color-text-tertiary)]",
+  "leading-[var(--deframe-widget-font-leading-xs)]"
+].join(" ");
+var GRID_COLS2 = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
+var BANNER_COLORS = [
+  "var(--deframe-widget-color-brand-primary)",
+  "var(--deframe-widget-color-brand-secondary)"
+];
+var STABLECOIN_SYMBOLS = /* @__PURE__ */ new Set(["USDC", "USDT", "DAI"]);
+var DEFAULT_POSITIONS = { positions: [], summary: { totalUnderlyingBalanceUSD: 0, totalProfitInUSD: 0 } };
+var defaultFormatCurrency = (amount) => `$${amount.toFixed(2)}`;
+var EarnDesktopViewSimple = ({
+  positions = DEFAULT_POSITIONS,
+  strategies = [],
+  historyItems = [],
+  formatCurrency = defaultFormatCurrency,
+  locale = "pt-BR",
+  onDeposit,
+  onWithdraw,
+  onDetails,
+  onHistoryDetail,
+  onHistory,
+  isLoading,
+  className
+}) => {
+  const [activeCategoryId, setActiveCategoryId] = React6__namespace.default.useState(null);
+  const totalEarnings = React6__namespace.default.useMemo(
+    () => positions.positions.reduce((sum, p) => sum + p.spotPosition.profitInUSD, 0),
+    [positions.positions]
+  );
+  const statsCards = React6__namespace.default.useMemo(() => [
+    { label: "Total Investido", value: formatCurrency(positions.summary.totalUnderlyingBalanceUSD), badge: "Soma de todos os dep\xF3sitos ativos." },
+    { label: "Juros Acumulados", value: formatCurrency(totalEarnings), badge: "Rendimentos acumulados desde o in\xEDcio." }
+  ], [positions.summary.totalUnderlyingBalanceUSD, totalEarnings, formatCurrency]);
+  const categoryBanners = React6__namespace.default.useMemo(() => {
+    return EARN_CATEGORY_DEFINITIONS.map((cat) => {
+      var _a;
+      const upperFilter = new Set(cat.assetFilter.map((a) => a.toUpperCase()));
+      let bestApy = null;
+      for (const s of strategies) {
+        if (upperFilter.has(s.assetName.toUpperCase()) && s.apy > ((_a = bestApy == null ? void 0 : bestApy.apy) != null ? _a : 0)) {
+          bestApy = s;
+        }
+      }
+      const isStablecoin = cat.assetFilter.some((a) => STABLECOIN_SYMBOLS.has(a.toUpperCase()));
+      return {
+        id: cat.id,
+        imageUrl: cat.imageUrl,
+        alt: cat.title,
+        apyFormatted: bestApy == null ? void 0 : bestApy.apyFormatted,
+        description: isStablecoin ? "Rendimento em stablecoins" : "Rendimento em reais",
+        handleClick: () => setActiveCategoryId(cat.id)
+      };
+    });
+  }, [strategies]);
+  const historyByAsset = React6__namespace.default.useMemo(() => {
+    var _a, _b, _c, _d;
+    const map = /* @__PURE__ */ new Map();
+    for (const item of historyItems) {
+      const isDeposit = item.type.includes("DEPOSIT");
+      const assetIn = (_a = item.amounts) == null ? void 0 : _a.assetIn;
+      const symbol = (_d = assetIn && "token" in assetIn ? (_c = (_b = assetIn.token) == null ? void 0 : _b.symbol) == null ? void 0 : _c.toUpperCase() : null) != null ? _d : "";
+      if (!symbol) continue;
+      const amount = assetIn && "amountInUSD" in assetIn && assetIn.amountInUSD ? formatCurrency(parseFloat(assetIn.amountInUSD)) : assetIn && "amountHumanized" in assetIn ? `${assetIn.amountHumanized} ${symbol}` : "";
+      const date = new Date(item.createdAt).toLocaleString(locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+      const entry = {
+        id: item.id,
+        date,
+        type: isDeposit ? "deposit" : "withdraw",
+        amount,
+        onClick: onHistoryDetail ? () => onHistoryDetail(item.id, isDeposit) : void 0
+      };
+      if (!map.has(symbol)) map.set(symbol, []);
+      map.get(symbol).push(entry);
+    }
+    return map;
+  }, [historyItems, locale, formatCurrency, onHistoryDetail]);
+  const strategyRows = React6__namespace.default.useMemo(() => {
+    return positions.positions.filter((p) => p.spotPosition.underlyingBalanceUSD > 0.01).map((p) => {
+      var _a;
+      return {
+        logoUrl: p.strategy.logourl,
+        assetName: p.strategy.assetName,
+        network: p.strategy.network,
+        investedFormatted: formatCurrency(p.spotPosition.underlyingBalanceUSD),
+        earningsFormatted: `${(p.spotPosition.apy * 100).toFixed(2)}%`,
+        isLoading: false,
+        history: (_a = historyByAsset.get(p.strategy.assetName.toUpperCase())) != null ? _a : [],
+        onInvestClick: onDeposit ? () => onDeposit(p.strategy.id) : () => {
+        },
+        onWithdrawClick: onWithdraw ? () => onWithdraw(p.strategy.id) : () => {
+        },
+        onDetailsClick: onDetails ? () => onDetails(p.strategy.id) : () => {
+        }
+      };
+    });
+  }, [positions.positions, formatCurrency, historyByAsset, onDeposit, onWithdraw, onDetails]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-view-simple-loading", className: tailwindMerge.twMerge(wrapperBaseClasses, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1].map((i) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 100 }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1].map((i) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 160 }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 200 })
+    ] });
+  }
+  if (activeCategoryId) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GroupedStrategyListViewSimple,
+      {
+        categoryId: activeCategoryId,
+        strategies,
+        isLoading,
+        onBack: () => setActiveCategoryId(null),
+        onDeposit,
+        onWithdraw,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-view-simple", className: tailwindMerge.twMerge(wrapperBaseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-test-id": "earn-hub-view-simple-header",
+        className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              "data-test-id": "earn-hub-view-simple-title",
+              className: "text-[color:var(--deframe-widget-color-text-primary)] text-[length:var(--deframe-widget-font-size-xxl)] [font-weight:var(--deframe-widget-font-weight-bold)] leading-[var(--deframe-widget-font-leading-xxl)] font-[var(--deframe-widget-font-family)]",
+              children: "Caixinha"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              "data-test-id": "earn-hub-view-simple-subtitle",
+              className: "text-[color:var(--deframe-widget-color-text-secondary)] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)]",
+              children: "Invista e deixe seu dinheiro render."
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-test-id": "earn-hub-view-simple-stats",
+        className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]",
+        children: statsCards.map((card, i) => /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(statCardClasses, "self-stretch"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: statCardLabelClasses, children: card.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: i > 0 ? statCardValuePositiveClasses : statCardValueDefaultClasses, children: card.value }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: statCardDescriptionClasses, children: card.badge })
+        ] }, card.label))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-test-id": "earn-hub-view-simple-categories",
+        className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]",
+        children: categoryBanners.map((cat, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          ImageBannerCard,
+          {
+            imageUrl: cat.imageUrl,
+            alt: cat.alt,
+            apyFormatted: cat.apyFormatted,
+            description: cat.description,
+            onClick: cat.handleClick,
+            colorToken: BANNER_COLORS[i % BANNER_COLORS.length]
+          },
+          cat.alt
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: listPanelClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sectionHeaderClasses, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-test-id": "earn-hub-view-simple-strategies-title", className: sectionTitleClasses, children: "Suas Caixinhas" }),
+        onHistory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Hist\xF3rico",
+            "data-test-id": "earn-hub-simple-history-button",
+            onClick: onHistory,
+            className: tailwindMerge.twMerge(
+              "inline-flex items-center justify-center",
+              "w-9 h-9",
+              "rounded-[var(--deframe-widget-size-radius-sm)]",
+              "border-none bg-transparent",
+              "cursor-pointer outline-none flex-shrink-0",
+              "text-[color:var(--deframe-widget-color-text-secondary)]",
+              "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+              "transition-[background] duration-150"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                width: "20",
+                height: "20",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+                ]
+              }
+            )
+          }
+        ) })
+      ] }),
+      strategyRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(SimpleEmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "earn-hub-view-simple-columns",
+            className: tailwindMerge.twMerge(
+              GRID_COLS2,
+              "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
+              "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
+            ),
+            children: ["CAIXINHA", "RENDIMENTO", "INVESTIDO"].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: tailwindMerge.twMerge(
+                  columnHeaderClasses,
+                  i === 1 && "text-center",
+                  i === 2 && "text-right"
+                ),
+                children: label
+              },
+              label
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-test-id": "earn-hub-view-simple-strategy-list", className: "list-none m-0 p-0", children: strategyRows.map((s) => /* @__PURE__ */ jsxRuntime.jsx(EarnHubStrategyCard, __spreadValues({}, s), s.assetName)) })
+      ] })
+    ] })
+  ] });
+};
+var wrapperBaseClasses2 = [
+  "w-full flex flex-col",
+  "gap-[var(--deframe-widget-size-gap-md)]",
+  "font-[var(--deframe-widget-font-family)]"
+].join(" ");
+var titleClasses = [
+  "text-[color:var(--deframe-widget-color-text-primary)]",
+  "text-[length:var(--deframe-widget-font-size-xxl)]",
+  "[font-weight:var(--deframe-widget-font-weight-bold)]",
+  "leading-[var(--deframe-widget-font-leading-xxl)]",
+  "font-[var(--deframe-widget-font-family)]"
+].join(" ");
+var backButtonClasses = [
+  "inline-flex items-center gap-[var(--deframe-widget-size-gap-xs)]",
+  "text-[color:var(--deframe-widget-color-text-secondary)]",
+  "hover:text-[color:var(--deframe-widget-color-text-primary)]",
+  "text-[length:var(--deframe-widget-font-size-sm)]",
+  "[font-weight:var(--deframe-widget-font-weight-medium)]",
+  "transition-colors cursor-pointer",
+  "font-[var(--deframe-widget-font-family)]",
+  "border-none bg-transparent outline-none p-0"
+].join(" ");
+var emptyBoxClasses = [
+  "w-full flex flex-col items-center justify-center",
+  "gap-[var(--deframe-widget-size-gap-sm)]",
+  "px-[var(--deframe-widget-size-padding-x-md)]",
+  "py-[var(--deframe-widget-size-padding-y-xl)]",
+  "rounded-[var(--deframe-widget-size-radius-md)]",
+  "border border-dashed border-[color:var(--deframe-widget-color-border-secondary)]",
+  "bg-[color:var(--deframe-widget-color-bg-secondary)]"
+].join(" ");
+var GroupedStrategyListViewSimple = ({
+  categoryId,
+  strategies = [],
+  isLoading,
+  onBack,
+  onDeposit,
+  onWithdraw,
+  className
+}) => {
+  var _a;
+  const category = EARN_CATEGORY_DEFINITIONS.find((c) => c.id === categoryId);
+  const categoryTitle = (_a = category == null ? void 0 : category.title) != null ? _a : "Estrat\xE9gias";
+  const allClaimedAssets = React6__namespace.default.useMemo(() => {
+    const claimed = /* @__PURE__ */ new Set();
+    for (const cat of EARN_CATEGORY_DEFINITIONS) {
+      if (cat.assetFilter.length > 0) {
+        for (const symbol of cat.assetFilter) {
+          claimed.add(symbol.toUpperCase());
+        }
+      }
+    }
+    return claimed;
+  }, []);
+  const filteredStrategies = React6__namespace.default.useMemo(() => {
+    const assetFilter = category == null ? void 0 : category.assetFilter;
+    if (!assetFilter || assetFilter.length === 0) {
+      return strategies.filter((s) => !allClaimedAssets.has(s.assetName.toUpperCase()));
+    }
+    const upperFilter = new Set(assetFilter.map((a) => a.toUpperCase()));
+    return strategies.filter((s) => upperFilter.has(s.assetName.toUpperCase()));
+  }, [strategies, category, allClaimedAssets]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple-loading", className: tailwindMerge.twMerge(wrapperBaseClasses2, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "40%", height: 24 }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 80 }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "100%", height: 80 })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple", className: tailwindMerge.twMerge(wrapperBaseClasses2, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "data-test-id": "grouped-strategy-list-view-simple-back",
+          "aria-label": "Voltar",
+          onClick: onBack,
+          className: backButtonClasses,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4L6 8L10 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            "Voltar"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-test-id": "grouped-strategy-list-view-simple-title", className: tailwindMerge.twMerge(titleClasses, "mt-[var(--deframe-widget-size-gap-sm)]"), children: categoryTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextBody,
+        {
+          "data-test-id": "grouped-strategy-list-view-simple-subtitle",
+          variant: "text-small",
+          className: "text-[color:var(--deframe-widget-color-text-secondary)] mt-[var(--deframe-widget-size-gap-xs)]",
+          children: "Escolha uma estrat\xE9gia para investir."
+        }
+      )
+    ] }),
+    filteredStrategies.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "grouped-strategy-list-view-simple-empty", className: emptyBoxClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "Nenhuma estrat\xE9gia dispon\xEDvel no momento." }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-test-id": "grouped-strategy-list-view-simple-items",
+        className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+        children: filteredStrategies.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+          StrategyGridCardSimple,
+          {
+            logoUrl: s.logourl,
+            title: s.assetName,
+            subtitle: s.assetName,
+            chainName: s.network,
+            apyFormatted: s.apyFormatted,
+            apyLabel: "Rendimento",
+            riskLevel: "low",
+            onInvestClick: onDeposit ? () => onDeposit(s.id) : () => {
+            },
+            onWithdrawClick: onWithdraw ? () => onWithdraw(s.id) : () => {
+            }
+          },
+          s.id
+        ))
+      }
+    )
+  ] });
+};
 var DateLabel = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)]", children });
 };
@@ -9876,7 +10702,7 @@ function EarnFormSkeleton() {
     "px-[var(--deframe-widget-size-padding-x-md)]",
     "py-[var(--deframe-widget-size-padding-y-md)]"
   ].join(" ");
-  const titleClasses = [
+  const titleClasses2 = [
     "flex-1",
     "text-[15px]",
     "[font-weight:var(--deframe-widget-font-weight-semibold)]",
@@ -9906,7 +10732,7 @@ function EarnFormSkeleton() {
       "data-test-id": "earn-form-skeleton",
       className: "flex flex-col font-[var(--deframe-widget-font-family)]",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses, children: "Deposit" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses2, children: "Deposit" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-body", className: bodyClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-form-skeleton-input-card", className: inputCardClasses, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
@@ -10007,7 +10833,7 @@ function EarnFeedbackOverlaySimpleView({
     "flex flex-col items-center",
     "gap-[var(--deframe-widget-size-gap-sm)] text-center"
   );
-  const titleClasses = tailwindMerge.twMerge(
+  const titleClasses2 = tailwindMerge.twMerge(
     isLoading ? "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[22px] font-bold text-[color:var(--deframe-widget-color-text-primary)] leading-[1.25]"
   );
   const subtitleClasses = tailwindMerge.twMerge(
@@ -10052,7 +10878,7 @@ function EarnFeedbackOverlaySimpleView({
                       {
                         "data-test-id": "earn-feedback-title",
                         "data-slot": "earn-feedback-title",
-                        className: titleClasses,
+                        className: titleClasses2,
                         children: title
                       }
                     ),
@@ -13384,7 +14210,7 @@ function HistoryButton2({ onClick }) {
     }
   );
 }
-var GRID_COLS = "grid grid-cols-[40px_1fr_auto] sm:grid-cols-[1fr_160px_130px] gap-x-[var(--deframe-widget-size-gap-sm)] sm:gap-x-[var(--deframe-widget-size-gap-md)]";
+var GRID_COLS3 = "grid grid-cols-[40px_1fr_auto] sm:grid-cols-[1fr_160px_130px] gap-x-[var(--deframe-widget-size-gap-sm)] sm:gap-x-[var(--deframe-widget-size-gap-md)]";
 function IconCircle3({ item, size = 36, className }) {
   const [imgError, setImgError] = React6__namespace.default.useState(false);
   if (item.iconUrl && !imgError) {
@@ -13484,7 +14310,7 @@ function AssetListSkeletonRow({ index }) {
     {
       "data-test-id": "asset-list-skeleton-row",
       className: tailwindMerge.twMerge(
-        GRID_COLS,
+        GRID_COLS3,
         "items-center",
         "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
         "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
@@ -13530,7 +14356,7 @@ function AssetListSkeletonContent() {
       "div",
       {
         className: tailwindMerge.twMerge(
-          GRID_COLS,
+          GRID_COLS3,
           "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
           "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
         ),
@@ -13639,7 +14465,7 @@ var DashboardTokensViewSimple = ({
           {
             "data-test-id": "asset-list-columns",
             className: tailwindMerge.twMerge(
-              GRID_COLS,
+              GRID_COLS3,
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
               "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
             ),
@@ -13665,7 +14491,7 @@ var DashboardTokensViewSimple = ({
               "data-test-id": "asset-list-item",
               onClick: handleItemClick,
               className: tailwindMerge.twMerge(
-                GRID_COLS,
+                GRID_COLS3,
                 "items-center",
                 "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
                 "border-t border-[color:var(--deframe-widget-color-border-secondary)]",
@@ -14219,6 +15045,7 @@ exports.EarnDepositSuccessView = EarnDepositSuccessView;
 exports.EarnDepositWarningSimpleView = EarnDepositWarningSimpleView;
 exports.EarnDepositWarningView = EarnDepositWarningView;
 exports.EarnDesktopView = EarnDesktopView;
+exports.EarnDesktopViewSimple = EarnDesktopViewSimple;
 exports.EarnExploreGridView = EarnExploreGridView;
 exports.EarnFlowSkeletonSimple = EarnFlowSkeletonSimple;
 exports.EarnInvestedSectionView = EarnInvestedSectionView;