@abstraxn/signer-react 3.3.9 → 4.0.0

package/dist/src/components/OnboardingUI/components/Divider.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Divider Component
+ * A horizontal "or" divider used to separate auth method sections
+ */
+export declare function Divider({ text }: {
+    text?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/OnboardingUI/components/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Divider Component
+ * A horizontal "or" divider used to separate auth method sections
+ */
+export function Divider({ text = 'or' }) {
+    return (_jsx("div", { className: "onboarding-divider", children: _jsx("span", { className: "onboarding-divider-text", children: text }) }));
+}
+//# sourceMappingURL=Divider.js.map

package/dist/src/components/OnboardingUI/components/EmailForm.d.ts

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import { OnboardingUIConfig } from "@abstraxn/signer-core";
-import "../OnboardingUI.css";
 export interface EmailFormProps {
     email: string;
     onChange: (email: string) => void;

package/dist/src/components/OnboardingUI/components/EmailForm.js

@@ -6,7 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { TfiEmail } from "../../icons";
 import { isValidEmail } from "@abstraxn/signer-core";
-import "../OnboardingUI.css";
 export const EmailForm = ({ email, onChange, onSubmit, loading = false, error = null, config, readOnly = false, }) => {
     const theme = config?.theme || "light";
     const labels = config?.labels || {};
@@ -32,6 +31,6 @@ export const EmailForm = ({ email, onChange, onSubmit, loading = false, error =
             onSubmit();
         }
     };
-    return (_jsx("form", { className: "onboarding-form", onSubmit: handleSubmit, noValidate: true, children: _jsxs("div", { className: "onboarding-input-group", children: [_jsx("label", { htmlFor: "onboarding-email", className: "onboarding-input-label", children: labels.emailLabel || "Email Address" }), _jsxs("div", { className: "onboarding-input-wrapper", children: [_jsx(TfiEmail, { className: "onboarding-input-icon", size: 18 }), _jsx("input", { id: "onboarding-email", type: "email", className: `onboarding-input${readOnly ? " onboarding-email-readonly" : ""}`, placeholder: labels.emailPlaceholder || "Enter your email address", value: email, onChange: readOnly ? undefined : (e) => onChange(e.target.value), onKeyPress: handleKeyPress, disabled: loading, readOnly: readOnly, required: true, autoComplete: "email", autoFocus: true }), _jsx("button", { type: "submit", className: `onboarding-input-arrow-button${hasEmailValue ? " onboarding-input-arrow-button-filled" : ""}`, disabled: loading || !isEmailValid, "aria-label": "Continue", children: loading ? (_jsxs("svg", { className: "onboarding-input-arrow-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), _jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), _jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), _jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), _jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), _jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), _jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })] })) : (_jsxs("svg", { className: "onboarding-input-arrow-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("polyline", { points: "12 5 19 12 12 19" })] })) })] }), displayError && (_jsx("div", { className: "onboarding-error", role: "alert", children: displayError }))] }) }));
+    return (_jsx("form", { className: "onboarding-form", onSubmit: handleSubmit, noValidate: true, children: _jsxs("div", { className: "onboarding-input-group", children: [_jsx("label", { htmlFor: "onboarding-email", className: "onboarding-input-label", children: labels.emailLabel || "Email Address" }), _jsxs("div", { className: "onboarding-input-wrapper", children: [_jsx(TfiEmail, { className: "onboarding-input-icon", size: 18 }), _jsx("input", { id: "onboarding-email", type: "email", className: `onboarding-input${readOnly ? " onboarding-email-readonly" : ""}`, part: "input", placeholder: labels.emailPlaceholder || "Enter your email address", value: email, onChange: readOnly ? undefined : (e) => onChange(e.target.value), onKeyPress: handleKeyPress, disabled: loading, readOnly: readOnly, required: true, autoComplete: "email", autoFocus: true }), _jsx("button", { type: "submit", className: `onboarding-input-arrow-button${hasEmailValue ? " onboarding-input-arrow-button-filled" : ""}`, disabled: loading || !isEmailValid, "aria-label": "Continue", children: loading ? (_jsxs("svg", { className: "onboarding-input-arrow-icon onboarding-button-spinner", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), _jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), _jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), _jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), _jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), _jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), _jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })] })) : (_jsxs("svg", { className: "onboarding-input-arrow-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("polyline", { points: "12 5 19 12 12 19" })] })) })] }), displayError && (_jsx("div", { className: "onboarding-error", role: "alert", children: displayError }))] }) }));
 };
 //# sourceMappingURL=EmailForm.js.map

package/dist/src/components/OnboardingUI/components/MfaForm.d.ts

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import type { OnboardingUIConfig } from "@abstraxn/signer-core";
-import "../OnboardingUI.css";
 export interface MfaFormProps {
     code: string;
     onChange: (code: string) => void;

package/dist/src/components/OnboardingUI/components/MfaForm.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * MfaForm Component
  * MFA (auth code / TOTP) input form for login verification
  */
 import React, { useRef, useEffect } from "react";
-import "../OnboardingUI.css";
 export const MfaForm = ({ code, onChange, onSubmit, onBack, loading = false, error = null, config, }) => {
     const labels = config?.labels || {};
     const mfaInputsRef = useRef([]);
@@ -83,6 +82,6 @@ export const MfaForm = ({ code, onChange, onSubmit, onBack, loading = false, err
                             }, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: "onboarding-otp-input", value: digit, onChange: (e) => handleDigitChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: loading, autoFocus: index === 0, "aria-label": `Authentication code digit ${index + 1}` }, `mfa-input-${index}`))) })), !useBackupCode && (_jsxs("p", { className: "onboarding-mfa-trouble-text", children: ["Having trouble?", " ", _jsx("button", { type: "button", className: "onboarding-mfa-backup-link", onClick: () => {
                                     setUseBackupCode(true);
                                     onChange("");
-                                }, disabled: loading, children: "Use a backup code" })] })), _jsx("button", { type: "submit", className: "onboarding-button onboarding-button-primary", disabled: loading || code.length !== codeLength, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), _jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), _jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), _jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), _jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), _jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), _jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })] }), "Verifying..."] })) : ("Verify") })] })] }));
+                                }, disabled: loading, children: "Use a backup code" })] })), _jsx("button", { type: "submit", className: "onboarding-button onboarding-button-primary", part: "button-primary", disabled: loading || code.length !== codeLength, children: loading ? (_jsxs("span", { className: "onboarding-button-loading", children: [_jsxs("svg", { className: "onboarding-button-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), _jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), _jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), _jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), _jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), _jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), _jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })] }), _jsx("span", { children: "Verifying..." })] })) : ("Verify") })] })] }));
 };
 //# sourceMappingURL=MfaForm.js.map

package/dist/src/components/OnboardingUI/components/Modal.d.ts

@@ -3,7 +3,6 @@
  * React Portal-based modal for OnboardingUI
  */
 import React from 'react';
-import '../OnboardingUI.css';
 export interface ModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/src/components/OnboardingUI/components/Modal.js

@@ -5,10 +5,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import '../OnboardingUI.css';
+import { useShadowHost } from '../../ShadowHost';
+import { getDeepActiveElement } from '../../../utils/shadowFocus';
+import { CloseIcon } from '../../icons';
 export const Modal = ({ isOpen, onClose, closeOnBackdropClick = true, showCloseButton = false, children, theme = 'light', }) => {
     const modalRef = useRef(null);
     const contentRef = useRef(null);
+    // Portal target: the enclosing ShadowHost's container, so this modal stays
+    // inside the isolation boundary instead of escaping to document.body.
+    // document.body fallback is purely defensive.
+    const shadowHost = useShadowHost();
+    const portalTarget = shadowHost?.container ?? document.body;
     useEffect(() => {
         if (isOpen) {
             // Prevent body scroll
@@ -32,11 +39,12 @@ export const Modal = ({ isOpen, onClose, closeOnBackdropClick = true, showCloseB
             const firstElement = focusableElements[0];
             const lastElement = focusableElements[focusableElements.length - 1];
             if (e.key === 'Tab') {
-                if (e.shiftKey && document.activeElement === firstElement) {
+                const active = getDeepActiveElement();
+                if (e.shiftKey && active === firstElement) {
                     e.preventDefault();
                     lastElement.focus();
                 }
-                else if (!e.shiftKey && document.activeElement === lastElement) {
+                else if (!e.shiftKey && active === lastElement) {
                     e.preventDefault();
                     firstElement.focus();
                 }
@@ -59,6 +67,6 @@ export const Modal = ({ isOpen, onClose, closeOnBackdropClick = true, showCloseB
     return createPortal(_jsx("div", { ref: modalRef, className: `onboarding-modal-overlay onboarding-modal-open onboarding-theme-${theme}`, onClick: handleBackdropClick, role: "dialog", "aria-modal": "true", children: _jsxs("div", { ref: contentRef, className: `onboarding-modal-content onboarding-theme-${theme}`, onClick: (e) => e.stopPropagation(), children: [showCloseButton && (_jsx("button", { type: "button", className: `onboarding-modal-close onboarding-theme-${theme}`, "aria-label": "Close", onClick: (e) => {
                         e.stopPropagation();
                         onClose();
-                    }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })), children] }) }), document.body);
+                    }, children: _jsx(CloseIcon, { size: 20 }) })), children] }) }), portalTarget);
 };
 //# sourceMappingURL=Modal.js.map

package/dist/src/components/OnboardingUI/components/OtpForm.d.ts

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import type { OnboardingUIConfig } from "@abstraxn/signer-core";
-import "../OnboardingUI.css";
 export interface OtpFormProps {
     email: string;
     otp: string;

package/dist/src/components/OnboardingUI/components/OtpForm.js

@@ -1,11 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * OtpForm Component
  * OTP input form for verification
  */
 import React, { useRef, useEffect } from "react";
 import { TfiEmail } from "../../icons";
-import "../OnboardingUI.css";
 export const OtpForm = ({ email, otp, onChange, onSubmit, onResend, onBack, loading = false, resending = false, requireManualVerify = false, error = null, resendCooldown = 0, config, }) => {
     const theme = config?.theme || "light";
     const labels = config?.labels || {};
@@ -69,7 +68,7 @@ export const OtpForm = ({ email, otp, onChange, onSubmit, onResend, onBack, load
     }, [otp, loading, error, requireManualVerify, onSubmit]);
     return (_jsxs("div", { className: "onboarding-otp-verification", children: [onBack && (_jsx("button", { type: "button", className: "onboarding-otp-back-button", onClick: onBack, "aria-label": "Go back to email input", disabled: loading || resending, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }) })), _jsx("div", { className: "onboarding-otp-icon-container", children: _jsx("div", { className: "onboarding-otp-icon-inner", children: _jsx(TfiEmail, { className: "onboarding-otp-icon", size: 28 }) }) }), _jsx("h1", { className: "onboarding-otp-title", children: labels.otpLabel || "Enter verification code" }), _jsx("p", { className: "onboarding-otp-instruction", children: "We sent a 6-digit code to" }), _jsx("p", { className: "onboarding-otp-email", children: email }), displayError && (_jsx("div", { className: "onboarding-error", role: "alert", children: displayError })), _jsxs("form", { onSubmit: handleSubmit, className: "onboarding-form", children: [_jsx("div", { className: "onboarding-otp-inputs-container", children: otpDigits.map((digit, index) => (_jsx("input", { ref: (el) => {
                                 otpInputsRef.current[index] = el;
-                            }, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: "onboarding-otp-input", value: digit, onChange: (e) => handleOtpChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: loading || resending, autoFocus: index === 0, "aria-label": `OTP digit ${index + 1}` }, `otp-input-${index}`))) }), _jsx("button", { type: "submit", className: "onboarding-button onboarding-button-primary", disabled: loading || resending || otp.length !== 6, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), _jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), _jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), _jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), _jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), _jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), _jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })] }), "Verifying..."] })) : (labels.otpButton || "Verify") })] }), _jsx("div", { className: "onboarding-otp-resend", children: _jsxs("p", { className: "onboarding-otp-resend-text", children: ["Didn't receive the code?", " ", resendCooldown > 0 ? (_jsxs("span", { className: "onboarding-otp-resend-cooldown", children: ["Resend in ", resendCooldown, "s"] })) : (_jsx("a", { href: "#", className: "onboarding-otp-resend-link", onClick: (e) => {
+                            }, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: "onboarding-otp-input", value: digit, onChange: (e) => handleOtpChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: loading || resending, autoFocus: index === 0, "aria-label": `OTP digit ${index + 1}` }, `otp-input-${index}`))) }), _jsx("button", { type: "submit", className: "onboarding-button onboarding-button-primary", part: "button-primary", disabled: loading || resending || otp.length !== 6, children: loading ? (_jsxs("span", { className: "onboarding-button-loading", children: [_jsxs("svg", { className: "onboarding-button-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), _jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), _jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), _jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), _jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), _jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), _jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })] }), _jsx("span", { children: "Verifying..." })] })) : (labels.otpButton || "Verify") })] }), _jsx("div", { className: "onboarding-otp-resend", children: _jsxs("p", { className: "onboarding-otp-resend-text", children: ["Didn't receive the code?", " ", resendCooldown > 0 ? (_jsxs("span", { className: "onboarding-otp-resend-cooldown", children: ["Resend in ", resendCooldown, "s"] })) : (_jsx("a", { href: "#", className: "onboarding-otp-resend-link", onClick: (e) => {
                                 e.preventDefault();
                                 if (!loading && !resending) {
                                     onResend();

package/dist/src/components/OnboardingUI/components/PasskeyButton.d.ts

@@ -4,7 +4,6 @@
  */
 import React from 'react';
 import type { OnboardingUIConfig } from '@abstraxn/signer-core';
-import '../OnboardingUI.css';
 export interface PasskeyButtonProps {
     onPasskeyLogin: () => void;
     onPasskeySignup: () => void;

package/dist/src/components/OnboardingUI/components/PasskeyButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import '../OnboardingUI.css';
+import { Divider } from './Divider';
 export const PasskeyButton = ({ onPasskeyLogin, onPasskeySignup, loading = false, config, }) => {
     const theme = config?.theme || 'light';
     const labels = config?.labels || {};
@@ -14,7 +14,7 @@ export const PasskeyButton = ({ onPasskeyLogin, onPasskeySignup, loading = false
     if (!isWebAuthnAvailable) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-divider", children: _jsx("span", { className: "onboarding-divider-text", children: "or" }) }), _jsxs("button", { type: "button", className: "onboarding-button onboarding-button-passkey", onClick: onPasskeyLogin, disabled: loading, children: [_jsx("svg", { className: "onboarding-passkey-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.682 19.338v-2.102c0-.476.127-.915.382-1.315.255-.4.603-.708 1.042-.926a14.89 14.89 0 0 1 2.939-1.067c.982-.24 1.966-.36 2.953-.36.352 0 .708.018 1.066.054.358.035.712.084 1.062.147-.015.831.164 1.613.537 2.347a4.882 4.882 0 0 0 1.595 1.822v1.4H3.682Zm15.003 2.713-1.303-1.303v-4.029a2.976 2.976 0 0 1-1.564-1.08 2.944 2.944 0 0 1-.608-1.832c0-.841.297-1.557.891-2.147a2.944 2.944 0 0 1 2.154-.886c.837 0 1.552.295 2.145.886.594.59.89 1.306.89 2.148 0 .656-.182 1.238-.546 1.743a3.018 3.018 0 0 1-1.404 1.084l1.073 1.072-1.294 1.31 1.294 1.301-1.728 1.733ZM11 12.006c-.94 0-1.742-.333-2.405-.999a3.28 3.28 0 0 1-.994-2.4c0-.94.331-1.743.994-2.405A3.276 3.276 0 0 1 11 5.208c.94 0 1.742.331 2.405.994.663.662.994 1.463.994 2.4 0 .939-.331 1.74-.994 2.406a3.27 3.27 0 0 1-2.405.998Zm7.252 2.235a.833.833 0 0 0 .612-.255.842.842 0 0 0 .255-.617.834.834 0 0 0-.253-.614.835.835 0 0 0-.612-.252.85.85 0 0 0-.616.251.823.823 0 0 0-.257.612c0 .24.085.447.257.618a.838.838 0 0 0 .614.257Z" }) }), labels.passkeyLoginButton || 'Continue with Passkey'] }), _jsx("a", { href: "#", className: "onboarding-passkey-signup-link", onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs("button", { type: "button", className: "onboarding-button onboarding-button-passkey", onClick: onPasskeyLogin, disabled: loading, children: [_jsx("svg", { className: "onboarding-passkey-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.682 19.338v-2.102c0-.476.127-.915.382-1.315.255-.4.603-.708 1.042-.926a14.89 14.89 0 0 1 2.939-1.067c.982-.24 1.966-.36 2.953-.36.352 0 .708.018 1.066.054.358.035.712.084 1.062.147-.015.831.164 1.613.537 2.347a4.882 4.882 0 0 0 1.595 1.822v1.4H3.682Zm15.003 2.713-1.303-1.303v-4.029a2.976 2.976 0 0 1-1.564-1.08 2.944 2.944 0 0 1-.608-1.832c0-.841.297-1.557.891-2.147a2.944 2.944 0 0 1 2.154-.886c.837 0 1.552.295 2.145.886.594.59.89 1.306.89 2.148 0 .656-.182 1.238-.546 1.743a3.018 3.018 0 0 1-1.404 1.084l1.073 1.072-1.294 1.31 1.294 1.301-1.728 1.733ZM11 12.006c-.94 0-1.742-.333-2.405-.999a3.28 3.28 0 0 1-.994-2.4c0-.94.331-1.743.994-2.405A3.276 3.276 0 0 1 11 5.208c.94 0 1.742.331 2.405.994.663.662.994 1.463.994 2.4 0 .939-.331 1.74-.994 2.406a3.27 3.27 0 0 1-2.405.998Zm7.252 2.235a.833.833 0 0 0 .612-.255.842.842 0 0 0 .255-.617.834.834 0 0 0-.253-.614.835.835 0 0 0-.612-.252.85.85 0 0 0-.616.251.823.823 0 0 0-.257.612c0 .24.085.447.257.618a.838.838 0 0 0 .614.257Z" }) }), labels.passkeyLoginButton || 'Continue with Passkey'] }), _jsx("a", { href: "#", className: "onboarding-passkey-signup-link", onClick: (e) => {
                     e.preventDefault();
                     onPasskeySignup();
                 }, children: labels.passkeySignupButton || 'Sign up with passkey' })] }));

package/dist/src/components/OnboardingUI/components/SocialButtons.d.ts

@@ -4,7 +4,6 @@
  */
 import React from 'react';
 import type { OnboardingUIConfig } from '@abstraxn/signer-core';
-import '../OnboardingUI.css';
 export interface SocialButtonsProps {
     onGoogleLogin: () => void;
     onTwitterLogin: () => void;

package/dist/src/components/OnboardingUI/components/SocialButtons.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '../OnboardingUI.css';
+import { GoogleIcon } from '../../icons';
 export const SocialButtons = ({ onGoogleLogin, onTwitterLogin, onDiscordLogin, loading = false, config, }) => {
     const theme = config?.theme || 'light';
     const labels = config?.labels || {};
@@ -12,9 +12,9 @@ export const SocialButtons = ({ onGoogleLogin, onTwitterLogin, onDiscordLogin, l
     }
     // If only Google is shown, use full button with text
     if (showGoogle && !showTwitter && !showDiscord) {
-        return (_jsxs("button", { type: "button", className: "onboarding-button onboarding-button-google", onClick: onGoogleLogin, disabled: loading, children: [_jsxs("svg", { className: "onboarding-google-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), _jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), _jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), _jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })] }), labels.googleButton || 'Continue with Google'] }));
+        return (_jsxs("button", { type: "button", className: "onboarding-button onboarding-button-google", part: "button-google", onClick: onGoogleLogin, disabled: loading, children: [_jsx(GoogleIcon, { size: 20, className: "onboarding-google-icon" }), labels.googleButton || 'Continue with Google'] }));
     }
     // Multiple social buttons - show as grid with icons only
-    return (_jsxs("div", { className: "onboarding-social-grid", children: [showGoogle && (_jsx("button", { type: "button", className: "onboarding-button-social-icon", onClick: onGoogleLogin, disabled: loading, "aria-label": "Continue with Google", children: _jsxs("svg", { className: "onboarding-social-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), _jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), _jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), _jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })] }) })), showTwitter && (_jsx("button", { type: "button", className: "onboarding-button-social-icon", onClick: onTwitterLogin, disabled: loading, "aria-label": "Continue with X (Twitter)", children: _jsx("svg", { className: "onboarding-social-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }) })), showDiscord && (_jsx("button", { type: "button", className: "onboarding-button-social-icon", onClick: onDiscordLogin, disabled: loading, "aria-label": "Continue with Discord", children: _jsx("svg", { className: "onboarding-social-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" }) }) }))] }));
+    return (_jsxs("div", { className: "onboarding-social-grid", children: [showGoogle && (_jsx("button", { type: "button", className: "onboarding-button-social-icon", onClick: onGoogleLogin, disabled: loading, "aria-label": "Continue with Google", children: _jsx(GoogleIcon, { size: 20, className: "onboarding-social-icon" }) })), showTwitter && (_jsx("button", { type: "button", className: "onboarding-button-social-icon", onClick: onTwitterLogin, disabled: loading, "aria-label": "Continue with X (Twitter)", children: _jsx("svg", { className: "onboarding-social-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }) })), showDiscord && (_jsx("button", { type: "button", className: "onboarding-button-social-icon", onClick: onDiscordLogin, disabled: loading, "aria-label": "Continue with Discord", children: _jsx("svg", { className: "onboarding-social-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" }) }) }))] }));
 };
 //# sourceMappingURL=SocialButtons.js.map

package/dist/src/components/OnboardingUI/onboardingShadowContainer.d.ts

@@ -0,0 +1,9 @@
+export interface OnboardingShadowContainer {
+    shadowRoot: ShadowRoot;
+    /** Stable element inside the shadow root — append the onboarding DOM tree here instead of document.body. */
+    container: HTMLElement;
+    hostElement: HTMLElement;
+    /** Call from destroy() — removes hostElement from document.body and unregisters from shadowRegistry. */
+    teardown: () => void;
+}
+export declare function createOnboardingShadowContainer(): OnboardingShadowContainer;

package/dist/src/components/OnboardingUI/onboardingShadowContainer.js

@@ -0,0 +1,36 @@
+/**
+ * Per-`OnboardingUIWeb`-instance shadow container factory — NOT a page-wide
+ * singleton. Each instance calls this once from init() and owns the result
+ * exclusively. A shared singleton would mean tearing down one
+ * AbstraxnProvider instance's onboarding modal rips the shadow host out from
+ * under a sibling instance's still-mounted modal. See
+ * docs/shadow-dom-migration-plan.md for the full rationale.
+ */
+import externalWalletButtonsCss from '../../ExternalWalletButtons.css.js';
+import { registerShadowRoot } from '../../utils/shadowRegistry';
+const STACKING_DEFENSE_STYLE = 'position: static; z-index: auto; transform: none; opacity: 1; isolation: auto;';
+export function createOnboardingShadowContainer() {
+    const hostElement = document.createElement('div');
+    hostElement.setAttribute('data-abstraxn-shadow-host', 'onboarding');
+    hostElement.setAttribute('style', STACKING_DEFENSE_STYLE);
+    document.body.appendChild(hostElement);
+    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
+    const container = document.createElement('div');
+    container.setAttribute('data-abstraxn-shadow-container', '');
+    shadowRoot.appendChild(container);
+    // Static, no config dependency — injected once at creation, since
+    // ExternalWalletButtons is mounted (via a separate createRoot call in
+    // AbstraxnProviderInner.tsx) inside this same shadow root and isn't
+    // wrapped by a React ShadowHost of its own.
+    const externalWalletStyle = document.createElement('style');
+    externalWalletStyle.setAttribute('data-abstraxn-css-key', 'external-wallet-buttons');
+    externalWalletStyle.textContent = externalWalletButtonsCss;
+    shadowRoot.appendChild(externalWalletStyle);
+    const unregister = registerShadowRoot(shadowRoot);
+    const teardown = () => {
+        unregister();
+        hostElement.remove();
+    };
+    return { shadowRoot, container, hostElement, teardown };
+}
+//# sourceMappingURL=onboardingShadowContainer.js.map

package/dist/src/components/ShadowHost/ShadowHost.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ShadowHost - wraps children in a Shadow DOM boundary so host-page CSS can
+ * never bleed in, and this SDK's CSS can never bleed out.
+ *
+ * See docs/shadow-dom-migration-plan.md for the full design rationale
+ * (two-pass render lifecycle, Strict Mode idempotency, nested-boundary
+ * invariant, customCSS precedence, failure modes).
+ */
+import { type ReactNode } from 'react';
+export interface ShadowHostProps {
+    children: ReactNode;
+    /** SDK's own static component styles — fixed at build time, injected once. */
+    cssTexts: string[];
+    /** Consumer-provided uiConfig.customCSS — runtime-mutable, always injected after cssTexts. */
+    customCSS?: string;
+    hostTagName?: string;
+}
+export declare function ShadowHost({ children, cssTexts, customCSS, hostTagName }: ShadowHostProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ShadowHost/ShadowHost.js

@@ -0,0 +1,123 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ShadowHost - wraps children in a Shadow DOM boundary so host-page CSS can
+ * never bleed in, and this SDK's CSS can never bleed out.
+ *
+ * See docs/shadow-dom-migration-plan.md for the full design rationale
+ * (two-pass render lifecycle, Strict Mode idempotency, nested-boundary
+ * invariant, customCSS precedence, failure modes).
+ */
+import React, { useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { ShadowHostContext, useShadowHost } from './ShadowHostContext';
+import { registerShadowRoot } from '../../utils/shadowRegistry';
+/**
+ * Prevents ordinary host-page global CSS (e.g. a broad `div { transform: ... }`
+ * reset) from accidentally promoting the shadow host into its own stacking
+ * context and trapping the modal's internal z-index inside it.
+ */
+const STACKING_DEFENSE_STYLE = {
+    position: 'static',
+    zIndex: 'auto',
+    transform: 'none',
+    opacity: 1,
+    isolation: 'auto',
+};
+function ensureStyleTagOnce(root, key, cssText) {
+    if (root.querySelector(`style[data-abstraxn-css-key="${key}"]`))
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('data-abstraxn-css-key', key);
+    style.textContent = cssText;
+    root.appendChild(style);
+}
+function upsertStyleTag(root, key, cssText) {
+    let style = root.querySelector(`style[data-abstraxn-css-key="${key}"]`);
+    if (!style) {
+        style = document.createElement('style');
+        style.setAttribute('data-abstraxn-css-key', key);
+        root.appendChild(style);
+    }
+    if (style.textContent !== cssText) {
+        style.textContent = cssText;
+    }
+}
+export function ShadowHost({ children, cssTexts, customCSS, hostTagName = 'div' }) {
+    const ancestor = useShadowHost();
+    const hostRef = useRef(null);
+    const containerRef = useRef(null);
+    const unregisterRef = useRef(null);
+    const [status, setStatus] = useState('pending');
+    // Nested case: extend the ancestor's boundary — keep its stylesheet in sync
+    // with whatever this nested instance additionally needs. No new shadow
+    // root, no new host element: the nested-boundary invariant is enforced
+    // here, not left to callers to remember.
+    useLayoutEffect(() => {
+        if (!ancestor)
+            return;
+        cssTexts.forEach((text, i) => ensureStyleTagOnce(ancestor.shadowRoot, `nested-css-${i}`, text));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ancestor]);
+    useLayoutEffect(() => {
+        if (ancestor)
+            return;
+        const root = hostRef.current?.shadowRoot;
+        if (!root)
+            return;
+        if (customCSS !== undefined) {
+            upsertStyleTag(root, 'custom', customCSS);
+        }
+    }, [ancestor, customCSS]);
+    // Mount: attach shadow root, inject static cssTexts once, register.
+    // Idempotent under React 18 Strict Mode's mount->cleanup->mount dev
+    // double-invocation — attachShadow is guarded, the container/style lookups
+    // are DOM-existence checks (not trusted booleans), and register/unregister
+    // is naturally idempotent since attachShadow can only ever produce one
+    // ShadowRoot object per host element.
+    useLayoutEffect(() => {
+        if (ancestor)
+            return;
+        const host = hostRef.current;
+        if (!host)
+            return;
+        try {
+            const root = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
+            let container = root.querySelector('[data-abstraxn-shadow-container]');
+            if (!container) {
+                container = document.createElement('div');
+                container.setAttribute('data-abstraxn-shadow-container', '');
+                root.appendChild(container);
+            }
+            containerRef.current = container;
+            cssTexts.forEach((text, i) => ensureStyleTagOnce(root, `css-${i}`, text));
+            if (!unregisterRef.current) {
+                unregisterRef.current = registerShadowRoot(root);
+            }
+            setStatus('ready');
+        }
+        catch (err) {
+            console.error('[ShadowHost] attachShadow failed — falling back to un-isolated rendering for this boundary:', err);
+            setStatus('fallback');
+        }
+        return () => {
+            unregisterRef.current?.();
+            unregisterRef.current = null;
+        };
+        // cssTexts intentionally omitted from deps: static per component,
+        // injected once via the idempotent guard above.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ancestor]);
+    if (ancestor) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const contextValue = useMemo(() => {
+        const root = hostRef.current?.shadowRoot;
+        const container = containerRef.current;
+        if (status !== 'ready' || !root || !container)
+            return null;
+        return { shadowRoot: root, container };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    return (_jsxs(_Fragment, { children: [React.createElement(hostTagName, { ref: hostRef, 'data-abstraxn-shadow-host': true, style: STACKING_DEFENSE_STYLE }, status === 'fallback' ? children : undefined), status === 'ready' && contextValue && (_jsx(ShadowHostContext.Provider, { value: contextValue, children: createPortal(children, contextValue.container) }))] }));
+}
+//# sourceMappingURL=ShadowHost.js.map

package/dist/src/components/ShadowHost/ShadowHostContext.d.ts

@@ -0,0 +1,10 @@
+export interface ShadowHostContextValue {
+    shadowRoot: ShadowRoot;
+    /** Stable element inside the shadow root — the actual createPortal/createRoot target. */
+    container: HTMLElement;
+}
+export declare const ShadowHostContext: import("react").Context<ShadowHostContextValue | null>;
+/** Nullable — returns the enclosing ShadowHost's value, or null if not inside one. */
+export declare function useShadowHost(): ShadowHostContextValue | null;
+/** True if already nested inside another SDK-owned shadow boundary. */
+export declare function useIsInsideShadowHost(): boolean;

package/dist/src/components/ShadowHost/ShadowHostContext.js

@@ -0,0 +1,14 @@
+/**
+ * Abstraxn Shadow Host context
+ */
+import { createContext, useContext } from 'react';
+export const ShadowHostContext = createContext(null);
+/** Nullable — returns the enclosing ShadowHost's value, or null if not inside one. */
+export function useShadowHost() {
+    return useContext(ShadowHostContext);
+}
+/** True if already nested inside another SDK-owned shadow boundary. */
+export function useIsInsideShadowHost() {
+    return useShadowHost() !== null;
+}
+//# sourceMappingURL=ShadowHostContext.js.map

package/dist/src/components/ShadowHost/index.d.ts

@@ -0,0 +1,2 @@
+export { ShadowHost, type ShadowHostProps } from './ShadowHost';
+export { ShadowHostContext, useShadowHost, useIsInsideShadowHost, type ShadowHostContextValue, } from './ShadowHostContext';

package/dist/src/components/ShadowHost/index.js

@@ -0,0 +1,3 @@
+export { ShadowHost } from './ShadowHost';
+export { ShadowHostContext, useShadowHost, useIsInsideShadowHost, } from './ShadowHostContext';
+//# sourceMappingURL=index.js.map

package/dist/src/components/WalletModal/components/ChainSelector.css

@@ -226,6 +226,15 @@
   pointer-events: none;
 }
 
+/* Visual-only equivalent of :disabled - deliberately keeps pointer-events enabled so a
+   stuck switching state can never silently swallow clicks the way a native disabled
+   attribute (or pointer-events: none) would. The JS click guard + safety timeout in
+   ChainSelector.tsx handle actually preventing redundant switches. */
+.wallet-modal-chain-item[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .wallet-modal-chain-item.switching {
   opacity: 0.7;
   pointer-events: none;

package/dist/src/components/WalletModal/components/ChainSelector.css.d.ts

@@ -0,0 +1,2 @@
+declare const cssText: string;
+export default cssText;

package/dist/src/components/WalletModal/components/ChainSelector.css.js

@@ -0,0 +1 @@
+export default "/* Select Network View */\n.wallet-modal-chain-selector-view {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 450px;\n  background: #ffffff;\n  display: flex;\n  flex-direction: column;\n  animation: slideInRight 0.3s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.wallet-modal-chain-selector-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  border-bottom: 1px solid #f1f5f9;\n  padding-bottom: 16px;\n  margin-bottom: 16px;\n}\n\n.wallet-modal-chain-selector-back,\n.wallet-modal-chain-selector-close {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 8px;\n  color: #64748b;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto;\n  user-select: none;\n  -webkit-user-select: none;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n}\n\n.wallet-modal-chain-selector-back:hover,\n.wallet-modal-chain-selector-close:hover {\n  background: #f1f5f9;\n  color: #111827;\n}\n\n.wallet-modal-chain-selector-back:active,\n.wallet-modal-chain-selector-close:active {\n  transform: scale(0.95);\n}\n\n.wallet-modal-content .wallet-modal-chain-selector-title {\n  font-size: 18px;\n  font-weight: 500;\n  margin: 0;\n  color: #111827;\n  flex: 1;\n  text-align: center;\n}\n\n.wallet-modal-chain-selector-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n/* Custom Scrollbar */\n.wallet-modal-chain-selector-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.wallet-modal-chain-selector-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.wallet-modal-chain-selector-content::-webkit-scrollbar-thumb {\n  background: #cbd5e1;\n  border-radius: 10px;\n  border: 2px solid transparent;\n  background-clip: content-box;\n}\n\n.wallet-modal-chain-selector-content::-webkit-scrollbar-thumb:hover {\n  background: #94a3b8;\n  background-clip: content-box;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-selector-content::-webkit-scrollbar-thumb {\n  background: #475569;\n}\n\n/* Tabs */\n.wallet-modal-chain-tabs {\n  display: flex;\n  gap: 12px;\n}\n\n.wallet-modal-chain-tab {\n  padding: 8px 16px;\n  border-radius: 10px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 600;\n  color: #64748b;\n  transition: all 0.2s;\n  pointer-events: auto;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.wallet-modal-chain-tab:hover {\n  color: #111827;\n}\n\n.wallet-modal-chain-tab.active {\n  background: #f1f5f9;\n  color: #111827;\n}\n\n/* Search */\n.wallet-modal-chain-search-container {\n  position: relative;\n  width: 100%;\n}\n\n.wallet-modal-chain-search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #94a3b8;\n  pointer-events: none;\n  display: flex;\n}\n\n.wallet-modal-chain-search-input {\n  width: 100%;\n  padding: 12px 16px 12px 48px;\n  border-radius: 12px;\n  border: 1px solid #e2e8f0;\n  background: #ffffff;\n  font-size: 15px;\n  outline: none;\n  transition: all 0.2s;\n  color: #111827;\n  box-sizing: border-box;\n  pointer-events: auto;\n  user-select: text;\n  -webkit-user-select: text;\n}\n\n.wallet-modal-chain-search-input:focus {\n  border-color: #9333ea;\n}\n\n.wallet-modal-chain-search-input::placeholder {\n  color: #94a3b8;\n}\n\n/* List */\n.wallet-modal-chain-list-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.wallet-modal-chain-list-header {\n  font-size: 13px;\n  font-weight: 600;\n  color: #94a3b8;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-left: 0;\n}\n\n.wallet-modal-chain-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.wallet-modal-chain-item {\n  width: 100%;\n  padding: 10px 12px;\n  border-radius: 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-align: left;\n  pointer-events: auto;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.wallet-modal-chain-item:hover {\n  background: #f8fafc;\n}\n\n.wallet-modal-chain-item.active {\n  background: rgba(147, 51, 234, 0.05);\n}\n\n.wallet-modal-chain-item:active {\n  transform: scale(0.98);\n}\n\n.wallet-modal-chain-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Visual-only equivalent of :disabled - deliberately keeps pointer-events enabled so a\n   stuck switching state can never silently swallow clicks the way a native disabled\n   attribute (or pointer-events: none) would. The JS click guard + safety timeout in\n   ChainSelector.tsx handle actually preventing redundant switches. */\n.wallet-modal-chain-item[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.wallet-modal-chain-item.switching {\n  opacity: 0.7;\n  pointer-events: none;\n}\n\n.wallet-modal-chain-item-icon-wrapper {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n}\n\n.wallet-modal-chain-item-icon-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.wallet-modal-chain-item-icon-placeholder {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: #f1f5f9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  color: #64748b;\n  font-size: 14px;\n}\n\n.wallet-modal-chain-item-status {\n  position: absolute;\n  bottom: -2px;\n  right: -2px;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #10b981;\n  border: 2px solid #ffffff;\n}\n\n.wallet-modal-chain-item-name {\n  flex: 1;\n  font-size: 16px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.wallet-modal-chain-item-checkmark {\n  color: #10b981;\n  display: flex;\n}\n\n.wallet-modal-chain-no-results {\n  padding: 40px 20px;\n  text-align: center;\n  color: #64748b;\n  font-size: 15px;\n}\n\n/* Dark Theme Support */\n.wallet-modal-theme-dark.wallet-modal-chain-selector-view {\n  background: #1a1a1a;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-selector-header {\n  border-color: #2a2a2a;\n}\n\n.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-chain-selector-title {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-tab.active {\n  background: #2a2a2a;\n  color: #ffffff;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-search-input {\n  background: #2a2a2a;\n  border-color: #3a3a3a;\n  color: #ffffff;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-item:hover {\n  background: #2a2a2a;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-item-name {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-dark .wallet-modal-chain-item-status {\n  border-color: #1a1a1a;\n}\n\n\n";

package/dist/src/components/WalletModal/components/ChainSelector.d.ts

@@ -1,5 +1,4 @@
 import type { ChainData } from "../../../chains";
-import "./ChainSelector.css";
 export interface ChainSelectorProps {
     currentChain: ChainData | null;
     availableChains: ChainData[];