@deframe-sdk/components 0.1.33 → 0.1.34

package/dist/index.js

@@ -13301,6 +13301,82 @@ function OnchainDepositFormView({
     }
   );
 }
+var tabBaseClasses = [
+  "inline-flex flex-1 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 border-transparent",
+  "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)]",
+  "py-[5px] 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(" ");
+var activeTabClasses = "text-[color:var(--deframe-widget-color-brand-primary)]";
+var inactiveTabClasses = "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]";
+var FlowTabHeader = ({
+  activeTab,
+  cryptoHref,
+  pixHref,
+  cryptoLabel = "Cripto",
+  pixLabel = "PIX",
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-slot": "flow-tab-header",
+      "data-test-id": "flow-tab-header",
+      className: tailwindMerge.twMerge("px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "tablist",
+          "data-test-id": "flow-tab-header-tablist",
+          className: tailwindMerge.twMerge(
+            "inline-flex w-full 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]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: cryptoHref,
+                role: "tab",
+                "aria-selected": activeTab === "crypto",
+                "aria-current": activeTab === "crypto" ? "page" : void 0,
+                "aria-label": cryptoLabel,
+                "data-test-id": "flow-tab-header-tab-crypto",
+                className: tailwindMerge.twMerge(
+                  tabBaseClasses,
+                  activeTab === "crypto" ? activeTabClasses : inactiveTabClasses
+                ),
+                children: cryptoLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: pixHref,
+                role: "tab",
+                "aria-selected": activeTab === "pix",
+                "aria-current": activeTab === "pix" ? "page" : void 0,
+                "aria-label": pixLabel,
+                "data-test-id": "flow-tab-header-tab-pix",
+                className: tailwindMerge.twMerge(
+                  tabBaseClasses,
+                  activeTab === "pix" ? activeTabClasses : inactiveTabClasses
+                ),
+                children: pixLabel
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 var OnchainDepositFormSimpleView = ({
   // Token selector
   selectedToken,
@@ -13389,72 +13465,11 @@ var OnchainDepositFormSimpleView = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "nav",
+          FlowTabHeader,
           {
-            "data-slot": "onchain-deposit-simple-tabs",
-            "data-test-id": "onchain-deposit-form-simple-view-tabs",
-            className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                role: "tablist",
-                "data-test-id": "onchain-deposit-form-simple-view-tablist",
-                className: tailwindMerge.twMerge(
-                  "inline-flex w-full 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]"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
-                      role: "tab",
-                      "aria-selected": activeTab === "crypto",
-                      "aria-current": activeTab === "crypto" ? "page" : void 0,
-                      "aria-label": "Cripto",
-                      "data-test-id": "onchain-deposit-form-simple-view-tab-crypto",
-                      className: tailwindMerge.twMerge(
-                        "inline-flex flex-1 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 border-transparent",
-                        "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)]",
-                        "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
-                        "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
-                        activeTab === "crypto" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
-                      ),
-                      children: "Cripto"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href: pixHref != null ? pixHref : "/dashboard/deposit/onramp",
-                      role: "tab",
-                      "aria-selected": activeTab === "pix",
-                      "aria-current": activeTab === "pix" ? "page" : void 0,
-                      "aria-label": "PIX",
-                      "data-test-id": "onchain-deposit-form-simple-view-tab-pix",
-                      className: tailwindMerge.twMerge(
-                        "inline-flex flex-1 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 border-transparent",
-                        "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)]",
-                        "py-[5px] px-[var(--deframe-widget-size-padding-x-lg)]",
-                        "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
-                        activeTab === "pix" ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[var(--deframe-widget-color-bg-tertiary)]"
-                      ),
-                      children: "PIX"
-                    }
-                  )
-                ]
-              }
-            )
+            activeTab: activeTab != null ? activeTab : "crypto",
+            cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
+            pixHref: pixHref != null ? pixHref : "/dashboard/deposit/onramp"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -14073,6 +14088,10 @@ function OnchainWithdrawFormView({
   );
 }
 var OnchainWithdrawFormSimpleView = ({
+  // Tab switcher
+  activeTab,
+  cryptoHref,
+  pixHref,
   // Token selector
   selectedToken,
   onTokenClick,
@@ -14221,6 +14240,24 @@ var OnchainWithdrawFormSimpleView = ({
             className: dividerClasses
           }
         ),
+        activeTab && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FlowTabHeader,
+            {
+              activeTab,
+              cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/withdraw/onchain",
+              pixHref: pixHref != null ? pixHref : "/dashboard/withdraw/offramp"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "onchain-withdraw-simple-divider-tabs",
+              "data-test-id": "onchain-withdraw-form-simple-view-divider-tabs",
+              className: dividerClasses
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -15100,6 +15137,1932 @@ var OnchainWithdrawSignatureWarningSimpleView = ({
     }
   ) });
 };
+function KycLoadingView({ message = "Carregando" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "kyc-loading-view",
+      className: "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex items-center justify-center",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[#F6A700] rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-10 h-10", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: message }),
+          /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+        ] })
+      ] })
+    }
+  );
+}
+function KycRequiredView({ title, description, buttonLabel, onAction }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "kyc-required-view",
+      className: "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-6 h-[400px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-brand-primary)]/20 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-10 h-10 text-[color:var(--deframe-widget-color-brand-primary)]", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            onClick: onAction,
+            className: "w-full max-w-xs h-12",
+            "aria-label": buttonLabel,
+            children: buttonLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+var DefaultArrowIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
+function OffchainMethodSelectionView({
+  title,
+  options,
+  bannerMessage,
+  arrowIcon = DefaultArrowIcon
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "offchain-method-selection-view",
+      className: "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto lg:my-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 lg:p-12 min-h-[80vh] flex flex-col",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h2", className: "mb-3", children: title }),
+        bannerMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          BannerNotification,
+          {
+            variant: "info",
+            message: bannerMessage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 mt-2", children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          ListItem,
+          {
+            onClick: () => option.onClick(),
+            containerClassName: "p-2 cursor-pointer transition-all",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-test-id": `method-option-icon-${index}`,
+                  className: "w-12 h-12 rounded-full flex items-center justify-center",
+                  style: { backgroundColor: option.iconBgColor },
+                  children: option.icon
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { className: "ml-4", children: /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h4", className: "mb-1", children: option.label }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: arrowIcon }) })
+            ]
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+}
+var defaultBackIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) });
+var defaultFlagIcon = /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    src: "/brazil-flag-rounded.png",
+    alt: "Brazil",
+    className: "w-[24px] h-[24px] rounded-[var(--deframe-widget-size-radius-sm)]"
+  }
+);
+function OnrampFormView({
+  amount,
+  onAmountChange,
+  isLoadingQuote,
+  summaryTitle,
+  summaryItems,
+  isBelowMinAmount,
+  minAmountFormatted,
+  hasNoAmount,
+  isProcessing,
+  onSubmit,
+  onBack,
+  submitLabel,
+  flagIcon = defaultFlagIcon,
+  backIcon = defaultBackIcon,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge("w-full p-4 mx-auto space-y-6", className),
+      "data-test-id": "onramp-form-view",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SecondaryButton,
+          {
+            onClick: onBack,
+            className: "mb-4 !border-0 max-w-[84px]",
+            "aria-label": "Voltar",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-primary-dark)]", children: backIcon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary-dark)]", children: "Voltar" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: "Quanto voc\xEA quer depositar?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Insira o valor gere o c\xF3digo PIX" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex items-end justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+              TextBody,
+              {
+                variant: "text-small",
+                className: "text-[color:var(--deframe-widget-color-text-secondary)]",
+                children: "Voc\xEA paga com PIX"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: flagIcon })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              inputMode: "decimal",
+              value: amount ? `R$ ${amount}` : "",
+              onChange: (e) => {
+                const value = e.target.value.replace(/[^0-9.]/g, "");
+                onAmountChange(value || "");
+              },
+              onWheel: (event) => {
+                event.currentTarget.blur();
+              },
+              placeholder: "R$0.00",
+              className: "w-full bg-transparent text-right text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-secondary)] outline-none",
+              "data-test-id": "onramp-form-amount-input",
+              "aria-label": "Valor do dep\xF3sito"
+            }
+          ) })
+        ] }) }),
+        isLoadingQuote ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] p-4 rounded-[var(--deframe-widget-size-radius-lg)] space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 80, height: 16, shimmer: true })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 80, height: 16, shimmer: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 64, height: 16, shimmer: true })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          SummaryDetails,
+          {
+            title: summaryTitle,
+            items: summaryItems,
+            defaultOpen: true,
+            showDividers: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BannerNotification,
+          {
+            message: "Dep\xF3sitos via Pix s\xE3o convertidos automaticamente em BRLA.",
+            variant: "info"
+          }
+        ),
+        isBelowMinAmount && /* @__PURE__ */ jsxRuntime.jsx(
+          BannerNotification,
+          {
+            message: `O valor m\xEDnimo para dep\xF3sito \xE9 R$ ${minAmountFormatted}.`,
+            variant: "warning"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            onClick: onSubmit,
+            disabled: isBelowMinAmount || isProcessing || hasNoAmount,
+            "aria-label": submitLabel,
+            "data-test-id": "onramp-form-submit",
+            children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+              "Processando ",
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+            ] }) : submitLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var ClockIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+    ]
+  }
+);
+var CopyIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+    ]
+  }
+);
+var OnrampFormSimpleView = ({
+  // Base OnrampFormViewProps
+  amount,
+  onAmountChange,
+  isLoadingQuote,
+  summaryTitle,
+  summaryItems,
+  isBelowMinAmount,
+  minAmountFormatted,
+  hasNoAmount,
+  isProcessing,
+  onSubmit,
+  onBack,
+  submitLabel,
+  // Simple-specific props
+  activeTab,
+  cryptoHref,
+  pixHref,
+  pixCode,
+  qrCodeElement,
+  remainingLabel,
+  isExpired,
+  copied,
+  onCopy,
+  onRegenerate,
+  isRegenerating,
+  onClose,
+  error
+}) => {
+  const hasPixCode = !!pixCode;
+  const isSubmitDisabled = !amount || amount === "0" || amount === "" || isBelowMinAmount || hasNoAmount || isProcessing;
+  const panelBaseClasses = [
+    "relative flex flex-col overflow-hidden w-[420px]",
+    "rounded-[var(--deframe-widget-size-radius-md)]",
+    "border border-[color:var(--deframe-widget-color-border-secondary)]",
+    "font-[var(--deframe-widget-font-family)]"
+  ].join(" ");
+  const headerBaseClasses = [
+    "flex items-center",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]"
+  ].join(" ");
+  const titleBaseClasses = [
+    "flex-1",
+    "text-[15px]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+    "text-[color:var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
+  const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
+  const bodyBaseClasses = [
+    "flex flex-col",
+    "gap-[var(--deframe-widget-size-gap-md)]",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]"
+  ].join(" ");
+  const footerBaseClasses = [
+    "flex gap-[var(--deframe-widget-size-gap-sm)]",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "pb-[var(--deframe-widget-size-padding-y-md)]"
+  ].join(" ");
+  const cardClasses2 = tailwindMerge.twMerge(
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border border-[color:var(--deframe-widget-color-border-secondary)]",
+    "bg-[var(--deframe-widget-color-bg-secondary)]",
+    "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
+  );
+  const secondaryButtonClasses = [
+    "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
+    "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
+    "border-[color:var(--deframe-widget-color-border-secondary)]",
+    "outline-none",
+    "transition-[background,color,border-color] duration-150",
+    "hover:opacity-100",
+    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
+    "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "onramp-form-simple-panel",
+      "data-test-id": "onramp-form-simple-view",
+      className: panelBaseClasses,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "header",
+          {
+            "data-slot": "onramp-form-simple-header",
+            "data-test-id": "onramp-form-simple-view-header",
+            className: headerBaseClasses,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "onramp-form-simple-title",
+                  "data-test-id": "onramp-form-simple-view-title",
+                  className: titleBaseClasses,
+                  children: "Depositar"
+                }
+              ),
+              onClose && /* @__PURE__ */ jsxRuntime.jsx(
+                CloseButton_default,
+                {
+                  onClick: onClose,
+                  ariaLabel: "Fechar painel de dep\xF3sito",
+                  testId: "onramp-form-simple-view-close"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "onramp-form-simple-divider",
+            "data-test-id": "onramp-form-simple-view-divider",
+            className: dividerClasses
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlowTabHeader,
+          {
+            activeTab: activeTab != null ? activeTab : "pix",
+            cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/deposit/onchain",
+            pixHref: pixHref != null ? pixHref : "/dashboard/deposit/onramp"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "onramp-form-simple-divider-tabs",
+            "data-test-id": "onramp-form-simple-view-divider-tabs",
+            className: dividerClasses
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "onramp-form-simple-body",
+            "data-test-id": "onramp-form-simple-view-body",
+            className: bodyBaseClasses,
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: !hasPixCode ? (
+              /* ── Step 1: Amount input ─────────────────────────────────────── */
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                framerMotion.motion.div,
+                {
+                  "data-slot": "onramp-form-simple-step-1",
+                  "data-test-id": "onramp-form-simple-view-step-1",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 },
+                  className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-slot": "onramp-form-simple-amount-card",
+                        "data-test-id": "onramp-form-simple-view-amount-card",
+                        className: cardClasses2,
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            "data-slot": "onramp-form-simple-amount-row",
+                            "data-test-id": "onramp-form-simple-view-amount-row",
+                            className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  "data-slot": "onramp-form-simple-currency-label",
+                                  "data-test-id": "onramp-form-simple-view-currency-label",
+                                  className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1] flex-shrink-0",
+                                  children: "R$"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  "data-test-id": "onramp-form-simple-view-currency-divider",
+                                  className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                EarnAmountInputSimpleView,
+                                {
+                                  value: amount,
+                                  onChange: (e) => {
+                                    const raw = e.target.value.replace(/[^0-9.,]/g, "");
+                                    onAmountChange(raw);
+                                  },
+                                  ariaLabel: "Valor do dep\xF3sito PIX",
+                                  dollarAmountFormatted: ""
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    isBelowMinAmount && /* @__PURE__ */ jsxRuntime.jsx(
+                      EarnInlineNotificationSimpleView,
+                      {
+                        variant: "warning",
+                        message: `O valor m\xEDnimo para dep\xF3sito \xE9 R$ ${minAmountFormatted}.`
+                      }
+                    ),
+                    error && /* @__PURE__ */ jsxRuntime.jsx(
+                      EarnInlineNotificationSimpleView,
+                      {
+                        variant: "error",
+                        message: error
+                      }
+                    ),
+                    isLoadingQuote ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        "data-test-id": "onramp-form-simple-view-skeleton",
+                        className: tailwindMerge.twMerge(cardClasses2, "space-y-3"),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
+                            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 80, height: 16, shimmer: true })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 80, height: 16, shimmer: true }),
+                            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 64, height: 16, shimmer: true })
+                          ] })
+                        ]
+                      }
+                    ) : summaryItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                      SummaryDetails,
+                      {
+                        title: summaryTitle,
+                        items: summaryItems,
+                        defaultOpen: true,
+                        showDividers: true,
+                        className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+                      }
+                    )
+                  ]
+                },
+                "step-1"
+              )
+            ) : (
+              /* ── Step 2: QR code + PIX code ───────────────────────────────── */
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                framerMotion.motion.div,
+                {
+                  "data-slot": "onramp-form-simple-step-2",
+                  "data-test-id": "onramp-form-simple-view-step-2",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 },
+                  className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        "data-slot": "onramp-form-simple-qr-card",
+                        "data-test-id": "onramp-form-simple-view-qr-card",
+                        className: tailwindMerge.twMerge(
+                          "rounded-[var(--deframe-widget-size-radius-sm)]",
+                          "border border-[color:var(--deframe-widget-color-border-secondary)]",
+                          "bg-[var(--deframe-widget-color-bg-secondary)]",
+                          "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
+                          "flex items-center justify-center",
+                          "relative overflow-hidden"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-slot": "onramp-form-simple-qr-wrapper",
+                              "data-test-id": "onramp-form-simple-view-qr-wrapper",
+                              className: "bg-white p-3 rounded-lg leading-[0]",
+                              children: qrCodeElement
+                            }
+                          ),
+                          isExpired && /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-slot": "onramp-form-simple-qr-expired-overlay",
+                              "data-test-id": "onramp-form-simple-view-qr-expired-overlay",
+                              className: tailwindMerge.twMerge(
+                                "absolute inset-0 flex items-center justify-center",
+                                "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_80%,transparent)]",
+                                "rounded-[var(--deframe-widget-size-radius-sm)]"
+                              ),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  "data-test-id": "onramp-form-simple-view-qr-expired-text",
+                                  className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-state-error)] font-[var(--deframe-widget-font-family)]",
+                                  children: "C\xF3digo expirado"
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        "data-slot": "onramp-form-simple-pix-code",
+                        "data-test-id": "onramp-form-simple-view-pix-code",
+                        className: tailwindMerge.twMerge(
+                          "rounded-[var(--deframe-widget-size-radius-sm)]",
+                          "border border-[color:var(--deframe-widget-color-border-secondary)]",
+                          "bg-[var(--deframe-widget-color-bg-secondary)]",
+                          "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "p",
+                            {
+                              "data-test-id": "onramp-form-simple-view-pix-code-label",
+                              className: "mb-[var(--deframe-widget-size-gap-xs)] text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                              children: "C\xF3digo PIX"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                "data-test-id": "onramp-form-simple-view-pix-code-value",
+                                className: "flex-1 min-w-0 truncate font-mono text-[13px] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
+                                children: pixCode
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                "data-test-id": "onramp-form-simple-view-pix-code-copy",
+                                "aria-label": copied ? "C\xF3digo copiado" : "Copiar c\xF3digo PIX",
+                                onClick: onCopy,
+                                className: tailwindMerge.twMerge(
+                                  "flex items-center gap-1 flex-shrink-0 px-2 py-1",
+                                  "rounded-[var(--deframe-widget-size-radius-sm)]",
+                                  "text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)]",
+                                  "font-[var(--deframe-widget-font-family)]",
+                                  "cursor-pointer outline-none",
+                                  "transition-[background,color] duration-150",
+                                  copied ? "text-[color:var(--deframe-widget-color-state-success)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]" : "text-[color:var(--deframe-widget-color-brand-primary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {}),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: copied ? "Copiado!" : "Copiar" })
+                                ]
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    remainingLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        "data-slot": "onramp-form-simple-timer",
+                        "data-test-id": "onramp-form-simple-view-timer",
+                        className: "flex items-center justify-center gap-[var(--deframe-widget-size-gap-xs)]",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ClockIcon,
+                            {
+                              className: tailwindMerge.twMerge(
+                                "flex-shrink-0",
+                                isExpired ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              "data-test-id": "onramp-form-simple-view-timer-label",
+                              className: tailwindMerge.twMerge(
+                                "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)]",
+                                isExpired ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]"
+                              ),
+                              children: remainingLabel
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpired && onRegenerate && /* @__PURE__ */ jsxRuntime.jsx(
+                      PrimaryButton,
+                      {
+                        type: "button",
+                        onClick: onRegenerate,
+                        disabled: isRegenerating,
+                        className: "w-full h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
+                        "aria-label": "Gerar novo c\xF3digo PIX",
+                        "data-test-id": "onramp-form-simple-view-regenerate",
+                        children: isRegenerating ? "Gerando..." : "Gerar novo c\xF3digo"
+                      }
+                    )
+                  ]
+                },
+                "step-2"
+              )
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "footer",
+          {
+            "data-slot": "onramp-form-simple-footer",
+            "data-test-id": "onramp-form-simple-view-footer",
+            className: footerBaseClasses,
+            children: !hasPixCode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SecondaryButton,
+                {
+                  type: "button",
+                  className: secondaryButtonClasses,
+                  onClick: onBack,
+                  "aria-label": "Cancelar dep\xF3sito",
+                  "data-test-id": "onramp-form-simple-view-cancel",
+                  children: "Cancelar"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PrimaryButton,
+                {
+                  type: "button",
+                  className: "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
+                  onClick: onSubmit,
+                  disabled: isSubmitDisabled,
+                  "aria-label": submitLabel,
+                  "data-test-id": "onramp-form-simple-view-submit",
+                  children: isProcessing ? "Processando..." : submitLabel
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+              SecondaryButton,
+              {
+                type: "button",
+                className: tailwindMerge.twMerge(secondaryButtonClasses, "w-full"),
+                onClick: onBack,
+                "aria-label": "Cancelar",
+                "data-test-id": "onramp-form-simple-view-cancel",
+                children: "Cancelar"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function OnrampPixcodeView({
+  pixCode,
+  summaryTitle,
+  summaryItems,
+  isLoadingQuote,
+  remainingLabel,
+  isExpired,
+  copied,
+  isRegenerating,
+  onCopy,
+  onRegenerate,
+  qrCodeElement,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "w-full p-4 mx-auto space-y-6 animate-fade-in flex flex-col flex-1",
+        className
+      ),
+      "data-test-id": "onramp-pixcode-view",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[21px] font-bold text-[color:var(--deframe-widget-color-text-secondary)] leading-tight", children: "Pague com Pix" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)]", children: "Aponte a sua c\xE2mera para o QR code ou copie e cole o c\xF3digo no app do seu banco" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--deframe-widget-color-bg-primary)] p-4 rounded-[var(--deframe-widget-size-radius-lg)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto w-fit", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: isExpired ? "blur-sm opacity-60 transition" : "transition", children: qrCodeElement }),
+          isExpired && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12px] font-semibold text-[color:var(--deframe-widget-color-text-primary)] bg-[var(--deframe-widget-color-bg-primary)]/90 rounded-[var(--deframe-widget-size-radius-sm)] px-3 py-2 border border-[var(--deframe-widget-color-border-secondary)]", children: "C\xF3digo expirado" }) })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-[12px] text-[color:var(--deframe-widget-color-text-primary)] truncate flex-1", children: [
+            pixCode.substring(0, 50),
+            "..."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onCopy,
+              disabled: isExpired,
+              className: tailwindMerge.twMerge(
+                "text-[12px] font-semibold underline shrink-0",
+                isExpired ? "text-[color:var(--deframe-widget-color-text-tertiary)] cursor-not-allowed" : "text-[color:var(--deframe-widget-color-brand-primary)]"
+              ),
+              "aria-label": copied ? "C\xF3digo copiado" : "Copiar c\xF3digo PIX",
+              "data-test-id": "onramp-pixcode-copy-button",
+              children: copied ? "Copiado!" : "Copiar"
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-[color:var(--deframe-widget-color-text-secondary)]", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "#1890FF", strokeWidth: "1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4V8L10.5 10.5", stroke: "#1890FF", strokeWidth: "1", strokeLinecap: "round" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: isExpired ? "C\xF3digo expirou. Gere um novo para pagar." : `Expira em ${remainingLabel}` })
+        ] }),
+        isExpired && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRegenerate,
+            disabled: isRegenerating,
+            className: "text-[12px] font-semibold text-[color:var(--deframe-widget-color-brand-primary)] underline self-center disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Gerar novo c\xF3digo Pix",
+            "data-test-id": "onramp-pixcode-regenerate-button",
+            children: isRegenerating ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              "Gerando novo c\xF3digo ",
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+            ] }) : "Gerar novo c\xF3digo Pix"
+          }
+        ),
+        isLoadingQuote ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] border border-[var(--deframe-widget-color-border-secondary)] space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-sm)] animate-pulse w-20" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)]", children: "\u2248" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-sm)] animate-pulse w-16" })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          SummaryDetails,
+          {
+            title: summaryTitle,
+            items: summaryItems,
+            defaultOpen: true,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+          }
+        )
+      ]
+    }
+  );
+}
+function SuccessIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-20 h-20", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[#2ba176] rounded-full opacity-20" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 bg-[#2ba176] rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M10 15V5M10 5L6 9M10 5L14 9",
+        stroke: "#121212",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }) }) })
+  ] });
+}
+function SuccessHeader({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4", children });
+}
+function SuccessTitle({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] leading-tight mb-2", children });
+}
+function SuccessDescription({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)]", children });
+}
+function DepositCard({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-lg)] shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children }) });
+}
+function DepositRow({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children });
+}
+function DepositIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 bg-[var(--deframe-widget-color-brand-primary)] rounded-full flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "R" }) });
+}
+function DepositInfo({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children });
+}
+function OnrampSuccessView({
+  amount = "0",
+  summaryTitle = "",
+  summaryItems = [],
+  onNewDeposit,
+  onGoToDashboard,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "w-full p-4 mx-auto space-y-6 animate-fade-in flex flex-col flex-1",
+        className
+      ),
+      "data-test-id": "onramp-success-view",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(SuccessHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon3, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SuccessTitle, { children: "Dep\xF3sito via PIX conclu\xEDdo" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(SuccessDescription, { children: [
+              amount,
+              " BRLA foram adicionados \xE0 sua carteira."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DepositCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(DepositRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DepositIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(DepositInfo, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)]", children: "Voc\xEA depositou via PIX" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[14px] font-semibold text-[color:var(--deframe-widget-color-text-secondary)]", children: [
+              amount,
+              " BRLA"
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SummaryDetails,
+          {
+            title: summaryTitle,
+            items: summaryItems,
+            defaultOpen: false,
+            className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center my-4 gap-2 mt-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SecondaryButton,
+            {
+              onClick: onNewDeposit,
+              "aria-label": "Fazer novo dep\xF3sito",
+              "data-test-id": "onramp-success-new-deposit",
+              children: "Fazer novo dep\xF3sito"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PrimaryButton,
+            {
+              onClick: onGoToDashboard,
+              "aria-label": "Ir para carteira",
+              "data-test-id": "onramp-success-go-dashboard",
+              children: "Ir para carteira"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var OnrampSuccessSimpleView = ({
+  onGoToDashboard
+}) => {
+  React6__namespace.useEffect(() => {
+    if (!onGoToDashboard) return;
+    const timer = setTimeout(onGoToDashboard, 5e3);
+    return () => clearTimeout(timer);
+  }, [onGoToDashboard]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onramp-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EarnFeedbackOverlaySimpleView,
+    {
+      variant: "success",
+      title: "Dep\xF3sito via PIX Confirmado!",
+      subtitle: "Seu saldo foi atualizado."
+    }
+  ) });
+};
+var defaultBackIcon2 = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) });
+function OfframpInputFormView({
+  brlaBalance,
+  amount,
+  onAmountChange,
+  pixKey,
+  onPixKeyChange,
+  onMaxClick,
+  showMaxButton,
+  summaryTitle,
+  summaryItems,
+  isLoadingQuote,
+  amountWarningMessage,
+  hasActiveWithdrawal,
+  completedBanner,
+  error,
+  offrampError,
+  submitLabel,
+  submitDisabled,
+  onSubmit,
+  onBack,
+  backIcon,
+  tokenIconUrl = "/brladigital_32.webp",
+  flagIconUrl = "/brazil-flag-rounded.png",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
+        className
+      ),
+      "data-test-id": "offramp-input-form-view",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: onBack,
+              className: "flex items-center gap-2 mb-4 cursor-pointer",
+              "aria-label": "Voltar",
+              "data-test-id": "offramp-input-form-back-button",
+              children: [
+                backIcon || defaultBackIcon2,
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-medium", children: "Voltar" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-1 bg-[var(--deframe-widget-color-border-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full bg-[#1FC16B]", style: { width: "25%" } }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start justify-start gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6", children: [
+          completedBanner && /* @__PURE__ */ jsxRuntime.jsx(
+            BannerNotification,
+            {
+              message: completedBanner,
+              variant: "success"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: "Saque via PIX" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Insira o valor e a chave PIX para receber em sua conta banc\xE1ria." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: tokenIconUrl,
+                alt: "Token",
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] ml-2", children: "Saldo em BRLA dispon\xEDvel" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TextHeading, { variant: "h5", className: "ml-2", children: [
+                brlaBalance,
+                " BRLA"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] mb-2", children: "Quanto voc\xEA quer enviar via PIX?" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-sm)] p-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: flagIconUrl, alt: "BRL", className: "w-6 h-6 rounded-full" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "decimal",
+                  value: amount ? `R$${amount}` : "",
+                  onChange: (e) => {
+                    const value = e.target.value.replace(/[^0-9.]/g, "");
+                    onAmountChange(value || "");
+                  },
+                  onWheel: (event) => {
+                    event.currentTarget.blur();
+                  },
+                  placeholder: "R$0.00",
+                  className: "w-full bg-transparent text-right text-[28px] font-extrabold text-[color:var(--deframe-widget-color-text-primary)] outline-none",
+                  "aria-label": "Valor do saque",
+                  "data-test-id": "offramp-input-form-amount"
+                }
+              )
+            ] }),
+            showMaxButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+              TertiaryButton,
+              {
+                onClick: onMaxClick,
+                className: "text-[length:var(--deframe-widget-font-size-sm)]",
+                "aria-label": "Usar valor m\xE1ximo",
+                children: "Max"
+              }
+            ) }),
+            hasActiveWithdrawal && /* @__PURE__ */ jsxRuntime.jsx(
+              BannerNotification,
+              {
+                message: "Voc\xEA j\xE1 tem um saque em andamento. Aguarde a conclus\xE3o antes de iniciar outro.",
+                variant: "warning"
+              }
+            ),
+            amountWarningMessage && /* @__PURE__ */ jsxRuntime.jsx(
+              BannerNotification,
+              {
+                message: amountWarningMessage,
+                variant: "warning"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] mb-2", children: "Qual \xE9 a sua chave PIX?" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input2,
+              {
+                type: "text",
+                value: pixKey,
+                onChange: (e) => onPixKeyChange(e.target.value),
+                placeholder: "(CPF, email, telefone ou aleat\xF3ria)",
+                className: "w-full h-12 text-[length:var(--deframe-widget-font-size-md)] border border-[var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-sm)] bg-[var(--deframe-widget-color-bg-secondary)]",
+                "aria-label": "Chave PIX",
+                "data-test-id": "offramp-input-form-pix-key"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BannerNotification,
+              {
+                variant: "info",
+                message: "A chave PIX deve estar vinculada ao mesmo CPF do seu cadastro."
+              }
+            )
+          ] }),
+          isLoadingQuote ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--deframe-widget-color-bg-secondary)] p-4 rounded-[var(--deframe-widget-size-radius-sm)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 128, height: 16, shimmer: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 64, height: 16, shimmer: true })
+          ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+            SummaryDetails,
+            {
+              title: summaryTitle,
+              items: summaryItems,
+              className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BannerNotification,
+            {
+              message: "Depois de inserir o valor e confirmar o pix voc\xEA precisa assinar a transa\xE7\xE3o na sua wallet. Processamento pode levar alguns minutos.",
+              variant: "info"
+            }
+          ),
+          (error || offrampError) && /* @__PURE__ */ jsxRuntime.jsx(
+            BannerNotification,
+            {
+              message: error || offrampError || "",
+              variant: "error"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PrimaryButton,
+            {
+              onClick: onSubmit,
+              disabled: submitDisabled,
+              "aria-label": "Confirmar saque",
+              "data-test-id": "offramp-input-form-submit",
+              children: submitLabel
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/stories/offramp-input-form-view/constants.ts
+var PIX_KEY_OPTIONS = [
+  { value: "cpf", label: "CPF" },
+  { value: "email", label: "Email" },
+  { value: "phone", label: "Celular" },
+  { value: "random", label: "Aleat\xF3ria" }
+];
+var tabBaseClasses2 = [
+  "flex-1 py-[4px] px-[8px]",
+  "rounded-[var(--deframe-widget-size-radius-sm)]",
+  "border-none outline-none cursor-pointer",
+  "whitespace-nowrap text-center",
+  "font-[var(--deframe-widget-font-family)]",
+  "text-[13px] [line-height:1.4]",
+  "transition-[background,color] duration-150",
+  "bg-transparent"
+].join(" ");
+var activeTabClasses2 = [
+  "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+  "text-[color:var(--deframe-widget-color-brand-primary)]"
+].join(" ");
+var inactiveTabClasses2 = [
+  "[font-weight:var(--deframe-widget-font-weight-regular)]",
+  "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-tertiary)_60%,transparent)]"
+].join(" ");
+var PixKeySegmentedControl = ({
+  value,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      "data-slot": "pix-key-segmented-control",
+      "data-test-id": "pix-key-segmented-control",
+      className: tailwindMerge.twMerge(
+        "inline-flex w-full",
+        "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]"
+      ),
+      children: PIX_KEY_OPTIONS.map(({ value: optionValue, label }) => {
+        const isActive = optionValue === value;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-label": label,
+            "data-test-id": `pix-key-tab-${optionValue}`,
+            onClick: () => onChange(optionValue),
+            className: tailwindMerge.twMerge(
+              tabBaseClasses2,
+              isActive ? activeTabClasses2 : inactiveTabClasses2
+            ),
+            children: label
+          },
+          optionValue
+        );
+      })
+    }
+  );
+};
+var STORAGE_KEY = "deframe-pix-key-type";
+var PIX_PLACEHOLDERS = {
+  cpf: "000.000.000-00",
+  email: "seu@email.com",
+  phone: "+55 (11) 99999-9999",
+  random: "Chave aleat\xF3ria"
+};
+var OfframpInputFormSimpleView = ({
+  // Base props
+  brlaBalance,
+  amount,
+  onAmountChange,
+  pixKey,
+  onPixKeyChange,
+  amountWarningMessage,
+  hasActiveWithdrawal,
+  completedBanner,
+  error,
+  offrampError,
+  submitLabel,
+  submitDisabled,
+  onSubmit,
+  onBack,
+  className,
+  // Simple-specific props
+  activeTab,
+  cryptoHref,
+  pixHref,
+  onPercentageSelect,
+  maxLabel,
+  onClose
+}) => {
+  const [pixKeyType, setPixKeyType] = React6__namespace.default.useState(() => {
+    if (typeof window === "undefined") return "cpf";
+    return localStorage.getItem(STORAGE_KEY) || "cpf";
+  });
+  function handlePixKeyTypeChange(type) {
+    setPixKeyType(type);
+    localStorage.setItem(STORAGE_KEY, type);
+  }
+  const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
+  const hideTimerRef = React6__namespace.default.useRef(void 0);
+  function handleHoverStart() {
+    clearTimeout(hideTimerRef.current);
+    setCardHovered(true);
+  }
+  function handleHoverEnd() {
+    hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
+  }
+  React6__namespace.default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
+  const hasAmountError = !!amountWarningMessage;
+  const hasPixKeyError = !!error || !!offrampError;
+  const isSubmitDisabledInternal = submitDisabled || !amount || amount === "0" || !pixKey.trim();
+  const panelBaseClasses = [
+    "relative flex flex-col overflow-hidden w-[420px]",
+    "rounded-[var(--deframe-widget-size-radius-md)]",
+    "border border-[color:var(--deframe-widget-color-border-secondary)]",
+    "font-[var(--deframe-widget-font-family)]"
+  ].join(" ");
+  const headerBaseClasses = [
+    "flex items-center",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]"
+  ].join(" ");
+  const titleBaseClasses = [
+    "flex-1",
+    "text-[15px]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+    "text-[color:var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
+  const dividerClasses = "h-px bg-[var(--deframe-widget-color-border-secondary)]";
+  const bodyBaseClasses = [
+    "flex flex-col",
+    "gap-[var(--deframe-widget-size-gap-md)]",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]"
+  ].join(" ");
+  const amountCardClasses = tailwindMerge.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",
+    hasAmountError ? "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)]"
+  );
+  const pixKeyCardClasses = tailwindMerge.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",
+    hasPixKeyError ? "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)]"
+  );
+  const footerBaseClasses = [
+    "flex gap-[var(--deframe-widget-size-gap-sm)]",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "pb-[var(--deframe-widget-size-padding-y-md)]"
+  ].join(" ");
+  const cancelButtonClasses = [
+    "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
+    "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
+    "border-[color:var(--deframe-widget-color-border-secondary)]",
+    "outline-none",
+    "transition-[background,color,border-color] duration-150",
+    "hover:opacity-100",
+    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
+    "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
+  const submitButtonClasses = [
+    "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border-none",
+    "text-[15px]",
+    isSubmitDisabledInternal ? "text-[color:var(--deframe-widget-color-text-primary-disabled)]" : "text-[color:var(--deframe-widget-color-text-primary-dark)]",
+    "outline-none",
+    "transition-[background,color] duration-200"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "offramp-input-form-simple-panel",
+      "data-test-id": "offramp-input-form-simple-view",
+      className: tailwindMerge.twMerge(panelBaseClasses, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "header",
+          {
+            "data-slot": "offramp-input-form-simple-header",
+            "data-test-id": "offramp-input-form-simple-view-header",
+            className: headerBaseClasses,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "offramp-input-form-simple-title",
+                  "data-test-id": "offramp-input-form-simple-view-title",
+                  className: titleBaseClasses,
+                  children: "Sacar"
+                }
+              ),
+              onClose && /* @__PURE__ */ jsxRuntime.jsx(
+                CloseButton_default,
+                {
+                  onClick: onClose,
+                  ariaLabel: "Close withdrawal panel",
+                  testId: "offramp-input-form-simple-view-close"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "offramp-input-form-simple-divider",
+            "data-test-id": "offramp-input-form-simple-view-divider",
+            className: dividerClasses
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlowTabHeader,
+          {
+            activeTab: activeTab != null ? activeTab : "pix",
+            cryptoHref: cryptoHref != null ? cryptoHref : "/dashboard/withdraw/onchain",
+            pixHref: pixHref != null ? pixHref : "/dashboard/withdraw/offramp"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "offramp-input-form-simple-divider-tabs",
+            "data-test-id": "offramp-input-form-simple-view-divider-tabs",
+            className: dividerClasses
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "offramp-input-form-simple-body",
+            "data-test-id": "offramp-input-form-simple-view-body",
+            className: bodyBaseClasses,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "offramp-input-form-simple-amount-card",
+                  "data-test-id": "offramp-input-form-simple-view-amount-card",
+                  onMouseEnter: handleHoverStart,
+                  onMouseLeave: handleHoverEnd,
+                  className: amountCardClasses,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        "data-slot": "offramp-input-form-simple-amount-top-row",
+                        "data-test-id": "offramp-input-form-simple-view-amount-top-row",
+                        className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              "data-test-id": "offramp-input-form-simple-view-currency-prefix",
+                              className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                              children: "R$"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-test-id": "offramp-input-form-simple-view-input-divider",
+                              className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            EarnAmountInputSimpleView,
+                            {
+                              value: amount,
+                              onChange: (e) => onAmountChange(e.target.value),
+                              ariaLabel: "Valor do saque",
+                              dollarAmountFormatted: ""
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-slot": "offramp-input-form-simple-balance-row",
+                        "data-test-id": "offramp-input-form-simple-view-balance-row",
+                        className: "mt-[var(--deframe-widget-size-gap-sm)]",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: tailwindMerge.twMerge(
+                              "text-[13px] font-[var(--deframe-widget-font-family)]",
+                              hasAmountError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
+                            ),
+                            children: [
+                              "Saldo: ",
+                              brlaBalance,
+                              " BRLA"
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: onPercentageSelect && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.div,
+                      {
+                        "data-slot": "offramp-input-form-simple-chips-row",
+                        "data-test-id": "offramp-input-form-simple-view-chips-row",
+                        initial: { opacity: 0, height: 0, marginTop: 0 },
+                        animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
+                        exit: { opacity: 0, height: 0, marginTop: 0 },
+                        transition: { duration: 0.15, ease: "easeOut" },
+                        style: { overflow: "hidden" },
+                        onMouseEnter: handleHoverStart,
+                        onMouseLeave: handleHoverEnd,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          EarnPercentageButtonsSimpleView,
+                          {
+                            onPercentageClick: onPercentageSelect,
+                            maxLabel: maxLabel != null ? maxLabel : "M\xE1x."
+                          }
+                        )
+                      }
+                    ) }),
+                    amountWarningMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      EarnInlineNotificationSimpleView,
+                      {
+                        variant: "error",
+                        message: amountWarningMessage
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "offramp-input-form-simple-pix-key-card",
+                  "data-test-id": "offramp-input-form-simple-view-pix-key-card",
+                  className: pixKeyCardClasses,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      PixKeySegmentedControl,
+                      {
+                        value: pixKeyType,
+                        onChange: handlePixKeyTypeChange
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-slot": "offramp-input-form-simple-pix-divider",
+                        "data-test-id": "offramp-input-form-simple-view-pix-divider",
+                        className: "h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-sm)]"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        "data-slot": "offramp-input-form-simple-pix-input",
+                        "data-test-id": "offramp-input-form-simple-view-pix-input",
+                        type: "text",
+                        value: pixKey,
+                        onChange: (e) => onPixKeyChange(e.target.value),
+                        placeholder: PIX_PLACEHOLDERS[pixKeyType],
+                        "aria-label": "Chave PIX",
+                        className: tailwindMerge.twMerge(
+                          "w-full bg-transparent outline-none",
+                          "text-[13px] [font-weight:var(--deframe-widget-font-weight-regular)]",
+                          "font-[var(--deframe-widget-font-family)]",
+                          "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
+                          "text-[color:var(--deframe-widget-color-text-primary)]",
+                          '[font-feature-settings:"tnum"]'
+                        ),
+                        spellCheck: false,
+                        autoComplete: "off"
+                      }
+                    ),
+                    (error || offrampError) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      EarnInlineNotificationSimpleView,
+                      {
+                        variant: "error",
+                        message: error || offrampError || ""
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EarnInlineNotificationSimpleView,
+                {
+                  variant: "info",
+                  message: "A chave PIX deve estar vinculada ao mesmo CPF do seu cadastro."
+                }
+              ),
+              hasActiveWithdrawal && /* @__PURE__ */ jsxRuntime.jsx(
+                EarnInlineNotificationSimpleView,
+                {
+                  variant: "warning",
+                  message: "Voc\xEA j\xE1 possui um saque em andamento."
+                }
+              ),
+              completedBanner && /* @__PURE__ */ jsxRuntime.jsx(
+                EarnInlineNotificationSimpleView,
+                {
+                  variant: "success",
+                  message: completedBanner
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "footer",
+          {
+            "data-slot": "offramp-input-form-simple-footer",
+            "data-test-id": "offramp-input-form-simple-view-footer",
+            className: footerBaseClasses,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SecondaryButton,
+                {
+                  type: "button",
+                  className: cancelButtonClasses,
+                  onClick: onBack,
+                  "aria-label": "Cancel withdrawal",
+                  "data-test-id": "offramp-input-form-simple-view-cancel",
+                  children: "Cancelar"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PrimaryButton,
+                {
+                  type: "button",
+                  className: submitButtonClasses,
+                  disabled: isSubmitDisabledInternal,
+                  onClick: onSubmit,
+                  "aria-label": "Confirmar saque",
+                  "data-test-id": "offramp-input-form-simple-view-submit",
+                  children: submitLabel
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function ExplorerLink2({ href, label, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      "data-test-id": "explorer-link",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": label || "View on explorer",
+      className: tailwindMerge.twMerge(
+        "text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-weight-semibold)] hover:underline text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)]",
+        className
+      ),
+      children: label || href
+    }
+  );
+}
+function StepStatusIcon2({ status = "completed" }) {
+  switch (status) {
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-[color:var(--deframe-widget-color-brand-primary)]", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) });
+    case "pending":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-yellow-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+      ] }) });
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-[var(--deframe-widget-color-bg-secondary)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-red-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }) });
+  }
+}
+function StepDisplay2({ step }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-primary)] flex-1", children: step.description }),
+    step.explorerUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ExplorerLink2, { href: step.explorerUrl, label: "Ver no Explorer", className: "text-[length:var(--deframe-widget-font-size-xs)] whitespace-nowrap" }) })
+  ] });
+}
+function PixOfframpProcessingDetails({ breakdown, estimatedTime, className }) {
+  if (!breakdown || breakdown.length === 0) {
+    return null;
+  }
+  const getProcessingSteps = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", children: [
+      estimatedTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-3 text-[length:var(--deframe-widget-font-size-sm)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Tempo estimado" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: estimatedTime })
+      ] }),
+      breakdown.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StepStatusIcon2, { status: step.status }),
+          index < breakdown.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px flex-1 min-h-[10px] bg-[var(--deframe-widget-color-bg-primary)] my-2" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(StepDisplay2, { step }) })
+      ] }, `step-${index}`))
+    ] });
+  };
+  const items = [
+    {
+      label: "",
+      value: getProcessingSteps(),
+      valueClassName: "flex flex-col gap-3 w-full"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "pix-offramp-processing-details", children: /* @__PURE__ */ jsxRuntime.jsx(
+    SummaryDetails,
+    {
+      title: "Detalhes",
+      items,
+      defaultOpen: true,
+      className: `bg-[var(--deframe-widget-color-bg-secondary)] ${className || ""}`
+    }
+  ) });
+}
+var defaultCloseIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
+function OfframpProcessingView({
+  step = "creating_ticket",
+  amount = "0",
+  summaryTitle = "",
+  summaryItems = [],
+  transferTxHash,
+  onClose,
+  closeIcon,
+  tokenIconUrl = "/brladigital_32.webp",
+  className
+}) {
+  const progressPercent = step === "creating_ticket" ? 50 : step === "transferring" ? 75 : 85;
+  const prepareStatus = step === "creating_ticket" ? "processing" : "done";
+  const signatureStatus = step === "waiting_pix" ? "done" : step === "transferring" ? "processing" : "pending";
+  const sendStatus = "pending";
+  const mapStatus = (status) => {
+    if (status === "done") return "completed";
+    return "pending";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
+        className
+      ),
+      "data-test-id": "offramp-processing-view",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition mb-4",
+              "aria-label": "Fechar",
+              "data-test-id": "offramp-processing-close-button",
+              children: closeIcon || defaultCloseIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-1 bg-[var(--deframe-widget-color-border-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full bg-[#1FC16B] transition-all duration-300", style: { width: `${progressPercent}%` } }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start justify-start gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[#F6A700] rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-10 h-10 animate-pulse", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(TextHeading, { variant: "h3", className: "mb-2 flex items-center justify-center gap-1", children: [
+                "Estamos enviando seu PIX",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex gap-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Seu PIX est\xE1 sendo enviado. Na maioria das vezes, cai em segundos." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: tokenIconUrl,
+                alt: "Token",
+                className: "w-10 h-10 rounded-full"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] ml-2", children: "Voc\xEA sacou via PIX" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TextHeading, { variant: "h5", className: "ml-2", children: [
+                amount,
+                " BRLA"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SummaryDetails,
+            {
+              title: summaryTitle,
+              items: summaryItems,
+              className: "bg-[var(--deframe-widget-color-bg-secondary)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PixOfframpProcessingDetails,
+            {
+              estimatedTime: "~2-5 min",
+              breakdown: [
+                {
+                  type: "prepare_withdrawal",
+                  description: "Preparando seu saque",
+                  status: mapStatus(prepareStatus)
+                },
+                {
+                  type: "blockchain_signature",
+                  description: "Assinatura",
+                  status: mapStatus(signatureStatus),
+                  explorerUrl: transferTxHash ? `https://polygonscan.com/tx/${transferTxHash}` : void 0
+                },
+                {
+                  type: "pix_transfer",
+                  description: "Enviando PIX para sua conta",
+                  status: mapStatus(sendStatus)
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { disabled: true, "aria-label": "Aguarde processamento", children: [
+            "Aguarde ",
+            /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}
+var OfframpProcessingSimpleView = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "offramp-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EarnFeedbackOverlaySimpleView,
+    {
+      variant: "loading",
+      title: "PROCESSANDO SAQUE...",
+      subtitle: "Seu PIX est\xE1 sendo enviado. Aguarde alguns instantes."
+    }
+  ) });
+};
+function Card({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "card",
+      className: tailwindMerge.twMerge(
+        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)] shadow-sm",
+        className
+      ),
+      children
+    }
+  );
+}
+var defaultCloseIcon2 = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
+var defaultArrowUpIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-10 h-10 text-[#1FC16B]", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
+function TransactionIdDisplay({ transactionId }) {
+  const truncated = transactionId.length > 16 ? `${transactionId.slice(0, 8)}...${transactionId.slice(-6)}` : transactionId;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-mono text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: truncated }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AddressDisplay,
+      {
+        address: transactionId,
+        className: "border-none bg-transparent p-0 gap-0",
+        textClassName: "hidden"
+      }
+    )
+  ] });
+}
+function OfframpSuccessView({
+  amount = "0",
+  feesFormatted = "0",
+  transactionId,
+  date = "",
+  onClose,
+  onConfirm,
+  closeIcon,
+  arrowUpIcon,
+  tokenIconUrl = "/brladigital_32.webp",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "w-full max-w-[620px] relative bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] overflow-hidden mx-auto mt-[75px] rounded-[var(--deframe-widget-size-radius-sm)] p-6 min-h-[80vh] flex flex-col",
+        className
+      ),
+      "data-test-id": "offramp-success-view",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "flex items-center justify-center w-8 h-8 text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition mb-4",
+              "aria-label": "Fechar",
+              "data-test-id": "offramp-success-close-button",
+              children: closeIcon || defaultCloseIcon2
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-1 bg-[#1FC16B] rounded-full" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start justify-start gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[#1FC16B]/20 rounded-full flex items-center justify-center", children: arrowUpIcon || defaultArrowUpIcon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", className: "mb-2", children: "PIX enviado com sucesso!" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: "Seu saque foi conclu\xEDdo e o valor j\xE1 est\xE1 na sua conta." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: tokenIconUrl, alt: "Token", className: "w-10 h-10 rounded-full" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "ml-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] ml-2", children: "Voc\xEA sacou via PIX" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TextHeading, { variant: "h5", className: "ml-2", children: [
+                amount,
+                " BRLA"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 w-full inline-flex flex-col justify-start items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-start items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Valor do saque" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: [
+                amount,
+                " BRLA"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Taxa" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: feesFormatted })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Metodo" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: "Transferencia banc\xE1ria (PIX)" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch h-8 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Status" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-0.5 bg-[#1FC16B]/10 rounded-3xl flex justify-end items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: "Sucesso" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-teal-600 rounded-full" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "ID da Transa\xE7\xE3o" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2", children: transactionId ? /* @__PURE__ */ jsxRuntime.jsx(TransactionIdDisplay, { transactionId }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: "-" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "self-stretch h-6 border-b border-[var(--deframe-widget-color-border-secondary)] inline-flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)] leading-5", children: "Data" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-5", children: date })
+            ] })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PrimaryButton,
+            {
+              onClick: onConfirm,
+              "aria-label": "Confirmar",
+              "data-test-id": "offramp-success-confirm-button",
+              children: "Ok, obrigado"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+var OfframpSuccessSimpleView = ({
+  onClose
+}) => {
+  React6__namespace.useEffect(() => {
+    if (!onClose) return;
+    const timer = setTimeout(onClose, 5e3);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "offramp-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EarnFeedbackOverlaySimpleView,
+    {
+      variant: "success",
+      title: "PIX Enviado com Sucesso!",
+      subtitle: "Seu saque foi conclu\xEDdo e o valor j\xE1 est\xE1 na sua conta."
+    }
+  ) });
+};
+var OfframpFailedSimpleView = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "offramp-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EarnFeedbackOverlaySimpleView,
+    {
+      variant: "error",
+      title: "Saque Falhou",
+      subtitle: "Ocorreu um erro ao processar seu saque. Tente novamente."
+    }
+  ) });
+};
 var DashboardCard = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "dashboard-card", className: tailwindMerge.twMerge("bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children });
 };
@@ -16506,6 +18469,8 @@ exports.KYCStatusItemCard = KYCStatusItemCard;
 exports.KYCStatusPage = KYCStatusPage;
 exports.KYCStatusPanel = KYCStatusPanel;
 exports.KYCStepIndicator = KYCStepIndicator;
+exports.KycLoadingView = KycLoadingView;
+exports.KycRequiredView = KycRequiredView;
 exports.Label = Label;
 exports.Link = Link;
 exports.ListItem = ListItem;
@@ -16516,6 +18481,14 @@ exports.LoadingDots = LoadingDots;
 exports.LowRiskBadge = LowRiskBadge;
 exports.MediumRiskBadge = MediumRiskBadge;
 exports.Navbar = Navbar;
+exports.OffchainMethodSelectionView = OffchainMethodSelectionView;
+exports.OfframpFailedSimpleView = OfframpFailedSimpleView;
+exports.OfframpInputFormSimpleView = OfframpInputFormSimpleView;
+exports.OfframpInputFormView = OfframpInputFormView;
+exports.OfframpProcessingSimpleView = OfframpProcessingSimpleView;
+exports.OfframpProcessingView = OfframpProcessingView;
+exports.OfframpSuccessSimpleView = OfframpSuccessSimpleView;
+exports.OfframpSuccessView = OfframpSuccessView;
 exports.OnchainDepositFormSimpleView = OnchainDepositFormSimpleView;
 exports.OnchainDepositFormView = OnchainDepositFormView;
 exports.OnchainDepositSuccessSimpleView = OnchainDepositSuccessSimpleView;
@@ -16528,6 +18501,11 @@ exports.OnchainWithdrawProcessingSimpleView = OnchainWithdrawProcessingSimpleVie
 exports.OnchainWithdrawSignatureWarningSimpleView = OnchainWithdrawSignatureWarningSimpleView;
 exports.OnchainWithdrawSignatureWarningView = OnchainWithdrawSignatureWarningView;
 exports.OnchainWithdrawSuccessView = OnchainWithdrawSuccessView;
+exports.OnrampFormSimpleView = OnrampFormSimpleView;
+exports.OnrampFormView = OnrampFormView;
+exports.OnrampPixcodeView = OnrampPixcodeView;
+exports.OnrampSuccessSimpleView = OnrampSuccessSimpleView;
+exports.OnrampSuccessView = OnrampSuccessView;
 exports.PercentageButton = PercentageButton;
 exports.PrimaryButton = PrimaryButton;
 exports.ProcessingBadge = ProcessingBadge;