@deframe-sdk/components 0.1.11 → 0.1.13

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight } 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 { HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight, HiXMark } from 'react-icons/hi2';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
 
 var __defProp = Object.defineProperty;
@@ -87,6 +87,20 @@ function ActionButton(_a) {
     })
   );
 }
+var CloseButton = ({ onClick, testId, ariaLabel = "Close", 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": testId != null ? testId : "close-button",
+      onClick,
+      className: twMerge(baseClasses, className),
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(HiXMark, { className: "w-6 h-6" })
+    }
+  );
+};
+var CloseButton_default = CloseButton;
 function PercentageButton(_a) {
   var _b = _a, {
     children,
@@ -2157,3111 +2171,146 @@ function DeframeComponentsProvider({
     }
   );
 }
-function StatCard(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
-    "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(" ");
-  const cardClasses = twMerge(baseClasses, className);
-  return /* @__PURE__ */ jsx(
-    "article",
-    __spreadValues({
-      "data-slot": "stat-card",
-      "data-test-id": "stat-card",
-      className: cardClasses
-    }, props)
-  );
-}
-function StatCardHeader(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]";
-  const headerClasses = twMerge(baseClasses, className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      "data-slot": "stat-card-header",
-      "data-test-id": "stat-card-header",
-      className: headerClasses
-    }, props)
-  );
-}
-function StatCardLabel(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
-    "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(" ");
-  const labelClasses = twMerge(baseClasses, className);
-  return /* @__PURE__ */ jsx(
-    "p",
-    __spreadValues({
-      "data-slot": "stat-card-label",
-      "data-test-id": "stat-card-label",
-      className: labelClasses
-    }, props)
-  );
-}
-function StatCardValue(_a) {
-  var _b = _a, { tone = "default", size = "md", className } = _b, props = __objRest(_b, ["tone", "size", "className"]);
-  const sizeClasses2 = {
-    sm: "text-[20px]",
-    md: "text-[28px]",
-    lg: "text-[38px]"
-  };
-  const toneClasses = {
-    default: "text-[color:var(--deframe-widget-color-text-primary)]",
-    positive: "text-[color:var(--deframe-widget-color-brand-primary)]",
-    negative: "text-[color:var(--deframe-widget-color-state-error)]",
-    warning: "text-[color:var(--deframe-widget-color-state-warning)]",
-    brand: "text-[color:var(--deframe-widget-color-brand-secondary)]"
-  };
-  const baseClasses = "[font-weight:var(--deframe-widget-font-weight-bold)] [line-height:1.15]";
-  const valueClasses = twMerge(baseClasses, sizeClasses2[size], toneClasses[tone], className);
-  return /* @__PURE__ */ jsx(
-    "p",
-    __spreadValues({
-      "data-slot": "stat-card-value",
-      "data-test-id": "stat-card-value",
-      className: valueClasses
-    }, props)
-  );
-}
-function StatCardDescription(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = "text-[color:var(--deframe-widget-color-text-secondary)] text-[13px] [line-height:1.45]";
-  const descClasses = twMerge(baseClasses, className);
-  return /* @__PURE__ */ jsx(
-    "p",
-    __spreadValues({
-      "data-slot": "stat-card-description",
-      "data-test-id": "stat-card-description",
-      className: descClasses
-    }, props)
-  );
-}
-function StatCardTrend(_a) {
-  var _b = _a, { direction, value, className } = _b, props = __objRest(_b, ["direction", "value", "className"]);
-  const baseClasses = "inline-flex items-center gap-[3px] text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)] [line-height:1.4]";
-  const directionClasses = {
-    up: "text-[color:var(--deframe-widget-color-brand-primary)]",
-    down: "text-[color:var(--deframe-widget-color-state-error)]",
-    neutral: "text-[color:var(--deframe-widget-color-text-tertiary)]"
-  };
-  const trendClasses = twMerge(baseClasses, directionClasses[direction], className);
-  const icons = {
-    up: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 1.5L9 7H1L5 1.5Z", fill: "currentColor" }) }),
-    down: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 8.5L1 3H9L5 8.5Z", fill: "currentColor" }) }),
-    neutral: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6H10M10 6L7 3M10 6L7 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-  };
-  return /* @__PURE__ */ jsxs(
-    "span",
-    __spreadProps(__spreadValues({
-      "data-slot": "stat-card-trend",
-      "data-test-id": "stat-card-trend",
-      className: trendClasses,
-      "aria-label": `Tend\xEAncia: ${direction === "up" ? "alta" : direction === "down" ? "baixa" : "est\xE1vel"} ${value}`
-    }, props), {
-      children: [
-        icons[direction],
-        value
-      ]
-    })
-  );
-}
-function StatCardBadge(_a) {
-  var _b = _a, { tone = "default", className } = _b, props = __objRest(_b, ["tone", "className"]);
-  const baseClasses = [
-    "inline-flex items-center justify-center",
-    "px-[6px] py-[2px]",
-    "rounded-[var(--deframe-widget-size-radius-xs)]",
-    "text-[10px] [font-weight:var(--deframe-widget-font-weight-semibold)] uppercase tracking-[0.06em]",
-    "[line-height:1.4]"
-  ].join(" ");
-  const toneClasses = {
-    default: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)] border border-[color:var(--deframe-widget-color-border-secondary)] text-[color:var(--deframe-widget-color-text-secondary)]",
-    positive: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]",
-    negative: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] border border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] text-[color:var(--deframe-widget-color-state-error)]",
-    warning: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)] text-[color:var(--deframe-widget-color-state-warning)]",
-    brand: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_18%,transparent)] border border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]"
-  };
-  const badgeClasses = twMerge(baseClasses, toneClasses[tone], className);
-  return /* @__PURE__ */ jsx(
-    "span",
-    __spreadValues({
-      "data-slot": "stat-card-badge",
-      "data-test-id": "stat-card-badge",
-      className: badgeClasses
-    }, props)
-  );
-}
-function StatCardDivider(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const dividerClasses = twMerge(
-    "border-none h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-xs)]",
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    "hr",
-    __spreadValues({
-      "data-slot": "stat-card-divider",
-      "data-test-id": "stat-card-divider",
-      className: dividerClasses
-    }, props)
-  );
-}
-function StatCardRow(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]";
-  const rowClasses = twMerge(baseClasses, className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      "data-slot": "stat-card-row",
-      "data-test-id": "stat-card-row",
-      className: rowClasses
-    }, props)
-  );
-}
-function StatCardIcon(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
-    "flex items-center justify-center flex-shrink-0",
-    "w-9 h-9",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]"
-  ].join(" ");
-  const iconClasses = twMerge(baseClasses, className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      "data-slot": "stat-card-icon",
-      "data-test-id": "stat-card-icon",
-      className: iconClasses
-    }, props)
-  );
-}
-var sizeClasses = {
-  sm: [
-    "h-[var(--deframe-widget-font-leading-sm)]",
-    "px-[var(--deframe-widget-size-padding-x-lg)]",
-    "[font-size:var(--deframe-widget-font-size-md)]",
-    "[line-height:var(--deframe-widget-font-leading-md)]"
-  ].join(" "),
-  md: [
-    "h-[var(--deframe-widget-font-leading-md)]",
-    "px-[var(--deframe-widget-size-padding-x-xl)]",
-    "[font-size:var(--deframe-widget-font-size-lg)]",
-    "[line-height:var(--deframe-widget-font-leading-lg)]"
-  ].join(" ")
+var InfoRow = ({ children, borderBottom, className }) => {
+  const baseClasses = "self-stretch inline-flex justify-between items-start";
+  const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]" : "";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row", className: twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoLabel = ({ children, className }) => {
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-label", className: twMerge(baseClasses, className), children });
+};
+var variantClasses = {
+  default: "text-[color:var(--deframe-widget-color-text-primary)]",
+  success: "text-[color:var(--deframe-widget-color-state-success)]",
+  warning: "text-[color:var(--deframe-widget-color-state-warning)]",
+  error: "text-[color:var(--deframe-widget-color-state-error)]"
+};
+var InfoValue = ({ children, variant = "default", className }) => {
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-value", className: twMerge(baseClasses, variantClasses[variant], className), children });
+};
+var InfoRowWithIcon = ({ children, borderBottom, className }) => {
+  const baseClasses = "flex items-start justify-between h-[17px]";
+  const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]" : "";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row-with-icon", className: twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoRowIconLabel = ({ children, className }) => {
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "info-row-icon-label", className: twMerge(baseClasses, className), children: [
+    "\u2022 ",
+    children
+  ] });
+};
+var InfoRowIconValue = ({ children, className }) => {
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row-icon-value", className: twMerge(baseClasses, className), children });
 };
-function SegmentedControl({
-  options,
+var CollapsibleInfoRow = ({
+  label,
   value,
-  onChange,
-  variant = "outlined",
-  size = "md",
-  fullWidth = false
-}) {
-  const containerClasses = twMerge(
-    "inline-flex rounded-[var(--deframe-widget-size-radius-md)]",
-    "bg-[var(--deframe-widget-color-bg-secondary)]",
-    "border border-[color:var(--deframe-widget-color-border-secondary)]",
-    "p-[3px] gap-[2px]",
-    fullWidth ? "w-full" : "w-auto"
-  );
-  return /* @__PURE__ */ jsx(
+  children,
+  defaultOpen = false,
+  className,
+  collapseLabel,
+  expandLabel
+}) => {
+  const [isOpen, setIsOpen] = React6__default.useState(defaultOpen);
+  const baseClasses = "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "collapsible-info-row", className: twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: "flex items-start justify-between w-full text-left h-[18px] cursor-pointer",
+        "aria-expanded": isOpen,
+        "aria-label": `${isOpen ? collapseLabel : expandLabel} ${label}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[2px]", children: [
+            /* @__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)]", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: isOpen ? /* @__PURE__ */ jsx(HiChevronUp, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-secondary)]" }) : /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-secondary)]" }) })
+          ] }),
+          /* @__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-semibold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: value })
+        ]
+      }
+    ),
+    isOpen && children
+  ] });
+};
+var BackgroundContainer = ({ children, className }) => {
+  const baseClasses = "w-full flex-1 min-h-0 px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "background-container", className: twMerge(baseClasses, className), children });
+};
+var SectionCard = ({ children, className }) => {
+  const baseClasses = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "section-card", className: twMerge(baseClasses, className), children });
+};
+var Navbar = ({ children, className }) => {
+  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[color:var(--deframe-widget-color-border-tertiary)] flex";
+  return /* @__PURE__ */ jsx("nav", { "data-test-id": "navbar", className: twMerge(baseClasses, className), children });
+};
+var gapClasses = {
+  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
+  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
+  md: "gap-[var(--deframe-widget-size-gap-md)]",
+  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
+};
+var FlexCol = ({ children, className, gap = "xs" }) => {
+  const baseClasses = "flex flex-col";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "flex-col", className: twMerge(baseClasses, gapClasses[gap], className), children });
+};
+var gapClasses2 = {
+  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
+  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
+  md: "gap-[var(--deframe-widget-size-gap-md)]",
+  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
+};
+var FlexRow = ({ children, className, gap = "xs" }) => {
+  const baseClasses = "flex items-center";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "flex-row", className: twMerge(baseClasses, gapClasses2[gap], className), children });
+};
+var ScrollableContent = ({ children, className }) => {
+  const baseClasses = "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "scrollable-content", className: twMerge(baseClasses, className), children });
+};
+var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
+  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b border-[color:var(--deframe-widget-color-border-tertiary)] flex items-center";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "details-header", className: twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-test-id": "details-header-back-button",
+        onClick: onBack,
+        className: "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)] cursor-pointer",
+        "aria-label": backAriaLabel,
+        children: /* @__PURE__ */ jsx(HiChevronLeft, { className: "w-6 h-6 text-[color:var(--deframe-widget-color-text-tertiary)]" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsx(TextHeading, { variant: "h-large", children: title }) })
+  ] });
+};
+var HighRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "high-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
     "div",
     {
-      role: "tablist",
-      "data-test-id": "segmented-control",
-      "data-slot": "segmented-control",
-      className: containerClasses,
-      children: options.map((opt) => {
-        const isActive = opt.value === value;
-        const buttonClasses = twMerge(
-          "inline-flex items-center justify-center",
-          "gap-[var(--deframe-widget-size-gap-xs)]",
-          "rounded-[var(--deframe-widget-size-radius-sm)]",
-          "border-[length:var(--deframe-widget-size-border-sm)] border-solid",
-          "outline-none whitespace-nowrap transition-[background,color,border-color] duration-150",
-          "font-[var(--deframe-widget-font-family)]",
-          "[font-weight:var(--deframe-widget-font-weight-medium)]",
-          sizeClasses[size],
-          fullWidth && "flex-1",
-          isActive ? variant === "outlined" ? "border-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)] text-[color:var(--deframe-widget-color-text-primary)]" : "border-transparent bg-transparent text-[color:var(--deframe-widget-color-brand-primary)]" : "border-transparent bg-transparent text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
-        );
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            role: "tab",
-            "aria-selected": isActive,
-            "data-test-id": "segmented-control-option",
-            "data-slot": "segmented-control-option",
-            onClick: () => onChange(opt.value),
-            className: buttonClasses,
-            children: [
-              opt.icon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: opt.icon }),
-              opt.label
-            ]
-          },
-          opt.value
-        );
-      })
+      "data-size": "Small",
+      "data-type": "Failed",
+      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-error)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
+      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
     }
-  );
-}
-function IconCircle({ item, size = 36, className }) {
-  const [imgError, setImgError] = React6.useState(false);
-  if (item.iconUrl && !imgError) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        "data-test-id": "icon-circle-img",
-        "data-slot": "icon-circle",
-        src: item.iconUrl,
-        alt: item.name,
-        width: size,
-        height: size,
-        className: twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
-        onError: () => setImgError(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
+  ) });
+};
+var MediumRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "medium-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
     "div",
     {
-      "data-test-id": "icon-circle-fallback",
-      "data-slot": "icon-circle",
-      className: twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]", className),
-      style: {
-        width: size,
-        height: size,
-        background: item.color,
-        fontSize: size * 0.33,
-        letterSpacing: "-0.01em"
-      },
-      children: item.name.slice(0, 2).toUpperCase()
-    }
-  );
-}
-function CloseButton(_a) {
-  var _b = _a, { onClick, className, testId } = _b, rest = __objRest(_b, ["onClick", "className", "testId"]);
-  const baseClasses = [
-    "inline-flex items-center justify-center",
-    "w-9 h-9",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "border-none",
-    "cursor-pointer",
-    "bg-transparent",
-    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
-    "transition-[background] duration-150",
-    "flex-shrink-0",
-    "outline-none",
-    "text-[color:var(--deframe-widget-color-text-secondary)]"
-  ].join(" ");
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      "data-test-id": testId != null ? testId : "close-button",
-      "data-slot": "close-button",
-      onClick,
-      "aria-label": "Fechar",
-      className: twMerge(baseClasses, className)
-    }, rest), {
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          "data-test-id": "close-button-icon",
-          "data-slot": "close-button-icon",
-          viewBox: "0 0 24 24",
-          width: "20",
-          height: "20",
-          fill: "currentColor",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx("path", { d: "M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" })
-        }
-      )
-    })
-  );
-}
-function ChainRow({ chain, selected, onClick, onKeyDown, index }) {
-  const baseClasses = [
-    "relative flex items-center gap-[10px]",
-    "py-[9px] px-[var(--deframe-widget-size-padding-x-sm)] pl-[14px]",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "cursor-pointer",
-    "outline-none",
-    "mb-[var(--deframe-widget-size-gap-none)].5",
-    "transition-[background] duration-150"
-  ].join(" ");
-  const stateClasses = {
-    selected: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
-    default: "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
-  };
-  const rowClasses = twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
-  const nameClasses = [
-    "text-[14px] [font-weight:var(--deframe-widget-font-weight-medium)]",
-    selected ? "text-[color:var(--deframe-widget-color-text-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
-  ].join(" ");
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      "data-test-id": "chain-row",
-      "data-slot": "chain-row",
-      role: "option",
-      "aria-selected": selected,
-      tabIndex: 0,
-      onClick,
-      onKeyDown,
-      "data-chain-index": index,
-      className: rowClasses,
-      children: [
-        selected && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            "data-test-id": "chain-row-accent",
-            "data-slot": "chain-row-accent",
-            layoutId: "chain-accent",
-            className: "absolute left-0 top-2 bottom-2 w-[3px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-brand-primary)]",
-            transition: { type: "spring", stiffness: 400, damping: 30 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IconCircle,
-          {
-            "data-test-id": "chain-row-icon",
-            "data-slot": "chain-row-icon",
-            item: chain,
-            size: 34
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "chain-row-content",
-            "data-slot": "chain-row-content",
-            className: "flex-1 min-w-0",
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "chain-row-name",
-                  "data-slot": "chain-row-name",
-                  className: nameClasses,
-                  children: chain.name
-                }
-              ),
-              chain.balanceUsd && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "chain-row-balance",
-                  "data-slot": "chain-row-balance",
-                  className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] mt-px",
-                  children: chain.balanceUsd
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function ChainChip({ chain, selected, onClick }) {
-  const baseClasses = [
-    "inline-flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
-    "py-[var(--deframe-widget-size-padding-y-sm)] pl-[var(--deframe-widget-size-padding-x-sm)] pr-[14px]",
-    "rounded-[var(--deframe-widget-size-radius-full)]",
-    "cursor-pointer",
-    "whitespace-nowrap",
-    "transition-all duration-150",
-    "flex-shrink-0",
-    "outline-none",
-    "border"
-  ].join(" ");
-  const stateClasses = {
-    selected: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
-    default: "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
-  };
-  const buttonClasses = twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
-  const nameLabelClasses = [
-    "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.2]",
-    selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
-  ].join(" ");
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      "data-test-id": "chain-chip",
-      "data-slot": "chain-chip",
-      onClick,
-      className: buttonClasses,
-      children: [
-        /* @__PURE__ */ jsx(
-          IconCircle,
-          {
-            "data-test-id": "chain-chip-icon",
-            "data-slot": "chain-chip-icon",
-            item: chain,
-            size: 24
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "chain-chip-content",
-            "data-slot": "chain-chip-content",
-            className: "text-left",
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "chain-chip-label",
-                  "data-slot": "chain-chip-label",
-                  className: nameLabelClasses,
-                  children: chain.name
-                }
-              ),
-              chain.balanceUsd && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "chain-chip-balance",
-                  "data-slot": "chain-chip-balance",
-                  className: "text-[11px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4]",
-                  children: chain.balanceUsd
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function AssetRow({ asset, first, onClick, onKeyDown, index, chainName, chainColor }) {
-  const hasBalance = asset.balance || asset.balanceUsd;
-  const baseClasses = [
-    "group",
-    "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
-    "py-[10px] px-[14px]",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "cursor-pointer outline-none",
-    "transition-[background] duration-150"
-  ].join(" ");
-  const stateClasses = {
-    first: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
-    default: "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
-  };
-  const rowClasses = twMerge(baseClasses, stateClasses[first ? "first" : "default"]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "asset-row",
-      "data-slot": "asset-row",
-      role: "option",
-      "aria-selected": first,
-      tabIndex: 0,
-      onClick,
-      onKeyDown,
-      "data-asset-index": index,
-      className: rowClasses,
-      children: [
-        first && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "asset-row-accent",
-            "data-slot": "asset-row-accent",
-            className: "absolute left-0 top-2 bottom-2 w-[3px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-brand-primary)]"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IconCircle,
-          {
-            "data-test-id": "asset-row-icon",
-            "data-slot": "asset-row-icon",
-            item: asset,
-            size: 38
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "asset-row-content",
-            "data-slot": "asset-row-content",
-            className: "flex-1 min-w-0",
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "asset-row-symbol",
-                  "data-slot": "asset-row-symbol",
-                  className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
-                  children: asset.symbol
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "asset-row-name",
-                  "data-slot": "asset-row-name",
-                  className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] mt-px",
-                  children: asset.name
-                }
-              ),
-              chainName && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-test-id": "asset-row-chain",
-                  "data-slot": "asset-row-chain",
-                  className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)] mt-[3px]",
-                  children: [
-                    chainColor && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-test-id": "asset-row-chain-dot",
-                        "data-slot": "asset-row-chain-dot",
-                        className: "inline-block w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
-                        style: { background: chainColor }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        "data-test-id": "asset-row-chain-label",
-                        "data-slot": "asset-row-chain-label",
-                        className: "text-[11px] text-[color:var(--deframe-widget-color-text-tertiary)]",
-                        children: [
-                          "via ",
-                          chainName
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        hasBalance ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "asset-row-balance",
-            "data-slot": "asset-row-balance",
-            className: "flex-shrink-0 text-right",
-            children: [
-              asset.balance && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-test-id": "asset-row-balance-amount",
-                  "data-slot": "asset-row-balance-amount",
-                  className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]",
-                  children: [
-                    asset.balance,
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-test-id": "asset-row-balance-symbol",
-                        "data-slot": "asset-row-balance-symbol",
-                        className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] [font-weight:var(--deframe-widget-font-weight-regular)]",
-                        children: asset.symbol
-                      }
-                    )
-                  ]
-                }
-              ),
-              asset.balanceUsd && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "asset-row-balance-usd",
-                  "data-slot": "asset-row-balance-usd",
-                  className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] mt-[var(--deframe-widget-size-gap-none)].5",
-                  children: asset.balanceUsd
-                }
-              )
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-test-id": "asset-row-select-hint",
-            "data-slot": "asset-row-select-hint",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-brand-primary)] [font-weight:var(--deframe-widget-font-weight-medium)] whitespace-nowrap flex-shrink-0 opacity-0 translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-150",
-            children: "Select \u2192"
-          }
-        )
-      ]
-    }
-  );
-}
-var SearchInput = React6.forwardRef(
-  ({ value, onChange, placeholder = "Buscar por s\xEDmbolo, nome ou endere\xE7o", onArrowDown, className }, ref) => {
-    const wrapperClasses = twMerge("relative", className);
-    const inputClasses = [
-      "w-full box-border h-10",
-      "bg-[var(--deframe-widget-color-bg-tertiary)]",
-      "border border-[color:var(--deframe-widget-color-border-secondary)]",
-      "rounded-[var(--deframe-widget-size-radius-sm)]",
-      "py-[var(--deframe-widget-size-padding-y-none)] pr-[var(--deframe-widget-size-padding-x-xl)] pl-[14px]",
-      "text-[14px] text-[color:var(--deframe-widget-color-text-primary)]",
-      "outline-none focus:outline-none",
-      "focus:border-[color:var(--deframe-widget-color-brand-primary)]",
-      "transition-colors duration-150",
-      "font-[var(--deframe-widget-font-family)]",
-      "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]"
-    ].join(" ");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-test-id": "search-input-wrapper",
-        "data-slot": "search-input-wrapper",
-        className: wrapperClasses,
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "data-test-id": "search-input",
-              "data-slot": "search-input",
-              ref,
-              type: "text",
-              value,
-              onChange: (e) => onChange(e.target.value),
-              placeholder,
-              "aria-label": "Buscar ativo",
-              onKeyDown: (e) => {
-                if (e.key === "ArrowDown") {
-                  e.preventDefault();
-                  onArrowDown == null ? void 0 : onArrowDown();
-                }
-              },
-              className: inputClasses
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-test-id": "search-input-icon",
-              "data-slot": "search-input-icon",
-              className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[color:var(--deframe-widget-color-text-tertiary)]",
-              children: /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  width: "15",
-                  height: "15",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  "aria-hidden": "true",
-                  children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-                    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
-                  ]
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-SearchInput.displayName = "SearchInput";
-function FilterGroupBar({ groups, selected, onSelect }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-test-id": "filter-group-bar",
-      "data-slot": "filter-group-bar",
-      role: "tablist",
-      "aria-label": "Filtrar ativos",
-      className: "flex gap-[var(--deframe-widget-size-gap-sm)] overflow-x-auto [scrollbar-width:none] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)] flex-shrink-0",
-      children: groups.map((group) => /* @__PURE__ */ jsx(
-        FilterPill,
-        {
-          group,
-          isSelected: group.id === selected,
-          onSelect
-        },
-        group.id
-      ))
-    }
-  );
-}
-function FilterPill({ group, isSelected, onSelect }) {
-  const baseClasses = [
-    "inline-flex items-center",
-    "py-[6px] px-[14px]",
-    "rounded-[var(--deframe-widget-size-radius-full)]",
-    "text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)]",
-    "cursor-pointer",
-    "flex-shrink-0",
-    "whitespace-nowrap",
-    "outline-none",
-    "font-[var(--deframe-widget-font-family)]",
-    "transition-all duration-150",
-    "border"
-  ].join(" ");
-  const stateClasses = {
-    selected: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]",
-    default: "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)] text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]"
-  };
-  const pillClasses = twMerge(baseClasses, stateClasses[isSelected ? "selected" : "default"]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-test-id": "filter-pill",
-      "data-slot": "filter-pill",
-      role: "tab",
-      "aria-selected": isSelected,
-      onClick: () => onSelect(group.id),
-      className: pillClasses,
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-test-id": "filter-pill-label",
-          "data-slot": "filter-pill-label",
-          children: group.label
-        }
-      )
-    }
-  );
-}
-function parseUsd(s) {
-  if (!s) return -1;
-  const n = parseFloat(s.replace(/[$,\s]/g, ""));
-  return isNaN(n) ? -1 : n;
-}
-function useIsMobile(breakpoint = 640) {
-  const [isMobile, setIsMobile] = React6.useState(false);
-  React6.useEffect(() => {
-    const check = () => setIsMobile(window.innerWidth < breakpoint);
-    check();
-    window.addEventListener("resize", check);
-    return () => window.removeEventListener("resize", check);
-  }, [breakpoint]);
-  return isMobile;
-}
-var DEFAULT_FILTER_GROUPS = [
-  { id: "all", label: "All" },
-  { id: "most-used", label: "Most Used" },
-  { id: "stablecoin", label: "Stablecoins" }
-];
-function SearchAndAssets({
-  query,
-  setQuery,
-  searchRef,
-  assetListRef,
-  filtered,
-  isMobile,
-  onSelect,
-  handleAssetKeyDown,
-  activeTab,
-  onTabChange,
-  visibleChains,
-  filterGroups,
-  selectedFilter,
-  onFilterChange
-}) {
-  const tabPadding = isMobile ? "px-[var(--deframe-widget-size-padding-x-md)] pb-[10px] pt-[var(--deframe-widget-size-padding-y-none)]" : "px-[var(--deframe-widget-size-padding-x-md)] pb-[10px] pt-[var(--deframe-widget-size-padding-y-sm)]";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "search-and-assets",
-      "data-test-id": "search-and-assets",
-      className: "flex flex-col flex-1 overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "tab-switcher",
-            "data-test-id": "tab-switcher",
-            className: twMerge("flex-shrink-0", tabPadding),
-            children: /* @__PURE__ */ jsx(
-              SegmentedControl,
-              {
-                options: [
-                  { value: "crypto", label: "Crypto" },
-                  { value: "stock", label: "Stocks" }
-                ],
-                value: activeTab,
-                onChange: onTabChange,
-                variant: "outlined",
-                fullWidth: true
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "search-wrapper",
-            "data-test-id": "search-wrapper",
-            className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)] flex-shrink-0",
-            children: /* @__PURE__ */ jsx(
-              SearchInput,
-              {
-                ref: searchRef,
-                value: query,
-                onChange: setQuery,
-                onArrowDown: () => {
-                  var _a, _b;
-                  (_b = (_a = assetListRef.current) == null ? void 0 : _a.querySelector("[data-asset-index='0']")) == null ? void 0 : _b.focus();
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FilterGroupBar,
-          {
-            groups: filterGroups,
-            selected: selectedFilter,
-            onSelect: onFilterChange
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "section-label",
-            "data-test-id": "section-label",
-            className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xs)] flex-shrink-0 text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase",
-            children: activeTab === "stock" ? "A\xE7\xF5es" : "Ativos"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: assetListRef,
-            role: "listbox",
-            "aria-label": "Ativos dispon\xEDveis",
-            "data-slot": "asset-list",
-            "data-test-id": "asset-list",
-            className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-xs)]",
-            children: visibleChains.length === 0 ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-slot": "empty-state",
-                "data-test-id": "empty-state",
-                className: "py-[var(--deframe-widget-size-padding-y-xl)] px-[var(--deframe-widget-size-padding-x-md)] text-center",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)] mb-[var(--deframe-widget-size-gap-xs)]", children: activeTab === "stock" ? "Nenhuma a\xE7\xE3o dispon\xEDvel" : "Nenhum ativo dispon\xEDvel" }),
-                  /* @__PURE__ */ jsx("div", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: activeTab === "stock" ? "Mude para Crypto para ver as redes dispon\xEDveis" : "Nenhuma rede suportada encontrada" })
-                ]
-              }
-            ) : filtered.length === 0 ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-slot": "no-results",
-                "data-test-id": "no-results",
-                className: "py-[var(--deframe-widget-size-padding-y-xl)] px-[var(--deframe-widget-size-padding-x-md)] text-center text-[14px] text-[color:var(--deframe-widget-color-text-tertiary)]",
-                children: "Nenhum ativo encontrado"
-              }
-            ) : filtered.map((asset, i) => /* @__PURE__ */ jsx(
-              AssetRow,
-              {
-                asset,
-                first: i === 0 && !query,
-                onClick: () => onSelect(asset),
-                onKeyDown: (e) => handleAssetKeyDown(e, asset, i),
-                index: i
-              },
-              asset.id
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
-function BlockchainAssetSelector({
-  chains,
-  assets,
-  onSelect,
-  onClose,
-  defaultChain,
-  defaultTab,
-  filterGroups
-}) {
-  var _a;
-  const [activeTab, setActiveTab] = React6.useState(defaultTab != null ? defaultTab : "crypto");
-  const [query, setQuery] = React6.useState("");
-  const [selectedFilter, setSelectedFilter] = React6.useState("all");
-  const searchRef = React6.useRef(null);
-  const chainListRef = React6.useRef(null);
-  const assetListRef = React6.useRef(null);
-  const isMobile = useIsMobile();
-  const resolvedGroups = filterGroups != null ? filterGroups : DEFAULT_FILTER_GROUPS;
-  const visibleChains = chains.filter(
-    (c) => {
-      var _a2;
-      return ((_a2 = assets[c.id]) != null ? _a2 : []).some((a) => a.category === activeTab);
-    }
-  );
-  const [selectedChain, setSelectedChain] = React6.useState(() => {
-    var _a2, _b;
-    const preferred = chains.find((c) => c.id === defaultChain);
-    if (preferred && ((_a2 = assets[preferred.id]) != null ? _a2 : []).some((a) => a.category === (defaultTab != null ? defaultTab : "crypto"))) {
-      return preferred;
-    }
-    return (_b = visibleChains[0]) != null ? _b : chains[0];
-  });
-  const chainAssets = ((_a = assets[selectedChain.id]) != null ? _a : []).filter((a) => a.category === activeTab);
-  const filtered = chainAssets.filter((a) => {
-    var _a2, _b;
-    return selectedFilter === "all" || ((_b = (_a2 = a.tags) == null ? void 0 : _a2.includes(selectedFilter)) != null ? _b : false);
-  }).filter(
-    (a) => a.symbol.toLowerCase().includes(query.toLowerCase()) || a.name.toLowerCase().includes(query.toLowerCase())
-  ).sort((a, b) => parseUsd(b.balanceUsd) - parseUsd(a.balanceUsd));
-  React6.useEffect(() => {
-    setQuery("");
-    setSelectedFilter("all");
-    if (chainListRef.current) chainListRef.current.scrollLeft = 0;
-    const stillValid = visibleChains.find((c) => c.id === selectedChain.id);
-    if (!stillValid && visibleChains.length > 0) {
-      setSelectedChain(visibleChains[0]);
-    }
-  }, [activeTab]);
-  const handleChainSelect = React6.useCallback((chain) => {
-    var _a2;
-    setSelectedChain(chain);
-    setQuery("");
-    setSelectedFilter("all");
-    (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
-  }, []);
-  const handleTabChange = React6.useCallback((tab) => {
-    setActiveTab(tab);
-  }, []);
-  React6.useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-  React6.useEffect(() => {
-    var _a2;
-    (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
-  }, []);
-  const handleChainKeyDown = (e, chain, idx) => {
-    var _a2, _b, _c, _d;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleChainSelect(chain);
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      (_b = (_a2 = chainListRef.current) == null ? void 0 : _a2.querySelector(`[data-chain-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      (_d = (_c = chainListRef.current) == null ? void 0 : _c.querySelector(`[data-chain-index="${idx - 1}"]`)) == null ? void 0 : _d.focus();
-    }
-  };
-  const handleAssetKeyDown = (e, asset, idx) => {
-    var _a2, _b, _c, _d, _e;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onSelect(selectedChain, asset);
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      (_b = (_a2 = assetListRef.current) == null ? void 0 : _a2.querySelector(`[data-asset-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (idx === 0) {
-        (_c = searchRef.current) == null ? void 0 : _c.focus();
-        return;
-      }
-      (_e = (_d = assetListRef.current) == null ? void 0 : _d.querySelector(`[data-asset-index="${idx - 1}"]`)) == null ? void 0 : _e.focus();
-    }
-  };
-  const sharedSearchAssets = /* @__PURE__ */ jsx(
-    SearchAndAssets,
-    {
-      query,
-      setQuery,
-      searchRef,
-      assetListRef,
-      filtered,
-      isMobile,
-      onSelect: (asset) => onSelect(selectedChain, asset),
-      handleAssetKeyDown,
-      activeTab,
-      onTabChange: handleTabChange,
-      visibleChains,
-      filterGroups: resolvedGroups,
-      selectedFilter,
-      onFilterChange: setSelectedFilter
-    }
-  );
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.2 },
-        onClick: onClose,
-        "data-slot": "backdrop",
-        "data-test-id": "backdrop",
-        className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex flex-col justify-end",
-        children: /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-label": "Seletor de Blockchains e Ativos",
-            initial: { y: "100%" },
-            animate: { y: 0 },
-            exit: { y: "100%" },
-            transition: { type: "spring", stiffness: 320, damping: 32, mass: 0.8 },
-            onClick: (e) => e.stopPropagation(),
-            "data-slot": "sheet",
-            "data-test-id": "sheet",
-            className: [
-              "bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col overflow-hidden",
-              "rounded-t-[var(--deframe-widget-size-radius-lg)]",
-              "border border-[color:var(--deframe-widget-color-border-secondary)] border-b-0",
-              "shadow-[0_10px_30px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_22%,transparent)]",
-              "max-h-[88vh]"
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "drag-handle",
-                  "data-test-id": "drag-handle",
-                  className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 flex-shrink-0",
-                  children: /* @__PURE__ */ jsx("div", { className: "w-9 h-1 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-border-primary)]" })
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-slot": "sheet-header",
-                  "data-test-id": "sheet-header",
-                  className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-xs)].5 pr-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)].5 pl-[var(--deframe-widget-size-padding-x-md)] flex-shrink-0",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]", children: "Seletor de Blockchains e Ativos" }),
-                    /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-slot": "chain-section",
-                  "data-test-id": "chain-section",
-                  className: "flex-shrink-0 pb-[var(--deframe-widget-size-padding-y-sm)].5",
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]", children: "Redes" }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        ref: chainListRef,
-                        role: "listbox",
-                        "aria-label": "Redes",
-                        "data-slot": "chain-chip-list",
-                        "data-test-id": "chain-chip-list",
-                        className: "flex gap-[var(--deframe-widget-size-gap-sm)] overflow-x-auto px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xs)] [scrollbar-width:none]",
-                        children: visibleChains.map((chain) => /* @__PURE__ */ jsx(
-                          ChainChip,
-                          {
-                            chain,
-                            selected: selectedChain.id === chain.id,
-                            onClick: () => handleChainSelect(chain)
-                          },
-                          chain.id
-                        ))
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "sheet-body",
-                  "data-test-id": "sheet-body",
-                  className: "flex-1 flex flex-col overflow-hidden pt-[var(--deframe-widget-size-padding-y-xs)]",
-                  children: sharedSearchAssets
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      onClick: onClose,
-      "data-slot": "backdrop",
-      "data-test-id": "backdrop",
-      className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex items-center justify-center px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
-      children: /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": "Seletor de Blockchains e Ativos",
-          initial: { opacity: 0, scale: 0.96 },
-          animate: { opacity: 1, scale: 1 },
-          exit: { opacity: 0, scale: 0.96 },
-          transition: { duration: 0.2, ease: "easeOut" },
-          onClick: (e) => e.stopPropagation(),
-          "data-slot": "modal",
-          "data-test-id": "modal",
-          className: [
-            "w-[min(680px,calc(100vw-32px))]",
-            "max-h-[min(620px,calc(100vh-64px))]",
-            "bg-[var(--deframe-widget-color-bg-secondary)]",
-            "border border-[color:var(--deframe-widget-color-border-secondary)]",
-            "rounded-[var(--deframe-widget-size-radius-md)]",
-            "shadow-[0_20px_50px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_28%,transparent)]",
-            "flex flex-col overflow-hidden"
-          ].join(" "),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-slot": "modal-header",
-                "data-test-id": "modal-header",
-                className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-md)] pr-[var(--deframe-widget-size-padding-x-md)] pb-[14px] pl-[var(--deframe-widget-size-padding-x-md)] border-b border-[color:var(--deframe-widget-color-border-secondary)] flex-shrink-0",
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]", children: "Seletor de Blockchains e Ativos" }),
-                  /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-slot": "modal-body",
-                "data-test-id": "modal-body",
-                className: "flex flex-1 overflow-hidden",
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      "data-slot": "chain-sidebar",
-                      "data-test-id": "chain-sidebar",
-                      className: [
-                        "w-[210px] flex-shrink-0",
-                        "border-r border-[color:var(--deframe-widget-color-border-secondary)]",
-                        "bg-[var(--deframe-widget-color-bg-secondary)]",
-                        "flex flex-col overflow-hidden"
-                      ].join(" "),
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            "data-slot": "chain-sidebar-label",
-                            "data-test-id": "chain-sidebar-label",
-                            className: "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase",
-                            children: "Redes"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            ref: chainListRef,
-                            role: "listbox",
-                            "aria-label": "Redes",
-                            "data-slot": "chain-list",
-                            "data-test-id": "chain-list",
-                            className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-xs)]",
-                            children: visibleChains.map((chain, i) => /* @__PURE__ */ jsx(
-                              ChainRow,
-                              {
-                                chain,
-                                selected: selectedChain.id === chain.id,
-                                onClick: () => handleChainSelect(chain),
-                                onKeyDown: (e) => handleChainKeyDown(e, chain, i),
-                                index: i
-                              },
-                              chain.id
-                            ))
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      "data-slot": "asset-panel",
-                      "data-test-id": "asset-panel",
-                      className: "flex-1 flex flex-col overflow-hidden",
-                      children: sharedSearchAssets
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function AssetList(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      "data-slot": "asset-list",
-      "data-test-id": "asset-list",
-      className: twMerge(
-        "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",
-        className
-      )
-    }, props)
-  );
-}
-function AssetListHeader(_a) {
-  var _b = _a, { action, children, className } = _b, props = __objRest(_b, ["action", "children", "className"]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "asset-list-header",
-      "data-test-id": "asset-list-header",
-      className: twMerge("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)]", className)
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-[color:var(--deframe-widget-color-text-primary)] text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] leading-[1.3]", children }),
-        action != null && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: action })
-      ]
-    })
-  );
-}
-function AssetListFilter({ filters, selected, onSelect, className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "asset-list-filter",
-      "data-test-id": "asset-list-filter",
-      className: twMerge(
-        "flex items-center gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]",
-        "overflow-x-auto",
-        className
-      ),
-      style: { scrollbarWidth: "none" },
-      children: filters.map((filter) => {
-        const isSelected = filter.id === selected;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-slot": "asset-list-filter-pill",
-            "data-test-id": "asset-list-filter-pill",
-            onClick: () => onSelect(filter.id),
-            className: twMerge(
-              "inline-flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[5px]",
-              "rounded-[var(--deframe-widget-size-radius-full)] border",
-              "text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.4]",
-              "font-[var(--deframe-widget-font-family)]",
-              "cursor-pointer whitespace-nowrap flex-shrink-0",
-              "outline-none transition-all duration-150",
-              isSelected ? "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]" : "bg-transparent border-[color:var(--deframe-widget-color-border-secondary)] text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
-            ),
-            children: filter.label
-          },
-          filter.id
-        );
-      })
-    }
-  );
-}
-function AssetListColumns(_a) {
-  var _b = _a, {
-    labels = ["ATIVO", "TEND\xCANCIA", "SALDO"],
-    className
-  } = _b, props = __objRest(_b, [
-    "labels",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "asset-list-columns",
-      "data-test-id": "asset-list-columns",
-      className: twMerge(
-        "grid grid-cols-[1fr_auto_auto] gap-x-[var(--deframe-widget-size-gap-md)]",
-        "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)]",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4]", children: labels[0] }),
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4] text-center", children: labels[1] }),
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4] text-right", children: labels[2] })
-      ]
-    })
-  );
-}
-function AssetTrendBadge(_a) {
-  var _b = _a, { direction, value, className } = _b, props = __objRest(_b, ["direction", "value", "className"]);
-  const directionClasses = {
-    up: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]",
-    down: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] text-[color:var(--deframe-widget-color-state-error)]",
-    neutral: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)] border-[color:var(--deframe-widget-color-border-secondary)] text-[color:var(--deframe-widget-color-text-tertiary)]"
-  };
-  const arrowIcons = {
-    up: /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 1.5L9 7H1L5 1.5Z", fill: "currentColor" }) }),
-    down: /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 8.5L1 3H9L5 8.5Z", fill: "currentColor" }) }),
-    neutral: /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6H10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
-  };
-  return /* @__PURE__ */ jsxs(
-    "span",
-    __spreadProps(__spreadValues({
-      "data-slot": "asset-trend-badge",
-      "data-test-id": "asset-trend-badge",
-      className: twMerge(
-        "inline-flex items-center gap-[3px]",
-        "px-[7px] py-[3px]",
-        "rounded-[var(--deframe-widget-size-radius-full)] border",
-        "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.4]",
-        "font-[var(--deframe-widget-font-family)]",
-        "whitespace-nowrap",
-        directionClasses[direction],
-        className
-      )
-    }, props), {
-      children: [
-        arrowIcons[direction],
-        value
-      ]
-    })
-  );
-}
-function AssetListItem(_a) {
-  var _b = _a, {
-    asset,
-    name,
-    symbol,
-    trendDirection,
-    trendValue,
-    balance,
-    balanceUsd,
-    className
-  } = _b, props = __objRest(_b, [
-    "asset",
-    "name",
-    "symbol",
-    "trendDirection",
-    "trendValue",
-    "balance",
-    "balanceUsd",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "asset-list-item",
-      "data-test-id": "asset-list-item",
-      className: twMerge(
-        "grid grid-cols-[1fr_auto_auto] gap-x-[var(--deframe-widget-size-gap-md)] items-center",
-        "px-[var(--deframe-widget-size-padding-x-md)] py-[11px]",
-        "border-t border-[color:var(--deframe-widget-color-border-secondary)]",
-        "transition-colors duration-150",
-        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
-          /* @__PURE__ */ jsx(IconCircle, { item: asset, size: 36 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[1.3] font-[var(--deframe-widget-font-family)] truncate", children: name }),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]", children: symbol })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(AssetTrendBadge, { direction: trendDirection, value: trendValue }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-right", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[1.3] font-[var(--deframe-widget-font-family)]", children: balanceUsd }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]", children: balance })
-        ] })
-      ]
-    })
-  );
-}
-var riskConfig = {
-  low: {
-    label: "Baixo",
-    wrapperClass: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-brand-primary)]",
-    labelClass: "text-[color:var(--deframe-widget-color-brand-primary)]"
-  },
-  medium: {
-    label: "M\xE9dio",
-    wrapperClass: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-state-warning)]",
-    labelClass: "text-[color:var(--deframe-widget-color-state-warning)]"
-  },
-  high: {
-    label: "Alto",
-    wrapperClass: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]",
-    dotClass: "bg-[var(--deframe-widget-color-state-error)]",
-    labelClass: "text-[color:var(--deframe-widget-color-state-error)]"
-  }
-};
-function StrategyList(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      "data-slot": "strategy-list",
-      "data-test-id": "strategy-list",
-      className: twMerge("w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", className)
-    }, props)
-  );
-}
-function StrategyListHeader(_a) {
-  var _b = _a, {
-    onBack,
-    subtitle,
-    children,
-    className
-  } = _b, props = __objRest(_b, [
-    "onBack",
-    "subtitle",
-    "children",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "strategy-list-header",
-      "data-test-id": "strategy-list-header",
-      className: twMerge("w-full flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", className)
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
-          onBack != null && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onBack,
-              "aria-label": "Voltar",
-              className: twMerge(
-                "flex items-center justify-center",
-                "w-8 h-8",
-                "rounded-[var(--deframe-widget-size-radius-sm)]",
-                "border border-[color:var(--deframe-widget-color-border-secondary)]",
-                "text-[color:var(--deframe-widget-color-text-secondary)]",
-                "hover:text-[color:var(--deframe-widget-color-text-primary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]",
-                "transition-all duration-150",
-                "cursor-pointer flex-shrink-0 outline-none"
-              ),
-              children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx("h2", { className: "text-[color:var(--deframe-widget-color-text-primary)] text-[17px] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] leading-[1.3]", children })
-        ] }),
-        subtitle != null && /* @__PURE__ */ jsx("p", { className: "text-[color:var(--deframe-widget-color-text-secondary)] text-[13px] font-[var(--deframe-widget-font-family)] leading-[1.5]", children: subtitle })
-      ]
-    })
-  );
-}
-function StrategyRiskBadge(_a) {
-  var _b = _a, { risk, label, className } = _b, props = __objRest(_b, ["risk", "label", "className"]);
-  const config = riskConfig[risk];
-  const displayLabel = label != null ? label : config.label;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    __spreadProps(__spreadValues({
-      "data-slot": "strategy-risk-badge",
-      "data-test-id": "strategy-risk-badge",
-      className: twMerge(
-        "inline-flex items-center gap-[5px]",
-        "py-[3px] pr-[10px] pl-[7px]",
-        "rounded-[var(--deframe-widget-size-radius-full)] border",
-        config.wrapperClass,
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: twMerge("w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 inline-block", config.dotClass)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: twMerge(
-              "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)]",
-              config.labelClass
-            ),
-            children: displayLabel
-          }
-        )
-      ]
-    })
-  );
-}
-function StrategyListItem(_a) {
-  var _b = _a, {
-    strategy,
-    name,
-    network,
-    rendimento,
-    risk,
-    onInvestir,
-    onSacar,
-    showSacar = true,
-    className
-  } = _b, props = __objRest(_b, [
-    "strategy",
-    "name",
-    "network",
-    "rendimento",
-    "risk",
-    "onInvestir",
-    "onSacar",
-    "showSacar",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "strategy-list-item",
-      "data-test-id": "strategy-list-item",
-      className: twMerge(
-        "w-full flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
-        "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
-        "rounded-[var(--deframe-widget-size-radius-md)]",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
-          /* @__PURE__ */ jsx(IconCircle, { item: strategy, size: 40 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[1.3] font-[var(--deframe-widget-font-family)] truncate", children: name }),
-            network != null && /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]", children: network })
-          ] }),
-          risk != null && /* @__PURE__ */ jsx(StrategyRiskBadge, { risk })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "w-full flex items-baseline gap-[var(--deframe-widget-size-gap-sm)]", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "Rendimento" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[22px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-family)] leading-[1.1]", children: rendimento })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
-          /* @__PURE__ */ jsx(
-            PrimaryButton,
-            {
-              className: "h-9 text-[13px] flex-1",
-              onClick: onInvestir,
-              children: "Investir"
-            }
-          ),
-          showSacar && /* @__PURE__ */ jsx(
-            SecondaryButton,
-            {
-              className: "h-9 text-[13px] flex-1",
-              onClick: onSacar,
-              children: "Sacar"
-            }
-          )
-        ] })
-      ]
-    })
-  );
-}
-function TokenIcon({ token, size = 40, badge, badgeSize = 18, className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "token-icon",
-      "data-slot": "token-icon",
-      className: twMerge("relative flex-shrink-0", className),
-      style: { width: size, height: size },
-      children: [
-        /* @__PURE__ */ jsx(
-          IconCircle,
-          {
-            "data-test-id": "token-icon-circle",
-            "data-slot": "token-icon-circle",
-            item: token,
-            size
-          }
-        ),
-        badge && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "token-icon-badge",
-            "data-slot": "token-icon-badge",
-            className: "absolute -bottom-0.5 -right-0.5 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
-            children: /* @__PURE__ */ jsx(
-              IconCircle,
-              {
-                "data-test-id": "token-icon-badge-circle",
-                "data-slot": "token-icon-badge-circle",
-                item: badge,
-                size: badgeSize
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function PercentageChips({
-  options = [25, 50, 75, 100],
-  maxLabel = "M\xE1x.",
-  selected = null,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-test-id": "percentage-chips",
-      "data-slot": "percentage-chips",
-      className: "flex gap-[6px] items-center",
-      children: options.map((pct, i) => {
-        const isLast = i === options.length - 1;
-        const isActive = pct === selected;
-        const label = isLast ? maxLabel : `${pct}%`;
-        return /* @__PURE__ */ jsx(
-          ChipPill,
-          {
-            label,
-            active: isActive,
-            onClick: () => onSelect(pct)
-          },
-          pct
-        );
-      })
-    }
-  );
-}
-function ChipPill({ label, active, onClick }) {
-  const baseClasses = [
-    "inline-flex items-center justify-center",
-    "py-[3px] px-[10px]",
-    "rounded-[var(--deframe-widget-size-radius-full)]",
-    "cursor-pointer",
-    "text-[12px]",
-    "transition-all duration-150",
-    "outline-none",
-    "font-[var(--deframe-widget-font-family)]",
-    "whitespace-nowrap",
-    "border"
-  ].join(" ");
-  const stateClasses = {
-    active: [
-      "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
-      "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
-      "text-[color:var(--deframe-widget-color-brand-primary)]",
-      "[font-weight:var(--deframe-widget-font-weight-semibold)]"
-    ].join(" "),
-    default: [
-      "border-[color:var(--deframe-widget-color-border-secondary)]",
-      "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
-      "text-[color:var(--deframe-widget-color-text-secondary)]",
-      "[font-weight:var(--deframe-widget-font-weight-regular)]",
-      "hover:border-[color:var(--deframe-widget-color-border-primary)]",
-      "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
-      "hover:text-[color:var(--deframe-widget-color-text-primary)]"
-    ].join(" ")
-  };
-  const chipClasses = twMerge(baseClasses, stateClasses[active ? "active" : "default"]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-test-id": "chip-pill",
-      "data-slot": "chip-pill",
-      onClick,
-      className: chipClasses,
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-test-id": "chip-pill-label",
-          "data-slot": "chip-pill-label",
-          children: label
-        }
-      )
-    }
-  );
-}
-var variantClasses = {
-  error: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]"
-  },
-  warning: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)]"
-  },
-  info: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_32%,transparent)]"
-  },
-  success: {
-    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]"
-  }
-};
-var variantData = {
-  error: {
-    accentClass: "bg-[var(--deframe-widget-color-state-error)]",
-    actionClass: "text-[color:var(--deframe-widget-color-state-error)]"
-  },
-  warning: {
-    accentClass: "bg-[var(--deframe-widget-color-state-warning)]",
-    actionClass: "text-[color:var(--deframe-widget-color-state-warning)]"
-  },
-  info: {
-    accentClass: "bg-[var(--deframe-widget-color-state-info)]",
-    actionClass: "text-[color:var(--deframe-widget-color-state-info)]"
-  },
-  success: {
-    accentClass: "bg-[var(--deframe-widget-color-brand-primary)]",
-    actionClass: "text-[color:var(--deframe-widget-color-brand-primary)]"
-  }
-};
-function InlineNotification({
-  variant,
-  message,
-  action,
-  onDismiss
-}) {
-  const { wrapper } = variantClasses[variant];
-  const { accentClass, actionClass } = variantData[variant];
-  const wrapperClasses = twMerge(
-    "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
-    "py-[7px] pr-[10px] pl-[14px]",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "border",
-    "overflow-hidden",
-    wrapper
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "inline-notification",
-      "data-slot": "inline-notification",
-      role: "alert",
-      className: wrapperClasses,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "inline-notification-accent",
-            "data-slot": "inline-notification-accent",
-            className: twMerge(
-              "absolute left-0 top-0 bottom-0 w-[3px] rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
-              accentClass
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "inline-notification-dot",
-            "data-slot": "inline-notification-dot",
-            className: twMerge("w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0", accentClass)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-test-id": "inline-notification-message",
-            "data-slot": "inline-notification-message",
-            className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
-            children: message
-          }
-        ),
-        action && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "data-test-id": "inline-notification-action",
-            "data-slot": "inline-notification-action",
-            onClick: () => action.onClick(),
-            className: twMerge(
-              "flex-shrink-0 bg-none border-none cursor-pointer text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] py-[var(--deframe-widget-size-padding-y-none)] px-[var(--deframe-widget-size-padding-x-xs)] outline-none font-[var(--deframe-widget-font-family)] whitespace-nowrap",
-              actionClass
-            ),
-            children: [
-              action.label,
-              " \u2192"
-            ]
-          }
-        ),
-        onDismiss && /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-test-id": "inline-notification-dismiss",
-            "data-slot": "inline-notification-dismiss",
-            onClick: onDismiss,
-            "aria-label": "Dismiss notification",
-            className: "flex-shrink-0 bg-none border-none cursor-pointer text-[color:var(--deframe-widget-color-text-tertiary)] py-[var(--deframe-widget-size-padding-y-none)] px-[var(--deframe-widget-size-padding-x-none)].5 outline-none flex items-center",
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                width: "12",
-                height: "12",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2.5",
-                strokeLinecap: "round",
-                "aria-hidden": "true",
-                children: [
-                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function TokenSelector({ token, onClick, disabled = false }) {
-  var _a;
-  const badge = token.network ? {
-    name: token.network,
-    color: (_a = token.networkColor) != null ? _a : "var(--deframe-widget-color-brand-secondary)",
-    iconUrl: token.networkIconUrl
-  } : void 0;
-  const baseClasses = [
-    "inline-flex items-center gap-[10px]",
-    "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "bg-[var(--deframe-widget-color-bg-secondary)]",
-    "border-none",
-    "outline-none",
-    "transition-[background] duration-150",
-    "flex-shrink-0",
-    disabled ? "cursor-default" : "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
-  ].join(" ");
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      "data-test-id": "token-selector",
-      "data-slot": "token-selector",
-      onClick: !disabled ? onClick : void 0,
-      disabled,
-      "aria-label": `Select token \u2014 currently ${token.symbol} on ${token.network}`,
-      className: twMerge(baseClasses),
-      children: [
-        /* @__PURE__ */ jsx(
-          TokenIcon,
-          {
-            "data-test-id": "token-selector-icon",
-            "data-slot": "token-selector-icon",
-            token,
-            size: 38,
-            badge,
-            badgeSize: 16
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "token-selector-info",
-            "data-slot": "token-selector-info",
-            className: "flex flex-col items-start min-w-0",
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-test-id": "token-selector-symbol",
-                  "data-slot": "token-selector-symbol",
-                  className: [
-                    "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2]",
-                    "font-[var(--deframe-widget-font-family)]",
-                    disabled ? "text-[color:var(--deframe-widget-color-text-secondary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
-                  ].join(" "),
-                  children: token.symbol
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-test-id": "token-selector-network",
-                  "data-slot": "token-selector-network",
-                  className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]",
-                  children: token.network
-                }
-              )
-            ]
-          }
-        ),
-        !disabled && /* @__PURE__ */ jsx(
-          "svg",
-          {
-            "data-test-id": "token-selector-chevron",
-            "data-slot": "token-selector-chevron",
-            width: "14",
-            height: "14",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-          }
-        )
-      ]
-    }
-  );
-}
-function AmountInput({
-  value,
-  onChange,
-  conversionUsd,
-  readOnly = false,
-  disabled = false
-}) {
-  const isEmpty = !value || value === "0" || value === "";
-  const inputClasses = [
-    "bg-transparent border-none outline-none",
-    "text-right",
-    "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
-    "w-full px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
-    "font-[var(--deframe-widget-font-family)]",
-    isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]",
-    readOnly || disabled ? "cursor-default" : "cursor-text"
-  ].join(" ");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "amount-input-wrapper",
-      "data-slot": "amount-input-wrapper",
-      className: "flex flex-col items-end flex-1 min-w-0",
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            "data-test-id": "amount-input",
-            "data-slot": "amount-input",
-            type: "text",
-            inputMode: "decimal",
-            value: value || "",
-            readOnly,
-            disabled,
-            placeholder: "0",
-            onChange: (e) => {
-              const v = e.target.value;
-              if (/^[0-9]*\.?[0-9]*$/.test(v) || v === "") {
-                onChange(v);
-              }
-            },
-            className: twMerge(inputClasses)
-          }
-        ),
-        conversionUsd && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-test-id": "amount-input-conversion",
-            "data-slot": "amount-input-conversion",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] mt-[var(--deframe-widget-size-gap-none)].5 font-[var(--deframe-widget-font-family)]",
-            children: conversionUsd
-          }
-        )
-      ]
-    }
-  );
-}
-function SwapDirectionButton({ onClick, disabled = false }) {
-  const [hovered, setHovered] = React6.useState(false);
-  const baseClasses = [
-    "inline-flex items-center justify-center",
-    "w-10 h-10",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "bg-[var(--deframe-widget-color-bg-secondary)]",
-    "border border-[color:var(--deframe-widget-color-border-secondary)]",
-    "outline-none",
-    "flex-shrink-0",
-    "shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)]",
-    disabled ? "cursor-default text-[color:var(--deframe-widget-color-text-tertiary)]" : "cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]"
-  ].join(" ");
-  return /* @__PURE__ */ jsx(
-    motion.button,
-    {
-      "data-test-id": "swap-direction-button",
-      "data-slot": "swap-direction-button",
-      onClick: !disabled ? onClick : void 0,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      disabled,
-      animate: { rotate: hovered ? 180 : 0 },
-      transition: { duration: 0.25, ease: "easeInOut" },
-      "aria-label": "Swap direction",
-      className: twMerge(baseClasses),
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          "data-test-id": "swap-direction-button-icon",
-          "data-slot": "swap-direction-button-icon",
-          width: "18",
-          height: "18",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-            /* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
-          ]
-        }
-      )
-    }
-  );
-}
-function TokenInputCard({
-  token,
-  amount,
-  onAmountChange,
-  balance,
-  balanceSymbol,
-  conversionUsd,
-  onTokenSelect,
-  readOnly = false,
-  error = null,
-  onHoverChange,
-  chipsSlot
-}) {
-  const hasError = error === "insufficient_balance";
-  const wrapperClasses = twMerge(
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "border",
-    "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
-    "transition-[border-color,background] duration-200",
-    hasError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "token-input-card",
-      "data-slot": "token-input-card",
-      onMouseEnter: () => onHoverChange == null ? void 0 : onHoverChange(true),
-      onMouseLeave: () => onHoverChange == null ? void 0 : onHoverChange(false),
-      className: wrapperClasses,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "token-input-card-top-row",
-            "data-slot": "token-input-card-top-row",
-            className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
-            children: [
-              /* @__PURE__ */ jsx(
-                TokenSelector,
-                {
-                  "data-test-id": "token-input-card-selector",
-                  "data-slot": "token-input-card-selector",
-                  token,
-                  onClick: onTokenSelect,
-                  disabled: !onTokenSelect
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-test-id": "token-input-card-divider",
-                  "data-slot": "token-input-card-divider",
-                  className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AmountInput,
-                {
-                  "data-test-id": "token-input-card-amount",
-                  "data-slot": "token-input-card-amount",
-                  value: amount,
-                  onChange: onAmountChange != null ? onAmountChange : (() => {
-                  }),
-                  conversionUsd,
-                  readOnly,
-                  disabled: !onAmountChange && !readOnly
-                }
-              )
-            ]
-          }
-        ),
-        (balance !== void 0 || balanceSymbol) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "token-input-card-balance-row",
-            "data-slot": "token-input-card-balance-row",
-            className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
-            children: /* @__PURE__ */ jsxs(
-              "span",
-              {
-                "data-test-id": "token-input-card-balance-label",
-                "data-slot": "token-input-card-balance-label",
-                className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
-                children: [
-                  "Saldo:",
-                  " ",
-                  /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      "data-test-id": "token-input-card-balance-value",
-                      "data-slot": "token-input-card-balance-value",
-                      className: hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
-                      children: [
-                        balance != null ? balance : "0",
-                        " ",
-                        balanceSymbol != null ? balanceSymbol : token.symbol
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        chipsSlot && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "token-input-card-chips-slot",
-            "data-slot": "token-input-card-chips-slot",
-            className: "mt-[var(--deframe-widget-size-gap-sm)]",
-            children: chipsSlot
-          }
-        ),
-        hasError && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "token-input-card-error",
-            "data-slot": "token-input-card-error",
-            className: "mt-[var(--deframe-widget-size-gap-sm)]",
-            children: /* @__PURE__ */ jsx(
-              InlineNotification,
-              {
-                variant: "error",
-                message: "Saldo insuficiente para realizar a troca.",
-                action: {
-                  label: "Adicionar via PIX",
-                  onClick: () => {
-                  }
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/stories/blockchain-asset-selector/tokens.ts
-var T = {
-  bgLeft: "var(--deframe-widget-color-bg-secondary)",
-  border: "var(--deframe-widget-color-border-secondary)",
-  textPrimary: "var(--deframe-widget-color-text-primary)",
-  textSecondary: "var(--deframe-widget-color-text-secondary)",
-  green: "var(--deframe-widget-color-brand-primary)",
-  radiusModal: "var(--deframe-widget-size-radius-md)"};
-var SWAP_FEEDBACK_DEFAULTS = {
-  loading: {
-    title: "PROCESSANDO TRANSA\xC7\xC3O...",
-    subtitle: "Aguarde enquanto sua troca \xE9 confirmada."
-  },
-  success: {
-    title: "Troca Aprovada!",
-    subtitle: "Seu saldo foi atualizado."
-  },
-  error: {
-    title: "Troca Falhou",
-    subtitle: "Tente novamente mais tarde."
-  }
-};
-function SwapFeedbackOverlay({
-  variant,
-  title,
-  subtitle,
-  standalone = false
-}) {
-  const defaults = SWAP_FEEDBACK_DEFAULTS[variant];
-  const resolvedTitle = title != null ? title : defaults.title;
-  const resolvedSubtitle = subtitle != null ? subtitle : defaults.subtitle;
-  const isLoading = variant === "loading";
-  const overlay = /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      "data-test-id": "swap-feedback-overlay",
-      "data-slot": "swap-feedback-overlay",
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      style: {
-        position: standalone ? "relative" : "absolute",
-        inset: standalone ? void 0 : 0,
-        borderRadius: "inherit",
-        backdropFilter: "blur(12px)",
-        WebkitBackdropFilter: "blur(12px)",
-        background: "color-mix(in srgb, var(--deframe-widget-color-bg-primary) 88%, transparent)",
-        zIndex: 10,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 24,
-        padding: standalone ? "52px 32px" : "36px 24px",
-        fontFamily: "var(--deframe-widget-font-family)"
-      },
-      children: [
-        isLoading && /* @__PURE__ */ jsx(LoadingIcon, {}),
-        variant === "success" && /* @__PURE__ */ jsx(SuccessIcon, {}),
-        variant === "error" && /* @__PURE__ */ jsx(ErrorIcon, {}),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "swap-feedback-text",
-            "data-slot": "swap-feedback-text",
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 8,
-              textAlign: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-test-id": "swap-feedback-title",
-                  "data-slot": "swap-feedback-title",
-                  style: {
-                    fontSize: isLoading ? 12 : 22,
-                    fontWeight: isLoading ? 600 : 700,
-                    letterSpacing: isLoading ? "0.10em" : void 0,
-                    textTransform: isLoading ? "uppercase" : void 0,
-                    color: isLoading ? T.green : T.textPrimary,
-                    lineHeight: 1.25
-                  },
-                  children: resolvedTitle
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-test-id": "swap-feedback-subtitle",
-                  "data-slot": "swap-feedback-subtitle",
-                  style: {
-                    fontSize: 14,
-                    fontWeight: 400,
-                    color: T.textSecondary,
-                    lineHeight: 1.6,
-                    maxWidth: 260
-                  },
-                  children: resolvedSubtitle
-                }
-              )
-            ]
-          }
-        )
-      ]
-    },
-    "swap-feedback-overlay"
-  );
-  if (standalone) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          width: "100%",
-          borderRadius: T.radiusModal,
-          overflow: "hidden",
-          border: `1px solid ${T.border}`,
-          background: T.bgLeft
-        },
-        children: overlay
-      }
-    );
-  }
-  return overlay;
-}
-function LoadingIcon() {
-  const green = T.green;
-  const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
-  const sw = 2.8;
-  const aw = 2.4;
-  return /* @__PURE__ */ jsxs(
-    motion.svg,
-    {
-      "data-test-id": "swap-feedback-loading-icon",
-      "data-slot": "swap-feedback-loading-icon",
-      width: "56",
-      height: "56",
-      viewBox: "0 0 56 56",
-      fill: "none",
-      "aria-hidden": "true",
-      animate: { rotate: 360 },
-      transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
-            stroke: green,
-            strokeWidth: sw,
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
-            stroke: green,
-            strokeWidth: aw,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 49.25 33.69 A 22 22 0 0 1 6.75 33.69",
-            stroke: green,
-            strokeWidth: sw,
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 11.0 37.9 L 6.75 33.69 L 5.0 39.5",
-            stroke: green,
-            strokeWidth: aw,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-function SuccessIcon() {
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      "data-test-id": "swap-feedback-success-icon",
-      "data-slot": "swap-feedback-success-icon",
-      initial: { scale: 0.55, opacity: 0 },
-      animate: { scale: 1, opacity: 1 },
-      transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
-      style: {
-        width: 84,
-        height: 84,
-        borderRadius: "50%",
-        background: "var(--deframe-widget-color-state-success)",
-        boxShadow: "0 0 0 10px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent), 0 0 32px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 22%, transparent)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ jsx("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-        motion.path,
-        {
-          d: "M10 22 L18 30 L34 14",
-          stroke: "white",
-          strokeWidth: "3.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          initial: { pathLength: 0 },
-          animate: { pathLength: 1 },
-          transition: { duration: 0.45, delay: 0.2, ease: "easeOut" }
-        }
-      ) })
-    }
-  );
-}
-var ERROR_RED = "var(--deframe-widget-color-state-error)";
-function ErrorIcon() {
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      "data-test-id": "swap-feedback-error-icon",
-      "data-slot": "swap-feedback-error-icon",
-      initial: { scale: 0.55, opacity: 0 },
-      animate: { scale: 1, opacity: 1 },
-      transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
-      style: {
-        width: 84,
-        height: 84,
-        borderRadius: "50%",
-        background: ERROR_RED,
-        boxShadow: "0 0 0 10px color-mix(in srgb, var(--deframe-widget-color-state-error) 12%, transparent), 0 0 32px color-mix(in srgb, var(--deframe-widget-color-state-error) 22%, transparent)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ jsxs("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx(
-          motion.line,
-          {
-            x1: "14",
-            y1: "14",
-            x2: "30",
-            y2: "30",
-            stroke: "white",
-            strokeWidth: "3.5",
-            strokeLinecap: "round",
-            initial: { pathLength: 0 },
-            animate: { pathLength: 1 },
-            transition: { duration: 0.25, delay: 0.2, ease: "easeOut" }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          motion.line,
-          {
-            x1: "30",
-            y1: "14",
-            x2: "14",
-            y2: "30",
-            stroke: "white",
-            strokeWidth: "3.5",
-            strokeLinecap: "round",
-            initial: { pathLength: 0 },
-            animate: { pathLength: 1 },
-            transition: { duration: 0.25, delay: 0.38, ease: "easeOut" }
-          }
-        )
-      ] })
-    }
-  );
-}
-function SwapPanel({
-  fromToken,
-  toToken,
-  fromAmount,
-  toAmount,
-  onFromAmountChange,
-  onFromPercentageSelect,
-  onFromTokenSelect,
-  onToTokenSelect,
-  onSwapTokens,
-  fromBalance,
-  fromBalanceSymbol,
-  toBalance,
-  toBalanceSymbol,
-  fromConversionUsd,
-  toConversionUsd,
-  onSubmit,
-  submitLabel = "Revisar Troca",
-  submitDisabled = false,
-  onHistory,
-  onAdvanced,
-  loading = false,
-  error = null,
-  feedback = null
-}) {
-  const [fromCardHovered, setFromCardHovered] = React6.useState(false);
-  const [selectedPct, setSelectedPct] = React6.useState(null);
-  const hideTimerRef = React6.useRef(void 0);
-  function handleHoverStart() {
-    clearTimeout(hideTimerRef.current);
-    setFromCardHovered(true);
-  }
-  function handleHoverEnd() {
-    hideTimerRef.current = setTimeout(() => setFromCardHovered(false), 150);
-  }
-  React6.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
-  const isSubmitDisabled = submitDisabled || loading || !fromAmount || fromAmount === "0" || fromAmount === "";
-  function handlePctSelect(pct) {
-    setSelectedPct(pct);
-    onFromPercentageSelect == null ? void 0 : onFromPercentageSelect(pct);
-    if (!fromBalance) return;
-    const bal = parseFloat(fromBalance.replace(/[^\d.]/g, ""));
-    if (isNaN(bal)) return;
-    const computed = (bal * pct / 100).toFixed(6).replace(/\.?0+$/, "");
-    onFromAmountChange(computed);
-  }
-  const submitClasses = twMerge(
-    "mt-[10px] w-full h-12",
-    "rounded-[var(--deframe-widget-size-radius-sm)]",
-    "border-none",
-    "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
-    "transition-[background,color] duration-200",
-    "flex items-center justify-center gap-[var(--deframe-widget-size-gap-sm)]",
-    "font-[var(--deframe-widget-font-family)]",
-    isSubmitDisabled ? "bg-[var(--deframe-widget-color-brand-primary-disabled)] text-[color:var(--deframe-widget-color-text-primary-disabled)] cursor-not-allowed" : "bg-[var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-text-primary-dark)] cursor-pointer"
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "swap-panel",
-      "data-slot": "swap-panel",
-      className: "relative bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col w-full max-w-[480px] box-border font-[var(--deframe-widget-font-family)]",
-      children: [
-        onHistory && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "swap-panel-top-row",
-            "data-slot": "swap-panel-top-row",
-            className: "flex items-center justify-end mb-[var(--deframe-widget-size-gap-sm)]",
-            children: /* @__PURE__ */ jsx(HistoryButton, { onClick: onHistory })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TokenInputCard,
-          {
-            token: {
-              name: fromToken.name,
-              symbol: fromToken.symbol,
-              color: fromToken.color,
-              iconUrl: fromToken.iconUrl,
-              network: fromToken.network,
-              networkColor: fromToken.networkColor,
-              networkIconUrl: fromToken.networkIconUrl
-            },
-            amount: fromAmount,
-            onAmountChange: (v) => {
-              setSelectedPct(null);
-              onFromAmountChange(v);
-            },
-            balance: fromBalance,
-            balanceSymbol: fromBalanceSymbol,
-            conversionUsd: fromConversionUsd,
-            onTokenSelect: onFromTokenSelect,
-            error,
-            onHoverChange: (h) => h ? handleHoverStart() : handleHoverEnd(),
-            chipsSlot: /* @__PURE__ */ jsx(AnimatePresence, { children: fromCardHovered && /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                "data-test-id": "swap-panel-pct-chips",
-                "data-slot": "swap-panel-pct-chips",
-                initial: { opacity: 0, y: -4 },
-                animate: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: -4 },
-                transition: { duration: 0.15 },
-                children: /* @__PURE__ */ jsx(
-                  PercentageChips,
-                  {
-                    selected: selectedPct,
-                    onSelect: handlePctSelect
-                  }
-                )
-              },
-              "pct-chips"
-            ) })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "swap-panel-direction-row",
-            "data-slot": "swap-panel-direction-row",
-            className: "flex justify-center relative -my-[var(--deframe-widget-size-gap-sm)] z-[1]",
-            children: /* @__PURE__ */ jsx(SwapDirectionButton, { onClick: onSwapTokens, disabled: !onSwapTokens })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TokenInputCard,
-          {
-            token: {
-              name: toToken.name,
-              symbol: toToken.symbol,
-              color: toToken.color,
-              iconUrl: toToken.iconUrl,
-              network: toToken.network,
-              networkColor: toToken.networkColor,
-              networkIconUrl: toToken.networkIconUrl
-            },
-            amount: toAmount,
-            balance: toBalance,
-            balanceSymbol: toBalanceSymbol,
-            conversionUsd: toConversionUsd,
-            onTokenSelect: onToTokenSelect,
-            readOnly: true
-          }
-        ),
-        onAdvanced && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "swap-panel-advanced-row",
-            "data-slot": "swap-panel-advanced-row",
-            className: "flex justify-end mt-[var(--deframe-widget-size-gap-sm)]",
-            children: /* @__PURE__ */ jsx(AdvancedButton, { onClick: onAdvanced })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-test-id": "swap-panel-submit",
-            "data-slot": "swap-panel-submit",
-            onClick: !isSubmitDisabled ? onSubmit : void 0,
-            disabled: isSubmitDisabled,
-            title: error === "insufficient_balance" ? "Adicione fundos para continuar" : void 0,
-            className: submitClasses,
-            children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : submitLabel
-          }
-        ),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: feedback && /* @__PURE__ */ jsx(
-          SwapFeedbackOverlay,
-          {
-            variant: feedback.variant,
-            title: feedback.title,
-            subtitle: feedback.subtitle
-          },
-          feedback.variant
-        ) })
-      ]
-    }
-  );
-}
-function HistoryButton({ onClick }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-test-id": "history-button",
-      "data-slot": "history-button",
-      onClick,
-      "aria-label": "Hist\xF3rico de transa\xE7\xF5es",
-      className: twMerge(
-        "inline-flex items-center justify-center",
-        "w-9 h-9",
-        "rounded-[var(--deframe-widget-size-radius-sm)]",
-        "border-none",
-        "cursor-pointer",
-        "bg-transparent",
-        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
-        "transition-[background] duration-150",
-        "flex-shrink-0",
-        "outline-none",
-        "text-[color:var(--deframe-widget-color-text-secondary)]"
-      ),
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          "data-test-id": "history-button-icon",
-          "data-slot": "history-button-icon",
-          viewBox: "0 0 24 24",
-          width: "20",
-          height: "20",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
-          ]
-        }
-      )
-    }
-  );
-}
-function AdvancedButton({ onClick }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      "data-test-id": "advanced-button",
-      "data-slot": "advanced-button",
-      onClick,
-      className: twMerge(
-        "inline-flex items-center gap-[5px]",
-        "py-[5px] px-[var(--deframe-widget-size-padding-x-sm)]",
-        "rounded-[var(--deframe-widget-size-radius-full)]",
-        "border border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
-        "bg-transparent",
-        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
-        "cursor-pointer",
-        "text-[color:var(--deframe-widget-color-brand-primary)]",
-        "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
-        "outline-none",
-        "font-[inherit]",
-        "transition-[background] duration-150",
-        "flex-shrink-0"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "data-test-id": "advanced-button-icon",
-            "data-slot": "advanced-button-icon",
-            width: "13",
-            height: "13",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
-              /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
-              /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
-              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "6", r: "2", fill: "currentColor", stroke: "none" }),
-              /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor", stroke: "none" }),
-              /* @__PURE__ */ jsx("circle", { cx: "10", cy: "18", r: "2", fill: "currentColor", stroke: "none" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-test-id": "advanced-button-label",
-            "data-slot": "advanced-button-label",
-            children: "Avan\xE7ado"
-          }
-        )
-      ]
-    }
-  );
-}
-function Spinner() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      "data-test-id": "spinner",
-      "data-slot": "spinner",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.5",
-      strokeLinecap: "round",
-      className: "animate-spin",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", opacity: "0.3" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 2 A10 10 0 0 1 22 12" })
-      ]
-    }
-  );
-}
-function TransactionDetailRow({
-  label,
-  value,
-  valueColor,
-  divider = false
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-test-id": "transaction-detail-row",
-        "data-slot": "transaction-detail-row",
-        className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-test-id": "transaction-detail-row-label",
-              "data-slot": "transaction-detail-row-label",
-              className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] flex-shrink-0",
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-test-id": "transaction-detail-row-value",
-              "data-slot": "transaction-detail-row-value",
-              className: [
-                "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)]",
-                !valueColor ? "text-[color:var(--deframe-widget-color-text-primary)]" : ""
-              ].join(" "),
-              style: valueColor ? { color: valueColor } : void 0,
-              children: value
-            }
-          )
-        ]
-      }
-    ),
-    divider && /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-test-id": "transaction-detail-row-divider",
-        "data-slot": "transaction-detail-row-divider",
-        className: "h-px bg-[var(--deframe-widget-color-border-secondary)]"
-      }
-    )
-  ] });
-}
-function TransactionDetails({
-  title = "Detalhes da transa\xE7\xE3o",
-  subtitle,
-  items,
-  onClose
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-test-id": "transaction-details",
-      "data-slot": "transaction-details",
-      className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] w-full max-w-[320px] box-border font-[var(--deframe-widget-font-family)]",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-test-id": "transaction-details-header",
-            "data-slot": "transaction-details-header",
-            className: [
-              "flex justify-between items-center",
-              subtitle ? "mb-[6px]" : "mb-[var(--deframe-widget-size-gap-none)]"
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-test-id": "transaction-details-title",
-                  "data-slot": "transaction-details-title",
-                  className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[inherit]",
-                  children: title
-                }
-              ),
-              onClose && /* @__PURE__ */ jsx(
-                CloseIconButton,
-                {
-                  "data-test-id": "transaction-details-close",
-                  "data-slot": "transaction-details-close",
-                  onClick: onClose
-                }
-              )
-            ]
-          }
-        ),
-        subtitle && /* @__PURE__ */ jsx(
-          "p",
-          {
-            "data-test-id": "transaction-details-subtitle",
-            "data-slot": "transaction-details-subtitle",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] m-[var(--deframe-widget-size-gap-none)] mb-[var(--deframe-widget-size-gap-sm)] leading-[1.4] font-[inherit]",
-            children: subtitle
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "transaction-details-divider",
-            "data-slot": "transaction-details-divider",
-            className: [
-              "h-px bg-[var(--deframe-widget-color-border-secondary)]",
-              subtitle ? "mt-[var(--deframe-widget-size-gap-none)]" : "mt-[var(--deframe-widget-size-gap-sm)]"
-            ].join(" ")
-          }
-        ),
-        items.map((item, i) => /* @__PURE__ */ jsx(
-          TransactionDetailRow,
-          {
-            label: item.label,
-            value: item.value,
-            valueColor: item.valueColor,
-            divider: i < items.length - 1
-          },
-          item.label
-        ))
-      ]
-    }
-  );
-}
-function CloseIconButton(_a) {
-  var _b = _a, { onClick } = _b, rest = __objRest(_b, ["onClick"]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      onClick,
-      "aria-label": "Fechar detalhes",
-      className: twMerge(
-        "inline-flex items-center justify-center",
-        "w-7 h-7",
-        "rounded-[var(--deframe-widget-size-radius-sm)]",
-        "border-none",
-        "cursor-pointer",
-        "bg-transparent",
-        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
-        "transition-[background] duration-150",
-        "flex-shrink-0",
-        "outline-none",
-        "text-[color:var(--deframe-widget-color-text-secondary)]"
-      )
-    }, rest), {
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          "data-test-id": "transaction-details-close-icon",
-          "data-slot": "transaction-details-close-icon",
-          viewBox: "0 0 24 24",
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx("path", { d: "M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" })
-        }
-      )
-    })
-  );
-}
-var InfoRow = ({ children, borderBottom, className }) => {
-  const baseClasses = "self-stretch inline-flex justify-between items-start";
-  const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]" : "";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row", className: twMerge(baseClasses, borderClasses, className), children });
-};
-var InfoLabel = ({ children, className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-label", className: twMerge(baseClasses, className), children });
-};
-var variantClasses2 = {
-  default: "text-[color:var(--deframe-widget-color-text-primary)]",
-  success: "text-[color:var(--deframe-widget-color-state-success)]",
-  warning: "text-[color:var(--deframe-widget-color-state-warning)]",
-  error: "text-[color:var(--deframe-widget-color-state-error)]"
-};
-var InfoValue = ({ children, variant = "default", className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-value", className: twMerge(baseClasses, variantClasses2[variant], className), children });
-};
-var InfoRowWithIcon = ({ children, borderBottom, className }) => {
-  const baseClasses = "flex items-start justify-between h-[17px]";
-  const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]" : "";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row-with-icon", className: twMerge(baseClasses, borderClasses, className), children });
-};
-var InfoRowIconLabel = ({ children, className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
-  return /* @__PURE__ */ jsxs("div", { "data-test-id": "info-row-icon-label", className: twMerge(baseClasses, className), children: [
-    "\u2022 ",
-    children
-  ] });
-};
-var InfoRowIconValue = ({ children, className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row-icon-value", className: twMerge(baseClasses, className), children });
-};
-var CollapsibleInfoRow = ({
-  label,
-  value,
-  children,
-  defaultOpen = false,
-  className,
-  collapseLabel,
-  expandLabel
-}) => {
-  const [isOpen, setIsOpen] = React6__default.useState(defaultOpen);
-  const baseClasses = "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full";
-  return /* @__PURE__ */ jsxs("div", { "data-test-id": "collapsible-info-row", className: twMerge(baseClasses, className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setIsOpen(!isOpen),
-        className: "flex items-start justify-between w-full text-left h-[18px] cursor-pointer",
-        "aria-expanded": isOpen,
-        "aria-label": `${isOpen ? collapseLabel : expandLabel} ${label}`,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[2px]", children: [
-            /* @__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)]", children: label }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: isOpen ? /* @__PURE__ */ jsx(HiChevronUp, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-secondary)]" }) : /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-secondary)]" }) })
-          ] }),
-          /* @__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-semibold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: value })
-        ]
-      }
-    ),
-    isOpen && children
-  ] });
-};
-var BackgroundContainer = ({ children, className }) => {
-  const baseClasses = "w-full flex-1 min-h-0 px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "background-container", className: twMerge(baseClasses, className), children });
-};
-var SectionCard = ({ children, className }) => {
-  const baseClasses = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "section-card", className: twMerge(baseClasses, className), children });
-};
-var Navbar = ({ children, className }) => {
-  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[color:var(--deframe-widget-color-border-tertiary)] flex";
-  return /* @__PURE__ */ jsx("nav", { "data-test-id": "navbar", className: twMerge(baseClasses, className), children });
-};
-var gapClasses = {
-  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
-  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
-  md: "gap-[var(--deframe-widget-size-gap-md)]",
-  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
-};
-var FlexCol = ({ children, className, gap = "xs" }) => {
-  const baseClasses = "flex flex-col";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "flex-col", className: twMerge(baseClasses, gapClasses[gap], className), children });
-};
-var gapClasses2 = {
-  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
-  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
-  md: "gap-[var(--deframe-widget-size-gap-md)]",
-  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
-};
-var FlexRow = ({ children, className, gap = "xs" }) => {
-  const baseClasses = "flex items-center";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "flex-row", className: twMerge(baseClasses, gapClasses2[gap], className), children });
-};
-var ScrollableContent = ({ children, className }) => {
-  const baseClasses = "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "scrollable-content", className: twMerge(baseClasses, className), children });
-};
-var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
-  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b border-[color:var(--deframe-widget-color-border-tertiary)] flex items-center";
-  return /* @__PURE__ */ jsxs("div", { "data-test-id": "details-header", className: twMerge(baseClasses, className), children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        "data-test-id": "details-header-back-button",
-        onClick: onBack,
-        className: "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)] cursor-pointer",
-        "aria-label": backAriaLabel,
-        children: /* @__PURE__ */ jsx(HiChevronLeft, { className: "w-6 h-6 text-[color:var(--deframe-widget-color-text-tertiary)]" })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsx(TextHeading, { variant: "h-large", children: title }) })
-  ] });
-};
-var HighRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "high-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-size": "Small",
-      "data-type": "Failed",
-      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-error)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
-      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
-    }
-  ) });
-};
-var MediumRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "medium-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-size": "Small",
-      "data-type": "Warning",
-      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-warning)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
-      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-warning)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
+      "data-size": "Small",
+      "data-type": "Warning",
+      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-warning)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
+      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-warning)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
     }
   ) });
 };
@@ -5290,7 +2339,7 @@ var AmountInUsd = ({ children }) => /* @__PURE__ */ jsxs("p", { "data-test-id":
   "~ ",
   children
 ] });
-var TokenIcon2 = ({ src, alt }) => /* @__PURE__ */ jsx(
+var TokenIcon = ({ src, alt }) => /* @__PURE__ */ jsx(
   "img",
   {
     "data-test-id": "token-icon",
@@ -5366,7 +2415,7 @@ var HistoryDepositDetailsView = ({
         /* @__PURE__ */ jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
         shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
           /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
-            /* @__PURE__ */ jsx(TokenIcon2, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
             /* @__PURE__ */ jsxs(FlexCol, { children: [
               /* @__PURE__ */ jsxs(Amount, { children: [
                 assetIn.amount,
@@ -5377,7 +2426,7 @@ var HistoryDepositDetailsView = ({
             ] })
           ] }),
           /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
-            /* @__PURE__ */ jsx(TokenIcon2, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
             /* @__PURE__ */ jsxs(FlexCol, { children: [
               /* @__PURE__ */ jsxs(Amount, { children: [
                 assetOut.amount,
@@ -5388,7 +2437,7 @@ var HistoryDepositDetailsView = ({
             ] })
           ] })
         ] }) : /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(TokenIcon2, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
           /* @__PURE__ */ jsx(FlexCol, { children: /* @__PURE__ */ jsxs(FlexRow, { gap: "xs", children: [
             /* @__PURE__ */ jsx(Amount, { children: amountWithSymbol }),
             amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
@@ -5456,7 +2505,7 @@ var HistoryWithdrawDetailsView = ({
         /* @__PURE__ */ jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
         shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
           /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
-            /* @__PURE__ */ jsx(TokenIcon2, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
             /* @__PURE__ */ jsxs(FlexCol, { children: [
               /* @__PURE__ */ jsxs(Amount, { children: [
                 assetIn.amount,
@@ -5467,7 +2516,7 @@ var HistoryWithdrawDetailsView = ({
             ] })
           ] }),
           /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
-            /* @__PURE__ */ jsx(TokenIcon2, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
             /* @__PURE__ */ jsxs(FlexCol, { children: [
               /* @__PURE__ */ jsxs(Amount, { children: [
                 assetOut.amount,
@@ -5478,7 +2527,7 @@ var HistoryWithdrawDetailsView = ({
             ] })
           ] })
         ] }) : /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(TokenIcon2, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
           /* @__PURE__ */ jsx(FlexCol, { children: /* @__PURE__ */ jsxs(FlexRow, { gap: "xs", children: [
             /* @__PURE__ */ jsx(Amount, { children: amountWithSymbol }),
             amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
@@ -5730,27 +2779,14 @@ var SwapQuoteBlockchainCostsView = ({
         /* @__PURE__ */ jsxs(InfoRowWithIcon, { children: [
           /* @__PURE__ */ jsx(InfoRowIconLabel, { children: networkGasLabel }),
           /* @__PURE__ */ jsx(InfoRowIconValue, { children: gasCostFormatted })
-        ] }),
-        /* @__PURE__ */ jsxs(InfoRowWithIcon, { borderBottom: true, children: [
-          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
-          /* @__PURE__ */ jsx(InfoRowIconValue, { children: protocolFee })
-        ] })
-      ] })
-    }
-  ) });
-};
-var CloseButton2 = ({ onClick, testId, ariaLabel = "Close", 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": testId != null ? testId : "close-button",
-      onClick,
-      className: twMerge(baseClasses, className),
-      "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsx(HiXMark, { className: "w-6 h-6" })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRowWithIcon, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
+          /* @__PURE__ */ jsx(InfoRowIconValue, { children: protocolFee })
+        ] })
+      ] })
     }
-  );
+  ) });
 };
 var ChooseAStrategyActionsheetView = ({
   isOpen,
@@ -5784,7 +2820,7 @@ var ChooseAStrategyActionsheetView = ({
       height: "full",
       contentClassName: "w-full max-w-[620px] mx-auto",
       children: /* @__PURE__ */ jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
-        /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton2, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
+        /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton_default, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] overflow-hidden", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
             /* @__PURE__ */ jsx(TextHeading, { children: resolvedYieldLabel }),
@@ -5866,7 +2902,7 @@ var LoadingDots = ({ className = "" }) => {
     /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
   ] });
 };
-var SearchInput2 = ({
+var SearchInput = ({
   placeholder = "Search",
   value: controlledValue,
   disabled = false,
@@ -6014,7 +3050,7 @@ var TransactionScreen = ({
 }) => {
   return /* @__PURE__ */ jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     onBack && /* @__PURE__ */ jsx(DetailsHeader, { title: backTitle, onBack }),
-    onClose && /* @__PURE__ */ jsx("div", { "data-testid": testId, className: "flex justify-start px-[var(--deframe-widget-size-padding-x-md)] pt-md", children: /* @__PURE__ */ jsx(CloseButton2, { onClick: onClose }) }),
+    onClose && /* @__PURE__ */ jsx("div", { "data-testid": testId, className: "flex justify-start px-[var(--deframe-widget-size-padding-x-md)] pt-md", children: /* @__PURE__ */ jsx(CloseButton_default, { onClick: onClose }) }),
     /* @__PURE__ */ jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsx(ProgressIndicator, { progress }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)] flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-md)] pt-lg", children: [
@@ -6252,6 +3288,144 @@ var SwapProcessingView = ({
     }
   );
 };
+function LoadingIcon() {
+  const green = "var(--deframe-widget-color-brand-primary)";
+  const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
+  const sw = 2.8;
+  const aw = 2.4;
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      "data-test-id": "swap-processing-simple-loading-icon",
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56",
+      fill: "none",
+      "aria-hidden": "true",
+      animate: { rotate: 360 },
+      transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
+            stroke: green,
+            strokeWidth: sw,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
+            stroke: green,
+            strokeWidth: aw,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 49.25 33.69 A 22 22 0 0 1 6.75 33.69",
+            stroke: green,
+            strokeWidth: sw,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 11.0 37.9 L 6.75 33.69 L 5.0 39.5",
+            stroke: green,
+            strokeWidth: aw,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var SwapProcessingViewSimple = ({
+  titleText,
+  descriptionPrefix,
+  activityHistoryText,
+  onGoToHistory
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "swap-processing-simple-screen",
+      className: twMerge(
+        "absolute inset-0 z-10",
+        "flex flex-col items-center justify-center",
+        "gap-[var(--deframe-widget-size-gap-lg)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+        "rounded-[inherit]",
+        "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+        "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(LoadingIcon, {}),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "swap-processing-simple-copy",
+            className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-test-id": "swap-processing-simple-title",
+                  className: twMerge(
+                    "[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)]"
+                  ),
+                  children: titleText
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-test-id": "swap-processing-simple-subtitle",
+                  className: twMerge(
+                    "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                    "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "text-[color:var(--deframe-widget-color-text-secondary)]",
+                    "max-w-[260px]"
+                  ),
+                  children: [
+                    descriptionPrefix,
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-test-id": "swap-processing-simple-history-link",
+                        onClick: onGoToHistory,
+                        "aria-label": activityHistoryText,
+                        className: twMerge(
+                          "bg-transparent border-0 p-0 cursor-pointer",
+                          "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+                          "text-[color:var(--deframe-widget-color-brand-primary)]"
+                        ),
+                        children: activityHistoryText
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var SwapCrossChainProcessingView = ({
   fromTokenSymbol,
   fromTokenIcon,
@@ -6511,6 +3685,113 @@ var SwapSuccessView = ({
     }
   );
 };
+function SuccessIcon() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      "data-test-id": "swap-success-simple-icon",
+      initial: { scale: 0.55, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
+      className: twMerge(
+        "w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
+        "flex items-center justify-center",
+        "bg-[var(--deframe-widget-color-state-success)]",
+        "shadow-[0_0_0_10px_color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent),0_0_32px_color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_22%,transparent)]"
+      ),
+      children: /* @__PURE__ */ jsx("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        motion.path,
+        {
+          d: "M10 22 L18 30 L34 14",
+          stroke: "white",
+          strokeWidth: "3.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          initial: { pathLength: 0 },
+          animate: { pathLength: 1 },
+          transition: { duration: 0.45, delay: 0.2, ease: "easeOut" }
+        }
+      ) })
+    }
+  );
+}
+var SwapSuccessViewSimple = ({
+  onGoToWallet,
+  labels
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "swap-success-simple-screen",
+      className: twMerge(
+        "absolute inset-0 z-10",
+        "flex flex-col items-center justify-center",
+        "gap-[var(--deframe-widget-size-gap-lg)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+        "rounded-[inherit]",
+        "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+        "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SuccessIcon, {}),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "swap-success-simple-copy",
+            className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-test-id": "swap-success-simple-title",
+                  className: twMerge(
+                    "[font-size:var(--deframe-widget-font-size-xl)]",
+                    "[line-height:var(--deframe-widget-font-leading-xl)]",
+                    "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "text-[color:var(--deframe-widget-color-text-primary)]"
+                  ),
+                  children: labels == null ? void 0 : labels.title
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-test-id": "swap-success-simple-subtitle",
+                  className: twMerge(
+                    "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                    "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "text-[color:var(--deframe-widget-color-text-secondary)]",
+                    "max-w-[260px]"
+                  ),
+                  children: [
+                    labels == null ? void 0 : labels.descriptionSuffix,
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-test-id": "swap-success-simple-wallet-link",
+                        onClick: onGoToWallet,
+                        "aria-label": labels == null ? void 0 : labels.walletLinkText,
+                        className: twMerge(
+                          "bg-transparent border-0 p-0 cursor-pointer",
+                          "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+                          "text-[color:var(--deframe-widget-color-brand-primary)]"
+                        ),
+                        children: labels == null ? void 0 : labels.walletLinkText
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var SwapTransactionFailedView = ({
   fromTokenSymbol,
   fromTokenIcon,
@@ -6587,6 +3868,114 @@ var SwapTransactionFailedView = ({
     }
   );
 };
+function ErrorIcon() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      "data-test-id": "swap-failed-simple-icon",
+      initial: { scale: 0.55, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
+      className: twMerge(
+        "w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
+        "flex items-center justify-center",
+        "bg-[var(--deframe-widget-color-state-error)]",
+        "shadow-[0_0_0_10px_color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent),0_0_32px_color-mix(in_srgb,var(--deframe-widget-color-state-error)_22%,transparent)]"
+      ),
+      children: /* @__PURE__ */ jsxs("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(
+          motion.line,
+          {
+            x1: "14",
+            y1: "14",
+            x2: "30",
+            y2: "30",
+            stroke: "white",
+            strokeWidth: "3.5",
+            strokeLinecap: "round",
+            initial: { pathLength: 0 },
+            animate: { pathLength: 1 },
+            transition: { duration: 0.25, delay: 0.2, ease: "easeOut" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.line,
+          {
+            x1: "30",
+            y1: "14",
+            x2: "14",
+            y2: "30",
+            stroke: "white",
+            strokeWidth: "3.5",
+            strokeLinecap: "round",
+            initial: { pathLength: 0 },
+            animate: { pathLength: 1 },
+            transition: { duration: 0.25, delay: 0.38, ease: "easeOut" }
+          }
+        )
+      ] })
+    }
+  );
+}
+var SwapTransactionFailedViewSimple = ({
+  errorTitle,
+  errorDescription
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "swap-failed-simple-screen",
+      className: twMerge(
+        "absolute inset-0 z-10",
+        "flex flex-col items-center justify-center",
+        "gap-[var(--deframe-widget-size-gap-lg)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+        "rounded-[inherit]",
+        "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
+        "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ErrorIcon, {}),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-test-id": "swap-failed-simple-copy",
+            className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-test-id": "swap-failed-simple-title",
+                  className: twMerge(
+                    "[font-size:22px] [line-height:1.25]",
+                    "[font-weight:var(--deframe-widget-font-weight-bold)]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "text-[color:var(--deframe-widget-color-text-primary)]"
+                  ),
+                  children: errorTitle
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-test-id": "swap-failed-simple-subtitle",
+                  className: twMerge(
+                    "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
+                    "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                    "font-[var(--deframe-widget-font-family)]",
+                    "text-[color:var(--deframe-widget-color-text-secondary)]",
+                    "max-w-[260px]"
+                  ),
+                  children: errorDescription
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var ChooseAnAssetSwapView = ({
   actionSheetId,
   isOpen,
@@ -6620,13 +4009,13 @@ var ChooseAnAssetSwapView = ({
       height: "full",
       contentClassName: "w-full max-w-[620px] mx-auto",
       children: /* @__PURE__ */ jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
-        /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton2, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
+        /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton_default, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] overflow-hidden", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
             /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
             /* @__PURE__ */ jsx("br", {}),
             /* @__PURE__ */ jsx(
-              SearchInput2,
+              SearchInput,
               {
                 onSearch: handleSearch,
                 placeholder: labels.searchPlaceholder,
@@ -7057,6 +4446,6 @@ var ConfirmSwapButtonView = ({
   ) });
 };
 
-export { ActionButton, ActionSheet, AddressDisplay, AmountInput, AssetList, AssetListColumns, AssetListFilter, AssetListHeader, AssetListItem, AssetRow, AssetTrendBadge, BackgroundContainer, BannerNotification, BlockchainAssetSelector, ChainChip, ChainRow, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FilterGroupBar, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, IconCircle, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, InlineNotification, Input2 as Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PercentageChips, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput2 as SearchInput, SecondaryButton, SectionCard, SegmentedControl, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StatCard, StatCardBadge, StatCardDescription, StatCardDivider, StatCardHeader, StatCardIcon, StatCardLabel, StatCardRow, StatCardTrend, StatCardValue, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyList, StrategyListHeader, StrategyListItem, StrategyRiskBadge, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapDirectionButton, SwapFormView, SwapFromCardView, SwapNetworkSelectorView, SwapOutputAmountView, SwapPanel, SwapProcessingView, SwapQuoteBlockchainCostsView, SwapQuoteDetailsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapToCardView, SwapTokenSelectorView, SwapTransactionFailedView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenIcon, TokenInputCard, TokenSelector, TokenWithChainBadge, TransactionDetailRow, TransactionDetails, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
+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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map