@abstraxn/signer-react 3.3.10 → 4.0.0

package/dist/src/components/AbstraxnProvider/useAbstraxnProviderBase.d.ts

@@ -1,5 +1,6 @@
 import type { User, WhoamiResponse } from "@abstraxn/signer-core";
 import type { AbstraxnProviderConfig } from "../../types";
+import type { TokenData } from "../WalletModal/components/TokenSelectorModal";
 import { OnboardingUIWeb } from "../OnboardingUI";
 import type { AbstraxnWallet } from "@abstraxn/signer-core";
 export declare function useAbstraxnProviderBase(_config: AbstraxnProviderConfig): {
@@ -23,6 +24,12 @@ export declare function useAbstraxnProviderBase(_config: AbstraxnProviderConfig)
     setResending: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     walletBalance: bigint | null;
     setWalletBalance: import("react").Dispatch<import("react").SetStateAction<bigint | null>>;
+    tokenBalances: TokenData[];
+    setTokenBalances: import("react").Dispatch<import("react").SetStateAction<TokenData[]>>;
+    tokenBalancesLoading: boolean;
+    setTokenBalancesLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    tokenBalancesError: Error | null;
+    setTokenBalancesError: import("react").Dispatch<import("react").SetStateAction<Error | null>>;
     onboardingRef: import("react").RefObject<OnboardingUIWeb | null>;
     otpIdRef: import("react").RefObject<string | null>;
     walletRef: import("react").RefObject<AbstraxnWallet | null>;

package/dist/src/components/AbstraxnProvider/useAbstraxnProviderBase.js

@@ -14,6 +14,9 @@ export function useAbstraxnProviderBase(_config) {
     const [loading, setLoading] = useState(false);
     const [resending, setResending] = useState(false);
     const [walletBalance, setWalletBalance] = useState(null);
+    const [tokenBalances, setTokenBalances] = useState([]);
+    const [tokenBalancesLoading, setTokenBalancesLoading] = useState(false);
+    const [tokenBalancesError, setTokenBalancesError] = useState(null);
     const onboardingRef = useRef(null);
     const otpIdRef = useRef(null);
     const walletRef = useRef(null);
@@ -41,6 +44,12 @@ export function useAbstraxnProviderBase(_config) {
         setResending,
         walletBalance,
         setWalletBalance,
+        tokenBalances,
+        setTokenBalances,
+        tokenBalancesLoading,
+        setTokenBalancesLoading,
+        tokenBalancesError,
+        setTokenBalancesError,
         onboardingRef,
         otpIdRef,
         walletRef,

package/dist/src/components/AbstraxnProvider/useWalletInitialization.js

@@ -9,9 +9,29 @@ import { EVM_CHAINS, toCoreChain } from "../../chains";
 import { hasAuthParams, isLinkAuthCallback } from "./utils";
 export function useWalletInitialization({ config, walletRef, onboardingRef, otpIdRef, externalWalletsEnabled, setIsConnected, setAddress, setUser, setWhoami, setChainId, setError, setConnectionType, init, }) {
     useEffect(() => {
-        // If wallet already exists (from previous mount), reuse it to prevent flicker
+        // If wallet already exists (from previous mount), reuse it to prevent flicker.
+        // StrictMode still destroys OnboardingUIWeb in cleanup — rebuild its shadow
+        // tree here so the OAuth success loader can paint again.
         if (walletRef.current) {
-            return;
+            const onboarding = onboardingRef.current;
+            if (onboarding && !onboarding.hasLiveShadow()) {
+                onboarding.init();
+                if (typeof window !== "undefined") {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    const hasSuccess = urlParams.get("success") === "true";
+                    const mfaRequired = urlParams.get("mfaRequired") === "true";
+                    if (hasSuccess &&
+                        !mfaRequired &&
+                        !isLinkAuthCallback(urlParams)) {
+                        onboarding.showLoadingModal();
+                    }
+                }
+            }
+            return () => {
+                if (onboardingRef.current) {
+                    onboardingRef.current.destroy();
+                }
+            };
         }
         // Compute supported chains from chain config (outside useMemo since we're in useEffect)
         // This should include ALL chains that might be shown in the UI (availableChains)
@@ -176,10 +196,21 @@ export function useWalletInitialization({ config, walletRef, onboardingRef, otpI
         walletInstance.on("chainChanged", (newChainId) => {
             setChainId(newChainId);
         });
-        // Initialize OnboardingUI only if not already created (prevents flicker on config change)
-        if (onboardingRef.current) {
+        // Initialize OnboardingUI only if not already created (prevents flicker on config change).
+        // A destroyed StrictMode instance leaves a non-null ref with no live shadow — treat that
+        // as "not created" so we rebuild instead of skipping OAuth loader setup.
+        if (onboardingRef.current?.hasLiveShadow()) {
             return;
         }
+        if (onboardingRef.current) {
+            try {
+                onboardingRef.current.destroy();
+            }
+            catch {
+                // Ignore — instance may already be partially torn down.
+            }
+            onboardingRef.current = null;
+        }
         const uiConfig = config.ui || {};
         const onboarding = new OnboardingUIWeb({
             logo: uiConfig.logo,
@@ -484,6 +515,7 @@ export function useWalletInitialization({ config, walletRef, onboardingRef, otpI
         // Hide immediately - use synchronous approach to prevent flicker
         // Only hide if NOT handling a callback
         const onboardingAny = onboarding;
+        let oauthLoaderTimeout = null;
         if (!shouldKeepOpen && onboardingAny.modalOverlay) {
             // Hide immediately without delay to prevent flicker
             onboardingAny.modalOverlay.classList.remove("onboarding-modal-open");
@@ -495,9 +527,9 @@ export function useWalletInitialization({ config, walletRef, onboardingRef, otpI
             // Skip when mfaRequired=true so MFA verification screen can show instead.
             const mfaRequired = urlParams.get("mfaRequired") === "true";
             if (!mfaRequired) {
-                setTimeout(() => {
+                oauthLoaderTimeout = setTimeout(() => {
                     const onboardingInstance = onboardingRef.current;
-                    if (onboardingInstance && onboardingInstance.showLoadingModal) {
+                    if (onboardingInstance) {
                         onboardingInstance.showLoadingModal();
                     }
                 }, 150);
@@ -547,6 +579,9 @@ export function useWalletInitialization({ config, walletRef, onboardingRef, otpI
             });
         }
         return () => {
+            if (oauthLoaderTimeout !== null) {
+                clearTimeout(oauthLoaderTimeout);
+            }
             if (onboardingRef.current) {
                 onboardingRef.current.destroy();
             }

package/dist/src/components/OnboardingUI/OnboardingUI.css

@@ -18,9 +18,17 @@
 .onboarding-container.onboarding-inline {
   min-height: auto;
   padding: 0;
+  justify-content: flex-start;
   /* width: 100%; */
 }
 
+/* Let the host page scroll the full card (wallet buttons, etc.) instead of
+   nesting a second scrollbar inside a short embed. */
+.onboarding-container.onboarding-inline .onboarding-card {
+  max-height: none;
+  overflow-y: visible;
+}
+
 /* Modal Styles */
 .onboarding-modal-overlay {
   position: fixed;
@@ -545,6 +553,20 @@
   cursor: not-allowed;
 }
 
+.onboarding-button-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.onboarding-button-spinner {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  animation: onboarding-spin 1s linear infinite;
+}
+
 .onboarding-button-primary {
   font-weight: 600;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -628,6 +650,7 @@
 .onboarding-social-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
+  justify-items: center;
   gap: 12px;
   width: 100%;
 }
@@ -636,12 +659,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
+  width: 100%;
   height: 48px;
   padding: 0;
   border-radius: 12px;
   border: 1.5px solid #e5e7eb;
   background-color: #ffffff;
+  color: #111827;
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -649,6 +673,7 @@
 .onboarding-theme-dark .onboarding-button-social-icon {
   background-color: #374151;
   border-color: #4b5563;
+  color: #ffffff;
 }
 
 .onboarding-button-social-icon:hover:not(:disabled) {
@@ -671,6 +696,60 @@
 .onboarding-social-icon {
   width: 20px;
   height: 20px;
+  color: inherit;
+  fill: currentColor;
+}
+
+/* Passkey Button Styles */
+.onboarding-button-passkey {
+  background-color: #374151;
+  color: #ffffff;
+  border: 1.5px solid #4b5563;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+}
+
+.onboarding-theme-dark .onboarding-button-passkey {
+  background-color: #4b5563;
+  color: #ffffff;
+  border-color: #6b7280;
+}
+
+.onboarding-button-passkey:hover:not(:disabled) {
+  background-color: #4b5563;
+  border-color: #6b7280;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.onboarding-theme-dark .onboarding-button-passkey:hover:not(:disabled) {
+  background-color: #6b7280;
+  border-color: #9ca3af;
+}
+
+.onboarding-passkey-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.onboarding-passkey-signup-link {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 12px;
+  display: block;
+  text-align: center;
+  transition: color 0.15s ease;
+}
+
+.onboarding-theme-light .onboarding-passkey-signup-link {
+  color: #2170f5;
+}
+
+.onboarding-theme-dark .onboarding-passkey-signup-link {
+  color: #2170f5;
 }
 
 .onboarding-divider {
@@ -978,6 +1057,9 @@
 }
 
 .onboarding-otp-verification .onboarding-button {
+  /* Match OTP inputs width: 6 × 44px + 5 × 10px gap = 314px */
+  width: 314px;
+  max-width: 100%;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
@@ -992,6 +1074,7 @@
   font-size: 14px;
   margin: -6px 0 16px;
   color: #6b7280;
+  text-align: center;
 }
 
 .onboarding-theme-dark .onboarding-mfa-trouble-text {
@@ -999,13 +1082,20 @@
 }
 
 .onboarding-mfa-backup-link {
-  border: none;
-  background: transparent;
-  padding: 0;
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0;
   text-decoration: underline;
   cursor: pointer;
   font-weight: 600;
   font-size: 14px;
+  font-family: inherit;
+  line-height: inherit;
+  box-shadow: none !important;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
 }
 
 .onboarding-theme-light .onboarding-mfa-backup-link {
@@ -1242,6 +1332,11 @@
     gap: 8px;
   }
 
+  .onboarding-otp-verification .onboarding-button {
+    /* 6 × 44px + 5 × 8px gap = 304px */
+    width: 304px;
+  }
+
   .onboarding-otp-input {
     width: 44px;
     min-width: 44px;

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

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

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

@@ -0,0 +1 @@
+export default "/**\n * OnboardingUI Component Styles\n */\n\n.onboarding-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  padding: 20px;\n  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Inline mode - no extra height */\n.onboarding-container.onboarding-inline {\n  min-height: auto;\n  padding: 0;\n  justify-content: flex-start;\n  /* width: 100%; */\n}\n\n/* Let the host page scroll the full card (wallet buttons, etc.) instead of\n   nesting a second scrollbar inside a short embed. */\n.onboarding-container.onboarding-inline .onboarding-card {\n  max-height: none;\n  overflow-y: visible;\n}\n\n/* Modal Styles */\n.onboarding-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.6);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  display: none; /* Start hidden by default to prevent flicker */\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n  padding: 16px;\n  overflow: hidden;\n  overscroll-behavior: contain;\n}\n\n.onboarding-modal-overlay::-webkit-scrollbar {\n  display: none;\n}\n\n.onboarding-modal-overlay {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.onboarding-modal-overlay.onboarding-modal-open {\n  display: flex; /* Show when explicitly opened */\n  opacity: 1;\n}\n\n.onboarding-modal-overlay.onboarding-modal-closing {\n  opacity: 0;\n}\n\n.onboarding-modal-content {\n  position: relative;\n  width: 100%;\n  max-width: 420px;\n  max-height: calc(100vh - 32px);\n  overflow: hidden;\n  transform: scale(0.95);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n@media (max-width: 480px) {\n  .onboarding-modal-content {\n    max-width: 100%;\n    max-height: 100vh;\n    border-radius: 0;\n  }\n  \n  .onboarding-modal-overlay {\n    padding: 0;\n  }\n}\n\n.onboarding-modal-overlay.onboarding-modal-open .onboarding-modal-content {\n  transform: scale(1);\n}\n\n.onboarding-modal-overlay.onboarding-modal-closing .onboarding-modal-content {\n  transform: scale(0.95);\n}\n\n.onboarding-modal-close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  cursor: pointer;\n  transition: background-color 0.2s, color 0.2s;\n}\n\n.onboarding-theme-light.onboarding-modal-close {\n  color: #6b7280;\n}\n\n.onboarding-theme-dark.onboarding-modal-close {\n  color: #9ca3af;\n}\n\n.onboarding-theme-light.onboarding-modal-close:hover {\n  background-color: #f3f4f6;\n  color: #111827;\n}\n\n.onboarding-theme-dark.onboarding-modal-close:hover {\n  background-color: #2a2a2a;\n  color: #ffffff;\n}\n\n/* Modal container adjustments */\n.onboarding-modal-content .onboarding-container {\n  min-height: auto;\n  padding: 0;\n}\n\n/* Light Theme */\n.onboarding-theme-light {\n  color: #000000;\n}\n\n/* Dark Theme */\n.onboarding-theme-dark {\n  color: #ffffff;\n}\n\n.onboarding-card {\n  width: 100%;\n  max-width: 420px;\n  padding: 20px;\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n  background-color: inherit;\n  position: relative;\n  overflow-y: auto;\n  overflow-x: visible;\n  max-height: calc(100vh - 32px);\n  overscroll-behavior: contain;\n}\n\n.onboarding-card.onboarding-card-otp,\n.onboarding-card.onboarding-otp-active {\n  overflow-x: visible;\n  overflow-y: visible;\n}\n\n.onboarding-card.onboarding-card-otp .onboarding-otp-back-button,\n.onboarding-card.onboarding-otp-active .onboarding-otp-back-button {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  right: auto !important;\n  bottom: auto !important;\n}\n\n/* MFA card: ensure stacking so auth code form is on top when modal is used */\n.onboarding-card.onboarding-card-mfa {\n  position: relative;\n  z-index: 1;\n}\n\n.onboarding-card.onboarding-card-mfa .onboarding-otp-back-button {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  right: auto !important;\n  bottom: auto !important;\n}\n\n.onboarding-card::-webkit-scrollbar {\n  width: 6px;\n}\n\n.onboarding-card::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.onboarding-card::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n\n.onboarding-theme-dark .onboarding-card::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n@media (max-width: 480px) {\n  .onboarding-card {\n    padding: 24px 20px;\n    border-radius: 0;\n    max-height: 100vh;\n  }\n}\n\n.onboarding-theme-light .onboarding-card {\n  background-color: #ffffff;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.onboarding-theme-dark .onboarding-card {\n  background-color: #1f2937;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.onboarding-header {\n  text-align: center;\n  margin-bottom: 20px;\n}\n\n.onboarding-logo-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.onboarding-logo-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 6px;\n  gap: 10px;\n}\n\n.onboarding-logo-img {\n  max-width: 120px;\n  max-height: 60px;\n  object-fit: contain;\n}\n\n\n.onboarding-title {\n  font-size: 24px;\n  font-weight: 500;\n  margin: 0;\n  color: inherit;\n  text-align: center;\n  margin-bottom: 4px;\n  letter-spacing: -0.01em;\n  line-height: 1.2;\n}\n\n@media (max-width: 480px) {\n  .onboarding-title {\n    font-size: 24px;\n    margin-bottom: 24px;\n  }\n}\n\n.onboarding-theme-light .onboarding-title {\n  color: #111827;\n}\n\n.onboarding-theme-dark .onboarding-title {\n  color: #ffffff;\n}\n\n.onboarding-form {\n  width: 100%;\n}\n\n.onboarding-input-group {\n  margin-bottom: 8px;\n}\n\n.onboarding-input-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n  margin-bottom: 4px;\n  letter-spacing: -0.01em;\n  line-height: 1.5;\n  text-align: left;\n  width: 100%;\n}\n\n.onboarding-theme-dark .onboarding-input-label {\n  color: #e5e7eb;\n}\n\n.onboarding-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.onboarding-input-icon {\n  position: absolute;\n  left: 14px;\n  color: #9ca3af;\n  pointer-events: none;\n  z-index: 1;\n  width: 18px;\n  height: 18px;\n}\n\n.onboarding-theme-dark .onboarding-input-icon {\n  color: #9ca3af;\n}\n\n.onboarding-input {\n  width: 100%;\n  padding: 10px 14px 10px 44px;\n  font-size: 14px;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 8px;\n  background-color: inherit;\n  color: inherit;\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 1.5;\n}\n\n.onboarding-theme-light .onboarding-input {\n  background-color: #ffffff;\n  border-color: #e5e7eb;\n}\n\n.onboarding-theme-light .onboarding-input:-webkit-autofill,\n.onboarding-theme-light .onboarding-input:-webkit-autofill:hover,\n.onboarding-theme-light .onboarding-input:-webkit-autofill:focus,\n.onboarding-theme-light .onboarding-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;\n  -webkit-text-fill-color: #111827 !important;\n  transition: background-color 5000s ease-in-out 0s;\n}\n\n.onboarding-theme-dark .onboarding-input {\n  background-color: #374151;\n  color: #ffffff;\n}\n\n.onboarding-theme-dark .onboarding-input:-webkit-autofill,\n.onboarding-theme-dark .onboarding-input:-webkit-autofill:hover,\n.onboarding-theme-dark .onboarding-input:-webkit-autofill:focus,\n.onboarding-theme-dark .onboarding-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 30px #374151 inset !important;\n  -webkit-text-fill-color: #ffffff !important;\n  color: #ffffff !important;\n  transition: background-color 5000s ease-in-out 0s;\n}\n\n.onboarding-input:focus {\n  outline: none;\n}\n\n.onboarding-theme-light .onboarding-input:focus {\n  border-color: #111827;\n  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);\n  background-color: #ffffff;\n}\n\n.onboarding-theme-dark .onboarding-input {\n  border-color: #4b5563;\n  background-color: #374151;\n}\n\n.onboarding-theme-dark .onboarding-input:focus {\n  border-color: #9ca3af;\n  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);\n  background-color: #374151;\n}\n\n.onboarding-input-arrow-button {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #9ca3af;\n  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;\n  border-radius: 6px;\n  padding: 0;\n  z-index: 2;\n}\n\n/* Light mode: default state */\n.onboarding-theme-light .onboarding-input-arrow-button {\n  color: #6b7280;\n}\n\n.onboarding-theme-light .onboarding-input-arrow-button:hover:not(:disabled) {\n  background-color: rgba(139, 152, 202, 0.35);\n  color: #1f2937;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n.onboarding-theme-light .onboarding-input-arrow-button:active:not(:disabled) {\n  transform: translateY(-50%) scale(0.94);\n  background-color: rgba(139, 152, 202, 0.5);\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n\n.onboarding-theme-light .onboarding-input-arrow-button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(139, 152, 202, 0.5);\n}\n\n/* Light mode: filled state (has email) */\n.onboarding-theme-light .onboarding-input-arrow-button-filled {\n  background-color: rgba(139, 152, 202, 0.45);\n  color: #1f2937;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n.onboarding-theme-light .onboarding-input-arrow-button-filled:hover:not(:disabled) {\n  background-color: rgba(139, 152, 202, 0.6);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.onboarding-theme-light .onboarding-input-arrow-button-filled:active:not(:disabled) {\n  transform: translateY(-50%) scale(0.94);\n  background-color: rgba(139, 152, 202, 0.7);\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n.onboarding-theme-light .onboarding-input-arrow-button-filled:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(139, 152, 202, 0.55);\n}\n\n/* Dark mode */\n.onboarding-theme-dark .onboarding-input-arrow-button:hover:not(:disabled) {\n  color: #ffffff;\n  background-color: rgba(255, 255, 255, 0.12);\n}\n\n.onboarding-theme-dark .onboarding-input-arrow-button:active:not(:disabled) {\n  transform: translateY(-50%) scale(0.94);\n  background-color: rgba(255, 255, 255, 0.18);\n}\n\n.onboarding-theme-dark .onboarding-input-arrow-button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px rgba(156, 163, 175, 0.4);\n}\n\n.onboarding-theme-dark .onboarding-input-arrow-button-filled {\n  color: #ffffff;\n  background-color: rgba(255, 255, 255, 0.12);\n}\n\n.onboarding-theme-dark .onboarding-input-arrow-button-filled:hover:not(:disabled) {\n  background-color: rgba(255, 255, 255, 0.18);\n}\n\n.onboarding-theme-dark .onboarding-input-arrow-button-filled:active:not(:disabled) {\n  transform: translateY(-50%) scale(0.94);\n  background-color: rgba(255, 255, 255, 0.22);\n}\n\n.onboarding-input-arrow-button:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.onboarding-input-arrow-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.onboarding-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.onboarding-email-readonly {\n  cursor: not-allowed;\n}\n\n.onboarding-error {\n  padding: 0;\n  margin-top: 8px;\n  margin-bottom: 12px;\n  background-color: transparent !important;\n  color: #dc2626;\n  font-size: 13px;\n  text-align: center;\n  width: 100%;\n  font-weight: 500;\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n.onboarding-theme-dark .onboarding-error {\n  background-color: transparent !important;\n  color: #fca5a5;\n}\n\n.onboarding-button {\n  width: 100%;\n  padding: 11px 20px;\n  font-size: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin-bottom: 6px;\n  letter-spacing: 0;\n  line-height: 1.5;\n  box-shadow: none;\n  min-height: 42px;\n}\n\n.onboarding-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.onboarding-button-loading {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.onboarding-button-spinner {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  animation: onboarding-spin 1s linear infinite;\n}\n\n.onboarding-button-primary {\n  font-weight: 600;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n/* Light theme button */\n.onboarding-theme-light .onboarding-button-primary {\n  background-color: #111827;\n  color: #ffffff;\n}\n\n.onboarding-theme-light .onboarding-button-primary:hover:not(:disabled) {\n  background-color: #1f2937;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.onboarding-theme-light .onboarding-button-primary:active:not(:disabled) {\n  background-color: #374151;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  transform: translateY(0);\n}\n\n/* Dark theme button */\n.onboarding-theme-dark .onboarding-button-primary {\n  background-color: #4b5563;\n  color: #ffffff;\n}\n\n.onboarding-theme-dark .onboarding-button-primary:hover:not(:disabled) {\n  background-color: #6b7280;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  transform: translateY(-1px);\n}\n\n.onboarding-theme-dark .onboarding-button-primary:active:not(:disabled) {\n  background-color: #6b7280;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  transform: translateY(0);\n}\n\n.onboarding-button-google {\n  background-color: #ffffff;\n  color: #1f2937;\n  border: 1.5px solid #e5e7eb;\n  font-weight: 500;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  font-size: 14px;\n}\n\n.onboarding-theme-dark .onboarding-button-google {\n  background-color: #374151;\n  color: #ffffff;\n  border-color: #4b5563;\n}\n\n.onboarding-button-google:hover:not(:disabled) {\n  background-color: #f9fafb;\n  border-color: #d1d5db;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  transform: translateY(-1px);\n}\n\n.onboarding-theme-dark .onboarding-button-google:hover:not(:disabled) {\n  background-color: #4b5563;\n  border-color: #6b7280;\n}\n\n.onboarding-google-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.onboarding-button-google {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.onboarding-social-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));\n  justify-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n.onboarding-button-social-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 48px;\n  padding: 0;\n  border-radius: 12px;\n  border: 1.5px solid #e5e7eb;\n  background-color: #ffffff;\n  color: #111827;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.onboarding-theme-dark .onboarding-button-social-icon {\n  background-color: #374151;\n  border-color: #4b5563;\n  color: #ffffff;\n}\n\n.onboarding-button-social-icon:hover:not(:disabled) {\n  background-color: #f9fafb;\n  border-color: #d1d5db;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.onboarding-theme-dark .onboarding-button-social-icon:hover:not(:disabled) {\n  background-color: #4b5563;\n  border-color: #6b7280;\n}\n\n.onboarding-button-social-icon:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.onboarding-social-icon {\n  width: 20px;\n  height: 20px;\n  color: inherit;\n  fill: currentColor;\n}\n\n/* Passkey Button Styles */\n.onboarding-button-passkey {\n  background-color: #374151;\n  color: #ffffff;\n  border: 1.5px solid #4b5563;\n  font-weight: 500;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  font-size: 14px;\n}\n\n.onboarding-theme-dark .onboarding-button-passkey {\n  background-color: #4b5563;\n  color: #ffffff;\n  border-color: #6b7280;\n}\n\n.onboarding-button-passkey:hover:not(:disabled) {\n  background-color: #4b5563;\n  border-color: #6b7280;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  transform: translateY(-1px);\n}\n\n.onboarding-theme-dark .onboarding-button-passkey:hover:not(:disabled) {\n  background-color: #6b7280;\n  border-color: #9ca3af;\n}\n\n.onboarding-passkey-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.onboarding-passkey-signup-link {\n  text-decoration: underline;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  margin-top: 12px;\n  display: block;\n  text-align: center;\n  transition: color 0.15s ease;\n}\n\n.onboarding-theme-light .onboarding-passkey-signup-link {\n  color: #2170f5;\n}\n\n.onboarding-theme-dark .onboarding-passkey-signup-link {\n  color: #2170f5;\n}\n\n.onboarding-divider {\n  display: flex;\n  align-items: center;\n  margin: 10px 0;\n  position: relative;\n}\n\n.onboarding-divider::before,\n.onboarding-divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background-color: #e5e7eb;\n}\n\n.onboarding-theme-dark .onboarding-divider::before,\n.onboarding-theme-dark .onboarding-divider::after {\n  background-color: #4b5563;\n}\n\n.onboarding-divider-text {\n  padding: 0 14px;\n  font-size: 13px;\n  color: #9ca3af;\n  font-weight: 400;\n}\n\n.onboarding-theme-dark .onboarding-divider-text {\n  color: #9ca3af;\n}\n\n\n.onboarding-footer {\n  margin-top: 24px;\n  padding: 0;\n  text-align: center;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.onboarding-footer-text {\n  font-size: 11px;\n  color: #9ca3af;\n  margin: 0;\n  line-height: 1.5;\n  font-weight: 400;\n  letter-spacing: 0.01em;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.onboarding-theme-dark .onboarding-footer-text {\n  color: #6b7280;\n}\n\n.onboarding-footer-brand {\n  font-weight: 700;\n  text-decoration: none;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.onboarding-theme-light .onboarding-footer-brand {\n  color: #111827;\n}\n\n.onboarding-theme-dark .onboarding-footer-brand {\n  color: #9ca3af;\n}\n\n.onboarding-footer-brand:hover {\n  text-decoration: none;\n  opacity: 0.8;\n}\n\n/* Modal container adjustments */\n.onboarding-modal-content .onboarding-container {\n  min-height: auto;\n  padding: 0;\n}\n\n.onboarding-modal-content .onboarding-card {\n  margin: 0;\n}\n\n/* OTP Verification Screen */\n.onboarding-otp-verification {\n  display: flex !important;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 100%;\n  visibility: visible;\n  opacity: 1;\n  position: relative;\n  padding-top: 0;\n}\n\n.onboarding-otp-back-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 40px;\n  height: 40px;\n  min-width: 40px;\n  min-height: 40px;\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent !important;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #6b7280 !important;\n  padding: 0;\n  margin: 0;\n  z-index: 100;\n  box-shadow: none !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n  pointer-events: auto !important;\n}\n\n.onboarding-otp-back-button svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n@media (max-width: 480px) {\n  .onboarding-otp-back-button {\n    width: 36px;\n    height: 36px;\n  }\n\n  .onboarding-otp-back-button svg {\n    width: 18px;\n    height: 18px;\n  }\n}\n\n.onboarding-otp-back-button:hover:not(:disabled) {\n  background-color: #f3f4f6 !important;\n  color: #111827 !important;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;\n}\n\n.onboarding-otp-back-button:active:not(:disabled) {\n  background-color: #e5e7eb !important;\n  transform: scale(0.95);\n}\n\n.onboarding-otp-back-button:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.onboarding-theme-dark .onboarding-otp-back-button {\n  background-color: transparent !important;\n  color: #9ca3af !important;\n  box-shadow: none !important;\n}\n\n.onboarding-theme-dark .onboarding-otp-back-button:hover:not(:disabled) {\n  background-color: rgba(255, 255, 255, 0.1) !important;\n  color: #ffffff !important;\n}\n\n.onboarding-theme-dark .onboarding-otp-back-button:active:not(:disabled) {\n  background-color: rgba(255, 255, 255, 0.15) !important;\n}\n\n.onboarding-otp-icon-container {\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n  position: relative;\n  background: transparent;\n  border: 3px solid #eef2ff;\n}\n\n.onboarding-otp-icon-container::after {\n  content: '';\n  position: absolute;\n  top: -3px;\n  left: -3px;\n  right: -3px;\n  bottom: -3px;\n  border-radius: 50%;\n  border: 3px solid transparent;\n  border-top-color: #363ff9;\n  animation: onboarding-spin 2s linear infinite;\n}\n\n@keyframes onboarding-spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.onboarding-theme-dark .onboarding-otp-icon-container {\n  border-color: rgba(156, 163, 175, 0.2);\n}\n\n.onboarding-otp-icon-inner {\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n\n.onboarding-otp-icon {\n  width: 28px;\n  height: 28px;\n  color: #363ff9;\n}\n\n.onboarding-otp-title {\n  font-size: 22px;\n  font-weight: 500;\n  margin: 0 0 16px 0;\n  color: inherit;\n  line-height: 1.4;\n  letter-spacing: -0.01em;\n}\n\n.onboarding-theme-light .onboarding-otp-title {\n  color: #111827;\n}\n\n.onboarding-theme-dark .onboarding-otp-title {\n  color: #ffffff;\n}\n\n.onboarding-otp-instruction {\n  font-size: 14px;\n  color: #6b7280;\n  margin: 0 0 8px 0;\n  line-height: 1.5;\n  font-weight: 400;\n}\n\n.onboarding-theme-dark .onboarding-otp-instruction {\n  color: #9ca3af;\n}\n\n.onboarding-otp-email {\n  font-size: 15px;\n  font-weight: 600;\n  color: inherit;\n  margin: 0 0 32px 0;\n  line-height: 1.5;\n}\n\n.onboarding-theme-light .onboarding-otp-email {\n  color: #111827;\n}\n\n.onboarding-theme-dark .onboarding-otp-email {\n  color: #ffffff;\n}\n\n.onboarding-otp-inputs-container {\n  display: flex !important;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 24px;\n  width: 100%;\n  padding: 0 10px;\n  box-sizing: border-box;\n  visibility: visible !important;\n  opacity: 1 !important;\n  min-height: 60px;\n  flex-wrap: nowrap;\n}\n\n.onboarding-otp-inputs-single {\n  padding: 0;\n}\n\n.onboarding-otp-verification .onboarding-form {\n  width: 100%;\n  margin-top: 0;\n}\n\n.onboarding-otp-verification .onboarding-button {\n  /* Match OTP inputs width: 6 × 44px + 5 × 10px gap = 314px */\n  width: 314px;\n  max-width: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.onboarding-otp-verification .onboarding-button:disabled {\n  cursor: not-allowed;\n}\n\n.onboarding-mfa-trouble-text {\n  font-size: 14px;\n  margin: -6px 0 16px;\n  color: #6b7280;\n  text-align: center;\n}\n\n.onboarding-theme-dark .onboarding-mfa-trouble-text {\n  color: #9ca3af;\n}\n\n.onboarding-mfa-backup-link {\n  border: none !important;\n  background: transparent !important;\n  padding: 0 !important;\n  margin: 0;\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 600;\n  font-size: 14px;\n  font-family: inherit;\n  line-height: inherit;\n  box-shadow: none !important;\n  outline: none;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.onboarding-theme-light .onboarding-mfa-backup-link {\n  color: #111827;\n}\n\n.onboarding-theme-dark .onboarding-mfa-backup-link {\n  color: #e5e7eb;\n}\n\n.onboarding-mfa-backup-link:hover:not(:disabled) {\n  opacity: 0.8;\n}\n\n.onboarding-mfa-backup-link:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.onboarding-mfa-backup-input {\n  text-transform: uppercase;\n}\n\n.onboarding-mfa-backup-field {\n  width: 100%;\n  max-width: 320px;\n  height: 52px;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 8px;\n  background-color: inherit;\n  color: inherit;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: 0.16em;\n  padding: 0 14px;\n  box-sizing: border-box;\n  text-transform: uppercase;\n  transition: all 0.15s ease;\n}\n\n.onboarding-theme-light .onboarding-mfa-backup-field {\n  background-color: #ffffff;\n  border-color: #e5e7eb;\n  color: #000000;\n}\n\n.onboarding-theme-light .onboarding-mfa-backup-field:focus {\n  outline: none;\n  border-color: #111827;\n  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);\n}\n\n.onboarding-theme-dark .onboarding-mfa-backup-field {\n  border-color: #4b5563;\n  background-color: #374151;\n  color: #ffffff;\n}\n\n.onboarding-theme-dark .onboarding-mfa-backup-field:focus {\n  outline: none;\n  border-color: #9ca3af;\n  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);\n  background-color: #4b5563;\n}\n\n.onboarding-mfa-backup-field:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.onboarding-mfa-backup-example {\n  margin: -6px 0 16px;\n  font-size: 13px;\n  color: #9ca3af;\n}\n\n.onboarding-otp-input {\n  width: 44px !important;\n  min-width: 44px !important;\n  height: 52px !important;\n  min-height: 52px !important;\n  display: inline-block !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n  text-align: center;\n  font-size: 20px;\n  font-weight: 600;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 8px;\n  background-color: inherit;\n  color: inherit;\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n  line-height: 1;\n  flex-shrink: 0;\n  padding: 0;\n  margin: 0;\n}\n\n.onboarding-theme-light .onboarding-otp-input {\n  background-color: #ffffff !important;\n  border-color: #e5e7eb !important;\n  color: #000000 !important;\n}\n\n.onboarding-otp-input:focus {\n  outline: none;\n}\n\n.onboarding-theme-light .onboarding-otp-input:focus {\n  border-color: #111827 !important;\n  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1) !important;\n  background-color: #ffffff !important;\n  color: #000000 !important;\n}\n\n.onboarding-theme-dark .onboarding-otp-input {\n  border-color: #4b5563 !important;\n  background-color: #374151 !important;\n  color: #ffffff !important;\n}\n\n.onboarding-theme-dark .onboarding-otp-input:focus {\n  border-color: #9ca3af !important;\n  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2) !important;\n  background-color: #4b5563 !important;\n  color: #ffffff !important;\n}\n\n.onboarding-otp-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.onboarding-otp-resend {\n  text-align: center;\n  margin-top: 24px;\n  line-height: 1.5;\n}\n\n.onboarding-otp-resend-text {\n  font-size: 13px;\n  color: #6b7280;\n  margin: 0;\n  line-height: 1.5;\n  font-weight: 400;\n}\n\n.onboarding-theme-dark .onboarding-otp-resend-text {\n  color: #9ca3af;\n}\n\n.onboarding-otp-resend-link {\n  color: #dc2626;\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  transition: color 0.15s ease;\n  font-size: 13px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n}\n\n.onboarding-otp-resend-link:hover {\n  color: #b91c1c;\n  text-decoration: underline;\n}\n\n.onboarding-otp-resend-link:active {\n  color: #991b1b;\n}\n\n.onboarding-theme-dark .onboarding-otp-resend-link {\n  color: #ef4444;\n}\n\n.onboarding-theme-dark .onboarding-otp-resend-link:hover {\n  color: #dc2626;\n}\n\n.onboarding-otp-resend-cooldown {\n  color: #9ca3af;\n  font-size: 13px;\n}\n\n.onboarding-theme-dark .onboarding-otp-resend-cooldown {\n  color: #6b7280;\n}\n\n.onboarding-otp-verification .onboarding-error {\n  margin-bottom: 24px;\n  margin-top: 0;\n  text-align: center;\n}\n\n/* Additional Responsive Styles */\n@media (max-width: 480px) {\n  .onboarding-container {\n    padding: 12px;\n  }\n\n  .onboarding-card {\n    padding: 24px 20px;\n  }\n\n  .onboarding-title {\n    font-size: 24px;\n  }\n\n  .onboarding-input-group {\n    margin-bottom: 16px;\n  }\n\n  .onboarding-button {\n    width: 100%;\n    padding: 14px 20px;\n  }\n\n  .onboarding-social-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .onboarding-button-social-icon {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .onboarding-otp-inputs-container {\n    gap: 8px;\n  }\n\n  .onboarding-otp-verification .onboarding-button {\n    /* 6 × 44px + 5 × 8px gap = 304px */\n    width: 304px;\n  }\n\n  .onboarding-otp-input {\n    width: 44px;\n    min-width: 44px;\n    height: 56px;\n    min-height: 56px;\n    font-size: 20px;\n  }\n\n  .onboarding-footer-text {\n    font-size: 10px;\n  }\n\n  .onboarding-footer-brand {\n    font-size: 10px;\n  }\n\n  .onboarding-footer-brand svg {\n    width: 16px;\n    height: 16px;\n  }\n}\n\n@media (max-width: 360px) {\n  .onboarding-card {\n    padding: 20px 16px;\n  }\n\n  .onboarding-title {\n    font-size: 22px;\n  }\n\n  .onboarding-otp-input {\n    width: 40px;\n    min-width: 40px;\n    height: 56px;\n    min-height: 56px;\n    font-size: 18px;\n  }\n}\n\n";

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

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import type { OnboardingUIConfig } from "@abstraxn/signer-core";
-import "./OnboardingUI.css";
 export interface OnboardingUIReactProps {
     config?: Partial<OnboardingUIConfig>;
     modal?: boolean;

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

@@ -12,9 +12,13 @@ import { MfaForm } from "./components/MfaForm";
 import { SocialButtons } from "./components/SocialButtons";
 import { PasskeyButton } from "./components/PasskeyButton";
 import { Modal } from "./components/Modal";
-import { ExternalWalletButtons } from "../../ExternalWalletButtons";
+import { Divider } from "./components/Divider";
+import { ExternalWalletButtons, externalWalletButtonsCss } from "../../ExternalWalletButtons";
 import { useAbstraxnWallet } from "../../hooks";
-import "./OnboardingUI.css";
+import { ShadowHost } from "../ShadowHost";
+import { AbstraxnLogo } from "../AbstraxnLogo";
+import onboardingUiCss from "./OnboardingUI.css.js";
+const ONBOARDING_UI_REACT_CSS_TEXTS = [onboardingUiCss, externalWalletButtonsCss];
 export const OnboardingUIReact = ({ config = {}, modal = false, onClose, externalWalletsEnabled = false, availableConnectors = [], }) => {
     const normalizeErrorMessage = (message) => {
         let trimmed = message.trim();
@@ -109,9 +113,24 @@ export const OnboardingUIReact = ({ config = {}, modal = false, onClose, externa
         const hasUserData = user && (user.id || user.email);
         const isAlreadyAuthenticated = hasWhoamiData || hasUserData || isConnected;
         // Process OAuth callbacks - show loading modal for OAuth flows (skip when MFA required; show MFA screen instead)
-        if (isOAuthCallback && oauthPending) {
+        // Gated on isOAuthCallback (derived from URL params) alone, NOT oauthPending -
+        // that localStorage flag is also read-and-cleared by AbstraxnProviderInner.tsx's
+        // and useOAuthCallbacks.ts's own callback handlers; whichever of those runs first
+        // clears it, so relying on it here raced against them and could silently skip
+        // showing the loading modal even on a genuinely successful login.
+        console.log("[OnboardingUIReact] OAuth callback check:", { isOAuthCallback, oauthPending, success, isAlreadyAuthenticated, mfaRequired, error });
+        if (isOAuthCallback) {
             if (success === "true" && !isAlreadyAuthenticated && !mfaRequired) {
-                // Set OAuth loading modal for OAuth callbacks
+                // Set OAuth loading modal for OAuth callbacks.
+                // The modal only renders when `!isInOtpFlow` (i.e. onboarding.step isn't
+                // "email"/"otp") - but a fresh page load after the OAuth redirect always
+                // starts step at its default "email", and nothing was moving it off that
+                // for the OAuth path (only the OTP-verification flow ever called
+                // setStep('loading')). So oauthLoading could be true while the modal still
+                // never rendered. isOtpLoadingStep already disambiguates step === "loading"
+                // caused by OAuth vs OTP via isOAuthCallback, confirming "loading" is the
+                // intended step value here.
+                onboarding.setStep("loading");
                 setOauthLoading(true);
                 setOauthError(null);
             }
@@ -133,7 +152,7 @@ export const OnboardingUIReact = ({ config = {}, modal = false, onClose, externa
             setOauthLoading(false);
         }
         // Also handle config.handleUrlParams if provided (only for OAuth)
-        if (config.handleUrlParams && isOAuthCallback && oauthPending) {
+        if (config.handleUrlParams && isOAuthCallback) {
             if (success === "true" && !isAlreadyAuthenticated && !mfaRequired) {
                 onboarding.setLoading(true);
             }
@@ -275,11 +294,11 @@ export const OnboardingUIReact = ({ config = {}, modal = false, onClose, externa
         onClose?.();
     };
     // Helper to render modal content with header and footer
-    const renderModalContent = (children) => (_jsx("div", { className: `onboarding-container onboarding-theme-${theme} ${config.className || ""}`, children: _jsxs("div", { className: "onboarding-card", children: [_jsxs("div", { className: "onboarding-header", children: [config.logo && (_jsx("div", { className: "onboarding-logo-section", children: _jsx("div", { className: "onboarding-logo-container", children: _jsx("img", { src: config.logo, alt: "Logo", className: "onboarding-logo-img" }) }) })), _jsx("h1", { className: "onboarding-title", id: "onboarding-title", children: config.onboardTitle || "Sign In" })] }), children, config.showFooter !== false && (_jsx("div", { className: "onboarding-footer", children: _jsxs("p", { className: "onboarding-footer-text", children: ["Powered by", " ", _jsxs("a", { href: "https://abstraxn.com", target: "_blank", rel: "noopener noreferrer", className: "onboarding-footer-brand", style: {
+    const renderModalContent = (children) => (_jsx("div", { className: `onboarding-container onboarding-theme-${theme} ${config.className || ""}`, part: "container", children: _jsxs("div", { className: "onboarding-card", part: "card", children: [_jsxs("div", { className: "onboarding-header", children: [config.logo && (_jsx("div", { className: "onboarding-logo-section", children: _jsx("div", { className: "onboarding-logo-container", children: _jsx("img", { src: config.logo, alt: "Logo", className: "onboarding-logo-img" }) }) })), _jsx("h1", { className: "onboarding-title", id: "onboarding-title", children: config.onboardTitle || "Sign In" })] }), children, config.showFooter !== false && (_jsx("div", { className: "onboarding-footer", children: _jsxs("p", { className: "onboarding-footer-text", children: ["Powered by", " ", _jsxs("a", { href: "https://abstraxn.com", target: "_blank", rel: "noopener noreferrer", className: "onboarding-footer-brand", style: {
                                     display: "inline-flex",
                                     alignItems: "center",
                                     gap: "6px",
-                                }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 48 48", fill: "none", style: { display: "inline-block", verticalAlign: "middle" }, children: [_jsx("path", { d: "M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z", fill: "url(#paint0_linear_1242_781)" }), _jsx("path", { d: "M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z", fill: "url(#paint1_linear_1242_781)" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_1242_781", x1: "7.03362", y1: "6.09543", x2: "47.2003", y2: "57.0656", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F878D2" }), _jsx("stop", { offset: "0.393522", stopColor: "#FDCC81" }), _jsx("stop", { offset: "1", stopColor: "#F9A0D9" })] }), _jsxs("linearGradient", { id: "paint1_linear_1242_781", x1: "2.53739", y1: "21.5136", x2: "48.7969", y2: "38.5742", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F878D2" }), _jsx("stop", { offset: "0.393522", stopColor: "#FDCC81" }), _jsx("stop", { offset: "1", stopColor: "#F9A0D9" })] })] })] }), _jsx("span", { children: "abstraxn" })] })] }) }))] }) }));
+                                }, children: [_jsx(AbstraxnLogo, { size: 20, gradientId: "abstraxn_logo_oauth_footer" }), _jsx("span", { children: "abstraxn" })] })] }) }))] }) }));
     const showEmailForm = onboarding.step === "email" &&
         authMethods.includes("otp") &&
         !showExternalWallets;
@@ -296,36 +315,44 @@ export const OnboardingUIReact = ({ config = {}, modal = false, onClose, externa
     const showExternalWalletsSection = onboarding.step === "email" &&
         externalWalletsEnabled &&
         availableConnectors.length > 0;
-    const content = (_jsx("div", { className: `onboarding-container onboarding-theme-${theme} ${config.className || ""}`, children: _jsxs("div", { className: `onboarding-card ${showOtpForm ? "onboarding-card-otp" : ""} ${showMfaForm ? "onboarding-card-mfa" : ""}`, children: [!showOtpForm && !showMfaForm && (_jsxs("div", { className: "onboarding-header", children: [config.logo && (_jsx("div", { className: "onboarding-logo-section", children: _jsx("div", { className: "onboarding-logo-container", children: _jsx("img", { src: config.logo, alt: "Logo", className: "onboarding-logo-img" }) }) })), _jsx("h1", { className: "onboarding-title", id: "onboarding-title", children: config.onboardTitle || "Sign In" })] })), showEmailForm && (_jsx(EmailForm, { email: onboarding.email, onChange: onboarding.setEmail, onSubmit: onboarding.handleEmailSubmit, loading: onboarding.loading, error: onboarding.error, config: config, readOnly: !!emailForOtp })), showOtpForm && (_jsx(OtpForm, { email: onboarding.email, otp: onboarding.otp, onChange: onboarding.setOtp, onSubmit: onboarding.handleOtpSubmit, onResend: onboarding.handleResendOtp, onBack: onboarding.reset, loading: onboarding.loading, resending: onboarding.resending, requireManualVerify: onboarding.requireManualVerify, error: onboarding.error, resendCooldown: onboarding.resendCooldown, config: config })), showMfaForm && (_jsx(MfaForm, { code: onboarding.mfaCode, onChange: onboarding.setMfaCode, onSubmit: onboarding.handleMfaSubmit, onBack: onboarding.otpId
+    const content = (_jsx("div", { className: `onboarding-container onboarding-theme-${theme}${modal ? "" : " onboarding-inline"} ${config.className || ""}`.trim(), part: "container", children: _jsxs("div", { className: `onboarding-card ${showOtpForm ? "onboarding-card-otp" : ""} ${showMfaForm ? "onboarding-card-mfa" : ""}`, part: "card", children: [!showOtpForm && !showMfaForm && (_jsxs("div", { className: "onboarding-header", children: [config.logo && (_jsx("div", { className: "onboarding-logo-section", children: _jsx("div", { className: "onboarding-logo-container", children: _jsx("img", { src: config.logo, alt: "Logo", className: "onboarding-logo-img" }) }) })), _jsx("h1", { className: "onboarding-title", id: "onboarding-title", children: config.onboardTitle || "Sign In" })] })), showEmailForm && (_jsx(EmailForm, { email: onboarding.email, onChange: onboarding.setEmail, onSubmit: onboarding.handleEmailSubmit, loading: onboarding.loading, error: onboarding.error, config: config, readOnly: !!emailForOtp })), showOtpForm && (_jsx(OtpForm, { email: onboarding.email, otp: onboarding.otp, onChange: onboarding.setOtp, onSubmit: onboarding.handleOtpSubmit, onResend: onboarding.handleResendOtp, onBack: onboarding.reset, loading: onboarding.loading, resending: onboarding.resending, requireManualVerify: onboarding.requireManualVerify, error: onboarding.error, resendCooldown: onboarding.resendCooldown, config: config })), showMfaForm && (_jsx(MfaForm, { code: onboarding.mfaCode, onChange: onboarding.setMfaCode, onSubmit: onboarding.handleMfaSubmit, onBack: onboarding.otpId
                         ? () => onboarding.setStep("otp")
-                        : () => onboarding.reset(), loading: onboarding.loading, error: onboarding.error, config: config })), onboarding.step === "error" && onboarding.error && (_jsxs("div", { className: "onboarding-error-container", children: [_jsx("div", { className: "onboarding-error", role: "alert", children: normalizeErrorMessage(onboarding.error) }), _jsx("button", { type: "button", className: "onboarding-button onboarding-button-primary", onClick: onboarding.reset, children: "Try Again" })] })), showSocialButtons && (showEmailForm || showOtpForm) && (_jsx("div", { className: "onboarding-divider", children: _jsx("span", { className: "onboarding-divider-text", children: "or" }) })), showSocialButtons && (_jsx(SocialButtons, { onGoogleLogin: authMethodsHook.handleGoogleLogin, onTwitterLogin: authMethodsHook.handleTwitterLogin, onDiscordLogin: authMethodsHook.handleDiscordLogin, loading: authMethodsHook.loading, config: config })), showPasskey && (_jsx(PasskeyButton, { onPasskeyLogin: authMethodsHook.handlePasskeyLogin, onPasskeySignup: authMethodsHook.handlePasskeySignup, loading: authMethodsHook.loading, config: config })), showExternalWalletsSection && (_jsxs(_Fragment, { children: [!showExternalWallets && (_jsx("div", { className: "onboarding-divider", children: _jsx("span", { className: "onboarding-divider-text", children: "or" }) })), _jsx("div", { style: { marginTop: showExternalWallets ? "0" : "12px" }, children: _jsx(ExternalWalletButtons, { onShowMoreWallets: () => setShowExternalWallets(true), onHideMoreWallets: () => setShowExternalWallets(false) }) })] })), config.showFooter !== false && (_jsx("div", { className: "onboarding-footer", children: _jsxs("p", { className: "onboarding-footer-text", children: ["Powered by", " ", _jsxs("a", { href: "https://abstraxn.com", target: "_blank", rel: "noopener noreferrer", className: "onboarding-footer-brand", style: {
+                        : () => onboarding.reset(), loading: onboarding.loading, error: onboarding.error, config: config })), onboarding.step === "error" && onboarding.error && (_jsxs("div", { className: "onboarding-error-container", children: [_jsx("div", { className: "onboarding-error", role: "alert", children: normalizeErrorMessage(onboarding.error) }), _jsx("button", { type: "button", className: "onboarding-button onboarding-button-primary", part: "button-primary", onClick: onboarding.reset, children: "Try Again" })] })), showSocialButtons && (showEmailForm || showOtpForm) && _jsx(Divider, {}), showSocialButtons && (_jsx(SocialButtons, { onGoogleLogin: authMethodsHook.handleGoogleLogin, onTwitterLogin: authMethodsHook.handleTwitterLogin, onDiscordLogin: authMethodsHook.handleDiscordLogin, loading: authMethodsHook.loading, config: config })), showPasskey && (_jsx(PasskeyButton, { onPasskeyLogin: authMethodsHook.handlePasskeyLogin, onPasskeySignup: authMethodsHook.handlePasskeySignup, loading: authMethodsHook.loading, config: config })), showExternalWalletsSection && (_jsxs(_Fragment, { children: [!showExternalWallets && _jsx(Divider, {}), _jsx("div", { style: { marginTop: showExternalWallets ? "0" : "12px" }, children: _jsx(ExternalWalletButtons, { onShowMoreWallets: () => setShowExternalWallets(true), onHideMoreWallets: () => setShowExternalWallets(false) }) })] })), config.showFooter !== false && (_jsx("div", { className: "onboarding-footer", children: _jsxs("p", { className: "onboarding-footer-text", children: ["Powered by", " ", _jsxs("a", { href: "https://abstraxn.com", target: "_blank", rel: "noopener noreferrer", className: "onboarding-footer-brand", style: {
                                     display: "inline-flex",
                                     alignItems: "center",
                                     gap: "6px",
-                                }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 48 48", fill: "none", style: { display: "inline-block", verticalAlign: "middle" }, children: [_jsx("path", { d: "M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z", fill: "url(#paint0_linear_1242_781)" }), _jsx("path", { d: "M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z", fill: "url(#paint1_linear_1242_781)" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_1242_781", x1: "7.03362", y1: "6.09543", x2: "47.2003", y2: "57.0656", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F878D2" }), _jsx("stop", { offset: "0.393522", stopColor: "#FDCC81" }), _jsx("stop", { offset: "1", stopColor: "#F9A0D9" })] }), _jsxs("linearGradient", { id: "paint1_linear_1242_781", x1: "2.53739", y1: "21.5136", x2: "48.7969", y2: "38.5742", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F878D2" }), _jsx("stop", { offset: "0.393522", stopColor: "#FDCC81" }), _jsx("stop", { offset: "1", stopColor: "#F9A0D9" })] })] })] }), _jsx("span", { children: "abstraxn" })] })] }) }))] }) }));
+                                }, children: [_jsx(AbstraxnLogo, { size: 20, gradientId: "abstraxn_logo_main_footer" }), _jsx("span", { children: "abstraxn" })] })] }) }))] }) }));
     // OAuth Loading Modal (only show for OAuth flows, never during OTP flow)
     // Check if we're in OTP flow - only email and otp steps, not loading (loading can be OAuth too)
     const isInOtpFlow = onboarding.step === "email" || onboarding.step === "otp";
     // Show OAuth loading modal if oauthLoading is true and not in OTP flow
+    //
+    // Collapsed from an early-return chain into a single `result` variable so
+    // exactly one ShadowHost wrap can be applied at the bottom — same branches,
+    // same priority order, just deferred to one final return.
+    let result;
     if (oauthLoading && !isInOtpFlow) {
-        return (_jsx(Modal, { isOpen: true, onClose: () => {
+        result = (_jsx(Modal, { isOpen: true, onClose: () => {
                 setOauthLoading(false);
                 clearQueryParams();
-            }, closeOnBackdropClick: config.closeOnBackdropClick !== false, showCloseButton: showModalCloseButton, theme: theme, children: renderModalContent(_jsxs("div", { className: "onboarding-loading", style: { textAlign: "center", padding: "40px" }, children: [_jsxs("svg", { width: "48", height: "48", 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" })] }), _jsx("p", { style: { marginTop: "16px" }, children: "Authenticating..." })] })) }));
+            }, closeOnBackdropClick: config.closeOnBackdropClick !== false, showCloseButton: showModalCloseButton, theme: theme, children: renderModalContent(_jsxs("div", { className: "onboarding-loading", style: { textAlign: "center", padding: "40px" }, children: [_jsxs("svg", { className: "onboarding-button-spinner", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { width: 48, height: 48 }, 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("p", { style: { marginTop: "16px" }, children: "Authenticating..." })] })) }));
     }
-    // OAuth Error Modal
-    if (oauthError) {
-        return (_jsx(Modal, { isOpen: true, onClose: () => {
+    else if (oauthError) {
+        // OAuth Error Modal
+        result = (_jsx(Modal, { isOpen: true, onClose: () => {
                 setOauthError(null);
                 clearQueryParams();
-            }, closeOnBackdropClick: config.closeOnBackdropClick !== false, showCloseButton: showModalCloseButton, theme: theme, children: renderModalContent(_jsxs("div", { className: "onboarding-error-container", style: { padding: "40px", textAlign: "center" }, children: [_jsx("div", { className: "onboarding-error", role: "alert", children: normalizeErrorMessage(oauthError) }), _jsx("button", { type: "button", className: "onboarding-button onboarding-button-primary", onClick: () => {
+            }, closeOnBackdropClick: config.closeOnBackdropClick !== false, showCloseButton: showModalCloseButton, theme: theme, children: renderModalContent(_jsxs("div", { className: "onboarding-error-container", style: { padding: "40px", textAlign: "center" }, children: [_jsx("div", { className: "onboarding-error", role: "alert", children: normalizeErrorMessage(oauthError) }), _jsx("button", { type: "button", className: "onboarding-button onboarding-button-primary", part: "button-primary", onClick: () => {
                             setOauthError(null);
                             clearQueryParams();
                         }, style: { marginTop: "24px" }, children: "Close" })] })) }));
     }
-    if (modal) {
-        return (_jsx(Modal, { isOpen: true, onClose: handleClose, closeOnBackdropClick: config.closeOnBackdropClick !== false, showCloseButton: showModalCloseButton, theme: theme, children: content }));
+    else if (modal) {
+        result = (_jsx(Modal, { isOpen: true, onClose: handleClose, closeOnBackdropClick: config.closeOnBackdropClick !== false, showCloseButton: showModalCloseButton, theme: theme, children: content }));
     }
-    return content;
+    else {
+        result = content;
+    }
+    return (_jsx(ShadowHost, { cssTexts: ONBOARDING_UI_REACT_CSS_TEXTS, customCSS: config.customCSS, children: result }));
 };
 //# sourceMappingURL=OnboardingUIReact.js.map

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

@@ -6,7 +6,11 @@ import type { OnboardingUIConfig, Theme } from "@abstraxn/signer-core";
  * Works with vanilla JavaScript - no framework dependencies required.
  */
 export declare class OnboardingUIWeb {
-    private static stylesInjected;
+    private stylesInjected;
+    private shadowContainer;
+    private shadowTeardown;
+    /** Pending OAuth loader timer from checkUrlParams — cleared in destroy() so StrictMode cleanup cannot paint into a torn-down shadow root. */
+    private pendingLoadingModalTimer;
     private config;
     private container;
     private rootElement;
@@ -55,6 +59,13 @@ export declare class OnboardingUIWeb {
      * Call this before init() to prevent flicker when external wallets are enabled
      */
     showExternalWallets(): void;
+    /** True when this instance still owns an attached shadow container. */
+    hasLiveShadow(): boolean;
+    /**
+     * Rebuild the shadow tree if destroy()/StrictMode tore it down.
+     * Safe to call before showLoadingModal / showOnboarding recovery paths.
+     */
+    ensureLiveShadow(): void;
     /**
      * Initialize and render the component
      */
@@ -92,6 +103,18 @@ export declare class OnboardingUIWeb {
      * Inject CSS styles into the document head (only once)
      */
     private injectStyles;
+    /**
+     * Build a divider element (line + "or" text) matching `.onboarding-divider`
+     */
+    private createDividerElement;
+    /**
+     * Footer text/brand colors, derived from config.colors.text with theme-based fallbacks
+     */
+    private getFooterTextColors;
+    /**
+     * Passkey button colors, derived from config.colors with theme-based fallbacks
+     */
+    private getPasskeyButtonColors;
     /**
      * Apply custom colors from config
      */