@deframe-sdk/components 0.1.10 → 0.1.12

package/dist/index.js

@@ -71,24 +71,30 @@ function ActionButton(_a) {
     "className",
     "type"
   ]);
-  const getStyles = () => {
-    if (disabled) {
-      return {
-        container: "flex-1 h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden bg-bg-muted dark:bg-bg-muted-dark",
-        inner: "self-stretch flex-1 pl-4 pr-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: "flex-1 h-12 bg-brand-primary rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:shadow-md transition-shadow duration-200",
-      inner: "self-stretch flex-1 pl-4 pr-6 py-2.5 inline-flex justify-center items-center gap-2 hover:opacity-90 focus:opacity-85 active:opacity-85 transition-opacity duration-200",
-      text: "text-center justify-center text-text-inverse text-sm font-semibold font-poppins leading-5"
-    };
-  };
-  const styles = getStyles();
+  const baseClasses = [
+    "flex-1 inline-flex items-center justify-center overflow-hidden",
+    "h-[var(--deframe-widget-font-leading-lg)]",
+    "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border border-[color:var(--deframe-widget-color-border-tertiary)]",
+    "font-[var(--deframe-widget-font-family)] [font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+    "transition-[background,border-color,box-shadow,opacity] duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-[color:var(--deframe-widget-color-brand-primary)]"
+  ].join(" ");
+  const stateClasses = disabled ? [
+    "cursor-not-allowed",
+    "bg-[var(--deframe-widget-color-bg-tertiary)]",
+    "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
+  ].join(" ") : [
+    "cursor-pointer",
+    "bg-[var(--deframe-widget-color-brand-primary)]",
+    "text-[color:var(--deframe-widget-color-text-primary-dark)]",
+    "hover:opacity-90",
+    "hover:shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)]"
+  ].join(" ");
   const containerClasses = tailwindMerge.twMerge(
-    "flex-1 px-2 py-1 rounded border border-border-subtle dark:border-border-subtle-dark bg-bg-muted dark:bg-bg-muted-dark text-text-secondary dark:text-text-secondary-dark text-sm font-semibold font-poppins leading-5 hover:border-border-default dark:hover:border-border-default-dark focus:outline-none focus:ring-2 focus:ring-brand-primary",
-    disabled && "cursor-not-allowed",
+    baseClasses,
+    stateClasses,
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -98,7 +104,7 @@ function ActionButton(_a) {
       className: containerClasses,
       disabled
     }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.text, children }) })
+      children
     })
   );
 }
@@ -115,7 +121,13 @@ function PercentageButton(_a) {
     "type"
   ]);
   const containerClasses = tailwindMerge.twMerge(
-    "flex-1 px-2 py-1 rounded border border-border-subtle dark:border-border-subtle-dark bg-bg-muted dark:bg-bg-muted-dark text-text-secondary dark:text-text-secondary-dark text-sm font-semibold font-poppins leading-5 hover:border-border-default dark:hover:border-border-default-dark focus:outline-none focus:ring-2 focus:ring-brand-primary",
+    "flex-1 inline-flex items-center justify-center",
+    "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "border border-[color:var(--deframe-widget-color-border-tertiary)]",
+    "bg-[var(--deframe-widget-color-bg-tertiary)] text-[color:var(--deframe-widget-color-text-secondary)]",
+    "font-[var(--deframe-widget-font-family)] [font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+    "hover:border-[color:var(--deframe-widget-color-border-secondary)] focus:outline-none focus:ring-2 focus:ring-[color:var(--deframe-widget-color-brand-primary)]",
     disabled && "cursor-not-allowed",
     className
   );
@@ -146,7 +158,7 @@ function PrimaryButton(_a) {
     /** layout */
     "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
     /** typography */
-    "font-[var(--deframe-widget-font-family-primary)]",
+    "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)]",
@@ -210,7 +222,7 @@ function SecondaryButton(_a) {
     /** layout */
     "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
     /** typography */
-    "font-[var(--deframe-widget-font-family-primary)]",
+    "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)]",
@@ -271,7 +283,7 @@ function TertiaryButton(_a) {
     /** layout */
     "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
     /** typography */
-    "font-[var(--deframe-widget-font-family-primary)]",
+    "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)]",
@@ -331,7 +343,7 @@ function Input(_a) {
 function InputLabel(_a) {
   var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
   const baseClasses = [
-    "[font-family:var(--deframe-widget-font-family-primary)]",
+    "[font-family:var(--deframe-widget-font-family)]",
     "[font-size:var(--deframe-widget-font-size-xs)]",
     "[font-weight:var(--deframe-widget-font-weight-medium)]",
     "text-[var(--deframe-widget-color-text-primary)]"
@@ -349,7 +361,7 @@ function InputField(_a) {
   var _b = _a, { hasError = false, disabled, className = "" } = _b, props = __objRest(_b, ["hasError", "disabled", "className"]);
   const baseClasses = [
     "w-full",
-    "[font-family:var(--deframe-widget-font-family-primary)]",
+    "[font-family:var(--deframe-widget-font-family)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
     "[font-weight:var(--deframe-widget-font-weight-regular)]",
     "text-[var(--deframe-widget-color-text-primary)]",
@@ -405,19 +417,19 @@ function Link(_a) {
     "scroll"
   ]);
   const baseClasses = [
-    "[font-family:var(--deframe-widget-font-family-primary)]",
+    "[font-family:var(--deframe-widget-font-family)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
     "[font-weight:var(--deframe-widget-font-weight-medium)]",
     "[line-height:var(--deframe-widget-font-leading-lg)]"
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[var(--deframe-widget-color-link)]",
+      "text-[color:var(--deframe-widget-color-brand-primary)]",
       "underline",
       "cursor-pointer"
     ].join(" "),
     disabled: [
-      "text-[var(--deframe-widget-color-link-disabled)]",
+      "text-[var(--deframe-widget-color-brand-primary-disabled)]",
       "cursor-not-allowed",
       "pointer-events-none"
     ].join(" ")
@@ -495,7 +507,8 @@ function Input2(_a) {
         className: "text-right",
         children: /* @__PURE__ */ jsxRuntime.jsx(Link_default, { href, disabled, children: repassword })
       }
-    )
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-[var(--deframe-widget-size-gap-xs)] text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: error })
   ] });
 }
 function ListItem(_a) {
@@ -504,52 +517,32 @@ function ListItem(_a) {
     className,
     containerClassName,
     onClick
-  } = _b, props = __objRest(_b, [
+  } = _b; __objRest(_b, [
     "children",
     "className",
     "containerClassName",
     "onClick"
   ]);
-  const baseClasses = [
-    "self-stretch min-h-16 relative",
-    "rounded-[var(--deframe-widget-size-radius-xs)]",
-    "border-[length:var(--deframe-widget-size-border-xs)]",
-    "border-[var(--deframe-widget-color-border-primary)]",
-    "flex flex-col justify-center items-center",
-    "transition-colors",
-    "bg-[var(--deframe-widget-color-bg-primary)]"
-  ].join(" ");
-  const stateClasses = {
-    clickable: "cursor-pointer hover:border-[var(--deframe-widget-color-border-secondary)]",
-    static: ""
-  };
   const containerClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses[onClick ? "clickable" : "static"],
+    "self-stretch min-h-16 relative rounded-[var(--deframe-widget-size-radius-sm)] border border-[color:var(--deframe-widget-color-border-secondary)]",
+    "text-[color:var(--deframe-widget-color-text-primary)] flex flex-col justify-center items-center transition-colors",
+    "hover:border-[color:var(--deframe-widget-color-border-primary)] bg-[var(--deframe-widget-color-bg-secondary)]",
+    onClick && "cursor-pointer",
     containerClassName
   );
-  const innerClasses = tailwindMerge.twMerge(
-    "self-stretch inline-flex justify-between items-center",
-    "[gap:var(--deframe-widget-size-gap-md)]",
-    "px-[var(--deframe-widget-size-padding-x-md)]",
-    "py-[var(--deframe-widget-size-padding-y-sm)]",
-    "text-[var(--deframe-widget-color-text-primary)]",
-    className
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    __spreadProps(__spreadValues({
-      "data-slot": "list-item",
-      "data-test-id": "list-item",
-      className: containerClasses,
-      onClick,
-      tabIndex: onClick ? 0 : void 0,
-      role: onClick ? "button" : void 0,
-      onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0
-    }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerClasses, children })
-    })
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, onClick, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "self-stretch inline-flex justify-between items-center",
+        "gap-[var(--deframe-widget-size-gap-md)]",
+        "px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-sm)]",
+        "text-[color:var(--deframe-widget-color-text-primary)]",
+        className
+      ),
+      children
+    }
+  ) });
 }
 function ListItemLeftSide(_a) {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
@@ -606,7 +599,292 @@ function WalletListContainer({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col gap-4", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "wallet-list-container",
+      className: tailwindMerge.twMerge("w-full flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", className),
+      children
+    }
+  );
+}
+function WalletItem({
+  id,
+  name,
+  icon,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-slot": "wallet-item",
+      "data-test-id": "wallet-item",
+      "aria-label": `Connect ${name} wallet`,
+      onClick,
+      className: tailwindMerge.twMerge(
+        "w-full flex items-center gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-sm)]",
+        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)] active:scale-[0.99]",
+        "transition-[background,border-color] duration-150",
+        "cursor-pointer outline-none text-left",
+        "font-[var(--deframe-widget-font-family)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "wallet-item-icon",
+            "data-test-id": "wallet-item-icon",
+            className: "shrink-0 w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] overflow-hidden flex items-center justify-center",
+            children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: icon,
+                alt: name,
+                className: "object-cover w-full h-full"
+              }
+            ) : icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-[17px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[1.3] [font-family:inherit]", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            "data-slot": "wallet-item-chevron",
+            "data-test-id": "wallet-item-chevron",
+            fill: "none",
+            "aria-hidden": "true",
+            className: "flex-shrink-0 text-(--deframe-widget-color-text-secondary)",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M7.5 5L12.5 10L7.5 15",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    },
+    id
+  );
+}
+function ConnectWalletList({
+  wallets,
+  title,
+  subtitle,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "connect-wallet-list",
+      className: tailwindMerge.twMerge("w-full flex flex-col gap-[var(--deframe-widget-size-gap-md)]", className),
+      children: [
+        (title != null || subtitle != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[color:var(--deframe-widget-color-text-primary)] text-[20px] [font-weight:var(--deframe-widget-font-weight-bold)] leading-[1.25] font-[var(--deframe-widget-font-family)]", children: title }),
+          subtitle != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[color:var(--deframe-widget-color-text-secondary)] text-[14px] leading-[1.5] font-[var(--deframe-widget-font-family)]", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(WalletListContainer, { children: wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsx(
+          WalletItem,
+          {
+            id: wallet.id,
+            name: wallet.name,
+            icon: wallet.icon,
+            onClick: () => {
+              var _a;
+              return (_a = wallet.onClick) == null ? void 0 : _a.call(wallet);
+            }
+          },
+          wallet.id
+        )) })
+      ]
+    }
+  );
+}
+function WalletConnectPanel({
+  wallets,
+  title,
+  subtitle,
+  onClose,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "wallet-connect-panel",
+      "data-test-id": "wallet-connect-panel",
+      className: tailwindMerge.twMerge(
+        "w-full flex flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]",
+        "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
+        "rounded-[var(--deframe-widget-size-radius-md)]",
+        "font-[var(--deframe-widget-font-family)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[color:var(--deframe-widget-color-text-primary)] text-[20px] [font-weight:var(--deframe-widget-font-weight-bold)] leading-[1.25] [font-family:inherit]", children: title != null ? title : "Conectar Carteira" }),
+          onClose != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "wallet-connect-close",
+              "data-test-id": "wallet-connect-close",
+              onClick: onClose,
+              className: tailwindMerge.twMerge(
+                "text-[color:var(--deframe-widget-color-text-secondary)] text-[15px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-none",
+                "hover:text-[color:var(--deframe-widget-color-text-primary)] transition-colors duration-150",
+                "cursor-pointer outline-none bg-transparent border-none px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
+                "flex-shrink-0 [font-family:inherit]"
+              ),
+              children: "Sair"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[color:var(--deframe-widget-color-text-secondary)] text-[14px] leading-[1.5] [font-family:inherit] -mt-[var(--deframe-widget-size-gap-sm)]", children: subtitle != null ? subtitle : "Escolha sua carteira preferida para conectar" }),
+        /* @__PURE__ */ jsxRuntime.jsx(WalletListContainer, { children: wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsx(
+          WalletItem,
+          {
+            id: wallet.id,
+            name: wallet.name,
+            icon: wallet.icon,
+            onClick: () => {
+              var _a;
+              return (_a = wallet.onClick) == null ? void 0 : _a.call(wallet);
+            }
+          },
+          wallet.id
+        )) })
+      ]
+    }
+  );
+}
+var CURRENCY_CONFIG = {
+  symbols: {
+    USD: "$",
+    BRL: "R$",
+    EUR: "\u20AC",
+    BTC: "\u20BF",
+    ETH: "\u039E",
+    USDC: "$",
+    USDT: "$"
+  },
+  labels: {
+    USD: "USD",
+    BRL: "BRL",
+    EUR: "EUR",
+    BTC: "BTC",
+    ETH: "ETH",
+    USDC: "USDC",
+    USDT: "USDT"
+  }
+};
+var STYLE_CONFIG = {
+  alignment: {
+    left: "items-start",
+    center: "items-center",
+    right: "items-end"
+  },
+  size: {
+    sm: {
+      primary: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)]",
+      secondary: "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]",
+      gap: "gap-[var(--deframe-widget-size-gap-xs)]"
+    },
+    md: {
+      primary: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)]",
+      secondary: "[font-size:var(--deframe-widget-font-size-xl)] [line-height:var(--deframe-widget-font-leading-xl)]",
+      gap: "gap-[var(--deframe-widget-size-gap-xs)]"
+    },
+    lg: {
+      primary: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)]",
+      secondary: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)]",
+      gap: "gap-[var(--deframe-widget-size-gap-xs)]"
+    }
+  }
+};
+function Currency(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const normalizedProps = "usdValue" in props ? {
+    amount: props.amount,
+    currency: "USD",
+    secondaryAmount: props.usdValue,
+    secondaryCurrency: void 0,
+    align: (_a = props.align) != null ? _a : "right",
+    size: (_b = props.size) != null ? _b : "lg",
+    showSymbol: false,
+    showLabel: false,
+    className: (_c = props.className) != null ? _c : ""
+  } : {
+    amount: props.amount,
+    currency: (_d = props.currency) != null ? _d : "USD",
+    secondaryAmount: props.secondaryAmount,
+    secondaryCurrency: props.secondaryCurrency,
+    align: (_e = props.align) != null ? _e : "right",
+    size: (_f = props.size) != null ? _f : "lg",
+    showSymbol: (_g = props.showSymbol) != null ? _g : true,
+    showLabel: (_h = props.showLabel) != null ? _h : false,
+    className: (_i = props.className) != null ? _i : ""
+  };
+  const {
+    amount,
+    currency,
+    secondaryAmount,
+    secondaryCurrency,
+    align,
+    size,
+    showSymbol,
+    showLabel,
+    className
+  } = normalizedProps;
+  const formatAmount = (value, curr, displaySymbol) => {
+    if (!displaySymbol && !showLabel) return value;
+    const symbol = displaySymbol ? CURRENCY_CONFIG.symbols[curr] : "";
+    const label = showLabel ? ` ${CURRENCY_CONFIG.labels[curr]}` : "";
+    if (["BTC", "ETH"].includes(curr) && !value.includes(".") && !value.includes(",")) {
+      return `${symbol}${value}${label}`;
+    }
+    return `${symbol} ${value}${label}`.trim();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "flex flex-col",
+        STYLE_CONFIG.alignment[align],
+        STYLE_CONFIG.size[size].gap,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tailwindMerge.twMerge(
+              "[font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
+              STYLE_CONFIG.size[size].primary
+            ),
+            children: formatAmount(amount, currency, showSymbol)
+          }
+        ),
+        secondaryAmount && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tailwindMerge.twMerge(
+              "text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)]",
+              STYLE_CONFIG.size[size].secondary
+            ),
+            children: secondaryCurrency ? formatAmount(secondaryAmount, secondaryCurrency, true) : secondaryAmount
+          }
+        )
+      ]
+    }
+  );
 }
 var Text = React6__namespace.forwardRef(
   (_a, ref) => {
@@ -620,7 +898,7 @@ var Text = React6__namespace.forwardRef(
       "className"
     ]);
     const baseClasses = [
-      "[font-family:var(--deframe-widget-font-family-primary)]",
+      "[font-family: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-regular)]",
@@ -658,12 +936,12 @@ var TextAccent = React6__namespace.forwardRef(
       ].join(" "),
       "accent-medium": [
         "[font-size:var(--deframe-widget-font-size-md)]",
-        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[line-height:var(--deframe-widget-font-leading-md)]",
         "[font-weight:var(--deframe-widget-font-weight-semibold)]"
       ].join(" "),
       "accent-small": [
         "[font-size:var(--deframe-widget-font-size-sm)]",
-        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[line-height:var(--deframe-widget-font-leading-sm)]",
         "[font-weight:var(--deframe-widget-font-weight-semibold)]"
       ].join(" ")
     };
@@ -694,6 +972,11 @@ var TextBody = React6__namespace.forwardRef(
       "className"
     ]);
     const bodyVariants = {
+      "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]": [
+        "[font-size:var(--deframe-widget-font-size-lg)]",
+        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[font-weight:var(--deframe-widget-font-weight-regular)]"
+      ].join(" "),
       "text-large": [
         "[font-size:var(--deframe-widget-font-size-lg)]",
         "[line-height:var(--deframe-widget-font-leading-lg)]",
@@ -701,12 +984,12 @@ var TextBody = React6__namespace.forwardRef(
       ].join(" "),
       "text-medium": [
         "[font-size:var(--deframe-widget-font-size-md)]",
-        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[line-height:var(--deframe-widget-font-leading-md)]",
         "[font-weight:var(--deframe-widget-font-weight-regular)]"
       ].join(" "),
       "text-small": [
         "[font-size:var(--deframe-widget-font-size-sm)]",
-        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[line-height:var(--deframe-widget-font-leading-sm)]",
         "[font-weight:var(--deframe-widget-font-weight-regular)]"
       ].join(" ")
     };
@@ -738,32 +1021,32 @@ var TextHeading = React6__namespace.forwardRef(
     ]);
     const headingVariants = {
       "h-large": [
-        "[font-size:var(--deframe-widget-font-size-h-large)]",
+        "[font-size:var(--deframe-widget-font-size-xxl)]",
         "[line-height:var(--deframe-widget-font-leading-sm)]",
         "[font-weight:var(--deframe-widget-font-weight-extrabold)]"
       ].join(" "),
       h1: [
-        "[font-size:var(--deframe-widget-font-size-h1)]",
+        "[font-size:var(--deframe-widget-font-size-xxl)]",
         "[line-height:var(--deframe-widget-font-leading-md)]",
         "[font-weight:var(--deframe-widget-font-weight-extrabold)]"
       ].join(" "),
       h2: [
-        "[font-size:var(--deframe-widget-font-size-h2)]",
+        "[font-size:var(--deframe-widget-font-size-xxl)]",
         "[line-height:var(--deframe-widget-font-leading-lg)]",
         "[font-weight:var(--deframe-widget-font-weight-extrabold)]"
       ].join(" "),
       h3: [
-        "[font-size:var(--deframe-widget-font-size-h3)]",
+        "[font-size:var(--deframe-widget-font-size-xl)]",
         "[line-height:var(--deframe-widget-font-leading-md)]",
         "[font-weight:var(--deframe-widget-font-weight-bold)]"
       ].join(" "),
       h4: [
-        "[font-size:var(--deframe-widget-font-size-h4)]",
+        "[font-size:var(--deframe-widget-font-size-xl)]",
         "[line-height:var(--deframe-widget-font-leading-md)]",
         "[font-weight:var(--deframe-widget-font-weight-bold)]"
       ].join(" "),
       h5: [
-        "[font-size:var(--deframe-widget-font-size-h5)]",
+        "[font-size:var(--deframe-widget-font-size-lg)]",
         "[line-height:var(--deframe-widget-font-leading-md)]",
         "[font-weight:var(--deframe-widget-font-weight-bold)]"
       ].join(" ")
@@ -794,232 +1077,6 @@ function Title(_a) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, __spreadValues({ variant, className }, props));
 }
-function ConnectWalletList({
-  wallets,
-  className
-}) {
-  const handleWalletClick = (wallet) => {
-    var _a;
-    (_a = wallet.onClick) == null ? void 0 : _a.call(wallet);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(WalletListContainer, { children: wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { onClick: () => handleWalletClick(wallet), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: typeof wallet.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: wallet.icon,
-        alt: wallet.name,
-        className: "w-10 h-10 rounded-full"
-      }
-    ) : wallet.icon }),
-    /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-medium", children: wallet.name }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        className: "flex-shrink-0 w-5 h-5 text-gray-400",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M9 5l7 7-7 7"
-          }
-        )
-      }
-    ) })
-  ] }, wallet.id)) }) });
-}
-function WalletItem({
-  id,
-  name,
-  icon,
-  onClick,
-  className
-}) {
-  const baseClasses = [
-    "w-full flex items-center",
-    "[gap:var(--deframe-widget-size-gap-md)]",
-    "px-[var(--deframe-widget-size-padding-x-md)]",
-    "py-[var(--deframe-widget-size-padding-y-sm)]",
-    "rounded-[var(--deframe-widget-size-radius-xs)]",
-    "bg-[var(--deframe-widget-color-bg-secondary)]",
-    "cursor-pointer",
-    "transition-colors",
-    "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
-    "focus:outline-none"
-  ].join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      "data-slot": "wallet-item",
-      "data-test-id": "wallet-item",
-      "aria-label": `Connect ${name} wallet`,
-      onClick,
-      className: tailwindMerge.twMerge(baseClasses, className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-slot": "wallet-item-icon",
-            "data-test-id": "wallet-item-icon",
-            className: "flex-shrink-0 w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] overflow-hidden flex items-center justify-center",
-            children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: icon,
-                alt: name,
-                className: "w-full h-full object-cover"
-              }
-            ) : icon
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TextBody,
-          {
-            "data-slot": "wallet-item-name",
-            "data-test-id": "wallet-item-name",
-            variant: "text-medium",
-            className: "flex-1 text-left text-[var(--deframe-widget-color-text-primary)]",
-            children: name
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            "data-slot": "wallet-item-chevron",
-            "data-test-id": "wallet-item-chevron",
-            className: "flex-shrink-0 w-5 h-5 text-[var(--deframe-widget-color-text-secondary)]",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M9 5l7 7-7 7"
-              }
-            )
-          }
-        )
-      ]
-    },
-    id
-  );
-}
-var CURRENCY_CONFIG = {
-  symbols: {
-    USD: "$",
-    BRL: "R$",
-    EUR: "\u20AC",
-    BTC: "\u20BF",
-    ETH: "\u039E",
-    USDC: "$",
-    USDT: "$"
-  },
-  labels: {
-    USD: "USD",
-    BRL: "BRL",
-    EUR: "EUR",
-    BTC: "BTC",
-    ETH: "ETH",
-    USDC: "USDC",
-    USDT: "USDT"
-  }
-};
-var STYLE_CONFIG = {
-  alignment: {
-    left: "items-start",
-    center: "items-center",
-    right: "items-end"
-  },
-  size: {
-    sm: { primary: "text-3xl", secondary: "text-sm", gap: "gap-0.5" },
-    md: { primary: "text-5xl", secondary: "text-base", gap: "gap-1" },
-    lg: { primary: "text-6xl", secondary: "text-lg", gap: "gap-1" }
-  }
-};
-function Currency(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const normalizedProps = "usdValue" in props ? {
-    amount: props.amount,
-    currency: "USD",
-    secondaryAmount: props.usdValue,
-    secondaryCurrency: void 0,
-    align: (_a = props.align) != null ? _a : "right",
-    size: (_b = props.size) != null ? _b : "lg",
-    showSymbol: false,
-    showLabel: false,
-    className: (_c = props.className) != null ? _c : ""
-  } : {
-    amount: props.amount,
-    currency: (_d = props.currency) != null ? _d : "USD",
-    secondaryAmount: props.secondaryAmount,
-    secondaryCurrency: props.secondaryCurrency,
-    align: (_e = props.align) != null ? _e : "right",
-    size: (_f = props.size) != null ? _f : "lg",
-    showSymbol: (_g = props.showSymbol) != null ? _g : true,
-    showLabel: (_h = props.showLabel) != null ? _h : false,
-    className: (_i = props.className) != null ? _i : ""
-  };
-  const {
-    amount,
-    currency,
-    secondaryAmount,
-    secondaryCurrency,
-    align,
-    size,
-    showSymbol,
-    showLabel,
-    className
-  } = normalizedProps;
-  const formatAmount = (value, curr, displaySymbol) => {
-    if (!displaySymbol && !showLabel) return value;
-    const symbol = displaySymbol ? CURRENCY_CONFIG.symbols[curr] : "";
-    const label = showLabel ? ` ${CURRENCY_CONFIG.labels[curr]}` : "";
-    if (["BTC", "ETH"].includes(curr) && !value.includes(".") && !value.includes(",")) {
-      return `${symbol}${value}${label}`;
-    }
-    return `${symbol} ${value}${label}`.trim();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: tailwindMerge.twMerge(
-        "flex flex-col",
-        STYLE_CONFIG.alignment[align],
-        STYLE_CONFIG.size[size].gap,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: tailwindMerge.twMerge(
-              "font-bold text-text-primary dark:text-text-primary-dark font-poppins",
-              STYLE_CONFIG.size[size].primary
-            ),
-            children: formatAmount(amount, currency, showSymbol)
-          }
-        ),
-        secondaryAmount && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: tailwindMerge.twMerge(
-              "text-text-secondary dark:text-text-secondary-dark font-poppins",
-              STYLE_CONFIG.size[size].secondary
-            ),
-            children: secondaryCurrency ? formatAmount(secondaryAmount, secondaryCurrency, true) : secondaryAmount
-          }
-        )
-      ]
-    }
-  );
-}
 var TabsContext = React6__namespace.createContext(
   void 0
 );
@@ -1079,14 +1136,12 @@ var TabsList = React6__namespace.forwardRef(
           ref,
           role: "tablist",
           className: tailwindMerge.twMerge(
-            "relative w-full flex items-center justify-between pt-2",
+            "relative w-full flex items-center justify-between",
+            "pt-[var(--deframe-widget-size-padding-y-sm)]",
+            "px-[var(--deframe-widget-size-padding-x-lg)]",
+            "bg-[var(--deframe-widget-color-bg-primary)]",
             className
-          ),
-          style: {
-            paddingLeft: "var(--spacing-md, 16px)",
-            paddingRight: "var(--spacing-md, 16px)",
-            backgroundColor: "var(--color-bg-default, transparent)"
-          }
+          )
         }, props), {
           children
         })
@@ -1098,8 +1153,8 @@ var TabsList = React6__namespace.forwardRef(
         ref,
         role: "tablist",
         className: tailwindMerge.twMerge(
-          "relative w-full flex items-center bg-transparent border-b border-border-default dark:border-border-default-dark",
-          variant === "primary" ? "h-[72px] gap-6" : "h-12",
+          "relative w-full flex items-center bg-transparent border-b border-[color:var(--deframe-widget-color-border-secondary)]",
+          variant === "primary" ? "h-[72px] gap-[var(--deframe-widget-size-gap-lg)]" : "h-12",
           className
         )
       }, props), {
@@ -1114,19 +1169,14 @@ var TabsTrigger = React6__namespace.forwardRef(
     var _b = _a, {
       value,
       className,
-      children,
-      style
+      children
     } = _b, props = __objRest(_b, [
       "value",
       "className",
-      "children",
-      "style"
+      "children"
     ]);
     const { value: activeValue, onValueChange, variant } = useTabs();
     const isActive = activeValue === value;
-    const headerStyle = variant === "header" ? __spreadValues({
-      color: isActive ? "var(--color-brand-primary)" : "var(--color-text-secondary)"
-    }, style) : style;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       __spreadProps(__spreadValues({
@@ -1135,12 +1185,11 @@ var TabsTrigger = React6__namespace.forwardRef(
         "aria-selected": isActive,
         onClick: () => onValueChange(value),
         className: tailwindMerge.twMerge(
-          "relative inline-flex flex-col items-center justify-center whitespace-nowrap font-poppins transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 outline-none",
-          variant === "header" ? "flex-1 text-sm font-semibold py-3" : variant === "primary" ? "h-[72px] text-base font-medium px-0 pb-3 pt-2 flex-none" : "h-12 text-[12px] font-semibold px-4 flex-none",
-          variant !== "header" && (isActive ? "text-brand-primary" : "text-text-secondary dark:text-text-secondary-dark hover:text-text-primary dark:hover:text-text-primary-dark"),
+          "relative inline-flex flex-col items-center justify-center whitespace-nowrap font-[var(--deframe-widget-font-family)] transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 outline-none",
+          variant === "header" ? "flex-1 [font-size:var(--deframe-widget-font-size-lg)] [font-weight:var(--deframe-widget-font-weight-semibold)] py-[var(--deframe-widget-size-padding-y-md)]" : variant === "primary" ? "h-[72px] [font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] [font-weight:var(--deframe-widget-font-weight-medium)] px-[var(--deframe-widget-size-padding-x-none)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-sm)] flex-none" : "h-12 text-[12px] [font-weight:var(--deframe-widget-font-weight-semibold)] px-[var(--deframe-widget-size-padding-x-md)] flex-none",
+          variant === "header" ? isActive ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]" : isActive ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-text-primary)]",
           className
-        ),
-        style: headerStyle
+        )
       }, props), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
@@ -1148,17 +1197,7 @@ var TabsTrigger = React6__namespace.forwardRef(
             framerMotion.motion.span,
             {
               layoutId: "header-tab-indicator",
-              className: "absolute rounded-t-full",
-              style: {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                marginLeft: "auto",
-                marginRight: "auto",
-                width: "3.5rem",
-                height: "3px",
-                backgroundColor: "var(--color-brand-primary)"
-              },
+              className: "absolute bottom-0 left-1/2 -translate-x-1/2 w-14 h-[3px] rounded-t-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-brand-primary)]",
               transition: { type: "spring", bounce: 0.2, duration: 0.6 }
             }
           ),
@@ -1166,7 +1205,7 @@ var TabsTrigger = React6__namespace.forwardRef(
             framerMotion.motion.span,
             {
               layoutId: "tab-indicator",
-              className: "absolute bottom-0 left-0 right-0 h-0.5 bg-brand-primary z-10",
+              className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--deframe-widget-color-brand-primary)] z-10",
               transition: { type: "spring", bounce: 0.2, duration: 0.6 }
             }
           )
@@ -1188,7 +1227,7 @@ var TabsContent = React6__namespace.forwardRef(
         role: "tabpanel",
         className: tailwindMerge.twMerge(
           "focus-visible:outline-none",
-          variant === "primary" || variant === "header" ? "mt-0" : "mt-6",
+          variant === "primary" || variant === "header" ? "mt-[var(--deframe-widget-size-gap-none)]" : "mt-[var(--deframe-widget-size-gap-lg)]",
           className
         )
       }, props), {
@@ -1304,12 +1343,12 @@ var SelectTrigger = React6__namespace.forwardRef(
         "aria-haspopup": "listbox",
         "aria-expanded": _isOpen,
         className: tailwindMerge.twMerge(
-          "w-full flex items-center justify-between gap-2",
-          "bg-[var(--color-bg-subtle,#1a1a1a)] border border-[var(--color-border-default,#333)] rounded px-3 py-1.5",
-          "text-sm text-[var(--color-text-primary,#fff)] text-left",
+          "w-full flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]",
+          "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)].5",
+          "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)] text-left",
           "transition-colors cursor-pointer",
-          "hover:border-[var(--color-border-strong,#555)]",
-          "focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary,#7C3AED)]/50 focus:border-[var(--color-brand-primary,#7C3AED)]",
+          "hover:border-[color:var(--deframe-widget-color-border-primary)]",
+          "focus:outline-none focus:ring-2 focus:ring-[color:var(--deframe-widget-color-brand-primary)] focus:border-[color:var(--deframe-widget-color-brand-primary)]",
           _disabled && "opacity-50 cursor-not-allowed",
           className
         ),
@@ -1317,7 +1356,7 @@ var SelectTrigger = React6__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: !hasChildren ? "text-[var(--color-text-tertiary,#888)]" : void 0,
+              className: !hasChildren ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : void 0,
               children: hasChildren ? children : placeholder
             }
           ),
@@ -1325,7 +1364,7 @@ var SelectTrigger = React6__namespace.forwardRef(
             ChevronDownIcon,
             {
               className: tailwindMerge.twMerge(
-                "w-4 h-4 text-[var(--color-text-secondary,#999)] transition-transform",
+                "w-4 h-4 text-[color:var(--deframe-widget-color-text-secondary)] transition-transform",
                 _isOpen && "rotate-180"
               )
             }
@@ -1401,10 +1440,10 @@ var SelectContent = React6__namespace.forwardRef(
         animate: "visible",
         exit: "exit",
         className: tailwindMerge.twMerge(
-          "absolute z-50 w-full mt-1",
-          "bg-[var(--color-bg-raised,#1f1f1f)] border border-[var(--color-border-default,#333)] rounded shadow-lg",
+          "absolute z-50 w-full mt-[var(--deframe-widget-size-gap-xs)]",
+          "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] shadow-[0_20px_50px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_28%,transparent)]",
           "max-h-60 overflow-auto",
-          "py-1",
+          "py-[var(--deframe-widget-size-padding-y-xs)]",
           className
         ),
         children: enhancedChildren
@@ -1445,10 +1484,10 @@ var SelectItem = React6__namespace.forwardRef(
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         className: tailwindMerge.twMerge(
-          "px-3 py-2 text-sm cursor-pointer transition-colors",
-          "text-[var(--color-text-primary,#fff)]",
-          _isSelected && "text-[var(--color-text-highlight,#7C3AED)]",
-          _isHighlighted && "bg-[var(--color-bg-muted,#2a2a2a)]",
+          "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)] [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] cursor-pointer transition-colors",
+          "text-[color:var(--deframe-widget-color-text-primary)]",
+          _isSelected && "text-[color:var(--deframe-widget-color-brand-primary)]",
+          _isHighlighted && "bg-[var(--deframe-widget-color-bg-tertiary)]",
           disabled && "opacity-50 cursor-not-allowed",
           className
         ),
@@ -1474,13 +1513,13 @@ var Skeleton = (_a) => {
     "className",
     "style"
   ]);
-  const defaultGradient = "linear-gradient(25deg, #2C2C2C 0%, #2C2C2C 60%, #121212 100%)";
+  const defaultGradient = "linear-gradient(25deg, var(--deframe-widget-color-bg-tertiary) 0%, var(--deframe-widget-color-bg-tertiary) 60%, var(--deframe-widget-color-bg-secondary) 100%)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadProps(__spreadValues({
       className: tailwindMerge.twMerge(
         "relative overflow-hidden animate-fade-in",
-        variant === "circle" ? "rounded-full" : "rounded",
+        variant === "circle" ? "rounded-[var(--deframe-widget-size-radius-full)]" : "rounded-[var(--deframe-widget-size-radius-xs)]",
         className
       ),
       style: __spreadValues({
@@ -1489,7 +1528,7 @@ var Skeleton = (_a) => {
         background: defaultGradient
       }, style)
     }, props), {
-      children: shimmer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-white/20 to-transparent dark:via-gray-600/30" })
+      children: shimmer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-[color-mix(in srgb, var(--deframe-widget-color-bg-tertiary) 92%, transparent)] to-transparent" })
     })
   );
 };
@@ -1512,7 +1551,7 @@ function BannerNotificationIcon(_a) {
 }
 function BannerNotificationContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = "flex-1 min-w-0 p-2";
+  const baseClasses = "flex-1 min-w-0 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)]";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadValues({
@@ -1540,7 +1579,7 @@ function BannerNotificationMessage(_a) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TextBody,
     __spreadValues({
-      variant: "text-medium",
+      variant: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
       "data-slot": "banner-notification-message",
       "data-test-id": "banner-notification-message",
       className: tailwindMerge.twMerge("text-inherit", className)
@@ -1565,7 +1604,7 @@ function BannerNotificationClose(_a) {
     }, props)
   );
 }
-function BannerNotification(_a) {
+var BannerNotification = (_a) => {
   var _b = _a, {
     type = "inline",
     variant = "info",
@@ -1673,7 +1712,7 @@ function BannerNotification(_a) {
     inline: variantInlineClasses[v],
     toast: [
       variantToastClasses[v],
-      "fixed z-50 w-[clamp(18rem,40vw,30rem)] shadow-lg",
+      "fixed z-50 w-[clamp(18rem,40vw,30rem)] shadow-[0_20px_50px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_28%,transparent)]",
       positionClasses[p]
     ].join(" ")
   };
@@ -1704,7 +1743,7 @@ function BannerNotification(_a) {
       ]
     })
   );
-}
+};
 BannerNotification.displayName = "BannerNotification";
 var AddressDisplay = ({
   address,
@@ -1728,7 +1767,10 @@ var AddressDisplay = ({
     "div",
     {
       className: tailwindMerge.twMerge(
-        "bg-[#121212] rounded p-3 flex items-center justify-between gap-2 border border-gray-700",
+        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]",
+        "border border-[color:var(--deframe-widget-color-border-secondary)]",
         className
       ),
       children: [
@@ -1746,12 +1788,12 @@ var AddressDisplay = ({
           "button",
           {
             onClick: handleCopy,
-            className: "text-gray-400 hover:text-white transition-colors flex-shrink-0 cursor-pointer",
+            className: "text-[color:var(--deframe-widget-color-text-tertiary)] hover:text-[color:var(--deframe-widget-color-text-primary)] transition-colors flex-shrink-0 cursor-pointer",
             "aria-label": "Copy address",
             children: copied ? /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
               {
-                className: "w-5 h-5 text-green-500",
+                className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-success)]",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -1802,15 +1844,19 @@ var SummaryDetails = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "details",
     {
-      className: tailwindMerge.twMerge("bg-[#1A1A1A] rounded p-4 group", className),
+      className: tailwindMerge.twMerge(
+        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "p-[var(--deframe-widget-size-gap-lg)] group",
+        className
+      ),
       open: defaultOpen,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("summary", { className: tailwindMerge.twMerge("cursor-pointer block ", summaryClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-white font-medium", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
-              className: "w-5 h-5 text-gray-400 transition-transform duration-300 group-open:rotate-180",
+              className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-tertiary)] transition-transform duration-300 group-open:rotate-180",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -1831,24 +1877,24 @@ var SummaryDetails = ({
           "div",
           {
             className: tailwindMerge.twMerge(
-              "mt-4",
-              showDividers && "divide-y divide-[#2A2A2A]",
+              "mt-[var(--deframe-widget-size-gap-lg)]",
+              showDividers && "divide-y divide-[color:var(--deframe-widget-color-border-tertiary)]",
               contentClassName
             ),
-            children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between py-2", children: [
+            children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between py-[var(--deframe-widget-size-padding-y-sm)]", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 TextBody,
                 {
-                  variant: "text-small",
-                  className: tailwindMerge.twMerge("text-text-tertiary dark:text-text-tertiary-dark", item.labelClassName),
+                  variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
+                  className: tailwindMerge.twMerge("text-[color:var(--deframe-widget-color-text-tertiary)]", item.labelClassName),
                   children: item.label
                 }
               ),
               typeof item.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 TextBody,
                 {
-                  variant: "text-small",
-                  className: tailwindMerge.twMerge("text-text-primary dark:text-text-primary-dark font-medium", item.valueClassName),
+                  variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
+                  className: tailwindMerge.twMerge("text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", item.valueClassName),
                   children: item.value
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: item.valueClassName, children: item.value })
@@ -1874,7 +1920,7 @@ var SummaryDetailsCryptoControlV2 = ({
       "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",
+        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] w-full max-w-[320px] group",
         className
       ),
       open: defaultOpen,
@@ -1891,7 +1937,7 @@ var SummaryDetailsCryptoControlV2 = ({
                 {
                   "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",
+                  className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
                   children: title
                 }
               ),
@@ -1900,7 +1946,7 @@ var SummaryDetailsCryptoControlV2 = ({
                 {
                   "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",
+                  className: "w-4 h-4 text-[color:var(--deframe-widget-color-text-secondary)] transition-transform duration-300 group-open:rotate-180 flex-shrink-0",
                   viewBox: "0 0 24 24",
                   fill: "none",
                   stroke: "currentColor",
@@ -1916,7 +1962,7 @@ var SummaryDetailsCryptoControlV2 = ({
           {
             "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"
+            className: "h-px bg-[var(--deframe-widget-color-border-secondary)] mt-[var(--deframe-widget-size-gap-sm)]"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1924,14 +1970,14 @@ var SummaryDetailsCryptoControlV2 = ({
           {
             "data-test-id": "summary-details-v2-content",
             "data-slot": "summary-details-v2-content",
-            className: tailwindMerge.twMerge("mt-0", contentClassName),
+            className: tailwindMerge.twMerge("mt-[var(--deframe-widget-size-gap-none)]", 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",
+                  className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
@@ -1939,7 +1985,7 @@ var SummaryDetailsCryptoControlV2 = ({
                         "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",
+                          "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] flex-shrink-0",
                           item.labelClassName
                         ),
                         children: item.label
@@ -1951,7 +1997,7 @@ var SummaryDetailsCryptoControlV2 = ({
                         "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",
+                          "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] text-right",
                           item.valueClassName
                         ),
                         children: item.value
@@ -1973,7 +2019,7 @@ var SummaryDetailsCryptoControlV2 = ({
                 {
                   "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"
+                  className: "h-px bg-[var(--deframe-widget-color-border-secondary)]"
                 }
               )
             ] }, i))
@@ -2096,7 +2142,7 @@ var ActionSheet = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            className: "absolute inset-0 bg-[var(--deframe-widget-color-bg-primary)]/50 backdrop-blur-sm",
             "aria-hidden": "true"
           }
         ),
@@ -2104,8 +2150,8 @@ var ActionSheet = ({
           framerMotion.motion.div,
           {
             className: tailwindMerge.twMerge(
-              "relative w-full bg-[var(--sheet-bg,#0A0A0A)] shadow-2xl overflow-hidden",
-              position === "bottom" ? "max-w-full rounded-t-[32px]" : "max-w-lg rounded-2xl mx-4",
+              "relative w-full bg-[var(--deframe-widget-color-bg-secondary)] shadow-[0_20px_50px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_28%,transparent)] overflow-hidden",
+              position === "bottom" ? "max-w-full rounded-t-[var(--deframe-widget-size-radius-xl)]" : "max-w-lg rounded-[var(--deframe-widget-size-radius-xl)] mx-[var(--deframe-widget-size-gap-md)]",
               getHeightClass(),
               contentClassName
             ),
@@ -2120,168 +2166,51 @@ var ActionSheet = ({
     }
   ) });
 };
-
-// src/stories/providers/types.ts
-var defaultThemeColors = {
-  // Brand
-  brandPrimary: "#405EFF",
-  brandSecondary: "#A9ABF7",
-  // Backgrounds
-  bgDefault: "#FFFFFF",
-  bgSubtle: "#F8F9FA",
-  bgMuted: "#E3E4E8",
-  // Text
-  textPrimary: "#252050",
-  textSecondary: "#5C5F66",
-  textDisabled: "#C6C8CC",
-  textInverse: "#FFFFFF",
-  // States
-  stateSuccess: "#2BA176",
-  stateError: "#FF4D4F",
-  stateWarning: "#F6A700"
-};
-var darkThemeColors = {
-  // Brand
-  brandPrimary: "#405EFF",
-  brandSecondary: "#A9ABF7",
-  // Backgrounds
-  bgDefault: "#121212",
-  bgSubtle: "#1E1E1E",
-  bgMuted: "#2C2C2C",
-  // Text
-  textPrimary: "#FFFFFF",
-  textSecondary: "#E3E4E8",
-  textDisabled: "#898D95",
-  textInverse: "#252050",
-  // States
-  stateSuccess: "#2BA176",
-  stateError: "#FF4D4F",
-  stateWarning: "#F6A700"
-};
-var cryptocontrolThemeColors = {
-  // Brand - green primary for cryptocontrol
-  brandPrimary: "#1FC16B",
-  brandSecondary: "#A9ABF7",
-  // Backgrounds (same as dark)
-  bgDefault: "#121212",
-  bgSubtle: "#1E1E1E",
-  bgMuted: "#2C2C2C",
-  // Text (same as dark)
-  textPrimary: "#FFFFFF",
-  textSecondary: "#E3E4E8",
-  textDisabled: "#898D95",
-  textInverse: "#252050",
-  // States
-  stateSuccess: "#2BA176",
-  stateError: "#FF4D4F",
-  stateWarning: "#F6A700"
-};
-function themeToCSS(theme) {
-  if (!(theme == null ? void 0 : theme.colors)) return {};
-  const vars = {};
-  const colors = theme.colors;
-  if (colors.brandPrimary) vars["--deframe-brand-primary"] = colors.brandPrimary;
-  if (colors.brandSecondary) vars["--deframe-brand-secondary"] = colors.brandSecondary;
-  if (colors.bgDefault) vars["--deframe-bg-default"] = colors.bgDefault;
-  if (colors.bgSubtle) vars["--deframe-bg-subtle"] = colors.bgSubtle;
-  if (colors.bgMuted) vars["--deframe-bg-muted"] = colors.bgMuted;
-  if (colors.textPrimary) vars["--deframe-text-primary"] = colors.textPrimary;
-  if (colors.textSecondary) vars["--deframe-text-secondary"] = colors.textSecondary;
-  if (colors.textDisabled) vars["--deframe-text-disabled"] = colors.textDisabled;
-  if (colors.textInverse) vars["--deframe-text-inverse"] = colors.textInverse;
-  if (colors.stateSuccess) vars["--deframe-state-success"] = colors.stateSuccess;
-  if (colors.stateError) vars["--deframe-state-error"] = colors.stateError;
-  if (colors.stateWarning) vars["--deframe-state-warning"] = colors.stateWarning;
-  return vars;
-}
-function getSystemColorMode() {
-  if (typeof window === "undefined" || !window.matchMedia) return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function resolveThemeConfig(config, systemMode) {
-  var _a, _b, _c, _d, _e, _f;
-  const mode = (config == null ? void 0 : config.mode) === "auto" ? systemMode : (_a = config == null ? void 0 : config.mode) != null ? _a : "light";
-  const preset = (_b = config == null ? void 0 : config.preset) != null ? _b : "default";
-  const providerTheme = preset === "cryptocontrol" ? "cryptocontrol" : mode === "dark" ? "dark" : "light";
-  const overrideColors = mode === "dark" ? (_d = (_c = config == null ? void 0 : config.overrides) == null ? void 0 : _c.dark) == null ? void 0 : _d.colors : (_f = (_e = config == null ? void 0 : config.overrides) == null ? void 0 : _e.light) == null ? void 0 : _f.colors;
-  const customTheme = overrideColors ? { colors: overrideColors } : void 0;
-  return { providerTheme, customTheme };
-}
 function DeframeComponentsProvider({
-  theme = "light",
-  themeConfig,
-  customTheme,
   className,
   children
 }) {
-  const [systemMode, setSystemMode] = React6.useState(() => getSystemColorMode());
-  React6.useEffect(() => {
-    var _a;
-    const needsSystem = (themeConfig == null ? void 0 : themeConfig.mode) === "auto";
-    if (!needsSystem || typeof window === "undefined" || !window.matchMedia) return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = () => setSystemMode(mq.matches ? "dark" : "light");
-    handler();
-    (_a = mq.addEventListener) == null ? void 0 : _a.call(mq, "change", handler);
-    return () => {
-      var _a2;
-      return (_a2 = mq.removeEventListener) == null ? void 0 : _a2.call(mq, "change", handler);
-    };
-  }, [themeConfig == null ? void 0 : themeConfig.mode]);
-  const resolvedTheme = React6.useMemo(() => {
-    if (themeConfig) {
-      return resolveThemeConfig(themeConfig, systemMode);
-    }
-    return {
-      providerTheme: theme,
-      customTheme
-    };
-  }, [themeConfig, theme, customTheme, systemMode]);
-  const themeClass = resolvedTheme.providerTheme === "light" ? "" : resolvedTheme.providerTheme;
-  const colorScheme = resolvedTheme.providerTheme === "light" ? "light" : "dark";
-  const customCSSVars = themeToCSS(resolvedTheme.customTheme);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: tailwindMerge.twMerge("deframe-widget", themeClass, className),
-      style: __spreadValues({ colorScheme }, customCSSVars),
+      className: tailwindMerge.twMerge("deframe-widget", className),
       children
     }
   );
 }
 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" : "";
+  const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-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";
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
   return /* @__PURE__ */ 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"
+  default: "text-[color:var(--deframe-widget-color-text-primary)]",
+  success: "text-[color:var(--deframe-widget-color-state-success)]",
+  warning: "text-[color:var(--deframe-widget-color-state-warning)]",
+  error: "text-[color:var(--deframe-widget-color-state-error)]"
 };
 var InfoValue = ({ children, variant = "default", className }) => {
-  const baseClasses = "text-sm font-semibold";
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]";
   return /* @__PURE__ */ 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" : "";
+  const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-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";
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
   return /* @__PURE__ */ 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";
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-icon-value", className: tailwindMerge.twMerge(baseClasses, className), children });
 };
 var CollapsibleInfoRow = ({
@@ -2294,7 +2223,7 @@ var CollapsibleInfoRow = ({
   expandLabel
 }) => {
   const [isOpen, setIsOpen] = React6__namespace.default.useState(defaultOpen);
-  const baseClasses = "flex flex-col gap-sm w-full";
+  const baseClasses = "flex flex-col gap-[var(--deframe-widget-size-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",
@@ -2306,10 +2235,10 @@ var CollapsibleInfoRow = ({
         "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: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: label }),
+            /* @__PURE__ */ 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-[color:var(--deframe-widget-color-text-secondary)]" }) : /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-secondary)]" }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-sm font-semibold text-text-secondary dark:text-text-secondary-dark", children: value })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: value })
         ]
       }
     ),
@@ -2317,116 +2246,103 @@ var CollapsibleInfoRow = ({
   ] });
 };
 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";
+  const baseClasses = "w-full flex-1 min-h-0 px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto";
   return /* @__PURE__ */ 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";
+  const baseClasses = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]";
   return /* @__PURE__ */ 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";
+  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[color:var(--deframe-widget-color-border-tertiary)] flex";
   return /* @__PURE__ */ 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"
+  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
+  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
+  md: "gap-[var(--deframe-widget-size-gap-md)]",
+  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
 };
 var FlexCol = ({ children, className, gap = "xs" }) => {
   const baseClasses = "flex flex-col";
   return /* @__PURE__ */ 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"
+  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
+  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
+  md: "gap-[var(--deframe-widget-size-gap-md)]",
+  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
 };
 var FlexRow = ({ children, className, gap = "xs" }) => {
   const baseClasses = "flex items-center";
   return /* @__PURE__ */ 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";
+  const baseClasses = "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]";
   return /* @__PURE__ */ 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";
+  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b border-[color:var(--deframe-widget-color-border-tertiary)] flex items-center";
   return /* @__PURE__ */ 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",
+        className: "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer",
         "aria-label": backAriaLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronLeft, { className: "w-6 h-6 text-text-tertiary dark:text-text-tertiary-dark" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronLeft, { className: "w-6 h-6 text-[color:var(--deframe-widget-color-text-tertiary)]" })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { 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";
+  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
   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 }) })
+      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-error)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-error)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
     }
   ) });
 };
 var MediumRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-1";
+  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
   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 }) })
+      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-warning)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-warning)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
     }
   ) });
 };
 var LowRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-1";
+  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
   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 }) })
+      className: "h-6 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-95 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_20%,transparent)] rounded-[var(--deframe-widget-size-radius-md)] outline outline-1 outline-offset-[-1px] outline-[color:var(--deframe-widget-color-state-success)] flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start items-center gap-[var(--deframe-widget-size-gap-sm)].5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-start text-[color:var(--deframe-widget-color-state-success)] [font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-regular)] font-[var(--deframe-widget-font-family)] leading-4", children: label }) })
     }
   ) });
 };
 var gapClasses3 = {
-  xs: "gap-xs",
-  sm: "gap-sm",
-  md: "gap-md",
-  lg: "gap-lg"
+  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
+  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
+  md: "gap-[var(--deframe-widget-size-gap-md)]",
+  lg: "gap-[var(--deframe-widget-size-gap-lg)]"
 };
 var 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: [
+var TransactionTypeLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "transaction-type-label", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children });
+var Amount = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "amount", className: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)]", children });
+var AmountInUsd = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-test-id": "amount-in-usd", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
   "~ ",
   children
 ] });
@@ -2436,16 +2352,16 @@ var TokenIcon = ({ src, alt }) => /* @__PURE__ */ jsxRuntime.jsx(
     "data-test-id": "token-icon",
     src,
     alt,
-    className: "w-8 h-8 rounded-full",
+    className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-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 SuccessBadge = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "success-badge", className: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)] flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-lg)]", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-state-success)]" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children })
 ] });
 var truncateHash = (hash, chars = 6) => {
   if (hash.length <= chars * 2 + 3) return hash;
@@ -2453,15 +2369,15 @@ var truncateHash = (hash, chars = 6) => {
 };
 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.jsx("span", { "data-test-id": "transaction-id", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)]", 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) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "transaction-id", className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children: truncateHash(hash) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AddressDisplay,
       {
         address: hash,
-        className: "border-none bg-transparent p-0 gap-0",
+        className: "border-none bg-transparent px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)] gap-[var(--deframe-widget-size-gap-none)]",
         textClassName: "hidden"
       }
     )
@@ -2474,13 +2390,13 @@ var ExplorerLink = ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
     href,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: "text-brand-primary underline text-sm font-semibold font-poppins",
+    className: "text-[color:var(--deframe-widget-color-brand-primary)] underline [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)]",
     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 })
+  /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-primary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: primary }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "two-line-value-secondary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: secondary })
 ] });
 var HistoryDepositDetailsView = ({
   transactionTypeLabel,
@@ -2535,7 +2451,7 @@ var HistoryDepositDetailsView = ({
           ] }) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-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 })
@@ -2625,7 +2541,7 @@ var HistoryWithdrawDetailsView = ({
           ] }) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-md", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexCol, { gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-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 })
@@ -2670,21 +2586,21 @@ var SwapNetworkSelectorView = ({
   testId = "swap-network-selector",
   className
 }) => {
-  const baseClasses = "flex flex-row items-center gap-xs";
+  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", 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",
+        className: "ml-[var(--deframe-widget-size-gap-lg)] bg-[var(--deframe-widget-color-bg-tertiary)] border border-[color:var(--deframe-widget-color-border-tertiary)] rounded-[var(--deframe-widget-size-radius-md)] flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] hover:border-[color:var(--deframe-widget-color-border-secondary)] transition-colors [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)] cursor-pointer",
         "aria-label": `${directionLabel} ${chainLabel}`,
         children: [
-          chainImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-full" }) : null,
+          chainImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: chainImage, alt: chainLabel, className: "w-3 h-3 rounded-[var(--deframe-widget-size-radius-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" }) })
+          /* @__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-[color:var(--deframe-widget-color-text-tertiary)]" }) })
         ]
       }
     )
@@ -2695,10 +2611,10 @@ var SwapQuoteHeaderView = ({
   timerElement,
   className
 }) => {
-  const baseClasses = "border-b border-border-default dark:border-border-default-dark pb-sm";
+  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-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, { 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 })
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
   ] }) });
 };
 var SwapAmountInputView = ({
@@ -2729,8 +2645,8 @@ var SwapAmountInputView = ({
     }
     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";
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)]";
+  const colorClasses = hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary)]";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     __spreadProps(__spreadValues({
@@ -2765,8 +2681,8 @@ var SwapOutputAmountView = ({
   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, { as: "span", variant: "text-small", className: "text-text-disabled dark:text-text-disabled-dark inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
 };
 var SwapQuoteErrorsView = ({
   hasQuoteError,
@@ -2800,12 +2716,12 @@ var SwapSlippageToleranceButtonsView = ({
   formatPercentage,
   className
 }) => {
-  const baseClasses = "flex gap-xs";
+  const baseClasses = "flex gap-[var(--deframe-widget-size-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";
+    const activeClasses = "border-[color:var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_18%,transparent)]";
+    const inactiveClasses = "border-[color:var(--deframe-widget-color-border-tertiary)] text-[color:var(--deframe-widget-color-text-secondary)] bg-[var(--deframe-widget-color-bg-primary)]";
+    const buttonBase = "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-xs)] border [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] cursor-pointer";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2828,7 +2744,7 @@ var SwapTokenSelectorView = ({
   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";
+  const baseClasses = "h-[56px] border border-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] overflow-hidden hover:border-[color:var(--deframe-widget-color-border-primary)] transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -2838,11 +2754,11 @@ var SwapTokenSelectorView = ({
       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, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { 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" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-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-[var(--deframe-widget-size-radius-full)]" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-secondary)] flex items-center justify-center text-[10px] [font-weight:var(--deframe-widget-font-weight-semibold)]", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: token.symbol })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-text-secondary)]", 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-[color:var(--deframe-widget-color-text-tertiary)]" }) })
       ]
     }
   );
@@ -2866,7 +2782,7 @@ var SwapQuoteBlockchainCostsView = ({
       defaultOpen: true,
       collapseLabel,
       expandLabel,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(InfoRowWithIcon, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconLabel, { children: networkGasLabel }),
           /* @__PURE__ */ jsxRuntime.jsx(InfoRowIconValue, { children: gasCostFormatted })
@@ -2879,6 +2795,19 @@ var SwapQuoteBlockchainCostsView = ({
     }
   ) });
 };
+var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
+  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
+  return /* @__PURE__ */ 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 ChooseAStrategyActionsheetView = ({
   isOpen,
   currentActionSheetId,
@@ -2912,19 +2841,19 @@ var ChooseAStrategyActionsheetView = ({
       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 flex-col flex-1 w-full px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { 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("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full mt-[var(--deframe-widget-size-gap-md)] 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-[var(--deframe-widget-size-radius-full)]" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "gap-[var(--deframe-widget-size-gap-xs)]", children: [
               /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: resolvedYieldLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: Badge })
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", 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: [
+            /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[color:var(--deframe-widget-color-state-success)]", children: [
                 apy,
                 "% ",
                 apyLabel
@@ -2951,23 +2880,23 @@ var StrategyDetailsView = ({
 }) => {
   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("div", { "data-test-id": "strategy-details-content", className: "flex-1 min-h-0 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] py-[var(--deframe-widget-size-padding-y-lg)] pb-[var(--deframe-widget-size-padding-y-xxl)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)] min-h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-[var(--deframe-widget-size-radius-full)]" }),
         /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: title })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", 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"
+          className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]"
         }
       )
     ] }) }),
-    /* @__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 }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "strategy-details-footer", className: "sticky bottom-0 left-0 right-0 border-t border-[color:var(--deframe-widget-color-border-tertiary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDeposit, className: "w-full", children: depositButtonLabel }) })
   ] });
 };
 var ProgressIndicator = ({
@@ -2979,15 +2908,15 @@ var ProgressIndicator = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "h-[4px] bg-brand-primary rounded-lg transition-all duration-300",
+        className: "h-[4px] bg-[var(--deframe-widget-color-brand-primary)] rounded-[var(--deframe-widget-size-radius-md)] transition-all duration-300",
         style: { width: `${clampedProgress}%` }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-[4px] bg-bg-muted dark:bg-bg-muted-dark rounded-lg ml-1" })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-[4px] bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-md)] ml-[var(--deframe-widget-size-gap-xs)]" })
   ] }) });
 };
 var LoadingDots = ({ className = "" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex gap-0.5 ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex gap-[var(--deframe-widget-size-gap-none)].5 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
@@ -3028,28 +2957,28 @@ var SearchInput = ({
         autoFocus,
         onChange: (e) => handleInputChange(e.target.value),
         className: [
-          "w-full h-full rounded p-4 pr-12 leading-normal tracking-wide",
-          !inputClassName ? "bg-bg-subtle dark:bg-bg-subtle-dark" : "",
-          "placeholder:text-text-disabled dark:placeholder:text-text-disabled-dark text-text-primary dark:text-text-primary-dark",
+          "w-full h-full rounded-[var(--deframe-widget-size-radius-xs)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] pr-[var(--deframe-widget-size-padding-x-xxl)] leading-normal tracking-wide",
+          !inputClassName ? "bg-[var(--deframe-widget-color-bg-secondary)]" : "",
+          "placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)] text-[color:var(--deframe-widget-color-text-primary)]",
           "focus:outline-none focus:ring-2 focus:ring-brand-primary",
           disabled ? "cursor-not-allowed opacity-50" : "",
           inputClassName || ""
         ].filter(Boolean).join(" ")
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearch, { className: "w-4 h-4 text-text-secondary absolute right-4" })
+    /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearch, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-text-secondary)] absolute right-4" })
   ] });
 };
 var SearchEmptyState = ({
   title,
   description
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md py-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearchOff, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-[var(--deframe-widget-size-padding-y-md)] bg-[var(--deframe-widget-color-bg-primary)] rounded-[var(--deframe-widget-size-radius-md)] flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-sm)] h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)] py-[var(--deframe-widget-size-padding-y-xxl)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-[var(--deframe-widget-size-gap-md)] text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearchOff, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)]" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }) })
   ] }) });
 };
 var CollapsibleSection = ({
@@ -3072,7 +3001,7 @@ var CollapsibleSection = ({
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpenState);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-sm w-full ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -3082,13 +3011,13 @@ var CollapsibleSection = ({
         "aria-expanded": isOpen,
         "aria-label": `${isOpen ? collapseText : expandText} ${title}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-white font-medium", children: title }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-xs", children: [
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary-dark)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: subtitle }),
             /* @__PURE__ */ jsxRuntime.jsx(
               framerMotion.motion.svg,
               {
-                className: "w-5 h-5 text-gray-400",
+                className: "w-5 h-5 text-[color:var(--deframe-widget-color-text-secondary)]",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -3116,15 +3045,15 @@ var CollapsibleSection = ({
 };
 var TransactionScreenIcon = ({
   type,
-  gradient = "linear-gradient(135deg, #F6A700 0%, #F59E0B 100%)"
+  gradient = "linear-gradient(135deg, var(--deframe-widget-color-state-warning) 0%, color-mix(in srgb, var(--deframe-widget-color-state-warning) 78%, black) 100%)"
 }) => {
   if (type === "success") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-20 h-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full bg-brand-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-20 h-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-brand-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-[color:var(--deframe-widget-color-text-primary-dark)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }) });
   }
   if (type === "warning") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-bg-default dark:text-bg-default-dark", fill: "currentColor", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 5.33334C15.6444 5.33334 15.3111 5.51112 15.1111 5.8L5.11112 21.8C4.91112 22.0889 4.91112 22.4667 5.11112 22.7556C5.31112 23.0444 5.64445 23.2222 6.00001 23.2222H26C26.3556 23.2222 26.6889 23.0444 26.8889 22.7556C27.0889 22.4667 27.0889 22.0889 26.8889 21.8L16.8889 5.8C16.6889 5.51112 16.3556 5.33334 16 5.33334ZM16 10.6667C16.5333 10.6667 17 11.1333 17 11.6667V16C17 16.5333 16.5333 17 16 17C15.4667 17 15 16.5333 15 16V11.6667C15 11.1333 15.4667 10.6667 16 10.6667ZM16 19.3333C16.7333 19.3333 17.3333 19.9333 17.3333 20.6667C17.3333 21.4 16.7333 22 16 22C15.2667 22 14.6667 21.4 14.6667 20.6667C14.6667 19.9333 15.2667 19.3333 16 19.3333Z" }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-[color:var(--deframe-widget-color-bg-primary)]", fill: "currentColor", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 5.33334C15.6444 5.33334 15.3111 5.51112 15.1111 5.8L5.11112 21.8C4.91112 22.0889 4.91112 22.4667 5.11112 22.7556C5.31112 23.0444 5.64445 23.2222 6.00001 23.2222H26C26.3556 23.2222 26.6889 23.0444 26.8889 22.7556C27.0889 22.4667 27.0889 22.0889 26.8889 21.8L16.8889 5.8C16.6889 5.51112 16.3556 5.33334 16 5.33334ZM16 10.6667C16.5333 10.6667 17 11.1333 17 11.6667V16C17 16.5333 16.5333 17 16 17C15.4667 17 15 16.5333 15 16V11.6667C15 11.1333 15.4667 10.6667 16 10.6667ZM16 19.3333C16.7333 19.3333 17.3333 19.9333 17.3333 20.6667C17.3333 21.4 16.7333 22 16 22C15.2667 22 14.6667 21.4 14.6667 20.6667C14.6667 19.9333 15.2667 19.3333 16 19.3333Z" }) }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-8 h-8 text-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.66659 8.33301H7.33325V7.08301C7.33325 6.62468 7.15374 6.23231 6.79471 5.90593C6.43568 5.57954 6.00409 5.41634 5.49992 5.41634C4.99575 5.41634 4.56415 5.57954 4.20513 5.90593C3.8461 6.23231 3.66659 6.62468 3.66659 7.08301V8.33301ZM5.49992 4.58301C6.00409 4.58301 6.43568 4.41981 6.79471 4.09342C7.15374 3.76704 7.33325 3.37467 7.33325 2.91634V1.66634H3.66659V2.91634C3.66659 3.37467 3.8461 3.76704 4.20513 4.09342C4.56415 4.41981 4.99575 4.58301 5.49992 4.58301ZM2.29159 9.16634C2.16172 9.16634 2.05287 9.12641 1.96502 9.04655C1.87718 8.96669 1.83325 8.86773 1.83325 8.74968C1.83325 8.63162 1.87718 8.53266 1.96502 8.4528C2.05287 8.37294 2.16172 8.33301 2.29159 8.33301H2.74992V7.08301C2.74992 6.6594 2.85877 6.26183 3.07648 5.8903C3.29419 5.51877 3.59784 5.2219 3.98742 4.99967C3.59784 4.77745 3.29419 4.48058 3.07648 4.10905C2.85877 3.73752 2.74992 3.33995 2.74992 2.91634V1.66634H2.29159C2.16172 1.66634 2.05287 1.62641 1.96502 1.54655C1.87718 1.46669 1.83325 1.36773 1.83325 1.24967C1.83325 1.13162 1.87718 1.03266 1.96502 0.952799C2.05287 0.872938 2.16172 0.833008 2.29159 0.833008H8.70825C8.83811 0.833008 8.94697 0.872938 9.03481 0.952799C9.12266 1.03266 9.16659 1.13162 9.16659 1.24967C9.16659 1.36773 9.12266 1.46669 9.03481 1.54655C8.94697 1.62641 8.83811 1.66634 8.70825 1.66634H8.24992V2.91634C8.24992 3.33995 8.14106 3.73752 7.92336 4.10905C7.70565 4.48058 7.402 4.77745 7.01242 4.99967C7.402 5.2219 7.70565 5.51877 7.92336 5.8903C8.14106 6.26183 8.24992 6.6594 8.24992 7.08301V8.33301H8.70825C8.83811 8.33301 8.94697 8.37294 9.03481 8.4528C9.12266 8.53266 9.16659 8.63162 9.16659 8.74968C9.16659 8.86773 9.12266 8.96669 9.03481 9.04655C8.94697 9.12641 8.83811 9.16634 8.70825 9.16634H2.29159Z", fill: "currentColor" }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[83px] h-[83px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center", style: { background: gradient }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-8 h-8 text-[color:var(--deframe-widget-color-text-primary-dark)]", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.66659 8.33301H7.33325V7.08301C7.33325 6.62468 7.15374 6.23231 6.79471 5.90593C6.43568 5.57954 6.00409 5.41634 5.49992 5.41634C4.99575 5.41634 4.56415 5.57954 4.20513 5.90593C3.8461 6.23231 3.66659 6.62468 3.66659 7.08301V8.33301ZM5.49992 4.58301C6.00409 4.58301 6.43568 4.41981 6.79471 4.09342C7.15374 3.76704 7.33325 3.37467 7.33325 2.91634V1.66634H3.66659V2.91634C3.66659 3.37467 3.8461 3.76704 4.20513 4.09342C4.56415 4.41981 4.99575 4.58301 5.49992 4.58301ZM2.29159 9.16634C2.16172 9.16634 2.05287 9.12641 1.96502 9.04655C1.87718 8.96669 1.83325 8.86773 1.83325 8.74968C1.83325 8.63162 1.87718 8.53266 1.96502 8.4528C2.05287 8.37294 2.16172 8.33301 2.29159 8.33301H2.74992V7.08301C2.74992 6.6594 2.85877 6.26183 3.07648 5.8903C3.29419 5.51877 3.59784 5.2219 3.98742 4.99967C3.59784 4.77745 3.29419 4.48058 3.07648 4.10905C2.85877 3.73752 2.74992 3.33995 2.74992 2.91634V1.66634H2.29159C2.16172 1.66634 2.05287 1.62641 1.96502 1.54655C1.87718 1.46669 1.83325 1.36773 1.83325 1.24967C1.83325 1.13162 1.87718 1.03266 1.96502 0.952799C2.05287 0.872938 2.16172 0.833008 2.29159 0.833008H8.70825C8.83811 0.833008 8.94697 0.872938 9.03481 0.952799C9.12266 1.03266 9.16659 1.13162 9.16659 1.24967C9.16659 1.36773 9.12266 1.46669 9.03481 1.54655C8.94697 1.62641 8.83811 1.66634 8.70825 1.66634H8.24992V2.91634C8.24992 3.33995 8.14106 3.73752 7.92336 4.10905C7.70565 4.48058 7.402 4.77745 7.01242 4.99967C7.402 5.2219 7.70565 5.51877 7.92336 5.8903C8.14106 6.26183 8.24992 6.6594 8.24992 7.08301V8.33301H8.70825C8.83811 8.33301 8.94697 8.37294 9.03481 8.4528C9.12266 8.53266 9.16659 8.63162 9.16659 8.74968C9.16659 8.86773 9.12266 8.96669 9.03481 9.04655C8.94697 9.12641 8.83811 9.16634 8.70825 9.16634H2.29159Z", fill: "currentColor" }) }) }) });
 };
 var TransactionScreen = ({
   progress,
@@ -3141,18 +3070,18 @@ var TransactionScreen = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BackgroundContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     onBack && /* @__PURE__ */ jsxRuntime.jsx(DetailsHeader, { title: backTitle, onBack }),
-    onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: "flex justify-start px-md pt-md", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-md pt-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-md py-lg flex flex-col gap-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-md pt-lg", children: [
+    onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: "flex justify-start px-[var(--deframe-widget-size-padding-x-md)] pt-md", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { progress }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)] flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-md)] pt-lg", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TransactionScreenIcon, { type: iconType, gradient: iconGradient }),
         /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h-large", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-md-mobile font-poppins text-text-secondary dark:text-text-secondary-dark text-center", style: { maxWidth: "350px" }, children: description })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)] text-center", style: { maxWidth: "350px" }, children: description })
       ] }),
       children,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
     ] }),
-    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-md pb-md", children: actions })
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-md)]", children: actions })
   ] }) });
 };
 var TransactionScreenInvestmentCard = ({
@@ -3171,19 +3100,19 @@ var TransactionScreenInvestmentCard = ({
   const shouldShowImage = Boolean(iconSrc) && !hasImageError;
   const fallbackLabel = (iconAlt || "?").slice(0, 1).toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-accent-lg-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: strategyName }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-[var(--deframe-widget-size-gap-xs)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: strategyName }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
         apyLabel,
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-state-success", children: apyValue })
+        /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-[color:var(--deframe-widget-color-state-success)]", children: apyValue })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center", children: shouldShowImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconSrc, alt: iconAlt, className: "w-6 h-6 rounded-full", onError: () => setHasImageError(true) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-text-secondary dark:text-text-secondary-dark", children: fallbackLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center", children: shouldShowImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconSrc, alt: iconAlt, className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)]", onError: () => setHasImageError(true) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-xs)] [line-height:var(--deframe-widget-font-leading-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)]", children: fallbackLabel }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: amountUSD }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: amountToken })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: amountUSD }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: amountToken })
       ] })
     ] })
   ] }) });
@@ -3191,11 +3120,11 @@ var TransactionScreenInvestmentCard = ({
 function StepStatusIcon({ status }) {
   switch (status) {
     case "completed":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4", style: { color: "var(--color-state-success, #2BA176)" } }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) });
     case "processing":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoTimeOutline, { className: "w-4 h-4", style: { color: "var(--color-state-warning, #F6A700)" } }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoTimeOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-warning)]" }) });
     case "failed":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-muted dark:bg-bg-muted-dark flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoAlertCircleOutline, { className: "w-4 h-4", style: { color: "var(--color-state-error, #FF4D4F)" } }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(io5.IoAlertCircleOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-error)]" }) });
   }
 }
 function StepStatusText({
@@ -3206,8 +3135,8 @@ function StepStatusText({
   viewOnExplorerText
 }) {
   if (step.statusText) {
-    const textColorClass2 = step.status === "completed" ? "text-text-primary dark:text-text-primary-dark" : step.status === "processing" ? "text-text-secondary dark:text-text-secondary-dark" : step.status === "failed" ? "text-state-error" : "text-text-disabled dark:text-text-disabled-dark";
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${textColorClass2}`, children: step.statusText });
+    const textColorClass2 = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : step.status === "failed" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary-disabled)]";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass2}`, children: step.statusText });
   }
   if (step.status === "completed" && step.explorerUrl) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3216,24 +3145,24 @@ function StepStatusText({
         href: step.explorerUrl,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "text-sm text-brand-primary dark:text-brand-primary-dark underline hover:no-underline",
+        className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-brand-primary)] underline hover:no-underline",
         children: viewOnExplorerText
       }
     );
   }
   const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
-  const textColorClass = step.status === "completed" ? "text-text-primary dark:text-text-primary-dark" : step.status === "processing" ? "text-text-secondary dark:text-text-secondary-dark" : "text-state-error";
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${textColorClass}`, children: defaultText });
+  const textColorClass = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : "text-[color:var(--deframe-widget-color-state-error)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass}`, children: defaultText });
 }
 function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-primary dark:text-text-primary-dark font-medium", children: step.label }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: step.value }) : /* @__PURE__ */ jsxRuntime.jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-md)] w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: step.label }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.value }) : /* @__PURE__ */ jsxRuntime.jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
   ] });
 }
 function TransactionProcessingDetails({
   steps,
-  className = "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised",
+  className = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
   defaultOpen = true,
   labels
 }) {
@@ -3241,19 +3170,19 @@ function TransactionProcessingDetails({
     return null;
   }
   const getProcessingSteps = () => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
         step.status && /* @__PURE__ */ jsxRuntime.jsx(StepStatusIcon, { status: step.status }),
-        index < steps.length - 1 && step.status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px flex-1 min-h-[16px] bg-white my-1" })
+        index < steps.length - 1 && step.status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px flex-1 min-h-[16px] bg-[var(--deframe-widget-color-bg-primary-dark)] my-[var(--deframe-widget-size-gap-xs)]" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-2 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pb-[var(--deframe-widget-size-padding-y-sm)] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
     ] }, `step-${index}`)) });
   };
   const items = [
     {
       label: "",
       value: getProcessingSteps(),
-      valueClassName: "flex flex-col gap-0 w-full"
+      valueClassName: "flex flex-col gap-[var(--deframe-widget-size-gap-none)] w-full"
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3280,7 +3209,7 @@ var TokenWithChainBadge = ({
       {
         src: tokenLogoUrl || fallbackSrc,
         alt: tokenAlt || "",
-        className: "object-cover w-10 h-10 rounded-full",
+        className: "object-cover w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]",
         onError: (e) => {
           e.target.src = fallbackSrc;
         }
@@ -3291,7 +3220,7 @@ var TokenWithChainBadge = ({
       {
         src: chainLogoUrl,
         alt: chainName,
-        className: "absolute object-cover w-6 h-6 p-px bg-white border rounded-full -bottom-1 -right-1 border-bg-default",
+        className: "absolute object-cover w-6 h-6 p-px bg-[var(--deframe-widget-color-bg-primary-dark)] border rounded-[var(--deframe-widget-size-radius-full)] -bottom-1 -right-1 border-bg-default",
         onError: (e) => {
           e.target.style.display = "none";
         }
@@ -3331,7 +3260,7 @@ var SwapProcessingView = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
-            className: "font-semibold underline underline-offset-2 cursor-pointer text-brand-primary",
+            className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline underline-offset-2 cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]",
             onClick: onGoToHistory,
             children: [
               activityHistoryText,
@@ -3341,29 +3270,29 @@ var SwapProcessingView = ({
         )
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-[var(--deframe-widget-size-padding-x-md)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 formattedInputAmount,
                 " ",
                 fromTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedInputAmountUSD })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--deframe-widget-color-brand-secondary)] rounded-[var(--deframe-widget-size-radius-full)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)] shadow-[0_10px_30px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_22%,transparent)] z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 "~",
                 formattedOutputAmount,
                 " ",
                 toTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedOutputAmountUSD })
             ] })
           ] })
         ] }) }),
@@ -3371,7 +3300,7 @@ var SwapProcessingView = ({
           TransactionProcessingDetails,
           {
             steps: transactionSteps,
-            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
             labels: processingDetailsLabels
           }
         )
@@ -3416,7 +3345,7 @@ var SwapCrossChainProcessingView = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "font-semibold underline cursor-pointer underline-offset-2 text-brand-primary",
+            className: "[font-weight:var(--deframe-widget-font-weight-semibold)] underline cursor-pointer underline-offset-2 text-[color:var(--deframe-widget-color-brand-primary)]",
             onClick: onGoToHistory,
             children: viewHistoryText
           }
@@ -3424,8 +3353,8 @@ var SwapCrossChainProcessingView = ({
         "."
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between w-full px-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between w-full px-[var(--deframe-widget-size-padding-x-md)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               TokenWithChainBadge,
               {
@@ -3436,17 +3365,17 @@ var SwapCrossChainProcessingView = ({
                 chainName: originChainName
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 formattedInputAmount,
                 " ",
                 fromTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedInputAmountUSD })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 p-2 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md left-1/2 top-1/2 bg-brand-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_10px_30px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_22%,transparent)] left-1/2 top-1/2 bg-[var(--deframe-widget-color-brand-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               TokenWithChainBadge,
               {
@@ -3457,14 +3386,14 @@ var SwapCrossChainProcessingView = ({
                 chainName: destinationChainName
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 "~",
                 formattedOutputAmount,
                 " ",
                 toTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedOutputAmountUSD })
             ] })
           ] })
         ] }) }),
@@ -3472,7 +3401,7 @@ var SwapCrossChainProcessingView = ({
           TransactionProcessingDetails,
           {
             steps: transactionSteps,
-            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
             labels: processingDetailsLabels
           }
         )
@@ -3508,34 +3437,34 @@ var SwapSignatureWarningView = ({
       iconType: "warning",
       title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-signature-warning-title", children: errorTitle }),
       description: errorDescription,
-      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-signature-warning-actions", className: "flex gap-sm w-full", children: [
+      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-signature-warning-actions", className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { "data-testid": "swap-signature-warning-cancel", className: "flex-1", onClick: onCancel, children: cancelButtonText }),
         /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-signature-warning-retry", className: "flex-1", onClick: onTryAgain, children: retryButtonText })
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-[var(--deframe-widget-size-padding-x-md)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 formattedInputAmount,
                 " ",
                 fromTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedInputAmountUSD })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--deframe-widget-color-brand-secondary)] rounded-[var(--deframe-widget-size-radius-full)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)] shadow-[0_10px_30px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_22%,transparent)] z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 "~",
                 formattedOutputAmount,
                 " ",
                 toTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedOutputAmountUSD })
             ] })
           ] })
         ] }) }),
@@ -3544,7 +3473,7 @@ var SwapSignatureWarningView = ({
           {
             steps: transactionSteps,
             defaultOpen: true,
-            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
             labels: processingDetailsLabels
           }
         )
@@ -3579,7 +3508,7 @@ var SwapSuccessView = ({
       description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         labels.descriptionPrefix,
         " ",
-        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "font-semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
           formattedInputAmount,
           " ",
           fromTokenSymbol
@@ -3587,7 +3516,7 @@ var SwapSuccessView = ({
         " ",
         labels.descriptionMiddle,
         " ",
-        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "font-semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)]", children: [
           formattedOutputAmount,
           " ",
           toTokenSymbol
@@ -3595,33 +3524,33 @@ var SwapSuccessView = ({
         /* @__PURE__ */ jsxRuntime.jsx("br", {}),
         labels.descriptionSuffix,
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold text-brand-primary cursor-pointer", onClick: onGoToWallet, children: labels.walletLinkText })
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-brand-primary)] cursor-pointer", onClick: onGoToWallet, children: labels.walletLinkText })
       ] }),
       actions: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "swap-start-new-wrapper", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-start-new-button", className: "w-full", onClick: onStartNewSwap, children: labels.startNewSwapButton }) }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-[var(--deframe-widget-size-padding-x-md)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 formattedInputAmount,
                 " ",
                 fromTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedInputAmountUSD })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--deframe-widget-color-brand-secondary)] rounded-[var(--deframe-widget-size-radius-full)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)] shadow-[0_10px_30px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_22%,transparent)] z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 "~",
                 formattedOutputAmount,
                 " ",
                 toTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedOutputAmountUSD })
             ] })
           ] })
         ] }) }),
@@ -3630,7 +3559,7 @@ var SwapSuccessView = ({
           {
             steps: transactionSteps,
             defaultOpen: true,
-            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
             labels: processingDetailsLabels
           }
         )
@@ -3666,38 +3595,38 @@ var SwapTransactionFailedView = ({
       onClose: onBack,
       progress,
       iconType: "warning",
-      iconGradient: "linear-gradient(135deg, #EF4444 0%, #DC2626 100%)",
+      iconGradient: "linear-gradient(135deg, var(--deframe-widget-color-state-error) 0%, color-mix(in srgb, var(--deframe-widget-color-state-error) 78%, black) 100%)",
       title: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-failed-title", children: errorTitle }),
       description: errorDescription,
-      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-failed-actions", className: "flex gap-sm w-full", children: [
+      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "swap-failed-actions", className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { "data-testid": "swap-failed-view-explorer", className: "flex-1", onClick: onViewExplorer, disabled: !hasExplorerLink, children: viewOnExplorerText }),
         /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { "data-testid": "swap-failed-retry", className: "flex-1", onClick: onTryAgain, children: retryButtonText })
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "!p-[22px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full relative px-[var(--deframe-widget-size-padding-x-md)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: fromTokenIcon, alt: fromTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 "~",
                 formattedInputAmount,
                 " ",
                 fromTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedInputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedInputAmountUSD })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-secondary rounded-full p-2 shadow-md z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--deframe-widget-color-brand-secondary)] rounded-[var(--deframe-widget-size-radius-full)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)] shadow-[0_10px_30px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_22%,transparent)] z-10", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapHoriz, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: toTokenIcon, alt: toTokenSymbol, className: "w-8 h-8 rounded-[var(--deframe-widget-size-radius-full)]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
                 "~",
                 formattedOutputAmount,
                 " ",
                 toTokenSymbol
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-h2-mobile font-extrabold font-poppins text-text-primary dark:text-text-primary-dark", children: formattedOutputAmountUSD })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: formattedOutputAmountUSD })
             ] })
           ] })
         ] }) }),
@@ -3706,7 +3635,7 @@ var SwapTransactionFailedView = ({
           {
             steps: transactionSteps,
             defaultOpen: true,
-            className: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised dark:lg:!bg-bg-raised-dark",
+            className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
             labels: processingDetailsLabels
           }
         )
@@ -3748,7 +3677,7 @@ var ChooseAnAssetSwapView = ({
       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, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
             /* @__PURE__ */ jsxRuntime.jsx("br", {}),
@@ -3758,15 +3687,15 @@ var ChooseAnAssetSwapView = ({
                 onSearch: handleSearch,
                 placeholder: labels.searchPlaceholder,
                 autoFocus,
-                inputClassName: "bg-bg-subtle dark:bg-bg-subtle-dark lg:!bg-bg-raised lg:dark:!bg-bg-raised-dark",
+                inputClassName: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
                 containerTestId: `swap-token-search-container-${actionSheetId}`,
                 inputTestId: `swap-token-search-input-${actionSheetId}`
               }
             )
           ] }),
-          searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: [
-            isFetching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
+          searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0", children: [
+            isFetching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
               /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
             ] }) }),
             displayedTokens.map((token, index) => {
@@ -3783,21 +3712,21 @@ var ChooseAnAssetSwapView = ({
                   "data-chain-id": token.chainId,
                   "data-symbol": token.symbol,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-full" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: token.name }),
-                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: token.symbol })
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: token.symbol })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: formattedBalance }),
-                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
                     ] })
                   ]
                 },
                 `token-${token.address}-${index}`
               );
             }),
-            hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: labels.loadMoreButton }) })
+            hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(TertiaryButton, { onClick: onLoadMore, children: labels.loadMoreButton }) })
           ] })
         ] })
       ] })
@@ -4191,7 +4120,6 @@ exports.BackgroundContainer = BackgroundContainer;
 exports.BannerNotification = BannerNotification;
 exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
 exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
-exports.CloseButton = CloseButton;
 exports.CollapsibleInfoRow = CollapsibleInfoRow;
 exports.CollapsibleSection = CollapsibleSection;
 exports.ConfirmSwapButtonView = ConfirmSwapButtonView;
@@ -4273,12 +4201,9 @@ exports.TransactionProcessingDetails = TransactionProcessingDetails;
 exports.TransactionScreen = TransactionScreen;
 exports.TransactionScreenIcon = TransactionScreenIcon;
 exports.TransactionScreenInvestmentCard = TransactionScreenInvestmentCard;
+exports.WalletConnectPanel = WalletConnectPanel;
 exports.WalletItem = WalletItem;
 exports.WalletList = ConnectWalletList;
 exports.WalletListContainer = WalletListContainer;
-exports.cryptocontrolThemeColors = cryptocontrolThemeColors;
-exports.darkThemeColors = darkThemeColors;
-exports.defaultThemeColors = defaultThemeColors;
-exports.themeToCSS = themeToCSS;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map