@moon-x/react-sdk 0.8.1 → 0.9.1

package/dist/index.mjs

@@ -389,8 +389,8 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { ethereum_exports } from "./chunk-Y6HSLN2H.mjs";
-import { solana_exports } from "./chunk-RFAKWGRF.mjs";
+import { ethereum_exports } from "./chunk-7XFCJAFG.mjs";
+import { solana_exports } from "./chunk-OAG4S5VJ.mjs";
 import { AuthContext, useAuthSDK } from "./chunk-PCEN5CH6.mjs";
 // src/index.ts
 import { useAddPasskey, useEphemeralSigner, useLoginWithEmail, usePasskeyStatus, useRegisterPasskey, useRemovePasskey, useUser } from "@moon-x/core/react";
@@ -3038,29 +3038,60 @@ function themeToCSS(theme) {
         "--moonkey-font-family": theme.fontFamily
     };
 }
+function isColorDark(color) {
+    var c = color.trim().toLowerCase();
+    if (c.startsWith("#")) {
+        var h = c.slice(1);
+        if (h.length === 3 || h.length === 4) {
+            h = h.split("").map(function(ch) {
+                return ch + ch;
+            }).join("");
+        }
+        if (h.length !== 6 && h.length !== 8) return void 0;
+        var r = parseInt(h.substring(0, 2), 16);
+        var g = parseInt(h.substring(2, 4), 16);
+        var b = parseInt(h.substring(4, 6), 16);
+        if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return void 0;
+        return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+    }
+    var rgb = c.match(/^rgba?\(([^)]+)\)$/);
+    if (rgb) {
+        var parts = rgb[1].split(/[\s,/]+/).filter(Boolean).slice(0, 3);
+        if (parts.length < 3) return void 0;
+        var _parts_map = _sliced_to_array(parts.map(function(p) {
+            return p.endsWith("%") ? parseFloat(p) / 100 * 255 : parseFloat(p);
+        }), 3), r1 = _parts_map[0], g1 = _parts_map[1], b1 = _parts_map[2];
+        if (Number.isNaN(r1) || Number.isNaN(g1) || Number.isNaN(b1)) return void 0;
+        return 0.299 * r1 + 0.587 * g1 + 0.114 * b1 < 128;
+    }
+    return void 0;
+}
 function isDarkMode(theme, displayMode, backgroundColor) {
+    var _isColorDark;
     var _theme_colors;
     if (displayMode === "dark") return true;
     if (displayMode === "light") return false;
+    if (displayMode === "auto" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
     var bgToCheck = backgroundColor || (theme === null || theme === void 0 ? void 0 : (_theme_colors = theme.colors) === null || _theme_colors === void 0 ? void 0 : _theme_colors.background);
     if (!bgToCheck) return false;
-    var hex = bgToCheck.replace("#", "");
-    if (hex.length !== 6) return false;
-    var r = parseInt(hex.substring(0, 2), 16);
-    var g = parseInt(hex.substring(2, 4), 16);
-    var b = parseInt(hex.substring(4, 6), 16);
-    return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+    return (_isColorDark = isColorDark(bgToCheck)) !== null && _isColorDark !== void 0 ? _isColorDark : false;
 }
 // src/components/app-logo.tsx
 import { useState as useState7 } from "react";
 import { jsx } from "react/jsx-runtime";
 var AppLogo = function AppLogo(param) {
-    var src = param.src, appConfig = param.appConfig, className = param.className, style = param.style;
+    var src = param.src, appConfig = param.appConfig, className = param.className, style = param.style, height = param.height, _param_align = param.align, align = _param_align === void 0 ? "center" : _param_align;
     var _useState7 = _sliced_to_array(useState7(false), 2), imageError = _useState7[0], setImageError = _useState7[1];
     var logoSrc = src || (appConfig === null || appConfig === void 0 ? void 0 : appConfig.public_logo_url) || "";
     var defaultStyle = _object_spread({
-        height: "4rem",
-        marginLeft: "auto",
+        display: "block",
+        // Truthy check (not `!= null`): a 0 height is degenerate (invisible logo),
+        // so fall back to the 4rem default rather than rendering "0px".
+        height: height ? "".concat(height, "px") : "4rem",
+        // center → auto/auto; left → 0/auto.
+        marginLeft: align === "left" ? 0 : "auto",
         marginRight: "auto"
     }, style);
     var handleImageError = function handleImageError() {
@@ -3189,17 +3220,17 @@ function hslToHex(h, s, l) {
     }).join(""));
 }
 function darken(hex, amount) {
-    if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return hex;
+    if (!/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(hex)) return hex;
     var _hexToHsl = _sliced_to_array(hexToHsl(hex), 3), h = _hexToHsl[0], s = _hexToHsl[1], l = _hexToHsl[2];
     return hslToHex(h, s, Math.max(0, l - amount));
 }
 function lighten(hex, amount) {
-    if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return hex;
+    if (!/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(hex)) return hex;
     var _hexToHsl = _sliced_to_array(hexToHsl(hex), 3), h = _hexToHsl[0], s = _hexToHsl[1], l = _hexToHsl[2];
     return hslToHex(h, s, Math.min(1, l + amount));
 }
 function contrastForeground(hex) {
-    if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return "#000000";
+    if (!/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(hex)) return "#000000";
     var h = hex.replace("#", "");
     var r = parseInt(h.substring(0, 2), 16);
     var g = parseInt(h.substring(2, 4), 16);
@@ -3208,35 +3239,101 @@ function contrastForeground(hex) {
 }
 function isDarkAppearance(appearance) {
     var _ref = appearance !== null && appearance !== void 0 ? appearance : {}, displayMode = _ref.displayMode, backgroundColor = _ref.backgroundColor;
-    if (displayMode === "dark") return true;
-    if (displayMode === "light") return false;
-    if (!backgroundColor) return false;
-    return contrastForeground(backgroundColor) === "#ffffff";
+    return isDarkMode(void 0, displayMode, backgroundColor);
 }
 var BORDER_RADIUS_PRESETS = {
     none: {
         sm: "0",
         md: "0",
-        lg: "0"
+        lg: "0",
+        full: "0"
     },
     sm: {
         sm: "0.125rem",
         md: "0.25rem",
-        lg: "0.375rem"
+        lg: "0.375rem",
+        full: "9999px"
     },
     md: {
         sm: "0.375rem",
         md: "0.5rem",
-        lg: "0.75rem"
+        lg: "0.75rem",
+        full: "9999px"
     },
     lg: {
         sm: "0.5rem",
         md: "0.75rem",
-        lg: "1rem"
+        lg: "1rem",
+        full: "9999px"
+    },
+    full: {
+        sm: "9999px",
+        md: "9999px",
+        lg: "9999px",
+        full: "9999px"
     }
 };
+function definedOnly(src) {
+    var out = {};
+    if (!src) return out;
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = Object.keys(src)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var key = _step.value;
+            var v = src[key];
+            if (v !== void 0 && v !== null && v !== "") out[key] = v;
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return out;
+}
+function resolveAppearanceTokens(appearance, isDark) {
+    var _ref, _perMode_fontFamily;
+    var _appearance_typography, _perMode_typography, _appearance_typography1, _perMode_typography1;
+    if (!appearance) return {};
+    var baseRadius = _type_of(appearance.borderRadius) === "object" ? appearance.borderRadius : void 0;
+    var perMode = (_ref = isDark ? appearance.dark : appearance.light) !== null && _ref !== void 0 ? _ref : {};
+    return {
+        colors: _object_spread({}, appearance.colors, perMode.colors),
+        borderRadius: _object_spread({}, baseRadius, perMode.borderRadius),
+        fontFamily: (_perMode_fontFamily = perMode.fontFamily) !== null && _perMode_fontFamily !== void 0 ? _perMode_fontFamily : appearance.fontFamily,
+        typography: _object_spread_props(_object_spread({}, appearance.typography, perMode.typography), {
+            fontSize: _object_spread({}, (_appearance_typography = appearance.typography) === null || _appearance_typography === void 0 ? void 0 : _appearance_typography.fontSize, (_perMode_typography = perMode.typography) === null || _perMode_typography === void 0 ? void 0 : _perMode_typography.fontSize),
+            fontWeight: _object_spread({}, (_appearance_typography1 = appearance.typography) === null || _appearance_typography1 === void 0 ? void 0 : _appearance_typography1.fontWeight, (_perMode_typography1 = perMode.typography) === null || _perMode_typography1 === void 0 ? void 0 : _perMode_typography1.fontWeight)
+        }),
+        card: _object_spread({}, appearance.card, perMode.card),
+        backdrop: _object_spread({}, appearance.backdrop, perMode.backdrop)
+    };
+}
+function resolveLogo(logo, isDark) {
+    if (!logo) return void 0;
+    if (typeof logo === "string") return {
+        src: logo
+    };
+    var src = isDark && logo.srcDark ? logo.srcDark : logo.src;
+    return {
+        src: src,
+        height: logo.height,
+        align: logo.align
+    };
+}
 function appearanceToTheme(appearance) {
+    var isDark = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var _tokens_borderRadius, _tokens_fontFamily;
     if (!appearance) return {};
+    var tokens = resolveAppearanceTokens(appearance, isDark);
     var colors = {};
     if (appearance.accentColor) {
         var a = appearance.accentColor;
@@ -3249,8 +3346,9 @@ function appearanceToTheme(appearance) {
         colors.foregroundAccent = darken(a, 0.04);
     }
     if (appearance.backgroundColor) {
+        var _isColorDark;
         var bg = appearance.backgroundColor;
-        var isBgDark = contrastForeground(bg) === "#ffffff";
+        var isBgDark = (_isColorDark = isColorDark(bg)) !== null && _isColorDark !== void 0 ? _isColorDark : isDark;
         colors.background = bg;
         colors.background2 = isBgDark ? lighten(bg, 0.08) : darken(bg, 0.03);
         colors.background3 = isBgDark ? lighten(bg, 0.14) : darken(bg, 0.06);
@@ -3267,43 +3365,191 @@ function appearanceToTheme(appearance) {
             colors.foreground4 = "#d1d5db";
         }
     }
-    if (appearance.colors) {
-        Object.assign(colors, appearance.colors);
-    }
+    Object.assign(colors, definedOnly(tokens.colors));
     var result = {};
-    if (Object.keys(colors).length > 0) result.colors = colors;
-    if (appearance.fontFamily) result.fontFamily = appearance.fontFamily;
-    if (appearance.borderRadius) {
-        if (typeof appearance.borderRadius === "string") {
-            var _BORDER_RADIUS_PRESETS_appearance_borderRadius;
-            result.borderRadius = (_BORDER_RADIUS_PRESETS_appearance_borderRadius = BORDER_RADIUS_PRESETS[appearance.borderRadius]) !== null && _BORDER_RADIUS_PRESETS_appearance_borderRadius !== void 0 ? _BORDER_RADIUS_PRESETS_appearance_borderRadius : BORDER_RADIUS_PRESETS.md;
-        } else {
-            result.borderRadius = appearance.borderRadius;
-        }
+    if (Object.keys(colors).length > 0) {
+        result.colors = colors;
+    }
+    var radius = {};
+    if (typeof appearance.borderRadius === "string") {
+        var _BORDER_RADIUS_PRESETS_appearance_borderRadius;
+        Object.assign(radius, (_BORDER_RADIUS_PRESETS_appearance_borderRadius = BORDER_RADIUS_PRESETS[appearance.borderRadius]) !== null && _BORDER_RADIUS_PRESETS_appearance_borderRadius !== void 0 ? _BORDER_RADIUS_PRESETS_appearance_borderRadius : BORDER_RADIUS_PRESETS.md);
+    }
+    var _ref = (_tokens_borderRadius = tokens.borderRadius) !== null && _tokens_borderRadius !== void 0 ? _tokens_borderRadius : {}, sm = _ref.sm, md = _ref.md, lg = _ref.lg, full = _ref.full;
+    Object.assign(radius, definedOnly({
+        sm: sm,
+        md: md,
+        lg: lg,
+        full: full
+    }));
+    if (Object.keys(radius).length > 0) {
+        result.borderRadius = radius;
     }
+    var fontFamily = (_tokens_fontFamily = tokens.fontFamily) !== null && _tokens_fontFamily !== void 0 ? _tokens_fontFamily : appearance.fontFamily;
+    if (fontFamily) result.fontFamily = fontFamily;
     return result;
 }
+function appearanceToMoonxVars(appearance, isDark) {
+    var _t_colors, _t_colors1, _t_colors2, _t_colors3, _t_borderRadius, _t_borderRadius1, _t_borderRadius2, _t_typography, _t_typography1, _t_typography2, _t_typography3, _t_typography4, _t_typography5, _t_typography_fontSize, _t_typography6, _t_typography_fontSize1, _t_typography7, _t_typography_fontSize2, _t_typography8, _t_typography_fontWeight, _t_typography9, _t_typography_fontWeight1, _t_typography10, _t_card, _t_card1, _t_card2, _t_card3, _t_backdrop, _t_backdrop1;
+    var vars = {};
+    if (!appearance) return vars;
+    var t = resolveAppearanceTokens(appearance, isDark);
+    var set = function set(name, value) {
+        if (value !== void 0 && value !== null && value !== "") {
+            vars[name] = String(value);
+        }
+    };
+    set("--moonx-color-warning", (_t_colors = t.colors) === null || _t_colors === void 0 ? void 0 : _t_colors.warning);
+    set("--moonx-color-info", (_t_colors1 = t.colors) === null || _t_colors1 === void 0 ? void 0 : _t_colors1.info);
+    set("--moonx-color-link", (_t_colors2 = t.colors) === null || _t_colors2 === void 0 ? void 0 : _t_colors2.link);
+    set("--moonx-color-ring", (_t_colors3 = t.colors) === null || _t_colors3 === void 0 ? void 0 : _t_colors3.ring);
+    set("--moonx-radius-button", (_t_borderRadius = t.borderRadius) === null || _t_borderRadius === void 0 ? void 0 : _t_borderRadius.button);
+    set("--moonx-radius-card", (_t_borderRadius1 = t.borderRadius) === null || _t_borderRadius1 === void 0 ? void 0 : _t_borderRadius1.card);
+    set("--moonx-radius-input", (_t_borderRadius2 = t.borderRadius) === null || _t_borderRadius2 === void 0 ? void 0 : _t_borderRadius2.input);
+    set("--moonx-font-family-heading", (_t_typography = t.typography) === null || _t_typography === void 0 ? void 0 : _t_typography.fontFamilyHeading);
+    set("--moonx-font-size-heading", (_t_typography1 = t.typography) === null || _t_typography1 === void 0 ? void 0 : _t_typography1.fontSizeHeading);
+    set("--moonx-font-weight-heading", (_t_typography2 = t.typography) === null || _t_typography2 === void 0 ? void 0 : _t_typography2.fontWeightHeading);
+    set("--moonx-color-heading", (_t_typography3 = t.typography) === null || _t_typography3 === void 0 ? void 0 : _t_typography3.colorHeading);
+    set("--moonx-letter-spacing-heading", (_t_typography4 = t.typography) === null || _t_typography4 === void 0 ? void 0 : _t_typography4.letterSpacingHeading);
+    set("--moonx-letter-spacing", (_t_typography5 = t.typography) === null || _t_typography5 === void 0 ? void 0 : _t_typography5.letterSpacing);
+    set("--moonx-font-size-sm", (_t_typography6 = t.typography) === null || _t_typography6 === void 0 ? void 0 : (_t_typography_fontSize = _t_typography6.fontSize) === null || _t_typography_fontSize === void 0 ? void 0 : _t_typography_fontSize.sm);
+    set("--moonx-font-size-lg", (_t_typography7 = t.typography) === null || _t_typography7 === void 0 ? void 0 : (_t_typography_fontSize1 = _t_typography7.fontSize) === null || _t_typography_fontSize1 === void 0 ? void 0 : _t_typography_fontSize1.lg);
+    set("--moonx-font-size-xl", (_t_typography8 = t.typography) === null || _t_typography8 === void 0 ? void 0 : (_t_typography_fontSize2 = _t_typography8.fontSize) === null || _t_typography_fontSize2 === void 0 ? void 0 : _t_typography_fontSize2.xl);
+    set("--moonx-font-weight-medium", (_t_typography9 = t.typography) === null || _t_typography9 === void 0 ? void 0 : (_t_typography_fontWeight = _t_typography9.fontWeight) === null || _t_typography_fontWeight === void 0 ? void 0 : _t_typography_fontWeight.medium);
+    set("--moonx-font-weight-bold", (_t_typography10 = t.typography) === null || _t_typography10 === void 0 ? void 0 : (_t_typography_fontWeight1 = _t_typography10.fontWeight) === null || _t_typography_fontWeight1 === void 0 ? void 0 : _t_typography_fontWeight1.bold);
+    set("--moonx-card-padding", (_t_card = t.card) === null || _t_card === void 0 ? void 0 : _t_card.padding);
+    set("--moonx-card-shadow", (_t_card1 = t.card) === null || _t_card1 === void 0 ? void 0 : _t_card1.shadow);
+    set("--moonx-card-border-width", (_t_card2 = t.card) === null || _t_card2 === void 0 ? void 0 : _t_card2.borderWidth);
+    set("--moonx-card-max-width", (_t_card3 = t.card) === null || _t_card3 === void 0 ? void 0 : _t_card3.maxWidth);
+    set("--moonx-backdrop-color", (_t_backdrop = t.backdrop) === null || _t_backdrop === void 0 ? void 0 : _t_backdrop.color);
+    set("--moonx-backdrop-blur", (_t_backdrop1 = t.backdrop) === null || _t_backdrop1 === void 0 ? void 0 : _t_backdrop1.blur);
+    return vars;
+}
+var COMPONENT_RADIUS_VAR = {
+    card: "--moonx-radius-card",
+    button: "--moonx-radius-button",
+    input: "--moonx-radius-input"
+};
+function appearanceToComponentVars(appearance) {
+    var vars = {};
+    var components = appearance === null || appearance === void 0 ? void 0 : appearance.components;
+    if (!components) return vars;
+    var set = function set(name, value) {
+        if (value !== void 0 && value !== null && value !== "") vars[name] = value;
+    };
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = Object.entries(components)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var _step_value = _sliced_to_array(_step.value, 2), comp = _step_value[0], style = _step_value[1];
+            if (!style) continue;
+            set("--moonx-".concat(comp, "-bg"), style.background);
+            set("--moonx-".concat(comp, "-fg"), style.text);
+            set("--moonx-".concat(comp, "-border-color"), style.border);
+            set("--moonx-".concat(comp, "-border-width"), style.borderWidth);
+            var radiusVar = COMPONENT_RADIUS_VAR[comp];
+            if (radiusVar) set(radiusVar, style.radius);
+            if (comp === "button") {
+                var shade = function shade(c) {
+                    return isColorDark(c) ? lighten(c, 0.08) : darken(c, 0.08);
+                };
+                if (style.background) {
+                    var hover = shade(style.background);
+                    if (hover !== style.background) set("--moonx-button-bg-hover", hover);
+                }
+                if (style.border) {
+                    var hover1 = shade(style.border);
+                    if (hover1 !== style.border) set("--moonx-button-border-color-hover", hover1);
+                }
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return vars;
+}
+function resolveFontUrls(appearance) {
+    if (!appearance) return [];
+    var urls = /* @__PURE__ */ new Set();
+    for(var _i = 0, _iter = [
+        appearance,
+        appearance.light,
+        appearance.dark
+    ]; _i < _iter.length; _i++){
+        var tokens = _iter[_i];
+        var _tokens_typography;
+        var fontUrl = tokens === null || tokens === void 0 ? void 0 : (_tokens_typography = tokens.typography) === null || _tokens_typography === void 0 ? void 0 : _tokens_typography.fontUrl;
+        if (!fontUrl) continue;
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = (Array.isArray(fontUrl) ? fontUrl : [
+                fontUrl
+            ])[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var url = _step.value;
+                if (url) urls.add(url);
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return Array.from(urls);
+}
+function appearanceToCssVars(appearance, isDark) {
+    var _derived_fontFamily;
+    var baseTheme = isDark ? darkTheme : lightTheme;
+    var derived = appearanceToTheme(appearance, isDark);
+    var merged = {
+        colors: _object_spread({}, baseTheme.colors, derived.colors),
+        borderRadius: _object_spread({}, baseTheme.borderRadius, derived.borderRadius),
+        fontFamily: (_derived_fontFamily = derived.fontFamily) !== null && _derived_fontFamily !== void 0 ? _derived_fontFamily : baseTheme.fontFamily
+    };
+    return _object_spread({}, themeToCSS(merged), appearanceToMoonxVars(appearance, isDark), appearanceToComponentVars(appearance));
+}
 // src/styles/sdk-stylesheet.ts
-var SDK_STYLES = '\n/* === Reset === */\n.moonkey-sdk-root * { box-sizing: border-box; }\n.moonkey-sdk-root *:focus-visible { outline: 2px solid var(--moonkey-color-accent); outline-offset: 2px; }\n.moonkey-sdk-root input::placeholder { color: var(--moonkey-color-foreground-3); opacity: 1; }\n\n/* === Animations === */\n@keyframes moonkey-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes moonkey-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n/* === Button === */\n.moonkey-sdk-root .moonkey-btn {\n  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;\n  font-weight: 500; font-size: 0.875rem; border: none; cursor: pointer;\n  user-select: none; -webkit-user-select: none; white-space: nowrap;\n  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;\n  font-family: inherit; text-decoration: none;\n}\n.moonkey-sdk-root .moonkey-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* Sizes */\n.moonkey-sdk-root .moonkey-btn--sm  { height: 2.25rem; padding: 0 0.75rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--md, .moonkey-sdk-root .moonkey-btn--default { height: 2.75rem; padding: 0 1rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--lg  { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--icon { width: 2rem; height: 2rem; padding: 0; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--full { width: 100%; justify-content: center; }\n\n/* Variants */\n.moonkey-sdk-root .moonkey-btn--primary, .moonkey-sdk-root .moonkey-btn--default {\n  background-color: var(--moonkey-color-accent); color: var(--moonkey-color-accent-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--primary:hover:not(:disabled), .moonkey-sdk-root .moonkey-btn--default:hover:not(:disabled) {\n  background-color: var(--moonkey-color-accent-dark);\n}\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--success { background-color: var(--moonkey-color-success); color: var(--moonkey-color-success-foreground); }\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--error   { background-color: var(--moonkey-color-error);   color: var(--moonkey-color-error-foreground); }\n\n.moonkey-sdk-root .moonkey-btn--outline {\n  background-color: transparent; border: 1px solid var(--moonkey-color-border); color: var(--moonkey-color-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--outline:hover:not(:disabled) { background-color: var(--moonkey-color-background-2); border-color: var(--moonkey-color-accent); }\n\n.moonkey-sdk-root .moonkey-btn--ghost  { background-color: transparent; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--ghost:hover:not(:disabled)  { background-color: var(--moonkey-color-background-2); }\n\n.moonkey-sdk-root .moonkey-btn--secondary { background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--secondary:hover:not(:disabled) { background-color: var(--moonkey-color-background-3); }\n\n.moonkey-sdk-root .moonkey-btn--destructive { background-color: var(--moonkey-color-error); color: var(--moonkey-color-error-foreground); }\n.moonkey-sdk-root .moonkey-btn--destructive:hover:not(:disabled) { opacity: 0.9; }\n\n.moonkey-sdk-root .moonkey-btn--link { background: transparent; color: var(--moonkey-color-accent); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }\n\n/* === Input === */\n.moonkey-sdk-root .moonkey-input {\n  display: flex; width: 100%; height: 2.75rem; padding: 0 0.75rem;\n  font-size: 0.875rem; font-family: inherit; color: var(--moonkey-color-foreground);\n  background-color: var(--moonkey-color-background); border: 1px solid var(--moonkey-color-border);\n  border-radius: var(--moonkey-border-radius-md); outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;\n}\n.moonkey-sdk-root .moonkey-input:focus { border-color: var(--moonkey-color-accent); box-shadow: 0 0 0 1px var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-input:disabled { opacity: 0.5; cursor: not-allowed; }\n.moonkey-sdk-root .moonkey-input--error { border-color: var(--moonkey-color-error); }\n\n/* === Label === */\n.moonkey-sdk-root .moonkey-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); line-height: 1; }\n.moonkey-sdk-root .moonkey-label--secondary { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-label--tertiary  { color: var(--moonkey-color-foreground-4); font-size: 0.75rem; }\n.moonkey-sdk-root .moonkey-label--error     { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-label--success   { color: var(--moonkey-color-success); }\n\n/* === Detail Row === */\n.moonkey-sdk-root .moonkey-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }\n.moonkey-sdk-root .moonkey-detail-row__label { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-detail-row__value { font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); text-align: right; }\n\n/* === Divider === */\n.moonkey-sdk-root .moonkey-divider { border-top: 1px solid var(--moonkey-color-border); margin: 1rem 0; }\n\n/* === Boxes === */\n.moonkey-sdk-root .moonkey-box { padding: 0.75rem; border-radius: var(--moonkey-border-radius-lg); }\n.moonkey-sdk-root .moonkey-box--surface  { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-box--error    { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-box--success  { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-box--info     { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-box--warning  { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); display: flex; align-items: flex-start; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-box--scrollable { overflow-y: auto; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }\n\n/* === Address Pill === */\n.moonkey-sdk-root .moonkey-address-pill {\n  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem;\n  background-color: var(--moonkey-color-background-3); color: var(--moonkey-color-foreground);\n  border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md);\n  font-size: 0.875rem; font-family: monospace; cursor: pointer;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-address-pill:hover { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-address-pill--copied { border-color: var(--moonkey-color-success); }\n\n/* === Mono Text === */\n.moonkey-sdk-root .moonkey-mono { font-family: monospace; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Spinner === */\n.moonkey-sdk-root .moonkey-spinner {\n  display: inline-block; flex-shrink: 0;\n  border: 2px solid currentColor; border-top-color: transparent;\n  border-radius: 9999px; animation: moonkey-spin 1s linear infinite;\n}\n.moonkey-sdk-root .moonkey-spinner--sm { width: 0.875rem; height: 0.875rem; }\n.moonkey-sdk-root .moonkey-spinner--md { width: 1rem; height: 1rem; }\n.moonkey-sdk-root .moonkey-spinner--lg { width: 1.5rem; height: 1.5rem; }\n.moonkey-sdk-root .moonkey-spinner--xl { width: 2rem; height: 2rem; }\n\n/* === Pulse skeleton === */\n.moonkey-sdk-root .moonkey-skeleton { background-color: var(--moonkey-color-background-2); border-radius: 0.25rem; animation: moonkey-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }\n\n/* === Flow layout === */\n.moonkey-sdk-root .moonkey-flow-close { position: absolute; top: 1rem; right: 1.5rem; display: flex; align-items: center; flex-shrink: 0; z-index: 1; }\n.moonkey-sdk-root .moonkey-flow-header { display: flex; flex-direction: column; text-align: center; padding: 0 0.5rem 0.25rem; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-content { display: flex; flex-direction: column; flex: 1; margin-top: 1rem; padding: 0 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-footer {\n  position: absolute; bottom: 0; left: 0; right: 0;\n  background-color: var(--moonkey-color-background); padding: 1rem 2rem 3rem;\n  margin: 0 0.125rem 0.125rem;\n  border-bottom-left-radius: var(--moonkey-border-radius-lg);\n  border-bottom-right-radius: var(--moonkey-border-radius-lg);\n}\n.moonkey-sdk-root .moonkey-flow-footer__actions { display: flex; gap: 0.75rem; }\n/* Buttons inside footer actions auto-stretch to fill space */\n.moonkey-sdk-root .moonkey-flow-footer__actions > .moonkey-btn { flex: 1; height: 3rem; font-size: 1rem; }\n\n/* === Flow text utilities === */\n.moonkey-sdk-root .moonkey-text--heading { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-text--title { font-size: 1rem; font-weight: 600; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-text--secondary { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-text--error { font-size: 0.875rem; color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-text--success { font-size: 0.875rem; color: var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-flow-logo { display: flex; align-items: center; justify-content: center; }\n\n/* === Terms link row (accept-terms) === */\n.moonkey-sdk-root .moonkey-terms-link {\n  display: flex; flex-direction: row; align-items: center; justify-content: space-between;\n  border-radius: var(--moonkey-border-radius-lg); padding: 0.75rem;\n  margin-left: 0.75rem; margin-right: 0.75rem;\n  border: 1px solid var(--moonkey-color-border); cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.moonkey-sdk-root .moonkey-terms-link:hover { background-color: var(--moonkey-color-background-2); }\n\n/* === Wallet item === */\n.moonkey-sdk-root .moonkey-wallet-item {\n  display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem;\n  border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg);\n  background-color: var(--moonkey-color-background); cursor: pointer;\n  transition: border-color 0.2s, background-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-wallet-item:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-wallet-item--selected { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n\n/* === Flow overlay (z-index stack wrapper) === */\n.moonkey-sdk-root .moonkey-flow-overlay { position: relative; z-index: 100; }\n\n/* === Wallet connection state container === */\n.moonkey-sdk-root .moonkey-connect-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 3rem; padding-bottom: 3rem; }\n\n/* === Large wallet icon spinner === */\n.moonkey-sdk-root .moonkey-wallet-spinner { position: relative; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring--error { border-color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-wallet-spinner__spin { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--moonkey-color-accent); animation: moonkey-spin 1s linear infinite; }\n.moonkey-sdk-root .moonkey-wallet-spinner__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }\n\n/* === Data preview box (sign typed-data / transactions) === */\n.moonkey-sdk-root .moonkey-data-preview { margin-top: 0.25rem; padding: 0.75rem; background-color: var(--moonkey-color-background-2); border-radius: var(--moonkey-border-radius-md); font-size: 0.875rem; font-family: monospace; word-break: break-all; white-space: pre-line; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable data container (signing flows) === */\n.moonkey-sdk-root .moonkey-data-scroll { display: flex; flex-direction: column; max-height: 390px; overflow-y: auto; padding-bottom: 5rem; position: relative; }\n\n/* === Expand/collapse trigger === */\n.moonkey-sdk-root .moonkey-expand-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable bordered list (transaction detail panels) === */\n.moonkey-sdk-root .moonkey-scrollable-list { display: flex; flex-direction: column; overflow-y: auto; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); scrollbar-width: none; }\n.moonkey-sdk-root .moonkey-scrollable-list::-webkit-scrollbar { display: none; }\n\n/* === Modal content column (passkey-enroll, add-passkey) === */\n.moonkey-sdk-root .moonkey-modal-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem 1.5rem; gap: 1rem; }\n\n/* === Back nav button (absolute top-left) === */\n.moonkey-sdk-root .moonkey-back-btn { position: absolute; top: 1rem; left: 0.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--moonkey-border-radius-full); }\n\n/* === Centered inline row (resend, action links) === */\n.moonkey-sdk-root .moonkey-center-row { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }\n\n/* === Stacked button column (modal CTAs) === */\n.moonkey-sdk-root .moonkey-btn-stack { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding-top: 0.5rem; }\n\n/* === Legal footer text (terms & privacy) === */\n.moonkey-sdk-root .moonkey-legal-text { font-size: 0.75rem; color: var(--moonkey-color-foreground-3); text-align: center; line-height: 1.5; margin-top: 1rem; }\n.moonkey-sdk-root .moonkey-legal-text a { color: var(--moonkey-color-accent); cursor: pointer; }\n/* Inline-checkbox variant: same typography, but flex layout aligned left so the checkbox sits beside the link text. */\n.moonkey-sdk-root .moonkey-legal-checkbox { display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-legal-checkbox input[type="checkbox"] { margin-top: 0.15rem; cursor: pointer; }\n\n/* === Login gating (require_users_accept_terms) === */\n/* Wraps the email/social/wallet buttons so they can be visually disabled until the terms checkbox is ticked. The default state is unaffected. */\n.moonkey-sdk-root .moonkey-login-gateable { transition: opacity 0.15s ease-out; }\n.moonkey-sdk-root .moonkey-login-gated { opacity: 0.5; pointer-events: none; }\n\n/* === Shared entry animations === */\n@keyframes moonkey-slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }\n@keyframes moonkey-success-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }\n@keyframes moonkey-mail-slide-in { from { opacity: 0; transform: translateX(-50px) rotate(-15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }\n@keyframes moonkey-verified-slide-in { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }\n\n/* === Icon size utilities === */\n.moonkey-sdk-root .moonkey-icon--xs  { width: 0.75rem; height: 0.75rem; }\n.moonkey-sdk-root .moonkey-icon--sm  { width: 1rem;    height: 1rem;    }\n.moonkey-sdk-root .moonkey-icon--md  { width: 1.5rem;  height: 1.5rem;  }\n.moonkey-sdk-root .moonkey-icon--lg  { width: 2rem;    height: 2rem;    }\n.moonkey-sdk-root .moonkey-icon--xl  { width: 2.5rem;  height: 2.5rem;  }\n.moonkey-sdk-root .moonkey-icon--2xl { width: 3rem;    height: 3rem;    }\n.moonkey-sdk-root .moonkey-icon--mr-xs { margin-right: 0.25rem; }\n.moonkey-sdk-root .moonkey-icon--mr-sm { margin-right: 0.5rem; }\n.moonkey-sdk-root .moonkey-icon--accent  { color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-icon--success { color: var(--moonkey-color-success, #16a34a); }\n.moonkey-sdk-root .moonkey-icon--error   { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-icon--muted   { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-icon--fg      { color: var(--moonkey-color-foreground); }\n\n/* === Layout utilities === */\n.moonkey-sdk-root .moonkey-flex-center     { display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-flex-between    { display: flex; align-items: center; justify-content: space-between; }\n.moonkey-sdk-root .moonkey-flex-col        { display: flex; flex-direction: column; }\n.moonkey-sdk-root .moonkey-flex-col-center { display: flex; flex-direction: column; align-items: center; }\n\n/* === Text modifiers === */\n.moonkey-sdk-root .moonkey-text--semibold { font-weight: 500; }\n.moonkey-sdk-root .moonkey-text--bold     { font-weight: 600; }\n.moonkey-sdk-root .moonkey-text--center   { text-align: center; }\n.moonkey-sdk-root .moonkey-text--sm       { font-size: 0.875rem; }\n.moonkey-sdk-root .moonkey-text--lg       { font-size: 1.125rem; }\n.moonkey-sdk-root .moonkey-text--xl       { font-size: 1.25rem; }\n\n/* === Transaction detail card (success receipt) === */\n.moonkey-sdk-root .moonkey-detail-card { display: flex; flex-direction: column; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 2rem 0.5rem 0; }\n.moonkey-sdk-root .moonkey-detail-card__rows { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }\n\n/* === Failed-transaction error scroll box === */\n.moonkey-sdk-root .moonkey-error-scroll { display: flex; flex-direction: column; background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 0.5rem; height: 150px; overflow: auto; }\n\n/* === Network logo badge (ethereum/solana pair) === */\n.moonkey-sdk-root .moonkey-network-badge { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--moonkey-color-border); background-color: var(--moonkey-color-background-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.moonkey-sdk-root .moonkey-network-badge--overlap { margin-left: -8px; }\n\n/* === Positioned icons inside inputs === */\n.moonkey-sdk-root .moonkey-search-icon { position: absolute; left: 0.75rem; top: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-input-icon--left { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--moonkey-color-foreground-3); pointer-events: none; }\n\n/* === Step indicator (N of M) === */\n.moonkey-sdk-root .moonkey-step-label { font-size: 0.75rem; font-weight: 600; color: var(--moonkey-color-accent); letter-spacing: 0.05em; text-transform: uppercase; }\n\n/* === Feature bullet item (passkey enroll) === */\n.moonkey-sdk-root .moonkey-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Monospace textarea (import wallet) === */\n.moonkey-sdk-root .moonkey-mono-textarea { width: 100%; min-height: 100px; padding: 0.75rem; font-family: monospace; font-size: 0.75rem; background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); outline: none; resize: vertical; }\n\n/* === Sign-flow inner section and row === */\n.moonkey-sdk-root .moonkey-sign-section { padding: 0.5rem; }\n.moonkey-sdk-root .moonkey-sign-row { display: flex; align-items: center; justify-content: space-between; }\n\n/* === External wallet connect button (login flow) === */\n.moonkey-sdk-root .moonkey-external-wallet-btn { border-radius: var(--moonkey-border-radius-lg); border: 1px solid var(--moonkey-color-border); padding: 0.75rem 0.25rem; cursor: pointer; margin-top: 0.75rem; transition: all 0.2s ease-in-out; background-color: transparent; }\n.moonkey-sdk-root .moonkey-external-wallet-btn:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-external-wallet-btn--accent-hover:hover { background-color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-external-wallet-btn__inner { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; animation: moonkey-slide-in 0.3s ease-out 0.1s both; }\n\n/* === Flex row utility (icon + label pairs) === */\n.moonkey-sdk-root .moonkey-flex-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }\n\n/* === Login landing layout === */\n.moonkey-sdk-root .moonkey-header { position: absolute; top: 1.5rem; left: 0; right: 0; text-align: center; font-size: 0.875rem; color: var(--moonkey-color-foreground); margin-bottom: 0.5rem; padding-left: 3rem; padding-right: 3rem; }\n.moonkey-sdk-root .moonkey-header__inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-content-wrapper { padding-top: 1rem; padding-bottom: 1rem; width: 100%; }\n.moonkey-sdk-root .moonkey-logo-section { text-align: center; margin-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-logo-section__inner { padding-top: 1rem; padding-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-description { padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; color: var(--moonkey-color-foreground-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-form-section { padding: 0.5rem 1rem; }\n\n/* === Email OTP content fill === */\n.moonkey-sdk-root .moonkey-otp-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }\n\n/* === Wallet icon status overlay badge === */\n.moonkey-sdk-root .moonkey-wallet-status-badge { position: absolute; bottom: -4px; right: -4px; background-color: var(--moonkey-color-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n/* === Wallet connect success animation === */\n@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n';
+var SDK_STYLES = '\n/* === Reset === */\n.moonkey-sdk-root * { box-sizing: border-box; }\n.moonkey-sdk-root *:focus-visible { outline: 2px solid var(--moonx-color-ring, var(--moonkey-color-accent)); outline-offset: 2px; }\n.moonkey-sdk-root input::placeholder { color: var(--moonkey-color-foreground-3); opacity: 1; }\n\n/* === Animations === */\n@keyframes moonkey-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes moonkey-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n/* === Button === */\n.moonkey-sdk-root .moonkey-btn {\n  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;\n  font-weight: var(--moonx-font-weight-medium, 500); font-size: 0.875rem; border: none; cursor: pointer;\n  user-select: none; -webkit-user-select: none; white-space: nowrap;\n  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;\n  font-family: inherit; text-decoration: none;\n}\n.moonkey-sdk-root .moonkey-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* Sizes */\n.moonkey-sdk-root .moonkey-btn--sm  { height: 2.25rem; padding: 0 0.75rem; border-radius: var(--moonx-radius-button, var(--moonkey-border-radius-md)); }\n.moonkey-sdk-root .moonkey-btn--md, .moonkey-sdk-root .moonkey-btn--default { height: 2.75rem; padding: 0 1rem; border-radius: var(--moonx-radius-button, var(--moonkey-border-radius-md)); }\n.moonkey-sdk-root .moonkey-btn--lg  { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: var(--moonx-radius-button, var(--moonkey-border-radius-md)); }\n.moonkey-sdk-root .moonkey-btn--icon { width: 2rem; height: 2rem; padding: 0; border-radius: var(--moonx-radius-button, var(--moonkey-border-radius-md)); }\n.moonkey-sdk-root .moonkey-btn--full { width: 100%; justify-content: center; }\n\n/* Variants */\n.moonkey-sdk-root .moonkey-btn--primary, .moonkey-sdk-root .moonkey-btn--default {\n  background-color: var(--moonx-button-bg, var(--moonkey-color-accent)); color: var(--moonx-button-fg, var(--moonkey-color-accent-foreground));\n  border: var(--moonx-button-border-width, 0px) solid var(--moonx-button-border-color, transparent);\n}\n.moonkey-sdk-root .moonkey-btn--primary:hover:not(:disabled), .moonkey-sdk-root .moonkey-btn--default:hover:not(:disabled) {\n  background-color: var(--moonkey-color-accent-dark);\n}\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--success { background-color: var(--moonkey-color-success); color: var(--moonkey-color-success-foreground); }\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--error   { background-color: var(--moonkey-color-error);   color: var(--moonkey-color-error-foreground); }\n\n.moonkey-sdk-root .moonkey-btn--outline {\n  background-color: transparent; border: 1px solid var(--moonkey-color-border); color: var(--moonkey-color-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--outline:hover:not(:disabled) { background-color: var(--moonkey-color-background-2); border-color: var(--moonkey-color-accent); }\n\n.moonkey-sdk-root .moonkey-btn--ghost  { background-color: transparent; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--ghost:hover:not(:disabled)  { background-color: var(--moonkey-color-background-2); }\n\n.moonkey-sdk-root .moonkey-btn--secondary { background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--secondary:hover:not(:disabled) { background-color: var(--moonkey-color-background-3); }\n\n.moonkey-sdk-root .moonkey-btn--destructive { background-color: var(--moonkey-color-error); color: var(--moonkey-color-error-foreground); }\n.moonkey-sdk-root .moonkey-btn--destructive:hover:not(:disabled) { opacity: 0.9; }\n\n.moonkey-sdk-root .moonkey-btn--link { background: transparent; color: var(--moonx-color-link, var(--moonkey-color-accent)); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }\n\n/* === Input === */\n.moonkey-sdk-root .moonkey-input {\n  display: flex; width: 100%; height: 2.75rem; padding: 0 0.75rem;\n  font-size: 0.875rem; font-family: inherit; color: var(--moonx-input-fg, var(--moonkey-color-foreground));\n  background-color: var(--moonx-input-bg, transparent); border: var(--moonx-input-border-width, 1px) solid var(--moonx-input-border-color, var(--moonkey-color-border));\n  border-radius: var(--moonx-radius-input, var(--moonkey-border-radius-md)); outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;\n}\n.moonkey-sdk-root .moonkey-input:focus { border-color: var(--moonx-color-ring, var(--moonkey-color-accent)); box-shadow: 0 0 0 1px var(--moonx-color-ring, var(--moonkey-color-accent)); }\n.moonkey-sdk-root .moonkey-input:disabled { opacity: 0.5; cursor: not-allowed; }\n.moonkey-sdk-root .moonkey-input--error { border-color: var(--moonkey-color-error); }\n\n/* === Label === */\n.moonkey-sdk-root .moonkey-label { display: block; font-size: 0.875rem; font-weight: var(--moonx-font-weight-medium, 500); color: var(--moonkey-color-foreground); line-height: 1; }\n.moonkey-sdk-root .moonkey-label--secondary { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-label--tertiary  { color: var(--moonkey-color-foreground-4); font-size: 0.75rem; }\n.moonkey-sdk-root .moonkey-label--error     { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-label--success   { color: var(--moonkey-color-success); }\n\n/* === Detail Row === */\n.moonkey-sdk-root .moonkey-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }\n.moonkey-sdk-root .moonkey-detail-row__label { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-detail-row__value { font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); text-align: right; }\n\n/* === Divider === */\n.moonkey-sdk-root .moonkey-divider { border-top: 1px solid var(--moonkey-color-border); margin: 1rem 0; }\n\n/* === Boxes === */\n.moonkey-sdk-root .moonkey-box { padding: 0.75rem; border-radius: var(--moonkey-border-radius-lg); }\n.moonkey-sdk-root .moonkey-box--surface  { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-box--error    { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-box--success  { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-box--info     { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonx-color-info, var(--moonkey-color-border)); }\n.moonkey-sdk-root .moonkey-box--warning  { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonx-color-warning, var(--moonkey-color-error)); display: flex; align-items: flex-start; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-box--scrollable { overflow-y: auto; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }\n\n/* === Address Pill === */\n.moonkey-sdk-root .moonkey-address-pill {\n  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem;\n  background-color: var(--moonkey-color-background-3); color: var(--moonkey-color-foreground);\n  border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md);\n  font-size: 0.875rem; font-family: monospace; cursor: pointer;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-address-pill:hover { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-address-pill--copied { border-color: var(--moonkey-color-success); }\n\n/* === Mono Text === */\n.moonkey-sdk-root .moonkey-mono { font-family: monospace; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Spinner === */\n.moonkey-sdk-root .moonkey-spinner {\n  display: inline-block; flex-shrink: 0;\n  border: 2px solid currentColor; border-top-color: transparent;\n  border-radius: 9999px; animation: moonkey-spin 1s linear infinite;\n}\n.moonkey-sdk-root .moonkey-spinner--sm { width: 0.875rem; height: 0.875rem; }\n.moonkey-sdk-root .moonkey-spinner--md { width: 1rem; height: 1rem; }\n.moonkey-sdk-root .moonkey-spinner--lg { width: 1.5rem; height: 1.5rem; }\n.moonkey-sdk-root .moonkey-spinner--xl { width: 2rem; height: 2rem; }\n\n/* === Pulse skeleton === */\n.moonkey-sdk-root .moonkey-skeleton { background-color: var(--moonkey-color-background-2); border-radius: 0.25rem; animation: moonkey-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }\n\n/* === Flow layout === */\n.moonkey-sdk-root .moonkey-flow-close { position: absolute; top: 1rem; right: 1.5rem; display: flex; align-items: center; flex-shrink: 0; z-index: 1; }\n.moonkey-sdk-root .moonkey-flow-header { display: flex; flex-direction: column; text-align: center; padding: 0 0.5rem 0.25rem; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-content { display: flex; flex-direction: column; flex: 1; margin-top: 1rem; padding: 0 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-footer {\n  position: absolute; bottom: 0; left: 0; right: 0;\n  background-color: var(--moonkey-color-background); padding: 1rem 2rem 3rem;\n  margin: 0 0.125rem 0.125rem;\n  border-bottom-left-radius: var(--moonkey-border-radius-lg);\n  border-bottom-right-radius: var(--moonkey-border-radius-lg);\n}\n.moonkey-sdk-root .moonkey-flow-footer__actions { display: flex; gap: 0.75rem; }\n/* Buttons inside footer actions auto-stretch to fill space */\n.moonkey-sdk-root .moonkey-flow-footer__actions > .moonkey-btn { flex: 1; height: 3rem; font-size: 1rem; }\n\n/* === Flow text utilities === */\n.moonkey-sdk-root .moonkey-text--heading { font-weight: var(--moonx-font-weight-heading, var(--moonx-font-weight-medium, 500)); font-family: var(--moonx-font-family-heading, inherit); letter-spacing: var(--moonx-letter-spacing-heading, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--moonx-color-heading, var(--moonkey-color-foreground)); }\n.moonkey-sdk-root .moonkey-text--title { font-size: var(--moonx-font-size-heading, var(--moonx-font-size-lg, 1rem)); font-weight: var(--moonx-font-weight-heading, var(--moonx-font-weight-bold, 600)); font-family: var(--moonx-font-family-heading, inherit); letter-spacing: var(--moonx-letter-spacing-heading, inherit); color: var(--moonx-color-heading, var(--moonkey-color-foreground)); }\n.moonkey-sdk-root .moonkey-text--secondary { font-size: var(--moonx-font-size-sm, 0.875rem); color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-text--error { font-size: 0.875rem; color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-text--success { font-size: 0.875rem; color: var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-flow-logo { display: flex; align-items: center; justify-content: center; }\n\n/* === Terms link row (accept-terms) === */\n.moonkey-sdk-root .moonkey-terms-link {\n  display: flex; flex-direction: row; align-items: center; justify-content: space-between;\n  border-radius: var(--moonkey-border-radius-lg); padding: 0.75rem;\n  margin-left: 0.75rem; margin-right: 0.75rem;\n  border: 1px solid var(--moonkey-color-border); cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.moonkey-sdk-root .moonkey-terms-link:hover { background-color: var(--moonkey-color-background-2); }\n\n/* === Wallet item === */\n.moonkey-sdk-root .moonkey-wallet-item {\n  display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem;\n  border: 1px solid var(--moonkey-color-border); border-radius: var(--moonx-radius-button, var(--moonkey-border-radius-lg));\n  background-color: var(--moonkey-color-background); cursor: pointer;\n  transition: border-color 0.2s, background-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-wallet-item:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-wallet-item--selected { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n\n/* === Flow overlay (z-index stack wrapper) === */\n.moonkey-sdk-root .moonkey-flow-overlay { position: relative; z-index: 100; }\n\n/* === Wallet connection state container === */\n.moonkey-sdk-root .moonkey-connect-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 3rem; padding-bottom: 3rem; }\n\n/* === Large wallet icon spinner === */\n.moonkey-sdk-root .moonkey-wallet-spinner { position: relative; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring--error { border-color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-wallet-spinner__spin { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--moonkey-color-accent); animation: moonkey-spin 1s linear infinite; }\n.moonkey-sdk-root .moonkey-wallet-spinner__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }\n\n/* === Data preview box (sign typed-data / transactions) === */\n.moonkey-sdk-root .moonkey-data-preview { margin-top: 0.25rem; padding: 0.75rem; background-color: var(--moonkey-color-background-2); border-radius: var(--moonkey-border-radius-md); font-size: 0.875rem; font-family: monospace; word-break: break-all; white-space: pre-line; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable data container (signing flows) === */\n.moonkey-sdk-root .moonkey-data-scroll { display: flex; flex-direction: column; max-height: 390px; overflow-y: auto; padding-bottom: 5rem; position: relative; }\n\n/* === Expand/collapse trigger === */\n.moonkey-sdk-root .moonkey-expand-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable bordered list (transaction detail panels) === */\n.moonkey-sdk-root .moonkey-scrollable-list { display: flex; flex-direction: column; overflow-y: auto; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); scrollbar-width: none; }\n.moonkey-sdk-root .moonkey-scrollable-list::-webkit-scrollbar { display: none; }\n\n/* === Modal content column (passkey-enroll, add-passkey) === */\n.moonkey-sdk-root .moonkey-modal-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem 1.5rem; gap: 1rem; }\n\n/* === Back nav button (absolute top-left) === */\n.moonkey-sdk-root .moonkey-back-btn { position: absolute; top: 1rem; left: 0.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--moonkey-border-radius-full); }\n\n/* === Centered inline row (resend, action links) === */\n.moonkey-sdk-root .moonkey-center-row { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }\n\n/* === Stacked button column (modal CTAs) === */\n.moonkey-sdk-root .moonkey-btn-stack { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding-top: 0.5rem; }\n\n/* === Legal footer text (terms & privacy) === */\n.moonkey-sdk-root .moonkey-legal-text { font-size: 0.75rem; color: var(--moonkey-color-foreground-3); text-align: center; line-height: 1.5; margin-top: 1rem; }\n.moonkey-sdk-root .moonkey-legal-text a { color: var(--moonx-color-link, var(--moonkey-color-accent)); cursor: pointer; }\n/* Inline-checkbox variant: same typography, but flex layout aligned left so the checkbox sits beside the link text. */\n.moonkey-sdk-root .moonkey-legal-checkbox { display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-legal-checkbox input[type="checkbox"] { margin-top: 0.15rem; cursor: pointer; }\n\n/* === Login gating (require_users_accept_terms) === */\n/* Wraps the email/social/wallet buttons so they can be visually disabled until the terms checkbox is ticked. The default state is unaffected. */\n.moonkey-sdk-root .moonkey-login-gateable { transition: opacity 0.15s ease-out; }\n.moonkey-sdk-root .moonkey-login-gated { opacity: 0.5; pointer-events: none; }\n\n/* === Shared entry animations === */\n@keyframes moonkey-slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }\n@keyframes moonkey-success-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }\n@keyframes moonkey-mail-slide-in { from { opacity: 0; transform: translateX(-50px) rotate(-15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }\n@keyframes moonkey-verified-slide-in { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }\n\n/* === Icon size utilities === */\n.moonkey-sdk-root .moonkey-icon--xs  { width: 0.75rem; height: 0.75rem; }\n.moonkey-sdk-root .moonkey-icon--sm  { width: 1rem;    height: 1rem;    }\n.moonkey-sdk-root .moonkey-icon--md  { width: 1.5rem;  height: 1.5rem;  }\n.moonkey-sdk-root .moonkey-icon--lg  { width: 2rem;    height: 2rem;    }\n.moonkey-sdk-root .moonkey-icon--xl  { width: 2.5rem;  height: 2.5rem;  }\n.moonkey-sdk-root .moonkey-icon--2xl { width: 3rem;    height: 3rem;    }\n.moonkey-sdk-root .moonkey-icon--mr-xs { margin-right: 0.25rem; }\n.moonkey-sdk-root .moonkey-icon--mr-sm { margin-right: 0.5rem; }\n.moonkey-sdk-root .moonkey-icon--accent  { color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-icon--success { color: var(--moonkey-color-success, #16a34a); }\n.moonkey-sdk-root .moonkey-icon--error   { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-icon--muted   { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-icon--fg      { color: var(--moonkey-color-foreground); }\n\n/* === Layout utilities === */\n.moonkey-sdk-root .moonkey-flex-center     { display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-flex-between    { display: flex; align-items: center; justify-content: space-between; }\n.moonkey-sdk-root .moonkey-flex-col        { display: flex; flex-direction: column; }\n.moonkey-sdk-root .moonkey-flex-col-center { display: flex; flex-direction: column; align-items: center; }\n\n/* === Text modifiers === */\n.moonkey-sdk-root .moonkey-text--semibold { font-weight: var(--moonx-font-weight-medium, 500); }\n.moonkey-sdk-root .moonkey-text--bold     { font-weight: var(--moonx-font-weight-bold, 600); }\n.moonkey-sdk-root .moonkey-text--center   { text-align: center; }\n.moonkey-sdk-root .moonkey-text--sm       { font-size: var(--moonx-font-size-sm, 0.875rem); }\n.moonkey-sdk-root .moonkey-text--lg       { font-size: var(--moonx-font-size-lg, 1.125rem); }\n.moonkey-sdk-root .moonkey-text--xl       { font-size: var(--moonx-font-size-xl, 1.25rem); }\n\n/* === Transaction detail card (success receipt) === */\n.moonkey-sdk-root .moonkey-detail-card { display: flex; flex-direction: column; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 2rem 0.5rem 0; }\n.moonkey-sdk-root .moonkey-detail-card__rows { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }\n\n/* === Failed-transaction error scroll box === */\n.moonkey-sdk-root .moonkey-error-scroll { display: flex; flex-direction: column; background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 0.5rem; height: 150px; overflow: auto; }\n\n/* === Network logo badge (ethereum/solana pair) === */\n.moonkey-sdk-root .moonkey-network-badge { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--moonkey-color-border); background-color: var(--moonkey-color-background-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.moonkey-sdk-root .moonkey-network-badge--overlap { margin-left: -8px; }\n\n/* === Positioned icons inside inputs === */\n.moonkey-sdk-root .moonkey-search-icon { position: absolute; left: 0.75rem; top: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-input-icon--left { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--moonkey-color-foreground-3); pointer-events: none; }\n\n/* === Step indicator (N of M) === */\n.moonkey-sdk-root .moonkey-step-label { font-size: 0.75rem; font-weight: 600; color: var(--moonkey-color-accent); letter-spacing: 0.05em; text-transform: uppercase; }\n\n/* === Feature bullet item (passkey enroll) === */\n.moonkey-sdk-root .moonkey-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Monospace textarea (import wallet) === */\n.moonkey-sdk-root .moonkey-mono-textarea { width: 100%; min-height: 100px; padding: 0.75rem; font-family: monospace; font-size: 0.75rem; background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonx-radius-input, var(--moonkey-border-radius-md)); outline: none; resize: vertical; }\n\n/* === Sign-flow inner section and row === */\n.moonkey-sdk-root .moonkey-sign-section { padding: 0.5rem; }\n.moonkey-sdk-root .moonkey-sign-row { display: flex; align-items: center; justify-content: space-between; }\n\n/* === External wallet connect button (login flow) === */\n.moonkey-sdk-root .moonkey-external-wallet-btn { border-radius: var(--moonx-radius-button, var(--moonkey-border-radius-lg)); border: var(--moonx-button-border-width, 1px) solid var(--moonx-button-border-color, var(--moonkey-color-border)); color: var(--moonx-button-fg, var(--moonkey-color-foreground)); padding: 0.75rem 0.25rem; cursor: pointer; margin-top: 0.75rem; transition: all 0.2s ease-in-out; background-color: var(--moonx-button-bg, transparent); }\n.moonkey-sdk-root .moonkey-external-wallet-btn:hover { border-color: var(--moonx-button-border-color-hover, var(--moonkey-color-accent)); background-color: var(--moonx-button-bg-hover, var(--moonkey-color-background-2)); }\n.moonkey-sdk-root .moonkey-external-wallet-btn--accent-hover:hover { background-color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-external-wallet-btn__inner { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; animation: moonkey-slide-in 0.3s ease-out 0.1s both; }\n\n/* === Flex row utility (icon + label pairs) === */\n.moonkey-sdk-root .moonkey-flex-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }\n\n/* === Login landing layout === */\n.moonkey-sdk-root .moonkey-header { position: absolute; top: 1.5rem; left: 0; right: 0; text-align: center; font-family: var(--moonx-font-family-heading, inherit); font-size: var(--moonx-font-size-heading, 0.875rem); font-weight: var(--moonx-font-weight-heading, 500); letter-spacing: var(--moonx-letter-spacing-heading, inherit); color: var(--moonx-color-heading, var(--moonkey-color-foreground)); margin-bottom: 0.5rem; padding-left: 3rem; padding-right: 3rem; }\n.moonkey-sdk-root .moonkey-header__inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-content-wrapper { padding-top: 1rem; padding-bottom: 1rem; width: 100%; }\n.moonkey-sdk-root .moonkey-logo-section { text-align: center; margin-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-logo-section__inner { padding-top: 1rem; padding-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-description { padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; color: var(--moonkey-color-foreground-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-form-section { padding: 0.5rem 1rem; }\n\n/* === Email OTP content fill === */\n.moonkey-sdk-root .moonkey-otp-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }\n\n/* === Wallet icon status overlay badge === */\n.moonkey-sdk-root .moonkey-wallet-status-badge { position: absolute; bottom: -4px; right: -4px; background-color: var(--moonkey-color-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n/* === Wallet connect success animation === */\n@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n';
 // src/components/scoped-container.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function ScopedContainer(param) {
     var children = param.children, _param_isDark = param.isDark, isDark = _param_isDark === void 0 ? false : _param_isDark, customTheme = param.theme, appearance = param.appearance, className = param.className;
-    var _ref, _ref1;
+    var _ref, _ref1, _ref2, _ref3;
     var baseTheme = isDark ? darkTheme : lightTheme;
-    var appearanceDerived = appearanceToTheme(appearance);
+    var appearanceDerived = appearanceToTheme(appearance, isDark);
+    var moonxVars = (_ref = customTheme === null || customTheme === void 0 ? void 0 : customTheme.moonxVars) !== null && _ref !== void 0 ? _ref : {};
+    var fontUrls = (_ref1 = customTheme === null || customTheme === void 0 ? void 0 : customTheme.fontUrls) !== null && _ref1 !== void 0 ? _ref1 : [];
     var mergedTheme = {
         colors: _object_spread({}, baseTheme.colors, appearanceDerived.colors, customTheme === null || customTheme === void 0 ? void 0 : customTheme.colors),
         borderRadius: _object_spread({}, baseTheme.borderRadius, appearanceDerived.borderRadius, customTheme === null || customTheme === void 0 ? void 0 : customTheme.borderRadius),
-        fontFamily: (_ref = (_ref1 = customTheme === null || customTheme === void 0 ? void 0 : customTheme.fontFamily) !== null && _ref1 !== void 0 ? _ref1 : appearanceDerived.fontFamily) !== null && _ref !== void 0 ? _ref : baseTheme.fontFamily
+        fontFamily: (_ref2 = (_ref3 = customTheme === null || customTheme === void 0 ? void 0 : customTheme.fontFamily) !== null && _ref3 !== void 0 ? _ref3 : appearanceDerived.fontFamily) !== null && _ref2 !== void 0 ? _ref2 : baseTheme.fontFamily
     };
-    var containerStyles = _object_spread_props(_object_spread({}, themeToCSS(mergedTheme)), {
+    var containerStyles = _object_spread_props(_object_spread({}, themeToCSS(mergedTheme), moonxVars), {
         isolation: "isolate",
         contain: "layout style",
         boxSizing: "border-box",
         WebkitFontSmoothing: "antialiased",
         MozOsxFontSmoothing: "grayscale",
         fontFamily: "var(--moonkey-font-family)",
+        letterSpacing: "var(--moonx-letter-spacing, normal)",
         color: mergedTheme.colors.foreground
     });
     return /* @__PURE__ */ jsxs2("div", {
@@ -3311,6 +3557,12 @@ function ScopedContainer(param) {
         style: containerStyles,
         "data-theme": isDark ? "dark" : "light",
         children: [
+            fontUrls.map(function(href) {
+                return /* @__PURE__ */ jsx5("link", {
+                    rel: "stylesheet",
+                    href: href
+                }, href);
+            }),
             /* @__PURE__ */ jsx5("style", {
                 dangerouslySetInnerHTML: {
                     __html: SDK_STYLES
@@ -3322,24 +3574,27 @@ function ScopedContainer(param) {
 }
 // src/components/vanilla-ui/root-card.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var MODAL_PORTAL_Z_INDEX = 2147483646;
 function RootCard(param) {
     var children = param.children, _param_centerContent = param.centerContent, centerContent = _param_centerContent === void 0 ? true : _param_centerContent, _param_embedded = param.embedded, embedded = _param_embedded === void 0 ? false : _param_embedded, _param_isDark = param.isDark, isDark = _param_isDark === void 0 ? false : _param_isDark, theme = param.theme, appearance = param.appearance;
     var minHeight = "500px";
     var cardStyle = {
         minHeight: minHeight,
         width: "100%",
-        borderRadius: "var(--moonkey-border-radius-lg)",
-        boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-        border: "1px solid var(--moonkey-color-border)",
+        borderRadius: "var(--moonx-radius-card, var(--moonkey-border-radius-lg))",
+        boxShadow: "var(--moonx-card-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25))",
+        border: "var(--moonx-card-border-width, 1px) solid var(--moonx-card-border-color, var(--moonkey-color-border))",
         position: "relative",
         backgroundColor: "var(--moonkey-color-background)",
+        color: "var(--moonx-card-fg, inherit)",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        overflow: "hidden"
     };
     var contentStyle = _object_spread({
         display: "flex",
         flexDirection: "column",
-        padding: "1rem 1.5rem",
+        padding: "var(--moonx-card-padding, 1rem 1.5rem)",
         flex: 1
     }, centerContent ? {
         justifyContent: "center",
@@ -3354,8 +3609,8 @@ function RootCard(param) {
         width: "100vw",
         height: "100dvh",
         // Use dynamic viewport height for mobile keyboard handling
-        backgroundColor: "rgba(0, 0, 0, 0.3)",
-        backdropFilter: "blur(4px)",
+        backgroundColor: "var(--moonx-backdrop-color, rgba(0, 0, 0, 0.3))",
+        backdropFilter: "blur(var(--moonx-backdrop-blur, 4px))",
         zIndex: 50,
         overflow: "hidden"
     };
@@ -3385,7 +3640,7 @@ function RootCard(param) {
     };
     var modalCardStyle = _object_spread_props(_object_spread({}, cardStyle), {
         width: "100%",
-        maxWidth: "28rem"
+        maxWidth: "var(--moonx-card-max-width, 28rem)"
     });
     if (embedded) {
         return /* @__PURE__ */ jsx6(ScopedContainer, {
@@ -3410,7 +3665,7 @@ function RootCard(param) {
         if (typeof window === "undefined") return;
         var portalDiv = document.createElement("div");
         portalDiv.id = "moonkey-modal-portal";
-        portalDiv.style.cssText = "\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 2147483647;\n      pointer-events: none;\n    ";
+        portalDiv.style.cssText = "\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: ".concat(MODAL_PORTAL_Z_INDEX, ";\n      pointer-events: none;\n    ");
         document.body.appendChild(portalDiv);
         setPortalContainer(portalDiv);
         return function() {
@@ -4695,7 +4950,7 @@ var EmailOtpInput = function EmailOtpInput(param) {
                                         paddingRight: "5.3rem",
                                         paddingTop: "0.75rem",
                                         paddingBottom: "0.75rem",
-                                        borderRadius: "var(--moonkey-border-radius-lg)",
+                                        borderRadius: "var(--moonx-radius-input, var(--moonkey-border-radius-lg))",
                                         fontSize: "1rem"
                                     },
                                     required: true
@@ -5608,6 +5863,44 @@ import { flattenPresenceTokens as flattenPresenceTokens5, getInternalPresenceTok
 import { createWebAuthnPasskey as createWebAuthnPasskey6 } from "@moon-x/core/web";
 import { KeyRound as KeyRound2, ShieldOff, X } from "lucide-react";
 import { useEffect as useEffect13, useRef as useRef6, useState as useState16 } from "react";
+// src/lib/theme-bridge.ts
+import { FONT_URLS_KEY } from "@moon-x/core/utils";
+function serializeThemeVars(theme) {
+    var _theme_colors, _theme_borderRadius;
+    var vars = {};
+    if (!theme) return vars;
+    var sparse = {
+        colors: (_theme_colors = theme.colors) !== null && _theme_colors !== void 0 ? _theme_colors : {},
+        borderRadius: (_theme_borderRadius = theme.borderRadius) !== null && _theme_borderRadius !== void 0 ? _theme_borderRadius : {},
+        fontFamily: theme.fontFamily
+    };
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = Object.entries(themeToCSS(sparse))[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var _step_value = _sliced_to_array(_step.value, 2), key = _step_value[0], value = _step_value[1];
+            if (typeof value === "string" && value) vars[key] = value;
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    if (theme.moonxVars) Object.assign(vars, theme.moonxVars);
+    if (theme.fontUrls && theme.fontUrls.length > 0) {
+        vars[FONT_URLS_KEY] = JSON.stringify(theme.fontUrls);
+    }
+    return vars;
+}
+// src/components/flows/export-key/export-key.tsx
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var ExportKey = function ExportKey(param) {
     var uiConfig = param.uiConfig, walletId = param.walletId, publishableKey = param.publishableKey, walletType = param.walletType, onCancel = param.onCancel, propsIsDark = param.isDark, propsAppConfig = param.appConfig, config = param.config;
@@ -5634,93 +5927,8 @@ var ExportKey = function ExportKey(param) {
         appConfig
     ]);
     var buildThemeParams = function buildThemeParams() {
-        var _config_config_theme, _config_config;
-        var themeVars = {};
-        var c = config === null || config === void 0 ? void 0 : (_config_config = config.config) === null || _config_config === void 0 ? void 0 : (_config_config_theme = _config_config.theme) === null || _config_config_theme === void 0 ? void 0 : _config_config_theme.colors;
-        if (!c) return themeVars;
-        var map = [
-            [
-                "--moonkey-color-accent",
-                c.accent
-            ],
-            [
-                "--moonkey-color-accent-foreground",
-                c.accentForeground
-            ],
-            [
-                "--moonkey-color-accent-dark",
-                c.accentDark
-            ],
-            [
-                "--moonkey-color-accent-light",
-                c.accentLight
-            ],
-            [
-                "--moonkey-color-accent-lightest",
-                c.accentLightest
-            ],
-            [
-                "--moonkey-color-background",
-                c.background
-            ],
-            [
-                "--moonkey-color-background-2",
-                c.background2
-            ],
-            [
-                "--moonkey-color-foreground",
-                c.foreground
-            ],
-            [
-                "--moonkey-color-foreground-2",
-                c.foreground2
-            ],
-            [
-                "--moonkey-color-foreground-3",
-                c.foreground3
-            ],
-            [
-                "--moonkey-color-success",
-                c.success
-            ],
-            [
-                "--moonkey-color-success-foreground",
-                c.successForeground
-            ],
-            [
-                "--moonkey-color-error",
-                c.error
-            ],
-            [
-                "--moonkey-color-error-foreground",
-                c.errorForeground
-            ],
-            [
-                "--moonkey-color-border",
-                c.border
-            ]
-        ];
-        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-        try {
-            for(var _iterator = map[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                var _step_value = _sliced_to_array(_step.value, 2), varName = _step_value[0], val = _step_value[1];
-                if (val) themeVars[varName] = val;
-            }
-        } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-        } finally{
-            try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                }
-            } finally{
-                if (_didIteratorError) {
-                    throw _iteratorError;
-                }
-            }
-        }
-        return themeVars;
+        var _config_config;
+        return serializeThemeVars(config === null || config === void 0 ? void 0 : (_config_config = config.config) === null || _config_config === void 0 ? void 0 : _config_config.theme);
     };
     var getfinalIframeUrl = function getfinalIframeUrl(entropyType2, userHandleB64url, credentialIdB64url, keyshareReadToken) {
         var baseUrl = getIframeUrl2("/export-key");
@@ -7538,16 +7746,17 @@ var SocialLoginButton = function SocialLoginButton(param) {
     var icon = param.icon, text = param.text, provider = param.provider, onSocialLoginClick = param.onSocialLoginClick;
     var _useState23 = _sliced_to_array(useState23(false), 2), isHovered = _useState23[0], setIsHovered = _useState23[1];
     var buttonStyle = {
-        borderRadius: "var(--moonkey-border-radius-lg)",
-        borderWidth: "1px",
+        borderRadius: "var(--moonx-radius-button, var(--moonkey-border-radius-lg))",
+        borderWidth: "var(--moonx-button-border-width, 1px)",
         borderStyle: "solid",
-        borderColor: isHovered ? "var(--moonkey-color-accent)" : "var(--moonkey-color-border)",
+        borderColor: isHovered ? "var(--moonx-button-border-color-hover, var(--moonkey-color-accent))" : "var(--moonx-button-border-color, var(--moonkey-color-border))",
+        color: "var(--moonx-button-fg, var(--moonkey-color-foreground))",
         paddingTop: "0.75rem",
         paddingBottom: "0.75rem",
         paddingLeft: "0.25rem",
         paddingRight: "0.25rem",
         cursor: "pointer",
-        backgroundColor: isHovered ? "var(--moonkey-color-background-2)" : "transparent",
+        backgroundColor: isHovered ? "var(--moonx-button-bg-hover, var(--moonkey-color-background-2))" : "var(--moonx-button-bg, transparent)",
         marginTop: "0.75rem",
         transition: "all 0.2s ease-in-out"
     };
@@ -12452,7 +12661,7 @@ var TermsAndPrivacy = function TermsAndPrivacy(param) {
 import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 var LoginLanding = function LoginLanding(param) {
     var config = param.config, onCancel = param.onCancel, onMethodSelect = param.onMethodSelect, _param_embedded = param.embedded, embedded = _param_embedded === void 0 ? false : _param_embedded, _param_hideClose = param.hideClose, hideClose = _param_hideClose === void 0 ? false : _param_hideClose, propsIsDark = param.isDark, propsAppConfig = param.appConfig;
-    var _config_config, _config_config_appearance, _config_config1, _config_config_appearance1, _config_config2, _config_config3, _config_config4, _appConfig_privacy_policy_url, _appConfig_terms_of_service_url, _config_config5, _config_config6, _config_config_appearance_loginHeaderTitle, _config_config_appearance2, _config_config7, _config_config_appearance3, _config_config8, _config_config_appearance4, _config_config9, _config_config_appearance5, _config_config10, _config_config_prefill, _config_config11, _config_config_prefill1, _config_config12;
+    var _config_config, _config_config_appearance, _config_config1, _config_config_appearance1, _config_config2, _config_config3, _config_config4, _appConfig_privacy_policy_url, _appConfig_terms_of_service_url, _config_config_appearance2, _config_config5, _config_config6, _config_config7, _config_config_appearance_loginHeaderTitle, _config_config_appearance3, _config_config8, _config_config_appearance4, _config_config9, _config_config_appearance5, _config_config10, _config_config_prefill, _config_config11, _config_config_prefill1, _config_config12;
     var _useAppConfig = useAppConfig(propsAppConfig ? void 0 : config === null || config === void 0 ? void 0 : config.publishableKey), fetchedAppConfig = _useAppConfig.appConfig;
     var appConfig = propsAppConfig || fetchedAppConfig;
     var t = useTranslation().t;
@@ -12580,11 +12789,12 @@ var LoginLanding = function LoginLanding(param) {
             });
         })();
     };
+    var logo = resolveLogo(config === null || config === void 0 ? void 0 : (_config_config5 = config.config) === null || _config_config5 === void 0 ? void 0 : (_config_config_appearance2 = _config_config5.appearance) === null || _config_config_appearance2 === void 0 ? void 0 : _config_config_appearance2.logo, isDark);
     return /* @__PURE__ */ jsxs41(RootCard, {
         embedded: embedded,
         isDark: isDark,
-        theme: config === null || config === void 0 ? void 0 : (_config_config5 = config.config) === null || _config_config5 === void 0 ? void 0 : _config_config5.theme,
-        appearance: config === null || config === void 0 ? void 0 : (_config_config6 = config.config) === null || _config_config6 === void 0 ? void 0 : _config_config6.appearance,
+        theme: config === null || config === void 0 ? void 0 : (_config_config6 = config.config) === null || _config_config6 === void 0 ? void 0 : _config_config6.theme,
+        appearance: config === null || config === void 0 ? void 0 : (_config_config7 = config.config) === null || _config_config7 === void 0 ? void 0 : _config_config7.appearance,
         children: [
             !hideClose && /* @__PURE__ */ jsx51("div", {
                 className: "moonkey-flow-close",
@@ -12611,7 +12821,7 @@ var LoginLanding = function LoginLanding(param) {
                 className: "moonkey-header",
                 children: /* @__PURE__ */ jsx51("div", {
                     className: "moonkey-header__inner",
-                    children: (config === null || config === void 0 ? void 0 : (_config_config7 = config.config) === null || _config_config7 === void 0 ? void 0 : (_config_config_appearance2 = _config_config7.appearance) === null || _config_config_appearance2 === void 0 ? void 0 : (_config_config_appearance_loginHeaderTitle = _config_config_appearance2.loginHeaderTitle) === null || _config_config_appearance_loginHeaderTitle === void 0 ? void 0 : _config_config_appearance_loginHeaderTitle.toString()) || t("loginLanding.title")
+                    children: (config === null || config === void 0 ? void 0 : (_config_config8 = config.config) === null || _config_config8 === void 0 ? void 0 : (_config_config_appearance3 = _config_config8.appearance) === null || _config_config_appearance3 === void 0 ? void 0 : (_config_config_appearance_loginHeaderTitle = _config_config_appearance3.loginHeaderTitle) === null || _config_config_appearance_loginHeaderTitle === void 0 ? void 0 : _config_config_appearance_loginHeaderTitle.toString()) || t("loginLanding.title")
                 })
             }),
             /* @__PURE__ */ jsxs41("div", {
@@ -12624,7 +12834,9 @@ var LoginLanding = function LoginLanding(param) {
                                 className: "moonkey-logo-section__inner",
                                 children: /* @__PURE__ */ jsx51(AppLogo, {
                                     appConfig: appConfig,
-                                    src: config === null || config === void 0 ? void 0 : (_config_config8 = config.config) === null || _config_config8 === void 0 ? void 0 : (_config_config_appearance3 = _config_config8.appearance) === null || _config_config_appearance3 === void 0 ? void 0 : _config_config_appearance3.logo
+                                    src: logo === null || logo === void 0 ? void 0 : logo.src,
+                                    height: logo === null || logo === void 0 ? void 0 : logo.height,
+                                    align: logo === null || logo === void 0 ? void 0 : logo.align
                                 })
                             }),
                             (config === null || config === void 0 ? void 0 : (_config_config9 = config.config) === null || _config_config9 === void 0 ? void 0 : (_config_config_appearance4 = _config_config9.appearance) === null || _config_config_appearance4 === void 0 ? void 0 : _config_config_appearance4.loginHeaderDescription) && /* @__PURE__ */ jsx51("div", {
@@ -18161,52 +18373,10 @@ var AuthProvider = function AuthProvider(param) {
     ]);
     var isReadyRef = useRef18(isReady);
     var configWithCSSOverrides = useMemo4(function() {
-        var _ref, _ref1, _ref2;
-        var _config_theme, _config_theme1, _config_theme2;
+        var _BORDER_RADIUS_PRESETS_appearance_borderRadius, _tokens_fontFamily;
+        var _tokens_borderRadius, _tokens_borderRadius1, _tokens_borderRadius2, _tokens_borderRadius3;
         var useDarkTheme = isDarkAppearance(appearance);
-        var baseThemeColors = useDarkTheme ? {
-            accent: "#818cf8",
-            accentForeground: "#ffffff",
-            accentDark: "#6366f1",
-            accentDarkest: "#4f46e5",
-            accentLight: "#a5b4fc",
-            accentLightest: "#e0e7ff",
-            background: "#09090b",
-            background2: "#18181b",
-            background3: "#27272a",
-            foreground: "#fafafa",
-            foreground2: "#e4e4e7",
-            foreground3: "#a1a1aa",
-            foreground4: "#71717a",
-            foregroundAccent: "#a78bfa",
-            success: "#22c55e",
-            successForeground: "#ffffff",
-            error: "#ef4444",
-            errorForeground: "#ffffff",
-            errorLight: "#fca5a5",
-            border: "#3f3f46"
-        } : {
-            accent: "#6366f1",
-            accentForeground: "#ffffff",
-            accentDark: "#4338ca",
-            accentDarkest: "#3730a3",
-            accentLight: "#818cf8",
-            accentLightest: "#c7d2fe",
-            background: "#ffffff",
-            background2: "#f9fafb",
-            background3: "#f3f4f6",
-            foreground: "#09090b",
-            foreground2: "#18181b",
-            foreground3: "#71717a",
-            foreground4: "#a1a1aa",
-            foregroundAccent: "#4f46e5",
-            success: "#10b981",
-            successForeground: "#ffffff",
-            error: "#ef4444",
-            errorForeground: "#ffffff",
-            errorLight: "#fca5a5",
-            border: "#e5e7eb"
-        };
+        var baseThemeColors = (useDarkTheme ? darkTheme : lightTheme).colors;
         var derived = {};
         if (appearance === null || appearance === void 0 ? void 0 : appearance.accentColor) {
             var a = appearance.accentColor;
@@ -18219,8 +18389,9 @@ var AuthProvider = function AuthProvider(param) {
             derived.foregroundAccent = darken(a, 0.04);
         }
         if (appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) {
+            var _isColorDark;
             var bg = appearance.backgroundColor;
-            var isDarkBg = contrastForeground(bg) === "#ffffff";
+            var isDarkBg = (_isColorDark = isColorDark(bg)) !== null && _isColorDark !== void 0 ? _isColorDark : useDarkTheme;
             derived.background = bg;
             derived.background2 = isDarkBg ? lighten(bg, 0.08) : darken(bg, 0.03);
             derived.background3 = isDarkBg ? lighten(bg, 0.14) : darken(bg, 0.06);
@@ -18237,58 +18408,30 @@ var AuthProvider = function AuthProvider(param) {
                 derived.foreground4 = "#d1d5db";
             }
         }
-        var appearanceColors = (_ref = appearance === null || appearance === void 0 ? void 0 : appearance.colors) !== null && _ref !== void 0 ? _ref : {};
-        var BORDER_RADIUS_PRESETS2 = {
-            none: {
-                sm: "0",
-                md: "0",
-                lg: "0",
-                full: "0"
-            },
-            sm: {
-                sm: "0.125rem",
-                md: "0.25rem",
-                lg: "0.375rem",
-                full: "9999px"
-            },
-            md: {
-                sm: "0.375rem",
-                md: "0.5rem",
-                lg: "0.75rem",
-                full: "9999px"
-            },
-            lg: {
-                sm: "0.5rem",
-                md: "0.75rem",
-                lg: "1rem",
-                full: "9999px"
-            },
-            full: {
-                sm: "9999px",
-                md: "9999px",
-                lg: "9999px",
-                full: "9999px"
-            }
-        };
-        var appearanceBorderRadius = function() {
-            if (!(appearance === null || appearance === void 0 ? void 0 : appearance.borderRadius)) return {};
-            if (typeof appearance.borderRadius === "string") {
-                var _BORDER_RADIUS_PRESETS2_appearance_borderRadius;
-                return (_BORDER_RADIUS_PRESETS2_appearance_borderRadius = BORDER_RADIUS_PRESETS2[appearance.borderRadius]) !== null && _BORDER_RADIUS_PRESETS2_appearance_borderRadius !== void 0 ? _BORDER_RADIUS_PRESETS2_appearance_borderRadius : {};
-            }
-            return appearance.borderRadius;
-        }();
+        var tokens = resolveAppearanceTokens(appearance, useDarkTheme);
+        var presetRadius = typeof (appearance === null || appearance === void 0 ? void 0 : appearance.borderRadius) === "string" ? (_BORDER_RADIUS_PRESETS_appearance_borderRadius = BORDER_RADIUS_PRESETS[appearance.borderRadius]) !== null && _BORDER_RADIUS_PRESETS_appearance_borderRadius !== void 0 ? _BORDER_RADIUS_PRESETS_appearance_borderRadius : {} : {};
         var defaultFont = 'Sons, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+        var moonxVars = _object_spread({}, appearanceToMoonxVars(appearance, useDarkTheme), appearanceToComponentVars(appearance));
+        var fontUrls = resolveFontUrls(appearance);
         return _object_spread_props(_object_spread({}, config), {
             theme: {
-                colors: _object_spread({}, baseThemeColors, derived, appearanceColors, config === null || config === void 0 ? void 0 : (_config_theme = config.theme) === null || _config_theme === void 0 ? void 0 : _config_theme.colors),
+                colors: _object_spread({}, baseThemeColors, derived, definedOnly(tokens.colors)),
                 borderRadius: _object_spread({
                     sm: "0.375rem",
                     md: "0.5rem",
                     lg: "0.75rem",
                     full: "9999px"
-                }, appearanceBorderRadius, config === null || config === void 0 ? void 0 : (_config_theme1 = config.theme) === null || _config_theme1 === void 0 ? void 0 : _config_theme1.borderRadius),
-                fontFamily: (_ref1 = (_ref2 = config === null || config === void 0 ? void 0 : (_config_theme2 = config.theme) === null || _config_theme2 === void 0 ? void 0 : _config_theme2.fontFamily) !== null && _ref2 !== void 0 ? _ref2 : appearance === null || appearance === void 0 ? void 0 : appearance.fontFamily) !== null && _ref1 !== void 0 ? _ref1 : defaultFont
+                }, presetRadius, definedOnly({
+                    // explicit appearance radii (+ per-mode), legacy keys
+                    sm: (_tokens_borderRadius = tokens.borderRadius) === null || _tokens_borderRadius === void 0 ? void 0 : _tokens_borderRadius.sm,
+                    md: (_tokens_borderRadius1 = tokens.borderRadius) === null || _tokens_borderRadius1 === void 0 ? void 0 : _tokens_borderRadius1.md,
+                    lg: (_tokens_borderRadius2 = tokens.borderRadius) === null || _tokens_borderRadius2 === void 0 ? void 0 : _tokens_borderRadius2.lg,
+                    full: (_tokens_borderRadius3 = tokens.borderRadius) === null || _tokens_borderRadius3 === void 0 ? void 0 : _tokens_borderRadius3.full
+                })),
+                fontFamily: (_tokens_fontFamily = tokens.fontFamily) !== null && _tokens_fontFamily !== void 0 ? _tokens_fontFamily : defaultFont,
+                // appearance.fontFamily (+ per-mode)
+                moonxVars: moonxVars,
+                fontUrls: fontUrls
             },
             appearance: appearance
         });
@@ -18435,10 +18578,10 @@ var MoonKeyContext = createContext(null);
 var MoonKeyProvider = function MoonKeyProvider(param) {
     var publishableKey = param.publishableKey, embeddableId = param.embeddableId, config = param.config, children = param.children;
     var _config_walletConnect, _config_emailConfig, _config_emailConfig1, _config_emailConfig2, _config_emailConfig3, _config_emailConfig4;
-    if ((config === null || config === void 0 ? void 0 : config.defaultChain) || (config === null || config === void 0 ? void 0 : config.supportedChains)) {
+    if ((config === null || config === void 0 ? void 0 : config.chains) || (config === null || config === void 0 ? void 0 : config.defaultChain)) {
         validateChainConfig({
-            defaultChain: config.defaultChain,
-            supportedChains: config.supportedChains
+            chains: config.chains,
+            defaultChain: config.defaultChain
         });
     }
     var _useState53 = _sliced_to_array(useState53(null), 2), walletConnectClient = _useState53[0], setWalletConnectClient2 = _useState53[1];
@@ -18532,7 +18675,6 @@ var MoonKeyProvider = function MoonKeyProvider(param) {
             prefill: config === null || config === void 0 ? void 0 : config.prefill,
             walletChainType: config === null || config === void 0 ? void 0 : config.walletChainType,
             isDark: config === null || config === void 0 ? void 0 : config.isDark,
-            theme: config === null || config === void 0 ? void 0 : config.theme,
             emailConfig: {
                 skipVerifiedSuccess: (config === null || config === void 0 ? void 0 : (_config_emailConfig = config.emailConfig) === null || _config_emailConfig === void 0 ? void 0 : _config_emailConfig.skipVerifiedSuccess) || false,
                 verifiedDisplayTime: (config === null || config === void 0 ? void 0 : (_config_emailConfig1 = config.emailConfig) === null || _config_emailConfig1 === void 0 ? void 0 : _config_emailConfig1.verifiedDisplayTime) || 3e3,
@@ -18545,11 +18687,9 @@ var MoonKeyProvider = function MoonKeyProvider(param) {
             exportKeyConfig: config === null || config === void 0 ? void 0 : config.exportKeyConfig,
             signTransactionConfig: config === null || config === void 0 ? void 0 : config.signTransactionConfig,
             sendTransactionConfig: config === null || config === void 0 ? void 0 : config.sendTransactionConfig,
-            solana: config === null || config === void 0 ? void 0 : config.solana,
-            ethereum: {
-                defaultChain: config === null || config === void 0 ? void 0 : config.defaultChain,
-                supportedChains: config === null || config === void 0 ? void 0 : config.supportedChains
-            }
+            // Unified chain config passes straight through — no flat→nested remap.
+            chains: config === null || config === void 0 ? void 0 : config.chains,
+            defaultChain: config === null || config === void 0 ? void 0 : config.defaultChain
         },
         hideIframe: true
     };
@@ -18617,7 +18757,7 @@ var getReconnectionInfo = function getReconnectionInfo(error) {
     return null;
 };
 // src/index.ts
-import { estimateEvmGas, estimateEvmGasReserve, getChainById, getDefaultChain, getEvmGasPrice, getEvmMaxPriorityFeePerGas, getEvmNonce, getRpcUrl, isChainSupported, setChainRpcUrl, validateChainConfig as validateChainConfig2 } from "@moon-x/core/lib";
+import { buildChainIndex, estimateEvmGas, estimateEvmGasReserve, getChainById, getEvmGasPrice, getEvmMaxPriorityFeePerGas, getEvmNonce, getRpcUrl, isChainSupported, isEvmEntry, normalizeChainKey, resolveChainEntry, resolveRpcUrl, resolveSolanaChainEntry, resolveWsUrl, validateChainConfig as validateChainConfig2 } from "@moon-x/core/lib";
 import { Network } from "@moon-x/core/types";
 import { arbitrum, arbitrumSepolia, avalanche, avalancheFuji, base, baseSepolia, bsc, bscTestnet, goerli, holesky, mainnet, optimism, optimismSepolia, polygon, polygonAmoy, sepolia } from "viem/chains";
-export { MoonKeyProvider, Network, SessionExpiredError, SessionNotFoundError, arbitrum, arbitrumSepolia, avalanche, avalancheFuji, base, baseSepolia, bsc, bscTestnet, estimateEvmGas, estimateEvmGasReserve, ethereum_exports as ethereum, getChainById, getDefaultChain, getEvmGasPrice, getEvmMaxPriorityFeePerGas, getEvmNonce, getReconnectionInfo, getRpcUrl, goerli, holesky, isChainSupported, mainnet, optimism, optimismSepolia, polygon, polygonAmoy, requiresReconnection, sepolia, setChainRpcUrl, solana_exports as solana, useAddPasskey, useAttachOAuth, useConnectWallet, useDetachOAuth, useEphemeralSigner, useLoginWithEmail, useLoginWithOAuth, useMoonKey, useOAuthCompletion, usePasskeyStatus, useRegisterPasskey, useRemovePasskey, useUser, validateChainConfig2 as validateChainConfig };
+export { MoonKeyProvider, Network, SessionExpiredError, SessionNotFoundError, appearanceToComponentVars, appearanceToCssVars, appearanceToMoonxVars, appearanceToTheme, arbitrum, arbitrumSepolia, avalanche, avalancheFuji, base, baseSepolia, bsc, bscTestnet, buildChainIndex, darkTheme, definedOnly, estimateEvmGas, estimateEvmGasReserve, ethereum_exports as ethereum, getChainById, getEvmGasPrice, getEvmMaxPriorityFeePerGas, getEvmNonce, getReconnectionInfo, getRpcUrl, goerli, holesky, isChainSupported, isColorDark, isDarkAppearance, isDarkMode, isEvmEntry, lightTheme, mainnet, normalizeChainKey, optimism, optimismSepolia, polygon, polygonAmoy, requiresReconnection, resolveAppearanceTokens, resolveChainEntry, resolveFontUrls, resolveLogo, resolveRpcUrl, resolveSolanaChainEntry, resolveWsUrl, sepolia, solana_exports as solana, themeToCSS, useAddPasskey, useAttachOAuth, useConnectWallet, useDetachOAuth, useEphemeralSigner, useLoginWithEmail, useLoginWithOAuth, useMoonKey, useOAuthCompletion, usePasskeyStatus, useRegisterPasskey, useRemovePasskey, useUser, validateChainConfig2 as validateChainConfig };