@deframe-sdk/components 0.1.4 → 0.1.6

package/dist/index.js

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React6 = require('react');
 var framerMotion = require('framer-motion');
 var md = require('react-icons/md');
+var hi2 = require('react-icons/hi2');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -140,11 +141,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 = tailwindMerge.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 = tailwindMerge.twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
+    className
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     __spreadProps(__spreadValues({
+      "data-slot": "primary-button",
+      "data-test-id": "primary-button",
+      "aria-label": "primary action",
       type,
       className: buttonClasses,
       disabled
@@ -165,34 +205,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 = tailwindMerge.twMerge(
-    styles.container,
-    disabled && "cursor-not-allowed",
+  const buttonClasses = tailwindMerge.twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.text, children }) })
+      children
     })
   );
 }
@@ -208,34 +266,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 = tailwindMerge.twMerge(
-    styles.container,
-    disabled && "cursor-not-allowed",
+  const buttonClasses = tailwindMerge.twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.text, children }) })
+      children
     })
   );
 }
@@ -1371,6 +1444,130 @@ var SummaryDetails = ({
     }
   );
 };
+var SummaryDetailsCryptoControlV2 = ({
+  title,
+  items,
+  defaultOpen = false,
+  className = "",
+  summaryClassName = "",
+  contentClassName = "",
+  showDividers = true
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "details",
+    {
+      "data-test-id": "summary-details-v2",
+      "data-slot": "summary-details-v2",
+      className: tailwindMerge.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__ */ jsxRuntime.jsx(
+          "summary",
+          {
+            "data-test-id": "summary-details-v2-summary",
+            "data-slot": "summary-details-v2-summary",
+            className: tailwindMerge.twMerge("cursor-pointer list-none", summaryClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 9l7 7 7-7" })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "summary-details-v2-content",
+            "data-slot": "summary-details-v2-content",
+            className: tailwindMerge.twMerge("mt-0", contentClassName),
+            children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "summary-details-v2-row-label",
+                        "data-slot": "summary-details-v2-row-label",
+                        className: tailwindMerge.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__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-test-id": "summary-details-v2-row-value",
+                        "data-slot": "summary-details-v2-row-value",
+                        className: tailwindMerge.twMerge(
+                          "text-[13px] font-semibold text-text-primary dark:text-text-primary-dark text-right",
+                          item.valueClassName
+                        ),
+                        children: item.value
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-test-id": "summary-details-v2-row-value",
+                        "data-slot": "summary-details-v2-row-value",
+                        className: tailwindMerge.twMerge("text-right", item.valueClassName),
+                        children: item.value
+                      }
+                    )
+                  ]
+                }
+              ),
+              showDividers && i < items.length - 1 && /* @__PURE__ */ jsxRuntime.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,
@@ -1637,30 +1834,785 @@ 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__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row", className: tailwindMerge.twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoLabel = ({ children, className }) => {
+  const baseClasses = "text-sm text-text-secondary dark:text-text-secondary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-label", className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "info-value", className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-with-icon", className: tailwindMerge.twMerge(baseClasses, borderClasses, className), children });
+};
+var InfoRowIconLabel = ({ children, className }) => {
+  const baseClasses = "text-sm text-text-secondary dark:text-text-secondary-dark";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "info-row-icon-label", className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-icon-value", className: tailwindMerge.twMerge(baseClasses, className), children });
+};
+var CollapsibleInfoRow = ({
+  label,
+  value,
+  children,
+  defaultOpen = false,
+  className,
+  collapseLabel,
+  expandLabel
+}) => {
+  const [isOpen, setIsOpen] = React6__namespace.default.useState(defaultOpen);
+  const baseClasses = "flex flex-col gap-sm w-full";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "collapsible-info-row", className: tailwindMerge.twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[2px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm text-text-secondary dark:text-text-secondary-dark", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronUp, { className: "w-3 h-3 text-text-secondary dark:text-text-secondary-dark" }) : /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-text-secondary dark:text-text-secondary-dark" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-test-id": "background-container", className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "section-card", className: tailwindMerge.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__ */ jsxRuntime.jsx("nav", { "data-test-id": "navbar", className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-col", className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-row", className: tailwindMerge.twMerge(baseClasses, gapClasses2[gap], className), children });
+};
+var ScrollableContent = ({ children, className }) => {
+  const baseClasses = "flex-1 overflow-y-auto px-md py-lg";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "scrollable-content", className: tailwindMerge.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__ */ jsxRuntime.jsxs("div", { "data-test-id": "details-header", className: tailwindMerge.twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(hi2.HiChevronLeft, { className: "w-6 h-6 text-text-tertiary dark:text-text-tertiary-dark" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-test-id": testId != null ? testId : "close-button",
+      onClick,
+      className: tailwindMerge.twMerge(baseClasses, className),
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "w-6 h-6" })
+    }
+  );
+};
+var HighRiskBadge = ({ className, label }) => {
+  const baseClasses = "inline-flex justify-start items-start gap-1";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "high-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-test-id": "medium-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-test-id": "low-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-2.5", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-test-id": "history-flex-col", className: tailwindMerge.twMerge("flex flex-col", gapClasses3[gap], className), children });
+var TransactionTypeLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { "data-test-id": "amount", className: "text-accent-md-mobile text-text-secondary dark:text-text-secondary-dark", children });
+var AmountInUsd = ({ children }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-state-success" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "data-test-id": "transaction-id", className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children: "-" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "transaction-id", className: "flex items-center gap-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm-mobile text-text-primary dark:text-text-primary-dark", children: truncateHash(hash) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AddressDisplay,
+      {
+        address: hash,
+        className: "border-none bg-transparent p-0 gap-0",
+        textClassName: "hidden"
+      }
+    )
+  ] });
+};
+var ExplorerLink = ({ href, children }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HistoryFlexCol, { className: "items-end", children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.transactionDetailsTitle, onBack: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
+        shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetIn.amount,
+                " ",
+                assetIn.symbol
+              ] }),
+              assetIn.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetIn.amountInUSD }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetOut.amount,
+                " ",
+                assetOut.symbol
+              ] }),
+              assetOut.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetOut.amountInUSD }) : null
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsxRuntime.jsx(FlexCol, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountWithSymbol }),
+            amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.currencyLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: symbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.totalAmountLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountInUsdFormatted, secondary: amountWithSymbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.operationCostLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: labels.operationCostSponsoredLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.protocolLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: protocolLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.statusLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionIdLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.dateLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: date })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionLabel }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: labels.transactionDetailsTitle, onBack: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[24px]", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionTypeLabel, { children: transactionTypeLabel }),
+        shouldShowFlow && assetIn && assetOut ? /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetIn.iconUrl, alt: assetIn.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetIn.amount,
+                " ",
+                assetIn.symbol
+              ] }),
+              assetIn.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetIn.amountInUSD }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: assetOut.iconUrl, alt: assetOut.symbol }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Amount, { children: [
+                assetOut.amount,
+                " ",
+                assetOut.symbol
+              ] }),
+              assetOut.amountInUSD ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: assetOut.amountInUSD }) : null
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { src: primaryAssetIconUrl, alt: symbol }),
+          /* @__PURE__ */ jsxRuntime.jsx(FlexCol, { children: /* @__PURE__ */ jsxRuntime.jsxs(FlexRow, { gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: amountWithSymbol }),
+            amountInUsdFormatted !== "-" ? /* @__PURE__ */ jsxRuntime.jsx(AmountInUsd, { children: amountInUsdFormatted }) : null
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.currencyLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: symbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.totalAmountLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TwoLineValue, { primary: amountInUsdFormatted, secondary: amountWithSymbol })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.operationCostLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: labels.operationCostSponsoredLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.protocolLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: protocolLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.statusLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(SuccessBadge, { children: statusLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionIdLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(TransactionId, { hash: txHash })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.dateLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoValue, { children: date })
+        ] }),
+        explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoLabel, { children: labels.transactionLabel }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-full" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: chainLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.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__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: tailwindMerge.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__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-test-id": "swap-quote-errors", children: [
+    hasQuoteError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+      BannerNotification,
+      {
+        type: "inline",
+        variant: "error",
+        message: quoteErrorMessage
+      }
+    ) }),
+    hasBytecodeError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-sm", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-slippage-tolerance-buttons", className: tailwindMerge.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__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        "data-test-id": `slippage-option-${option}`,
+        type: "button",
+        onClick: () => onSelect(option),
+        className: tailwindMerge.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__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-test-id": testId,
+      type: "button",
+      onClick,
+      className: tailwindMerge.twMerge(baseClasses, className),
+      "aria-label": token ? token.symbol : selectTokenLabel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-sm flex-1", children: token ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          token.logoURI ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-full" }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-text-secondary dark:text-text-secondary-dark", children: selectTokenLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(hi2.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__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-blockchain-costs", children: /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsibleInfoRow,
+    {
+      label: blockchainCostsLabel,
+      value: `${totalCostFormatted} ~ ${feePercentage}%`,
+      defaultOpen: true,
+      collapseLabel,
+      expandLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRowWithIcon, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconLabel, { children: networkGasLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconValue, { children: gasCostFormatted })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InfoRowWithIcon, { borderBottom: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconLabel, { children: protocolFeeLabel }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LowRiskBadge, { label: riskBadgeLabels.low }),
+    medium: /* @__PURE__ */ jsxRuntime.jsx(MediumRiskBadge, { label: riskBadgeLabels.medium }),
+    high: /* @__PURE__ */ jsxRuntime.jsx(HighRiskBadge, { label: riskBadgeLabels.high })
+  };
+  const Badge = badges[riskLevel];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "choose-strategy-actionsheet", className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ActionSheet,
+    {
+      id: "choose-strategy",
+      currentActionSheetId,
+      isOpen,
+      onClose,
+      position: "bottom",
+      height: "full",
+      contentClassName: "w-full max-w-[620px] mx-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { children: resolvedYieldLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("br", {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { className: "flex-shrink-0", onClick: onStrategyClick, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-full" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: resolvedYieldLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: Badge })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-state-success", children: [
+                apy,
+                "% ",
+                apyLabel
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(hi2.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__ */ jsxRuntime.jsxs(BackgroundContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: headerTitle, onBack, backAriaLabel }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-lg min-h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-start gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h5", children: title })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SummaryDetails,
+        {
+          title: strategyInfoTitle,
+          items: strategyInfo,
+          defaultOpen: true,
+          className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositButtonLabel }) })
+  ] });
+};
 
 exports.ActionButton = ActionButton;
 exports.ActionSheet = ActionSheet;
 exports.AddressDisplay = AddressDisplay;
+exports.BackgroundContainer = BackgroundContainer;
 exports.BannerNotification = BannerNotification;
+exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
+exports.CloseButton = CloseButton;
+exports.CollapsibleInfoRow = CollapsibleInfoRow;
 exports.ConnectWalletList = ConnectWalletList;
 exports.Currency = Currency;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
+exports.DetailsHeader = DetailsHeader;
 exports.Fiat = Currency;
+exports.FlexCol = FlexCol;
+exports.FlexRow = FlexRow;
+exports.HighRiskBadge = HighRiskBadge;
+exports.HistoryDepositDetailsView = HistoryDepositDetailsView;
+exports.HistoryWithdrawDetailsView = HistoryWithdrawDetailsView;
+exports.InfoLabel = InfoLabel;
+exports.InfoRow = InfoRow;
+exports.InfoRowIconLabel = InfoRowIconLabel;
+exports.InfoRowIconValue = InfoRowIconValue;
+exports.InfoRowWithIcon = InfoRowWithIcon;
+exports.InfoValue = InfoValue;
 exports.Input = Input;
 exports.Link = Link;
 exports.ListItem = ListItem;
 exports.ListItemContent = ListItemContent;
 exports.ListItemLeftSide = ListItemLeftSide;
 exports.ListItemRightSide = ListItemRightSide;
+exports.LowRiskBadge = LowRiskBadge;
+exports.MediumRiskBadge = MediumRiskBadge;
+exports.Navbar = Navbar;
 exports.PercentageButton = PercentageButton;
 exports.PrimaryButton = PrimaryButton;
+exports.ScrollableContent = ScrollableContent;
 exports.SecondaryButton = SecondaryButton;
+exports.SectionCard = SectionCard;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectItem = SelectItem;
 exports.SelectTrigger = SelectTrigger;
 exports.Skeleton = Skeleton;
+exports.StrategyDetailsView = StrategyDetailsView;
 exports.SummaryDetails = SummaryDetails;
+exports.SummaryDetailsCryptoControlV2 = SummaryDetailsCryptoControlV2;
+exports.SwapAmountInputView = SwapAmountInputView;
+exports.SwapNetworkSelectorView = SwapNetworkSelectorView;
+exports.SwapOutputAmountView = SwapOutputAmountView;
+exports.SwapQuoteBlockchainCostsView = SwapQuoteBlockchainCostsView;
+exports.SwapQuoteErrorsView = SwapQuoteErrorsView;
+exports.SwapQuoteHeaderView = SwapQuoteHeaderView;
+exports.SwapSlippageToleranceButtonsView = SwapSlippageToleranceButtonsView;
+exports.SwapTokenSelectorView = SwapTokenSelectorView;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;