@moon-x/react-sdk 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +44 -102
  2. package/dist/index.mjs +1166 -1225
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -3613,9 +3613,6 @@ function isDarkMode(theme, displayMode, backgroundColor) {
3613
3613
  return 0.299 * r + 0.587 * g + 0.114 * b < 128;
3614
3614
  }
3615
3615
  // src/components/app-logo.tsx
3616
- // assets/moonkey-logo.svg
3617
- var moonkey_logo_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="186" height="198" viewBox="0 0 186 198">%0A <g transform="translate(14.000000, 14.000000)">%0A <path%0A d="M64,169 C71,189 87,189 94,169 L64,169 Z"%0A fill="%23000000"%0A fill-rule="nonzero"%0A />%0A <circle%0A stroke="%23000000"%0A stroke-width="27"%0A fill-opacity="0"%0A fill="%23000000"%0A cx="79"%0A cy="79"%0A r="79"%0A />%0A <circle fill="%23000000" cx="79" cy="77" r="18" />%0A </g>%0A</svg>%0A%0A';
3618
- // src/components/app-logo.tsx
3619
3616
  var _jsxruntime = require('react/jsx-runtime');
3620
3617
  var AppLogo = function AppLogo(param) {
3621
3618
  var src = param.src, appConfig = param.appConfig, className = param.className, style = param.style;
@@ -3632,23 +3629,18 @@ var AppLogo = function AppLogo(param) {
3632
3629
  marginLeft: "auto",
3633
3630
  marginRight: "auto"
3634
3631
  }, style);
3635
- var shouldShowFallback = !logoSrc || imageError;
3636
3632
  var handleImageError = function handleImageError() {
3637
3633
  setImageError(true);
3638
3634
  };
3639
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {
3640
- children: logoSrc && !imageError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
3641
- src: logoSrc,
3642
- alt: "",
3643
- className: className,
3644
- style: defaultStyle,
3645
- onError: handleImageError
3646
- }) : shouldShowFallback ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
3647
- src: moonkey_logo_default,
3648
- alt: "MoonKey",
3649
- className: "moonkey-logo-fallback".concat(className ? " ".concat(className) : ""),
3650
- style: defaultStyle
3651
- }) : null
3635
+ if (!logoSrc || imageError) {
3636
+ return null;
3637
+ }
3638
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
3639
+ src: logoSrc,
3640
+ alt: "",
3641
+ className: className,
3642
+ style: defaultStyle,
3643
+ onError: handleImageError
3652
3644
  });
3653
3645
  };
3654
3646
  // src/components/vanilla-ui/button.tsx
@@ -3853,7 +3845,7 @@ function appearanceToTheme(appearance) {
3853
3845
  return result;
3854
3846
  }
3855
3847
  // src/styles/sdk-stylesheet.ts
3856
- var SDK_STYLES = '\n/* === Reset === */\n.moonkey-sdk-root * { box-sizing: border-box; }\n.moonkey-sdk-root *:focus-visible { outline: 2px solid var(--moonkey-color-accent); outline-offset: 2px; }\n.moonkey-sdk-root input::placeholder { color: var(--moonkey-color-foreground-3); opacity: 1; }\n.moonkey-sdk-root[data-theme="dark"] .moonkey-logo-fallback { filter: invert(1); }\n\n/* === Animations === */\n@keyframes moonkey-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes moonkey-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n/* === Button === */\n.moonkey-sdk-root .moonkey-btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;\n font-weight: 500; font-size: 0.875rem; border: none; cursor: pointer;\n user-select: none; -webkit-user-select: none; white-space: nowrap;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;\n font-family: inherit; text-decoration: none;\n}\n.moonkey-sdk-root .moonkey-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* Sizes */\n.moonkey-sdk-root .moonkey-btn--sm { height: 2.25rem; padding: 0 0.75rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--md, .moonkey-sdk-root .moonkey-btn--default { height: 2.75rem; padding: 0 1rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--lg { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--icon { width: 2rem; height: 2rem; padding: 0; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--full { width: 100%; justify-content: center; }\n\n/* Variants */\n.moonkey-sdk-root .moonkey-btn--primary, .moonkey-sdk-root .moonkey-btn--default {\n background-color: var(--moonkey-color-accent); color: var(--moonkey-color-accent-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--primary:hover:not(:disabled), .moonkey-sdk-root .moonkey-btn--default:hover:not(:disabled) {\n background-color: var(--moonkey-color-accent-dark);\n}\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--success { background-color: var(--moonkey-color-success); color: var(--moonkey-color-success-foreground); }\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--error { background-color: var(--moonkey-color-error); color: var(--moonkey-color-error-foreground); }\n\n.moonkey-sdk-root .moonkey-btn--outline {\n background-color: transparent; border: 1px solid var(--moonkey-color-border); color: var(--moonkey-color-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--outline:hover:not(:disabled) { background-color: var(--moonkey-color-background-2); border-color: var(--moonkey-color-accent); }\n\n.moonkey-sdk-root .moonkey-btn--ghost { background-color: transparent; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--ghost:hover:not(:disabled) { background-color: var(--moonkey-color-background-2); }\n\n.moonkey-sdk-root .moonkey-btn--secondary { background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--secondary:hover:not(:disabled) { background-color: var(--moonkey-color-background-3); }\n\n.moonkey-sdk-root .moonkey-btn--destructive { background-color: var(--moonkey-color-error); color: var(--moonkey-color-error-foreground); }\n.moonkey-sdk-root .moonkey-btn--destructive:hover:not(:disabled) { opacity: 0.9; }\n\n.moonkey-sdk-root .moonkey-btn--link { background: transparent; color: var(--moonkey-color-accent); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }\n\n/* === Input === */\n.moonkey-sdk-root .moonkey-input {\n display: flex; width: 100%; height: 2.75rem; padding: 0 0.75rem;\n font-size: 0.875rem; font-family: inherit; color: var(--moonkey-color-foreground);\n background-color: var(--moonkey-color-background); border: 1px solid var(--moonkey-color-border);\n border-radius: var(--moonkey-border-radius-md); outline: none;\n transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;\n}\n.moonkey-sdk-root .moonkey-input:focus { border-color: var(--moonkey-color-accent); box-shadow: 0 0 0 1px var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-input:disabled { opacity: 0.5; cursor: not-allowed; }\n.moonkey-sdk-root .moonkey-input--error { border-color: var(--moonkey-color-error); }\n\n/* === Label === */\n.moonkey-sdk-root .moonkey-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); line-height: 1; }\n.moonkey-sdk-root .moonkey-label--secondary { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-label--tertiary { color: var(--moonkey-color-foreground-4); font-size: 0.75rem; }\n.moonkey-sdk-root .moonkey-label--error { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-label--success { color: var(--moonkey-color-success); }\n\n/* === Detail Row === */\n.moonkey-sdk-root .moonkey-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }\n.moonkey-sdk-root .moonkey-detail-row__label { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-detail-row__value { font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); text-align: right; }\n\n/* === Divider === */\n.moonkey-sdk-root .moonkey-divider { border-top: 1px solid var(--moonkey-color-border); margin: 1rem 0; }\n\n/* === Boxes === */\n.moonkey-sdk-root .moonkey-box { padding: 0.75rem; border-radius: var(--moonkey-border-radius-lg); }\n.moonkey-sdk-root .moonkey-box--surface { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-box--error { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-box--success { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-box--info { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-box--warning { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); display: flex; align-items: flex-start; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-box--scrollable { overflow-y: auto; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }\n\n/* === Address Pill === */\n.moonkey-sdk-root .moonkey-address-pill {\n display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem;\n background-color: var(--moonkey-color-background-3); color: var(--moonkey-color-foreground);\n border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md);\n font-size: 0.875rem; font-family: monospace; cursor: pointer;\n transition: background-color 0.2s, border-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-address-pill:hover { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-address-pill--copied { border-color: var(--moonkey-color-success); }\n\n/* === Mono Text === */\n.moonkey-sdk-root .moonkey-mono { font-family: monospace; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Spinner === */\n.moonkey-sdk-root .moonkey-spinner {\n display: inline-block; flex-shrink: 0;\n border: 2px solid currentColor; border-top-color: transparent;\n border-radius: 9999px; animation: moonkey-spin 1s linear infinite;\n}\n.moonkey-sdk-root .moonkey-spinner--sm { width: 0.875rem; height: 0.875rem; }\n.moonkey-sdk-root .moonkey-spinner--md { width: 1rem; height: 1rem; }\n.moonkey-sdk-root .moonkey-spinner--lg { width: 1.5rem; height: 1.5rem; }\n.moonkey-sdk-root .moonkey-spinner--xl { width: 2rem; height: 2rem; }\n\n/* === Pulse skeleton === */\n.moonkey-sdk-root .moonkey-skeleton { background-color: var(--moonkey-color-background-2); border-radius: 0.25rem; animation: moonkey-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }\n\n/* === Flow layout === */\n.moonkey-sdk-root .moonkey-flow-close { position: absolute; top: 1rem; right: 1.5rem; display: flex; align-items: center; flex-shrink: 0; z-index: 1; }\n.moonkey-sdk-root .moonkey-flow-header { display: flex; flex-direction: column; text-align: center; padding: 0 0.5rem 0.25rem; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-content { display: flex; flex-direction: column; flex: 1; margin-top: 1rem; padding: 0 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-footer {\n position: absolute; bottom: 0; left: 0; right: 0;\n background-color: var(--moonkey-color-background); padding: 1rem 2rem 3rem;\n margin: 0 0.125rem 0.125rem;\n border-bottom-left-radius: var(--moonkey-border-radius-lg);\n border-bottom-right-radius: var(--moonkey-border-radius-lg);\n}\n.moonkey-sdk-root .moonkey-flow-footer__actions { display: flex; gap: 0.75rem; }\n/* Buttons inside footer actions auto-stretch to fill space */\n.moonkey-sdk-root .moonkey-flow-footer__actions > .moonkey-btn { flex: 1; height: 3rem; font-size: 1rem; }\n\n/* === Flow text utilities === */\n.moonkey-sdk-root .moonkey-text--heading { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-text--title { font-size: 1rem; font-weight: 600; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-text--secondary { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-text--error { font-size: 0.875rem; color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-text--success { font-size: 0.875rem; color: var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-flow-logo { display: flex; align-items: center; justify-content: center; }\n\n/* === Terms link row (accept-terms) === */\n.moonkey-sdk-root .moonkey-terms-link {\n display: flex; flex-direction: row; align-items: center; justify-content: space-between;\n border-radius: var(--moonkey-border-radius-lg); padding: 0.75rem;\n margin-left: 0.75rem; margin-right: 0.75rem;\n border: 1px solid var(--moonkey-color-border); cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.moonkey-sdk-root .moonkey-terms-link:hover { background-color: var(--moonkey-color-background-2); }\n\n/* === Wallet item === */\n.moonkey-sdk-root .moonkey-wallet-item {\n display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem;\n border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg);\n background-color: var(--moonkey-color-background); cursor: pointer;\n transition: border-color 0.2s, background-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-wallet-item:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-wallet-item--selected { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n\n/* === Footer secured === */\n.moonkey-sdk-root .moonkey-footer-secured {\n position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem; text-align: center;\n font-size: 0.75rem; color: var(--moonkey-color-foreground-3);\n background-color: var(--moonkey-color-background);\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-footer-secured__inner { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }\n.moonkey-sdk-root .moonkey-footer-secured a { color: var(--moonkey-color-accent); text-decoration: none; font-weight: 500; }\n\n/* === Flow overlay (z-index stack wrapper) === */\n.moonkey-sdk-root .moonkey-flow-overlay { position: relative; z-index: 100; }\n\n/* === Wallet connection state container === */\n.moonkey-sdk-root .moonkey-connect-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 3rem; padding-bottom: 3rem; }\n\n/* === Large wallet icon spinner === */\n.moonkey-sdk-root .moonkey-wallet-spinner { position: relative; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring--error { border-color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-wallet-spinner__spin { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--moonkey-color-accent); animation: moonkey-spin 1s linear infinite; }\n.moonkey-sdk-root .moonkey-wallet-spinner__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }\n\n/* === Data preview box (sign typed-data / transactions) === */\n.moonkey-sdk-root .moonkey-data-preview { margin-top: 0.25rem; padding: 0.75rem; background-color: var(--moonkey-color-background-2); border-radius: var(--moonkey-border-radius-md); font-size: 0.875rem; font-family: monospace; word-break: break-all; white-space: pre-line; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable data container (signing flows) === */\n.moonkey-sdk-root .moonkey-data-scroll { display: flex; flex-direction: column; max-height: 390px; overflow-y: auto; padding-bottom: 5rem; position: relative; }\n\n/* === Expand/collapse trigger === */\n.moonkey-sdk-root .moonkey-expand-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable bordered list (transaction detail panels) === */\n.moonkey-sdk-root .moonkey-scrollable-list { display: flex; flex-direction: column; overflow-y: auto; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); scrollbar-width: none; }\n.moonkey-sdk-root .moonkey-scrollable-list::-webkit-scrollbar { display: none; }\n\n/* === Modal content column (passkey-enroll, add-passkey) === */\n.moonkey-sdk-root .moonkey-modal-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem 1.5rem; gap: 1rem; }\n\n/* === Back nav button (absolute top-left) === */\n.moonkey-sdk-root .moonkey-back-btn { position: absolute; top: 1rem; left: 0.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--moonkey-border-radius-full); }\n\n/* === Centered inline row (resend, action links) === */\n.moonkey-sdk-root .moonkey-center-row { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }\n\n/* === Stacked button column (modal CTAs) === */\n.moonkey-sdk-root .moonkey-btn-stack { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding-top: 0.5rem; }\n\n/* === Legal footer text (terms & privacy) === */\n.moonkey-sdk-root .moonkey-legal-text { font-size: 0.75rem; color: var(--moonkey-color-foreground-3); text-align: center; line-height: 1.5; margin-top: 1rem; }\n.moonkey-sdk-root .moonkey-legal-text a { color: var(--moonkey-color-accent); cursor: pointer; }\n/* Inline-checkbox variant: same typography, but flex layout aligned left so the checkbox sits beside the link text. */\n.moonkey-sdk-root .moonkey-legal-checkbox { display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-legal-checkbox input[type="checkbox"] { margin-top: 0.15rem; cursor: pointer; }\n\n/* === Login gating (require_users_accept_terms) === */\n/* Wraps the email/social/wallet buttons so they can be visually disabled until the terms checkbox is ticked. The default state is unaffected. */\n.moonkey-sdk-root .moonkey-login-gateable { transition: opacity 0.15s ease-out; }\n.moonkey-sdk-root .moonkey-login-gated { opacity: 0.5; pointer-events: none; }\n\n/* === Shared entry animations === */\n@keyframes moonkey-slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }\n@keyframes moonkey-success-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }\n@keyframes moonkey-mail-slide-in { from { opacity: 0; transform: translateX(-50px) rotate(-15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }\n@keyframes moonkey-verified-slide-in { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }\n\n/* === Icon size utilities === */\n.moonkey-sdk-root .moonkey-icon--xs { width: 0.75rem; height: 0.75rem; }\n.moonkey-sdk-root .moonkey-icon--sm { width: 1rem; height: 1rem; }\n.moonkey-sdk-root .moonkey-icon--md { width: 1.5rem; height: 1.5rem; }\n.moonkey-sdk-root .moonkey-icon--lg { width: 2rem; height: 2rem; }\n.moonkey-sdk-root .moonkey-icon--xl { width: 2.5rem; height: 2.5rem; }\n.moonkey-sdk-root .moonkey-icon--2xl { width: 3rem; height: 3rem; }\n.moonkey-sdk-root .moonkey-icon--mr-xs { margin-right: 0.25rem; }\n.moonkey-sdk-root .moonkey-icon--mr-sm { margin-right: 0.5rem; }\n.moonkey-sdk-root .moonkey-icon--accent { color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-icon--success { color: var(--moonkey-color-success, #16a34a); }\n.moonkey-sdk-root .moonkey-icon--error { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-icon--muted { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-icon--fg { color: var(--moonkey-color-foreground); }\n\n/* === Layout utilities === */\n.moonkey-sdk-root .moonkey-flex-center { display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-flex-between { display: flex; align-items: center; justify-content: space-between; }\n.moonkey-sdk-root .moonkey-flex-col { display: flex; flex-direction: column; }\n.moonkey-sdk-root .moonkey-flex-col-center { display: flex; flex-direction: column; align-items: center; }\n\n/* === Text modifiers === */\n.moonkey-sdk-root .moonkey-text--semibold { font-weight: 500; }\n.moonkey-sdk-root .moonkey-text--bold { font-weight: 600; }\n.moonkey-sdk-root .moonkey-text--center { text-align: center; }\n.moonkey-sdk-root .moonkey-text--sm { font-size: 0.875rem; }\n.moonkey-sdk-root .moonkey-text--lg { font-size: 1.125rem; }\n.moonkey-sdk-root .moonkey-text--xl { font-size: 1.25rem; }\n\n/* === Transaction detail card (success receipt) === */\n.moonkey-sdk-root .moonkey-detail-card { display: flex; flex-direction: column; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 2rem 0.5rem 0; }\n.moonkey-sdk-root .moonkey-detail-card__rows { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }\n\n/* === Failed-transaction error scroll box === */\n.moonkey-sdk-root .moonkey-error-scroll { display: flex; flex-direction: column; background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 0.5rem; height: 150px; overflow: auto; }\n\n/* === Network logo badge (ethereum/solana pair) === */\n.moonkey-sdk-root .moonkey-network-badge { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--moonkey-color-border); background-color: var(--moonkey-color-background-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.moonkey-sdk-root .moonkey-network-badge--overlap { margin-left: -8px; }\n\n/* === Positioned icons inside inputs === */\n.moonkey-sdk-root .moonkey-search-icon { position: absolute; left: 0.75rem; top: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-input-icon--left { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--moonkey-color-foreground-3); pointer-events: none; }\n\n/* === Step indicator (N of M) === */\n.moonkey-sdk-root .moonkey-step-label { font-size: 0.75rem; font-weight: 600; color: var(--moonkey-color-accent); letter-spacing: 0.05em; text-transform: uppercase; }\n\n/* === Feature bullet item (passkey enroll) === */\n.moonkey-sdk-root .moonkey-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Monospace textarea (import wallet) === */\n.moonkey-sdk-root .moonkey-mono-textarea { width: 100%; min-height: 100px; padding: 0.75rem; font-family: monospace; font-size: 0.75rem; background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); outline: none; resize: vertical; }\n\n/* === Sign-flow inner section and row === */\n.moonkey-sdk-root .moonkey-sign-section { padding: 0.5rem; }\n.moonkey-sdk-root .moonkey-sign-row { display: flex; align-items: center; justify-content: space-between; }\n\n/* === External wallet connect button (login flow) === */\n.moonkey-sdk-root .moonkey-external-wallet-btn { border-radius: var(--moonkey-border-radius-lg); border: 1px solid var(--moonkey-color-border); padding: 0.75rem 0.25rem; cursor: pointer; margin-top: 0.75rem; transition: all 0.2s ease-in-out; background-color: transparent; }\n.moonkey-sdk-root .moonkey-external-wallet-btn:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-external-wallet-btn--accent-hover:hover { background-color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-external-wallet-btn__inner { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; animation: moonkey-slide-in 0.3s ease-out 0.1s both; }\n\n/* === Flex row utility (icon + label pairs) === */\n.moonkey-sdk-root .moonkey-flex-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }\n\n/* === Login landing layout === */\n.moonkey-sdk-root .moonkey-header { position: absolute; top: 1.5rem; left: 0; right: 0; text-align: center; font-size: 0.875rem; color: var(--moonkey-color-foreground); margin-bottom: 0.5rem; padding-left: 3rem; padding-right: 3rem; }\n.moonkey-sdk-root .moonkey-header__inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-content-wrapper { padding-top: 1rem; padding-bottom: 1rem; width: 100%; }\n.moonkey-sdk-root .moonkey-logo-section { text-align: center; margin-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-logo-section__inner { padding-top: 1rem; padding-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-description { padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; color: var(--moonkey-color-foreground-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-form-section { padding: 0.5rem 1rem; }\n\n/* === Email OTP content fill === */\n.moonkey-sdk-root .moonkey-otp-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }\n\n/* === Wallet icon status overlay badge === */\n.moonkey-sdk-root .moonkey-wallet-status-badge { position: absolute; bottom: -4px; right: -4px; background-color: var(--moonkey-color-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n/* === Wallet connect success animation === */\n@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n';
3848
+ var SDK_STYLES = '\n/* === Reset === */\n.moonkey-sdk-root * { box-sizing: border-box; }\n.moonkey-sdk-root *:focus-visible { outline: 2px solid var(--moonkey-color-accent); outline-offset: 2px; }\n.moonkey-sdk-root input::placeholder { color: var(--moonkey-color-foreground-3); opacity: 1; }\n\n/* === Animations === */\n@keyframes moonkey-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes moonkey-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n/* === Button === */\n.moonkey-sdk-root .moonkey-btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;\n font-weight: 500; font-size: 0.875rem; border: none; cursor: pointer;\n user-select: none; -webkit-user-select: none; white-space: nowrap;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;\n font-family: inherit; text-decoration: none;\n}\n.moonkey-sdk-root .moonkey-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* Sizes */\n.moonkey-sdk-root .moonkey-btn--sm { height: 2.25rem; padding: 0 0.75rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--md, .moonkey-sdk-root .moonkey-btn--default { height: 2.75rem; padding: 0 1rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--lg { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--icon { width: 2rem; height: 2rem; padding: 0; border-radius: var(--moonkey-border-radius-md); }\n.moonkey-sdk-root .moonkey-btn--full { width: 100%; justify-content: center; }\n\n/* Variants */\n.moonkey-sdk-root .moonkey-btn--primary, .moonkey-sdk-root .moonkey-btn--default {\n background-color: var(--moonkey-color-accent); color: var(--moonkey-color-accent-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--primary:hover:not(:disabled), .moonkey-sdk-root .moonkey-btn--default:hover:not(:disabled) {\n background-color: var(--moonkey-color-accent-dark);\n}\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--success { background-color: var(--moonkey-color-success); color: var(--moonkey-color-success-foreground); }\n.moonkey-sdk-root .moonkey-btn--primary.moonkey-state--error { background-color: var(--moonkey-color-error); color: var(--moonkey-color-error-foreground); }\n\n.moonkey-sdk-root .moonkey-btn--outline {\n background-color: transparent; border: 1px solid var(--moonkey-color-border); color: var(--moonkey-color-foreground);\n}\n.moonkey-sdk-root .moonkey-btn--outline:hover:not(:disabled) { background-color: var(--moonkey-color-background-2); border-color: var(--moonkey-color-accent); }\n\n.moonkey-sdk-root .moonkey-btn--ghost { background-color: transparent; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--ghost:hover:not(:disabled) { background-color: var(--moonkey-color-background-2); }\n\n.moonkey-sdk-root .moonkey-btn--secondary { background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-btn--secondary:hover:not(:disabled) { background-color: var(--moonkey-color-background-3); }\n\n.moonkey-sdk-root .moonkey-btn--destructive { background-color: var(--moonkey-color-error); color: var(--moonkey-color-error-foreground); }\n.moonkey-sdk-root .moonkey-btn--destructive:hover:not(:disabled) { opacity: 0.9; }\n\n.moonkey-sdk-root .moonkey-btn--link { background: transparent; color: var(--moonkey-color-accent); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }\n\n/* === Input === */\n.moonkey-sdk-root .moonkey-input {\n display: flex; width: 100%; height: 2.75rem; padding: 0 0.75rem;\n font-size: 0.875rem; font-family: inherit; color: var(--moonkey-color-foreground);\n background-color: var(--moonkey-color-background); border: 1px solid var(--moonkey-color-border);\n border-radius: var(--moonkey-border-radius-md); outline: none;\n transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;\n}\n.moonkey-sdk-root .moonkey-input:focus { border-color: var(--moonkey-color-accent); box-shadow: 0 0 0 1px var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-input:disabled { opacity: 0.5; cursor: not-allowed; }\n.moonkey-sdk-root .moonkey-input--error { border-color: var(--moonkey-color-error); }\n\n/* === Label === */\n.moonkey-sdk-root .moonkey-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); line-height: 1; }\n.moonkey-sdk-root .moonkey-label--secondary { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-label--tertiary { color: var(--moonkey-color-foreground-4); font-size: 0.75rem; }\n.moonkey-sdk-root .moonkey-label--error { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-label--success { color: var(--moonkey-color-success); }\n\n/* === Detail Row === */\n.moonkey-sdk-root .moonkey-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }\n.moonkey-sdk-root .moonkey-detail-row__label { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-detail-row__value { font-size: 0.875rem; font-weight: 500; color: var(--moonkey-color-foreground); text-align: right; }\n\n/* === Divider === */\n.moonkey-sdk-root .moonkey-divider { border-top: 1px solid var(--moonkey-color-border); margin: 1rem 0; }\n\n/* === Boxes === */\n.moonkey-sdk-root .moonkey-box { padding: 0.75rem; border-radius: var(--moonkey-border-radius-lg); }\n.moonkey-sdk-root .moonkey-box--surface { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-box--error { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-box--success { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-box--info { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-box--warning { background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-error); display: flex; align-items: flex-start; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-box--scrollable { overflow-y: auto; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }\n\n/* === Address Pill === */\n.moonkey-sdk-root .moonkey-address-pill {\n display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem;\n background-color: var(--moonkey-color-background-3); color: var(--moonkey-color-foreground);\n border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md);\n font-size: 0.875rem; font-family: monospace; cursor: pointer;\n transition: background-color 0.2s, border-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-address-pill:hover { background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-address-pill--copied { border-color: var(--moonkey-color-success); }\n\n/* === Mono Text === */\n.moonkey-sdk-root .moonkey-mono { font-family: monospace; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Spinner === */\n.moonkey-sdk-root .moonkey-spinner {\n display: inline-block; flex-shrink: 0;\n border: 2px solid currentColor; border-top-color: transparent;\n border-radius: 9999px; animation: moonkey-spin 1s linear infinite;\n}\n.moonkey-sdk-root .moonkey-spinner--sm { width: 0.875rem; height: 0.875rem; }\n.moonkey-sdk-root .moonkey-spinner--md { width: 1rem; height: 1rem; }\n.moonkey-sdk-root .moonkey-spinner--lg { width: 1.5rem; height: 1.5rem; }\n.moonkey-sdk-root .moonkey-spinner--xl { width: 2rem; height: 2rem; }\n\n/* === Pulse skeleton === */\n.moonkey-sdk-root .moonkey-skeleton { background-color: var(--moonkey-color-background-2); border-radius: 0.25rem; animation: moonkey-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }\n\n/* === Flow layout === */\n.moonkey-sdk-root .moonkey-flow-close { position: absolute; top: 1rem; right: 1.5rem; display: flex; align-items: center; flex-shrink: 0; z-index: 1; }\n.moonkey-sdk-root .moonkey-flow-header { display: flex; flex-direction: column; text-align: center; padding: 0 0.5rem 0.25rem; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-content { display: flex; flex-direction: column; flex: 1; margin-top: 1rem; padding: 0 0.5rem; }\n.moonkey-sdk-root .moonkey-flow-footer {\n position: absolute; bottom: 0; left: 0; right: 0;\n background-color: var(--moonkey-color-background); padding: 1rem 2rem 3rem;\n margin: 0 0.125rem 0.125rem;\n border-bottom-left-radius: var(--moonkey-border-radius-lg);\n border-bottom-right-radius: var(--moonkey-border-radius-lg);\n}\n.moonkey-sdk-root .moonkey-flow-footer__actions { display: flex; gap: 0.75rem; }\n/* Buttons inside footer actions auto-stretch to fill space */\n.moonkey-sdk-root .moonkey-flow-footer__actions > .moonkey-btn { flex: 1; height: 3rem; font-size: 1rem; }\n\n/* === Flow text utilities === */\n.moonkey-sdk-root .moonkey-text--heading { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-text--title { font-size: 1rem; font-weight: 600; color: var(--moonkey-color-foreground); }\n.moonkey-sdk-root .moonkey-text--secondary { font-size: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-text--error { font-size: 0.875rem; color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-text--success { font-size: 0.875rem; color: var(--moonkey-color-success); }\n.moonkey-sdk-root .moonkey-flow-logo { display: flex; align-items: center; justify-content: center; }\n\n/* === Terms link row (accept-terms) === */\n.moonkey-sdk-root .moonkey-terms-link {\n display: flex; flex-direction: row; align-items: center; justify-content: space-between;\n border-radius: var(--moonkey-border-radius-lg); padding: 0.75rem;\n margin-left: 0.75rem; margin-right: 0.75rem;\n border: 1px solid var(--moonkey-color-border); cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.moonkey-sdk-root .moonkey-terms-link:hover { background-color: var(--moonkey-color-background-2); }\n\n/* === Wallet item === */\n.moonkey-sdk-root .moonkey-wallet-item {\n display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem;\n border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg);\n background-color: var(--moonkey-color-background); cursor: pointer;\n transition: border-color 0.2s, background-color 0.2s;\n}\n.moonkey-sdk-root .moonkey-wallet-item:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-wallet-item--selected { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n\n/* === Flow overlay (z-index stack wrapper) === */\n.moonkey-sdk-root .moonkey-flow-overlay { position: relative; z-index: 100; }\n\n/* === Wallet connection state container === */\n.moonkey-sdk-root .moonkey-connect-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 3rem; padding-bottom: 3rem; }\n\n/* === Large wallet icon spinner === */\n.moonkey-sdk-root .moonkey-wallet-spinner { position: relative; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid var(--moonkey-color-border); }\n.moonkey-sdk-root .moonkey-wallet-spinner__ring--error { border-color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-wallet-spinner__spin { position: absolute; inset: 0; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--moonkey-color-accent); animation: moonkey-spin 1s linear infinite; }\n.moonkey-sdk-root .moonkey-wallet-spinner__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }\n\n/* === Data preview box (sign typed-data / transactions) === */\n.moonkey-sdk-root .moonkey-data-preview { margin-top: 0.25rem; padding: 0.75rem; background-color: var(--moonkey-color-background-2); border-radius: var(--moonkey-border-radius-md); font-size: 0.875rem; font-family: monospace; word-break: break-all; white-space: pre-line; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable data container (signing flows) === */\n.moonkey-sdk-root .moonkey-data-scroll { display: flex; flex-direction: column; max-height: 390px; overflow-y: auto; padding-bottom: 5rem; position: relative; }\n\n/* === Expand/collapse trigger === */\n.moonkey-sdk-root .moonkey-expand-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; }\n\n/* === Scrollable bordered list (transaction detail panels) === */\n.moonkey-sdk-root .moonkey-scrollable-list { display: flex; flex-direction: column; overflow-y: auto; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); scrollbar-width: none; }\n.moonkey-sdk-root .moonkey-scrollable-list::-webkit-scrollbar { display: none; }\n\n/* === Modal content column (passkey-enroll, add-passkey) === */\n.moonkey-sdk-root .moonkey-modal-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem 1.5rem; gap: 1rem; }\n\n/* === Back nav button (absolute top-left) === */\n.moonkey-sdk-root .moonkey-back-btn { position: absolute; top: 1rem; left: 0.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--moonkey-border-radius-full); }\n\n/* === Centered inline row (resend, action links) === */\n.moonkey-sdk-root .moonkey-center-row { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }\n\n/* === Stacked button column (modal CTAs) === */\n.moonkey-sdk-root .moonkey-btn-stack { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding-top: 0.5rem; }\n\n/* === Legal footer text (terms & privacy) === */\n.moonkey-sdk-root .moonkey-legal-text { font-size: 0.75rem; color: var(--moonkey-color-foreground-3); text-align: center; line-height: 1.5; margin-top: 1rem; }\n.moonkey-sdk-root .moonkey-legal-text a { color: var(--moonkey-color-accent); cursor: pointer; }\n/* Inline-checkbox variant: same typography, but flex layout aligned left so the checkbox sits beside the link text. */\n.moonkey-sdk-root .moonkey-legal-checkbox { display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.5rem; }\n.moonkey-sdk-root .moonkey-legal-checkbox input[type="checkbox"] { margin-top: 0.15rem; cursor: pointer; }\n\n/* === Login gating (require_users_accept_terms) === */\n/* Wraps the email/social/wallet buttons so they can be visually disabled until the terms checkbox is ticked. The default state is unaffected. */\n.moonkey-sdk-root .moonkey-login-gateable { transition: opacity 0.15s ease-out; }\n.moonkey-sdk-root .moonkey-login-gated { opacity: 0.5; pointer-events: none; }\n\n/* === Shared entry animations === */\n@keyframes moonkey-slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }\n@keyframes moonkey-success-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-bounce { from { opacity: 0; transform: translateY(-50px) rotate(-60deg); } to { opacity: 1; transform: translateY(20px) rotate(0deg); } }\n@keyframes moonkey-error-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }\n@keyframes moonkey-mail-slide-in { from { opacity: 0; transform: translateX(-50px) rotate(-15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }\n@keyframes moonkey-verified-slide-in { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }\n\n/* === Icon size utilities === */\n.moonkey-sdk-root .moonkey-icon--xs { width: 0.75rem; height: 0.75rem; }\n.moonkey-sdk-root .moonkey-icon--sm { width: 1rem; height: 1rem; }\n.moonkey-sdk-root .moonkey-icon--md { width: 1.5rem; height: 1.5rem; }\n.moonkey-sdk-root .moonkey-icon--lg { width: 2rem; height: 2rem; }\n.moonkey-sdk-root .moonkey-icon--xl { width: 2.5rem; height: 2.5rem; }\n.moonkey-sdk-root .moonkey-icon--2xl { width: 3rem; height: 3rem; }\n.moonkey-sdk-root .moonkey-icon--mr-xs { margin-right: 0.25rem; }\n.moonkey-sdk-root .moonkey-icon--mr-sm { margin-right: 0.5rem; }\n.moonkey-sdk-root .moonkey-icon--accent { color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-icon--success { color: var(--moonkey-color-success, #16a34a); }\n.moonkey-sdk-root .moonkey-icon--error { color: var(--moonkey-color-error); }\n.moonkey-sdk-root .moonkey-icon--muted { color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-icon--fg { color: var(--moonkey-color-foreground); }\n\n/* === Layout utilities === */\n.moonkey-sdk-root .moonkey-flex-center { display: flex; align-items: center; justify-content: center; }\n.moonkey-sdk-root .moonkey-flex-between { display: flex; align-items: center; justify-content: space-between; }\n.moonkey-sdk-root .moonkey-flex-col { display: flex; flex-direction: column; }\n.moonkey-sdk-root .moonkey-flex-col-center { display: flex; flex-direction: column; align-items: center; }\n\n/* === Text modifiers === */\n.moonkey-sdk-root .moonkey-text--semibold { font-weight: 500; }\n.moonkey-sdk-root .moonkey-text--bold { font-weight: 600; }\n.moonkey-sdk-root .moonkey-text--center { text-align: center; }\n.moonkey-sdk-root .moonkey-text--sm { font-size: 0.875rem; }\n.moonkey-sdk-root .moonkey-text--lg { font-size: 1.125rem; }\n.moonkey-sdk-root .moonkey-text--xl { font-size: 1.25rem; }\n\n/* === Transaction detail card (success receipt) === */\n.moonkey-sdk-root .moonkey-detail-card { display: flex; flex-direction: column; border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 2rem 0.5rem 0; }\n.moonkey-sdk-root .moonkey-detail-card__rows { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }\n\n/* === Failed-transaction error scroll box === */\n.moonkey-sdk-root .moonkey-error-scroll { display: flex; flex-direction: column; background-color: var(--moonkey-color-background-2); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-lg); padding: 1rem 0.5rem; margin: 0.5rem; height: 150px; overflow: auto; }\n\n/* === Network logo badge (ethereum/solana pair) === */\n.moonkey-sdk-root .moonkey-network-badge { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--moonkey-color-border); background-color: var(--moonkey-color-background-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.moonkey-sdk-root .moonkey-network-badge--overlap { margin-left: -8px; }\n\n/* === Positioned icons inside inputs === */\n.moonkey-sdk-root .moonkey-search-icon { position: absolute; left: 0.75rem; top: 0.875rem; color: var(--moonkey-color-foreground-3); }\n.moonkey-sdk-root .moonkey-input-icon--left { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--moonkey-color-foreground-3); pointer-events: none; }\n\n/* === Step indicator (N of M) === */\n.moonkey-sdk-root .moonkey-step-label { font-size: 0.75rem; font-weight: 600; color: var(--moonkey-color-accent); letter-spacing: 0.05em; text-transform: uppercase; }\n\n/* === Feature bullet item (passkey enroll) === */\n.moonkey-sdk-root .moonkey-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; font-size: 0.875rem; color: var(--moonkey-color-foreground); }\n\n/* === Monospace textarea (import wallet) === */\n.moonkey-sdk-root .moonkey-mono-textarea { width: 100%; min-height: 100px; padding: 0.75rem; font-family: monospace; font-size: 0.75rem; background-color: var(--moonkey-color-background-2); color: var(--moonkey-color-foreground); border: 1px solid var(--moonkey-color-border); border-radius: var(--moonkey-border-radius-md); outline: none; resize: vertical; }\n\n/* === Sign-flow inner section and row === */\n.moonkey-sdk-root .moonkey-sign-section { padding: 0.5rem; }\n.moonkey-sdk-root .moonkey-sign-row { display: flex; align-items: center; justify-content: space-between; }\n\n/* === External wallet connect button (login flow) === */\n.moonkey-sdk-root .moonkey-external-wallet-btn { border-radius: var(--moonkey-border-radius-lg); border: 1px solid var(--moonkey-color-border); padding: 0.75rem 0.25rem; cursor: pointer; margin-top: 0.75rem; transition: all 0.2s ease-in-out; background-color: transparent; }\n.moonkey-sdk-root .moonkey-external-wallet-btn:hover { border-color: var(--moonkey-color-accent); background-color: var(--moonkey-color-background-2); }\n.moonkey-sdk-root .moonkey-external-wallet-btn--accent-hover:hover { background-color: var(--moonkey-color-accent); }\n.moonkey-sdk-root .moonkey-external-wallet-btn__inner { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; animation: moonkey-slide-in 0.3s ease-out 0.1s both; }\n\n/* === Flex row utility (icon + label pairs) === */\n.moonkey-sdk-root .moonkey-flex-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }\n\n/* === Login landing layout === */\n.moonkey-sdk-root .moonkey-header { position: absolute; top: 1.5rem; left: 0; right: 0; text-align: center; font-size: 0.875rem; color: var(--moonkey-color-foreground); margin-bottom: 0.5rem; padding-left: 3rem; padding-right: 3rem; }\n.moonkey-sdk-root .moonkey-header__inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-content-wrapper { padding-top: 1rem; padding-bottom: 1rem; width: 100%; }\n.moonkey-sdk-root .moonkey-logo-section { text-align: center; margin-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-logo-section__inner { padding-top: 1rem; padding-bottom: 1rem; }\n.moonkey-sdk-root .moonkey-description { padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; color: var(--moonkey-color-foreground-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.moonkey-sdk-root .moonkey-form-section { padding: 0.5rem 1rem; }\n\n/* === Email OTP content fill === */\n.moonkey-sdk-root .moonkey-otp-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }\n\n/* === Wallet icon status overlay badge === */\n.moonkey-sdk-root .moonkey-wallet-status-badge { position: absolute; bottom: -4px; right: -4px; background-color: var(--moonkey-color-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n/* === Wallet connect success animation === */\n@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n';
3857
3849
  // src/components/scoped-container.tsx
3858
3850
  function ScopedContainer(param) {
3859
3851
  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;
@@ -3909,45 +3901,9 @@ function ScopedContainer(param) {
3909
3901
  ]
3910
3902
  });
3911
3903
  }
3912
- // assets/moonkey-wordmark.svg
3913
- var moonkey_wordmark_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1081" height="265" viewBox="0 0 1081 265">%0A <g transform="translate(14.000000, 0.000000)">%0A <g transform="translate(0.000000, 76.000000)">%0A <path%0A d="M64,169 C71,189 87,189 94,169 L64,169 Z"%0A fill="%23000000"%0A fill-rule="nonzero"%0A />%0A <circle%0A stroke="%23000000"%0A stroke-width="27"%0A fill-opacity="0"%0A fill="%23000000"%0A cx="79"%0A cy="79"%0A r="79"%0A />%0A <circle fill="%23000000" cx="79" cy="77" r="18" />%0A </g>%0A <g transform="translate(30, 0)">%0A <path%0A d="M231.6,207 L231.6,146.2 C231.6,132.4 241,125.4 250.2,125.4 C261.8,125.4 266.2,133.8 266.2,145.6 L266.2,207 L294.2,207 L294.2,146.2 C294.2,132.4 303.6,125.4 312.8,125.4 C324.4,125.4 328.8,133.8 328.8,145.6 L328.8,207 L356.8,207 L356.8,137.6 C356.8,114.8 342.8,99.8 321.2,99.8 C305,99.8 295,107.6 288.6,114.2 C282.8,105.2 273,99.8 260.2,99.8 C246.6,99.8 237.2,105.8 231.6,112.6 L231.6,101.8 L203.6,101.8 L203.6,207 L231.6,207 Z M424.8,209.2 C455.2,209.2 476.4,187.2 476.4,154.4 C476.4,121.8 455.2,99.8 424.8,99.8 C394.4,99.8 373.2,121.8 373.2,154.4 C373.2,187.2 394.4,209.2 424.8,209.2 Z M424.8,186 C410.2,186 401,174.4 401,154.4 C401,134.6 410.2,123 424.8,123 C439.4,123 448.4,134.6 448.4,154.4 C448.4,174.4 439.4,186 424.8,186 Z M538.8,209.2 C569.2,209.2 590.4,187.2 590.4,154.4 C590.4,121.8 569.2,99.8 538.8,99.8 C508.4,99.8 487.2,121.8 487.2,154.4 C487.2,187.2 508.4,209.2 538.8,209.2 Z M538.8,186 C524.2,186 515,174.4 515,154.4 C515,134.6 524.2,123 538.8,123 C553.4,123 562.4,134.6 562.4,154.4 C562.4,174.4 553.4,186 538.8,186 Z M635.4,207 L635.4,146.2 C635.4,132.4 645,125.4 654.8,125.4 C666.8,125.4 671.6,133.8 671.6,145.6 L671.6,207 L699.6,207 L699.6,137.6 C699.6,114.8 686.2,99.8 664.2,99.8 C650.8,99.8 641.2,105.8 635.4,112.6 L635.4,101.8 L607.4,101.8 L607.4,207 L635.4,207 Z M750,207 L750,174.8 L762.4,162 L791.4,207 L823.4,207 L781.8,141.8 L820.4,101.8 L786.8,101.8 L750,142.6 L750,63.4 L722,63.4 L722,207 L750,207 Z M880.4,209.2 C901.4,209.2 919.2,198.4 926.8,179.2 L903.2,170.8 C900,181 891.4,186.2 880.6,186.2 C866.8,186.2 857,176.6 855,160.6 L927.4,160.6 L927.4,152.4 C927.4,123 910.6,99.8 879.4,99.8 C849.6,99.8 828.2,123.4 828.2,154.4 C828.2,187 849.4,209.2 880.4,209.2 Z M899.6,141.6 L856,141.6 C859.4,128.8 868,122.2 879.2,122.2 C892.8,122.2 899.4,131.2 899.6,141.6 Z M955.6,243.6 C978.8,243.6 988.4,231.6 995.2,213 L1036.8,101.8 L1008.6,101.8 L985.4,171 L961.6,101.8 L932.6,101.8 L970.4,202.8 L967,211.2 C964,218.8 960,220.8 952.6,220.8 C949.4,220.8 947.6,220.6 944.6,220.4 L944.6,243 C948.2,243.4 950.2,243.6 955.6,243.6 Z"%0A fill="%23000000"%0A fill-rule="nonzero"%0A />%0A </g>%0A </g>%0A</svg>%0A%0A';
3914
- // src/components/vanilla-ui/footer-secured.tsx
3915
- function FooterSecured(param) {
3916
- var _param_isDark = param.isDark, isDark = _param_isDark === void 0 ? false : _param_isDark;
3917
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
3918
- className: "moonkey-footer-secured",
3919
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
3920
- className: "moonkey-footer-secured__inner",
3921
- children: [
3922
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
3923
- children: "Secured by"
3924
- }),
3925
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", {
3926
- href: "https://moonkey.fun",
3927
- target: "_blank",
3928
- rel: "noopener noreferrer",
3929
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", {
3930
- src: moonkey_wordmark_default,
3931
- alt: "MoonKey",
3932
- width: 80,
3933
- height: 24,
3934
- style: isDark ? {
3935
- filter: "invert(1) brightness(2)",
3936
- display: "block",
3937
- transform: "translateY(-1.5px)"
3938
- } : {
3939
- display: "block",
3940
- transform: "translateY(-1.5px)"
3941
- }
3942
- })
3943
- })
3944
- ]
3945
- })
3946
- });
3947
- }
3948
3904
  // src/components/vanilla-ui/root-card.tsx
3949
3905
  function RootCard(param) {
3950
- var children = param.children, _param_centerContent = param.centerContent, centerContent = _param_centerContent === void 0 ? true : _param_centerContent, _param_embedded = param.embedded, embedded = _param_embedded === void 0 ? false : _param_embedded, _param_isDark = param.isDark, isDark = _param_isDark === void 0 ? false : _param_isDark, theme = param.theme, appearance = param.appearance, _param_hideFooter = param.hideFooter, hideFooter = _param_hideFooter === void 0 ? false : _param_hideFooter;
3906
+ var children = param.children, _param_centerContent = param.centerContent, centerContent = _param_centerContent === void 0 ? true : _param_centerContent, _param_embedded = param.embedded, embedded = _param_embedded === void 0 ? false : _param_embedded, _param_isDark = param.isDark, isDark = _param_isDark === void 0 ? false : _param_isDark, theme = param.theme, appearance = param.appearance;
3951
3907
  var minHeight = "500px";
3952
3908
  var cardStyle = {
3953
3909
  minHeight: minHeight,
@@ -4016,19 +3972,14 @@ function RootCard(param) {
4016
3972
  isDark: isDark,
4017
3973
  theme: theme,
4018
3974
  appearance: appearance,
4019
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
3975
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
4020
3976
  className: cx("moonkey-root-card", "moonkey-embedded"),
4021
3977
  style: cardStyle,
4022
- children: [
4023
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
4024
- className: "moonkey-card-content",
4025
- style: contentStyle,
4026
- children: children
4027
- }),
4028
- !hideFooter && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FooterSecured, {
4029
- isDark: isDark
4030
- })
4031
- ]
3978
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
3979
+ className: "moonkey-card-content",
3980
+ style: contentStyle,
3981
+ children: children
3982
+ })
4032
3983
  })
4033
3984
  });
4034
3985
  }
@@ -4185,19 +4136,14 @@ function RootCard(param) {
4185
4136
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
4186
4137
  className: "moonkey-modal-wrapper",
4187
4138
  style: modalWrapperStyle,
4188
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
4139
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
4189
4140
  className: cx("moonkey-root-card", "moonkey-modal", "moonkey-modal-card"),
4190
4141
  style: modalCardStyle,
4191
- children: [
4192
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
4193
- className: "moonkey-card-content",
4194
- style: contentStyle,
4195
- children: children
4196
- }),
4197
- !hideFooter && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FooterSecured, {
4198
- isDark: isDark
4199
- })
4200
- ]
4142
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
4143
+ className: "moonkey-card-content",
4144
+ style: contentStyle,
4145
+ children: children
4146
+ })
4201
4147
  })
4202
4148
  })
4203
4149
  })
@@ -5745,7 +5691,7 @@ var en_default = {
5745
5691
  emailOtp: {
5746
5692
  title: "Enter verification code",
5747
5693
  descriptionStart: "Please check",
5748
- descriptionEnd: "for an email from moonkey.fun and enter the code below.",
5694
+ descriptionEnd: "for an email from moonx-dev.com and enter the code below.",
5749
5695
  resendCode: "Resend code",
5750
5696
  sending: "Sending...",
5751
5697
  verified: "Verified",
@@ -5883,7 +5829,7 @@ var es_default = {
5883
5829
  emailOtp: {
5884
5830
  title: "Ingrese el c\xF3digo de verificaci\xF3n",
5885
5831
  descriptionStart: "Por favor revise",
5886
- descriptionEnd: "para un correo de moonkey.fun y ingrese el c\xF3digo a continuaci\xF3n.",
5832
+ descriptionEnd: "para un correo de moonx-dev.com y ingrese el c\xF3digo a continuaci\xF3n.",
5887
5833
  resendCode: "Reenviar c\xF3digo",
5888
5834
  sending: "Enviando...",
5889
5835
  verified: "Verificado",
@@ -11200,7 +11146,7 @@ var useEthereumWallet = function useEthereumWallet(param) {
11200
11146
  uri: window.location.origin,
11201
11147
  version: "1",
11202
11148
  chainId: numericChainId,
11203
- statement: "Sign in with Ethereum to MoonKey using ".concat(walletName, "."),
11149
+ statement: "Sign in with Ethereum to MoonX using ".concat(walletName, "."),
11204
11150
  issuedAt: /* @__PURE__ */ new Date().toISOString(),
11205
11151
  walletName: walletName
11206
11152
  });
@@ -11430,7 +11376,7 @@ var useEthereumWallet = function useEthereumWallet(param) {
11430
11376
  uri: window.location.origin,
11431
11377
  version: "1",
11432
11378
  chainId: numericChainId,
11433
- statement: "Link Ethereum wallet to MoonKey using ".concat(walletName, "."),
11379
+ statement: "Link Ethereum wallet to MoonX using ".concat(walletName, "."),
11434
11380
  issuedAt: /* @__PURE__ */ new Date().toISOString(),
11435
11381
  walletName: walletName
11436
11382
  });
@@ -13596,12 +13542,10 @@ var WalletConnectFlow = function WalletConnectFlow(param) {
13596
13542
  return walletConnectConfig;
13597
13543
  }
13598
13544
  return {
13599
- name: "MoonKey",
13600
- description: "MoonKey Wallet Connection",
13601
- url: typeof window !== "undefined" ? window.location.origin : "https://moonkey.fun",
13602
- icons: [
13603
- "https://moonkey.fun/icon.png"
13604
- ]
13545
+ name: "MoonX",
13546
+ description: "MoonX Wallet Connection",
13547
+ url: typeof window !== "undefined" ? window.location.origin : "https://moonx-dev.com",
13548
+ icons: []
13605
13549
  };
13606
13550
  }, [
13607
13551
  walletConnectConfig
@@ -14085,7 +14029,7 @@ var useSolanaWallet = function useSolanaWallet(param) {
14085
14029
  uri: window.location.origin,
14086
14030
  version: "1",
14087
14031
  chainId: "solana:mainnet",
14088
- statement: "Sign in with Solana to MoonKey using ".concat(walletAdapter.name, "."),
14032
+ statement: "Sign in with Solana to MoonX using ".concat(walletAdapter.name, "."),
14089
14033
  issuedAt: /* @__PURE__ */ new Date().toISOString()
14090
14034
  });
14091
14035
  preparedMessage = siwsMessage.prepareAdvanced();
@@ -14260,7 +14204,7 @@ var useSolanaWallet = function useSolanaWallet(param) {
14260
14204
  uri: window.location.origin,
14261
14205
  version: "1",
14262
14206
  chainId: "solana:mainnet",
14263
- statement: "Sign in with Solana to MoonKey using ".concat(walletAdapter.name, "."),
14207
+ statement: "Sign in with Solana to MoonX using ".concat(walletAdapter.name, "."),
14264
14208
  issuedAt: /* @__PURE__ */ new Date().toISOString()
14265
14209
  });
14266
14210
  preparedMessage = siwsMessage.prepareAdvanced();
@@ -15176,12 +15120,10 @@ var WalletsFlow = function WalletsFlow(param) {
15176
15120
  ]));
15177
15121
  var effectiveMetadata = _react3.useMemo.call(void 0, function() {
15178
15122
  var defaultMetadata = {
15179
- name: "MoonKey",
15180
- description: "MoonKey Wallet Connection",
15181
- url: typeof window !== "undefined" ? window.location.origin : "https://moonkey.fun",
15182
- icons: [
15183
- "https://moonkey.fun/icon.png"
15184
- ]
15123
+ name: "MoonX",
15124
+ description: "MoonX Wallet Connection",
15125
+ url: typeof window !== "undefined" ? window.location.origin : "https://moonx-dev.com",
15126
+ icons: []
15185
15127
  };
15186
15128
  var metadata = walletConnectConfig || defaultMetadata;
15187
15129
  if (!metadata) {
@@ -15795,7 +15737,9 @@ var LoginLanding = function LoginLanding(param) {
15795
15737
  }
15796
15738
  ]),
15797
15739
  provider: provider,
15798
- login_redirect_url: window.location.href
15740
+ // Origin + path only (no query/fragment): the OAuth callback appends
15741
+ // ?token= to this, and the app returns to the page it started on.
15742
+ login_redirect_url: window.location.origin + window.location.pathname
15799
15743
  })
15800
15744
  ];
15801
15745
  case 2:
@@ -24492,12 +24436,10 @@ var MoonKeyProvider = function MoonKeyProvider(param) {
24492
24436
  SignClient.init({
24493
24437
  projectId: projectId,
24494
24438
  metadata: {
24495
- name: "MoonKey",
24496
- description: "MoonKey Wallet Connection",
24497
- url: typeof window !== "undefined" ? window.location.origin : "https://moonkey.fun",
24498
- icons: [
24499
- "https://moonkey.fun/icon.png"
24500
- ]
24439
+ name: "MoonX",
24440
+ description: "MoonX Wallet Connection",
24441
+ url: typeof window !== "undefined" ? window.location.origin : "https://moonx-dev.com",
24442
+ icons: []
24501
24443
  }
24502
24444
  })
24503
24445
  ];