@deframe-sdk/components 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1618 @@
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React6 from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdClose } from 'react-icons/md';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function ActionButton(_a) {
+  var _b = _a, {
+    children,
+    disabled = false,
+    className = "",
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "disabled",
+    "className",
+    "type"
+  ]);
+  const getStyles = () => {
+    if (disabled) {
+      return {
+        container: "flex-1 h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden bg-bg-muted dark:bg-bg-muted-dark",
+        inner: "self-stretch flex-1 pl-4 pr-6 py-2.5 inline-flex justify-center items-center gap-2",
+        text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
+      };
+    }
+    return {
+      container: "flex-1 h-12 bg-brand-primary rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:shadow-md transition-shadow duration-200",
+      inner: "self-stretch flex-1 pl-4 pr-6 py-2.5 inline-flex justify-center items-center gap-2 hover:opacity-90 focus:opacity-85 active:opacity-85 transition-opacity duration-200",
+      text: "text-center justify-center text-text-inverse text-sm font-semibold font-poppins leading-5"
+    };
+  };
+  const styles = getStyles();
+  const containerClasses = twMerge(
+    "flex-1 px-2 py-1 rounded border border-border-subtle dark:border-border-subtle-dark bg-bg-muted dark:bg-bg-muted-dark text-text-secondary dark:text-text-secondary-dark text-sm font-semibold font-poppins leading-5 hover:border-border-default dark:hover:border-border-default-dark focus:outline-none focus:ring-2 focus:ring-brand-primary",
+    disabled && "cursor-not-allowed",
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: containerClasses,
+      disabled
+    }, props), {
+      children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
+    })
+  );
+}
+function PercentageButton(_a) {
+  var _b = _a, {
+    children,
+    disabled = false,
+    className = "",
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "disabled",
+    "className",
+    "type"
+  ]);
+  const containerClasses = twMerge(
+    "flex-1 px-2 py-1 rounded border border-border-subtle dark:border-border-subtle-dark bg-bg-muted dark:bg-bg-muted-dark text-text-secondary dark:text-text-secondary-dark text-sm font-semibold font-poppins leading-5 hover:border-border-default dark:hover:border-border-default-dark focus:outline-none focus:ring-2 focus:ring-brand-primary",
+    disabled && "cursor-not-allowed",
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: containerClasses,
+      disabled
+    }, props), {
+      children
+    })
+  );
+}
+function PrimaryButton(_a) {
+  var _b = _a, {
+    children,
+    disabled = false,
+    className = "",
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "disabled",
+    "className",
+    "type"
+  ]);
+  const baseStyles = disabled ? "h-12 w-full rounded px-6 py-2.5 inline-flex justify-center items-center gap-2 overflow-hidden cursor-not-allowed bg-bg-muted dark:bg-bg-muted-dark text-text-disabled dark:text-text-disabled-dark opacity-50 text-center text-sm font-semibold font-poppins leading-5" : "h-12 w-full rounded px-6 py-2.5 inline-flex justify-center items-center gap-2 overflow-hidden bg-brand-primary text-text-inverse hover:shadow-md hover:opacity-90 focus:opacity-85 active:opacity-85 transition-all duration-200 text-center text-sm font-semibold font-poppins leading-5 cursor-pointer";
+  const buttonClasses = twMerge(baseStyles, className);
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: buttonClasses,
+      disabled
+    }, props), {
+      children
+    })
+  );
+}
+function SecondaryButton(_a) {
+  var _b = _a, {
+    children,
+    disabled = false,
+    className = "",
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "disabled",
+    "className",
+    "type"
+  ]);
+  const getStyles = () => {
+    if (disabled) {
+      return {
+        container: "h-12 rounded outline outline-1 outline-offset-[-1px] outline-border-default dark:outline-border-default-dark inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
+        inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
+        text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
+      };
+    }
+    return {
+      container: "h-12 rounded outline outline-1 outline-offset-[-1px] outline-border-subtle dark:outline-border-subtle-dark inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:outline-brand-primary focus:outline-brand-primary active:outline-border-default transition-colors duration-200 cursor-pointer",
+      inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2 hover:bg-brand-secondary-20 focus:bg-brand-secondary-20 active:bg-transparent transition-colors duration-200",
+      text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
+    };
+  };
+  const styles = getStyles();
+  const containerClasses = twMerge(
+    styles.container,
+    disabled && "cursor-not-allowed",
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: containerClasses,
+      disabled
+    }, props), {
+      children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
+    })
+  );
+}
+function TertiaryButton(_a) {
+  var _b = _a, {
+    children,
+    disabled = false,
+    className = "",
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "disabled",
+    "className",
+    "type"
+  ]);
+  const getStyles = () => {
+    if (disabled) {
+      return {
+        container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden",
+        inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2",
+        text: "opacity-state-disabled-content text-center justify-center text-text-disabled dark:text-text-disabled-dark text-sm font-semibold font-poppins leading-5"
+      };
+    }
+    return {
+      container: "h-12 rounded inline-flex flex-col justify-center items-center gap-2 overflow-hidden hover:shadow-md transition-colors duration-200 cursor-pointer",
+      inner: "self-stretch flex-1 px-6 py-2.5 inline-flex justify-center items-center gap-2 hover:bg-brand-tint dark:hover:bg-brand-tint-dark focus:bg-brand-tint-75 dark:focus:bg-brand-tint-75-dark active:bg-brand-tint-60 dark:active:bg-brand-tint-60-dark transition-colors duration-200",
+      text: "text-center justify-center text-brand-primary text-sm font-semibold font-poppins leading-5"
+    };
+  };
+  const styles = getStyles();
+  const containerClasses = twMerge(
+    styles.container,
+    disabled && "cursor-not-allowed",
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: containerClasses,
+      disabled
+    }, props), {
+      children: /* @__PURE__ */ jsx("div", { className: styles.inner, children: /* @__PURE__ */ jsx("div", { className: styles.text, children }) })
+    })
+  );
+}
+function Link(_a) {
+  var _b = _a, {
+    children,
+    href,
+    className = "",
+    target = "_self"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "href",
+    "className",
+    "target"
+  ]);
+  const styles = {
+    link: "text-sm font-medium font-poppins leading-5 cursor-pointer"
+  };
+  const linkClasses = twMerge(styles.link, className);
+  return /* @__PURE__ */ jsx(
+    "a",
+    __spreadProps(__spreadValues({
+      href,
+      target,
+      className: linkClasses,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0
+    }, props), {
+      children
+    })
+  );
+}
+function Input(_a) {
+  var _b = _a, {
+    label,
+    error,
+    placeholder,
+    type = "text",
+    repassword = "Forgot password?",
+    disabled,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "placeholder",
+    "type",
+    "repassword",
+    "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 }),
+    /* @__PURE__ */ jsx(
+      "input",
+      __spreadValues({
+        type,
+        placeholder,
+        disabled,
+        className: inputClasses
+      }, 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 })
+  ] });
+}
+var ListItem = ({
+  children,
+  className,
+  containerClassName,
+  onClick
+}) => {
+  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",
+    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 }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge("flex justify-center items-center text-white", className),
+      children
+    }
+  );
+};
+var ListItemContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "flex-1 self-stretch inline-flex flex-col justify-center items-start overflow-hidden text-white",
+        className
+      ),
+      children
+    }
+  );
+};
+var ListItemRightSide = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "flex flex-col justify-start items-end text-white",
+        className
+      ),
+      children
+    }
+  );
+};
+function WalletListContainer({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col gap-4", className), children });
+}
+var Text = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", variantClass, className, children } = _b, props = __objRest(_b, ["as", "variantClass", "className", "children"]);
+    return React6.createElement(
+      Component,
+      __spreadValues({
+        ref,
+        className: twMerge("font-poppins", variantClass, className)
+      }, props),
+      children
+    );
+  }
+);
+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"]);
+    const variantClass = accentVariants[variant];
+    return /* @__PURE__ */ jsx(Text_default, __spreadValues({ ref, as, variantClass }, 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"]);
+    const variantClass = bodyVariants[variant];
+    return /* @__PURE__ */ jsx(Text_default, __spreadValues({ ref, as, variantClass }, 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"]);
+    const variantClass = headingVariants[variant];
+    return /* @__PURE__ */ jsx(
+      Text_default,
+      __spreadValues({
+        ref,
+        as: variant === "h-large" ? "h1" : variant,
+        variantClass
+      }, props)
+    );
+  }
+);
+TextHeading.displayName = "TextHeading";
+var TextHeading_default = TextHeading;
+function Title(_a) {
+  var _b = _a, {
+    variant = "h1"
+  } = _b, props = __objRest(_b, [
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx(TextHeading_default, __spreadValues({ variant }, props));
+}
+function ConnectWalletList({
+  wallets,
+  className
+}) {
+  const handleWalletClick = (wallet) => {
+    var _a;
+    (_a = wallet.onClick) == null ? void 0 : _a.call(wallet);
+  };
+  return /* @__PURE__ */ jsx("div", { className: twMerge("w-full", className), children: /* @__PURE__ */ jsx(WalletListContainer, { children: wallets.map((wallet) => /* @__PURE__ */ jsxs(ListItem, { onClick: () => handleWalletClick(wallet), children: [
+    /* @__PURE__ */ jsx(ListItemLeftSide, { children: typeof wallet.icon === "string" ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: wallet.icon,
+        alt: wallet.name,
+        className: "w-10 h-10 rounded-full"
+      }
+    ) : wallet.icon }),
+    /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(Text_default, { children: wallet.name }) }),
+    /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "flex-shrink-0 w-5 h-5 text-gray-400",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M9 5l7 7-7 7"
+          }
+        )
+      }
+    ) })
+  ] }, wallet.id)) }) });
+}
+function WalletItem({
+  id,
+  name,
+  icon,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      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
+      ),
+      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",
+          {
+            src: icon,
+            alt: name,
+            className: "w-full h-full object-cover"
+          }
+        ) : icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left text-[15px] md:text-[17px] font-medium text-white", children: name }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "flex-shrink-0 w-5 h-5 text-gray-400",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 5l7 7-7 7"
+              }
+            )
+          }
+        )
+      ]
+    },
+    id
+  );
+}
+var CURRENCY_CONFIG = {
+  symbols: {
+    USD: "$",
+    BRL: "R$",
+    EUR: "\u20AC",
+    BTC: "\u20BF",
+    ETH: "\u039E",
+    USDC: "$",
+    USDT: "$"
+  },
+  labels: {
+    USD: "USD",
+    BRL: "BRL",
+    EUR: "EUR",
+    BTC: "BTC",
+    ETH: "ETH",
+    USDC: "USDC",
+    USDT: "USDT"
+  }
+};
+var STYLE_CONFIG = {
+  alignment: {
+    left: "items-start",
+    center: "items-center",
+    right: "items-end"
+  },
+  size: {
+    sm: { primary: "text-3xl", secondary: "text-sm", gap: "gap-0.5" },
+    md: { primary: "text-5xl", secondary: "text-base", gap: "gap-1" },
+    lg: { primary: "text-6xl", secondary: "text-lg", gap: "gap-1" }
+  }
+};
+function Currency(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const normalizedProps = "usdValue" in props ? {
+    amount: props.amount,
+    currency: "USD",
+    secondaryAmount: props.usdValue,
+    secondaryCurrency: void 0,
+    align: (_a = props.align) != null ? _a : "right",
+    size: (_b = props.size) != null ? _b : "lg",
+    showSymbol: false,
+    showLabel: false,
+    className: (_c = props.className) != null ? _c : ""
+  } : {
+    amount: props.amount,
+    currency: (_d = props.currency) != null ? _d : "USD",
+    secondaryAmount: props.secondaryAmount,
+    secondaryCurrency: props.secondaryCurrency,
+    align: (_e = props.align) != null ? _e : "right",
+    size: (_f = props.size) != null ? _f : "lg",
+    showSymbol: (_g = props.showSymbol) != null ? _g : true,
+    showLabel: (_h = props.showLabel) != null ? _h : false,
+    className: (_i = props.className) != null ? _i : ""
+  };
+  const {
+    amount,
+    currency,
+    secondaryAmount,
+    secondaryCurrency,
+    align,
+    size,
+    showSymbol,
+    showLabel,
+    className
+  } = normalizedProps;
+  const formatAmount = (value, curr, displaySymbol) => {
+    if (!displaySymbol && !showLabel) return value;
+    const symbol = displaySymbol ? CURRENCY_CONFIG.symbols[curr] : "";
+    const label = showLabel ? ` ${CURRENCY_CONFIG.labels[curr]}` : "";
+    if (["BTC", "ETH"].includes(curr) && !value.includes(".") && !value.includes(",")) {
+      return `${symbol}${value}${label}`;
+    }
+    return `${symbol} ${value}${label}`.trim();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "flex flex-col",
+        STYLE_CONFIG.alignment[align],
+        STYLE_CONFIG.size[size].gap,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(
+              "font-bold text-text-primary dark:text-text-primary-dark font-poppins",
+              STYLE_CONFIG.size[size].primary
+            ),
+            children: formatAmount(amount, currency, showSymbol)
+          }
+        ),
+        secondaryAmount && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(
+              "text-text-secondary dark:text-text-secondary-dark font-poppins",
+              STYLE_CONFIG.size[size].secondary
+            ),
+            children: secondaryCurrency ? formatAmount(secondaryAmount, secondaryCurrency, true) : secondaryAmount
+          }
+        )
+      ]
+    }
+  );
+}
+var TabsContext = React6.createContext(
+  void 0
+);
+var useTabs = () => {
+  const ctx = React6.useContext(TabsContext);
+  if (!ctx) {
+    throw new Error("Tabs compound components must be used within <Tabs />");
+  }
+  return ctx;
+};
+var Tabs = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value: controlledValue,
+      defaultValue = "",
+      onValueChange,
+      variant = "secondary",
+      className,
+      children
+    } = _b, props = __objRest(_b, [
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "variant",
+      "className",
+      "children"
+    ]);
+    const [internal, setInternal] = React6.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const activeValue = isControlled ? controlledValue : internal;
+    const handleChange = (v) => {
+      if (!isControlled) setInternal(v);
+      onValueChange == null ? void 0 : onValueChange(v);
+    };
+    return /* @__PURE__ */ jsx(
+      TabsContext.Provider,
+      {
+        value: {
+          value: activeValue,
+          onValueChange: handleChange,
+          variant
+        },
+        children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: twMerge("w-full", className) }, props), { children }))
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+    const { variant } = useTabs();
+    if (variant === "header") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          role: "tablist",
+          className: twMerge(
+            "relative w-full flex items-center justify-between pt-2",
+            className
+          ),
+          style: {
+            paddingLeft: "var(--spacing-md, 16px)",
+            paddingRight: "var(--spacing-md, 16px)",
+            backgroundColor: "var(--color-bg-default, transparent)"
+          }
+        }, props), {
+          children
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "tablist",
+        className: twMerge(
+          "relative w-full flex items-center bg-transparent border-b border-border-default dark:border-border-default-dark",
+          variant === "primary" ? "h-[72px] gap-6" : "h-12",
+          className
+        )
+      }, props), {
+        children
+      })
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      className,
+      children,
+      style
+    } = _b, props = __objRest(_b, [
+      "value",
+      "className",
+      "children",
+      "style"
+    ]);
+    const { value: activeValue, onValueChange, variant } = useTabs();
+    const isActive = activeValue === value;
+    const headerStyle = variant === "header" ? __spreadValues({
+      color: isActive ? "var(--color-brand-primary)" : "var(--color-text-secondary)"
+    }, style) : style;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "tab",
+        "aria-selected": isActive,
+        onClick: () => onValueChange(value),
+        className: twMerge(
+          "relative inline-flex flex-col items-center justify-center whitespace-nowrap font-poppins transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 outline-none",
+          variant === "header" ? "flex-1 text-sm font-semibold py-3" : variant === "primary" ? "h-[72px] text-base font-medium px-0 pb-3 pt-2 flex-none" : "h-12 text-[12px] font-semibold px-4 flex-none",
+          variant !== "header" && (isActive ? "text-brand-primary" : "text-text-secondary dark:text-text-secondary-dark hover:text-text-primary dark:hover:text-text-primary-dark"),
+          className
+        ),
+        style: headerStyle
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          isActive && variant === "header" && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layoutId: "header-tab-indicator",
+              className: "absolute rounded-t-full",
+              style: {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                marginLeft: "auto",
+                marginRight: "auto",
+                width: "3.5rem",
+                height: "3px",
+                backgroundColor: "var(--color-brand-primary)"
+              },
+              transition: { type: "spring", bounce: 0.2, duration: 0.6 }
+            }
+          ),
+          isActive && variant !== "header" && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layoutId: "tab-indicator",
+              className: "absolute bottom-0 left-0 right-0 h-0.5 bg-brand-primary z-10",
+              transition: { type: "spring", bounce: 0.2, duration: 0.6 }
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { value, className, children } = _b, props = __objRest(_b, ["value", "className", "children"]);
+    const { value: activeValue, variant } = useTabs();
+    if (activeValue !== value) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "tabpanel",
+        className: twMerge(
+          "focus-visible:outline-none",
+          variant === "primary" || variant === "header" ? "mt-0" : "mt-6",
+          className
+        )
+      }, props), {
+        children
+      })
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var Select = ({
+  value,
+  onValueChange,
+  disabled = false,
+  children,
+  className
+}) => {
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React6.useState(-1);
+  const containerRef = React6.useRef(null);
+  const handleToggle = React6.useCallback(() => {
+    if (!disabled) {
+      setIsOpen((prev) => !prev);
+      if (!isOpen) setHighlightedIndex(0);
+    }
+  }, [disabled, isOpen]);
+  const handleSelect = React6.useCallback(
+    (newValue) => {
+      onValueChange(newValue);
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    },
+    [onValueChange]
+  );
+  React6.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  React6.useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  const enhancedChildren = React6.Children.map(children, (child) => {
+    if (!React6.isValidElement(child)) return child;
+    if (child.type === SelectTrigger) {
+      return React6.cloneElement(child, {
+        _isOpen: isOpen,
+        _disabled: disabled,
+        _onToggle: handleToggle
+      });
+    }
+    if (child.type === SelectContent) {
+      return React6.cloneElement(child, {
+        _isOpen: isOpen,
+        _value: value,
+        _onSelect: handleSelect,
+        _highlightedIndex: highlightedIndex,
+        _setHighlightedIndex: setHighlightedIndex
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: twMerge("relative", className), children: enhancedChildren });
+};
+Select.displayName = "Select";
+var SelectTrigger = React6.forwardRef(
+  ({
+    placeholder = "Select...",
+    className,
+    children,
+    _isOpen,
+    _disabled,
+    _onToggle
+  }, ref) => {
+    const hasChildren = React6.Children.count(children) > 0;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: _onToggle,
+        disabled: _disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": _isOpen,
+        className: twMerge(
+          "w-full flex items-center justify-between gap-2",
+          "bg-[var(--color-bg-subtle,#1a1a1a)] border border-[var(--color-border-default,#333)] rounded px-3 py-1.5",
+          "text-sm text-[var(--color-text-primary,#fff)] text-left",
+          "transition-colors cursor-pointer",
+          "hover:border-[var(--color-border-strong,#555)]",
+          "focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary,#7C3AED)]/50 focus:border-[var(--color-brand-primary,#7C3AED)]",
+          _disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: !hasChildren ? "text-[var(--color-text-tertiary,#888)]" : void 0,
+              children: hasChildren ? children : placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: twMerge(
+                "w-4 h-4 text-[var(--color-text-secondary,#999)] transition-transform",
+                _isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React6.forwardRef(
+  ({
+    className,
+    children,
+    _isOpen,
+    _value,
+    _onSelect,
+    _highlightedIndex,
+    _setHighlightedIndex
+  }, ref) => {
+    const listRef = React6.useRef(null);
+    const mergedRef = React6.useCallback(
+      (node) => {
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        listRef.current = node;
+      },
+      [ref]
+    );
+    React6.useEffect(() => {
+      if (_isOpen && _highlightedIndex !== void 0 && _highlightedIndex >= 0 && listRef.current) {
+        const highlightedElement = listRef.current.children[_highlightedIndex];
+        if (highlightedElement) {
+          highlightedElement.scrollIntoView({ block: "nearest" });
+        }
+      }
+    }, [_isOpen, _highlightedIndex]);
+    let itemIndex = 0;
+    const enhancedChildren = React6.Children.map(children, (child) => {
+      if (!React6.isValidElement(child)) return child;
+      if (child.type === SelectItem) {
+        const currentIndex = itemIndex++;
+        const itemProps = child.props;
+        return React6.cloneElement(child, {
+          _index: currentIndex,
+          _isSelected: _value === itemProps.value,
+          _isHighlighted: _highlightedIndex === currentIndex,
+          _onSelect,
+          _onHighlight: _setHighlightedIndex
+        });
+      }
+      return child;
+    });
+    const contentVariants = {
+      hidden: { opacity: 0, y: -8 },
+      visible: {
+        opacity: 1,
+        y: 0,
+        transition: { type: "spring", damping: 25, stiffness: 400 }
+      },
+      exit: { opacity: 0, y: -8, transition: { duration: 0.1 } }
+    };
+    return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: _isOpen && /* @__PURE__ */ jsx(
+      motion.ul,
+      {
+        ref: mergedRef,
+        role: "listbox",
+        variants: contentVariants,
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        className: twMerge(
+          "absolute z-50 w-full mt-1",
+          "bg-[var(--color-bg-raised,#1f1f1f)] border border-[var(--color-border-default,#333)] rounded shadow-lg",
+          "max-h-60 overflow-auto",
+          "py-1",
+          className
+        ),
+        children: enhancedChildren
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React6.forwardRef(
+  ({
+    value,
+    disabled = false,
+    className,
+    children,
+    _index,
+    _isSelected,
+    _isHighlighted,
+    _onSelect,
+    _onHighlight
+  }, ref) => {
+    const handleClick = () => {
+      if (!disabled && _onSelect) {
+        _onSelect(value);
+      }
+    };
+    const handleMouseEnter = () => {
+      if (!disabled && _onHighlight && _index !== void 0) {
+        _onHighlight(_index);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "option",
+        "aria-selected": _isSelected,
+        "aria-disabled": disabled,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        className: twMerge(
+          "px-3 py-2 text-sm cursor-pointer transition-colors",
+          "text-[var(--color-text-primary,#fff)]",
+          _isSelected && "text-[var(--color-text-highlight,#7C3AED)]",
+          _isHighlighted && "bg-[var(--color-bg-muted,#2a2a2a)]",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var Skeleton = (_a) => {
+  var _b = _a, {
+    width = "100%",
+    height = "1rem",
+    variant = "text",
+    shimmer = true,
+    className,
+    style
+  } = _b, props = __objRest(_b, [
+    "width",
+    "height",
+    "variant",
+    "shimmer",
+    "className",
+    "style"
+  ]);
+  const defaultGradient = "linear-gradient(25deg, #2C2C2C 0%, #2C2C2C 60%, #121212 100%)";
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      className: twMerge(
+        "relative overflow-hidden animate-fade-in",
+        variant === "circle" ? "rounded-full" : "rounded",
+        className
+      ),
+      style: __spreadValues({
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height,
+        background: defaultGradient
+      }, style)
+    }, props), {
+      children: shimmer && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-white/20 to-transparent dark:via-gray-600/30" })
+    })
+  );
+};
+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) => {
+  var _b = _a, {
+    type = "inline",
+    variant = "info",
+    title,
+    message,
+    position = "top-right",
+    autoHideDuration = 5e3,
+    show = true,
+    onClose,
+    className
+  } = _b, props = __objRest(_b, [
+    "type",
+    "variant",
+    "title",
+    "message",
+    "position",
+    "autoHideDuration",
+    "show",
+    "onClose",
+    "className"
+  ]);
+  const [isExiting, setIsExiting] = React6.useState(false);
+  const timerRef = React6.useRef(null);
+  const config = variantConfig[variant];
+  const IconComponent = config.icon;
+  const handleClose = () => {
+    setIsExiting(true);
+    setTimeout(() => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      onClose == null ? void 0 : onClose();
+    }, 300);
+  };
+  if (type === "toast" && show && autoHideDuration > 0 && !timerRef.current && !isExiting) {
+    timerRef.current = setTimeout(() => {
+      handleClose();
+    }, autoHideDuration);
+  }
+  React6.useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  if (!show) return null;
+  const backgroundColor = type === "inline" ? `${config.color}33` : config.color;
+  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"
+    }, 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 })
+        ] }),
+        /* @__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, {})
+          }
+        )
+      ]
+    })
+  );
+};
+BannerNotification.displayName = "BannerNotification";
+var AddressDisplay = ({
+  address,
+  onCopy,
+  className = "",
+  textClassName = "",
+  showCopyButton = true
+}) => {
+  const [copied, setCopied] = React6.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      onCopy == null ? void 0 : onCopy(address);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy address:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "bg-[#121212] rounded p-3 flex items-center justify-between gap-2 border border-gray-700",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          TextBody_default,
+          {
+            className: twMerge(
+              "block w-full whitespace-nowrap overflow-hidden",
+              textClassName
+            ),
+            children: address
+          }
+        ),
+        showCopyButton && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "text-gray-400 hover:text-white transition-colors flex-shrink-0 cursor-pointer",
+            "aria-label": "Copy address",
+            children: copied ? /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-5 h-5 text-green-500",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M5 13l4 4L19 7"
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+AddressDisplay.displayName = "AddressDisplay";
+var SummaryDetails = ({
+  title,
+  items,
+  defaultOpen = false,
+  className = "",
+  summaryClassName = "",
+  contentClassName = "",
+  showDividers = true
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      className: twMerge("bg-[#1A1A1A] rounded p-4 group", className),
+      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(
+            "svg",
+            {
+              className: "w-5 h-5 text-gray-400 transition-transform duration-300 group-open:rotate-180",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M5 9l7 7 7-7"
+                }
+              )
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(
+              "mt-4",
+              showDividers && "divide-y divide-[#2A2A2A]",
+              contentClassName
+            ),
+            children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between py-2", children: [
+              /* @__PURE__ */ jsx(
+                TextBody_default,
+                {
+                  variant: "text-small",
+                  className: twMerge("text-text-tertiary dark:text-text-tertiary-dark", item.labelClassName),
+                  children: item.label
+                }
+              ),
+              typeof item.value === "string" ? /* @__PURE__ */ jsx(
+                TextBody_default,
+                {
+                  variant: "text-small",
+                  className: twMerge("text-text-primary dark:text-text-primary-dark font-medium", item.valueClassName),
+                  children: item.value
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: item.valueClassName, children: item.value })
+            ] }, index))
+          }
+        )
+      ]
+    }
+  );
+};
+var ActionSheet = ({
+  id,
+  currentActionSheetId,
+  isOpen,
+  onClose,
+  children,
+  className = "",
+  contentClassName = "",
+  position = "bottom",
+  height = "auto",
+  closeOnBackdropClick = true
+}) => {
+  const isThisSheetActive = isOpen && currentActionSheetId === id;
+  React6.useEffect(() => {
+    if (isThisSheetActive) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isThisSheetActive]);
+  React6.useEffect(() => {
+    if (!isThisSheetActive) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isThisSheetActive, onClose]);
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const backdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+    exit: { opacity: 0 }
+  };
+  const sheetVariants = {
+    hidden: position === "bottom" ? { y: "100%" } : { opacity: 0, scale: 0.95 },
+    visible: position === "bottom" ? {
+      y: "0%",
+      transition: {
+        type: "spring",
+        damping: 25,
+        stiffness: 300
+      }
+    } : {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "spring",
+        damping: 25,
+        stiffness: 300
+      }
+    },
+    exit: position === "bottom" ? {
+      y: "100%",
+      transition: {
+        type: "spring",
+        damping: 25,
+        stiffness: 300
+      }
+    } : {
+      opacity: 0,
+      scale: 0.95,
+      transition: {
+        type: "spring",
+        damping: 25,
+        stiffness: 300
+      }
+    }
+  };
+  const getHeightClass = () => {
+    switch (height) {
+      case "full":
+        return "h-full";
+      case "half":
+        return "h-[50vh]";
+      case "auto":
+      default:
+        return "h-auto";
+    }
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isThisSheetActive && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: twMerge(
+        "fixed inset-0 z-50 flex justify-center",
+        position === "bottom" ? "items-end" : "items-center",
+        className
+      ),
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: handleBackdropClick,
+      variants: backdropVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      transition: { duration: 0.2 },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: twMerge(
+              "relative w-full bg-[var(--sheet-bg,#0A0A0A)] shadow-2xl overflow-hidden",
+              position === "bottom" ? "max-w-full rounded-t-[32px]" : "max-w-lg rounded-2xl mx-4",
+              getHeightClass(),
+              contentClassName
+            ),
+            variants: sheetVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            children
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/stories/providers/types.ts
+var defaultThemeColors = {
+  // Brand
+  brandPrimary: "#405EFF",
+  brandSecondary: "#A9ABF7",
+  // Backgrounds
+  bgDefault: "#FFFFFF",
+  bgSubtle: "#F8F9FA",
+  bgMuted: "#E3E4E8",
+  // Text
+  textPrimary: "#252050",
+  textSecondary: "#5C5F66",
+  textDisabled: "#C6C8CC",
+  textInverse: "#FFFFFF",
+  // States
+  stateSuccess: "#2BA176",
+  stateError: "#FF4D4F",
+  stateWarning: "#F6A700"
+};
+var darkThemeColors = {
+  // Brand
+  brandPrimary: "#405EFF",
+  brandSecondary: "#A9ABF7",
+  // Backgrounds
+  bgDefault: "#121212",
+  bgSubtle: "#1E1E1E",
+  bgMuted: "#2C2C2C",
+  // Text
+  textPrimary: "#FFFFFF",
+  textSecondary: "#E3E4E8",
+  textDisabled: "#898D95",
+  textInverse: "#252050",
+  // States
+  stateSuccess: "#2BA176",
+  stateError: "#FF4D4F",
+  stateWarning: "#F6A700"
+};
+var cryptocontrolThemeColors = {
+  // Brand - green primary for cryptocontrol
+  brandPrimary: "#1FC16B",
+  brandSecondary: "#A9ABF7",
+  // Backgrounds (same as dark)
+  bgDefault: "#121212",
+  bgSubtle: "#1E1E1E",
+  bgMuted: "#2C2C2C",
+  // Text (same as dark)
+  textPrimary: "#FFFFFF",
+  textSecondary: "#E3E4E8",
+  textDisabled: "#898D95",
+  textInverse: "#252050",
+  // States
+  stateSuccess: "#2BA176",
+  stateError: "#FF4D4F",
+  stateWarning: "#F6A700"
+};
+function themeToCSS(theme) {
+  if (!(theme == null ? void 0 : theme.colors)) return {};
+  const vars = {};
+  const colors = theme.colors;
+  if (colors.brandPrimary) vars["--deframe-brand-primary"] = colors.brandPrimary;
+  if (colors.brandSecondary) vars["--deframe-brand-secondary"] = colors.brandSecondary;
+  if (colors.bgDefault) vars["--deframe-bg-default"] = colors.bgDefault;
+  if (colors.bgSubtle) vars["--deframe-bg-subtle"] = colors.bgSubtle;
+  if (colors.bgMuted) vars["--deframe-bg-muted"] = colors.bgMuted;
+  if (colors.textPrimary) vars["--deframe-text-primary"] = colors.textPrimary;
+  if (colors.textSecondary) vars["--deframe-text-secondary"] = colors.textSecondary;
+  if (colors.textDisabled) vars["--deframe-text-disabled"] = colors.textDisabled;
+  if (colors.textInverse) vars["--deframe-text-inverse"] = colors.textInverse;
+  if (colors.stateSuccess) vars["--deframe-state-success"] = colors.stateSuccess;
+  if (colors.stateError) vars["--deframe-state-error"] = colors.stateError;
+  if (colors.stateWarning) vars["--deframe-state-warning"] = colors.stateWarning;
+  return vars;
+}
+function getSystemColorMode() {
+  if (typeof window === "undefined" || !window.matchMedia) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveThemeConfig(config, systemMode) {
+  var _a, _b, _c, _d, _e, _f;
+  const mode = (config == null ? void 0 : config.mode) === "auto" ? systemMode : (_a = config == null ? void 0 : config.mode) != null ? _a : "light";
+  const preset = (_b = config == null ? void 0 : config.preset) != null ? _b : "default";
+  const providerTheme = preset === "cryptocontrol" ? "cryptocontrol" : mode === "dark" ? "dark" : "light";
+  const overrideColors = mode === "dark" ? (_d = (_c = config == null ? void 0 : config.overrides) == null ? void 0 : _c.dark) == null ? void 0 : _d.colors : (_f = (_e = config == null ? void 0 : config.overrides) == null ? void 0 : _e.light) == null ? void 0 : _f.colors;
+  const customTheme = overrideColors ? { colors: overrideColors } : void 0;
+  return { providerTheme, customTheme };
+}
+function DeframeComponentsProvider({
+  theme = "light",
+  themeConfig,
+  customTheme,
+  className,
+  children
+}) {
+  const [systemMode, setSystemMode] = useState(() => getSystemColorMode());
+  useEffect(() => {
+    var _a;
+    const needsSystem = (themeConfig == null ? void 0 : themeConfig.mode) === "auto";
+    if (!needsSystem || typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => setSystemMode(mq.matches ? "dark" : "light");
+    handler();
+    (_a = mq.addEventListener) == null ? void 0 : _a.call(mq, "change", handler);
+    return () => {
+      var _a2;
+      return (_a2 = mq.removeEventListener) == null ? void 0 : _a2.call(mq, "change", handler);
+    };
+  }, [themeConfig == null ? void 0 : themeConfig.mode]);
+  const resolvedTheme = useMemo(() => {
+    if (themeConfig) {
+      return resolveThemeConfig(themeConfig, systemMode);
+    }
+    return {
+      providerTheme: theme,
+      customTheme
+    };
+  }, [themeConfig, theme, customTheme, systemMode]);
+  const themeClass = resolvedTheme.providerTheme === "light" ? "" : resolvedTheme.providerTheme;
+  const colorScheme = resolvedTheme.providerTheme === "light" ? "light" : "dark";
+  const customCSSVars = themeToCSS(resolvedTheme.customTheme);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge("deframe-widget", themeClass, className),
+      style: __spreadValues({ colorScheme }, customCSSVars),
+      children
+    }
+  );
+}
+
+export { ActionButton, ActionSheet, AddressDisplay, BannerNotification, ConnectWalletList, Currency, DeframeComponentsProvider, Currency as Fiat, Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, PercentageButton, PrimaryButton, SecondaryButton, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, SummaryDetails, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent_default as TextAccent, TextBody_default as TextBody, TextHeading_default as TextHeading, Title, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map