@moon-x/react-sdk 0.9.1 → 0.11.0

package/dist/index.js

@@ -450,8 +450,8 @@ function _optionalChain(ops) {
     return value;
 }
 "use client";
-var _chunkVBAVYDWQjs = require('./chunk-VBAVYDWQ.js');
-var _chunkF345C4FXjs = require('./chunk-F345C4FX.js');
+var _chunkIPTLHXJ4js = require('./chunk-IPTLHXJ4.js');
+var _chunkRRFMI4ZLjs = require('./chunk-RRFMI4ZL.js');
 var _chunkSPXMMQ7Zjs = require('./chunk-SPXMMQ7Z.js');
 // src/index.ts
 var _react = require('@moon-x/core/react');
@@ -950,8 +950,8 @@ function useLoginWithOAuth() {
         initOAuth: initOAuth
     };
 }
-// src/hooks/use-moonkey.ts
-var useMoonKey = function useMoonKey() {
+// src/hooks/use-moonx.ts
+var useMoonX = function useMoonX() {
     var coreSDK = _chunkSPXMMQ7Zjs.useAuthSDK.call(void 0);
     return {
         ready: coreSDK.ready,
@@ -1253,7 +1253,7 @@ var buildUrl = function buildUrl(baseUrl, sdkConfig, enableCaptcha, captchaSitek
     }, enableCaptcha, captchaSitekey);
 };
 // src/lib/id-token-storage.ts
-var ID_TOKEN_KEY = "moonkey:id_token";
+var ID_TOKEN_KEY = "moonx:id_token";
 var idTokenStorage = {
     /**
    * Store ID token in localStorage
@@ -2244,7 +2244,7 @@ var getSDKMethods = function getSDKMethods(publishableKey, isMounted, getIsReady
         publishableKey: publishableKey,
         // window is defined in the browser context where this hook runs.
         // SSR rendering never reaches the factory because the SDK is gated
-        // on the MoonKeyProvider's `useEffect`-mounted lifecycle.
+        // on the MoonXProvider's `useEffect`-mounted lifecycle.
         relyingPartyOrigin: typeof window !== "undefined" ? window.location.origin : "",
         setIsAuthenticated: setIsAuthenticated,
         setUser: setUser
@@ -3323,7 +3323,7 @@ var _lucidereact = require('lucide-react');
 // src/lib/iframe.ts
 var _core = require('@moon-x/core');
 var getIframeClient = function getIframeClient(publishableKey) {
-    var iframeId = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "moonkey-auth-iframe";
+    var iframeId = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "moonx-auth-iframe";
     var iframe = document.getElementById(iframeId);
     if (!_optionalChain([
         iframe,
@@ -3339,7 +3339,7 @@ var getIframeClient = function getIframeClient(publishableKey) {
     return new (0, _core.PostMessageClient)(iframe.contentWindow, iframeOrigin);
 };
 var getIframeTransport = function getIframeTransport() {
-    var iframeId = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "moonkey-auth-iframe";
+    var iframeId = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "moonx-auth-iframe";
     return _web.createIframeTransport.call(void 0, {
         getContentWindow: function getContentWindow() {
             var iframe = document.getElementById(iframeId);
@@ -3556,38 +3556,38 @@ var darkTheme = {
 function themeToCSS(theme) {
     return {
         // Accent colors
-        "--moonkey-color-accent": theme.colors.accent,
-        "--moonkey-color-accent-foreground": theme.colors.accentForeground,
-        "--moonkey-color-accent-dark": theme.colors.accentDark,
-        "--moonkey-color-accent-darkest": theme.colors.accentDarkest,
-        "--moonkey-color-accent-light": theme.colors.accentLight,
-        "--moonkey-color-accent-lightest": theme.colors.accentLightest,
+        "--moonx-color-accent": theme.colors.accent,
+        "--moonx-color-accent-foreground": theme.colors.accentForeground,
+        "--moonx-color-accent-dark": theme.colors.accentDark,
+        "--moonx-color-accent-darkest": theme.colors.accentDarkest,
+        "--moonx-color-accent-light": theme.colors.accentLight,
+        "--moonx-color-accent-lightest": theme.colors.accentLightest,
         // Background colors
-        "--moonkey-color-background": theme.colors.background,
-        "--moonkey-color-background-2": theme.colors.background2,
-        "--moonkey-color-background-3": theme.colors.background3,
+        "--moonx-color-background": theme.colors.background,
+        "--moonx-color-background-2": theme.colors.background2,
+        "--moonx-color-background-3": theme.colors.background3,
         // Foreground colors
-        "--moonkey-color-foreground": theme.colors.foreground,
-        "--moonkey-color-foreground-2": theme.colors.foreground2,
-        "--moonkey-color-foreground-3": theme.colors.foreground3,
-        "--moonkey-color-foreground-4": theme.colors.foreground4,
-        "--moonkey-color-foreground-accent": theme.colors.foregroundAccent,
+        "--moonx-color-foreground": theme.colors.foreground,
+        "--moonx-color-foreground-2": theme.colors.foreground2,
+        "--moonx-color-foreground-3": theme.colors.foreground3,
+        "--moonx-color-foreground-4": theme.colors.foreground4,
+        "--moonx-color-foreground-accent": theme.colors.foregroundAccent,
         // Success colors
-        "--moonkey-color-success": theme.colors.success,
-        "--moonkey-color-success-foreground": theme.colors.successForeground,
+        "--moonx-color-success": theme.colors.success,
+        "--moonx-color-success-foreground": theme.colors.successForeground,
         // Error colors
-        "--moonkey-color-error": theme.colors.error,
-        "--moonkey-color-error-foreground": theme.colors.errorForeground,
-        "--moonkey-color-error-light": theme.colors.errorLight,
+        "--moonx-color-error": theme.colors.error,
+        "--moonx-color-error-foreground": theme.colors.errorForeground,
+        "--moonx-color-error-light": theme.colors.errorLight,
         // Border
-        "--moonkey-color-border": theme.colors.border,
+        "--moonx-color-border": theme.colors.border,
         // Border radius
-        "--moonkey-border-radius-sm": theme.borderRadius.sm,
-        "--moonkey-border-radius-md": theme.borderRadius.md,
-        "--moonkey-border-radius-lg": theme.borderRadius.lg,
-        "--moonkey-border-radius-full": theme.borderRadius.full,
+        "--moonx-border-radius-sm": theme.borderRadius.sm,
+        "--moonx-border-radius-md": theme.borderRadius.md,
+        "--moonx-border-radius-lg": theme.borderRadius.lg,
+        "--moonx-border-radius-full": theme.borderRadius.full,
         // Font family
-        "--moonkey-font-family": theme.fontFamily
+        "--moonx-font-family": theme.fontFamily
     };
 }
 function isColorDark(color) {
@@ -3691,12 +3691,12 @@ var Button = React2.forwardRef(function(_0, _1) {
     ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", _object_spread_props(_object_spread({
         ref: ref,
-        className: cx("moonkey-btn", "moonkey-btn--".concat(variant), size !== "default" && "moonkey-btn--".concat(size), full && "moonkey-btn--full", state && "moonkey-state--".concat(state), className),
+        className: cx("moonx-btn", "moonx-btn--".concat(variant), size !== "default" && "moonx-btn--".concat(size), full && "moonx-btn--full", state && "moonx-state--".concat(state), className),
         disabled: disabled || state === "loading"
     }, props), {
         children: [
             state === "loading" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                className: "moonkey-spinner moonkey-spinner--md"
+                className: "moonx-spinner moonx-spinner--md"
             }),
             children
         ]
@@ -3714,7 +3714,7 @@ var Input = React3.forwardRef(function(_0, _1) {
     ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", _object_spread({
         ref: ref,
-        className: cx("moonkey-input", error && "moonkey-input--error", className)
+        className: cx("moonx-input", error && "moonx-input--error", className)
     }, props));
 });
 Input.displayName = "Input";
@@ -3729,7 +3729,7 @@ var Label = React4.forwardRef(function(_0, _1) {
     ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", _object_spread({
         ref: ref,
-        className: cx("moonkey-label", tone !== "default" && "moonkey-label--".concat(tone), className)
+        className: cx("moonx-label", tone !== "default" && "moonx-label--".concat(tone), className)
     }, props));
 });
 Label.displayName = "Label";
@@ -4410,7 +4410,7 @@ function appearanceToCssVars(appearance, isDark) {
     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(--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';
+var SDK_STYLES = '\n/* === Reset === */\n.moonx-sdk-root * { box-sizing: border-box; }\n.moonx-sdk-root *:focus-visible { outline: 2px solid var(--moonx-color-ring, var(--moonx-color-accent)); outline-offset: 2px; }\n.moonx-sdk-root input::placeholder { color: var(--moonx-color-foreground-3); opacity: 1; }\n\n/* === Animations === */\n@keyframes moonx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes moonx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n/* === Button === */\n.moonx-sdk-root .moonx-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.moonx-sdk-root .moonx-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* Sizes */\n.moonx-sdk-root .moonx-btn--sm  { height: 2.25rem; padding: 0 0.75rem; border-radius: var(--moonx-radius-button, var(--moonx-border-radius-md)); }\n.moonx-sdk-root .moonx-btn--md, .moonx-sdk-root .moonx-btn--default { height: 2.75rem; padding: 0 1rem; border-radius: var(--moonx-radius-button, var(--moonx-border-radius-md)); }\n.moonx-sdk-root .moonx-btn--lg  { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: var(--moonx-radius-button, var(--moonx-border-radius-md)); }\n.moonx-sdk-root .moonx-btn--icon { width: 2rem; height: 2rem; padding: 0; border-radius: var(--moonx-radius-button, var(--moonx-border-radius-md)); }\n.moonx-sdk-root .moonx-btn--full { width: 100%; justify-content: center; }\n\n/* Variants */\n.moonx-sdk-root .moonx-btn--primary, .moonx-sdk-root .moonx-btn--default {\n  background-color: var(--moonx-button-bg, var(--moonx-color-accent)); color: var(--moonx-button-fg, var(--moonx-color-accent-foreground));\n  border: var(--moonx-button-border-width, 0px) solid var(--moonx-button-border-color, transparent);\n}\n.moonx-sdk-root .moonx-btn--primary:hover:not(:disabled), .moonx-sdk-root .moonx-btn--default:hover:not(:disabled) {\n  background-color: var(--moonx-color-accent-dark);\n}\n.moonx-sdk-root .moonx-btn--primary.moonx-state--success { background-color: var(--moonx-color-success); color: var(--moonx-color-success-foreground); }\n.moonx-sdk-root .moonx-btn--primary.moonx-state--error   { background-color: var(--moonx-color-error);   color: var(--moonx-color-error-foreground); }\n\n.moonx-sdk-root .moonx-btn--outline {\n  background-color: transparent; border: 1px solid var(--moonx-color-border); color: var(--moonx-color-foreground);\n}\n.moonx-sdk-root .moonx-btn--outline:hover:not(:disabled) { background-color: var(--moonx-color-background-2); border-color: var(--moonx-color-accent); }\n\n.moonx-sdk-root .moonx-btn--ghost  { background-color: transparent; color: var(--moonx-color-foreground); }\n.moonx-sdk-root .moonx-btn--ghost:hover:not(:disabled)  { background-color: var(--moonx-color-background-2); }\n\n.moonx-sdk-root .moonx-btn--secondary { background-color: var(--moonx-color-background-2); color: var(--moonx-color-foreground); }\n.moonx-sdk-root .moonx-btn--secondary:hover:not(:disabled) { background-color: var(--moonx-color-background-3); }\n\n.moonx-sdk-root .moonx-btn--destructive { background-color: var(--moonx-color-error); color: var(--moonx-color-error-foreground); }\n.moonx-sdk-root .moonx-btn--destructive:hover:not(:disabled) { opacity: 0.9; }\n\n.moonx-sdk-root .moonx-btn--link { background: transparent; color: var(--moonx-color-link, var(--moonx-color-accent)); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }\n\n/* === Input === */\n.moonx-sdk-root .moonx-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(--moonx-color-foreground));\n  background-color: var(--moonx-input-bg, transparent); border: var(--moonx-input-border-width, 1px) solid var(--moonx-input-border-color, var(--moonx-color-border));\n  border-radius: var(--moonx-radius-input, var(--moonx-border-radius-md)); outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;\n}\n.moonx-sdk-root .moonx-input:focus { border-color: var(--moonx-color-ring, var(--moonx-color-accent)); box-shadow: 0 0 0 1px var(--moonx-color-ring, var(--moonx-color-accent)); }\n.moonx-sdk-root .moonx-input:disabled { opacity: 0.5; cursor: not-allowed; }\n.moonx-sdk-root .moonx-input--error { border-color: var(--moonx-color-error); }\n\n/* === Label === */\n.moonx-sdk-root .moonx-label { display: block; font-size: 0.875rem; font-weight: var(--moonx-font-weight-medium, 500); color: var(--moonx-color-foreground); line-height: 1; }\n.moonx-sdk-root .moonx-label--secondary { color: var(--moonx-color-foreground-3); }\n.moonx-sdk-root .moonx-label--tertiary  { color: var(--moonx-color-foreground-4); font-size: 0.75rem; }\n.moonx-sdk-root .moonx-label--error     { color: var(--moonx-color-error); }\n.moonx-sdk-root .moonx-label--success   { color: var(--moonx-color-success); }\n\n/* === Detail Row === */\n.moonx-sdk-root .moonx-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }\n.moonx-sdk-root .moonx-detail-row__label { font-size: 0.875rem; color: var(--moonx-color-foreground-3); }\n.moonx-sdk-root .moonx-detail-row__value { font-size: 0.875rem; font-weight: 500; color: var(--moonx-color-foreground); text-align: right; }\n\n/* === Divider === */\n.moonx-sdk-root .moonx-divider { border-top: 1px solid var(--moonx-color-border); margin: 1rem 0; }\n\n/* === Boxes === */\n.moonx-sdk-root .moonx-box { padding: 0.75rem; border-radius: var(--moonx-border-radius-lg); }\n.moonx-sdk-root .moonx-box--surface  { background-color: var(--moonx-color-background-2); }\n.moonx-sdk-root .moonx-box--error    { background-color: var(--moonx-color-background-2); border: 1px solid var(--moonx-color-error); }\n.moonx-sdk-root .moonx-box--success  { background-color: var(--moonx-color-background-2); border: 1px solid var(--moonx-color-success); }\n.moonx-sdk-root .moonx-box--info     { background-color: var(--moonx-color-background-2); border: 1px solid var(--moonx-color-info, var(--moonx-color-border)); }\n.moonx-sdk-root .moonx-box--warning  { background-color: var(--moonx-color-background-2); border: 1px solid var(--moonx-color-warning, var(--moonx-color-error)); display: flex; align-items: flex-start; gap: 0.5rem; }\n.moonx-sdk-root .moonx-box--scrollable { overflow-y: auto; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }\n\n/* === Address Pill === */\n.moonx-sdk-root .moonx-address-pill {\n  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem;\n  background-color: var(--moonx-color-background-3); color: var(--moonx-color-foreground);\n  border: 1px solid var(--moonx-color-border); border-radius: var(--moonx-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.moonx-sdk-root .moonx-address-pill:hover { background-color: var(--moonx-color-background-2); }\n.moonx-sdk-root .moonx-address-pill--copied { border-color: var(--moonx-color-success); }\n\n/* === Mono Text === */\n.moonx-sdk-root .moonx-mono { font-family: monospace; font-size: 0.875rem; color: var(--moonx-color-foreground); }\n\n/* === Spinner === */\n.moonx-sdk-root .moonx-spinner {\n  display: inline-block; flex-shrink: 0;\n  border: 2px solid currentColor; border-top-color: transparent;\n  border-radius: 9999px; animation: moonx-spin 1s linear infinite;\n}\n.moonx-sdk-root .moonx-spinner--sm { width: 0.875rem; height: 0.875rem; }\n.moonx-sdk-root .moonx-spinner--md { width: 1rem; height: 1rem; }\n.moonx-sdk-root .moonx-spinner--lg { width: 1.5rem; height: 1.5rem; }\n.moonx-sdk-root .moonx-spinner--xl { width: 2rem; height: 2rem; }\n\n/* === Pulse skeleton === */\n.moonx-sdk-root .moonx-skeleton { background-color: var(--moonx-color-background-2); border-radius: 0.25rem; animation: moonx-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }\n\n/* === Flow layout === */\n.moonx-sdk-root .moonx-flow-close { position: absolute; top: 1rem; right: 1.5rem; display: flex; align-items: center; flex-shrink: 0; z-index: 1; }\n.moonx-sdk-root .moonx-flow-header { display: flex; flex-direction: column; text-align: center; padding: 0 0.5rem 0.25rem; gap: 0.5rem; }\n.moonx-sdk-root .moonx-flow-content { display: flex; flex-direction: column; flex: 1; margin-top: 1rem; padding: 0 0.5rem; }\n.moonx-sdk-root .moonx-flow-footer {\n  position: absolute; bottom: 0; left: 0; right: 0;\n  background-color: var(--moonx-color-background); padding: 1rem 2rem 3rem;\n  margin: 0 0.125rem 0.125rem;\n  border-bottom-left-radius: var(--moonx-border-radius-lg);\n  border-bottom-right-radius: var(--moonx-border-radius-lg);\n}\n.moonx-sdk-root .moonx-flow-footer__actions { display: flex; gap: 0.75rem; }\n/* Buttons inside footer actions auto-stretch to fill space */\n.moonx-sdk-root .moonx-flow-footer__actions > .moonx-btn { flex: 1; height: 3rem; font-size: 1rem; }\n\n/* === Flow text utilities === */\n.moonx-sdk-root .moonx-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(--moonx-color-foreground)); }\n.moonx-sdk-root .moonx-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(--moonx-color-foreground)); }\n.moonx-sdk-root .moonx-text--secondary { font-size: var(--moonx-font-size-sm, 0.875rem); color: var(--moonx-color-foreground-3); }\n.moonx-sdk-root .moonx-text--error { font-size: 0.875rem; color: var(--moonx-color-error); }\n.moonx-sdk-root .moonx-text--success { font-size: 0.875rem; color: var(--moonx-color-success); }\n.moonx-sdk-root .moonx-flow-logo { display: flex; align-items: center; justify-content: center; }\n\n/* === Terms link row (accept-terms) === */\n.moonx-sdk-root .moonx-terms-link {\n  display: flex; flex-direction: row; align-items: center; justify-content: space-between;\n  border-radius: var(--moonx-border-radius-lg); padding: 0.75rem;\n  margin-left: 0.75rem; margin-right: 0.75rem;\n  border: 1px solid var(--moonx-color-border); cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.moonx-sdk-root .moonx-terms-link:hover { background-color: var(--moonx-color-background-2); }\n\n/* === Wallet item === */\n.moonx-sdk-root .moonx-wallet-item {\n  display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem;\n  border: 1px solid var(--moonx-color-border); border-radius: var(--moonx-radius-button, var(--moonx-border-radius-lg));\n  background-color: var(--moonx-color-background); cursor: pointer;\n  transition: border-color 0.2s, background-color 0.2s;\n}\n.moonx-sdk-root .moonx-wallet-item:hover { border-color: var(--moonx-color-accent); background-color: var(--moonx-color-background-2); }\n.moonx-sdk-root .moonx-wallet-item--selected { border-color: var(--moonx-color-accent); background-color: var(--moonx-color-background-2); }\n\n/* === Flow overlay (z-index stack wrapper) === */\n.moonx-sdk-root .moonx-flow-overlay { position: relative; z-index: 100; }\n\n/* === Wallet connection state container === */\n.moonx-sdk-root .moonx-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.moonx-sdk-root .moonx-wallet-spinner { position: relative; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; }\n.moonx-sdk-root .moonx-wallet-spinner__ring { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid var(--moonx-color-border); }\n.moonx-sdk-root .moonx-wallet-spinner__ring--error { border-color: var(--moonx-color-error); }\n.moonx-sdk-root .moonx-wallet-spinner__spin { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--moonx-color-accent); animation: moonx-spin 1s linear infinite; }\n.moonx-sdk-root .moonx-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.moonx-sdk-root .moonx-data-preview { margin-top: 0.25rem; padding: 0.75rem; background-color: var(--moonx-color-background-2); border-radius: var(--moonx-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.moonx-sdk-root .moonx-data-scroll { display: flex; flex-direction: column; max-height: 390px; overflow-y: auto; padding-bottom: 5rem; position: relative; }\n\n/* === Expand/collapse trigger === */\n.moonx-sdk-root .moonx-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.moonx-sdk-root .moonx-scrollable-list { display: flex; flex-direction: column; overflow-y: auto; border: 1px solid var(--moonx-color-border); border-radius: var(--moonx-border-radius-md); scrollbar-width: none; }\n.moonx-sdk-root .moonx-scrollable-list::-webkit-scrollbar { display: none; }\n\n/* === Modal content column (passkey-enroll, add-passkey) === */\n.moonx-sdk-root .moonx-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.moonx-sdk-root .moonx-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(--moonx-border-radius-full); }\n\n/* === Centered inline row (resend, action links) === */\n.moonx-sdk-root .moonx-center-row { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }\n\n/* === Stacked button column (modal CTAs) === */\n.moonx-sdk-root .moonx-btn-stack { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding-top: 0.5rem; }\n\n/* === Legal footer text (terms & privacy) === */\n.moonx-sdk-root .moonx-legal-text { font-size: 0.75rem; color: var(--moonx-color-foreground-3); text-align: center; line-height: 1.5; margin-top: 1rem; }\n.moonx-sdk-root .moonx-legal-text a { color: var(--moonx-color-link, var(--moonx-color-accent)); cursor: pointer; }\n/* Inline-checkbox variant: same typography, but flex layout aligned left so the checkbox sits beside the link text. */\n.moonx-sdk-root .moonx-legal-checkbox { display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.5rem; }\n.moonx-sdk-root .moonx-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.moonx-sdk-root .moonx-login-gateable { transition: opacity 0.15s ease-out; }\n.moonx-sdk-root .moonx-login-gated { opacity: 0.5; pointer-events: none; }\n\n/* === Shared entry animations === */\n@keyframes moonx-slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }\n@keyframes moonx-success-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonx-error-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonx-error-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }\n@keyframes moonx-mail-slide-in { from { opacity: 0; transform: translateX(-50px) rotate(-15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }\n@keyframes moonx-verified-slide-in { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }\n\n/* === Icon size utilities === */\n.moonx-sdk-root .moonx-icon--xs  { width: 0.75rem; height: 0.75rem; }\n.moonx-sdk-root .moonx-icon--sm  { width: 1rem;    height: 1rem;    }\n.moonx-sdk-root .moonx-icon--md  { width: 1.5rem;  height: 1.5rem;  }\n.moonx-sdk-root .moonx-icon--lg  { width: 2rem;    height: 2rem;    }\n.moonx-sdk-root .moonx-icon--xl  { width: 2.5rem;  height: 2.5rem;  }\n.moonx-sdk-root .moonx-icon--2xl { width: 3rem;    height: 3rem;    }\n.moonx-sdk-root .moonx-icon--mr-xs { margin-right: 0.25rem; }\n.moonx-sdk-root .moonx-icon--mr-sm { margin-right: 0.5rem; }\n.moonx-sdk-root .moonx-icon--accent  { color: var(--moonx-color-accent); }\n.moonx-sdk-root .moonx-icon--success { color: var(--moonx-color-success, #16a34a); }\n.moonx-sdk-root .moonx-icon--error   { color: var(--moonx-color-error); }\n.moonx-sdk-root .moonx-icon--muted   { color: var(--moonx-color-foreground-3); }\n.moonx-sdk-root .moonx-icon--fg      { color: var(--moonx-color-foreground); }\n\n/* === Layout utilities === */\n.moonx-sdk-root .moonx-flex-center     { display: flex; align-items: center; justify-content: center; }\n.moonx-sdk-root .moonx-flex-between    { display: flex; align-items: center; justify-content: space-between; }\n.moonx-sdk-root .moonx-flex-col        { display: flex; flex-direction: column; }\n.moonx-sdk-root .moonx-flex-col-center { display: flex; flex-direction: column; align-items: center; }\n\n/* === Text modifiers === */\n.moonx-sdk-root .moonx-text--semibold { font-weight: var(--moonx-font-weight-medium, 500); }\n.moonx-sdk-root .moonx-text--bold     { font-weight: var(--moonx-font-weight-bold, 600); }\n.moonx-sdk-root .moonx-text--center   { text-align: center; }\n.moonx-sdk-root .moonx-text--sm       { font-size: var(--moonx-font-size-sm, 0.875rem); }\n.moonx-sdk-root .moonx-text--lg       { font-size: var(--moonx-font-size-lg, 1.125rem); }\n.moonx-sdk-root .moonx-text--xl       { font-size: var(--moonx-font-size-xl, 1.25rem); }\n\n/* === Transaction detail card (success receipt) === */\n.moonx-sdk-root .moonx-detail-card { display: flex; flex-direction: column; border: 1px solid var(--moonx-color-border); border-radius: var(--moonx-border-radius-lg); padding: 1rem 0.5rem; margin: 2rem 0.5rem 0; }\n.moonx-sdk-root .moonx-detail-card__rows { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }\n\n/* === Failed-transaction error scroll box === */\n.moonx-sdk-root .moonx-error-scroll { display: flex; flex-direction: column; background-color: var(--moonx-color-background-2); border: 1px solid var(--moonx-color-border); border-radius: var(--moonx-border-radius-lg); padding: 1rem 0.5rem; margin: 0.5rem; height: 150px; overflow: auto; }\n\n/* === Network logo badge (ethereum/solana pair) === */\n.moonx-sdk-root .moonx-network-badge { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--moonx-color-border); background-color: var(--moonx-color-background-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.moonx-sdk-root .moonx-network-badge--overlap { margin-left: -8px; }\n\n/* === Positioned icons inside inputs === */\n.moonx-sdk-root .moonx-search-icon { position: absolute; left: 0.75rem; top: 0.875rem; color: var(--moonx-color-foreground-3); }\n.moonx-sdk-root .moonx-input-icon--left { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--moonx-color-foreground-3); pointer-events: none; }\n\n/* === Step indicator (N of M) === */\n.moonx-sdk-root .moonx-step-label { font-size: 0.75rem; font-weight: 600; color: var(--moonx-color-accent); letter-spacing: 0.05em; text-transform: uppercase; }\n\n/* === Feature bullet item (passkey enroll) === */\n.moonx-sdk-root .moonx-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; font-size: 0.875rem; color: var(--moonx-color-foreground); }\n\n/* === Monospace textarea (import wallet) === */\n.moonx-sdk-root .moonx-mono-textarea { width: 100%; min-height: 100px; padding: 0.75rem; font-family: monospace; font-size: 0.75rem; background-color: var(--moonx-color-background-2); color: var(--moonx-color-foreground); border: 1px solid var(--moonx-color-border); border-radius: var(--moonx-radius-input, var(--moonx-border-radius-md)); outline: none; resize: vertical; }\n\n/* === Sign-flow inner section and row === */\n.moonx-sdk-root .moonx-sign-section { padding: 0.5rem; }\n.moonx-sdk-root .moonx-sign-row { display: flex; align-items: center; justify-content: space-between; }\n\n/* === External wallet connect button (login flow) === */\n.moonx-sdk-root .moonx-external-wallet-btn { border-radius: var(--moonx-radius-button, var(--moonx-border-radius-lg)); border: var(--moonx-button-border-width, 1px) solid var(--moonx-button-border-color, var(--moonx-color-border)); color: var(--moonx-button-fg, var(--moonx-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.moonx-sdk-root .moonx-external-wallet-btn:hover { border-color: var(--moonx-button-border-color-hover, var(--moonx-color-accent)); background-color: var(--moonx-button-bg-hover, var(--moonx-color-background-2)); }\n.moonx-sdk-root .moonx-external-wallet-btn--accent-hover:hover { background-color: var(--moonx-color-accent); }\n.moonx-sdk-root .moonx-external-wallet-btn__inner { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; animation: moonx-slide-in 0.3s ease-out 0.1s both; }\n\n/* === Flex row utility (icon + label pairs) === */\n.moonx-sdk-root .moonx-flex-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }\n\n/* === Login landing layout === */\n.moonx-sdk-root .moonx-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(--moonx-color-foreground)); margin-bottom: 0.5rem; padding-left: 3rem; padding-right: 3rem; }\n.moonx-sdk-root .moonx-header__inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonx-sdk-root .moonx-content-wrapper { padding-top: 1rem; padding-bottom: 1rem; width: 100%; }\n.moonx-sdk-root .moonx-logo-section { text-align: center; margin-bottom: 1rem; }\n.moonx-sdk-root .moonx-logo-section__inner { padding-top: 1rem; padding-bottom: 1rem; }\n.moonx-sdk-root .moonx-description { padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; color: var(--moonx-color-foreground-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonx-sdk-root .moonx-form-section { padding: 0.5rem 1rem; }\n\n/* === Email OTP content fill === */\n.moonx-sdk-root .moonx-otp-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }\n\n/* === Wallet icon status overlay badge === */\n.moonx-sdk-root .moonx-wallet-status-badge { position: absolute; bottom: -4px; right: -4px; background-color: var(--moonx-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
 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;
@@ -4467,12 +4467,12 @@ function ScopedContainer(param) {
         boxSizing: "border-box",
         WebkitFontSmoothing: "antialiased",
         MozOsxFontSmoothing: "grayscale",
-        fontFamily: "var(--moonkey-font-family)",
+        fontFamily: "var(--moonx-font-family)",
         letterSpacing: "var(--moonx-letter-spacing, normal)",
         color: mergedTheme.colors.foreground
     });
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: "moonkey-sdk-root".concat(className ? " ".concat(className) : ""),
+        className: "moonx-sdk-root".concat(className ? " ".concat(className) : ""),
         style: containerStyles,
         "data-theme": isDark ? "dark" : "light",
         children: [
@@ -4499,11 +4499,11 @@ function RootCard(param) {
     var cardStyle = {
         minHeight: minHeight,
         width: "100%",
-        borderRadius: "var(--moonx-radius-card, var(--moonkey-border-radius-lg))",
+        borderRadius: "var(--moonx-radius-card, var(--moonx-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))",
+        border: "var(--moonx-card-border-width, 1px) solid var(--moonx-card-border-color, var(--moonx-color-border))",
         position: "relative",
-        backgroundColor: "var(--moonkey-color-background)",
+        backgroundColor: "var(--moonx-color-background)",
         color: "var(--moonx-card-fg, inherit)",
         display: "flex",
         flexDirection: "column",
@@ -4566,10 +4566,10 @@ function RootCard(param) {
             theme: theme,
             appearance: appearance,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: cx("moonkey-root-card", "moonkey-embedded"),
+                className: cx("moonx-root-card", "moonx-embedded"),
                 style: cardStyle,
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-card-content",
+                    className: "moonx-card-content",
                     style: contentStyle,
                     children: children
                 })
@@ -4582,7 +4582,7 @@ function RootCard(param) {
     _react3.useEffect.call(void 0, function() {
         if (typeof window === "undefined") return;
         var portalDiv = document.createElement("div");
-        portalDiv.id = "moonkey-modal-portal";
+        portalDiv.id = "moonx-modal-portal";
         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);
@@ -4711,29 +4711,29 @@ function RootCard(param) {
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", {
                 dangerouslySetInnerHTML: {
-                    __html: "\n          @keyframes fadeInZoom {\n            from {\n              opacity: 0;\n              transform: scale(0.95);\n            }\n            to {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n\n          @keyframes slideUpFromBottom {\n            from {\n              opacity: 0;\n              transform: translateY(100%);\n            }\n            to {\n              opacity: 1;\n              transform: translateY(0);\n            }\n          }\n\n          /* Fix for mobile keyboard - use dvh units */\n          .moonkey-modal-overlay,\n          .moonkey-modal-container {\n            height: 100dvh !important;\n            min-height: 100dvh !important;\n            pointer-events: auto !important;\n          }\n\n          /* Desktop: centered modal with zoom animation */\n          .moonkey-modal-card {\n            animation: fadeInZoom 0.2s ease-out;\n          }\n\n          /* Mobile: bottom sheet with slide up animation */\n          @media (max-width: 768px) {\n            .moonkey-modal-container {\n              align-items: flex-end !important;\n              padding: 0 !important;\n              /* Prevent layout shift when keyboard opens */\n              position: fixed !important;\n              overscroll-behavior: contain !important;\n            }\n\n            .moonkey-modal-wrapper {\n              max-width: 100% !important;\n              width: 100% !important;\n            }\n\n            .moonkey-modal-card {\n              animation: slideUpFromBottom 0.3s ease-out !important;\n              max-width: 100% !important;\n              width: 100% !important;\n              border-bottom-left-radius: 0 !important;\n              border-bottom-right-radius: 0 !important;\n              border-top-left-radius: 1.5rem !important;\n              border-top-right-radius: 1.5rem !important;\n              margin: 0 !important;\n              max-height: 100dvh !important;\n              overflow-y: auto !important;\n              /* Prevent bounce/rubber-band scrolling on iOS */\n              overscroll-behavior: contain !important;\n              /* Smooth scrolling on iOS */\n              -webkit-overflow-scrolling: touch !important;\n              /* Prevent zoom on input focus */\n              touch-action: manipulation !important;\n            }\n\n            /* Ensure content is scrollable when keyboard is open */\n            .moonkey-card-content {\n              overflow-y: auto !important;\n              -webkit-overflow-scrolling: touch !important;\n              overscroll-behavior: contain !important;\n              /* Prevent content from shifting */\n              position: relative !important;\n            }\n\n            /* Prevent input zoom on iOS */\n            .moonkey-modal-card input,\n            .moonkey-modal-card textarea,\n            .moonkey-modal-card select {\n              font-size: 16px !important;\n              touch-action: manipulation !important;\n            }\n          }\n\n          /* Fallback for browsers that don't support dvh */\n          @supports not (height: 100dvh) {\n            .moonkey-modal-overlay,\n            .moonkey-modal-container {\n              height: 100vh !important;\n              min-height: -webkit-fill-available !important;\n            }\n          }\n        "
+                    __html: "\n          @keyframes fadeInZoom {\n            from {\n              opacity: 0;\n              transform: scale(0.95);\n            }\n            to {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n\n          @keyframes slideUpFromBottom {\n            from {\n              opacity: 0;\n              transform: translateY(100%);\n            }\n            to {\n              opacity: 1;\n              transform: translateY(0);\n            }\n          }\n\n          /* Fix for mobile keyboard - use dvh units */\n          .moonx-modal-overlay,\n          .moonx-modal-container {\n            height: 100dvh !important;\n            min-height: 100dvh !important;\n            pointer-events: auto !important;\n          }\n\n          /* Desktop: centered modal with zoom animation */\n          .moonx-modal-card {\n            animation: fadeInZoom 0.2s ease-out;\n          }\n\n          /* Mobile: bottom sheet with slide up animation */\n          @media (max-width: 768px) {\n            .moonx-modal-container {\n              align-items: flex-end !important;\n              padding: 0 !important;\n              /* Prevent layout shift when keyboard opens */\n              position: fixed !important;\n              overscroll-behavior: contain !important;\n            }\n\n            .moonx-modal-wrapper {\n              max-width: 100% !important;\n              width: 100% !important;\n            }\n\n            .moonx-modal-card {\n              animation: slideUpFromBottom 0.3s ease-out !important;\n              max-width: 100% !important;\n              width: 100% !important;\n              border-bottom-left-radius: 0 !important;\n              border-bottom-right-radius: 0 !important;\n              border-top-left-radius: 1.5rem !important;\n              border-top-right-radius: 1.5rem !important;\n              margin: 0 !important;\n              max-height: 100dvh !important;\n              overflow-y: auto !important;\n              /* Prevent bounce/rubber-band scrolling on iOS */\n              overscroll-behavior: contain !important;\n              /* Smooth scrolling on iOS */\n              -webkit-overflow-scrolling: touch !important;\n              /* Prevent zoom on input focus */\n              touch-action: manipulation !important;\n            }\n\n            /* Ensure content is scrollable when keyboard is open */\n            .moonx-card-content {\n              overflow-y: auto !important;\n              -webkit-overflow-scrolling: touch !important;\n              overscroll-behavior: contain !important;\n              /* Prevent content from shifting */\n              position: relative !important;\n            }\n\n            /* Prevent input zoom on iOS */\n            .moonx-modal-card input,\n            .moonx-modal-card textarea,\n            .moonx-modal-card select {\n              font-size: 16px !important;\n              touch-action: manipulation !important;\n            }\n          }\n\n          /* Fallback for browsers that don't support dvh */\n          @supports not (height: 100dvh) {\n            .moonx-modal-overlay,\n            .moonx-modal-container {\n              height: 100vh !important;\n              min-height: -webkit-fill-available !important;\n            }\n          }\n        "
                 }
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-modal-overlay",
+                className: "moonx-modal-overlay",
                 style: _object_spread_props(_object_spread({}, modalOverlayStyle), {
                     pointerEvents: "auto"
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                 ref: modalContainerRef,
-                className: "moonkey-modal-container",
+                className: "moonx-modal-container",
                 style: _object_spread_props(_object_spread({}, modalContainerStyle), {
                     pointerEvents: "auto"
                 }),
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-modal-wrapper",
+                    className: "moonx-modal-wrapper",
                     style: modalWrapperStyle,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: cx("moonkey-root-card", "moonkey-modal", "moonkey-modal-card"),
+                        className: cx("moonx-root-card", "moonx-modal", "moonx-modal-card"),
                         style: modalCardStyle,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-card-content",
+                            className: "moonx-card-content",
                             style: contentStyle,
                             children: children
                         })
@@ -4794,7 +4794,7 @@ var CountdownTimer = function CountdownTimer(param) {
         fontWeight: "500"
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: cx("moonkey-countdown-timer", className),
+        className: cx("moonx-countdown-timer", className),
         style: containerStyle,
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -5008,21 +5008,21 @@ function SimpleOtpInput(param) {
         var isFocused = focusedIndex === index;
         var isFirst = index === 0;
         var isLast = index === length - 1;
-        var borderColor = "var(--moonkey-color-border)";
-        var backgroundColor = "var(--moonkey-color-background)";
-        var textColor = "var(--moonkey-color-foreground)";
+        var borderColor = "var(--moonx-color-border)";
+        var backgroundColor = "var(--moonx-color-background)";
+        var textColor = "var(--moonx-color-foreground)";
         if (validationState === "success") {
-            borderColor = "var(--moonkey-color-success)";
-            backgroundColor = "var(--moonkey-color-background-2)";
-            textColor = "var(--moonkey-color-success)";
+            borderColor = "var(--moonx-color-success)";
+            backgroundColor = "var(--moonx-color-background-2)";
+            textColor = "var(--moonx-color-success)";
         } else if (validationState === "error") {
-            borderColor = "var(--moonkey-color-error)";
-            backgroundColor = "var(--moonkey-color-background-2)";
-            textColor = "var(--moonkey-color-error)";
+            borderColor = "var(--moonx-color-error)";
+            backgroundColor = "var(--moonx-color-background-2)";
+            textColor = "var(--moonx-color-error)";
         } else if (isFilled) {
-            borderColor = "var(--moonkey-color-foreground)";
+            borderColor = "var(--moonx-color-foreground)";
         } else if (isFocused) {
-            borderColor = "var(--moonkey-color-accent)";
+            borderColor = "var(--moonx-color-accent)";
         }
         return {
             width: "3rem",
@@ -5034,10 +5034,10 @@ function SimpleOtpInput(param) {
             borderBottom: "1px solid ".concat(borderColor),
             borderRight: "1px solid ".concat(borderColor),
             borderLeft: isFirst ? "1px solid ".concat(borderColor) : "none",
-            borderTopLeftRadius: isFirst ? "var(--moonkey-border-radius-md)" : 0,
-            borderBottomLeftRadius: isFirst ? "var(--moonkey-border-radius-md)" : 0,
-            borderTopRightRadius: isLast ? "var(--moonkey-border-radius-md)" : 0,
-            borderBottomRightRadius: isLast ? "var(--moonkey-border-radius-md)" : 0,
+            borderTopLeftRadius: isFirst ? "var(--moonx-border-radius-md)" : 0,
+            borderBottomLeftRadius: isFirst ? "var(--moonx-border-radius-md)" : 0,
+            borderTopRightRadius: isLast ? "var(--moonx-border-radius-md)" : 0,
+            borderBottomRightRadius: isLast ? "var(--moonx-border-radius-md)" : 0,
             backgroundColor: backgroundColor,
             color: textColor,
             outline: "none",
@@ -5045,7 +5045,7 @@ function SimpleOtpInput(param) {
             boxShadow: isFocused ? "0 0 0 3px rgba(99, 102, 241, 0.1)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)",
             cursor: disabled ? "not-allowed" : "text",
             opacity: disabled ? 0.5 : 1,
-            fontFamily: "var(--moonkey-font-family)"
+            fontFamily: "var(--moonx-font-family)"
         };
     };
     var containerStyle = {
@@ -5140,7 +5140,7 @@ function AddressPill(param) {
     var label = address.length > prefixLen + suffixLen ? "".concat(address.slice(0, prefixLen), "...").concat(address.slice(-suffixLen)) : address;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", {
         type: "button",
-        className: cx("moonkey-address-pill", copied && "moonkey-address-pill--copied", className),
+        className: cx("moonx-address-pill", copied && "moonx-address-pill--copied", className),
         onClick: handleCopy,
         title: address,
         children: [
@@ -5149,7 +5149,7 @@ function AddressPill(param) {
                 style: {
                     width: "1rem",
                     height: "1rem",
-                    color: "var(--moonkey-color-success)"
+                    color: "var(--moonx-color-success)"
                 }
             }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {
                 style: {
@@ -5177,13 +5177,13 @@ var ExpiryPill = function ExpiryPill(param) {
                 alignItems: "center",
                 gap: "0.4rem",
                 padding: "0.35rem 0.75rem",
-                borderRadius: "var(--moonkey-border-radius-full, 9999px)",
+                borderRadius: "var(--moonx-border-radius-full, 9999px)",
                 fontSize: "0.8125rem",
                 lineHeight: 1,
                 fontVariantNumeric: "tabular-nums",
-                backgroundColor: "var(--moonkey-color-background-2, #f9fafb)",
-                color: urgent ? "var(--moonkey-color-error, #ef4444)" : "var(--moonkey-color-foreground-3, #6b7280)",
-                border: "1px solid var(--moonkey-color-border, #e5e7eb)"
+                backgroundColor: "var(--moonx-color-background-2, #f9fafb)",
+                color: urgent ? "var(--moonx-color-error, #ef4444)" : "var(--moonx-color-foreground-3, #6b7280)",
+                border: "1px solid var(--moonx-color-border, #e5e7eb)"
             },
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Clock, {
@@ -5231,10 +5231,10 @@ function ErrorBox(param) {
             });
         });
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", _object_spread_props(_object_spread({}, a11yProps), {
-            className: cx("moonkey-text--error", className),
+            className: cx("moonx-text--error", className),
             style: _object_spread({
                 fontSize: "0.875rem",
-                color: "var(--moonkey-color-error)",
+                color: "var(--moonx-color-error)",
                 textAlign: resolvedAlign,
                 display: "flex",
                 alignItems: "center",
@@ -5251,7 +5251,7 @@ function ErrorBox(param) {
         }));
     }
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", _object_spread_props(_object_spread({}, a11yProps), {
-        className: cx("moonkey-box moonkey-box--warning", className),
+        className: cx("moonx-box moonx-box--warning", className),
         style: style,
         children: [
             icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
@@ -5261,14 +5261,14 @@ function ErrorBox(param) {
                     marginTop: "0.125rem",
                     width: "1.25rem",
                     height: "1.25rem",
-                    color: "var(--moonkey-color-error)"
+                    color: "var(--moonx-color-error)"
                 },
                 children: icon
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                 style: _object_spread({
                     fontSize: "0.875rem",
-                    color: "var(--moonkey-color-error)"
+                    color: "var(--moonx-color-error)"
                 }, align === "center" && {
                     textAlign: "center",
                     flex: 1
@@ -5282,7 +5282,7 @@ function ErrorBox(param) {
 function SuccessBox(param) {
     var children = param.children, icon = param.icon, className = param.className;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: cx("moonkey-box moonkey-box--success", className),
+        className: cx("moonx-box moonx-box--success", className),
         style: {
             display: "flex",
             alignItems: "flex-start",
@@ -5295,14 +5295,14 @@ function SuccessBox(param) {
                     marginTop: "0.125rem",
                     width: "1.25rem",
                     height: "1.25rem",
-                    color: "var(--moonkey-color-success)"
+                    color: "var(--moonx-color-success)"
                 },
                 children: icon
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                 style: {
                     fontSize: "0.875rem",
-                    color: "var(--moonkey-color-success)"
+                    color: "var(--moonx-color-success)"
                 },
                 children: children
             })
@@ -5317,7 +5317,7 @@ function MonoText(_0) {
         "className"
     ]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _object_spread_props(_object_spread({
-        className: cx("moonkey-mono", className)
+        className: cx("moonx-mono", className)
     }, props), {
         children: children
     }));
@@ -5326,14 +5326,14 @@ function MonoText(_0) {
 function DetailRow(param) {
     var label = param.label, value = param.value, className = param.className;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: cx("moonkey-detail-row", className),
+        className: cx("moonx-detail-row", className),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                className: "moonkey-detail-row__label",
+                className: "moonx-detail-row__label",
                 children: label
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                className: "moonkey-detail-row__value",
+                className: "moonx-detail-row__value",
                 children: value
             })
         ]
@@ -5727,14 +5727,14 @@ var AddPasskey = function AddPasskey(param) {
     };
     var renderLogo = function renderLogo() {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-            className: "moonkey-flow-logo",
+            className: "moonx-flow-logo",
             style: {
                 paddingTop: "1rem"
             },
             children: customLogoUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                 src: customLogoUrl,
                 alt: "",
-                className: "moonkey-icon--lg",
+                className: "moonx-icon--lg",
                 style: {
                     objectFit: "contain"
                 }
@@ -5774,22 +5774,22 @@ var AddPasskey = function AddPasskey(param) {
                 }
             ]),
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: cx("moonkey-add-passkey", "moonkey-add-passkey-success", "moonkey-modal-content"),
+                className: cx("moonx-add-passkey", "moonx-add-passkey-success", "moonx-modal-content"),
                 children: [
                     renderLogo(),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircle2, {
-                        className: "moonkey-icon--2xl moonkey-icon--success"
+                        className: "moonx-icon--2xl moonx-icon--success"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--title moonkey-text--xl",
+                        className: "moonx-text--title moonx-text--xl",
                         children: "New passkey added"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary",
+                        className: "moonx-text--secondary",
                         children: "You can now unlock your wallet from this passkey too."
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-btn-stack",
+                        className: "moonx-btn-stack",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: function onClick() {
                                 return finish({
@@ -5830,15 +5830,15 @@ var AddPasskey = function AddPasskey(param) {
                 }
             ]),
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: cx("moonkey-add-passkey", "moonkey-add-passkey-error", "moonkey-modal-content"),
+                className: cx("moonx-add-passkey", "moonx-add-passkey-error", "moonx-modal-content"),
                 children: [
                     renderLogo(),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.AlertTriangle, {
                         "aria-hidden": true,
-                        className: "moonkey-icon--xl moonkey-icon--error"
+                        className: "moonx-icon--xl moonx-icon--error"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--title moonkey-text--xl",
+                        className: "moonx-text--title moonx-text--xl",
                         children: recoverWithUnlock ? "Unlock expired" : "Couldn't add passkey"
                     }),
                     errorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorBox, {
@@ -5847,7 +5847,7 @@ var AddPasskey = function AddPasskey(param) {
                         children: errorMessage
                     }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-btn-stack",
+                        className: "moonx-btn-stack",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 onClick: handleRetry,
@@ -5892,30 +5892,30 @@ var AddPasskey = function AddPasskey(param) {
                 }
             ]),
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: cx("moonkey-add-passkey", "moonkey-add-passkey-step-1", "moonkey-modal-content"),
+                className: cx("moonx-add-passkey", "moonx-add-passkey-step-1", "moonx-modal-content"),
                 children: [
                     renderLogo(),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-step-label",
+                        className: "moonx-step-label",
                         children: "Step 1 of 2"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.KeyRound, {
-                        className: "moonkey-icon--xl moonkey-icon--accent"
+                        className: "moonx-icon--xl moonx-icon--accent"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--title moonkey-text--xl",
+                        className: "moonx-text--title moonx-text--xl",
                         children: "Confirm with an existing passkey"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary",
+                        className: "moonx-text--secondary",
                         children: "To add another passkey, first prove you have access by unlocking with one you already use. Your wallet stays encrypted on this device throughout."
                     }),
                     errorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--error",
+                        className: "moonx-text--error",
                         children: errorMessage
                     }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-btn-stack",
+                        className: "moonx-btn-stack",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 onClick: handleUnlock,
@@ -5961,40 +5961,40 @@ var AddPasskey = function AddPasskey(param) {
             }
         ]),
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: cx("moonkey-add-passkey", "moonkey-add-passkey-step-2", "moonkey-modal-content"),
+            className: cx("moonx-add-passkey", "moonx-add-passkey-step-2", "moonx-modal-content"),
             children: [
                 renderLogo(),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-step-label",
+                    className: "moonx-step-label",
                     children: "Step 2 of 2"
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, {
-                    className: "moonkey-icon--xl moonkey-icon--accent",
+                    className: "moonx-icon--xl moonx-icon--accent",
                     "aria-hidden": true
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Fingerprint, {
-                    className: "moonkey-icon--xl moonkey-icon--accent",
+                    className: "moonx-icon--xl moonx-icon--accent",
                     style: {
                         marginTop: "-1rem"
                     }
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--title moonkey-text--xl",
+                    className: "moonx-text--title moonx-text--xl",
                     children: "Add another passkey"
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--secondary",
+                    className: "moonx-text--secondary",
                     children: "On the next prompt, your browser or password manager will offer to create a new passkey. Pick a syncing option (iCloud Keychain, Google Password Manager, 1Password) so you keep access if you lose this device."
                 }),
                 secondsLeft !== null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpiryPill, {
                     secondsLeft: secondsLeft
                 }),
                 errorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--error",
+                    className: "moonx-text--error",
                     children: errorMessage
                 }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-btn-stack",
+                    className: "moonx-btn-stack",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: handleEnroll,
@@ -6175,20 +6175,20 @@ var EmailOtpInput = function EmailOtpInput(param) {
     };
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-            className: cx("moonkey-email-otp-input", "moonkey-flex-col"),
+            className: cx("moonx-email-otp-input", "moonx-flex-col"),
             style: {
                 marginTop: "1rem"
             },
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-otp-content",
+                className: "moonx-otp-content",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     style: {
                         gap: "1rem"
                     },
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, {
-                            htmlFor: "moonkey-email-input",
+                            htmlFor: "moonx-email-input",
                             children: "Email address"
                         }),
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
@@ -6197,13 +6197,13 @@ var EmailOtpInput = function EmailOtpInput(param) {
                             },
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                    className: "moonkey-input-icon--left",
+                                    className: "moonx-input-icon--left",
                                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mail, {
-                                        className: "moonkey-icon--md"
+                                        className: "moonx-icon--md"
                                     })
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Input, {
-                                    id: "moonkey-email-input",
+                                    id: "moonx-email-input",
                                     type: "email",
                                     value: email,
                                     onChange: function onChange(e) {
@@ -6217,7 +6217,7 @@ var EmailOtpInput = function EmailOtpInput(param) {
                                         paddingRight: "5.3rem",
                                         paddingTop: "0.75rem",
                                         paddingBottom: "0.75rem",
-                                        borderRadius: "var(--moonx-radius-input, var(--moonkey-border-radius-lg))",
+                                        borderRadius: "var(--moonx-radius-input, var(--moonx-border-radius-lg))",
                                         fontSize: "1rem"
                                     },
                                     required: true
@@ -6237,9 +6237,9 @@ var EmailOtpInput = function EmailOtpInput(param) {
                                         size: "sm",
                                         disabled: !isEmailValid || isProcessing,
                                         children: isProcessing ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
-                                            className: "moonkey-icon--sm",
+                                            className: "moonx-icon--sm",
                                             style: {
-                                                animation: "moonkey-spin 1s linear infinite"
+                                                animation: "moonx-spin 1s linear infinite"
                                             },
                                             fill: "none",
                                             viewBox: "0 0 24 24",
@@ -6894,35 +6894,35 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-back-btn",
+                    className: "moonx-back-btn",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onBackPress,
                         disabled: isLoading,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, {
-                            className: "moonkey-icon--md"
+                            className: "moonx-icon--md"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-otp-content",
+                        className: "moonx-otp-content",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-flex-center",
+                                className: "moonx-flex-center",
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                                     style: {
-                                        animation: "moonkey-mail-slide-in 0.8s ease-out 0.4s both"
+                                        animation: "moonx-mail-slide-in 0.8s ease-out 0.4s both"
                                     },
                                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MailCheck, {
-                                        className: "moonkey-icon--2xl moonkey-icon--muted"
+                                        className: "moonx-icon--2xl moonx-icon--muted"
                                     })
                                 })
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-label moonkey-text--lg moonkey-text--center",
+                                className: "moonx-label moonx-text--lg moonx-text--center",
                                 style: {
                                     paddingTop: "1rem"
                                 },
@@ -6943,14 +6943,14 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
                                 ]) || t("emailOtp.title")
                             }),
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 style: {
                                     gap: "1.5rem",
                                     paddingTop: "1.5rem"
                                 },
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                        className: "moonkey-text--secondary moonkey-text--center",
+                                        className: "moonx-text--secondary moonx-text--center",
                                         style: {
                                             paddingLeft: "2rem",
                                             paddingRight: "2rem"
@@ -6959,7 +6959,7 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
                                             t("emailOtp.descriptionStart"),
                                             " ",
                                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                                className: "moonkey-text--bold",
+                                                className: "moonx-text--bold",
                                                 title: emailOtpSendResponse.email,
                                                 children: formatEmailDisplay(emailOtpSendResponse.email)
                                             }),
@@ -6968,7 +6968,7 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
                                         ]
                                     }),
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                        className: "moonkey-flex-col-center",
+                                        className: "moonx-flex-col-center",
                                         style: {
                                             paddingTop: "1rem",
                                             paddingBottom: "1rem"
@@ -6982,7 +6982,7 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
                                             },
                                             children: [
                                                 validationState === "success" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                                    className: "moonkey-text--success",
+                                                    className: "moonx-text--success",
                                                     style: {
                                                         textAlign: "right"
                                                     },
@@ -7008,7 +7008,7 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
                                         children: errorMessage
                                     }),
                                     canResend ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                        className: "moonkey-center-row",
+                                        className: "moonx-center-row",
                                         children: [
                                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, {
                                                 tone: "secondary",
@@ -7028,7 +7028,7 @@ var EmailOtpVerify = function EmailOtpVerify(param) {
                                                     },
                                                     children: [
                                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                                            className: "moonkey-spinner moonkey-spinner--sm"
+                                                            className: "moonx-spinner moonx-spinner--sm"
                                                         }),
                                                         t("emailOtp.sending")
                                                     ]
@@ -7085,7 +7085,7 @@ var AnimatedCheck = function AnimatedCheck(param) {
         width: size,
         height: size,
         borderRadius: "50%",
-        backgroundColor: "var(--moonkey-color-success)",
+        backgroundColor: "var(--moonx-color-success)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -7265,7 +7265,7 @@ var EmailOtpVerified = function EmailOtpVerified(param) {
         ]),
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
             style: {
-                animation: "moonkey-verified-slide-in 0.4s ease-out 0.1s both"
+                animation: "moonx-verified-slide-in 0.4s ease-out 0.1s both"
             },
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -7564,13 +7564,16 @@ var ExportKey = function ExportKey(param) {
         url.searchParams.append("wallet_type", walletType);
         url.searchParams.append("entropy_type", entropyType2);
         url.searchParams.append("displayMode", isDark ? "dark" : "light");
-        url.searchParams.append("user_handle_b64url", userHandleB64url);
-        url.searchParams.append("credential_id_b64url", credentialIdB64url);
-        url.searchParams.append("keyshare_read_token", keyshareReadToken);
         var themeVars = buildThemeParams();
         if (Object.keys(themeVars).length > 0) {
             url.searchParams.append("theme", JSON.stringify(themeVars));
         }
+        var secrets = new URLSearchParams({
+            user_handle_b64url: userHandleB64url,
+            credential_id_b64url: credentialIdB64url,
+            keyshare_read_token: keyshareReadToken
+        });
+        url.hash = secrets.toString();
         return url.toString();
     };
     var getWallet = function getWallet() {
@@ -7788,13 +7791,13 @@ var ExportKey = function ExportKey(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onCancel,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     })
                 }),
@@ -7803,28 +7806,28 @@ var ExportKey = function ExportKey(param) {
                         gap: "1rem",
                         padding: "1.5rem"
                     },
-                    className: "moonkey-flex-col-center moonkey-text--center",
+                    className: "moonx-flex-col-center moonx-text--center",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                             style: {
                                 width: "3rem",
                                 height: "3rem",
                                 borderRadius: "50%",
-                                backgroundColor: "var(--moonkey-color-background-2)"
+                                backgroundColor: "var(--moonx-color-background-2)"
                             },
-                            className: "moonkey-flex-center",
+                            className: "moonx-flex-center",
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ShieldOff, {
-                                className: "moonkey-icon--md moonkey-icon--muted"
+                                className: "moonx-icon--md moonx-icon--muted"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                                    className: "moonkey-text--title",
+                                    className: "moonx-text--title",
                                     children: t("exportKey.notAvailable")
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                                    className: "moonkey-text--secondary",
+                                    className: "moonx-text--secondary",
                                     style: {
                                         paddingTop: "1rem"
                                     },
@@ -7864,21 +7867,21 @@ var ExportKey = function ExportKey(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                        className: "moonkey-icon--sm"
+                        className: "moonx-icon--sm"
                     })
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-header",
+                className: "moonx-flow-header",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                        className: "moonkey-text--heading",
+                        className: "moonx-text--heading",
                         children: _nullishCoalesce(_optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -7902,7 +7905,7 @@ var ExportKey = function ExportKey(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-content",
+                className: "moonx-flow-content",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorBox, {
                         icon: WarningIcon,
@@ -7918,7 +7921,7 @@ var ExportKey = function ExportKey(param) {
                         ]) || t("exportKey.neverShare")
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-box moonkey-box--surface",
+                        className: "moonx-box moonx-box--surface",
                         style: {
                             marginBottom: "1rem"
                         },
@@ -7936,7 +7939,7 @@ var ExportKey = function ExportKey(param) {
                             gap: "0.5rem",
                             marginTop: "0.5rem"
                         },
-                        className: "moonkey-flex-col",
+                        className: "moonx-flex-col",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 onClick: handleReveal,
@@ -7956,14 +7959,14 @@ var ExportKey = function ExportKey(param) {
                                     },
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.KeyRound, {
-                                            className: "moonkey-icon--sm"
+                                            className: "moonx-icon--sm"
                                         }),
                                         "Reveal Key"
                                     ]
                                 })
                             }),
                             revealError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                                className: "moonkey-text--error moonkey-text--center",
+                                className: "moonx-text--error moonx-text--center",
                                 children: revealError
                             })
                         ]
@@ -7973,12 +7976,15 @@ var ExportKey = function ExportKey(param) {
                         src: iframeUrl,
                         allow: "clipboard-write",
                         style: {
-                            width: "calc(100% + 1rem)",
-                            marginLeft: "-0.5rem",
-                            marginRight: "-0.5rem",
+                            // Match the sibling content width (never-share warning, wallet
+                            // box) — both sit inside `.moonx-flow-content`'s 0.5rem inline
+                            // padding. A previous `calc(100% + 1rem)` + negative margins
+                            // full-bled the iframe into that padding, so the revealed key
+                            // rendered ~1rem wider than the warning above it.
+                            width: "100%",
                             height: "180px",
                             border: "none",
-                            borderRadius: "var(--moonkey-border-radius-lg)"
+                            borderRadius: "var(--moonx-border-radius-lg)"
                         }
                     })
                 ]
@@ -8030,7 +8036,7 @@ var FundingFailure = function FundingFailure(param) {
         }
     ]));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -8058,42 +8064,42 @@ var FundingFailure = function FundingFailure(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-center",
+                    className: "moonx-flex-center",
                     style: {
                         marginTop: "3rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-error-shake 0.5s ease-out 0.1s both"
+                            animation: "moonx-error-shake 0.5s ease-out 0.1s both"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                            className: "moonkey-icon--2xl moonkey-icon--error"
+                            className: "moonx-icon--2xl moonx-icon--error"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--lg moonkey-text--semibold moonkey-text--center",
+                    className: "moonx-text--lg moonx-text--semibold moonx-text--center",
                     style: {
                         paddingTop: "0.5rem"
                     },
                     children: "Funding Failed"
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--center",
+                    className: "moonx-text--center",
                     style: {
                         paddingTop: "2.5rem",
                         paddingLeft: "0.5rem",
                         paddingRight: "0.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: "We couldn't complete your funding request. Please try again or contact support if the problem persists."
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: onClose,
                             children: "Try Again"
@@ -8108,7 +8114,7 @@ var FundingFailure = function FundingFailure(param) {
 var FundingOptionButton = function FundingOptionButton(param) {
     var icon = param.icon, label = param.label, onClick = param.onClick;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-wallet-item",
+        className: "moonx-wallet-item",
         onClick: onClick,
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
             style: {
@@ -8125,7 +8131,7 @@ var FundingOptionButton = function FundingOptionButton(param) {
                     children: icon
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--sm",
+                    className: "moonx-text--sm",
                     children: label
                 })
             ]
@@ -8201,7 +8207,7 @@ var FundingSelection = function FundingSelection(param) {
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
             children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-between",
+                    className: "moonx-flex-between",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "ghost",
@@ -8211,11 +8217,11 @@ var FundingSelection = function FundingSelection(param) {
                                 visibility: "hidden"
                             },
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowLeft, {
-                                className: "moonkey-icon--sm moonkey-icon--fg"
+                                className: "moonx-icon--sm moonx-icon--fg"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                            className: "moonkey-text--title",
+                            className: "moonx-text--title",
                             children: _optionalChain([
                                 uiConfig,
                                 'optionalAccess',
@@ -8233,13 +8239,13 @@ var FundingSelection = function FundingSelection(param) {
                             size: "icon",
                             onClick: onClose,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                                className: "moonkey-icon--sm moonkey-icon--fg"
+                                className: "moonx-icon--sm moonx-icon--fg"
                             })
                         })
                     ]
                 }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     style: {
                         marginTop: "1rem",
                         gap: "0.5rem"
@@ -8247,7 +8253,7 @@ var FundingSelection = function FundingSelection(param) {
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FundingOptionButton, {
                             icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CreditCard, {
-                                className: "moonkey-icon--fg"
+                                className: "moonx-icon--fg"
                             }),
                             label: "Pay with card",
                             onClick: function onClick() {
@@ -8256,7 +8262,7 @@ var FundingSelection = function FundingSelection(param) {
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FundingOptionButton, {
                             icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.QrCode, {
-                                className: "moonkey-icon--fg"
+                                className: "moonx-icon--fg"
                             }),
                             label: "Receive funds",
                             onClick: function onClick() {
@@ -8312,7 +8318,7 @@ function FundingSuccess(param) {
         }
     ]));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -8340,39 +8346,39 @@ function FundingSuccess(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-center",
+                    className: "moonx-flex-center",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-success-bounce 0.8s ease-out 0.1s both"
+                            animation: "moonx-success-bounce 0.8s ease-out 0.1s both"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircle2, {
-                            className: "moonkey-icon--2xl moonkey-icon--success"
+                            className: "moonx-icon--2xl moonx-icon--success"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--lg moonkey-text--semibold moonkey-text--center",
+                    className: "moonx-text--lg moonx-text--semibold moonx-text--center",
                     style: {
                         paddingTop: "3rem"
                     },
                     children: "Funding Successful"
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--center",
+                    className: "moonx-text--center",
                     style: {
                         paddingTop: "2.5rem",
                         paddingLeft: "0.5rem",
                         paddingRight: "0.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: "Your wallet has been funded successfully. The funds should appear in your account shortly."
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: onClose,
                             children: "Done"
@@ -8438,7 +8444,7 @@ var LoadingSpinner = function LoadingSpinner(param) {
                                     position: "absolute",
                                     inset: 0,
                                     borderRadius: "50%",
-                                    border: "4px solid var(--moonkey-color-background-2)"
+                                    border: "4px solid var(--moonx-color-background-2)"
                                 }
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -8447,8 +8453,8 @@ var LoadingSpinner = function LoadingSpinner(param) {
                                     inset: 0,
                                     borderRadius: "50%",
                                     border: "4px solid transparent",
-                                    borderTopColor: "var(--moonkey-color-accent)",
-                                    animation: "moonkey-spin 1s linear infinite"
+                                    borderTopColor: "var(--moonx-color-accent)",
+                                    animation: "moonx-spin 1s linear infinite"
                                 }
                             }),
                             (iconUrl || iconComponent) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -8493,7 +8499,7 @@ var LoadingSpinner = function LoadingSpinner(param) {
             }),
             text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                 style: {
-                    color: "var(--moonkey-color-foreground-3)",
+                    color: "var(--moonx-color-foreground-3)",
                     fontSize: "0.875rem"
                 },
                 children: text
@@ -8786,7 +8792,7 @@ var PayWithCard = function PayWithCard(param) {
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
             children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-between",
+                    className: "moonx-flex-between",
                     style: {
                         marginBottom: "1.5rem"
                     },
@@ -8796,11 +8802,11 @@ var PayWithCard = function PayWithCard(param) {
                             size: "icon",
                             onClick: onClose,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowLeft, {
-                                className: "moonkey-icon--sm moonkey-icon--fg"
+                                className: "moonx-icon--sm moonx-icon--fg"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-text--title",
+                            className: "moonx-text--title",
                             style: {
                                 fontWeight: 600,
                                 flex: 1,
@@ -8813,7 +8819,7 @@ var PayWithCard = function PayWithCard(param) {
                             size: "icon",
                             onClick: onClose,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                                className: "moonkey-icon--sm moonkey-icon--fg"
+                                className: "moonx-icon--sm moonx-icon--fg"
                             })
                         })
                     ]
@@ -8823,7 +8829,7 @@ var PayWithCard = function PayWithCard(param) {
                         gap: "1.5rem",
                         padding: "1rem"
                     },
-                    className: "moonkey-flex-col-center",
+                    className: "moonx-flex-col-center",
                     children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSpinner, {
@@ -8831,7 +8837,7 @@ var PayWithCard = function PayWithCard(param) {
                                 iconUrl: moonpay_default
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-text--secondary moonkey-text--center",
+                                className: "moonx-text--secondary moonx-text--center",
                                 style: {
                                     maxWidth: "320px"
                                 },
@@ -8841,7 +8847,7 @@ var PayWithCard = function PayWithCard(param) {
                     }) : popupBlocked ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-icon--muted moonkey-text--center",
+                                className: "moonx-icon--muted moonx-text--center",
                                 style: {
                                     fontSize: "1rem",
                                     fontWeight: 700,
@@ -8850,7 +8856,7 @@ var PayWithCard = function PayWithCard(param) {
                                 children: "Popup blocked"
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-text--secondary moonkey-text--center",
+                                className: "moonx-text--secondary moonx-text--center",
                                 style: {
                                     maxWidth: "320px"
                                 },
@@ -8863,7 +8869,7 @@ var PayWithCard = function PayWithCard(param) {
                                     maxWidth: "320px",
                                     marginTop: "1rem"
                                 },
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, {
                                         onClick: handleManualOpen,
@@ -8871,7 +8877,7 @@ var PayWithCard = function PayWithCard(param) {
                                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ExternalLink, {
                                                 size: 16,
                                                 style: {
-                                                    color: "var(--moonkey-color-accent-foreground)"
+                                                    color: "var(--moonx-color-accent-foreground)"
                                                 }
                                             }),
                                             "Try Opening Again"
@@ -8892,7 +8898,7 @@ var PayWithCard = function PayWithCard(param) {
                                 iconUrl: moonpay_default
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-text--secondary moonkey-text--center",
+                                className: "moonx-text--secondary moonx-text--center",
                                 style: {
                                     maxWidth: "320px"
                                 },
@@ -8904,7 +8910,7 @@ var PayWithCard = function PayWithCard(param) {
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ExternalLink, {
                                         size: 16,
-                                        className: "moonkey-icon--fg"
+                                        className: "moonx-icon--fg"
                                     }),
                                     "Reopen Payment Window"
                                 ]
@@ -9006,12 +9012,12 @@ var GeneratedQRCode = function GeneratedQRCode(param) {
         padding: "2rem"
     };
     var errorTextStyle = {
-        color: "var(--moonkey-color-error)",
+        color: "var(--moonx-color-error)",
         fontSize: "0.875rem",
         marginBottom: "0.5rem"
     };
     var errorDetailStyle = {
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         fontSize: "0.75rem"
     };
     var containerStyle = {
@@ -9034,13 +9040,13 @@ var GeneratedQRCode = function GeneratedQRCode(param) {
         borderRadius: "50%",
         height: "3rem",
         width: "3rem",
-        borderBottom: "2px solid var(--moonkey-color-accent)",
+        borderBottom: "2px solid var(--moonx-color-accent)",
         marginBottom: "1rem"
     };
     var loadingTextStyle = {
         fontSize: "1.125rem",
         fontWeight: 500,
-        color: "var(--moonkey-color-foreground)"
+        color: "var(--moonx-color-foreground)"
     };
     var qrContainerStyle = {
         display: "flex",
@@ -9155,7 +9161,7 @@ var ReceiveFundsQRCode = function ReceiveFundsQRCode(param) {
     };
     var qrCodeUri = "".concat(walletType, ":").concat(walletAddress);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: "moonkey-flex-col-center",
+        className: "moonx-flex-col-center",
         style: {
             position: "relative",
             gap: "1rem"
@@ -9170,21 +9176,21 @@ var ReceiveFundsQRCode = function ReceiveFundsQRCode(param) {
                 height: 225
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-col-center",
+                className: "moonx-flex-col-center",
                 style: {
                     gap: "0.5rem",
                     width: "100%"
                 },
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flex-between",
+                        className: "moonx-flex-between",
                         style: {
                             width: "100%",
                             marginBottom: "0.5rem"
                         },
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-text--secondary moonkey-text--semibold",
+                                className: "moonx-text--secondary moonx-text--semibold",
                                 children: [
                                     "Your ",
                                     walletType === "solana" ? "Solana" : "Ethereum",
@@ -9194,10 +9200,10 @@ var ReceiveFundsQRCode = function ReceiveFundsQRCode(param) {
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", {
                                 style: {
                                     padding: "0.25rem 0.75rem",
-                                    backgroundColor: isCopied ? "var(--moonkey-color-success)" : "var(--moonkey-color-accent)",
+                                    backgroundColor: isCopied ? "var(--moonx-color-success)" : "var(--moonx-color-accent)",
                                     color: "white",
                                     border: "none",
-                                    borderRadius: "var(--moonkey-border-radius-md)",
+                                    borderRadius: "var(--moonx-border-radius-md)",
                                     fontSize: "0.75rem",
                                     fontWeight: 500,
                                     cursor: "pointer",
@@ -9209,12 +9215,12 @@ var ReceiveFundsQRCode = function ReceiveFundsQRCode(param) {
                                 onClick: handleCopyAddress,
                                 onMouseEnter: function onMouseEnter(e) {
                                     if (!isCopied) {
-                                        e.currentTarget.style.backgroundColor = "var(--moonkey-color-accent-dark)";
+                                        e.currentTarget.style.backgroundColor = "var(--moonx-color-accent-dark)";
                                     }
                                 },
                                 onMouseLeave: function onMouseLeave(e) {
                                     if (!isCopied) {
-                                        e.currentTarget.style.backgroundColor = "var(--moonkey-color-accent)";
+                                        e.currentTarget.style.backgroundColor = "var(--moonx-color-accent)";
                                     }
                                 },
                                 children: isCopied ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
@@ -9268,10 +9274,10 @@ var ReceiveFundsQRCode = function ReceiveFundsQRCode(param) {
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
                             fontSize: "0.75rem",
-                            color: "var(--moonkey-color-foreground)",
-                            backgroundColor: "var(--moonkey-color-background-2)",
+                            color: "var(--moonx-color-foreground)",
+                            backgroundColor: "var(--moonx-color-background-2)",
                             padding: "0.5rem 0.75rem",
-                            borderRadius: "var(--moonkey-border-radius-md)",
+                            borderRadius: "var(--moonx-border-radius-md)",
                             wordBreak: "break-all",
                             textAlign: "center",
                             width: "100%"
@@ -9363,7 +9369,7 @@ var ReceivedFunds = function ReceivedFunds(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-between",
+                className: "moonx-flex-between",
                 style: {
                     marginBottom: "0.5rem"
                 },
@@ -9373,11 +9379,11 @@ var ReceivedFunds = function ReceivedFunds(param) {
                         size: "icon",
                         onClick: onClose,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowLeft, {
-                            className: "moonkey-icon--sm moonkey-icon--fg"
+                            className: "moonx-icon--sm moonx-icon--fg"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--title",
+                        className: "moonx-text--title",
                         style: {
                             fontWeight: 600,
                             flex: 1
@@ -9395,13 +9401,13 @@ var ReceivedFunds = function ReceivedFunds(param) {
                         size: "icon",
                         onClick: onClose,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--sm moonkey-icon--fg"
+                            className: "moonx-icon--sm moonx-icon--fg"
                         })
                     })
                 ]
             }),
             isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flex-col-center",
+                className: "moonx-flex-col-center",
                 style: {
                     justifyContent: "center",
                     padding: "3rem",
@@ -9411,7 +9417,7 @@ var ReceivedFunds = function ReceivedFunds(param) {
                     children: "Loading wallet information..."
                 })
             }) : error ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-col-center moonkey-text--error",
+                className: "moonx-flex-col-center moonx-text--error",
                 style: {
                     justifyContent: "center",
                     padding: "3rem",
@@ -9430,13 +9436,13 @@ var ReceivedFunds = function ReceivedFunds(param) {
                     })
                 ]
             }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-col-center",
+                className: "moonx-flex-col-center",
                 style: {
                     padding: "0.5rem"
                 },
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--center",
+                        className: "moonx-text--secondary moonx-text--center",
                         style: {
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -9820,37 +9826,37 @@ var ImportWallet = function ImportWallet(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                        className: "moonkey-icon--sm"
+                        className: "moonx-icon--sm"
                     })
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-header",
+                className: "moonx-flow-header",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--heading",
+                        className: "moonx-text--heading",
                         children: title
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: description
                     })
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-content",
+                className: "moonx-flow-content",
                 style: {
                     gap: "0.75rem"
                 },
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flex-col",
+                        className: "moonx-flex-col",
                         style: {
                             gap: "0.5rem"
                         },
@@ -9867,7 +9873,7 @@ var ImportWallet = function ImportWallet(param) {
                                 spellCheck: false,
                                 autoComplete: "off",
                                 disabled: submitting,
-                                className: "moonkey-mono-textarea"
+                                className: "moonx-mono-textarea"
                             })
                         ]
                     }),
@@ -9886,7 +9892,7 @@ var ImportWallet = function ImportWallet(param) {
                                 style: {
                                     display: "block",
                                     fontWeight: 500,
-                                    color: "var(--moonkey-color-foreground)"
+                                    color: "var(--moonx-color-foreground)"
                                 },
                                 children: successText
                             }),
@@ -9895,7 +9901,7 @@ var ImportWallet = function ImportWallet(param) {
                                     display: "block",
                                     fontFamily: "monospace",
                                     fontSize: "0.75rem",
-                                    color: "var(--moonkey-color-foreground-3)",
+                                    color: "var(--moonx-color-foreground-3)",
                                     wordBreak: "break-all"
                                 },
                                 children: importedWallet.public_address
@@ -9927,17 +9933,17 @@ var SocialLoginButton = function SocialLoginButton(param) {
     var icon = param.icon, text = param.text, provider = param.provider, onSocialLoginClick = param.onSocialLoginClick;
     var _react3_useState_call = _sliced_to_array(_react3.useState.call(void 0, false), 2), isHovered = _react3_useState_call[0], setIsHovered = _react3_useState_call[1];
     var buttonStyle = {
-        borderRadius: "var(--moonx-radius-button, var(--moonkey-border-radius-lg))",
+        borderRadius: "var(--moonx-radius-button, var(--moonx-border-radius-lg))",
         borderWidth: "var(--moonx-button-border-width, 1px)",
         borderStyle: "solid",
-        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))",
+        borderColor: isHovered ? "var(--moonx-button-border-color-hover, var(--moonx-color-accent))" : "var(--moonx-button-border-color, var(--moonx-color-border))",
+        color: "var(--moonx-button-fg, var(--moonx-color-foreground))",
         paddingTop: "0.75rem",
         paddingBottom: "0.75rem",
         paddingLeft: "0.25rem",
         paddingRight: "0.25rem",
         cursor: "pointer",
-        backgroundColor: isHovered ? "var(--moonx-button-bg-hover, var(--moonkey-color-background-2))" : "var(--moonx-button-bg, transparent)",
+        backgroundColor: isHovered ? "var(--moonx-button-bg-hover, var(--moonx-color-background-2))" : "var(--moonx-button-bg, transparent)",
         marginTop: "0.75rem",
         transition: "all 0.2s ease-in-out"
     };
@@ -9961,7 +9967,7 @@ var SocialLoginButton = function SocialLoginButton(param) {
                 }
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: cx("moonkey-social-login-button"),
+                className: cx("moonx-social-login-button"),
                 style: buttonStyle,
                 onMouseEnter: function onMouseEnter() {
                     return setIsHovered(true);
@@ -10004,7 +10010,7 @@ var AppleLogin = function AppleLogin(param) {
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", {
             d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z",
             transform: "translate(-2, -2)",
-            fill: "var(--moonkey-color-foreground, #000)"
+            fill: "var(--moonx-color-foreground, #000)"
         })
     });
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SocialLoginButton, {
@@ -10054,12 +10060,12 @@ var GoogleLogin = function GoogleLogin(param) {
 var ConnectSolanaWalletButton = function ConnectSolanaWalletButton(param) {
     var onConnectWalletClick = param.onConnectWalletClick;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: cx("moonkey-external-wallet-btn", "moonkey-connect-solana-wallet-button"),
+        className: cx("moonx-external-wallet-btn", "moonx-connect-solana-wallet-button"),
         onClick: function onClick() {
             return onConnectWalletClick();
         },
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: "moonkey-external-wallet-btn__inner",
+            className: "moonx-external-wallet-btn__inner",
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                     style: {
@@ -10081,12 +10087,12 @@ var ConnectSolanaWalletButton = function ConnectSolanaWalletButton(param) {
 var ConnectEthereumWalletButton = function ConnectEthereumWalletButton(param) {
     var onWalletConnectClick = param.onWalletConnectClick;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-external-wallet-btn",
+        className: "moonx-external-wallet-btn",
         onClick: function onClick() {
             return onWalletConnectClick();
         },
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: "moonkey-external-wallet-btn__inner",
+            className: "moonx-external-wallet-btn__inner",
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                     style: {
@@ -12234,7 +12240,7 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         width: "5rem",
         height: "5rem",
         borderRadius: "50%",
-        border: "4px solid var(--moonkey-color-border)"
+        border: "4px solid var(--moonx-color-border)"
     };
     var spinnerInnerStyles = {
         position: "absolute",
@@ -12243,7 +12249,7 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         height: "5rem",
         borderRadius: "50%",
         border: "4px solid transparent",
-        borderTopColor: "var(--moonkey-color-accent)",
+        borderTopColor: "var(--moonx-color-accent)",
         animation: "spin 1s linear infinite"
     };
     var errorRingStyles = {
@@ -12252,7 +12258,7 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         width: "5rem",
         height: "5rem",
         borderRadius: "50%",
-        border: "4px solid var(--moonkey-color-error)"
+        border: "4px solid var(--moonx-color-error)"
     };
     var iconInnerContainerStyles = {
         position: "absolute",
@@ -12265,7 +12271,7 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         width: "3rem",
         height: "3rem",
         borderRadius: "50%",
-        backgroundColor: "var(--moonkey-color-background-2)",
+        backgroundColor: "var(--moonx-color-background-2)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
@@ -12278,7 +12284,7 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         width: "4rem",
         height: "4rem",
         borderRadius: "50%",
-        backgroundColor: "var(--moonkey-color-background-2)",
+        backgroundColor: "var(--moonx-color-background-2)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
@@ -12294,12 +12300,12 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
     var titleStyles = {
         fontSize: "1.125rem",
         fontWeight: 500,
-        color: "var(--moonkey-color-foreground)",
+        color: "var(--moonx-color-foreground)",
         marginBottom: "0.5rem"
     };
     var descriptionStyles = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground-3)"
+        color: "var(--moonx-color-foreground-3)"
     };
     var contentContainerStyles = {
         textAlign: "center",
@@ -12308,24 +12314,24 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
     };
     var successDescriptionStyles = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         marginBottom: "1rem"
     };
     var addressStyles = {
         fontSize: "0.75rem",
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         fontFamily: "monospace",
-        backgroundColor: "var(--moonkey-color-background-2)",
+        backgroundColor: "var(--moonx-color-background-2)",
         padding: "0.5rem 0.75rem",
-        borderRadius: "var(--moonkey-border-radius-md)"
+        borderRadius: "var(--moonx-border-radius-md)"
     };
     var errorBoxStyles = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-error)",
+        color: "var(--moonx-color-error)",
         marginBottom: "1rem",
         padding: "0.75rem 1rem",
-        backgroundColor: "var(--moonkey-color-background-2)",
-        borderRadius: "var(--moonkey-border-radius-md)"
+        backgroundColor: "var(--moonx-color-background-2)",
+        borderRadius: "var(--moonx-border-radius-md)"
     };
     var buttonContainerStyles = {
         display: "flex",
@@ -12336,7 +12342,7 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         bottom: 0,
         left: 0,
         right: 0,
-        backgroundColor: "var(--moonkey-color-background)",
+        backgroundColor: "var(--moonx-color-background)",
         paddingTop: "1rem",
         paddingBottom: "3rem",
         marginBottom: "0.125rem",
@@ -12344,8 +12350,8 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         marginRight: "0.125rem",
         paddingLeft: "2rem",
         paddingRight: "2rem",
-        borderBottomLeftRadius: "var(--moonkey-border-radius-lg)",
-        borderBottomRightRadius: "var(--moonkey-border-radius-lg)"
+        borderBottomLeftRadius: "var(--moonx-border-radius-lg)",
+        borderBottomRightRadius: "var(--moonx-border-radius-lg)"
     };
     var primaryButtonStyles = {
         flex: 1,
@@ -12353,9 +12359,9 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
         paddingBottom: "0.75rem",
         paddingLeft: "1rem",
         paddingRight: "1rem",
-        backgroundColor: isTryAgainHovered ? "var(--moonkey-color-accent-dark)" : "var(--moonkey-color-accent)",
-        border: "1px solid var(--moonkey-color-border)",
-        borderRadius: "var(--moonkey-border-radius-lg)",
+        backgroundColor: isTryAgainHovered ? "var(--moonx-color-accent-dark)" : "var(--moonx-color-accent)",
+        border: "1px solid var(--moonx-color-border)",
+        borderRadius: "var(--moonx-border-radius-lg)",
         color: "white",
         transition: "background-color 0.2s",
         cursor: "pointer",
@@ -12364,10 +12370,10 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
     var successButtonStyles = {
         width: "100%",
         padding: "0.75rem 1.5rem",
-        backgroundColor: "var(--moonkey-color-success)",
+        backgroundColor: "var(--moonx-color-success)",
         color: "#ffffff",
         border: "none",
-        borderRadius: "var(--moonkey-border-radius-md)",
+        borderRadius: "var(--moonx-border-radius-md)",
         fontSize: "0.875rem",
         fontWeight: 500,
         cursor: "pointer",
@@ -12376,10 +12382,10 @@ var BrowserExtensionUI = function BrowserExtensionUI(param) {
     var secondaryButtonStyles = {
         width: "100%",
         padding: "0.75rem 1.5rem",
-        backgroundColor: isBackHovered ? "var(--moonkey-color-accent-dark)" : "var(--moonkey-color-accent)",
-        color: "var(--moonkey-color-accent-foreground)",
+        backgroundColor: isBackHovered ? "var(--moonx-color-accent-dark)" : "var(--moonx-color-accent)",
+        color: "var(--moonx-color-accent-foreground)",
         border: "none",
-        borderRadius: "var(--moonkey-border-radius-md)",
+        borderRadius: "var(--moonx-border-radius-md)",
         fontSize: "0.875rem",
         fontWeight: 500,
         cursor: "pointer",
@@ -12830,7 +12836,7 @@ var QRCodeUI = function QRCodeUI(param) {
     };
     var subtitleStyle = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground-3)"
+        color: "var(--moonx-color-foreground-3)"
     };
     var stateContainerStyle = {
         display: "flex",
@@ -12864,7 +12870,7 @@ var QRCodeUI = function QRCodeUI(param) {
         width: "5rem",
         height: "5rem",
         borderRadius: "50%",
-        border: "4px solid var(--moonkey-color-border)"
+        border: "4px solid var(--moonx-color-border)"
     };
     var spinnerAnimStyle = {
         position: "absolute",
@@ -12873,7 +12879,7 @@ var QRCodeUI = function QRCodeUI(param) {
         height: "5rem",
         borderRadius: "50%",
         border: "4px solid transparent",
-        borderTopColor: "var(--moonkey-color-accent)",
+        borderTopColor: "var(--moonx-color-accent)",
         animation: "spin 1s linear infinite"
     };
     var spinnerCenterStyle = {
@@ -12887,7 +12893,7 @@ var QRCodeUI = function QRCodeUI(param) {
         width: "3rem",
         height: "3rem",
         borderRadius: "50%",
-        backgroundColor: "var(--moonkey-color-background-2)",
+        backgroundColor: "var(--moonx-color-background-2)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
@@ -12903,18 +12909,18 @@ var QRCodeUI = function QRCodeUI(param) {
     var textLgStyle = {
         fontSize: "1.125rem",
         fontWeight: 500,
-        color: "var(--moonkey-color-foreground)",
+        color: "var(--moonx-color-foreground)",
         marginBottom: "0.5rem"
     };
     var textSmStyle = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground-3)"
+        color: "var(--moonx-color-foreground-3)"
     };
     var successIconStyle = {
         borderRadius: "50%",
         height: "3rem",
         width: "3rem",
-        backgroundColor: "var(--moonkey-color-background-2)",
+        backgroundColor: "var(--moonx-color-background-2)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -12924,11 +12930,11 @@ var QRCodeUI = function QRCodeUI(param) {
         borderRadius: "50%",
         height: "2rem",
         width: "2rem",
-        backgroundColor: "var(--moonkey-color-success)"
+        backgroundColor: "var(--moonx-color-success)"
     };
     var accountStyle = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         marginTop: "0.5rem",
         fontFamily: "monospace"
     };
@@ -12938,18 +12944,18 @@ var QRCodeUI = function QRCodeUI(param) {
         width: "5rem",
         height: "5rem",
         borderRadius: "50%",
-        border: "4px solid var(--moonkey-color-error)"
+        border: "4px solid var(--moonx-color-error)"
     };
     var errorMessageStyle = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-error)",
+        color: "var(--moonx-color-error)",
         marginBottom: "1rem",
         paddingLeft: "1rem",
         paddingRight: "1rem",
         paddingTop: "0.75rem",
         paddingBottom: "0.75rem",
-        backgroundColor: "var(--moonkey-color-background-2)",
-        borderRadius: "var(--moonkey-border-radius-lg)"
+        backgroundColor: "var(--moonx-color-background-2)",
+        borderRadius: "var(--moonx-border-radius-lg)"
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
         children: [
@@ -13183,7 +13189,7 @@ var WalletConnectionUI = function WalletConnectionUI(param) {
     var spacerStyles = {
         fontSize: "1.125rem",
         fontWeight: 500,
-        color: "var(--moonkey-color-foreground)"
+        color: "var(--moonx-color-foreground)"
     };
     var deepLinkContainerStyles = {
         display: "flex",
@@ -13191,8 +13197,8 @@ var WalletConnectionUI = function WalletConnectionUI(param) {
         alignItems: "center",
         gap: "1.5rem",
         padding: "1.5rem",
-        backgroundColor: "var(--moonkey-color-background)",
-        borderRadius: "var(--moonkey-border-radius-md)",
+        backgroundColor: "var(--moonx-color-background)",
+        borderRadius: "var(--moonx-border-radius-md)",
         boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)"
     };
     var walletImageStyles = {
@@ -13208,19 +13214,19 @@ var WalletConnectionUI = function WalletConnectionUI(param) {
         fontSize: "1.25rem",
         fontWeight: 600,
         marginBottom: "0.5rem",
-        color: "var(--moonkey-color-foreground)"
+        color: "var(--moonx-color-foreground)"
     };
     var descriptionStyles = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground-3)"
+        color: "var(--moonx-color-foreground-3)"
     };
     var deepLinkButtonStyles = {
         width: "100%",
         padding: "1rem 1.5rem",
-        backgroundColor: isDeepLinkHovered ? "var(--moonkey-color-accent-dark)" : "var(--moonkey-color-accent)",
-        color: "var(--moonkey-color-accent-foreground)",
+        backgroundColor: isDeepLinkHovered ? "var(--moonx-color-accent-dark)" : "var(--moonx-color-accent)",
+        color: "var(--moonx-color-accent-foreground)",
         border: "none",
-        borderRadius: "var(--moonkey-border-radius-md)",
+        borderRadius: "var(--moonx-border-radius-md)",
         fontSize: "0.875rem",
         fontWeight: 500,
         cursor: "pointer",
@@ -13233,12 +13239,12 @@ var WalletConnectionUI = function WalletConnectionUI(param) {
     var infoBoxStyles = {
         width: "100%",
         padding: "1rem",
-        backgroundColor: "var(--moonkey-color-accent)",
-        borderRadius: "var(--moonkey-border-radius-md)"
+        backgroundColor: "var(--moonx-color-accent)",
+        borderRadius: "var(--moonx-border-radius-md)"
     };
     var infoTextStyles = {
         fontSize: "0.75rem",
-        color: "var(--moonkey-color-accent-foreground)",
+        color: "var(--moonx-color-accent-foreground)",
         textAlign: "center"
     };
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RootCard, {
@@ -13417,10 +13423,10 @@ var WalletCard = function WalletCard(param) {
         gap: "0.5rem",
         position: "relative",
         padding: "0.75rem 0.25rem",
-        border: "1px solid ".concat(isHovered ? "var(--moonkey-color-accent)" : "var(--moonkey-color-border)"),
-        borderRadius: "var(--moonkey-border-radius-lg)",
+        border: "1px solid ".concat(isHovered ? "var(--moonx-color-accent)" : "var(--moonx-color-border)"),
+        borderRadius: "var(--moonx-border-radius-lg)",
         transition: "all 0.2s",
-        backgroundColor: "var(--moonkey-color-background)",
+        backgroundColor: "var(--moonx-color-background)",
         cursor: "pointer"
     };
     var imageContainerStyle = {
@@ -13437,13 +13443,13 @@ var WalletCard = function WalletCard(param) {
         right: 0,
         width: "0.75rem",
         height: "0.75rem",
-        backgroundColor: "var(--moonkey-color-success)",
+        backgroundColor: "var(--moonx-color-success)",
         borderRadius: "50%",
-        border: "2px solid var(--moonkey-color-background)"
+        border: "2px solid var(--moonx-color-background)"
     };
     var textStyle = {
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground)",
+        color: "var(--moonx-color-foreground)",
         transition: "color 0.2s"
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", {
@@ -13638,12 +13644,12 @@ var WalletListScreen = function WalletListScreen(param) {
             width: "3rem",
             height: "3rem",
             border: "2px solid transparent",
-            borderBottomColor: "var(--moonkey-color-accent)",
+            borderBottomColor: "var(--moonx-color-accent)",
             borderRadius: "50%",
             animation: "spin 1s linear infinite"
         };
         var loadingTextStyles = {
-            color: "var(--moonkey-color-foreground-3)",
+            color: "var(--moonx-color-foreground-3)",
             fontSize: "0.875rem"
         };
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
@@ -13692,25 +13698,25 @@ var WalletListScreen = function WalletListScreen(param) {
             gap: "1rem"
         };
         var errorIconStyles = {
-            color: "var(--moonkey-color-error)",
+            color: "var(--moonx-color-error)",
             fontSize: "1.125rem"
         };
         var errorTitleStyles = {
-            color: "var(--moonkey-color-foreground)",
+            color: "var(--moonx-color-foreground)",
             fontWeight: 500,
             fontSize: "0.875rem"
         };
         var errorMessageStyles = {
-            color: "var(--moonkey-color-foreground-3)",
+            color: "var(--moonx-color-foreground-3)",
             fontSize: "0.875rem",
             textAlign: "center"
         };
         var retryButtonStyles = {
             padding: "0.5rem 1rem",
-            backgroundColor: isRetryHovered ? "var(--moonkey-color-accent-dark)" : "var(--moonkey-color-accent)",
-            color: "var(--moonkey-color-accent-foreground)",
+            backgroundColor: isRetryHovered ? "var(--moonx-color-accent-dark)" : "var(--moonx-color-accent)",
+            color: "var(--moonx-color-accent-foreground)",
             border: "none",
-            borderRadius: "var(--moonkey-border-radius-md)",
+            borderRadius: "var(--moonx-border-radius-md)",
             cursor: "pointer",
             fontSize: "0.875rem",
             fontWeight: 500,
@@ -13770,7 +13776,7 @@ var WalletListScreen = function WalletListScreen(param) {
     var titleStyles = {
         fontSize: "1rem",
         fontWeight: 500,
-        color: "var(--moonkey-color-foreground)"
+        color: "var(--moonx-color-foreground)"
     };
     var contentStyles = {
         display: "flex",
@@ -13784,11 +13790,11 @@ var WalletListScreen = function WalletListScreen(param) {
     var searchInputStyles = {
         width: "100%",
         padding: "0.75rem 1rem 0.75rem 2.5rem",
-        border: "1px solid var(--moonkey-color-border)",
-        borderRadius: "var(--moonkey-border-radius-lg)",
+        border: "1px solid var(--moonx-color-border)",
+        borderRadius: "var(--moonx-border-radius-lg)",
         fontSize: "0.875rem",
-        color: "var(--moonkey-color-foreground)",
-        backgroundColor: "var(--moonkey-color-background)",
+        color: "var(--moonx-color-foreground)",
+        backgroundColor: "var(--moonx-color-background)",
         outline: "none",
         transition: "border-color 0.2s ease, box-shadow 0.2s ease"
     };
@@ -13798,7 +13804,7 @@ var WalletListScreen = function WalletListScreen(param) {
         top: "0.875rem",
         width: "1rem",
         height: "1rem",
-        color: "var(--moonkey-color-foreground-3)"
+        color: "var(--moonx-color-foreground-3)"
     };
     var walletListContainerStyles = {
         height: "300px",
@@ -13811,12 +13817,12 @@ var WalletListScreen = function WalletListScreen(param) {
         padding: "2rem 1rem"
     };
     var emptyTitleStyles = {
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         fontSize: "0.875rem",
         marginBottom: "0.5rem"
     };
     var emptySubtitleStyles = {
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         fontSize: "0.75rem",
         opacity: 0.7
     };
@@ -13827,7 +13833,7 @@ var WalletListScreen = function WalletListScreen(param) {
     };
     var dividerStyles = {
         margin: "0.2rem 0",
-        borderTop: "1px solid var(--moonkey-color-border)"
+        borderTop: "1px solid var(--moonx-color-border)"
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
         centerContent: false,
@@ -13846,7 +13852,7 @@ var WalletListScreen = function WalletListScreen(param) {
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", {
                 dangerouslySetInnerHTML: {
-                    __html: "\n          .wallet-list-container::-webkit-scrollbar {\n            display: none;\n          }\n          .wallet-search-input:focus {\n            border-color: var(--moonkey-color-accent);\n            box-shadow: 0 0 0 2px var(--moonkey-color-accent);\n          }\n        "
+                    __html: "\n          .wallet-list-container::-webkit-scrollbar {\n            display: none;\n          }\n          .wallet-search-input:focus {\n            border-color: var(--moonx-color-accent);\n            box-shadow: 0 0 0 2px var(--moonx-color-accent);\n          }\n        "
                 }
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
@@ -14113,7 +14119,7 @@ var WalletConnectFlow = function WalletConnectFlow(param) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
             style: {
                 minHeight: "100vh",
-                backgroundColor: "var(--moonkey-color-background-2)",
+                backgroundColor: "var(--moonx-color-background-2)",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
@@ -14125,25 +14131,25 @@ var WalletConnectFlow = function WalletConnectFlow(param) {
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-spin 1s linear infinite",
+                            animation: "moonx-spin 1s linear infinite",
                             borderRadius: "50%",
                             height: "4rem",
                             width: "4rem",
-                            borderBottom: "2px solid var(--moonkey-color-accent)",
+                            borderBottom: "2px solid var(--moonx-color-accent)",
                             margin: "0 auto 1rem"
                         }
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
                         style: {
                             fontSize: "1.25rem",
-                            color: "var(--moonkey-color-foreground-3)"
+                            color: "var(--moonx-color-foreground-3)"
                         },
                         children: "Initializing WalletConnect..."
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
                         style: {
                             fontSize: "0.875rem",
-                            color: "var(--moonkey-color-foreground-3)",
+                            color: "var(--moonx-color-foreground-3)",
                             marginTop: "0.5rem"
                         },
                         children: "Please wait a moment"
@@ -14187,12 +14193,12 @@ var WalletConnectFlow = function WalletConnectFlow(param) {
 var WalletFlowButton = function WalletFlowButton(param) {
     var onWalletFlowClick = param.onWalletFlowClick;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: cx("moonkey-external-wallet-btn", "moonkey-connect-solana-wallet-button"),
+        className: cx("moonx-external-wallet-btn", "moonx-connect-solana-wallet-button"),
         onClick: function onClick() {
             return onWalletFlowClick();
         },
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: "moonkey-external-wallet-btn__inner",
+            className: "moonx-external-wallet-btn__inner",
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                     style: {
@@ -14285,18 +14291,18 @@ var NetworkSelection = function NetworkSelection(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-between",
+                className: "moonx-flex-between",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onBack,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowLeft, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-label",
+                        className: "moonx-label",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                             children: "Select Network"
                         })
@@ -14308,20 +14314,20 @@ var NetworkSelection = function NetworkSelection(param) {
                             visibility: "hidden"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-col",
+                className: "moonx-flex-col",
                 style: {
                     gap: "1rem",
                     marginTop: "1.5rem"
                 },
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flex-col-center",
+                        className: "moonx-flex-col-center",
                         style: {
                             gap: "0.5rem",
                             marginBottom: "0.5rem"
@@ -14330,45 +14336,45 @@ var NetworkSelection = function NetworkSelection(param) {
                             walletIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                                 src: walletIcon,
                                 alt: walletName,
-                                className: "moonkey-icon--2xl",
+                                className: "moonx-icon--2xl",
                                 style: {
-                                    borderRadius: "var(--moonkey-border-radius-md)"
+                                    borderRadius: "var(--moonx-border-radius-md)"
                                 }
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                className: "moonkey-text--title moonkey-text--lg",
+                                className: "moonx-text--title moonx-text--lg",
                                 children: walletName
                             })
                         ]
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                        className: "moonkey-text--secondary moonkey-text--center",
+                        className: "moonx-text--secondary moonx-text--center",
                         style: {
                             marginBottom: "0.25rem"
                         },
                         children: "This wallet supports multiple networks. Choose which network you'd like to connect with:"
                     }),
                     supportedNetworks.includes("ethereum") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-wallet-item",
+                        className: "moonx-wallet-item",
                         onClick: function onClick() {
                             return onNetworkSelect("ethereum");
                         },
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                        className: "moonkey-text--title",
+                                        className: "moonx-text--title",
                                         children: "Ethereum"
                                     }),
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                        className: "moonkey-text--secondary",
+                                        className: "moonx-text--secondary",
                                         children: "Connect with Ethereum network"
                                     })
                                 ]
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-network-badge",
+                                className: "moonx-network-badge",
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                                     src: ethereum_default,
                                     alt: "Ethereum",
@@ -14382,26 +14388,26 @@ var NetworkSelection = function NetworkSelection(param) {
                         ]
                     }),
                     supportedNetworks.includes("solana") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-wallet-item",
+                        className: "moonx-wallet-item",
                         onClick: function onClick() {
                             return onNetworkSelect("solana");
                         },
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                        className: "moonkey-text--title",
+                                        className: "moonx-text--title",
                                         children: "Solana"
                                     }),
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                        className: "moonkey-text--secondary",
+                                        className: "moonx-text--secondary",
                                         children: "Connect with Solana network"
                                     })
                                 ]
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-network-badge",
+                                className: "moonx-network-badge",
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                                     src: solana_default,
                                     alt: "Solana",
@@ -15122,46 +15128,46 @@ var SolanaConnectionUI = function SolanaConnectionUI(param) {
         }, 100);
     };
     var spinnerWidget = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: "moonkey-wallet-spinner",
+        className: "moonx-wallet-spinner",
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-wallet-spinner__ring"
+                className: "moonx-wallet-spinner__ring"
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-wallet-spinner__spin"
+                className: "moonx-wallet-spinner__spin"
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-wallet-spinner__center",
+                className: "moonx-wallet-spinner__center",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                     src: walletIcon,
                     alt: walletName,
-                    className: "moonkey-icon--lg"
+                    className: "moonx-icon--lg"
                 })
             })
         ]
     });
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: "moonkey-flex-col-center",
+        className: "moonx-flex-col-center",
         children: [
             (connectionState === "connecting" || connectionState === "signing") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-connect-state",
+                className: "moonx-connect-state",
                 children: [
                     spinnerWidget,
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-text--center",
+                        className: "moonx-text--center",
                         style: {
                             marginTop: "1rem"
                         },
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-label moonkey-text--lg",
+                                className: "moonx-label moonx-text--lg",
                                 style: {
                                     marginBottom: "0.5rem"
                                 },
                                 children: connectionState === "connecting" ? "Connecting to ".concat(walletName) : "Sign Message to Verify"
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-text--secondary",
+                                className: "moonx-text--secondary",
                                 children: connectionState === "connecting" ? "Opening your wallet..." : "Please sign the message in your wallet to complete authentication"
                             })
                         ]
@@ -15169,39 +15175,39 @@ var SolanaConnectionUI = function SolanaConnectionUI(param) {
                 ]
             }),
             (connectionState === "error" || connectionState === "rejected") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-connect-state",
+                className: "moonx-connect-state",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-wallet-spinner",
+                        className: "moonx-wallet-spinner",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-wallet-spinner__ring moonkey-wallet-spinner__ring--error"
+                                className: "moonx-wallet-spinner__ring moonx-wallet-spinner__ring--error"
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-wallet-spinner__center",
+                                className: "moonx-wallet-spinner__center",
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                                     src: walletIcon,
                                     alt: walletName,
-                                    className: "moonkey-icon--lg"
+                                    className: "moonx-icon--lg"
                                 })
                             })
                         ]
                     }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-text--center",
+                        className: "moonx-text--center",
                         style: {
                             marginTop: "1rem"
                         },
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-label moonkey-text--lg",
+                                className: "moonx-label moonx-text--lg",
                                 style: {
                                     marginBottom: "0.5rem"
                                 },
                                 children: connectionState === "error" ? "Connection Failed" : "Connection Rejected"
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-box moonkey-box--error moonkey-text--error",
+                                className: "moonx-box moonx-box--error moonx-text--error",
                                 style: {
                                     marginBottom: "1rem"
                                 },
@@ -15434,7 +15440,7 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-between",
+                className: "moonx-flex-between",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
@@ -15443,11 +15449,11 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                             return onCancel();
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowLeft, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-label",
+                        className: "moonx-label",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                             children: "Select a wallet"
                         })
@@ -15462,13 +15468,13 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                             return onCancel();
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flex-col",
+                className: "moonx-flex-col",
                 style: {
                     marginTop: "1rem",
                     gap: "0.75rem"
@@ -15486,13 +15492,13 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                                 onChange: function onChange(e) {
                                     return setSearchValue(e.target.value);
                                 },
-                                className: "moonkey-input",
+                                className: "moonx-input",
                                 style: {
                                     paddingLeft: "2.5rem"
                                 }
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
-                                className: "moonkey-search-icon moonkey-icon--sm",
+                                className: "moonx-search-icon moonx-icon--sm",
                                 fill: "none",
                                 stroke: "currentColor",
                                 viewBox: "0 0 24 24",
@@ -15506,26 +15512,26 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                         ]
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-scrollable-list",
+                        className: "moonx-scrollable-list",
                         style: {
                             height: "300px",
                             gap: "0.5rem"
                         },
                         children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-text--secondary moonkey-flex-center",
+                            className: "moonx-text--secondary moonx-flex-center",
                             style: {
                                 padding: "2rem 1rem"
                             },
                             children: "Loading wallets..."
                         }) : filteredWallets.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-text--secondary moonkey-text--center",
+                            className: "moonx-text--secondary moonx-text--center",
                             style: {
                                 padding: "2rem 1rem"
                             },
                             children: "No wallets found"
                         }) : filteredWallets.map(function(wallet) {
                             return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-wallet-item",
+                                className: "moonx-wallet-item",
                                 onClick: function onClick() {
                                     return onWalletSelect(wallet);
                                 },
@@ -15557,7 +15563,7 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                                         })
                                     }),
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                        className: "moonkey-text--sm moonkey-icon--fg",
+                                        className: "moonx-text--sm moonx-icon--fg",
                                         style: {
                                             transition: "color 0.2s"
                                         },
@@ -15573,7 +15579,7 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                                         },
                                         children: [
                                             wallet.supportedNetworks.includes("ethereum") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                                className: "moonkey-network-badge",
+                                                className: "moonx-network-badge",
                                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                                                     src: ethereum_default,
                                                     alt: "Ethereum",
@@ -15585,7 +15591,7 @@ var UnifiedWalletList = function UnifiedWalletList(param) {
                                                 })
                                             }),
                                             wallet.supportedNetworks.includes("solana") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                                className: "moonkey-network-badge" + (wallet.supportedNetworks.includes("ethereum") ? " moonkey-network-badge--overlap" : ""),
+                                                className: "moonx-network-badge" + (wallet.supportedNetworks.includes("ethereum") ? " moonx-network-badge--overlap" : ""),
                                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                                                     src: solana_default,
                                                     alt: "Solana",
@@ -15839,18 +15845,18 @@ var WalletsFlow = function WalletsFlow(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-between",
+                    className: "moonx-flex-between",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "ghost",
                             size: "icon",
                             onClick: handleBack,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowLeft, {
-                                className: "moonkey-icon--sm"
+                                className: "moonx-icon--sm"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-text--title",
+                            className: "moonx-text--title",
                             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
                                 children: [
                                     "Connect ",
@@ -15866,13 +15872,13 @@ var WalletsFlow = function WalletsFlow(param) {
                             },
                             onClick: handleBack,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                                className: "moonkey-icon--sm"
+                                className: "moonx-icon--sm"
                             })
                         })
                     ]
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     style: {
                         marginTop: "1rem"
                     },
@@ -15924,7 +15930,7 @@ var WalletsFlow = function WalletsFlow(param) {
                     }
                 ]),
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-connect-state",
+                    className: "moonx-connect-state",
                     style: {
                         gap: "1rem"
                     },
@@ -15934,13 +15940,13 @@ var WalletsFlow = function WalletsFlow(param) {
                                 width: "3rem",
                                 height: "3rem",
                                 border: "2px solid transparent",
-                                borderBottomColor: "var(--moonkey-color-accent)",
+                                borderBottomColor: "var(--moonx-color-accent)",
                                 borderRadius: "50%",
-                                animation: "moonkey-spin 1s linear infinite"
+                                animation: "moonx-spin 1s linear infinite"
                             }
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                            className: "moonkey-text--secondary",
+                            className: "moonx-text--secondary",
                             children: "Initializing WalletConnect..."
                         })
                     ]
@@ -16047,10 +16053,10 @@ var TermsAndPrivacy = function TermsAndPrivacy(param) {
         });
     };
     if (require_users_accept_terms) {
-        var checkboxId = "moonkey-terms-checkbox";
+        var checkboxId = "moonx-terms-checkbox";
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", {
             htmlFor: checkboxId,
-            className: "moonkey-legal-text moonkey-legal-checkbox",
+            className: "moonx-legal-text moonx-legal-checkbox",
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", {
                     id: checkboxId,
@@ -16073,7 +16079,7 @@ var TermsAndPrivacy = function TermsAndPrivacy(param) {
         });
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-legal-text",
+        className: "moonx-legal-text",
         children: renderLinks()
     });
 };
@@ -16383,14 +16389,14 @@ var LoginLanding = function LoginLanding(param) {
         ]),
         children: [
             !hideClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     "aria-label": "Close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
-                        className: "moonkey-icon--md",
+                        className: "moonx-icon--md",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -16404,9 +16410,9 @@ var LoginLanding = function LoginLanding(param) {
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-header",
+                className: "moonx-header",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-header__inner",
+                    className: "moonx-header__inner",
                     children: _optionalChain([
                         config,
                         'optionalAccess',
@@ -16433,13 +16439,13 @@ var LoginLanding = function LoginLanding(param) {
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-content-wrapper",
+                className: "moonx-content-wrapper",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-logo-section",
+                        className: "moonx-logo-section",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-logo-section__inner",
+                                className: "moonx-logo-section__inner",
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                                     appConfig: appConfig,
                                     src: _optionalChain([
@@ -16480,7 +16486,7 @@ var LoginLanding = function LoginLanding(param) {
                                     return _747.loginHeaderDescription;
                                 }
                             ]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-description",
+                                className: "moonx-description",
                                 children: _optionalChain([
                                     config,
                                     'optionalAccess',
@@ -16500,10 +16506,10 @@ var LoginLanding = function LoginLanding(param) {
                         ]
                     }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-form-section",
+                        className: "moonx-form-section",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-login-gateable".concat(loginGated ? " moonkey-login-gated" : ""),
+                                className: "moonx-login-gateable".concat(loginGated ? " moonx-login-gated" : ""),
                                 "aria-disabled": loginGated,
                                 children: [
                                     showEmail && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailOtpInput, {
@@ -16559,7 +16565,7 @@ var LoginLanding = function LoginLanding(param) {
                                         }
                                     }),
                                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                        className: "moonkey-social-buttons moonkey-flex-col",
+                                        className: "moonx-social-buttons moonx-flex-col",
                                         children: [
                                             showGoogle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GoogleLogin, {
                                                 onLoginClick: function onLoginClick() {
@@ -16574,7 +16580,7 @@ var LoginLanding = function LoginLanding(param) {
                                         ]
                                     }),
                                     showWallet && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                        className: "moonkey-wallet-section moonkey-flex-col",
+                                        className: "moonx-wallet-section moonx-flex-col",
                                         style: {
                                             gap: "0.75rem"
                                         },
@@ -16644,7 +16650,7 @@ var OAuth = function OAuth(param) {
         }
     ]));
     var googleIcon = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
-        className: "moonkey-icon--xl",
+        className: "moonx-icon--xl",
         viewBox: "0 0 24 24",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
@@ -16667,13 +16673,13 @@ var OAuth = function OAuth(param) {
         ]
     });
     var appleIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
-        className: "moonkey-icon--xl",
+        className: "moonx-icon--xl",
         viewBox: "0 0 20 20",
         xmlns: "http://www.w3.org/2000/svg",
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", {
             d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z",
             transform: "translate(-2, -2)",
-            fill: "var(--moonkey-color-foreground, #000)"
+            fill: "var(--moonx-color-foreground, #000)"
         })
     });
     var getIcon = function getIcon() {
@@ -16712,7 +16718,7 @@ var OAuth = function OAuth(param) {
             }
         ]),
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: cx("moonkey-oauth-container", "moonkey-flex-col-center", "moonkey-text--center"),
+            className: cx("moonx-oauth-container", "moonx-flex-col-center", "moonx-text--center"),
             style: {
                 paddingBottom: "0.25rem",
                 paddingLeft: "0.5rem",
@@ -16721,10 +16727,10 @@ var OAuth = function OAuth(param) {
             },
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-logo",
+                    className: "moonx-flow-logo",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                         appConfig: appConfig,
-                        className: "moonkey-icon--lg"
+                        className: "moonx-icon--lg"
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -16733,7 +16739,7 @@ var OAuth = function OAuth(param) {
                         gap: "1rem",
                         justifyContent: "center"
                     },
-                    className: "moonkey-flex-col-center",
+                    className: "moonx-flex-col-center",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSpinner, {
                         iconComponent: getIcon(),
                         size: "md",
@@ -17140,17 +17146,17 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
                 }
             ]),
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: cx("moonkey-passkey-enroll", "moonkey-passkey-success", "moonkey-modal-content"),
+                className: cx("moonx-passkey-enroll", "moonx-passkey-success", "moonx-modal-content"),
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-logo",
+                        className: "moonx-flow-logo",
                         style: {
                             paddingTop: "1rem"
                         },
                         children: customLogoUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                             src: customLogoUrl,
                             alt: "",
-                            className: "moonkey-icon--lg",
+                            className: "moonx-icon--lg",
                             style: {
                                 objectFit: "contain"
                             }
@@ -17163,18 +17169,18 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircle2, {
-                        className: "moonkey-icon--2xl moonkey-icon--success"
+                        className: "moonx-icon--2xl moonx-icon--success"
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--title moonkey-text--xl",
+                        className: "moonx-text--title moonx-text--xl",
                         children: successTitleText
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary",
+                        className: "moonx-text--secondary",
                         children: successDescriptionText
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-btn-stack",
+                        className: "moonx-btn-stack",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: finish,
                             children: successDoneButtonText
@@ -17210,17 +17216,17 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
             }
         ]),
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: cx("moonkey-passkey-enroll", "moonkey-modal-content"),
+            className: cx("moonx-passkey-enroll", "moonx-modal-content"),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-logo",
+                    className: "moonx-flow-logo",
                     style: {
                         paddingTop: "1rem"
                     },
                     children: customLogoUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
                         src: customLogoUrl,
                         alt: "",
-                        className: "moonkey-icon--lg",
+                        className: "moonx-icon--lg",
                         style: {
                             objectFit: "contain"
                         }
@@ -17233,18 +17239,18 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Fingerprint, {
-                    className: "moonkey-icon--xl moonkey-icon--accent"
+                    className: "moonx-icon--xl moonx-icon--accent"
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--title moonkey-text--xl",
+                    className: "moonx-text--title moonx-text--xl",
                     children: titleText
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--secondary",
+                    className: "moonx-text--secondary",
                     children: descriptionText
                 }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     style: {
                         gap: "0.75rem",
                         width: "100%",
@@ -17252,10 +17258,10 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
                     },
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                            className: "moonkey-feature-item",
+                            className: "moonx-feature-item",
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ShieldCheck, {
-                                    className: "moonkey-icon--accent",
+                                    className: "moonx-icon--accent",
                                     style: {
                                         width: "1.25rem",
                                         height: "1.25rem",
@@ -17268,10 +17274,10 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
                             ]
                         }),
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                            className: "moonkey-feature-item",
+                            className: "moonx-feature-item",
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CloudCog, {
-                                    className: "moonkey-icon--accent",
+                                    className: "moonx-icon--accent",
                                     style: {
                                         width: "1.25rem",
                                         height: "1.25rem",
@@ -17289,7 +17295,7 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
                     children: errorMessage
                 }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-btn-stack",
+                    className: "moonx-btn-stack",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: enroll,
@@ -17308,6 +17314,31 @@ var PasskeyEnroll = function PasskeyEnroll(param) {
     });
 };
 // src/components/flows/send-ethereum-transaction-flow/send-ethereum-transaction-flow.tsx
+// src/lib/verify-ethereum-transaction.ts
+var ETHEREUM_TX_PREVIEW_MISMATCH = "ETHEREUM_TX_PREVIEW_MISMATCH";
+function canonicalSerializedForSigning(transaction, serializedTransaction) {
+    return _async_to_generator(function() {
+        var canonical;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    return [
+                        4,
+                        _lib.serializeEthereumTransaction.call(void 0, transaction)
+                    ];
+                case 1:
+                    canonical = _state.sent();
+                    if (canonical.toLowerCase() !== serializedTransaction.toLowerCase()) {
+                        throw new Error(ETHEREUM_TX_PREVIEW_MISMATCH);
+                    }
+                    return [
+                        2,
+                        canonical
+                    ];
+            }
+        });
+    })();
+}
 // src/components/flows/send-ethereum-transaction-flow/send-ethereum-transaction.tsx
 var SendEthereumTransaction = function SendEthereumTransaction(param) {
     var publishableKey = param.publishableKey, transaction = param.transaction, wallet = param.wallet, rpcUrl = param.rpcUrl, network = param.network, onConfirm = param.onConfirm, onCancel = param.onCancel, uiConfig = param.uiConfig, onAdvancedDetailsClick = param.onAdvancedDetailsClick, _param_isSending = param.isSending, isSending = _param_isSending === void 0 ? false : _param_isSending, onConfirmTransactionLoaded = param.onConfirmTransactionLoaded, propsIsDark = param.isDark, config = param.config;
@@ -17433,7 +17464,7 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
         console.error("Failed to get confirm transaction:", error2 || "Unknown error");
     };
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -17461,35 +17492,35 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onCancel,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flow-header",
+                    className: "moonx-flow-header",
                     style: {
                         marginTop: "1rem"
                     },
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-flow-logo",
+                            className: "moonx-flow-logo",
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                                 appConfig: appConfig,
-                                className: "moonkey-icon--lg"
+                                className: "moonx-icon--lg"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-label",
+                            className: "moonx-label",
                             children: t("sendTransaction.confirmTransaction")
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-text--secondary",
+                            className: "moonx-text--secondary",
                             children: t("sendTransaction.wantsPermission", {
                                 companyName: _optionalChain([
                                     appConfig,
@@ -17503,7 +17534,7 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                     ]
                 }),
                 isLoadingError ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-col-center",
+                    className: "moonx-flex-col-center",
                     style: {
                         textAlign: "center",
                         marginTop: "2rem",
@@ -17512,17 +17543,17 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                                className: "moonkey-icon--lg moonkey-icon--error"
+                                className: "moonx-icon--lg moonx-icon--error"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                    className: "moonkey-label",
+                                    className: "moonx-label",
                                     children: "Error detected"
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                    className: "moonkey-text--secondary",
+                                    className: "moonx-text--secondary",
                                     style: {
                                         marginTop: "1rem"
                                     },
@@ -17532,12 +17563,12 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                         })
                     ]
                 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     style: {
                         marginTop: "1rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-detail-card__rows",
+                        className: "moonx-detail-card__rows",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                                 style: {
@@ -17562,7 +17593,7 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                                             }
                                         ]) || "", 8, 8),
                                         value: isLoadingConfirm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                            className: "moonkey-skeleton",
+                                            className: "moonx-skeleton",
                                             style: {
                                                 height: "1rem",
                                                 width: "4rem"
@@ -17599,7 +17630,7 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                     label: t("sendTransaction.estimatedFee"),
                                     value: isLoadingConfirm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                        className: "moonkey-skeleton",
+                                        className: "moonx-skeleton",
                                         style: {
                                             height: "1rem",
                                             width: "4rem"
@@ -17635,10 +17666,10 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                                     },
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ListCheck, {
-                                            className: "moonkey-icon--sm"
+                                            className: "moonx-icon--sm"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                            className: "moonkey-label",
+                                            className: "moonx-label",
                                             children: isLoadingConfirm ? t("common.loading") : t("sendTransaction.viewAdvancedDetails")
                                         })
                                     ]
@@ -17648,9 +17679,9 @@ var SendEthereumTransaction = function SendEthereumTransaction(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 variant: "outline",
@@ -17725,7 +17756,7 @@ function SendEthereumTransactionFailed(param) {
         }
     ]));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -17753,29 +17784,29 @@ function SendEthereumTransactionFailed(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onClose,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--md"
+                            className: "moonx-icon--md"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-center",
+                    className: "moonx-flex-center",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-error-bounce 0.8s ease-out 0.1s both"
+                            animation: "moonx-error-bounce 0.8s ease-out 0.1s both"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                            className: "moonkey-icon--2xl moonkey-icon--error"
+                            className: "moonx-icon--2xl moonx-icon--error"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--heading",
+                    className: "moonx-text--heading",
                     style: {
                         paddingTop: "2rem"
                     },
@@ -17794,7 +17825,7 @@ function SendEthereumTransactionFailed(param) {
                         paddingRight: "0.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -17811,7 +17842,7 @@ function SendEthereumTransactionFailed(param) {
                         marginTop: "1.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--sm moonkey-text--semibold",
+                        className: "moonx-text--sm moonx-text--semibold",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -17822,9 +17853,9 @@ function SendEthereumTransactionFailed(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-error-scroll",
+                    className: "moonx-error-scroll",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         style: {
                             padding: "0 0.5rem"
                         },
@@ -17832,9 +17863,9 @@ function SendEthereumTransactionFailed(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: onClose,
                             children: _optionalChain([
@@ -17895,7 +17926,7 @@ function SendEthereumTransactionSuccess(param) {
         }
     ]));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -17923,18 +17954,18 @@ function SendEthereumTransactionSuccess(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-center",
+                    className: "moonx-flex-center",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-success-bounce 0.8s ease-out 0.1s both"
+                            animation: "moonx-success-bounce 0.8s ease-out 0.1s both"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircle2, {
-                            className: "moonkey-icon--2xl moonkey-icon--success"
+                            className: "moonx-icon--2xl moonx-icon--success"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--heading",
+                    className: "moonx-text--heading",
                     style: {
                         paddingTop: "2rem"
                     },
@@ -17953,7 +17984,7 @@ function SendEthereumTransactionSuccess(param) {
                         paddingRight: "0.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -17964,9 +17995,9 @@ function SendEthereumTransactionSuccess(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-detail-card",
+                    className: "moonx-detail-card",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-detail-card__rows",
+                        className: "moonx-detail-card__rows",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                 label: t("sendTransaction.success.transactionCompleteNetwork"),
@@ -17978,7 +18009,7 @@ function SendEthereumTransactionSuccess(param) {
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                 label: t("sendTransaction.success.transactionCompleteTotal"),
                                 value: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                    className: "moonkey-flex-col",
+                                    className: "moonx-flex-col",
                                     style: {
                                         textAlign: "right"
                                     },
@@ -17987,7 +18018,7 @@ function SendEthereumTransactionSuccess(param) {
                                             children: transactionSummary.totalFiat
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                            className: "moonkey-text--secondary",
+                                            className: "moonx-text--secondary",
                                             children: transactionSummary.totalCrypto
                                         })
                                     ]
@@ -18168,7 +18199,7 @@ function TransactionDetails(param) {
     ]);
     if (loading) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-            className: "moonkey-flow-overlay",
+            className: "moonx-flow-overlay",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RootCard, {
                 centerContent: false,
                 isDark: isDark,
@@ -18200,7 +18231,7 @@ function TransactionDetails(param) {
                         textAlign: "center"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary",
+                        className: "moonx-text--secondary",
                         children: "Loading transaction details..."
                     })
                 })
@@ -18209,7 +18240,7 @@ function TransactionDetails(param) {
     }
     if (error) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-            className: "moonkey-flow-overlay",
+            className: "moonx-flow-overlay",
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
                 centerContent: false,
                 isDark: isDark,
@@ -18237,18 +18268,18 @@ function TransactionDetails(param) {
                 ]),
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-close",
+                        className: "moonx-flow-close",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "ghost",
                             size: "icon",
                             onClick: onClose,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                                className: "moonkey-icon--md"
+                                className: "moonx-icon--md"
                             })
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flex-col-center",
+                        className: "moonx-flex-col-center",
                         style: {
                             padding: "2rem",
                             textAlign: "center",
@@ -18261,7 +18292,7 @@ function TransactionDetails(param) {
                                     width: "3rem",
                                     height: "3rem",
                                     borderRadius: "50%",
-                                    backgroundColor: "var(--moonkey-color-error)",
+                                    backgroundColor: "var(--moonx-color-error)",
                                     opacity: 0.1,
                                     display: "flex",
                                     alignItems: "center",
@@ -18270,7 +18301,7 @@ function TransactionDetails(param) {
                                 },
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                                     style: {
-                                        color: "var(--moonkey-color-error)",
+                                        color: "var(--moonx-color-error)",
                                         fontSize: "1.5rem",
                                         fontWeight: "bold"
                                     },
@@ -18284,7 +18315,7 @@ function TransactionDetails(param) {
                                 children: "Unable to Load Transaction"
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-text--secondary",
+                                className: "moonx-text--secondary",
                                 style: {
                                     marginBottom: "1rem",
                                     maxWidth: "300px"
@@ -18294,9 +18325,9 @@ function TransactionDetails(param) {
                         ]
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer",
+                        className: "moonx-flow-footer",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-flow-footer__actions",
+                            className: "moonx-flow-footer__actions",
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 onClick: onClose,
                                 variant: "default",
@@ -18316,7 +18347,7 @@ function TransactionDetails(param) {
         });
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -18344,23 +18375,23 @@ function TransactionDetails(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onClose,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--md"
+                            className: "moonx-icon--md"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-header",
+                    className: "moonx-flow-header",
                     style: {
                         marginTop: "1rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-label",
+                        className: "moonx-label",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -18371,7 +18402,7 @@ function TransactionDetails(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-scrollable-list",
+                    className: "moonx-scrollable-list",
                     style: {
                         height: "300px",
                         margin: "1rem 0.75rem 0"
@@ -18382,14 +18413,14 @@ function TransactionDetails(param) {
                         },
                         children: transactionDetails.map(function(section) {
                             return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 style: {
                                     justifyContent: "space-between",
                                     marginBottom: "1.5rem"
                                 },
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", {
-                                        className: "moonkey-label",
+                                        className: "moonx-label",
                                         style: {
                                             marginBottom: "0.75rem"
                                         },
@@ -18405,7 +18436,7 @@ function TransactionDetails(param) {
                                                 paddingTop: "0.5rem",
                                                 paddingBottom: "0.5rem"
                                             }, index < section.details.length - 1 && {
-                                                borderBottom: "1px solid var(--moonkey-color-border)"
+                                                borderBottom: "1px solid var(--moonx-color-border)"
                                             })
                                         }, index);
                                     })
@@ -18415,9 +18446,9 @@ function TransactionDetails(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: onClose,
                             variant: "default",
@@ -18445,6 +18476,12 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
     var _react3_useState_call1 = _sliced_to_array(_react3.useState.call(void 0, ""), 2), transactionHash = _react3_useState_call1[0], setTransactionHash = _react3_useState_call1[1];
     var _react3_useState_call2 = _sliced_to_array(_react3.useState.call(void 0, null), 2), confirmTransactionData = _react3_useState_call2[0], setConfirmTransactionData = _react3_useState_call2[1];
     var _react3_useState_call3 = _sliced_to_array(_react3.useState.call(void 0, false), 2), isSending = _react3_useState_call3[0], setIsSending = _react3_useState_call3[1];
+    var _react3_useState_call4 = _sliced_to_array(_react3.useState.call(void 0, function() {
+        return structuredClone(sendTransactionRequest);
+    }), 1), request = _react3_useState_call4[0];
+    var _react3_useState_call5 = _sliced_to_array(_react3.useState.call(void 0, function() {
+        return structuredClone(wallet);
+    }), 1), requestWallet = _react3_useState_call5[0];
     var onConfirm = function onConfirm() {
         handleSend();
     };
@@ -18463,15 +18500,15 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
     };
     var handleSend = function handleSend() {
         return _async_to_generator(function() {
-            var client, _ref, userHandleB64url, credentialIdB64url, presenceTokens, signed, broadcastResponse, broadcast, hash, parentClient, error;
+            var client, serializedToSign, _ref, userHandleB64url, credentialIdB64url, presenceTokens, signed, broadcastResponse, broadcast, hash, parentClient, error;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
                         _state.trys.push([
                             0,
-                            5,
+                            6,
                             ,
-                            6
+                            7
                         ]);
                         setIsSending(true);
                         client = getIframeClient(publishableKey);
@@ -18483,27 +18520,33 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
                         }
                         return [
                             4,
-                            onAssertPasskey()
+                            canonicalSerializedForSigning(request.transaction, request.serializedTransaction)
                         ];
                     case 1:
+                        serializedToSign = _state.sent();
+                        return [
+                            4,
+                            onAssertPasskey()
+                        ];
+                    case 2:
                         _ref = _state.sent(), userHandleB64url = _ref.userHandleB64url, credentialIdB64url = _ref.credentialIdB64url, presenceTokens = _ref.presenceTokens;
                         return [
                             4,
                             client.send(_utils.PostMessageType.WALLET, _utils.PostMessageMethod.SIGN_TRANSACTION, {
                                 publishableKey: publishableKey,
-                                serializedTransaction: sendTransactionRequest.serializedTransaction,
-                                wallet: wallet,
+                                serializedTransaction: serializedToSign,
+                                wallet: requestWallet,
                                 options: options,
                                 userHandleB64url: userHandleB64url,
                                 credentialIdB64url: credentialIdB64url,
                                 presenceTokens: presenceTokens
                             })
                         ];
-                    case 2:
+                    case 3:
                         signed = _state.sent();
                         return [
                             4,
-                            fetch(sendTransactionRequest.rpcUrl, {
+                            fetch(request.rpcUrl, {
                                 method: "POST",
                                 headers: {
                                     "Content-Type": "application/json"
@@ -18518,13 +18561,13 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
                                 })
                             })
                         ];
-                    case 3:
+                    case 4:
                         broadcastResponse = _state.sent();
                         return [
                             4,
                             broadcastResponse.json()
                         ];
-                    case 4:
+                    case 5:
                         broadcast = _state.sent();
                         if (broadcast.error) {
                             setIsSending(false);
@@ -18563,23 +18606,23 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
                                     return _878({
                                         hash: hash,
                                         signature: signed.signature,
-                                        metadata: sendTransactionRequest.metadata
+                                        metadata: request.metadata
                                     });
                                 }
                             ]);
                         }, getWaitBeforeCloseTime());
                         return [
                             3,
-                            6
+                            7
                         ];
-                    case 5:
+                    case 6:
                         error = _state.sent();
                         setIsSending(false);
                         setCurrentStep("failed");
                         return [
                             2
                         ];
-                    case 6:
+                    case 7:
                         return [
                             2
                         ];
@@ -18619,10 +18662,10 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
     if (currentStep === "confirm") {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SendEthereumTransaction, {
             publishableKey: publishableKey,
-            transaction: sendTransactionRequest.transaction,
-            wallet: wallet,
-            rpcUrl: sendTransactionRequest.rpcUrl,
-            network: sendTransactionRequest.network,
+            transaction: request.serializedTransaction,
+            wallet: requestWallet,
+            rpcUrl: request.rpcUrl,
+            network: request.network,
             onCancel: handleCancel,
             onConfirm: onConfirm,
             onAdvancedDetailsClick: onAdvancedDetailsClick,
@@ -18651,7 +18694,7 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
         });
     }
     if (currentStep === "success") {
-        var txData = typeof sendTransactionRequest.transaction === "string" ? null : sendTransactionRequest.transaction;
+        var txData = typeof request.transaction === "string" ? null : request.transaction;
         var ethAmount = _optionalChain([
             txData,
             'optionalAccess',
@@ -18682,7 +18725,7 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
         var estimatedFeesWei = BigInt(maxFeePerGas) * BigInt(gasLimit);
         var estimatedFeesEth = (Number(estimatedFeesWei) / 1e18).toFixed(6);
         var cryptoDisplay = _optionalChain([
-            sendTransactionRequest,
+            request,
             'access',
             function(_887) {
                 return _887.metadata;
@@ -18691,7 +18734,7 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
             function(_888) {
                 return _888.estimatedTokens;
             }
-        ]) ? "".concat(ethAmount, " ETH → ").concat(sendTransactionRequest.metadata.estimatedTokens, " ").concat(sendTransactionRequest.metadata.tokenSymbol || "tokens") : "".concat(ethAmount, " ETH");
+        ]) ? "".concat(ethAmount, " ETH → ").concat(request.metadata.estimatedTokens, " ").concat(request.metadata.tokenSymbol || "tokens") : "".concat(ethAmount, " ETH");
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SendEthereumTransactionSuccess, {
             uiConfig: _optionalChain([
                 options,
@@ -18705,10 +18748,10 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
                 }
             ]),
             transactionSummary: {
-                walletAddress: wallet.public_address,
+                walletAddress: requestWallet.public_address,
                 totalCrypto: cryptoDisplay,
                 totalFiat: _optionalChain([
-                    sendTransactionRequest,
+                    request,
                     'access',
                     function(_891) {
                         return _891.metadata;
@@ -18719,7 +18762,7 @@ var SendEthereumTransactionFlow = function SendEthereumTransactionFlow(param) {
                     }
                 ]) || "$0.00",
                 fees: "".concat(estimatedFeesEth, " ETH"),
-                network: sendTransactionRequest.network || "Ethereum Mainnet"
+                network: request.network || "Ethereum Mainnet"
             },
             config: config
         });
@@ -18921,7 +18964,7 @@ var SendTransaction = function SendTransaction(param) {
         console.error("Failed to get confirm transaction:", error2 || "Unknown error");
     };
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -18949,31 +18992,31 @@ var SendTransaction = function SendTransaction(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onCancel,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--sm"
+                            className: "moonx-icon--sm"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flow-header",
+                    className: "moonx-flow-header",
                     style: {
                         marginTop: "1rem"
                     },
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-flow-logo",
+                            className: "moonx-flow-logo",
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                                 appConfig: appConfig,
-                                className: "moonkey-icon--lg"
+                                className: "moonx-icon--lg"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-label",
+                            className: "moonx-label",
                             children: _optionalChain([
                                 uiConfig,
                                 'optionalAccess',
@@ -18983,7 +19026,7 @@ var SendTransaction = function SendTransaction(param) {
                             ]) || t("sendTransaction.confirmTransaction")
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-text--secondary",
+                            className: "moonx-text--secondary",
                             children: _optionalChain([
                                 uiConfig,
                                 'optionalAccess',
@@ -19003,7 +19046,7 @@ var SendTransaction = function SendTransaction(param) {
                     ]
                 }),
                 isLoadingError ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flex-col-center moonkey-text--center",
+                    className: "moonx-flex-col-center moonx-text--center",
                     style: {
                         marginTop: "2rem",
                         gap: "0.5rem"
@@ -19011,17 +19054,17 @@ var SendTransaction = function SendTransaction(param) {
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                                className: "moonkey-icon--lg moonkey-icon--error"
+                                className: "moonx-icon--lg moonx-icon--error"
                             })
                         }),
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                    className: "moonkey-label",
+                                    className: "moonx-label",
                                     children: "Error detected"
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                    className: "moonkey-text--secondary",
+                                    className: "moonx-text--secondary",
                                     style: {
                                         marginTop: "1rem"
                                     },
@@ -19031,15 +19074,15 @@ var SendTransaction = function SendTransaction(param) {
                         })
                     ]
                 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-col",
+                    className: "moonx-flex-col",
                     style: {
                         marginTop: "1rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-detail-card__rows",
+                        className: "moonx-detail-card__rows",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 style: {
                                     paddingLeft: "0.5rem",
                                     paddingRight: "0.5rem",
@@ -19054,7 +19097,7 @@ var SendTransaction = function SendTransaction(param) {
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                         label: formatAddress(walletAddress, 8, 8),
                                         value: isLoadingConfirm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                            className: "moonkey-skeleton",
+                                            className: "moonx-skeleton",
                                             style: {
                                                 height: "1rem",
                                                 width: "4rem"
@@ -19091,7 +19134,7 @@ var SendTransaction = function SendTransaction(param) {
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                     label: t("sendTransaction.estimatedFee"),
                                     value: isLoadingConfirm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                        className: "moonkey-skeleton",
+                                        className: "moonx-skeleton",
                                         style: {
                                             height: "1rem",
                                             width: "4rem"
@@ -19127,10 +19170,10 @@ var SendTransaction = function SendTransaction(param) {
                                     },
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ListCheck, {
-                                            className: "moonkey-icon--sm"
+                                            className: "moonx-icon--sm"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                            className: "moonkey-label",
+                                            className: "moonx-label",
                                             children: isLoadingConfirm ? t("common.loading") : t("sendTransaction.viewAdvancedDetails")
                                         })
                                     ]
@@ -19140,9 +19183,9 @@ var SendTransaction = function SendTransaction(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 variant: "outline",
@@ -19217,7 +19260,7 @@ function SendTransactionFailed(param) {
         }
     ]));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -19245,29 +19288,29 @@ function SendTransactionFailed(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onClose,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--md"
+                            className: "moonx-icon--md"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-center",
+                    className: "moonx-flex-center",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-error-bounce 0.8s ease-out 0.1s both"
+                            animation: "moonx-error-bounce 0.8s ease-out 0.1s both"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                            className: "moonkey-icon--2xl moonkey-icon--error"
+                            className: "moonx-icon--2xl moonx-icon--error"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--heading",
+                    className: "moonx-text--heading",
                     style: {
                         paddingTop: "2rem"
                     },
@@ -19280,13 +19323,13 @@ function SendTransactionFailed(param) {
                     ]) || t("sendTransaction.failure.transactionFailed")
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--center",
+                    className: "moonx-text--center",
                     style: {
                         paddingLeft: "0.5rem",
                         paddingRight: "0.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -19303,7 +19346,7 @@ function SendTransactionFailed(param) {
                         marginTop: "1.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--sm moonkey-text--semibold",
+                        className: "moonx-text--sm moonx-text--semibold",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -19314,9 +19357,9 @@ function SendTransactionFailed(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-error-scroll",
+                    className: "moonx-error-scroll",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         style: {
                             padding: "0 0.5rem"
                         },
@@ -19324,9 +19367,9 @@ function SendTransactionFailed(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: onClose,
                             children: _optionalChain([
@@ -19387,7 +19430,7 @@ function SendTransactionSuccess(param) {
         }
     ]));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -19415,18 +19458,18 @@ function SendTransactionSuccess(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flex-center",
+                    className: "moonx-flex-center",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                         style: {
-                            animation: "moonkey-success-bounce 0.8s ease-out 0.1s both"
+                            animation: "moonx-success-bounce 0.8s ease-out 0.1s both"
                         },
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircle2, {
-                            className: "moonkey-icon--2xl moonkey-icon--success"
+                            className: "moonx-icon--2xl moonx-icon--success"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--heading",
+                    className: "moonx-text--heading",
                     style: {
                         paddingTop: "2rem"
                     },
@@ -19439,13 +19482,13 @@ function SendTransactionSuccess(param) {
                     ]) || t("sendTransaction.success.transactionComplete")
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-text--center",
+                    className: "moonx-text--center",
                     style: {
                         paddingLeft: "0.5rem",
                         paddingRight: "0.5rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -19456,9 +19499,9 @@ function SendTransactionSuccess(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-detail-card",
+                    className: "moonx-detail-card",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-detail-card__rows",
+                        className: "moonx-detail-card__rows",
                         children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                 label: t("sendTransaction.success.transactionCompleteNetwork"),
@@ -19470,7 +19513,7 @@ function SendTransactionSuccess(param) {
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DetailRow, {
                                 label: t("sendTransaction.success.transactionCompleteTotal"),
                                 value: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                    className: "moonkey-flex-col",
+                                    className: "moonx-flex-col",
                                     style: {
                                         textAlign: "right"
                                     },
@@ -19479,7 +19522,7 @@ function SendTransactionSuccess(param) {
                                             children: transactionSummary.totalFiat
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-                                            className: "moonkey-text--secondary",
+                                            className: "moonx-text--secondary",
                                             children: transactionSummary.totalCrypto
                                         })
                                     ]
@@ -19639,7 +19682,7 @@ function SimulateTransactionDetails(param) {
     ]);
     if (loading) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-            className: "moonkey-flow-overlay",
+            className: "moonx-flow-overlay",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RootCard, {
                 centerContent: false,
                 isDark: isDark,
@@ -19671,7 +19714,7 @@ function SimulateTransactionDetails(param) {
                         textAlign: "center"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary",
+                        className: "moonx-text--secondary",
                         children: "Loading transaction details..."
                     })
                 })
@@ -19680,7 +19723,7 @@ function SimulateTransactionDetails(param) {
     }
     if (error) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-            className: "moonkey-flow-overlay",
+            className: "moonx-flow-overlay",
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
                 centerContent: false,
                 isDark: isDark,
@@ -19708,18 +19751,18 @@ function SimulateTransactionDetails(param) {
                 ]),
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-close",
+                        className: "moonx-flow-close",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "ghost",
                             size: "icon",
                             onClick: onClose,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                                className: "moonkey-icon--md"
+                                className: "moonx-icon--md"
                             })
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                        className: "moonkey-flex-col-center moonkey-text--center",
+                        className: "moonx-flex-col-center moonx-text--center",
                         style: {
                             padding: "2rem",
                             gap: "1rem",
@@ -19731,7 +19774,7 @@ function SimulateTransactionDetails(param) {
                                     width: "3rem",
                                     height: "3rem",
                                     borderRadius: "50%",
-                                    backgroundColor: "var(--moonkey-color-error)",
+                                    backgroundColor: "var(--moonx-color-error)",
                                     opacity: 0.1,
                                     display: "flex",
                                     alignItems: "center",
@@ -19740,7 +19783,7 @@ function SimulateTransactionDetails(param) {
                                 },
                                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                                     style: {
-                                        color: "var(--moonkey-color-error)",
+                                        color: "var(--moonx-color-error)",
                                         fontSize: "1.5rem",
                                         fontWeight: "bold"
                                     },
@@ -19754,7 +19797,7 @@ function SimulateTransactionDetails(param) {
                                 children: "Unable to Load Transaction"
                             }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                                className: "moonkey-text--secondary",
+                                className: "moonx-text--secondary",
                                 style: {
                                     marginBottom: "1rem",
                                     maxWidth: "300px"
@@ -19764,9 +19807,9 @@ function SimulateTransactionDetails(param) {
                         ]
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer",
+                        className: "moonx-flow-footer",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                            className: "moonkey-flow-footer__actions",
+                            className: "moonx-flow-footer__actions",
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                                 onClick: onClose,
                                 variant: "default",
@@ -19786,7 +19829,7 @@ function SimulateTransactionDetails(param) {
         });
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        className: "moonkey-flow-overlay",
+        className: "moonx-flow-overlay",
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RootCard, {
             centerContent: false,
             isDark: isDark,
@@ -19814,23 +19857,23 @@ function SimulateTransactionDetails(param) {
             ]),
             children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-close",
+                    className: "moonx-flow-close",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                         variant: "ghost",
                         size: "icon",
                         onClick: onClose,
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                            className: "moonkey-icon--md"
+                            className: "moonx-icon--md"
                         })
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-header",
+                    className: "moonx-flow-header",
                     style: {
                         marginTop: "1rem"
                     },
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-label",
+                        className: "moonx-label",
                         children: _optionalChain([
                             uiConfig,
                             'optionalAccess',
@@ -19841,7 +19884,7 @@ function SimulateTransactionDetails(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-scrollable-list",
+                    className: "moonx-scrollable-list",
                     style: {
                         height: "300px",
                         margin: "1rem 0.75rem 0"
@@ -19852,14 +19895,14 @@ function SimulateTransactionDetails(param) {
                         },
                         children: instructions.map(function(instruction) {
                             return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                className: "moonkey-flex-col",
+                                className: "moonx-flex-col",
                                 style: {
                                     justifyContent: "space-between",
                                     marginBottom: "1rem"
                                 },
                                 children: [
                                     instruction.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", {
-                                        className: "moonkey-label",
+                                        className: "moonx-label",
                                         style: {
                                             marginBottom: "0.5rem"
                                         },
@@ -19880,9 +19923,9 @@ function SimulateTransactionDetails(param) {
                     })
                 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer",
+                    className: "moonx-flow-footer",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-footer__actions",
+                        className: "moonx-flow-footer__actions",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             onClick: onClose,
                             children: _optionalChain([
@@ -20439,28 +20482,28 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                        className: "moonkey-icon--sm"
+                        className: "moonx-icon--sm"
                     })
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-header",
+                className: "moonx-flow-header",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-logo",
+                        className: "moonx-flow-logo",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                             appConfig: appConfig,
-                            className: "moonkey-icon--lg"
+                            className: "moonx-icon--lg"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--heading",
+                        className: "moonx-text--heading",
                         children: _optionalChain([
                             options,
                             'optionalAccess',
@@ -20474,7 +20517,7 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                         ]) || t("sign7702Authorization.title")
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             options,
                             'optionalAccess',
@@ -20498,14 +20541,14 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-data-scroll",
+                className: "moonx-data-scroll",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-sign-section",
+                        className: "moonx-sign-section",
                         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                    className: "moonkey-sign-row",
+                                    className: "moonx-sign-row",
                                     style: {
                                         marginBottom: "0.5rem"
                                     },
@@ -20526,14 +20569,14 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                                             children: copySuccess ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                                 children: [
                                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                                        className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                        className: "moonx-icon--xs moonx-icon--mr-xs"
                                                     }),
                                                     t("common.copied")
                                                 ]
                                             }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                                 children: [
                                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {
-                                                        className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                        className: "moonx-icon--xs moonx-icon--mr-xs"
                                                     }),
                                                     t("common.copy")
                                                 ]
@@ -20543,7 +20586,7 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                                     ref: contentRef,
-                                    className: "moonkey-data-preview",
+                                    className: "moonx-data-preview",
                                     style: {
                                         height: "84px",
                                         overflow: "hidden"
@@ -20554,7 +20597,7 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--center",
+                        className: "moonx-text--secondary moonx-text--center",
                         style: {
                             marginTop: "150px",
                             paddingBottom: "0.5rem"
@@ -20574,9 +20617,9 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-footer",
+                className: "moonx-flow-footer",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flow-footer__actions",
+                    className: "moonx-flow-footer__actions",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "outline",
@@ -20594,7 +20637,7 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                                 signResult === "success" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                            className: "moonkey-icon--sm moonkey-icon--mr-xs"
+                                            className: "moonx-icon--sm moonx-icon--mr-xs"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                                             children: t("common.success")
@@ -20604,7 +20647,7 @@ var Sign7702Authorization = function Sign7702Authorization(param) {
                                 signResult === "error" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                                            className: "moonkey-icon--sm moonkey-icon--mr-xs"
+                                            className: "moonx-icon--sm moonx-icon--mr-xs"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                                             children: t("common.failed")
@@ -20936,28 +20979,28 @@ var SignMessage = function SignMessage(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                        className: "moonkey-icon--sm"
+                        className: "moonx-icon--sm"
                     })
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-header",
+                className: "moonx-flow-header",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-logo",
+                        className: "moonx-flow-logo",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                             appConfig: appConfig,
-                            className: "moonkey-icon--lg"
+                            className: "moonx-icon--lg"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", {
-                        className: "moonkey-text--heading",
+                        className: "moonx-text--heading",
                         children: _optionalChain([
                             uiOptions,
                             'optionalAccess',
@@ -20987,7 +21030,7 @@ var SignMessage = function SignMessage(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flex-col",
+                className: "moonx-flex-col",
                 style: {
                     position: "relative"
                 },
@@ -20997,7 +21040,7 @@ var SignMessage = function SignMessage(param) {
                     },
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                            className: "moonkey-sign-row",
+                            className: "moonx-sign-row",
                             style: {
                                 marginBottom: "0.25rem"
                             },
@@ -21026,14 +21069,14 @@ var SignMessage = function SignMessage(param) {
                                     children: copySuccess ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                         children: [
                                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                                className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                className: "moonx-icon--xs moonx-icon--mr-xs"
                                             }),
                                             t("common.copied")
                                         ]
                                     }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                         children: [
                                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {
-                                                className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                className: "moonx-icon--xs moonx-icon--mr-xs"
                                             }),
                                             t("common.copy")
                                         ]
@@ -21043,7 +21086,7 @@ var SignMessage = function SignMessage(param) {
                         }),
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                             ref: contentRef,
-                            className: "moonkey-box moonkey-box--scrollable",
+                            className: "moonx-box moonx-box--scrollable",
                             style: {
                                 height: "210px"
                             },
@@ -21053,9 +21096,9 @@ var SignMessage = function SignMessage(param) {
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-footer",
+                className: "moonx-flow-footer",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                    className: "moonkey-flow-footer__actions",
+                    className: "moonx-flow-footer__actions",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, {
                         state: isSigning ? "loading" : signResult === "success" ? "success" : signResult === "error" ? "error" : void 0,
                         disabled: isSigning || signResult === "success",
@@ -21069,7 +21112,7 @@ var SignMessage = function SignMessage(param) {
                                 },
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                        className: "moonkey-icon--sm moonkey-icon--mr-sm"
+                                        className: "moonx-icon--sm moonx-icon--mr-sm"
                                     }),
                                     t("common.signed")
                                 ]
@@ -21082,7 +21125,7 @@ var SignMessage = function SignMessage(param) {
                                 },
                                 children: [
                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                                        className: "moonkey-icon--sm moonkey-icon--mr-sm"
+                                        className: "moonx-icon--sm moonx-icon--mr-sm"
                                     }),
                                     t("common.failed")
                                 ]
@@ -21376,28 +21419,28 @@ var SignTransaction = function SignTransaction(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                        className: "moonkey-icon--sm"
+                        className: "moonx-icon--sm"
                     })
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-header",
+                className: "moonx-flow-header",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-logo",
+                        className: "moonx-flow-logo",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                             appConfig: appConfig,
-                            className: "moonkey-icon--lg"
+                            className: "moonx-icon--lg"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--heading",
+                        className: "moonx-text--heading",
                         children: _optionalChain([
                             options,
                             'optionalAccess',
@@ -21411,7 +21454,7 @@ var SignTransaction = function SignTransaction(param) {
                         ]) || t("signTransaction.title")
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             options,
                             'optionalAccess',
@@ -21435,24 +21478,24 @@ var SignTransaction = function SignTransaction(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-data-scroll",
+                className: "moonx-data-scroll",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-sign-section",
+                        className: "moonx-sign-section",
                         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                    className: "moonkey-sign-row",
+                                    className: "moonx-sign-row",
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                            className: "moonkey-expand-toggle",
+                                            className: "moonx-expand-toggle",
                                             onClick: handleToggle,
                                             children: [
                                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, {
                                                     children: t("signTransaction.transaction")
                                                 }),
                                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, {
-                                                    className: "moonkey-icon--sm",
+                                                    className: "moonx-icon--sm",
                                                     style: {
                                                         marginLeft: "0.5rem",
                                                         transition: "transform 0.2s ease-in-out",
@@ -21470,19 +21513,19 @@ var SignTransaction = function SignTransaction(param) {
                                                 paddingLeft: "0.5rem",
                                                 paddingRight: "0.5rem",
                                                 fontSize: "0.75rem",
-                                                color: copySuccess ? "var(--moonkey-color-success)" : "var(--moonkey-color-foreground-3)"
+                                                color: copySuccess ? "var(--moonx-color-success)" : "var(--moonx-color-foreground-3)"
                                             },
                                             children: copySuccess ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                                 children: [
                                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {
-                                                        className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                        className: "moonx-icon--xs moonx-icon--mr-xs"
                                                     }),
                                                     t("common.copied")
                                                 ]
                                             }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                                 children: [
                                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                                        className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                        className: "moonx-icon--xs moonx-icon--mr-xs"
                                                     }),
                                                     t("common.copy")
                                                 ]
@@ -21492,7 +21535,7 @@ var SignTransaction = function SignTransaction(param) {
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                                     ref: contentRef,
-                                    className: "moonkey-data-preview",
+                                    className: "moonx-data-preview",
                                     style: {
                                         height: isExpanded ? "auto" : "84px",
                                         overflow: isExpanded ? "visible" : "hidden"
@@ -21503,7 +21546,7 @@ var SignTransaction = function SignTransaction(param) {
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--center",
+                        className: "moonx-text--secondary moonx-text--center",
                         style: {
                             marginTop: isExpanded ? "1rem" : "150px",
                             paddingTop: isExpanded ? "1rem" : 0,
@@ -21524,9 +21567,9 @@ var SignTransaction = function SignTransaction(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-footer",
+                className: "moonx-flow-footer",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flow-footer__actions",
+                    className: "moonx-flow-footer__actions",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "outline",
@@ -21554,7 +21597,7 @@ var SignTransaction = function SignTransaction(param) {
                                 signResult === "success" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                            className: "moonkey-icon--sm moonkey-icon--mr-xs"
+                                            className: "moonx-icon--sm moonx-icon--mr-xs"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                                             children: t("common.success")
@@ -21564,7 +21607,7 @@ var SignTransaction = function SignTransaction(param) {
                                 signResult === "error" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                                            className: "moonkey-icon--sm moonkey-icon--mr-xs"
+                                            className: "moonx-icon--sm moonx-icon--mr-xs"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                                             children: t("common.failed")
@@ -21874,28 +21917,28 @@ var SignTypedData = function SignTypedData(param) {
         ]),
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-close",
+                className: "moonx-flow-close",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                     variant: "ghost",
                     size: "icon",
                     onClick: onCancel,
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, {
-                        className: "moonkey-icon--sm"
+                        className: "moonx-icon--sm"
                     })
                 })
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-flow-header",
+                className: "moonx-flow-header",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-flow-logo",
+                        className: "moonx-flow-logo",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AppLogo, {
                             appConfig: appConfig,
-                            className: "moonkey-icon--lg"
+                            className: "moonx-icon--lg"
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--heading",
+                        className: "moonx-text--heading",
                         children: _optionalChain([
                             options,
                             'optionalAccess',
@@ -21909,7 +21952,7 @@ var SignTypedData = function SignTypedData(param) {
                         ]) || t("signTypedData.title")
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--semibold",
+                        className: "moonx-text--secondary moonx-text--semibold",
                         children: _optionalChain([
                             options,
                             'optionalAccess',
@@ -21933,24 +21976,24 @@ var SignTypedData = function SignTypedData(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                className: "moonkey-data-scroll",
+                className: "moonx-data-scroll",
                 children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-sign-section",
+                        className: "moonx-sign-section",
                         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
                             children: [
                                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                    className: "moonkey-sign-row",
+                                    className: "moonx-sign-row",
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                                            className: "moonkey-expand-toggle",
+                                            className: "moonx-expand-toggle",
                                             onClick: handleToggle,
                                             children: [
                                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, {
                                                     children: t("signTransaction.transaction")
                                                 }),
                                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, {
-                                                    className: "moonkey-icon--sm",
+                                                    className: "moonx-icon--sm",
                                                     style: {
                                                         marginLeft: "0.5rem",
                                                         transition: "transform 0.2s ease-in-out",
@@ -21968,19 +22011,19 @@ var SignTypedData = function SignTypedData(param) {
                                                 paddingLeft: "0.5rem",
                                                 paddingRight: "0.5rem",
                                                 fontSize: "0.75rem",
-                                                color: copySuccess ? "var(--moonkey-color-success)" : "var(--moonkey-color-foreground-3)"
+                                                color: copySuccess ? "var(--moonx-color-success)" : "var(--moonx-color-foreground-3)"
                                             },
                                             children: copySuccess ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                                 children: [
                                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                                        className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                        className: "moonx-icon--xs moonx-icon--mr-xs"
                                                     }),
                                                     t("common.copied")
                                                 ]
                                             }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                                 children: [
                                                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {
-                                                        className: "moonkey-icon--xs moonkey-icon--mr-xs"
+                                                        className: "moonx-icon--xs moonx-icon--mr-xs"
                                                     }),
                                                     t("common.copy")
                                                 ]
@@ -21990,7 +22033,7 @@ var SignTypedData = function SignTypedData(param) {
                                 }),
                                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
                                     ref: contentRef,
-                                    className: "moonkey-data-preview",
+                                    className: "moonx-data-preview",
                                     style: {
                                         height: isExpanded ? "auto" : "84px",
                                         overflow: isExpanded ? "visible" : "hidden"
@@ -22001,7 +22044,7 @@ var SignTypedData = function SignTypedData(param) {
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-text--secondary moonkey-text--center",
+                        className: "moonx-text--secondary moonx-text--center",
                         style: {
                             marginTop: isExpanded ? "1rem" : "150px",
                             paddingTop: isExpanded ? "1rem" : 0,
@@ -22022,9 +22065,9 @@ var SignTypedData = function SignTypedData(param) {
                 ]
             }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                className: "moonkey-flow-footer",
+                className: "moonx-flow-footer",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-                    className: "moonkey-flow-footer__actions",
+                    className: "moonx-flow-footer__actions",
                     children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, {
                             variant: "outline",
@@ -22052,7 +22095,7 @@ var SignTypedData = function SignTypedData(param) {
                                 signResult === "success" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {
-                                            className: "moonkey-icon--sm moonkey-icon--mr-xs"
+                                            className: "moonx-icon--sm moonx-icon--mr-xs"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                                             children: t("common.success")
@@ -22062,7 +22105,7 @@ var SignTypedData = function SignTypedData(param) {
                                 signResult === "error" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                                     children: [
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircle, {
-                                            className: "moonkey-icon--sm moonkey-icon--mr-xs"
+                                            className: "moonx-icon--sm moonx-icon--mr-xs"
                                         }),
                                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                                             children: t("common.failed")
@@ -22189,7 +22232,7 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
             width: "1.5rem",
             height: "1.5rem",
             border: "2px solid transparent",
-            borderBottomColor: "var(--moonkey-color-foreground)",
+            borderBottomColor: "var(--moonx-color-foreground)",
             borderRadius: "50%",
             animation: "spin 1s linear infinite"
         };
@@ -22218,10 +22261,10 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
     var searchInputStyles = {
         width: "100%",
         padding: "0.75rem 1rem 0.75rem 2.5rem",
-        borderRadius: "var(--moonkey-border-radius-lg)",
-        border: "1px solid var(--moonkey-color-border)",
-        backgroundColor: "var(--moonkey-color-background)",
-        color: "var(--moonkey-color-foreground)",
+        borderRadius: "var(--moonx-border-radius-lg)",
+        border: "1px solid var(--moonx-color-border)",
+        backgroundColor: "var(--moonx-color-background)",
+        color: "var(--moonx-color-foreground)",
         fontSize: "0.875rem",
         outline: "none",
         transition: "border-color 0.2s ease, box-shadow 0.2s ease"
@@ -22232,12 +22275,12 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
         top: "0.875rem",
         width: "1rem",
         height: "1rem",
-        color: "var(--moonkey-color-foreground-3)"
+        color: "var(--moonx-color-foreground-3)"
     };
     var emptyStateStyles = {
         textAlign: "center",
         padding: "2rem 0",
-        color: "var(--moonkey-color-foreground-3)",
+        color: "var(--moonx-color-foreground-3)",
         fontSize: "0.875rem"
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
@@ -22245,7 +22288,7 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
         children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", {
                 dangerouslySetInnerHTML: {
-                    __html: "\n          .solana-search-input:focus {\n            border-color: var(--moonkey-color-accent);\n            box-shadow: 0 0 0 2px var(--moonkey-color-accent);\n          }\n          .solana-search-input::placeholder {\n            color: var(--moonkey-color-foreground-3);\n            opacity: 0.7;\n          }\n        "
+                    __html: "\n          .solana-search-input:focus {\n            border-color: var(--moonx-color-accent);\n            box-shadow: 0 0 0 2px var(--moonx-color-accent);\n          }\n          .solana-search-input::placeholder {\n            color: var(--moonx-color-foreground-3);\n            opacity: 0.7;\n          }\n        "
                 }
             }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
@@ -22293,17 +22336,17 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
                 });
                 var getInstalledWalletCardStyles = function getInstalledWalletCardStyles(walletType) {
                     return {
-                        borderRadius: "var(--moonkey-border-radius-lg)",
-                        border: "1px solid ".concat(hoveredWallet === walletType ? "var(--moonkey-color-accent)" : "var(--moonkey-color-border)"),
+                        borderRadius: "var(--moonx-border-radius-lg)",
+                        border: "1px solid ".concat(hoveredWallet === walletType ? "var(--moonx-color-accent)" : "var(--moonx-color-border)"),
                         padding: "0.75rem 0.25rem",
                         cursor: "pointer",
                         transition: "all 0.2s ease"
                     };
                 };
                 var uninstalledWalletCardStyles = {
-                    borderRadius: "var(--moonkey-border-radius-lg)",
-                    border: "1px solid var(--moonkey-color-border)",
-                    backgroundColor: "var(--moonkey-color-background-2)",
+                    borderRadius: "var(--moonx-border-radius-lg)",
+                    border: "1px solid var(--moonx-color-border)",
+                    backgroundColor: "var(--moonx-color-background-2)",
                     padding: "0.75rem 0.25rem",
                     cursor: "not-allowed",
                     opacity: 0.6,
@@ -22322,11 +22365,11 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
                 };
                 var walletNameStyles = {
                     fontSize: "0.875rem",
-                    color: "var(--moonkey-color-foreground)"
+                    color: "var(--moonx-color-foreground)"
                 };
                 var uninstalledWalletNameStyles = {
                     fontSize: "0.875rem",
-                    color: "var(--moonkey-color-foreground-3)"
+                    color: "var(--moonx-color-foreground-3)"
                 };
                 var installLabelContainerStyles = {
                     marginLeft: "auto",
@@ -22334,11 +22377,11 @@ var SolanaWalletSelector = function SolanaWalletSelector(param) {
                 };
                 var installLabelStyles = {
                     fontSize: "0.75rem",
-                    color: "var(--moonkey-color-foreground-3)"
+                    color: "var(--moonx-color-foreground-3)"
                 };
                 var dividerStyles = {
                     margin: "0.2rem 0",
-                    borderTop: "1px solid var(--moonkey-color-border)"
+                    borderTop: "1px solid var(--moonx-color-border)"
                 };
                 return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                     children: [
@@ -22534,7 +22577,7 @@ var SolanaWallets = function SolanaWallets(param) {
                         })
                     }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-                        className: "moonkey-label",
+                        className: "moonx-label",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
                             children: currentStep === "listing" ? "Select a wallet" : "Connect ".concat(_optionalChain([
                                 selectedWallet,
@@ -23933,7 +23976,7 @@ var AuthProvider = function AuthProvider(param) {
                 crossorigin: false
             },
             {
-                origin: _utils.getIframeOrigin.call(void 0, _utils.getMoonKeyApiUrl.call(void 0)),
+                origin: _utils.getIframeOrigin.call(void 0, _utils.getMoonXApiUrl.call(void 0)),
                 crossorigin: true
             }
         ].filter(function(t) {
@@ -23944,7 +23987,7 @@ var AuthProvider = function AuthProvider(param) {
         try {
             for(var _iterator = targets[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                 var _step_value = _step.value, origin = _step_value.origin, crossorigin = _step_value.crossorigin;
-                var sel = 'link[data-moonkey-preconnect="'.concat(origin, '"]');
+                var sel = 'link[data-moonx-preconnect="'.concat(origin, '"]');
                 if (document.head.querySelector(sel)) continue;
                 for(var _i = 0, _iter = [
                     "preconnect",
@@ -23955,7 +23998,7 @@ var AuthProvider = function AuthProvider(param) {
                     link.rel = rel;
                     link.href = origin;
                     if (crossorigin && rel === "preconnect") link.crossOrigin = "anonymous";
-                    link.setAttribute("data-moonkey-preconnect", origin);
+                    link.setAttribute("data-moonx-preconnect", origin);
                     document.head.appendChild(link);
                     added.push(link);
                 }
@@ -24817,7 +24860,7 @@ var AuthProvider = function AuthProvider(param) {
             value: sdkInstance,
             children: [
                 isMounted && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "iframe", {
-                    id: "moonkey-auth-iframe",
+                    id: "moonx-auth-iframe",
                     ref: iframeRef,
                     src: finalUrl,
                     style: iframeStyles,
@@ -24837,7 +24880,7 @@ var AuthProvider = function AuthProvider(param) {
 // src/wallets/walletconnect-client.ts
 var setWalletConnectClient = function setWalletConnectClient(client) {
     if (typeof window !== "undefined") {
-        window.__MOONKEY_WALLETCONNECT_CLIENT__ = client;
+        window.__MOONX_WALLETCONNECT_CLIENT__ = client;
     }
 };
 // src/provider.tsx
@@ -24845,8 +24888,8 @@ var WalletConnectContext = _react3.createContext.call(void 0, {
     client: null,
     isInitializing: false
 });
-var MoonKeyContext = _react3.createContext.call(void 0, null);
-var MoonKeyProvider = function MoonKeyProvider(param) {
+var MoonXContext = _react3.createContext.call(void 0, null);
+var MoonXProvider = function MoonXProvider(param) {
     var publishableKey = param.publishableKey, embeddableId = param.embeddableId, config = param.config, children = param.children;
     if (_optionalChain([
         config,
@@ -25198,7 +25241,7 @@ var getReconnectionInfo = function getReconnectionInfo(error) {
 // src/index.ts
 var _types = require('@moon-x/core/types');
 var _chains = require('viem/chains');
-exports.MoonKeyProvider = MoonKeyProvider;
+exports.MoonXProvider = MoonXProvider;
 exports.Network = _types.Network;
 exports.SessionExpiredError = SessionExpiredError;
 exports.SessionNotFoundError = SessionNotFoundError;
@@ -25219,7 +25262,7 @@ exports.darkTheme = darkTheme;
 exports.definedOnly = definedOnly;
 exports.estimateEvmGas = _lib.estimateEvmGas;
 exports.estimateEvmGasReserve = _lib.estimateEvmGasReserve;
-exports.ethereum = _chunkVBAVYDWQjs.ethereum_exports;
+exports.ethereum = _chunkIPTLHXJ4js.ethereum_exports;
 exports.getChainById = _lib.getChainById;
 exports.getEvmGasPrice = _lib.getEvmGasPrice;
 exports.getEvmMaxPriorityFeePerGas = _lib.getEvmMaxPriorityFeePerGas;
@@ -25249,7 +25292,7 @@ exports.resolveRpcUrl = _lib.resolveRpcUrl;
 exports.resolveSolanaChainEntry = _lib.resolveSolanaChainEntry;
 exports.resolveWsUrl = _lib.resolveWsUrl;
 exports.sepolia = _chains.sepolia;
-exports.solana = _chunkF345C4FXjs.solana_exports;
+exports.solana = _chunkRRFMI4ZLjs.solana_exports;
 exports.themeToCSS = themeToCSS;
 exports.useAddPasskey = _react.useAddPasskey;
 exports.useAttachOAuth = useAttachOAuth;
@@ -25258,7 +25301,7 @@ exports.useDetachOAuth = useDetachOAuth;
 exports.useEphemeralSigner = _react.useEphemeralSigner;
 exports.useLoginWithEmail = _react.useLoginWithEmail;
 exports.useLoginWithOAuth = useLoginWithOAuth;
-exports.useMoonKey = useMoonKey;
+exports.useMoonX = useMoonX;
 exports.useOAuthCompletion = useOAuthCompletion;
 exports.usePasskeyStatus = _react.usePasskeyStatus;
 exports.useRegisterPasskey = _react.useRegisterPasskey;