@deframe-sdk/components 0.1.7 → 0.1.9

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React6 from 'react';
 import React6__default, { useState, useEffect, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz } from 'react-icons/md';
+import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline } from 'react-icons/md';
 import { HiChevronUp, HiChevronDown, HiChevronLeft, HiXMark, HiArrowRight } from 'react-icons/hi2';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
 
@@ -125,7 +125,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)]",
+    "font-[var(--deframe-widget-font-family-primary)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
     "[line-height:var(--deframe-widget-font-leading-md)]",
     "[font-weight:var(--deframe-widget-font-weight-semibold)]",
@@ -189,7 +189,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)]",
+    "font-[var(--deframe-widget-font-family-primary)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
     "[line-height:var(--deframe-widget-font-leading-md)]",
     "[font-weight:var(--deframe-widget-font-weight-semibold)]",
@@ -250,7 +250,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)]",
+    "font-[var(--deframe-widget-font-family-primary)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
     "[line-height:var(--deframe-widget-font-leading-md)]",
     "[font-weight:var(--deframe-widget-font-weight-semibold)]",
@@ -292,27 +292,139 @@ function TertiaryButton(_a) {
     })
   );
 }
+function Input(_a) {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  const baseClasses = [
+    "flex flex-col",
+    "[gap:var(--deframe-widget-size-gap-xs)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "input",
+      "data-test-id": "input",
+      className: twMerge(baseClasses, className)
+    }, props)
+  );
+}
+function InputLabel(_a) {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  const baseClasses = [
+    "[font-family:var(--deframe-widget-font-family-primary)]",
+    "[font-size:var(--deframe-widget-font-size-xs)]",
+    "[font-weight:var(--deframe-widget-font-weight-medium)]",
+    "text-[var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "label",
+    __spreadValues({
+      "data-slot": "input-label",
+      "data-test-id": "input-label",
+      className: twMerge(baseClasses, className)
+    }, props)
+  );
+}
+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-size:var(--deframe-widget-font-size-md)]",
+    "[font-weight:var(--deframe-widget-font-weight-regular)]",
+    "text-[var(--deframe-widget-color-text-primary)]",
+    "placeholder-[var(--deframe-widget-color-placeholder-primary)]",
+    "border-[length:var(--deframe-widget-size-border-xs)]",
+    "rounded-[var(--deframe-widget-size-radius-sm)]",
+    "px-[var(--deframe-widget-size-padding-x-md)]",
+    "py-[var(--deframe-widget-size-padding-y-sm)]",
+    "outline-none",
+    "transition-colors"
+  ].join(" ");
+  const stateClasses = {
+    error: "border border-[var(--deframe-widget-color-state-error)]",
+    disabled: [
+      "border",
+      "border-[var(--deframe-widget-color-border-primary-disabled)]",
+      "opacity-60",
+      "cursor-not-allowed"
+    ].join(" "),
+    default: "border border-[var(--deframe-widget-color-border-primary)]"
+  };
+  const stateKey = hasError ? "error" : disabled ? "disabled" : "default";
+  const fieldClasses = twMerge(baseClasses, stateClasses[stateKey], className);
+  return /* @__PURE__ */ jsx(
+    "input",
+    __spreadValues({
+      "data-slot": "input-field",
+      "data-test-id": "input-field",
+      "aria-invalid": hasError || void 0,
+      disabled,
+      className: fieldClasses
+    }, props)
+  );
+}
 function Link(_a) {
   var _b = _a, {
     children,
     href,
     className = "",
-    target = "_self"
+    target = "_blank",
+    disabled = false,
+    prefetch: _prefetch,
+    replace: _replace,
+    scroll: _scroll
   } = _b, props = __objRest(_b, [
     "children",
     "href",
     "className",
-    "target"
+    "target",
+    "disabled",
+    "prefetch",
+    "replace",
+    "scroll"
   ]);
-  const styles = {
-    link: "text-sm font-medium font-poppins leading-5 cursor-pointer"
+  const baseClasses = [
+    "[font-family:var(--deframe-widget-font-family-primary)]",
+    "[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)]",
+      "underline",
+      "cursor-pointer"
+    ].join(" "),
+    disabled: [
+      "text-[var(--deframe-widget-color-link-disabled)]",
+      "cursor-not-allowed",
+      "pointer-events-none"
+    ].join(" ")
   };
-  const linkClasses = twMerge(styles.link, className);
+  const linkClasses = twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
+    className
+  );
+  if (disabled) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "link",
+        "data-test-id": "link",
+        "aria-disabled": true,
+        className: linkClasses,
+        children
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "a",
     __spreadProps(__spreadValues({
       href,
       target,
+      "data-slot": "link",
+      "data-test-id": "link",
       className: linkClasses,
       rel: target === "_blank" ? "noopener noreferrer" : void 0
     }, props), {
@@ -320,102 +432,155 @@ function Link(_a) {
     })
   );
 }
-function Input(_a) {
+var Link_default = Link;
+function Input2(_a) {
   var _b = _a, {
     label,
     error,
     placeholder,
     type = "text",
     repassword = "Forgot password?",
+    href = "/",
     disabled,
-    className
+    className = ""
   } = _b, props = __objRest(_b, [
     "label",
     "error",
     "placeholder",
     "type",
     "repassword",
+    "href",
     "disabled",
     "className"
   ]);
   const hasError = !!error;
-  const inputClasses = twMerge(
-    "w-full px-4 py-2 rounded",
-    "text-white placeholder-gray-400 text-base font-poppins",
-    hasError ? "border-red-500" : disabled ? "border-gray-600 opacity-60" : "border-gray-500",
-    className
-  );
-  const labelClasses = "block mb-1 text-xs text-white font-poppins";
-  return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { className: labelClasses, children: label }),
+  return /* @__PURE__ */ jsxs(Input, { className, children: [
+    label && /* @__PURE__ */ jsx(InputLabel, { children: label }),
     /* @__PURE__ */ jsx(
-      "input",
+      InputField,
       __spreadValues({
         type,
         placeholder,
         disabled,
-        className: inputClasses
+        hasError,
+        "aria-label": label
       }, props)
     ),
-    type === "password" && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Link, { href: "#", children: repassword }) }),
-    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-red-500", children: error })
+    type === "password" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "input-repassword",
+        "data-test-id": "input-repassword",
+        className: "text-right",
+        children: /* @__PURE__ */ jsx(Link_default, { href, disabled, children: repassword })
+      }
+    )
   ] });
 }
-var ListItem = ({
-  children,
-  className,
-  containerClassName,
-  onClick
-}) => {
+function ListItem(_a) {
+  var _b = _a, {
+    children,
+    className,
+    containerClassName,
+    onClick
+  } = _b, props = __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 = twMerge(
-    "self-stretch min-h-16 relative rounded border border-border-default text-white dark:border-border-default-dark flex flex-col justify-center items-center hover:border-border-strong dark:hover:border-border-strong-dark transition-colors bg-bg-subtle dark:bg-bg-subtle-dark",
-    onClick && "cursor-pointer",
+    baseClasses,
+    stateClasses[onClick ? "clickable" : "static"],
     containerClassName
   );
-  return /* @__PURE__ */ jsx("div", { className: containerClasses, onClick, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: twMerge(
-        "self-stretch inline-flex justify-between items-center gap-md px-4 py-2 text-white",
-        className
-      ),
-      children
-    }
-  ) });
-};
-var ListItemLeftSide = ({ children, className }) => {
+  const innerClasses = 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__ */ 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__ */ jsx("div", { className: innerClasses, children })
+    })
+  );
+}
+function ListItemLeftSide(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  const baseClasses = [
+    "flex justify-center items-center",
+    "text-[var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
   return /* @__PURE__ */ jsx(
     "div",
-    {
-      className: twMerge("flex justify-center items-center text-white", className),
+    __spreadProps(__spreadValues({
+      "data-slot": "list-item-left-side",
+      "data-test-id": "list-item-left-side",
+      className: twMerge(baseClasses, className)
+    }, props), {
       children
-    }
+    })
   );
-};
-var ListItemContent = ({ children, className }) => {
+}
+function ListItemContent(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  const baseClasses = [
+    "flex-1 self-stretch inline-flex flex-col justify-center items-start overflow-hidden",
+    "text-[var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
   return /* @__PURE__ */ jsx(
     "div",
-    {
-      className: twMerge(
-        "flex-1 self-stretch inline-flex flex-col justify-center items-start overflow-hidden text-white",
-        className
-      ),
+    __spreadProps(__spreadValues({
+      "data-slot": "list-item-content",
+      "data-test-id": "list-item-content",
+      className: twMerge(baseClasses, className)
+    }, props), {
       children
-    }
+    })
   );
-};
-var ListItemRightSide = ({ children, className }) => {
+}
+function ListItemRightSide(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  const baseClasses = [
+    "flex flex-col justify-start items-end",
+    "text-[var(--deframe-widget-color-text-primary)]"
+  ].join(" ");
   return /* @__PURE__ */ jsx(
     "div",
-    {
-      className: twMerge(
-        "flex flex-col justify-start items-end text-white",
-        className
-      ),
+    __spreadProps(__spreadValues({
+      "data-slot": "list-item-right-side",
+      "data-test-id": "list-item-right-side",
+      className: twMerge(baseClasses, className)
+    }, props), {
       children
-    }
+    })
   );
-};
+}
 function WalletListContainer({
   children,
   className
@@ -424,12 +589,28 @@ function WalletListContainer({
 }
 var Text = React6.forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", variantClass, className, children } = _b, props = __objRest(_b, ["as", "variantClass", "className", "children"]);
+    var _b = _a, {
+      children,
+      as: Component = "p",
+      className = ""
+    } = _b, props = __objRest(_b, [
+      "children",
+      "as",
+      "className"
+    ]);
+    const baseClasses = [
+      "[font-family:var(--deframe-widget-font-family-primary)]",
+      "[font-size:var(--deframe-widget-font-size-md)]",
+      "[line-height:var(--deframe-widget-font-leading-md)]",
+      "[font-weight:var(--deframe-widget-font-weight-regular)]",
+      "text-[color:var(--deframe-widget-color-text-primary)]"
+    ].join(" ");
+    const textClasses = twMerge(baseClasses, className);
     return React6.createElement(
       Component,
       __spreadValues({
         ref,
-        className: twMerge("font-poppins", variantClass, className)
+        className: textClasses
       }, props),
       children
     );
@@ -437,52 +618,145 @@ var Text = React6.forwardRef(
 );
 Text.displayName = "Text";
 var Text_default = Text;
-var accentVariants = {
-  "accent-large": "text-[15px] leading-[140%] font-semibold",
-  "accent-medium": "text-[14px] leading-[140%] font-semibold",
-  "accent-small": "text-[12px] leading-[140%] font-semibold"
-};
 var TextAccent = React6.forwardRef(
   (_a, ref) => {
-    var _b = _a, { variant = "accent-medium", as = "span" } = _b, props = __objRest(_b, ["variant", "as"]);
+    var _b = _a, {
+      as = "span",
+      variant = "accent-medium",
+      className = ""
+    } = _b, props = __objRest(_b, [
+      "as",
+      "variant",
+      "className"
+    ]);
+    const accentVariants = {
+      "accent-large": [
+        "[font-size:var(--deframe-widget-font-size-lg)]",
+        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[font-weight:var(--deframe-widget-font-weight-semibold)]"
+      ].join(" "),
+      "accent-medium": [
+        "[font-size:var(--deframe-widget-font-size-md)]",
+        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[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)]",
+        "[font-weight:var(--deframe-widget-font-weight-semibold)]"
+      ].join(" ")
+    };
     const variantClass = accentVariants[variant];
-    return /* @__PURE__ */ jsx(Text_default, __spreadValues({ ref, as, variantClass }, props));
+    const accentClasses = twMerge(variantClass, className);
+    return /* @__PURE__ */ jsx(
+      Text_default,
+      __spreadValues({
+        ref,
+        as,
+        className: accentClasses,
+        "data-slot": "text-accent",
+        "data-test-id": "text-accent"
+      }, props)
+    );
   }
 );
 TextAccent.displayName = "TextAccent";
-var TextAccent_default = TextAccent;
-var bodyVariants = {
-  "text-large": "text-[15px] leading-[140%] font-normal",
-  "text-medium": "text-[14px] leading-[140%] font-normal",
-  "text-small": "text-[12px] leading-[140%] font-normal"
-};
 var TextBody = React6.forwardRef(
   (_a, ref) => {
-    var _b = _a, { variant = "text-medium", as = "p" } = _b, props = __objRest(_b, ["variant", "as"]);
+    var _b = _a, {
+      as = "p",
+      variant = "text-medium",
+      className = ""
+    } = _b, props = __objRest(_b, [
+      "as",
+      "variant",
+      "className"
+    ]);
+    const bodyVariants = {
+      "text-large": [
+        "[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-medium": [
+        "[font-size:var(--deframe-widget-font-size-md)]",
+        "[line-height:var(--deframe-widget-font-leading-lg)]",
+        "[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)]",
+        "[font-weight:var(--deframe-widget-font-weight-regular)]"
+      ].join(" ")
+    };
     const variantClass = bodyVariants[variant];
-    return /* @__PURE__ */ jsx(Text_default, __spreadValues({ ref, as, variantClass }, props));
+    const bodyClasses = twMerge(variantClass, className);
+    return /* @__PURE__ */ jsx(
+      Text_default,
+      __spreadValues({
+        ref,
+        as,
+        className: bodyClasses,
+        "data-slot": "text-body",
+        "data-test-id": "text-body"
+      }, props)
+    );
   }
 );
 TextBody.displayName = "TextBody";
-var TextBody_default = TextBody;
-var headingVariants = {
-  "h-large": "text-[56px] leading-[100%] tracking-[0] font-extrabold",
-  h1: "text-[40px] leading-[110%] font-extrabold",
-  h2: "text-[28px] leading-[130%] font-extrabold",
-  h3: "text-[22px] leading-[120%] font-extrabold",
-  h4: "text-[18px] leading-[120%] font-extrabold",
-  h5: "text-[16px] leading-[120%] font-bold"
-};
 var TextHeading = React6.forwardRef(
   (_a, ref) => {
-    var _b = _a, { variant = "h2", as } = _b, props = __objRest(_b, ["variant", "as"]);
+    var _b = _a, {
+      as,
+      variant = "h2",
+      className = ""
+    } = _b, props = __objRest(_b, [
+      "as",
+      "variant",
+      "className"
+    ]);
+    const headingVariants = {
+      "h-large": [
+        "[font-size:var(--deframe-widget-font-size-h-large)]",
+        "[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)]",
+        "[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)]",
+        "[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)]",
+        "[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)]",
+        "[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)]",
+        "[line-height:var(--deframe-widget-font-leading-md)]",
+        "[font-weight:var(--deframe-widget-font-weight-bold)]"
+      ].join(" ")
+    };
     const variantClass = headingVariants[variant];
+    const headingClasses = twMerge(variantClass, className);
     return /* @__PURE__ */ jsx(
       Text_default,
       __spreadValues({
         ref,
         as: variant === "h-large" ? "h1" : variant,
-        variantClass
+        className: headingClasses,
+        "data-slot": "text-heading",
+        "data-test-id": "text-heading"
       }, props)
     );
   }
@@ -491,11 +765,13 @@ TextHeading.displayName = "TextHeading";
 var TextHeading_default = TextHeading;
 function Title(_a) {
   var _b = _a, {
-    variant = "h1"
+    variant = "h1",
+    className = ""
   } = _b, props = __objRest(_b, [
-    "variant"
+    "variant",
+    "className"
   ]);
-  return /* @__PURE__ */ jsx(TextHeading_default, __spreadValues({ variant }, props));
+  return /* @__PURE__ */ jsx(TextHeading_default, __spreadValues({ variant, className }, props));
 }
 function ConnectWalletList({
   wallets,
@@ -514,7 +790,7 @@ function ConnectWalletList({
         className: "w-10 h-10 rounded-full"
       }
     ) : wallet.icon }),
-    /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(Text_default, { children: wallet.name }) }),
+    /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { variant: "text-medium", children: wallet.name }) }),
     /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(
       "svg",
       {
@@ -542,32 +818,59 @@ function WalletItem({
   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__ */ jsxs(
     "button",
     {
+      "data-slot": "wallet-item",
+      "data-test-id": "wallet-item",
+      "aria-label": `Connect ${name} wallet`,
       onClick,
-      className: twMerge(
-        "w-full flex items-center gap-4 p-5",
-        "bg-[#1E1E1E] rounded-2xl",
-        "transition-all duration-200",
-        "hover:bg-[#2C2C2C] active:scale-[0.98]",
-        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",
-        className
-      ),
+      className: twMerge(baseClasses, className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-white flex items-center justify-center", children: typeof icon === "string" ? /* @__PURE__ */ jsx(
-          "img",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            src: icon,
-            alt: name,
-            className: "w-full h-full object-cover"
+            "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__ */ jsx(
+              "img",
+              {
+                src: icon,
+                alt: name,
+                className: "w-full h-full object-cover"
+              }
+            ) : icon
           }
-        ) : icon }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left text-[15px] md:text-[17px] font-medium text-white", children: name }),
+        ),
+        /* @__PURE__ */ 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__ */ jsx(
           "svg",
           {
-            className: "flex-shrink-0 w-5 h-5 text-gray-400",
+            "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",
@@ -1170,21 +1473,78 @@ var Skeleton = (_a) => {
   );
 };
 Skeleton.displayName = "Skeleton";
-var variantConfig = {
-  info: { color: "#1890FF", icon: MdInfoOutline },
-  warning: { color: "#F6A700", icon: MdWarningAmber },
-  error: { color: "#FF4D4F", icon: MdErrorOutline },
-  success: { color: "#2BA176", icon: MdCheckCircleOutline }
-};
-var positionStyles = {
-  "top-right": "top-4 right-4",
-  "top-left": "top-4 left-4",
-  "top-center": "top-4 left-1/2 -translate-x-1/2",
-  "bottom-right": "bottom-4 right-4",
-  "bottom-left": "bottom-4 left-4",
-  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
-};
-var BannerNotification = (_a) => {
+function BannerNotificationIcon(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const baseClasses = [
+    "flex items-center justify-center",
+    "flex-shrink-0",
+    "[font-size:var(--deframe-widget-font-size-xxl)]"
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "banner-notification-icon",
+      "data-test-id": "banner-notification-icon",
+      className: twMerge(baseClasses, className)
+    }, props)
+  );
+}
+function BannerNotificationContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const baseClasses = "flex-1 min-w-0 p-2";
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "banner-notification-content",
+      "data-test-id": "banner-notification-content",
+      className: twMerge(baseClasses, className)
+    }, props)
+  );
+}
+function BannerNotificationTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TextHeading,
+    __spreadValues({
+      variant: "h4",
+      as: "p",
+      "data-slot": "banner-notification-title",
+      "data-test-id": "banner-notification-title",
+      className: twMerge("[margin-bottom:var(--deframe-widget-size-gap-xs)] text-inherit", className)
+    }, props)
+  );
+}
+function BannerNotificationMessage(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TextBody,
+    __spreadValues({
+      variant: "text-medium",
+      "data-slot": "banner-notification-message",
+      "data-test-id": "banner-notification-message",
+      className: twMerge("text-inherit", className)
+    }, props)
+  );
+}
+function BannerNotificationClose(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const baseClasses = [
+    "flex-shrink-0",
+    "self-start",
+    "[font-size:var(--deframe-widget-font-size-xl)]",
+    "transition-opacity hover:opacity-70 cursor-pointer"
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadValues({
+      "data-slot": "banner-notification-close",
+      "data-test-id": "banner-notification-close",
+      "aria-label": "Close notification",
+      className: twMerge(baseClasses, className)
+    }, props)
+  );
+}
+function BannerNotification(_a) {
   var _b = _a, {
     type = "inline",
     variant = "info",
@@ -1194,6 +1554,8 @@ var BannerNotification = (_a) => {
     autoHideDuration = 5e3,
     show = true,
     onClose,
+    showIcon = true,
+    icon,
     className
   } = _b, props = __objRest(_b, [
     "type",
@@ -1204,15 +1566,49 @@ var BannerNotification = (_a) => {
     "autoHideDuration",
     "show",
     "onClose",
+    "showIcon",
+    "icon",
     "className"
   ]);
+  const [isVisible, setIsVisible] = React6.useState(show);
   const [isExiting, setIsExiting] = React6.useState(false);
   const timerRef = React6.useRef(null);
-  const config = variantConfig[variant];
-  const IconComponent = config.icon;
+  const variantInlineClasses = {
+    info: "bg-[var(--deframe-widget-color-state-info)]/20 border-[var(--deframe-widget-color-state-info)]",
+    warning: "bg-[var(--deframe-widget-color-state-warning)]/20 border-[var(--deframe-widget-color-state-warning)]",
+    error: "bg-[var(--deframe-widget-color-state-error)]/20 border-[var(--deframe-widget-color-state-error)]",
+    success: "bg-[var(--deframe-widget-color-state-success)]/20 border-[var(--deframe-widget-color-state-success)]"
+  };
+  const variantToastClasses = {
+    info: "bg-[var(--deframe-widget-color-state-info)] border-[var(--deframe-widget-color-state-info)]",
+    warning: "bg-[var(--deframe-widget-color-state-warning)] border-[var(--deframe-widget-color-state-warning)]",
+    error: "bg-[var(--deframe-widget-color-state-error)] border-[var(--deframe-widget-color-state-error)]",
+    success: "bg-[var(--deframe-widget-color-state-success)] border-[var(--deframe-widget-color-state-success)]"
+  };
+  const variantTextClasses = {
+    info: "text-[var(--deframe-widget-color-state-info)]",
+    warning: "text-[var(--deframe-widget-color-state-warning)]",
+    error: "text-[var(--deframe-widget-color-state-error)]",
+    success: "text-[var(--deframe-widget-color-state-success)]"
+  };
+  const variantIcons = {
+    info: MdInfoOutline,
+    warning: MdWarningAmber,
+    error: MdErrorOutline,
+    success: MdCheckCircleOutline
+  };
+  const positionClasses = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+  };
   const handleClose = () => {
     setIsExiting(true);
     setTimeout(() => {
+      setIsVisible(false);
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
@@ -1220,56 +1616,74 @@ var BannerNotification = (_a) => {
       onClose == null ? void 0 : onClose();
     }, 300);
   };
-  if (type === "toast" && show && autoHideDuration > 0 && !timerRef.current && !isExiting) {
-    timerRef.current = setTimeout(() => {
+  React6.useEffect(() => {
+    if (!show) {
       handleClose();
-    }, autoHideDuration);
-  }
+      return;
+    }
+    setIsVisible(true);
+    setIsExiting(false);
+  }, [show]);
   React6.useEffect(() => {
+    if (type === "toast" && show && autoHideDuration > 0 && !isExiting) {
+      timerRef.current = setTimeout(handleClose, autoHideDuration);
+    }
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
       }
     };
-  }, []);
-  if (!show) return null;
-  const backgroundColor = type === "inline" ? `${config.color}33` : config.color;
+  }, [type, show, autoHideDuration, isExiting]);
+  if (!isVisible) return null;
+  const v = variant;
+  const t = type;
+  const p = position;
+  const baseClasses = [
+    "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)]",
+    "border",
+    "transition-all duration-300"
+  ].join(" ");
+  const typeClasses = {
+    inline: variantInlineClasses[v],
+    toast: [
+      variantToastClasses[v],
+      "fixed z-50 w-[clamp(18rem,40vw,30rem)] shadow-lg",
+      positionClasses[p]
+    ].join(" ")
+  };
+  const bannerClasses = twMerge(
+    baseClasses,
+    typeClasses[t],
+    variantTextClasses[v],
+    isExiting && "opacity-0 -translate-y-2",
+    className
+  );
+  const IconComponent = variantIcons[v];
+  const resolvedIcon = icon != null ? icon : /* @__PURE__ */ jsx(IconComponent, {});
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
-      className: twMerge(
-        "flex items-start gap-3 p-3 rounded border transition-all duration-300",
-        isExiting && "opacity-0 -translate-y-2",
-        className,
-        type === "toast" && "fixed z-50 w-[clamp(18rem,40vw,30rem)] shadow-lg",
-        type === "toast" && positionStyles[position]
-      ),
-      style: {
-        backgroundColor,
-        borderColor: config.color
-      },
-      role: "alert"
+      "data-slot": "banner-notification",
+      "data-test-id": "banner-notification",
+      role: "alert",
+      className: bannerClasses
     }, props), {
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 text-2xl", children: /* @__PURE__ */ jsx(IconComponent, {}) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm mb-1", children: title }),
-          /* @__PURE__ */ jsx("div", { className: "text-sm", children: message })
+        showIcon && /* @__PURE__ */ jsx(BannerNotificationIcon, { children: resolvedIcon }),
+        /* @__PURE__ */ jsxs(BannerNotificationContent, { children: [
+          title && /* @__PURE__ */ jsx(BannerNotificationTitle, { children: title }),
+          /* @__PURE__ */ jsx(BannerNotificationMessage, { children: message })
         ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleClose,
-            className: "flex-shrink-0 text-xl transition-opacity hover:opacity-70 cursor-pointer",
-            "aria-label": "Close notification",
-            children: /* @__PURE__ */ jsx(MdClose, {})
-          }
-        )
+        /* @__PURE__ */ jsx(BannerNotificationClose, { onClick: handleClose, children: /* @__PURE__ */ jsx(MdClose, {}) })
       ]
     })
   );
-};
+}
 BannerNotification.displayName = "BannerNotification";
 var AddressDisplay = ({
   address,
@@ -1298,7 +1712,7 @@ var AddressDisplay = ({
       ),
       children: [
         /* @__PURE__ */ jsx(
-          TextBody_default,
+          TextBody,
           {
             className: twMerge(
               "block w-full whitespace-nowrap overflow-hidden",
@@ -1371,7 +1785,7 @@ var SummaryDetails = ({
       open: defaultOpen,
       children: [
         /* @__PURE__ */ jsx("summary", { className: twMerge("cursor-pointer block ", summaryClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx(TextBody_default, { className: "text-white font-medium", children: title }),
+          /* @__PURE__ */ jsx(TextBody, { className: "text-white font-medium", children: title }),
           /* @__PURE__ */ jsx(
             "svg",
             {
@@ -1402,7 +1816,7 @@ var SummaryDetails = ({
             ),
             children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between py-2", children: [
               /* @__PURE__ */ jsx(
-                TextBody_default,
+                TextBody,
                 {
                   variant: "text-small",
                   className: twMerge("text-text-tertiary dark:text-text-tertiary-dark", item.labelClassName),
@@ -1410,7 +1824,7 @@ var SummaryDetails = ({
                 }
               ),
               typeof item.value === "string" ? /* @__PURE__ */ jsx(
-                TextBody_default,
+                TextBody,
                 {
                   variant: "text-small",
                   className: twMerge("text-text-primary dark:text-text-primary-dark font-medium", item.valueClassName),
@@ -1930,7 +2344,7 @@ var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
         children: /* @__PURE__ */ jsx(HiChevronLeft, { className: "w-6 h-6 text-text-tertiary dark:text-text-tertiary-dark" })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsx(TextHeading_default, { variant: "h-large", children: title }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsx(TextHeading, { variant: "h-large", children: title }) })
   ] });
 };
 var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
@@ -2237,7 +2651,7 @@ var SwapNetworkSelectorView = ({
 }) => {
   const baseClasses = "flex flex-row items-center gap-xs";
   return /* @__PURE__ */ jsxs("div", { "data-test-id": testId, className: twMerge(baseClasses, className), children: [
-    /* @__PURE__ */ jsx(TextBody_default, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2262,7 +2676,7 @@ var SwapQuoteHeaderView = ({
 }) => {
   const baseClasses = "border-b border-border-default dark:border-border-default-dark pb-sm";
   return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-header", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx(TextBody_default, { as: "span", variant: "text-small", className: "font-semibold text-text-secondary dark:text-text-secondary-dark inline-flex items-center", children: label }),
+    /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "font-semibold text-text-secondary dark:text-text-secondary-dark inline-flex items-center", children: label }),
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-md", children: timerElement })
   ] }) });
 };
@@ -2331,7 +2745,7 @@ var SwapOutputAmountView = ({
   className
 }) => {
   const baseClasses = "text-h2-mobile font-extrabold text-right w-full min-w-[120px] text-text-primary dark:text-text-primary-dark";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody_default, { as: "span", variant: "text-small", className: "text-text-disabled dark:text-text-disabled-dark inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ 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 });
 };
 var SwapQuoteErrorsView = ({
   hasQuoteError,
@@ -2408,8 +2822,8 @@ var SwapTokenSelectorView = ({
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center gap-sm flex-1", children: token ? /* @__PURE__ */ jsxs(Fragment, { children: [
           token.logoURI ? /* @__PURE__ */ jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-bg-raised dark:bg-bg-raised-dark text-text-secondary dark:text-text-secondary-dark flex items-center justify-center text-[10px] font-semibold", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
-          /* @__PURE__ */ jsx(TextBody_default, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
-        ] }) : /* @__PURE__ */ jsx(TextBody_default, { as: "span", className: "text-text-secondary dark:text-text-secondary-dark", children: selectTokenLabel }) }),
+          /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
+        ] }) : /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-text-secondary dark:text-text-secondary-dark", children: selectTokenLabel }) }),
         /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-text-tertiary dark:text-text-tertiary-dark" }) })
       ]
     }
@@ -2482,14 +2896,14 @@ var ChooseAStrategyActionsheetView = ({
         /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
-            /* @__PURE__ */ jsx(TextHeading_default, { children: resolvedYieldLabel }),
+            /* @__PURE__ */ jsx(TextHeading, { children: resolvedYieldLabel }),
             /* @__PURE__ */ jsx("br", {})
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: /* @__PURE__ */ jsxs(ListItem, { className: "flex-shrink-0", onClick: onStrategyClick, children: [
             /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-full" }) }),
             /* @__PURE__ */ jsxs(ListItemContent, { className: "gap-1", children: [
-              /* @__PURE__ */ jsx(TextBody_default, { children: resolvedYieldLabel }),
-              /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: Badge })
+              /* @__PURE__ */ jsx(TextBody, { children: resolvedYieldLabel }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: Badge })
             ] }),
             /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-1", children: [
               /* @__PURE__ */ jsxs("span", { className: "text-state-success", children: [
@@ -2522,9 +2936,9 @@ var StrategyDetailsView = ({
     /* @__PURE__ */ jsx("div", { "data-test-id": "strategy-details-content", className: "flex-1 min-h-0 overflow-y-auto p-md py-lg pb-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-lg min-h-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-col items-start gap-sm", children: [
         /* @__PURE__ */ jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-full" }),
-        /* @__PURE__ */ jsx(TextHeading_default, { variant: "h5", children: title })
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: title })
       ] }),
-      /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: description }),
+      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }),
       /* @__PURE__ */ jsx(
         SummaryDetails,
         {
@@ -2615,9 +3029,9 @@ var SearchEmptyState = ({
   return /* @__PURE__ */ 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__ */ jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md py-20", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center gap-md text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-bg-muted dark:bg-bg-muted-dark rounded-full flex justify-center items-center", children: /* @__PURE__ */ jsx(MdOutlineSearchOff, { className: "w-10 h-10 text-text-tertiary dark:text-text-tertiary-dark" }) }),
-      /* @__PURE__ */ jsx(TextHeading_default, { variant: "h3", children: title })
+      /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: description }) })
+    /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
   ] }) });
 };
 var CollapsibleSection = ({
@@ -2650,9 +3064,9 @@ var CollapsibleSection = ({
         "aria-expanded": isOpen,
         "aria-label": `${isOpen ? collapseText : expandText} ${title}`,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ jsx(TextBody_default, { className: "text-white font-medium", children: title }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ jsx(TextBody, { className: "text-white font-medium", children: title }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-xs", children: [
-            subtitle && /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle }),
             /* @__PURE__ */ jsx(
               motion.svg,
               {
@@ -2714,7 +3128,7 @@ var TransactionScreen = ({
     /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-md py-lg flex flex-col gap-lg", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-md pt-lg", children: [
         /* @__PURE__ */ jsx(TransactionScreenIcon, { type: iconType, gradient: iconGradient }),
-        /* @__PURE__ */ jsx(TextHeading_default, { variant: "h-large", children: title }),
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h-large", children: title }),
         /* @__PURE__ */ jsx("div", { className: "text-text-md-mobile font-poppins text-text-secondary dark:text-text-secondary-dark text-center", style: { maxWidth: "350px" }, children: description })
       ] }),
       children,
@@ -2744,7 +3158,7 @@ var TransactionScreenInvestmentCard = ({
       /* @__PURE__ */ jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
         apyLabel,
         " ",
-        /* @__PURE__ */ jsx(TextBody_default, { as: "span", className: "text-state-success", children: apyValue })
+        /* @__PURE__ */ jsx(TextBody, { as: "span", className: "text-state-success", children: apyValue })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-sm", children: [
@@ -3318,7 +3732,7 @@ var ChooseAnAssetSwapView = ({
         /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
-            /* @__PURE__ */ jsx(TextHeading_default, { children: labels.title }),
+            /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
             /* @__PURE__ */ jsx("br", {}),
             /* @__PURE__ */ jsx(
               SearchInput,
@@ -3334,7 +3748,7 @@ var ChooseAnAssetSwapView = ({
           ] }),
           searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full mt-4 overflow-y-auto flex-1 min-h-0", children: [
             isFetching && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
+              /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
               /* @__PURE__ */ jsx(LoadingDots, {})
             ] }) }),
             displayedTokens.map((token, index) => {
@@ -3353,12 +3767,12 @@ var ChooseAnAssetSwapView = ({
                   children: [
                     /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-full" }) }),
                     /* @__PURE__ */ jsxs(ListItemContent, { children: [
-                      /* @__PURE__ */ jsx(TextBody_default, { children: token.name }),
-                      /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: token.symbol })
+                      /* @__PURE__ */ jsx(TextBody, { children: token.name }),
+                      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: token.symbol })
                     ] }),
                     /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
-                      /* @__PURE__ */ jsx(TextBody_default, { children: formattedBalance }),
-                      /* @__PURE__ */ jsx(TextBody_default, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
+                      /* @__PURE__ */ jsx(TextBody, { children: formattedBalance }),
+                      /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
                     ] })
                   ]
                 },
@@ -3373,6 +3787,6 @@ var ChooseAnAssetSwapView = ({
   ) });
 };
 
-export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton, CollapsibleInfoRow, CollapsibleSection, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAmountInputView, SwapCrossChainProcessingView, SwapNetworkSelectorView, SwapOutputAmountView, SwapProcessingView, SwapQuoteBlockchainCostsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapTokenSelectorView, SwapTransactionFailedView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent_default as TextAccent, TextBody_default as TextBody, TextHeading_default as TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
+export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton, CollapsibleInfoRow, CollapsibleSection, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAmountInputView, SwapCrossChainProcessingView, SwapNetworkSelectorView, SwapOutputAmountView, SwapProcessingView, SwapQuoteBlockchainCostsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapTokenSelectorView, SwapTransactionFailedView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map