@deframe-sdk/components 0.1.4 → 0.1.6

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React6 from 'react';
-import { useState, useEffect, useMemo } from 'react';
+import React6__default, { useState, useEffect, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdClose } from 'react-icons/md';
+import { HiChevronUp, HiChevronDown, HiChevronLeft, HiXMark, HiArrowRight } from 'react-icons/hi2';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -119,11 +120,50 @@ function PrimaryButton(_a) {
     "className",
     "type"
   ]);
-  const baseStyles = disabled ? "h-12 w-full rounded px-6 py-2.5 inline-flex justify-center items-center gap-2 overflow-hidden cursor-not-allowed bg-bg-muted dark:bg-bg-muted-dark text-text-disabled dark:text-text-disabled-dark opacity-50 text-center text-sm font-semibold font-poppins leading-5" : "h-12 w-full rounded px-6 py-2.5 inline-flex justify-center items-center gap-2 overflow-hidden bg-brand-primary text-text-inverse hover:shadow-md hover:opacity-90 focus:opacity-85 active:opacity-85 transition-all duration-200 text-center text-sm font-semibold font-poppins leading-5 cursor-pointer";
-  const buttonClasses = twMerge(baseStyles, className);
+  const baseClasses = [
+    /** layout */
+    "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
+    /** typography */
+    "font-[var(--deframe-widget-font-family)]",
+    "[font-size:var(--deframe-widget-font-size-md)]",
+    "[line-height:var(--deframe-widget-font-leading-md)]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+    /** spacing */
+    "px-[var(--deframe-widget-size-padding-x-xl)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]",
+    /** container */
+    "rounded-[var(--deframe-widget-size-radius-xs)]",
+    "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
+    "gap-[var(--deframe-widget-size-gap-sm)]"
+  ].join(" ");
+  const stateClasses = {
+    /** enabled state */
+    enabled: [
+      "hover:opacity-90",
+      "text-[var(--deframe-widget-color-text-primary)]",
+      "bg-[var(--deframe-widget-color-brand-primary)]",
+      "border-[color:var(--deframe-widget-color-border-primary)]",
+      "cursor-pointer"
+    ].join(" "),
+    /** disabled state */
+    disabled: [
+      "text-[var(--deframe-widget-color-text-primary-disabled)]",
+      "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
+      "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
+      "cursor-not-allowed"
+    ].join(" ")
+  };
+  const buttonClasses = twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
+    className
+  );
   return /* @__PURE__ */ jsx(
     "button",
     __spreadProps(__spreadValues({
+      "data-slot": "primary-button",
+      "data-test-id": "primary-button",
+      "aria-label": "primary action",
       type,
       className: buttonClasses,
       disabled
@@ -144,34 +184,52 @@ function SecondaryButton(_a) {
     "className",
     "type"
   ]);
-  const getStyles = () => {
-    if (disabled) {
-      return {
-        container: "h-12 rounded outline outline-1 outline-offset-[-1px] outline-border-default dark:outline-border-default-dark inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
-        inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
-        text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
-      };
-    }
-    return {
-      container: "h-12 rounded outline outline-1 outline-offset-[-1px] outline-border-subtle dark:outline-border-subtle-dark inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:outline-brand-primary focus:outline-brand-primary active:outline-border-default transition-colors duration-200 cursor-pointer",
-      inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2 hover:bg-brand-secondary-20 focus:bg-brand-secondary-20 active:bg-transparent transition-colors duration-200",
-      text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
-    };
+  const baseClasses = [
+    /** layout */
+    "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
+    /** typography */
+    "font-[var(--deframe-widget-font-family)]",
+    "[font-size:var(--deframe-widget-font-size-md)]",
+    "[line-height:var(--deframe-widget-font-leading-md)]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+    /** spacing */
+    "px-[var(--deframe-widget-size-padding-x-xl)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]",
+    /** container */
+    "bg-transparent",
+    "rounded-[var(--deframe-widget-size-radius-xs)]",
+    "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
+    "gap-[var(--deframe-widget-size-gap-sm)]"
+  ].join(" ");
+  const stateClasses = {
+    enabled: [
+      "text-[color:var(--deframe-widget-color-brand-secondary)]",
+      "border-[color:var(--deframe-widget-color-border-secondary)]",
+      "hover:opacity-90",
+      "cursor-pointer"
+    ].join(" "),
+    disabled: [
+      "text-[color:var(--deframe-widget-color-text-secondary-disabled)]",
+      "border-[color:var(--deframe-widget-color-border-secondary-disabled)]",
+      "cursor-not-allowed"
+    ].join(" ")
   };
-  const styles = getStyles();
-  const containerClasses = twMerge(
-    styles.container,
-    disabled && "cursor-not-allowed",
+  const buttonClasses = twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsx(
     "button",
     __spreadProps(__spreadValues({
+      "data-slot": "secondary-button",
+      "data-test-id": "secondary-button",
+      "aria-label": "secondary action",
       type,
-      className: containerClasses,
+      className: buttonClasses,
       disabled
     }, props), {
-      children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
+      children
     })
   );
 }
@@ -187,34 +245,49 @@ function TertiaryButton(_a) {
     "className",
     "type"
   ]);
-  const getStyles = () => {
-    if (disabled) {
-      return {
-        container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
-        inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
-        text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
-      };
-    }
-    return {
-      container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:shadow-md transition-colors duration-200 cursor-pointer",
-      inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2 hover:bg-brand-tint dark:hover:bg-brand-tint-dark focus:bg-brand-tint-75 dark:focus:bg-brand-tint-75-dark active:bg-brand-tint-60 dark:active:bg-brand-tint-60-dark transition-colors duration-200",
-      text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
-    };
+  const baseClasses = [
+    /** layout */
+    "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
+    /** typography */
+    "font-[var(--deframe-widget-font-family)]",
+    "[font-size:var(--deframe-widget-font-size-md)]",
+    "[line-height:var(--deframe-widget-font-leading-md)]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]",
+    /** spacing */
+    "px-[var(--deframe-widget-size-padding-x-xl)]",
+    "py-[var(--deframe-widget-size-padding-y-md)]",
+    /** container */
+    "bg-transparent border-none",
+    "rounded-[var(--deframe-widget-size-radius-xs)]",
+    "gap-[var(--deframe-widget-size-gap-sm)]"
+  ].join(" ");
+  const stateClasses = {
+    enabled: [
+      "text-[color:var(--deframe-widget-color-brand-tertiary)]",
+      "hover:opacity-90",
+      "cursor-pointer"
+    ].join(" "),
+    disabled: [
+      "text-[color:var(--deframe-widget-color-text-tertiary-disabled)]",
+      "cursor-not-allowed"
+    ].join(" ")
   };
-  const styles = getStyles();
-  const containerClasses = twMerge(
-    styles.container,
-    disabled && "cursor-not-allowed",
+  const buttonClasses = twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsx(
     "button",
     __spreadProps(__spreadValues({
+      "data-slot": "tertiary-button",
+      "data-test-id": "tertiary-button",
+      "aria-label": "tertiary action",
       type,
-      className: containerClasses,
+      className: buttonClasses,
       disabled
     }, props), {
-      children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
+      children
     })
   );
 }
@@ -1350,6 +1423,130 @@ var SummaryDetails = ({
     }
   );
 };
+var SummaryDetailsCryptoControlV2 = ({
+  title,
+  items,
+  defaultOpen = false,
+  className = "",
+  summaryClassName = "",
+  contentClassName = "",
+  showDividers = true
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      "data-test-id": "summary-details-v2",
+      "data-slot": "summary-details-v2",
+      className: twMerge(
+        "bg-[var(--color-bg-subtle,#1a1a1a)] rounded-lg border border-border-default dark:border-border-default-dark p-4 w-full max-w-[320px] group",
+        className
+      ),
+      open: defaultOpen,
+      children: [
+        /* @__PURE__ */ jsx(
+          "summary",
+          {
+            "data-test-id": "summary-details-v2-summary",
+            "data-slot": "summary-details-v2-summary",
+            className: twMerge("cursor-pointer list-none", summaryClassName),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-test-id": "summary-details-v2-title",
+                  "data-slot": "summary-details-v2-title",
+                  className: "text-[15px] font-semibold text-text-primary dark:text-text-primary-dark",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-test-id": "summary-details-v2-chevron",
+                  "data-slot": "summary-details-v2-chevron",
+                  className: "w-4 h-4 text-text-secondary dark:text-text-secondary-dark transition-transform duration-300 group-open:rotate-180 flex-shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 9l7 7 7-7" })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-test-id": "summary-details-v2-top-divider",
+            "data-slot": "summary-details-v2-top-divider",
+            className: "h-px bg-border-default dark:bg-border-default-dark mt-3"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-test-id": "summary-details-v2-content",
+            "data-slot": "summary-details-v2-content",
+            className: twMerge("mt-0", contentClassName),
+            children: items.map((item, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-test-id": "summary-details-v2-row",
+                  "data-slot": "summary-details-v2-row",
+                  className: "flex justify-between items-center py-[10px] gap-3",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-test-id": "summary-details-v2-row-label",
+                        "data-slot": "summary-details-v2-row-label",
+                        className: twMerge(
+                          "text-[11px] font-medium uppercase tracking-[0.07em] text-text-tertiary dark:text-text-tertiary-dark flex-shrink-0",
+                          item.labelClassName
+                        ),
+                        children: item.label
+                      }
+                    ),
+                    typeof item.value === "string" ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-test-id": "summary-details-v2-row-value",
+                        "data-slot": "summary-details-v2-row-value",
+                        className: twMerge(
+                          "text-[13px] font-semibold text-text-primary dark:text-text-primary-dark text-right",
+                          item.valueClassName
+                        ),
+                        children: item.value
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-test-id": "summary-details-v2-row-value",
+                        "data-slot": "summary-details-v2-row-value",
+                        className: twMerge("text-right", item.valueClassName),
+                        children: item.value
+                      }
+                    )
+                  ]
+                }
+              ),
+              showDividers && i < items.length - 1 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-test-id": "summary-details-v2-row-divider",
+                  "data-slot": "summary-details-v2-row-divider",
+                  className: "h-px bg-border-default dark:bg-border-default-dark"
+                }
+              )
+            ] }, i))
+          }
+        )
+      ]
+    }
+  );
+};
 var ActionSheet = ({
   id,
   currentActionSheetId,
@@ -1616,7 +1813,731 @@ function DeframeComponentsProvider({
     }
   );
 }
+var InfoRow = ({ children, borderBottom, className }) => {
+  const baseClasses = "self-stretch inline-flex justify-between items-start";
+  const borderClasses = borderBottom ? "border-b border-border-default dark:border-border-default-dark pb-sm" : "";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row", className: twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoLabel = ({ children, className }) => {
+  const baseClasses = "text-sm text-text-secondary dark:text-text-secondary-dark";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-label", className: twMerge(baseClasses, className), children });
+};
+var variantClasses = {
+  default: "text-text-primary dark:text-text-primary-dark",
+  success: "text-state-success",
+  warning: "text-state-warning",
+  error: "text-state-error"
+};
+var InfoValue = ({ children, variant = "default", className }) => {
+  const baseClasses = "text-sm font-semibold";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-value", className: twMerge(baseClasses, variantClasses[variant], className), children });
+};
+var InfoRowWithIcon = ({ children, borderBottom, className }) => {
+  const baseClasses = "flex items-start justify-between h-[17px]";
+  const borderClasses = borderBottom ? "border-b border-border-default dark:border-border-default-dark pb-sm" : "";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row-with-icon", className: twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoRowIconLabel = ({ children, className }) => {
+  const baseClasses = "text-sm text-text-secondary dark:text-text-secondary-dark";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "info-row-icon-label", className: twMerge(baseClasses, className), children: [
+    "\u2022 ",
+    children
+  ] });
+};
+var InfoRowIconValue = ({ children, className }) => {
+  const baseClasses = "text-sm font-semibold text-text-primary dark:text-text-primary-dark";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "info-row-icon-value", className: twMerge(baseClasses, className), children });
+};
+var CollapsibleInfoRow = ({
+  label,
+  value,
+  children,
+  defaultOpen = false,
+  className,
+  collapseLabel,
+  expandLabel
+}) => {
+  const [isOpen, setIsOpen] = React6__default.useState(defaultOpen);
+  const baseClasses = "flex flex-col gap-sm w-full";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "collapsible-info-row", className: twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: "flex items-start justify-between w-full text-left h-[18px] cursor-pointer",
+        "aria-expanded": isOpen,
+        "aria-label": `${isOpen ? collapseLabel : expandLabel} ${label}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[2px]", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-text-sm text-text-secondary dark:text-text-secondary-dark", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: isOpen ? /* @__PURE__ */ jsx(HiChevronUp, { className: "w-3 h-3 text-text-secondary dark:text-text-secondary-dark" }) : /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-text-secondary dark:text-text-secondary-dark" }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-text-sm font-semibold text-text-secondary dark:text-text-secondary-dark", children: value })
+        ]
+      }
+    ),
+    isOpen && children
+  ] });
+};
+var BackgroundContainer = ({ children, className }) => {
+  const baseClasses = "w-full flex-1 min-h-0 px-md bg-bg-default lg:bg-bg-subtle dark:bg-bg-default-dark lg:dark:bg-bg-subtle-dark text-text-primary dark:text-text-primary-dark flex flex-col relative overflow-y-auto";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "background-container", className: twMerge(baseClasses, className), children });
+};
+var SectionCard = ({ children, className }) => {
+  const baseClasses = "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised rounded shadow-sm p-md flex flex-col gap-sm";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "section-card", className: twMerge(baseClasses, className), children });
+};
+var Navbar = ({ children, className }) => {
+  const baseClasses = "w-full px-sm pr-md pt-sm pb-md border-b items-center border-border-subtle dark:border-border-subtle-dark flex";
+  return /* @__PURE__ */ jsx("nav", { "data-test-id": "navbar", className: twMerge(baseClasses, className), children });
+};
+var gapClasses = {
+  xs: "gap-xs",
+  sm: "gap-sm",
+  md: "gap-md",
+  lg: "gap-lg"
+};
+var FlexCol = ({ children, className, gap = "xs" }) => {
+  const baseClasses = "flex flex-col";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "flex-col", className: twMerge(baseClasses, gapClasses[gap], className), children });
+};
+var gapClasses2 = {
+  xs: "gap-xs",
+  sm: "gap-sm",
+  md: "gap-md",
+  lg: "gap-lg"
+};
+var FlexRow = ({ children, className, gap = "xs" }) => {
+  const baseClasses = "flex items-center";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "flex-row", className: twMerge(baseClasses, gapClasses2[gap], className), children });
+};
+var ScrollableContent = ({ children, className }) => {
+  const baseClasses = "flex-1 overflow-y-auto px-md py-lg";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "scrollable-content", className: twMerge(baseClasses, className), children });
+};
+var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
+  const baseClasses = "w-full px-sm pr-md pt-sm pb-md border-b border-border-subtle dark:border-border-subtle-dark flex items-center";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "details-header", className: twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-test-id": "details-header-back-button",
+        onClick: onBack,
+        className: "w-12 h-12 rounded-full flex items-center justify-center text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary cursor-pointer",
+        "aria-label": backAriaLabel,
+        children: /* @__PURE__ */ jsx(HiChevronLeft, { className: "w-6 h-6 text-text-tertiary dark:text-text-tertiary-dark" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsx(TextHeading_default, { variant: "h-large", children: title }) })
+  ] });
+};
+var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
+  const baseClasses = "w-12 h-12 rounded-full flex items-center justify-center text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary transition-colors cursor-pointer";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-test-id": testId != null ? testId : "close-button",
+      onClick,
+      className: twMerge(baseClasses, className),
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(HiXMark, { className: "w-6 h-6" })
+    }
+  );
+};
+var HighRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "high-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-size": "Small",
+      "data-type": "Failed",
+      className: "h-6 px-2 py-1 opacity-95 bg-red-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-state-error flex justify-center items-center gap-1",
+      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-state-error text-xs font-normal font-poppins leading-4", children: label }) })
+    }
+  ) });
+};
+var MediumRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "medium-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-size": "Small",
+      "data-type": "Warning",
+      className: "h-6 px-2 py-1 opacity-95 bg-amber-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-state-warning flex justify-center items-center gap-1",
+      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-state-warning text-xs font-normal font-poppins leading-4", children: label }) })
+    }
+  ) });
+};
+var LowRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "low-risk-badge", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-size": "Small",
+      "data-type": "Completed",
+      className: "h-6 px-2 py-1 opacity-95 bg-teal-600/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-state-success flex justify-center items-center gap-1",
+      children: /* @__PURE__ */ jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsx("div", { className: "justify-start text-state-success text-xs font-normal font-poppins leading-4", children: label }) })
+    }
+  ) });
+};
+var gapClasses3 = {
+  xs: "gap-xs",
+  sm: "gap-sm",
+  md: "gap-md",
+  lg: "gap-lg"
+};
+var HistoryFlexCol = ({ children, className, gap = "xs" }) => /* @__PURE__ */ jsx("div", { "data-test-id": "history-flex-col", className: twMerge("flex flex-col", gapClasses3[gap], className), children });
+var TransactionTypeLabel = ({ children }) => /* @__PURE__ */ jsx("p", { "data-test-id": "transaction-type-label", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark", children });
+var Amount = ({ children }) => /* @__PURE__ */ jsx("p", { "data-test-id": "amount", className: "text-accent-md-mobile text-text-secondary dark:text-text-secondary-dark", children });
+var AmountInUsd = ({ children }) => /* @__PURE__ */ jsxs("p", { "data-test-id": "amount-in-usd", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark", children: [
+  "~ ",
+  children
+] });
+var TokenIcon = ({ src, alt }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    "data-test-id": "token-icon",
+    src,
+    alt,
+    className: "w-8 h-8 rounded-full",
+    onError: (e) => {
+      const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
+      e.target.src = `https://placehold.co/40x40?text=${fallbackText}`;
+    }
+  }
+);
+var SuccessBadge = ({ children }) => /* @__PURE__ */ jsxs("div", { "data-test-id": "success-badge", className: "bg-[rgba(43,161,118,0.12)] flex items-center gap-xs px-[8px] py-[2px] rounded-[24px]", children: [
+  /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-state-success" }),
+  /* @__PURE__ */ jsx("span", { className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children })
+] });
+var truncateHash = (hash, chars = 6) => {
+  if (hash.length <= chars * 2 + 3) return hash;
+  return `${hash.slice(0, chars + 2)}...${hash.slice(-chars)}`;
+};
+var TransactionId = ({ hash }) => {
+  if (!hash) {
+    return /* @__PURE__ */ jsx("span", { "data-test-id": "transaction-id", className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children: "-" });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "transaction-id", className: "flex items-center gap-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children: truncateHash(hash) }),
+    /* @__PURE__ */ jsx(
+      AddressDisplay,
+      {
+        address: hash,
+        className: "border-none bg-transparent p-0 gap-0",
+        textClassName: "hidden"
+      }
+    )
+  ] });
+};
+var ExplorerLink = ({ href, children }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    "data-test-id": "explorer-link",
+    href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "text-brand-primary underline text-sm font-semibold font-poppins",
+    children
+  }
+);
+var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxs(HistoryFlexCol, { className: "items-end", children: [
+  /* @__PURE__ */ jsx("p", { "data-test-id": "two-line-value-primary", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark font-semibold", children: primary }),
+  /* @__PURE__ */ jsx("p", { "data-test-id": "two-line-value-secondary", className: "text-text-sm-mobile text-text-secondary dark:text-text-secondary-dark", children: secondary })
+] });
+var HistoryDepositDetailsView = ({
+  transactionTypeLabel,
+  symbol,
+  amountWithSymbol,
+  amountInUsdFormatted,
+  shouldShowFlow,
+  assetIn,
+  assetOut,
+  primaryAssetIconUrl,
+  protocolLabel,
+  statusLabel,
+  txHash,
+  date,
+  explorerUrl,
+  onClose,
+  labels
+}) => {
+  return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsx(DetailsHeader, { title: labels.transactionDetailsTitle, onBack: onClose }),
+    /* @__PURE__ */ jsx(ScrollableContent, { children: /* @__PURE__ */ jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
+        shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxs(Amount, { children: [
+                assetIn.amount,
+                " ",
+                assetIn.symbol
+              ] }),
+              assetIn.amountInUSD ? /* @__PURE__ */ jsx(AmountInUsd, { children: assetIn.amountInUSD }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxs(Amount, { children: [
+                assetOut.amount,
+                " ",
+                assetOut.symbol
+              ] }),
+              assetOut.amountInUSD ? /* @__PURE__ */ jsx(AmountInUsd, { children: assetOut.amountInUSD }) : null
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsx(FlexCol, { children: /* @__PURE__ */ jsxs(FlexRow, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Amount, { children: amountWithSymbol }),
+            amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.currencyLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: symbol })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.totalAmountLabel }),
+          /* @__PURE__ */ jsx(TwoLineValue, { primary: amountInUsdFormatted, secondary: amountWithSymbol })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.operationCostLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: labels.operationCostSponsoredLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.protocolLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: protocolLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.statusLabel }),
+          /* @__PURE__ */ jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionIdLabel }),
+          /* @__PURE__ */ jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.dateLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: date })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionLabel }),
+          /* @__PURE__ */ jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+};
+var HistoryWithdrawDetailsView = ({
+  transactionTypeLabel,
+  symbol,
+  amountWithSymbol,
+  amountInUsdFormatted,
+  shouldShowFlow,
+  assetIn,
+  assetOut,
+  primaryAssetIconUrl,
+  protocolLabel,
+  statusLabel,
+  txHash,
+  date,
+  explorerUrl,
+  onClose,
+  labels
+}) => {
+  return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsx(DetailsHeader, { title: labels.transactionDetailsTitle, onBack: onClose }),
+    /* @__PURE__ */ jsx(ScrollableContent, { children: /* @__PURE__ */ jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
+        shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxs(Amount, { children: [
+                assetIn.amount,
+                " ",
+                assetIn.symbol
+              ] }),
+              assetIn.amountInUSD ? /* @__PURE__ */ jsx(AmountInUsd, { children: assetIn.amountInUSD }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxs(Amount, { children: [
+                assetOut.amount,
+                " ",
+                assetOut.symbol
+              ] }),
+              assetOut.amountInUSD ? /* @__PURE__ */ jsx(AmountInUsd, { children: assetOut.amountInUSD }) : null
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(FlexRow, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsx(FlexCol, { children: /* @__PURE__ */ jsxs(FlexRow, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Amount, { children: amountWithSymbol }),
+            amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.currencyLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: symbol })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.totalAmountLabel }),
+          /* @__PURE__ */ jsx(TwoLineValue, { primary: amountInUsdFormatted, secondary: amountWithSymbol })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.operationCostLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: labels.operationCostSponsoredLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.protocolLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: protocolLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.statusLabel }),
+          /* @__PURE__ */ jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionIdLabel }),
+          /* @__PURE__ */ jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.dateLabel }),
+          /* @__PURE__ */ jsx(InfoValue, { children: date })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionLabel }),
+          /* @__PURE__ */ jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+};
+var SwapNetworkSelectorView = ({
+  chainLabel,
+  chainImage,
+  onClick,
+  directionLabel = "De",
+  testId = "swap-network-selector",
+  className
+}) => {
+  const baseClasses = "flex flex-row items-center gap-xs";
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": testId, className: twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsx(TextBody_default, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-testid": testId,
+        type: "button",
+        onClick,
+        className: "ml-6 bg-bg-muted dark:bg-bg-muted-dark border border-border-subtle dark:border-border-subtle-dark rounded-lg flex items-center gap-xs px-sm py-xs hover:border-border-default dark:hover:border-border-default-dark transition-colors text-text-sm text-text-secondary dark:text-text-secondary-dark cursor-pointer",
+        "aria-label": `${directionLabel} ${chainLabel}`,
+        children: [
+          chainImage ? /* @__PURE__ */ jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-full" }) : null,
+          /* @__PURE__ */ jsx("span", { children: chainLabel }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-text-tertiary dark:text-text-tertiary-dark" }) })
+        ]
+      }
+    )
+  ] });
+};
+var SwapQuoteHeaderView = ({
+  label,
+  timerElement,
+  className
+}) => {
+  const baseClasses = "border-b border-border-default dark:border-border-default-dark pb-sm";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-header", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx(TextBody_default, { as: "span", variant: "text-small", className: "font-semibold text-text-secondary dark:text-text-secondary-dark inline-flex items-center", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-md", children: timerElement })
+  ] }) });
+};
+var SwapAmountInputView = ({
+  value,
+  hasError,
+  onChange,
+  maxFractionDigits = 6,
+  field,
+  ariaLabel = "Amount to swap",
+  className
+}) => {
+  const normalizeAmountInput = (raw) => {
+    let val = raw.replace(/[^\d.,]/g, "");
+    const endsWithSeparator = /[.,]$/.test(val);
+    val = val.replace(/,/g, ".");
+    const firstDot = val.indexOf(".");
+    if (firstDot !== -1) {
+      const intPart = val.slice(0, firstDot);
+      const fractional = val.slice(firstDot + 1).replace(/\./g, "").slice(0, maxFractionDigits);
+      if (fractional.length > 0) {
+        val = `${intPart}.${fractional}`;
+      } else {
+        val = endsWithSeparator ? `${intPart}.` : intPart;
+      }
+    }
+    if (val.startsWith(".")) {
+      val = `0${val}`;
+    }
+    return val;
+  };
+  const baseClasses = "text-h2-mobile font-extrabold bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-text-disabled dark:placeholder:text-text-disabled-dark";
+  const colorClasses = hasError ? "text-state-error dark:text-state-error" : "text-text-primary dark:text-text-primary-dark";
+  return /* @__PURE__ */ jsx(
+    "input",
+    __spreadProps(__spreadValues({
+      "data-test-id": "swap-flow-amount-input",
+      placeholder: "0.00",
+      type: "text",
+      inputMode: "decimal",
+      autoComplete: "off",
+      "aria-label": ariaLabel,
+      min: "0",
+      step: "any",
+      value,
+      className: twMerge(baseClasses, colorClasses, className)
+    }, field), {
+      onChange: (event) => {
+        let normalized = normalizeAmountInput(event.target.value);
+        if (normalized && parseFloat(normalized) < 0) {
+          normalized = "0";
+        }
+        onChange(normalized);
+      },
+      onWheel: (event) => {
+        event.currentTarget.blur();
+      }
+    })
+  );
+};
+var SwapOutputAmountView = ({
+  displayOutput,
+  isLoading,
+  loadingElement,
+  searchingQuoteLabel = "Searching quote...",
+  className
+}) => {
+  const baseClasses = "text-h2-mobile font-extrabold text-right w-full min-w-[120px] text-text-primary dark:text-text-primary-dark";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody_default, { as: "span", variant: "text-small", className: "text-text-disabled dark:text-text-disabled-dark inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+};
+var SwapQuoteErrorsView = ({
+  hasQuoteError,
+  hasBytecodeError,
+  quoteErrorMessage = "Unable to get quote for this transaction",
+  bytecodeErrorMessage = "Error building transaction"
+}) => {
+  return /* @__PURE__ */ jsxs("div", { "data-test-id": "swap-quote-errors", children: [
+    hasQuoteError && /* @__PURE__ */ jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: quoteErrorMessage
+      }
+    ) }),
+    hasBytecodeError && /* @__PURE__ */ jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: bytecodeErrorMessage
+      }
+    ) })
+  ] });
+};
+var SLIPPAGE_OPTIONS = [10, 50, 100];
+var SwapSlippageToleranceButtonsView = ({
+  slippageBps,
+  onSelect,
+  formatPercentage,
+  className
+}) => {
+  const baseClasses = "flex gap-xs";
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-slippage-tolerance-buttons", className: twMerge(baseClasses, className), children: SLIPPAGE_OPTIONS.map((option) => {
+    const isActive = slippageBps === option;
+    const activeClasses = "border-brand-primary text-brand-primary bg-brand-tint dark:bg-brand-tint-dark";
+    const inactiveClasses = "border-border-subtle dark:border-border-subtle-dark text-text-secondary dark:text-text-secondary-dark bg-bg-default dark:bg-bg-default-dark";
+    const buttonBase = "px-sm py-xs rounded border text-text-sm cursor-pointer";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-test-id": `slippage-option-${option}`,
+        type: "button",
+        onClick: () => onSelect(option),
+        className: twMerge(buttonBase, isActive ? activeClasses : inactiveClasses),
+        "aria-label": `${formatPercentage(option)}% slippage`,
+        "aria-pressed": isActive,
+        children: [
+          formatPercentage(option),
+          "%"
+        ]
+      },
+      option
+    );
+  }) });
+};
+var SwapTokenSelectorView = ({
+  token,
+  onClick,
+  testId = "swap-token-selector",
+  selectTokenLabel = "Select token",
+  className
+}) => {
+  const baseClasses = "h-[56px] border border-border-default dark:border-border-default-dark rounded overflow-hidden hover:border-border-strong dark:hover:border-border-strong-dark transition-colors flex items-center px-sm py-[6px] w-full cursor-pointer";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-test-id": testId,
+      type: "button",
+      onClick,
+      className: twMerge(baseClasses, className),
+      "aria-label": token ? token.symbol : selectTokenLabel,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-sm flex-1", children: token ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          token.logoURI ? /* @__PURE__ */ jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-bg-raised dark:bg-bg-raised-dark text-text-secondary dark:text-text-secondary-dark flex items-center justify-center text-[10px] font-semibold", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
+          /* @__PURE__ */ jsx(TextBody_default, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
+        ] }) : /* @__PURE__ */ jsx(TextBody_default, { as: "span", className: "text-text-secondary dark:text-text-secondary-dark", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-text-tertiary dark:text-text-tertiary-dark" }) })
+      ]
+    }
+  );
+};
+var SwapQuoteBlockchainCostsView = ({
+  totalCostFormatted,
+  feePercentage,
+  gasCostFormatted,
+  protocolFee,
+  blockchainCostsLabel = "Blockchain Costs",
+  networkGasLabel = "Network Gas",
+  protocolFeeLabel = "Protocol Fee",
+  collapseLabel = "Collapse",
+  expandLabel = "Expand"
+}) => {
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-blockchain-costs", children: /* @__PURE__ */ jsx(
+    CollapsibleInfoRow,
+    {
+      label: blockchainCostsLabel,
+      value: `${totalCostFormatted} ~ ${feePercentage}%`,
+      defaultOpen: true,
+      collapseLabel,
+      expandLabel,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
+        /* @__PURE__ */ jsxs(InfoRowWithIcon, { children: [
+          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: networkGasLabel }),
+          /* @__PURE__ */ jsx(InfoRowIconValue, { children: gasCostFormatted })
+        ] }),
+        /* @__PURE__ */ jsxs(InfoRowWithIcon, { borderBottom: true, children: [
+          /* @__PURE__ */ jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
+          /* @__PURE__ */ jsx(InfoRowIconValue, { children: protocolFee })
+        ] })
+      ] })
+    }
+  ) });
+};
+var ChooseAStrategyActionsheetView = ({
+  isOpen,
+  currentActionSheetId,
+  assetName,
+  apy,
+  logoUrl,
+  riskLevel,
+  onStrategyClick,
+  onClose,
+  yieldLabel,
+  apyLabel = "APY",
+  riskBadgeLabels,
+  closeAriaLabel = "Close"
+}) => {
+  const resolvedYieldLabel = yieldLabel != null ? yieldLabel : `Yield ${assetName}`;
+  const badges = {
+    low: /* @__PURE__ */ jsx(LowRiskBadge, { label: riskBadgeLabels.low }),
+    medium: /* @__PURE__ */ jsx(MediumRiskBadge, { label: riskBadgeLabels.medium }),
+    high: /* @__PURE__ */ jsx(HighRiskBadge, { label: riskBadgeLabels.high })
+  };
+  const Badge = badges[riskLevel];
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "choose-strategy-actionsheet", className: "flex justify-center", children: /* @__PURE__ */ jsx(
+    ActionSheet,
+    {
+      id: "choose-strategy",
+      currentActionSheetId,
+      isOpen,
+      onClose,
+      position: "bottom",
+      height: "full",
+      contentClassName: "w-full max-w-[620px] mx-auto",
+      children: /* @__PURE__ */ jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsx(TextHeading_default, { children: resolvedYieldLabel }),
+            /* @__PURE__ */ jsx("br", {})
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: /* @__PURE__ */ jsxs(ListItem, { className: "flex-shrink-0", onClick: onStrategyClick, children: [
+            /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-full" }) }),
+            /* @__PURE__ */ jsxs(ListItemContent, { className: "gap-1", children: [
+              /* @__PURE__ */ jsx(TextBody_default, { children: resolvedYieldLabel }),
+              /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: Badge })
+            ] }),
+            /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-state-success", children: [
+                apy,
+                "% ",
+                apyLabel
+              ] }),
+              /* @__PURE__ */ jsx(HiArrowRight, { className: "w-4 h-4" })
+            ] }) })
+          ] }) })
+        ] })
+      ] })
+    }
+  ) });
+};
+var StrategyDetailsView = ({
+  logoUrl,
+  title,
+  description,
+  strategyInfo,
+  onBack,
+  onDeposit,
+  headerTitle = "Details",
+  strategyInfoTitle = "Strategy Info",
+  depositButtonLabel = "Deposit",
+  backAriaLabel = "Back"
+}) => {
+  return /* @__PURE__ */ jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
+    /* @__PURE__ */ jsx("div", { "data-test-id": "strategy-details-content", className: "flex-1 min-h-0 overflow-y-auto p-md py-lg pb-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-lg min-h-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-col items-start gap-sm", children: [
+        /* @__PURE__ */ jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-full" }),
+        /* @__PURE__ */ jsx(TextHeading_default, { variant: "h5", children: title })
+      ] }),
+      /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: description }),
+      /* @__PURE__ */ jsx(
+        SummaryDetails,
+        {
+          title: strategyInfoTitle,
+          items: strategyInfo,
+          defaultOpen: true,
+          className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { "data-test-id": "strategy-details-footer", className: "sticky bottom-0 left-0 right-0 border-t border-border-subtle dark:border-border-subtle-dark px-md py-md", children: /* @__PURE__ */ jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositButtonLabel }) })
+  ] });
+};
 
-export { ActionButton, ActionSheet, AddressDisplay, BannerNotification, ConnectWalletList, Currency, DeframeComponentsProvider, Currency as Fiat, Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, PercentageButton, PrimaryButton, SecondaryButton, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, SummaryDetails, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent_default as TextAccent, TextBody_default as TextBody, TextHeading_default as TextHeading, Title, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
+export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, CloseButton, CollapsibleInfoRow, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ScrollableContent, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StrategyDetailsView, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAmountInputView, SwapNetworkSelectorView, SwapOutputAmountView, SwapQuoteBlockchainCostsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSlippageToleranceButtonsView, SwapTokenSelectorView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent_default as TextAccent, TextBody_default as TextBody, TextHeading_default as TextHeading, Title, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map