@deframe-sdk/components 0.1.7 → 0.1.9

package/dist/index.js

@@ -146,7 +146,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)]",
@@ -210,7 +210,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)]",
@@ -271,7 +271,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)]",
@@ -313,27 +313,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__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "input",
+      "data-test-id": "input",
+      className: tailwindMerge.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__ */ jsxRuntime.jsx(
+    "label",
+    __spreadValues({
+      "data-slot": "input-label",
+      "data-test-id": "input-label",
+      className: tailwindMerge.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 = tailwindMerge.twMerge(baseClasses, stateClasses[stateKey], className);
+  return /* @__PURE__ */ jsxRuntime.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 = tailwindMerge.twMerge(styles.link, className);
+  const linkClasses = tailwindMerge.twMerge(
+    baseClasses,
+    stateClasses[disabled ? "disabled" : "enabled"],
+    className
+  );
+  if (disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-slot": "link",
+        "data-test-id": "link",
+        "aria-disabled": true,
+        className: linkClasses,
+        children
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "a",
     __spreadProps(__spreadValues({
       href,
       target,
+      "data-slot": "link",
+      "data-test-id": "link",
       className: linkClasses,
       rel: target === "_blank" ? "noopener noreferrer" : void 0
     }, props), {
@@ -341,102 +453,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 = tailwindMerge.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__ */ jsxRuntime.jsxs("div", { children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: labelClasses, children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(Input, { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
+      InputField,
       __spreadValues({
         type,
         placeholder,
         disabled,
-        className: inputClasses
+        hasError,
+        "aria-label": label
       }, props)
     ),
-    type === "password" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: "#", children: repassword }) }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-red-500", children: error })
+    type === "password" && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "input-repassword",
+        "data-test-id": "input-repassword",
+        className: "text-right",
+        children: /* @__PURE__ */ jsxRuntime.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 = tailwindMerge.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__ */ jsxRuntime.jsx("div", { className: containerClasses, onClick, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: tailwindMerge.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 = 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 })
+    })
+  );
+}
+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__ */ jsxRuntime.jsx(
     "div",
-    {
-      className: tailwindMerge.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: tailwindMerge.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__ */ jsxRuntime.jsx(
     "div",
-    {
-      className: tailwindMerge.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: tailwindMerge.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__ */ jsxRuntime.jsx(
     "div",
-    {
-      className: tailwindMerge.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: tailwindMerge.twMerge(baseClasses, className)
+    }, props), {
       children
-    }
+    })
   );
-};
+}
 function WalletListContainer({
   children,
   className
@@ -445,12 +610,28 @@ function WalletListContainer({
 }
 var Text = React6__namespace.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 = tailwindMerge.twMerge(baseClasses, className);
     return React6__namespace.createElement(
       Component,
       __spreadValues({
         ref,
-        className: tailwindMerge.twMerge("font-poppins", variantClass, className)
+        className: textClasses
       }, props),
       children
     );
@@ -458,52 +639,145 @@ var Text = React6__namespace.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__namespace.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__ */ jsxRuntime.jsx(Text_default, __spreadValues({ ref, as, variantClass }, props));
+    const accentClasses = tailwindMerge.twMerge(variantClass, className);
+    return /* @__PURE__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.jsx(Text_default, __spreadValues({ ref, as, variantClass }, props));
+    const bodyClasses = tailwindMerge.twMerge(variantClass, className);
+    return /* @__PURE__ */ jsxRuntime.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__namespace.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 = tailwindMerge.twMerge(variantClass, className);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Text_default,
       __spreadValues({
         ref,
         as: variant === "h-large" ? "h1" : variant,
-        variantClass
+        className: headingClasses,
+        "data-slot": "text-heading",
+        "data-test-id": "text-heading"
       }, props)
     );
   }
@@ -512,11 +786,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__ */ jsxRuntime.jsx(TextHeading_default, __spreadValues({ variant }, props));
+  return /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, __spreadValues({ variant, className }, props));
 }
 function ConnectWalletList({
   wallets,
@@ -535,7 +811,7 @@ function ConnectWalletList({
         className: "w-10 h-10 rounded-full"
       }
     ) : wallet.icon }),
-    /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Text_default, { children: wallet.name }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ListItemContent, { children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-medium", children: wallet.name }) }),
     /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -563,32 +839,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__ */ 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-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: tailwindMerge.twMerge(baseClasses, className),
       children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "img",
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: icon,
+                alt: name,
+                className: "w-full h-full object-cover"
+              }
+            ) : icon
           }
-        ) : icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left text-[15px] md:text-[17px] font-medium text-white", children: name }),
+        ),
+        /* @__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",
           {
-            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",
@@ -1191,21 +1494,78 @@ var Skeleton = (_a) => {
   );
 };
 Skeleton.displayName = "Skeleton";
-var variantConfig = {
-  info: { color: "#1890FF", icon: md.MdInfoOutline },
-  warning: { color: "#F6A700", icon: md.MdWarningAmber },
-  error: { color: "#FF4D4F", icon: md.MdErrorOutline },
-  success: { color: "#2BA176", icon: md.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__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "banner-notification-icon",
+      "data-test-id": "banner-notification-icon",
+      className: tailwindMerge.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__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "banner-notification-content",
+      "data-test-id": "banner-notification-content",
+      className: tailwindMerge.twMerge(baseClasses, className)
+    }, props)
+  );
+}
+function BannerNotificationTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextHeading,
+    __spreadValues({
+      variant: "h4",
+      as: "p",
+      "data-slot": "banner-notification-title",
+      "data-test-id": "banner-notification-title",
+      className: tailwindMerge.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__ */ jsxRuntime.jsx(
+    TextBody,
+    __spreadValues({
+      variant: "text-medium",
+      "data-slot": "banner-notification-message",
+      "data-test-id": "banner-notification-message",
+      className: tailwindMerge.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__ */ jsxRuntime.jsx(
+    "button",
+    __spreadValues({
+      "data-slot": "banner-notification-close",
+      "data-test-id": "banner-notification-close",
+      "aria-label": "Close notification",
+      className: tailwindMerge.twMerge(baseClasses, className)
+    }, props)
+  );
+}
+function BannerNotification(_a) {
   var _b = _a, {
     type = "inline",
     variant = "info",
@@ -1215,6 +1575,8 @@ var BannerNotification = (_a) => {
     autoHideDuration = 5e3,
     show = true,
     onClose,
+    showIcon = true,
+    icon,
     className
   } = _b, props = __objRest(_b, [
     "type",
@@ -1225,15 +1587,49 @@ var BannerNotification = (_a) => {
     "autoHideDuration",
     "show",
     "onClose",
+    "showIcon",
+    "icon",
     "className"
   ]);
+  const [isVisible, setIsVisible] = React6__namespace.useState(show);
   const [isExiting, setIsExiting] = React6__namespace.useState(false);
   const timerRef = React6__namespace.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: md.MdInfoOutline,
+    warning: md.MdWarningAmber,
+    error: md.MdErrorOutline,
+    success: md.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;
@@ -1241,56 +1637,74 @@ var BannerNotification = (_a) => {
       onClose == null ? void 0 : onClose();
     }, 300);
   };
-  if (type === "toast" && show && autoHideDuration > 0 && !timerRef.current && !isExiting) {
-    timerRef.current = setTimeout(() => {
+  React6__namespace.useEffect(() => {
+    if (!show) {
       handleClose();
-    }, autoHideDuration);
-  }
+      return;
+    }
+    setIsVisible(true);
+    setIsExiting(false);
+  }, [show]);
   React6__namespace.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 = tailwindMerge.twMerge(
+    baseClasses,
+    typeClasses[t],
+    variantTextClasses[v],
+    isExiting && "opacity-0 -translate-y-2",
+    className
+  );
+  const IconComponent = variantIcons[v];
+  const resolvedIcon = icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     __spreadProps(__spreadValues({
-      className: tailwindMerge.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__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-sm mb-1", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: message })
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx(BannerNotificationIcon, { children: resolvedIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(BannerNotificationContent, { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(BannerNotificationTitle, { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(BannerNotificationMessage, { children: message })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleClose,
-            className: "flex-shrink-0 text-xl transition-opacity hover:opacity-70 cursor-pointer",
-            "aria-label": "Close notification",
-            children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, {})
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(BannerNotificationClose, { onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, {}) })
       ]
     })
   );
-};
+}
 BannerNotification.displayName = "BannerNotification";
 var AddressDisplay = ({
   address,
@@ -1319,7 +1733,7 @@ var AddressDisplay = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          TextBody_default,
+          TextBody,
           {
             className: tailwindMerge.twMerge(
               "block w-full whitespace-nowrap overflow-hidden",
@@ -1392,7 +1806,7 @@ var SummaryDetails = ({
       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_default, { className: "text-white font-medium", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-white font-medium", children: title }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -1423,7 +1837,7 @@ var SummaryDetails = ({
             ),
             children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between py-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                TextBody_default,
+                TextBody,
                 {
                   variant: "text-small",
                   className: tailwindMerge.twMerge("text-text-tertiary dark:text-text-tertiary-dark", item.labelClassName),
@@ -1431,7 +1845,7 @@ var SummaryDetails = ({
                 }
               ),
               typeof item.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                TextBody_default,
+                TextBody,
                 {
                   variant: "text-small",
                   className: tailwindMerge.twMerge("text-text-primary dark:text-text-primary-dark font-medium", item.valueClassName),
@@ -1951,7 +2365,7 @@ var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronLeft, { className: "w-6 h-6 text-text-tertiary dark:text-text-tertiary-dark" })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h-large", children: title }) })
+    /* @__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 }) => {
@@ -2258,7 +2672,7 @@ var SwapNetworkSelectorView = ({
 }) => {
   const baseClasses = "flex flex-row items-center gap-xs";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-text-tertiary dark:text-text-tertiary-dark", children: directionLabel }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2283,7 +2697,7 @@ var SwapQuoteHeaderView = ({
 }) => {
   const baseClasses = "border-b border-border-default dark:border-border-default-dark pb-sm";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "font-semibold text-text-secondary dark:text-text-secondary-dark inline-flex items-center", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(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 })
   ] }) });
 };
@@ -2352,7 +2766,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__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", variant: "text-small", className: "text-text-disabled dark:text-text-disabled-dark inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+  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 });
 };
 var SwapQuoteErrorsView = ({
   hasQuoteError,
@@ -2429,8 +2843,8 @@ var SwapTokenSelectorView = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-sm flex-1", children: token ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           token.logoURI ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI, alt: token.symbol, className: "w-6 h-6 rounded-full" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-bg-raised dark:bg-bg-raised-dark text-text-secondary dark:text-text-secondary-dark flex items-center justify-center text-[10px] font-semibold", children: (token.symbol || "").slice(0, 3).toUpperCase() }),
-          /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-text-primary dark:text-text-primary-dark", children: token.symbol })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-text-secondary dark:text-text-secondary-dark", children: selectTokenLabel }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(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" }) })
       ]
     }
@@ -2503,14 +2917,14 @@ var ChooseAStrategyActionsheetView = ({
         /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, ariaLabel: closeAriaLabel }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 w-full p-6 overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { children: resolvedYieldLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(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(TextBody_default, { children: resolvedYieldLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: Badge })
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: resolvedYieldLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: Badge })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-state-success", children: [
@@ -2543,9 +2957,9 @@ var StrategyDetailsView = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "strategy-details-content", className: "flex-1 min-h-0 overflow-y-auto p-md py-lg pb-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-lg min-h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-start gap-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-full" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h5", children: title })
+        /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: title })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }),
       /* @__PURE__ */ jsxRuntime.jsx(
         SummaryDetails,
         {
@@ -2636,9 +3050,9 @@ var SearchEmptyState = ({
   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" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h3", children: title })
+      /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: description }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
   ] }) });
 };
 var CollapsibleSection = ({
@@ -2671,9 +3085,9 @@ 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_default, { className: "text-white font-medium", children: title }) }),
+          /* @__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_default, { variant: "text-small", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle }),
             /* @__PURE__ */ jsxRuntime.jsx(
               framerMotion.motion.svg,
               {
@@ -2735,7 +3149,7 @@ var TransactionScreen = ({
     /* @__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: [
         /* @__PURE__ */ jsxRuntime.jsx(TransactionScreenIcon, { type: iconType, gradient: iconGradient }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { variant: "h-large", children: title }),
+        /* @__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 })
       ] }),
       children,
@@ -2765,7 +3179,7 @@ var TransactionScreenInvestmentCard = ({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-sm-mobile font-poppins text-text-secondary dark:text-text-secondary-dark", children: [
         apyLabel,
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { as: "span", className: "text-state-success", children: apyValue })
+        /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", className: "text-state-success", children: apyValue })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-sm", children: [
@@ -3339,7 +3753,7 @@ var ChooseAnAssetSwapView = ({
         /* @__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-shrink-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TextHeading_default, { children: labels.title }),
+            /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { children: labels.title }),
             /* @__PURE__ */ jsxRuntime.jsx("br", {}),
             /* @__PURE__ */ jsxRuntime.jsx(
               SearchInput,
@@ -3355,7 +3769,7 @@ var ChooseAnAssetSwapView = ({
           ] }),
           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_default, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
+              /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: labels.searchingText }),
               /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
             ] }) }),
             displayedTokens.map((token, index) => {
@@ -3374,12 +3788,12 @@ var ChooseAnAssetSwapView = ({
                   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.jsxs(ListItemContent, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: token.name }),
-                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: token.symbol })
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: token.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: token.symbol })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { children: formattedBalance }),
-                      /* @__PURE__ */ jsxRuntime.jsx(TextBody_default, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: formattedBalance }),
+                      /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
                     ] })
                   ]
                 },
@@ -3420,7 +3834,7 @@ exports.InfoRowIconLabel = InfoRowIconLabel;
 exports.InfoRowIconValue = InfoRowIconValue;
 exports.InfoRowWithIcon = InfoRowWithIcon;
 exports.InfoValue = InfoValue;
-exports.Input = Input;
+exports.Input = Input2;
 exports.Link = Link;
 exports.ListItem = ListItem;
 exports.ListItemContent = ListItemContent;
@@ -3468,9 +3882,9 @@ exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.TertiaryButton = TertiaryButton;
 exports.Text = Text_default;
-exports.TextAccent = TextAccent_default;
-exports.TextBody = TextBody_default;
-exports.TextHeading = TextHeading_default;
+exports.TextAccent = TextAccent;
+exports.TextBody = TextBody;
+exports.TextHeading = TextHeading;
 exports.Title = Title;
 exports.TokenWithChainBadge = TokenWithChainBadge;
 exports.TransactionProcessingDetails = TransactionProcessingDetails;