signer-test-sdk-react 0.0.14 → 0.0.15

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

@@ -1,3 +1,4 @@
+import { isValidEmail } from "signer-test-sdk-core";
 // CSS styles embedded as string
 const ONBOARDING_UI_STYLES = `
 .onboarding-container {
@@ -101,44 +102,6 @@ const ONBOARDING_UI_STYLES = `
   transform: scale(0.95);
 }
 
-.onboarding-modal-close {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background-color: #f3f4f6;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  line-height: 1;
-  color: #6b7280;
-  transition: all 0.2s ease;
-  z-index: 10;
-  padding: 0;
-  font-weight: 400;
-}
-
-.onboarding-modal-close:hover {
-  background-color: #e5e7eb;
-  color: #374151;
-  transform: scale(1.05);
-}
-
-.onboarding-theme-dark .onboarding-modal-close {
-  background-color: #374151;
-  color: #9ca3af;
-}
-
-.onboarding-theme-dark .onboarding-modal-close:hover {
-  background-color: #4b5563;
-  color: #ffffff;
-}
-
 /* Modal container adjustments */
 .onboarding-modal-content .onboarding-container {
   min-height: auto;
@@ -159,7 +122,7 @@ const ONBOARDING_UI_STYLES = `
   width: 420px;
   max-width: 420px;
   min-width: 420px;
-  padding: 40px;
+  padding: 20px;
   border-radius: 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
   background-color: inherit;
@@ -191,7 +154,7 @@ const ONBOARDING_UI_STYLES = `
 
 @media (max-width: 480px) {
   .onboarding-card {
-    padding: 32px 24px;
+    padding: 24px 20px;
     border-radius: 0;
     max-height: 100vh;
   }
@@ -211,14 +174,14 @@ const ONBOARDING_UI_STYLES = `
 
 .onboarding-header {
   text-align: center;
-  margin-bottom: 32px;
+  margin-bottom: 20px;
 }
 
 .onboarding-logo-section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 }
 
 .onboarding-logo-container {
@@ -241,9 +204,9 @@ const ONBOARDING_UI_STYLES = `
   margin: 0;
   color: inherit;
   text-align: center;
-  margin-bottom: 28px;
+  margin-bottom: 4px;
   letter-spacing: -0.01em;
-  line-height: 1.4;
+  line-height: 1.2;
 }
 
 @media (max-width: 480px) {
@@ -266,7 +229,7 @@ const ONBOARDING_UI_STYLES = `
 }
 
 .onboarding-input-group {
-  margin-bottom: 20px;
+  margin-bottom: 8px;
 }
 
 .onboarding-input-label {
@@ -274,7 +237,7 @@ const ONBOARDING_UI_STYLES = `
   font-size: 14px;
   font-weight: 500;
   color: #374151;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   letter-spacing: -0.01em;
   line-height: 1.5;
   text-align: left;
@@ -325,11 +288,30 @@ const ONBOARDING_UI_STYLES = `
   color: #000000;
 }
 
+.onboarding-theme-light .onboarding-input:-webkit-autofill,
+.onboarding-theme-light .onboarding-input:-webkit-autofill:hover,
+.onboarding-theme-light .onboarding-input:-webkit-autofill:focus,
+.onboarding-theme-light .onboarding-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
+  -webkit-text-fill-color: #111827 !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
 .onboarding-theme-dark .onboarding-input {
   background-color: #374151;
   color: #ffffff;
 }
 
+.onboarding-theme-dark .onboarding-input:-webkit-autofill,
+.onboarding-theme-dark .onboarding-input:-webkit-autofill:hover,
+.onboarding-theme-dark .onboarding-input:-webkit-autofill:focus,
+.onboarding-theme-dark .onboarding-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px #374151 inset !important;
+  -webkit-text-fill-color: #ffffff !important;
+  color: #ffffff !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
 .onboarding-input:focus {
   outline: none;
 }
@@ -349,7 +331,7 @@ const ONBOARDING_UI_STYLES = `
 .onboarding-theme-dark .onboarding-input:focus {
   border-color: #9ca3af;
   box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
-  background-color: #4b5563;
+  background-color: #374151;
   color: #ffffff;
 }
 
@@ -441,7 +423,7 @@ const ONBOARDING_UI_STYLES = `
   align-items: center;
   justify-content: center;
   gap: 8px;
-  margin-bottom: 12px;
+  margin-bottom: 6px;
   letter-spacing: -0.01em;
   line-height: 1.5;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -643,7 +625,7 @@ const ONBOARDING_UI_STYLES = `
 .onboarding-divider {
   display: flex;
   align-items: center;
-  margin: 20px 0;
+  margin: 10px 0;
   position: relative;
 }
 
@@ -734,38 +716,54 @@ const ONBOARDING_UI_STYLES = `
 }
 
 .onboarding-otp-icon-container {
-  width: 72px;
-  height: 72px;
+  width: 64px;
+  height: 64px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   position: relative;
+  background: transparent;
+  border: 3px solid #eef2ff;
 }
 
-.onboarding-theme-light .onboarding-otp-icon-container {
-  background: linear-gradient(135deg, rgba(17, 24, 39, 0.1) 0%, rgba(17, 24, 39, 0.05) 100%);
+.onboarding-otp-icon-container::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #363ff9;
+  animation: onboarding-spin 2s linear infinite;
+}
+
+@keyframes onboarding-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 .onboarding-theme-dark .onboarding-otp-icon-container {
-  background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(156, 163, 175, 0.1) 100%);
+  border-color: rgba(156, 163, 175, 0.2);
 }
 
 .onboarding-otp-icon-inner {
-  width: 48px;
-  height: 48px;
-  background-color: #dc2626;
-  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .onboarding-otp-icon {
-  width: 24px;
-  height: 24px;
-  color: #ffffff;
+  width: 28px;
+  height: 28px;
+  color: #363ff9;
 }
 
 .onboarding-otp-title {
@@ -944,7 +942,7 @@ const ONBOARDING_UI_STYLES = `
 }
 
 .onboarding-passkey-signup-link {
-  text-decoration: none;
+  text-decoration: underline;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
@@ -955,22 +953,14 @@ const ONBOARDING_UI_STYLES = `
 }
 
 .onboarding-theme-light .onboarding-passkey-signup-link {
-  color: #111827;
-}
+  color:  #2170f5;
+} 
 
-.onboarding-theme-light .onboarding-passkey-signup-link:hover {
-  color: #1f2937;
-  text-decoration: underline;
-}
 
 .onboarding-theme-dark .onboarding-passkey-signup-link {
-  color: #9ca3af;
-}
+  color:  #2170f5;
+} 
 
-.onboarding-theme-dark .onboarding-passkey-signup-link:hover {
-  color: #d1d5db;
-  text-decoration: underline;
-}
 `;
 /**
  * OnboardingUI Class
@@ -1002,7 +992,6 @@ export class OnboardingUIWeb {
     errorElement = null;
     otpGroup = null;
     otpVerificationScreen = null;
-    closeButton = null;
     resendButton = null;
     socialGrid = null;
     externalWalletContainer = null;
@@ -1010,8 +999,8 @@ export class OnboardingUIWeb {
     divider = null;
     footer = null;
     verifyButton = null;
-    email = '';
-    otp = '';
+    email = "";
+    otp = "";
     otpSent = false;
     loading = false;
     activeButton = null;
@@ -1020,15 +1009,14 @@ export class OnboardingUIWeb {
     externalWalletsEnabled = false;
     constructor(config, externalWalletsEnabled = false) {
         this.externalWalletsEnabled = externalWalletsEnabled;
-        const defaultTheme = config.theme || 'light';
+        const defaultTheme = config.theme || "light";
         this.config = {
             theme: defaultTheme,
             showFooter: config.showFooter !== false,
-            className: config.className || '',
+            className: config.className || "",
             modal: config.modal !== false,
             closeOnBackdropClick: config.closeOnBackdropClick !== false,
-            showCloseButton: config.showCloseButton !== false,
-            onboardTitle: config.onboardTitle || 'Sign in',
+            onboardTitle: config.onboardTitle || "Sign In",
             handleUrlParams: config.handleUrlParams !== false,
             ...config,
         };
@@ -1039,10 +1027,10 @@ export class OnboardingUIWeb {
      */
     showExternalWallets() {
         if (this.externalWalletContainer) {
-            this.externalWalletContainer.style.display = '';
+            this.externalWalletContainer.style.display = "";
         }
         if (this.externalWalletDivider) {
-            this.externalWalletDivider.style.display = '';
+            this.externalWalletDivider.style.display = "";
         }
     }
     /**
@@ -1059,25 +1047,29 @@ export class OnboardingUIWeb {
      * Check URL parameters for social login callbacks
      */
     checkUrlParams() {
-        if (typeof window === 'undefined')
+        if (typeof window === "undefined")
             return;
         if (!this.config.handleUrlParams)
             return;
         const params = new URLSearchParams(window.location.search);
-        const success = params.get('success');
-        const error = params.get('error');
-        const accessToken = params.get('accessToken');
-        const provider = params.get('provider') || params.get('authProvider');
+        const success = params.get("success");
+        const error = params.get("error");
+        const accessToken = params.get("accessToken");
+        const provider = params.get("provider") || params.get("authProvider");
         // Helper to extract provider from accessToken JWT
         const getAuthProviderFromToken = (token) => {
             try {
-                const base64Url = token.split('.')[1];
-                const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
-                const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
-                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-                }).join(''));
+                const base64Url = token.split(".")[1];
+                const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+                const jsonPayload = decodeURIComponent(window
+                    .atob(base64)
+                    .split("")
+                    .map(function (c) {
+                    return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+                })
+                    .join(""));
                 const payload = JSON.parse(jsonPayload);
-                return (payload.authProvider || payload.provider || '').toLowerCase();
+                return (payload.authProvider || payload.provider || "").toLowerCase();
             }
             catch (e) {
                 return null;
@@ -1088,10 +1080,14 @@ export class OnboardingUIWeb {
         if (!detectedProvider && accessToken) {
             detectedProvider = getAuthProviderFromToken(accessToken);
         }
-        const isOAuthCallback = detectedProvider && (detectedProvider === 'google' || detectedProvider === 'discord' || detectedProvider === 'twitter' || detectedProvider === 'x');
-        const hasOAuthParams = isOAuthCallback || (success === 'true' && !!accessToken);
+        const isOAuthCallback = detectedProvider &&
+            (detectedProvider === "google" ||
+                detectedProvider === "discord" ||
+                detectedProvider === "twitter" ||
+                detectedProvider === "x");
+        const hasOAuthParams = isOAuthCallback || (success === "true" && !!accessToken);
         // If success=true and it's an OAuth callback (Google, Discord, Twitter), show loading modal with header and footer
-        if (success === 'true' && hasOAuthParams) {
+        if (success === "true" && hasOAuthParams) {
             // Show loading modal immediately - it creates its own overlay
             // Use requestAnimationFrame + setTimeout to ensure DOM is ready
             requestAnimationFrame(() => {
@@ -1103,12 +1099,12 @@ export class OnboardingUIWeb {
             return;
         }
         // Check login source to decide if we should handle this (for errors)
-        const source = localStorage.getItem('abstraxn_login_source');
+        const source = localStorage.getItem("abstraxn_login_source");
         const isModal = this.config.modal;
         if (source) {
-            if (source === 'modal' && !isModal)
+            if (source === "modal" && !isModal)
                 return; // Modal initiated, I am Inline -> Ignore
-            if (source === 'inline' && isModal)
+            if (source === "inline" && isModal)
                 return; // Inline initiated, I am Modal -> Ignore
         }
         else {
@@ -1141,77 +1137,77 @@ export class OnboardingUIWeb {
             return;
         // Hide loading modal if it exists (for inline components)
         this.hideLoadingModal();
-        const card = this.rootElement.querySelector('.onboarding-card');
+        const card = this.rootElement.querySelector(".onboarding-card");
         if (!card)
             return;
         // Add error mode class to card
-        card.classList.add('onboarding-mode-error');
-        card.classList.remove('onboarding-mode-loading');
+        card.classList.add("onboarding-mode-error");
+        card.classList.remove("onboarding-mode-loading");
         // Create or show error container
-        let errorContainer = this.rootElement.querySelector('.onboarding-error-container');
+        let errorContainer = this.rootElement.querySelector(".onboarding-error-container");
         if (!errorContainer) {
-            errorContainer = this.createElement('div', {
-                className: 'onboarding-error-container',
-                style: 'display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; text-align: center;',
+            errorContainer = this.createElement("div", {
+                className: "onboarding-error-container",
+                style: "display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; text-align: center;",
             });
             // Error Icon
-            const iconContainer = this.createElement('div', {
-                style: 'width: 64px; height: 64px; background-color: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;',
+            const iconContainer = this.createElement("div", {
+                style: "width: 64px; height: 64px; background-color: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;",
             });
             // Dark mode adjustment for icon container
-            if (this.config.theme === 'dark') {
-                iconContainer.style.backgroundColor = 'rgba(220, 38, 38, 0.2)';
-            }
-            const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            iconSvg.setAttribute('width', '32');
-            iconSvg.setAttribute('height', '32');
-            iconSvg.setAttribute('viewBox', '0 0 24 24');
-            iconSvg.setAttribute('fill', 'none');
-            iconSvg.setAttribute('stroke', '#dc2626');
-            iconSvg.setAttribute('stroke-width', '2');
-            iconSvg.setAttribute('stroke-linecap', 'round');
-            iconSvg.setAttribute('stroke-linejoin', 'round');
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', '12');
-            circle.setAttribute('cy', '12');
-            circle.setAttribute('r', '10');
+            if (this.config.theme === "dark") {
+                iconContainer.style.backgroundColor = "rgba(220, 38, 38, 0.2)";
+            }
+            const iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            iconSvg.setAttribute("width", "32");
+            iconSvg.setAttribute("height", "32");
+            iconSvg.setAttribute("viewBox", "0 0 24 24");
+            iconSvg.setAttribute("fill", "none");
+            iconSvg.setAttribute("stroke", "#dc2626");
+            iconSvg.setAttribute("stroke-width", "2");
+            iconSvg.setAttribute("stroke-linecap", "round");
+            iconSvg.setAttribute("stroke-linejoin", "round");
+            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            circle.setAttribute("cx", "12");
+            circle.setAttribute("cy", "12");
+            circle.setAttribute("r", "10");
             iconSvg.appendChild(circle);
-            const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line1.setAttribute('x1', '12');
-            line1.setAttribute('y1', '8');
-            line1.setAttribute('x2', '12');
-            line1.setAttribute('y2', '12');
+            const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line1.setAttribute("x1", "12");
+            line1.setAttribute("y1", "8");
+            line1.setAttribute("x2", "12");
+            line1.setAttribute("y2", "12");
             iconSvg.appendChild(line1);
-            const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line2.setAttribute('x1', '12');
-            line2.setAttribute('y1', '16');
-            line2.setAttribute('x2', '12.01');
-            line2.setAttribute('y2', '16');
+            const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line2.setAttribute("x1", "12");
+            line2.setAttribute("y1", "16");
+            line2.setAttribute("x2", "12.01");
+            line2.setAttribute("y2", "16");
             iconSvg.appendChild(line2);
             iconContainer.appendChild(iconSvg);
             errorContainer.appendChild(iconContainer);
             // Title
-            const title = this.createElement('h3', {
-                textContent: 'Authentication Failed',
-                style: 'font-size: 20px; font-weight: 600; margin: 0 0 12px 0; color: inherit;',
+            const title = this.createElement("h3", {
+                textContent: "Authentication Failed",
+                style: "font-size: 20px; font-weight: 600; margin: 0 0 12px 0; color: inherit;",
             });
             errorContainer.appendChild(title);
             // Message
-            const msg = this.createElement('p', {
+            const msg = this.createElement("p", {
                 textContent: message,
-                style: 'font-size: 14px; color: #6b7280; margin: 0 0 24px 0; line-height: 1.5; max-width: 100%; word-break: break-word;',
+                style: "font-size: 14px; color: #6b7280; margin: 0 0 24px 0; line-height: 1.5; max-width: 100%; word-break: break-word;",
             });
-            if (this.config.theme === 'dark') {
-                msg.style.color = '#9ca3af';
+            if (this.config.theme === "dark") {
+                msg.style.color = "#9ca3af";
             }
             errorContainer.appendChild(msg);
             // OK Button
-            const okButton = this.createElement('button', {
-                className: 'onboarding-button onboarding-button-primary',
-                textContent: 'OK',
-                style: 'width: 100%; max-width: 200px;',
+            const okButton = this.createElement("button", {
+                className: "onboarding-button onboarding-button-primary",
+                textContent: "OK",
+                style: "width: 100%; max-width: 200px;",
             });
-            okButton.addEventListener('click', () => {
+            okButton.addEventListener("click", () => {
                 if (this.config.modal) {
                     this.close();
                 }
@@ -1220,7 +1216,7 @@ export class OnboardingUIWeb {
                 }
                 // Also clear URL params to prevent showing error again on refresh
                 const url = new URL(window.location.href);
-                url.searchParams.delete('error');
+                url.searchParams.delete("error");
                 window.history.replaceState({}, document.title, url.toString());
             });
             errorContainer.appendChild(okButton);
@@ -1228,10 +1224,10 @@ export class OnboardingUIWeb {
         }
         else {
             // Update message if container exists
-            const msgEl = errorContainer.querySelector('p');
+            const msgEl = errorContainer.querySelector("p");
             if (msgEl)
                 msgEl.textContent = message;
-            errorContainer.style.display = 'flex';
+            errorContainer.style.display = "flex";
         }
         // Move footer to the bottom
         if (this.footer) {
@@ -1251,7 +1247,7 @@ export class OnboardingUIWeb {
         }
         // Hide the main modal overlay to prevent showing wallet options below loading screen
         if (this.modalOverlay) {
-            this.modalOverlay.style.display = 'none';
+            this.modalOverlay.style.display = "none";
         }
         // Show loading modal overlay instead (with higher z-index)
         this.showLoadingModal();
@@ -1262,17 +1258,17 @@ export class OnboardingUIWeb {
      */
     showLoadingModal() {
         // Hide any other modals that might be showing (wallet selection, etc.)
-        const otherModals = document.querySelectorAll('.onboarding-modal-overlay, .external-wallet-modal, .wallet-modal-overlay');
+        const otherModals = document.querySelectorAll(".onboarding-modal-overlay, .external-wallet-modal, .wallet-modal-overlay");
         otherModals.forEach((modal) => {
-            if (modal.id !== 'onboarding-loading-modal-overlay') {
-                modal.style.display = 'none';
+            if (modal.id !== "onboarding-loading-modal-overlay") {
+                modal.style.display = "none";
             }
         });
         // Create modal overlay if it doesn't exist
-        let loadingModalOverlay = document.getElementById('onboarding-loading-modal-overlay');
+        let loadingModalOverlay = document.getElementById("onboarding-loading-modal-overlay");
         if (!loadingModalOverlay) {
-            loadingModalOverlay = this.createElement('div', {
-                id: 'onboarding-loading-modal-overlay',
+            loadingModalOverlay = this.createElement("div", {
+                id: "onboarding-loading-modal-overlay",
                 style: `
           position: fixed;
           top: 0;
@@ -1287,10 +1283,10 @@ export class OnboardingUIWeb {
           backdrop-filter: blur(4px);
         `,
             });
-            const loadingCard = this.createElement('div', {
+            const loadingCard = this.createElement("div", {
                 className: `onboarding-card onboarding-theme-${this.config.theme}`,
                 style: `
-          background: ${this.config.theme === 'dark' ? '#1f2937' : 'white'};
+          background: ${this.config.theme === "dark" ? "#1f2937" : "white"};
           border-radius: 16px;
           padding: 32px 32px 28px;
           box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -1306,31 +1302,35 @@ export class OnboardingUIWeb {
         `,
             });
             // Header with logo and title
-            const header = this.createElement('div', {
-                className: 'onboarding-header',
-                style: 'display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-bottom: 32px;',
+            const header = this.createElement("div", {
+                className: "onboarding-header",
+                style: "display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-bottom: 32px;",
+            });
+            const logoSection = this.createElement("div", {
+                className: "onboarding-logo-section",
             });
-            const logoSection = this.createElement('div', { className: 'onboarding-logo-section' });
             if (this.config.logo) {
-                const logoContainer = this.createElement('div', { className: 'onboarding-logo-container' });
-                const logoImg = this.createElement('img', {
+                const logoContainer = this.createElement("div", {
+                    className: "onboarding-logo-container",
+                });
+                const logoImg = this.createElement("img", {
                     src: this.config.logo,
-                    alt: 'Abstraxn',
-                    className: 'onboarding-logo-img',
+                    alt: "Abstraxn",
+                    className: "onboarding-logo-img",
                 });
                 logoContainer.appendChild(logoImg);
                 logoSection.appendChild(logoContainer);
             }
             header.appendChild(logoSection);
             // Add title
-            const title = this.createElement('h1', {
-                className: 'onboarding-title',
-                textContent: this.config.onboardTitle || 'Sign in',
+            const title = this.createElement("h1", {
+                className: "onboarding-title",
+                textContent: this.config.onboardTitle || "Sign In",
                 style: `
           font-size: 24px;
           font-weight: 600;
           margin: 0;
-          color: ${this.config.theme === 'dark' ? '#ffffff' : '#111827'};
+          color: ${this.config.theme === "dark" ? "#ffffff" : "#111827"};
           text-align: center;
           margin-bottom: 0;
           letter-spacing: -0.01em;
@@ -1340,10 +1340,12 @@ export class OnboardingUIWeb {
             header.appendChild(title);
             loadingCard.appendChild(header);
             // Spinner
-            const spinnerColor = this.config.theme === 'dark' ? '#9ca3af' : '#111827';
-            const spinnerBorderColor = this.config.theme === 'dark' ? 'rgba(156, 163, 175, 0.2)' : 'rgba(17, 24, 39, 0.1)';
-            const spinner = this.createElement('div', {
-                className: 'onboarding-loading-spinner',
+            const spinnerColor = this.config.theme === "dark" ? "#9ca3af" : "#111827";
+            const spinnerBorderColor = this.config.theme === "dark"
+                ? "rgba(156, 163, 175, 0.2)"
+                : "rgba(17, 24, 39, 0.1)";
+            const spinner = this.createElement("div", {
+                className: "onboarding-loading-spinner",
                 style: `
           width: 40px;
           height: 40px;
@@ -1355,9 +1357,9 @@ export class OnboardingUIWeb {
         `,
             });
             // Add keyframes if not exists
-            if (!document.getElementById('onboarding-spin-style')) {
-                const style = document.createElement('style');
-                style.id = 'onboarding-spin-style';
+            if (!document.getElementById("onboarding-spin-style")) {
+                const style = document.createElement("style");
+                style.id = "onboarding-spin-style";
                 style.textContent = `
           @keyframes onboarding-spin {
             to { transform: rotate(360deg); }
@@ -1366,11 +1368,11 @@ export class OnboardingUIWeb {
                 document.head.appendChild(style);
             }
             // Text
-            const text = this.createElement('p', {
-                textContent: 'Verifying login...',
+            const text = this.createElement("p", {
+                textContent: "Verifying login...",
                 style: `
           font-size: 16px;
-          color: ${this.config.theme === 'dark' ? '#e5e7eb' : '#374151'};
+          color: ${this.config.theme === "dark" ? "#e5e7eb" : "#374151"};
           margin: 0;
           font-weight: 500;
         `,
@@ -1379,23 +1381,30 @@ export class OnboardingUIWeb {
             loadingCard.appendChild(text);
             // Footer "Powered by Abstraxn"
             if (this.config.showFooter !== false) {
-                const textColor = this.config.colors?.text || (this.config.theme === 'dark' ? '#9ca3af' : '#6b7280');
-                const brandColor = this.config.colors?.text || (this.config.theme === 'dark' ? '#e5e7eb' : '#374151');
-                const footer = this.createElement('div', { className: 'onboarding-footer' });
-                const footerText = this.createElement('p', {
-                    className: 'onboarding-footer-text',
+                const textColor = this.config.colors?.text ||
+                    (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
+                const brandColor = this.config.colors?.text ||
+                    (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+                const footer = this.createElement("div", {
+                    className: "onboarding-footer",
+                });
+                const footerText = this.createElement("p", {
+                    className: "onboarding-footer-text",
                     style: `color: ${textColor}; display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 11px; margin: 0;`,
                 });
-                const poweredBySpan = this.createElement('span', { textContent: 'Powered by', style: `color: ${textColor};` });
+                const poweredBySpan = this.createElement("span", {
+                    textContent: "Powered by",
+                    style: `color: ${textColor};`,
+                });
                 footerText.appendChild(poweredBySpan);
-                const brandContainer = this.createElement('a', {
-                    href: 'https://www.abstraxn.com/',
-                    target: '_blank',
-                    rel: 'noopener noreferrer',
-                    style: 'display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;',
-                    'aria-label': 'Visit Abstraxn website',
+                const brandContainer = this.createElement("a", {
+                    href: "https://www.abstraxn.com/",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: "display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;",
+                    "aria-label": "Visit Abstraxn website",
                 });
-                const logoSvg = this.createElement('span', {
+                const logoSvg = this.createElement("span", {
                     innerHTML: `
             <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
               <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_1242_781)"/>
@@ -1414,11 +1423,11 @@ export class OnboardingUIWeb {
               </defs>
             </svg>
           `,
-                    style: 'display: inline-flex; align-items: center;',
+                    style: "display: inline-flex; align-items: center;",
                 });
                 brandContainer.appendChild(logoSvg);
-                const brandText = this.createElement('span', {
-                    textContent: 'abstraxn',
+                const brandText = this.createElement("span", {
+                    textContent: "abstraxn",
                     style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
                 });
                 brandContainer.appendChild(brandText);
@@ -1431,31 +1440,31 @@ export class OnboardingUIWeb {
         }
         else {
             // Ensure modal is visible
-            loadingModalOverlay.style.display = 'flex';
-            loadingModalOverlay.style.visibility = 'visible';
-            loadingModalOverlay.style.opacity = '1';
-            loadingModalOverlay.style.zIndex = '9999999';
+            loadingModalOverlay.style.display = "flex";
+            loadingModalOverlay.style.visibility = "visible";
+            loadingModalOverlay.style.opacity = "1";
+            loadingModalOverlay.style.zIndex = "9999999";
         }
         // Prevent body scroll
-        document.body.style.overflow = 'hidden';
+        document.body.style.overflow = "hidden";
         // Force visibility (defensive check)
         if (loadingModalOverlay) {
-            loadingModalOverlay.style.display = 'flex';
-            loadingModalOverlay.style.visibility = 'visible';
-            loadingModalOverlay.style.opacity = '1';
-            loadingModalOverlay.style.zIndex = '9999999';
+            loadingModalOverlay.style.display = "flex";
+            loadingModalOverlay.style.visibility = "visible";
+            loadingModalOverlay.style.opacity = "1";
+            loadingModalOverlay.style.zIndex = "9999999";
         }
     }
     /**
      * Hide loading modal overlay
      */
     hideLoadingModal() {
-        const loadingModalOverlay = document.getElementById('onboarding-loading-modal-overlay');
+        const loadingModalOverlay = document.getElementById("onboarding-loading-modal-overlay");
         if (loadingModalOverlay) {
-            loadingModalOverlay.style.display = 'none';
-            loadingModalOverlay.style.visibility = 'hidden';
-            loadingModalOverlay.style.opacity = '0';
-            document.body.style.overflow = '';
+            loadingModalOverlay.style.display = "none";
+            loadingModalOverlay.style.visibility = "hidden";
+            loadingModalOverlay.style.opacity = "0";
+            document.body.style.overflow = "";
         }
     }
     /**
@@ -1464,21 +1473,21 @@ export class OnboardingUIWeb {
     showErrorModal(message) {
         // Helper function to close error modal
         const closeErrorModal = () => {
-            const overlay = document.getElementById('onboarding-error-modal-overlay');
+            const overlay = document.getElementById("onboarding-error-modal-overlay");
             if (overlay) {
-                overlay.style.display = 'none';
-                document.body.style.overflow = '';
+                overlay.style.display = "none";
+                document.body.style.overflow = "";
                 // Clear URL params
                 const url = new URL(window.location.href);
-                url.searchParams.delete('error');
+                url.searchParams.delete("error");
                 window.history.replaceState({}, document.title, url.toString());
             }
         };
         // Create modal overlay if it doesn't exist
-        let errorModalOverlay = document.getElementById('onboarding-error-modal-overlay');
+        let errorModalOverlay = document.getElementById("onboarding-error-modal-overlay");
         if (!errorModalOverlay) {
-            errorModalOverlay = this.createElement('div', {
-                id: 'onboarding-error-modal-overlay',
+            errorModalOverlay = this.createElement("div", {
+                id: "onboarding-error-modal-overlay",
                 style: `
           position: fixed;
           top: 0;
@@ -1494,15 +1503,15 @@ export class OnboardingUIWeb {
         `,
             });
             // Add backdrop click handler to close modal
-            errorModalOverlay.addEventListener('click', (e) => {
+            errorModalOverlay.addEventListener("click", (e) => {
                 if (e.target === errorModalOverlay) {
                     closeErrorModal();
                 }
             });
-            const errorCard = this.createElement('div', {
+            const errorCard = this.createElement("div", {
                 className: `onboarding-card onboarding-theme-${this.config.theme}`,
                 style: `
-          background: ${this.config.theme === 'dark' ? '#1f2937' : 'white'};
+          background: ${this.config.theme === "dark" ? "#1f2937" : "white"};
           border-radius: 16px;
           padding: 40px;
           box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -1519,21 +1528,25 @@ export class OnboardingUIWeb {
         `,
             });
             // Prevent clicks on card from closing modal
-            errorCard.addEventListener('click', (e) => {
+            errorCard.addEventListener("click", (e) => {
                 e.stopPropagation();
             });
             // Header with logo
-            const header = this.createElement('div', {
-                className: 'onboarding-header',
-                style: 'display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-bottom: 24px;',
+            const header = this.createElement("div", {
+                className: "onboarding-header",
+                style: "display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-bottom: 24px;",
+            });
+            const logoSection = this.createElement("div", {
+                className: "onboarding-logo-section",
             });
-            const logoSection = this.createElement('div', { className: 'onboarding-logo-section' });
             if (this.config.logo) {
-                const logoContainer = this.createElement('div', { className: 'onboarding-logo-container' });
-                const logoImg = this.createElement('img', {
+                const logoContainer = this.createElement("div", {
+                    className: "onboarding-logo-container",
+                });
+                const logoImg = this.createElement("img", {
                     src: this.config.logo,
-                    alt: 'Abstraxn',
-                    className: 'onboarding-logo-img',
+                    alt: "Abstraxn",
+                    className: "onboarding-logo-img",
                 });
                 logoContainer.appendChild(logoImg);
                 logoSection.appendChild(logoContainer);
@@ -1541,79 +1554,86 @@ export class OnboardingUIWeb {
             header.appendChild(logoSection);
             errorCard.appendChild(header);
             // Error Icon
-            const iconContainer = this.createElement('div', {
-                style: 'width: 64px; height: 64px; background-color: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;',
-            });
-            if (this.config.theme === 'dark') {
-                iconContainer.style.backgroundColor = 'rgba(220, 38, 38, 0.2)';
-            }
-            const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            iconSvg.setAttribute('width', '32');
-            iconSvg.setAttribute('height', '32');
-            iconSvg.setAttribute('viewBox', '0 0 24 24');
-            iconSvg.setAttribute('fill', 'none');
-            iconSvg.setAttribute('stroke', '#dc2626');
-            iconSvg.setAttribute('stroke-width', '2');
-            iconSvg.setAttribute('stroke-linecap', 'round');
-            iconSvg.setAttribute('stroke-linejoin', 'round');
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', '12');
-            circle.setAttribute('cy', '12');
-            circle.setAttribute('r', '10');
+            const iconContainer = this.createElement("div", {
+                style: "width: 64px; height: 64px; background-color: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;",
+            });
+            if (this.config.theme === "dark") {
+                iconContainer.style.backgroundColor = "rgba(220, 38, 38, 0.2)";
+            }
+            const iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            iconSvg.setAttribute("width", "32");
+            iconSvg.setAttribute("height", "32");
+            iconSvg.setAttribute("viewBox", "0 0 24 24");
+            iconSvg.setAttribute("fill", "none");
+            iconSvg.setAttribute("stroke", "#dc2626");
+            iconSvg.setAttribute("stroke-width", "2");
+            iconSvg.setAttribute("stroke-linecap", "round");
+            iconSvg.setAttribute("stroke-linejoin", "round");
+            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            circle.setAttribute("cx", "12");
+            circle.setAttribute("cy", "12");
+            circle.setAttribute("r", "10");
             iconSvg.appendChild(circle);
-            const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line1.setAttribute('x1', '12');
-            line1.setAttribute('y1', '8');
-            line1.setAttribute('x2', '12');
-            line1.setAttribute('y2', '12');
+            const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line1.setAttribute("x1", "12");
+            line1.setAttribute("y1", "8");
+            line1.setAttribute("x2", "12");
+            line1.setAttribute("y2", "12");
             iconSvg.appendChild(line1);
-            const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line2.setAttribute('x1', '12');
-            line2.setAttribute('y1', '16');
-            line2.setAttribute('x2', '12.01');
-            line2.setAttribute('y2', '16');
+            const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line2.setAttribute("x1", "12");
+            line2.setAttribute("y1", "16");
+            line2.setAttribute("x2", "12.01");
+            line2.setAttribute("y2", "16");
             iconSvg.appendChild(line2);
             iconContainer.appendChild(iconSvg);
             errorCard.appendChild(iconContainer);
             // Title
-            const title = this.createElement('h3', {
-                textContent: 'Authentication Failed',
-                style: `font-size: 20px; font-weight: 600; margin: 0 0 12px 0; color: ${this.config.theme === 'dark' ? '#ffffff' : '#111827'};`,
+            const title = this.createElement("h3", {
+                textContent: "Authentication Failed",
+                style: `font-size: 20px; font-weight: 600; margin: 0 0 12px 0; color: ${this.config.theme === "dark" ? "#ffffff" : "#111827"};`,
             });
             errorCard.appendChild(title);
             // Message
-            const msg = this.createElement('p', {
+            const msg = this.createElement("p", {
                 textContent: message,
-                style: `font-size: 14px; color: ${this.config.theme === 'dark' ? '#e5e7eb' : '#374151'}; margin: 0 0 24px 0; line-height: 1.5; max-width: 100%; word-break: break-word;`,
+                style: `font-size: 14px; color: ${this.config.theme === "dark" ? "#e5e7eb" : "#374151"}; margin: 0 0 24px 0; line-height: 1.5; max-width: 100%; word-break: break-word;`,
             });
             errorCard.appendChild(msg);
             // OK Button
-            const okButton = this.createElement('button', {
-                className: 'onboarding-button onboarding-button-primary',
-                textContent: 'OK',
-                style: 'width: 100%; max-width: 200px;',
+            const okButton = this.createElement("button", {
+                className: "onboarding-button onboarding-button-primary",
+                textContent: "OK",
+                style: "width: 100%; max-width: 200px;",
             });
-            okButton.addEventListener('click', closeErrorModal);
+            okButton.addEventListener("click", closeErrorModal);
             errorCard.appendChild(okButton);
             // Footer "Powered by Abstraxn"
             if (this.config.showFooter !== false) {
-                const textColor = this.config.colors?.text || (this.config.theme === 'dark' ? '#9ca3af' : '#6b7280');
-                const brandColor = this.config.colors?.text || (this.config.theme === 'dark' ? '#e5e7eb' : '#374151');
-                const footer = this.createElement('div', { className: 'onboarding-footer' });
-                const footerText = this.createElement('p', {
-                    className: 'onboarding-footer-text',
+                const textColor = this.config.colors?.text ||
+                    (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
+                const brandColor = this.config.colors?.text ||
+                    (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+                const footer = this.createElement("div", {
+                    className: "onboarding-footer",
+                });
+                const footerText = this.createElement("p", {
+                    className: "onboarding-footer-text",
                     style: `color: ${textColor}; display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 11px; margin: 0; margin-top: 24px;`,
                 });
-                const poweredBySpan = this.createElement('span', { textContent: 'Powered by', style: `color: ${textColor};` });
+                const poweredBySpan = this.createElement("span", {
+                    textContent: "Powered by",
+                    style: `color: ${textColor};`,
+                });
                 footerText.appendChild(poweredBySpan);
-                const brandContainer = this.createElement('a', {
-                    href: 'https://www.abstraxn.com/',
-                    target: '_blank',
-                    rel: 'noopener noreferrer',
-                    style: 'display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;',
-                    'aria-label': 'Visit Abstraxn website',
+                const brandContainer = this.createElement("a", {
+                    href: "https://www.abstraxn.com/",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: "display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;",
+                    "aria-label": "Visit Abstraxn website",
                 });
-                const logoSvg = this.createElement('span', {
+                const logoSvg = this.createElement("span", {
                     innerHTML: `
             <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
               <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_error_modal)"/>
@@ -1632,11 +1652,11 @@ export class OnboardingUIWeb {
               </defs>
             </svg>
           `,
-                    style: 'display: inline-flex; align-items: center;',
+                    style: "display: inline-flex; align-items: center;",
                 });
                 brandContainer.appendChild(logoSvg);
-                const brandText = this.createElement('span', {
-                    textContent: 'abstraxn',
+                const brandText = this.createElement("span", {
+                    textContent: "abstraxn",
                     style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
                 });
                 brandContainer.appendChild(brandText);
@@ -1649,13 +1669,13 @@ export class OnboardingUIWeb {
         }
         else {
             // Update message if overlay exists
-            const msgEl = errorModalOverlay.querySelector('p');
+            const msgEl = errorModalOverlay.querySelector("p");
             if (msgEl)
                 msgEl.textContent = message;
-            errorModalOverlay.style.display = 'flex';
+            errorModalOverlay.style.display = "flex";
         }
         // Prevent body scroll
-        document.body.style.overflow = 'hidden';
+        document.body.style.overflow = "hidden";
     }
     /**
      * Inject CSS styles into the document head (only once)
@@ -1665,20 +1685,20 @@ export class OnboardingUIWeb {
             return;
         }
         // Check if styles are already injected
-        const existingStyle = document.getElementById('onboarding-ui-styles');
+        const existingStyle = document.getElementById("onboarding-ui-styles");
         if (existingStyle) {
             OnboardingUIWeb.stylesInjected = true;
             return;
         }
         // Create and inject style element
-        const styleElement = document.createElement('style');
-        styleElement.id = 'onboarding-ui-styles';
+        const styleElement = document.createElement("style");
+        styleElement.id = "onboarding-ui-styles";
         styleElement.textContent = ONBOARDING_UI_STYLES;
         document.head.appendChild(styleElement);
         // Inject custom CSS if provided
         if (this.config.customCSS) {
-            const customStyleElement = document.createElement('style');
-            customStyleElement.id = 'onboarding-ui-custom-styles';
+            const customStyleElement = document.createElement("style");
+            customStyleElement.id = "onboarding-ui-custom-styles";
             customStyleElement.textContent = this.config.customCSS;
             document.head.appendChild(customStyleElement);
         }
@@ -1688,8 +1708,8 @@ export class OnboardingUIWeb {
         }
         OnboardingUIWeb.stylesInjected = true;
         // Inject utility styles for loading/error modes
-        const utilityStyle = document.createElement('style');
-        utilityStyle.id = 'onboarding-utility-styles';
+        const utilityStyle = document.createElement("style");
+        utilityStyle.id = "onboarding-utility-styles";
         utilityStyle.textContent = `
       .onboarding-card.onboarding-mode-loading > *:not(.onboarding-loading-container):not(.onboarding-header):not(.onboarding-footer),
       .onboarding-card.onboarding-mode-error > *:not(.onboarding-error-container):not(.onboarding-header):not(.onboarding-footer) {
@@ -1705,9 +1725,9 @@ export class OnboardingUIWeb {
         if (!this.config.colors)
             return;
         const root = this.rootElement || document.documentElement;
-        const style = document.createElement('style');
-        style.id = 'onboarding-ui-colors';
-        let css = '';
+        const style = document.createElement("style");
+        style.id = "onboarding-ui-colors";
+        let css = "";
         if (this.config.colors.primary) {
             css += `.onboarding-button-primary { background-color: ${this.config.colors.primary} !important; background: ${this.config.colors.primary} !important; }`;
             css += `.onboarding-footer-brand { color: ${this.config.colors.primary} !important; }`;
@@ -1726,7 +1746,7 @@ export class OnboardingUIWeb {
             css += `.onboarding-input { border-color: ${this.config.colors.border} !important; }`;
         }
         if (this.config.colors.error) {
-            css += `.onboarding-error { background-color: ${this.config.colors.error} !important; }`;
+            css += `.onboarding-error { color: ${this.config.colors.error} !important; }`;
         }
         style.textContent = css;
         document.head.appendChild(style);
@@ -1741,7 +1761,7 @@ export class OnboardingUIWeb {
         }
         else {
             if (this.config.container) {
-                if (typeof this.config.container === 'string') {
+                if (typeof this.config.container === "string") {
                     this.container = document.querySelector(this.config.container);
                     if (!this.container) {
                         throw new Error(`Container element not found: ${this.config.container}`);
@@ -1775,41 +1795,23 @@ export class OnboardingUIWeb {
      */
     renderAsModal() {
         // Create modal overlay (backdrop) - start hidden to prevent flicker
-        this.modalOverlay = this.createElement('div', {
-            className: 'onboarding-modal-overlay',
-            style: 'display: none;', // Start hidden by default
+        this.modalOverlay = this.createElement("div", {
+            className: "onboarding-modal-overlay",
+            style: "display: none;", // Start hidden by default
         });
         // Create modal content wrapper
-        this.modalContent = this.createElement('div', {
+        this.modalContent = this.createElement("div", {
             className: `onboarding-modal-content onboarding-theme-${this.config.theme}`,
-            role: 'dialog',
-            'aria-modal': 'true',
-            'aria-labelledby': 'onboarding-title',
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "onboarding-title",
             tabIndex: -1,
         });
         // Create root element for the form
-        this.rootElement = this.createElement('div', {
+        this.rootElement = this.createElement("div", {
             className: `onboarding-container onboarding-theme-${this.config.theme} ${this.config.className}`,
             style: this.parseStyle(this.config.style),
         });
-        // Close button
-        if (this.config.showCloseButton) {
-            this.closeButton = this.createElement('button', {
-                className: 'onboarding-modal-close',
-                type: 'button',
-                innerHTML: '×',
-                'aria-label': 'Close modal',
-                'aria-describedby': 'close-button-description',
-            });
-            this.closeButton.addEventListener('click', () => this.close());
-            this.closeButton.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.close();
-                }
-            });
-            this.modalContent.appendChild(this.closeButton);
-        }
         // Build the form content
         this.buildFormContent();
         // Append form to root, root to modal content, modal content to overlay
@@ -1817,33 +1819,30 @@ export class OnboardingUIWeb {
         this.modalOverlay.appendChild(this.modalContent);
         // Add click handler for backdrop
         if (this.config.closeOnBackdropClick) {
-            this.modalOverlay.addEventListener('click', (e) => {
+            this.modalOverlay.addEventListener("click", (e) => {
                 if (e.target === this.modalOverlay) {
                     this.close();
                 }
             });
         }
         // Prevent body scroll when modal is open
-        document.body.style.overflow = 'hidden';
+        document.body.style.overflow = "hidden";
         // Append to body
         document.body.appendChild(this.modalOverlay);
         // Add animation class
         setTimeout(() => {
             if (this.modalOverlay) {
-                this.modalOverlay.classList.add('onboarding-modal-open');
+                this.modalOverlay.classList.add("onboarding-modal-open");
                 // Focus management for accessibility
                 if (this.emailInput) {
                     this.emailInput.focus();
                 }
             }
         }, 10);
-        // Add keyboard navigation (ESC to close)
-        this.modalOverlay.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.config.showCloseButton) {
-                this.close();
-            }
+        // Add keyboard navigation
+        this.modalOverlay.addEventListener("keydown", (e) => {
             // Trap focus within modal
-            if (e.key === 'Tab') {
+            if (e.key === "Tab") {
                 this.trapFocus(e);
             }
         });
@@ -1873,7 +1872,7 @@ export class OnboardingUIWeb {
         if (!this.container)
             return;
         // Create root element
-        this.rootElement = this.createElement('div', {
+        this.rootElement = this.createElement("div", {
             className: `onboarding-container onboarding-inline onboarding-theme-${this.config.theme} ${this.config.className}`,
             style: this.parseStyle(this.config.style),
         });
@@ -1884,7 +1883,7 @@ export class OnboardingUIWeb {
             this.container.appendChild(this.rootElement);
         }
         else {
-            this.container.innerHTML = '';
+            this.container.innerHTML = "";
             this.container.appendChild(this.rootElement);
         }
     }
@@ -1895,95 +1894,110 @@ export class OnboardingUIWeb {
         if (!this.rootElement)
             return;
         // Create card
-        const card = this.createElement('div', { className: 'onboarding-card' });
+        const card = this.createElement("div", { className: "onboarding-card" });
         // Header with logo at top
-        const header = this.createElement('div', { className: 'onboarding-header' });
+        const header = this.createElement("div", {
+            className: "onboarding-header",
+        });
         // Logo section (centered at top)
-        const logoSection = this.createElement('div', { className: 'onboarding-logo-section' });
         if (this.config.logo) {
-            const logoContainer = this.createElement('div', { className: 'onboarding-logo-container' });
-            const logoImg = this.createElement('img', {
+            const logoSection = this.createElement("div", {
+                className: "onboarding-logo-section",
+            });
+            const logoContainer = this.createElement("div", {
+                className: "onboarding-logo-container",
+            });
+            const logoImg = this.createElement("img", {
                 src: this.config.logo,
-                alt: 'Logo',
-                className: 'onboarding-logo-img',
+                alt: "Logo",
+                className: "onboarding-logo-img",
             });
             logoContainer.appendChild(logoImg);
             logoSection.appendChild(logoContainer);
+            header.appendChild(logoSection);
         }
-        header.appendChild(logoSection);
-        // Onboarding title (always shown, default: "Sign in")
-        const title = this.createElement('h1', {
-            className: 'onboarding-title',
-            textContent: this.config.onboardTitle || 'Sign in',
-            id: 'onboarding-title',
+        // Onboarding title (always shown, default: "Sign In")
+        const title = this.createElement("h1", {
+            className: "onboarding-title",
+            textContent: this.config.onboardTitle || "Sign In",
+            id: "onboarding-title",
         });
         header.appendChild(title);
         // Form
-        this.emailForm = this.createElement('form', {
-            className: 'onboarding-form',
-            'aria-label': 'Sign in form',
+        this.emailForm = this.createElement("form", {
+            className: "onboarding-form",
+            "aria-label": "Sign In form",
             noValidate: true,
         });
         // Email input group
-        const emailGroup = this.createElement('div', { className: 'onboarding-input-group' });
+        const emailGroup = this.createElement("div", {
+            className: "onboarding-input-group",
+        });
         // Email label
-        const emailLabel = this.createElement('label', {
-            className: 'onboarding-input-label',
-            textContent: this.config.labels?.emailLabel || 'Email Address',
-            htmlFor: 'onboarding-email-input',
+        const emailLabel = this.createElement("label", {
+            className: "onboarding-input-label",
+            textContent: this.config.labels?.emailLabel || "Email Address",
+            htmlFor: "onboarding-email-input",
         });
         emailGroup.appendChild(emailLabel);
-        const emailWrapper = this.createElement('div', { className: 'onboarding-input-wrapper' });
+        const emailWrapper = this.createElement("div", {
+            className: "onboarding-input-wrapper",
+        });
         // Email icon SVG
         const emailIcon = this.createEmailIcon();
         emailWrapper.appendChild(emailIcon);
         // Get auth methods to check if all are enabled
-        const authMethods = this.config.authMethods || ['otp', 'google'];
-        const showEmail = authMethods.includes('otp');
-        const showGoogle = authMethods.includes('google');
-        const showTwitter = authMethods.includes('twitter');
-        const showDiscord = authMethods.includes('discord');
-        const showPasskey = authMethods.includes('passkey');
+        const authMethods = this.config.authMethods || ["otp", "google"];
+        const showEmail = authMethods.includes("otp");
+        const showGoogle = authMethods.includes("google");
+        const showTwitter = authMethods.includes("twitter");
+        const showDiscord = authMethods.includes("discord");
+        const showPasskey = authMethods.includes("passkey");
         const socialMethods = [
-            { key: 'google', show: showGoogle },
-            { key: 'twitter', show: showTwitter },
-            { key: 'discord', show: showDiscord },
+            { key: "google", show: showGoogle },
+            { key: "twitter", show: showTwitter },
+            { key: "discord", show: showDiscord },
         ].filter((m) => m.show);
         // Treat “all configs” as email + passkey + all socials present
         const allAuthMethodsEnabled = showEmail && showPasskey && showGoogle && showTwitter && showDiscord;
         // Email input
-        this.emailInput = this.createElement('input', {
-            type: 'email',
-            id: 'onboarding-email-input',
-            placeholder: this.config.labels?.emailPlaceholder || 'Enter your email',
-            className: 'onboarding-input',
+        this.emailInput = this.createElement("input", {
+            type: "email",
+            id: "onboarding-email-input",
+            placeholder: this.config.labels?.emailPlaceholder || "Enter your email",
+            className: "onboarding-input",
             required: true,
-            autocomplete: 'email',
-            'aria-label': this.config.labels?.emailLabel || 'Email Address',
-            'aria-required': 'true',
-            style: allAuthMethodsEnabled ? 'padding-right: 48px;' : '',
+            autocomplete: "email",
+            "aria-label": this.config.labels?.emailLabel || "Email Address",
+            "aria-required": "true",
+            style: allAuthMethodsEnabled ? "padding-right: 48px;" : "",
         });
         emailWrapper.appendChild(this.emailInput);
         // Add right arrow button inside input when all auth methods are enabled
         if (allAuthMethodsEnabled) {
-            this.emailArrowButton = this.createElement('button', {
-                type: 'button',
-                className: 'onboarding-input-arrow-button',
-                'aria-label': this.config.labels?.emailButton || 'Continue with email',
+            this.emailArrowButton = this.createElement("button", {
+                type: "button",
+                className: "onboarding-input-arrow-button",
+                "aria-label": this.config.labels?.emailButton || "Continue with email",
+                disabled: true,
             });
             const arrowIcon = this.createArrowIcon();
-            arrowIcon.setAttribute('aria-hidden', 'true');
+            arrowIcon.setAttribute("aria-hidden", "true");
             this.emailArrowButton.appendChild(arrowIcon);
             // Add click handler to submit form
-            this.emailArrowButton.addEventListener('click', (e) => {
+            this.emailArrowButton.addEventListener("click", (e) => {
                 e.preventDefault();
-                if (this.emailInput && this.emailInput.value.trim()) {
+                if (this.emailInput &&
+                    this.emailInput.value.trim() &&
+                    isValidEmail(this.emailInput.value.trim())) {
                     this.emailForm?.requestSubmit();
                 }
             });
             // Also submit on Enter key
-            this.emailInput.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' && this.emailInput?.value.trim()) {
+            this.emailInput.addEventListener("keydown", (e) => {
+                if (e.key === "Enter" &&
+                    this.emailInput?.value.trim() &&
+                    isValidEmail(this.emailInput.value.trim())) {
                     e.preventDefault();
                     this.emailForm?.requestSubmit();
                 }
@@ -1993,48 +2007,51 @@ export class OnboardingUIWeb {
         emailGroup.appendChild(emailWrapper);
         this.emailForm.appendChild(emailGroup);
         // OTP input group (initially hidden)
-        this.otpGroup = this.createElement('div', {
-            className: 'onboarding-input-group',
-            style: 'display: none;',
+        this.otpGroup = this.createElement("div", {
+            className: "onboarding-input-group",
+            style: "display: none;",
         });
         // OTP label
-        const otpLabel = this.createElement('label', {
-            className: 'onboarding-input-label',
-            textContent: this.config.labels?.otpLabel || 'Verification code',
-            htmlFor: 'onboarding-otp-input',
+        const otpLabel = this.createElement("label", {
+            className: "onboarding-input-label",
+            textContent: this.config.labels?.otpLabel || "Verification code",
+            htmlFor: "onboarding-otp-input",
         });
         this.otpGroup.appendChild(otpLabel);
-        const otpWrapper = this.createElement('div', { className: 'onboarding-input-wrapper' });
-        this.otpInput = this.createElement('input', {
-            type: 'text',
-            id: 'onboarding-otp-input',
-            placeholder: this.config.labels?.otpPlaceholder || 'Enter 6-digit code',
-            className: 'onboarding-input',
+        const otpWrapper = this.createElement("div", {
+            className: "onboarding-input-wrapper",
+        });
+        this.otpInput = this.createElement("input", {
+            type: "text",
+            id: "onboarding-otp-input",
+            placeholder: this.config.labels?.otpPlaceholder || "Enter 6-digit code",
+            className: "onboarding-input",
             required: false, // Don't require initially since it's hidden
             maxLength: 6,
-            inputMode: 'numeric',
-            pattern: '[0-9]*',
-            autocomplete: 'one-time-code',
-            'aria-label': this.config.labels?.otpLabel || 'Verification code',
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            autocomplete: "one-time-code",
+            "aria-label": this.config.labels?.otpLabel || "Verification code",
         });
         otpWrapper.appendChild(this.otpInput);
         this.otpGroup.appendChild(otpWrapper);
         this.emailForm.appendChild(this.otpGroup);
         // Error element
-        this.errorElement = this.createElement('div', {
-            className: 'onboarding-error',
-            style: 'display: none;',
-            role: 'alert',
-            'aria-live': 'polite',
+        this.errorElement = this.createElement("div", {
+            className: "onboarding-error",
+            style: "display: none;",
+            role: "alert",
+            "aria-live": "polite",
         });
         this.emailForm.appendChild(this.errorElement);
         // Continue button (hide if all auth methods are enabled)
-        this.continueButton = this.createElement('button', {
-            type: 'submit',
-            className: 'onboarding-button onboarding-button-primary',
-            textContent: this.config.labels?.emailButton || 'Continue',
-            'aria-label': this.config.labels?.emailButton || 'Continue with email',
-            style: allAuthMethodsEnabled ? 'display: none;' : '',
+        this.continueButton = this.createElement("button", {
+            type: "submit",
+            className: "onboarding-button onboarding-button-primary",
+            textContent: this.config.labels?.emailButton || "Continue",
+            "aria-label": this.config.labels?.emailButton || "Continue with email",
+            style: allAuthMethodsEnabled ? "display: none;" : "",
+            disabled: true,
         });
         this.emailForm.appendChild(this.continueButton);
         card.appendChild(header);
@@ -2045,24 +2062,26 @@ export class OnboardingUIWeb {
         }
         else {
             // Still create the form but hide it (needed for OTP flow)
-            this.emailForm.style.display = 'none';
+            this.emailForm.style.display = "none";
             card.appendChild(this.emailForm);
         }
         // Divider (show if email plus any social method is enabled)
         if (showEmail && socialMethods.length > 0) {
-            this.divider = this.createElement('div', { className: 'onboarding-divider' });
-            const dividerText = this.createElement('span', {
-                className: 'onboarding-divider-text',
-                textContent: 'or',
+            this.divider = this.createElement("div", {
+                className: "onboarding-divider",
+            });
+            const dividerText = this.createElement("span", {
+                className: "onboarding-divider-text",
+                textContent: "or",
             });
             this.divider.appendChild(dividerText);
             card.appendChild(this.divider);
         }
         else {
             // Create divider element but hide it
-            this.divider = this.createElement('div', {
-                className: 'onboarding-divider',
-                style: 'display: none;',
+            this.divider = this.createElement("div", {
+                className: "onboarding-divider",
+                style: "display: none;",
             });
             card.appendChild(this.divider);
         }
@@ -2070,17 +2089,19 @@ export class OnboardingUIWeb {
         if (socialMethods.length > 0) {
             if (socialMethods.length === 1) {
                 const method = socialMethods[0].key;
-                const isGoogle = method === 'google';
-                const isTwitter = method === 'twitter';
-                const isDiscord = method === 'discord';
-                const button = this.createElement('button', {
-                    type: 'button',
-                    className: isGoogle ? 'onboarding-button onboarding-button-google' : 'onboarding-button onboarding-button-social',
-                    'aria-label': this.config.labels?.[`${method}Button`] ||
-                        (method === 'google'
-                            ? 'Continue with Google'
-                            : method === 'twitter'
-                                ? 'Continue with X'
+                const isGoogle = method === "google";
+                const isTwitter = method === "twitter";
+                const isDiscord = method === "discord";
+                const button = this.createElement("button", {
+                    type: "button",
+                    className: isGoogle
+                        ? "onboarding-button onboarding-button-google"
+                        : "onboarding-button onboarding-button-social",
+                    "aria-label": this.config.labels?.[`${method}Button`] ||
+                        (method === "google"
+                            ? "Continue with Google"
+                            : method === "twitter"
+                                ? "Continue with X"
                                 : `Continue with ${method.charAt(0).toUpperCase() + method.slice(1)}`),
                 });
                 const icon = isGoogle
@@ -2088,13 +2109,13 @@ export class OnboardingUIWeb {
                     : isTwitter
                         ? this.createTwitterIcon()
                         : this.createDiscordIcon();
-                icon.setAttribute('aria-hidden', 'true');
+                icon.setAttribute("aria-hidden", "true");
                 button.appendChild(icon);
                 const label = this.config.labels?.[`${method}Button`] ||
-                    (method === 'google'
-                        ? 'Continue with Google'
-                        : method === 'twitter'
-                            ? 'Continue with X'
+                    (method === "google"
+                        ? "Continue with Google"
+                        : method === "twitter"
+                            ? "Continue with X"
                             : `Continue with ${method.charAt(0).toUpperCase() + method.slice(1)}`);
                 button.appendChild(document.createTextNode(` ${label}`));
                 if (isGoogle) {
@@ -2109,19 +2130,21 @@ export class OnboardingUIWeb {
                 card.appendChild(button);
             }
             else {
-                this.socialGrid = this.createElement('div', { className: 'onboarding-social-grid' });
+                this.socialGrid = this.createElement("div", {
+                    className: "onboarding-social-grid",
+                });
                 socialMethods.forEach(({ key: method }) => {
-                    const isGoogle = method === 'google';
-                    const isTwitter = method === 'twitter';
-                    const isDiscord = method === 'discord';
-                    const button = this.createElement('button', {
-                        type: 'button',
-                        className: 'onboarding-button-social-icon',
-                        'aria-label': this.config.labels?.[`${method}Button`] ||
-                            (method === 'google'
-                                ? 'Google'
-                                : method === 'twitter'
-                                    ? 'X'
+                    const isGoogle = method === "google";
+                    const isTwitter = method === "twitter";
+                    const isDiscord = method === "discord";
+                    const button = this.createElement("button", {
+                        type: "button",
+                        className: "onboarding-button-social-icon",
+                        "aria-label": this.config.labels?.[`${method}Button`] ||
+                            (method === "google"
+                                ? "Google"
+                                : method === "twitter"
+                                    ? "X"
                                     : method.charAt(0).toUpperCase() + method.slice(1)),
                     });
                     const icon = isGoogle
@@ -2129,7 +2152,7 @@ export class OnboardingUIWeb {
                         : isTwitter
                             ? this.createTwitterIcon()
                             : this.createDiscordIcon();
-                    icon.setAttribute('aria-hidden', 'true');
+                    icon.setAttribute("aria-hidden", "true");
                     button.appendChild(icon);
                     if (isGoogle) {
                         this.googleButton = button;
@@ -2151,10 +2174,12 @@ export class OnboardingUIWeb {
         }
         // Passkey divider (only show if passkey is enabled and there are other auth methods)
         if (showPasskey && (showEmail || socialMethods.length > 0)) {
-            this.passkeyDivider = this.createElement('div', { className: 'onboarding-divider' });
-            const passkeyDividerText = this.createElement('span', {
-                className: 'onboarding-divider-text',
-                textContent: 'or',
+            this.passkeyDivider = this.createElement("div", {
+                className: "onboarding-divider",
+            });
+            const passkeyDividerText = this.createElement("span", {
+                className: "onboarding-divider-text",
+                textContent: "or",
             });
             this.passkeyDivider.appendChild(passkeyDividerText);
             card.appendChild(this.passkeyDivider);
@@ -2165,17 +2190,15 @@ export class OnboardingUIWeb {
         // Passkey login button (only show if passkey auth is enabled)
         if (showPasskey) {
             const passkeyBg = this.config.colors?.primary ||
-                (this.config.theme === 'dark' ? '#4b5563' : '#ffffff');
+                (this.config.theme === "dark" ? "#4b5563" : "#ffffff");
             const passkeyBorder = this.config.colors?.border ||
-                (this.config.theme === 'dark' ? '#6b7280' : '#e5e7eb');
+                (this.config.theme === "dark" ? "#6b7280" : "#e5e7eb");
             const passkeyTextColor = this.config.colors?.text ||
-                (this.config.theme === 'dark' ? '#ffffff' : '#1f2937');
-            // Set passkey link color based on theme: white for dark theme, black for light theme
-            const passkeyLinkColor = this.config.theme === 'dark' ? '#ffffff' : '#1f2937';
-            this.passkeyLoginButton = this.createElement('button', {
-                type: 'button',
-                className: 'onboarding-button onboarding-button-passkey',
-                'aria-label': this.config.labels?.passkeyLoginButton || 'Log in with passkey',
+                (this.config.theme === "dark" ? "#ffffff" : "#1f2937");
+            this.passkeyLoginButton = this.createElement("button", {
+                type: "button",
+                className: "onboarding-button onboarding-button-passkey",
+                "aria-label": this.config.labels?.passkeyLoginButton || "Log in with passkey",
                 style: `
           background-color: ${passkeyBg};
           color: ${passkeyTextColor};
@@ -2183,94 +2206,98 @@ export class OnboardingUIWeb {
         `,
             });
             const passkeyIcon = this.createPasskeyIcon();
-            passkeyIcon.setAttribute('aria-hidden', 'true');
+            passkeyIcon.setAttribute("aria-hidden", "true");
             this.passkeyLoginButton.appendChild(passkeyIcon);
-            const passkeyText = this.config.labels?.passkeyLoginButton || 'Log in with passkey';
+            const passkeyText = this.config.labels?.passkeyLoginButton || "Log in with passkey";
             this.passkeyLoginButton.appendChild(document.createTextNode(` ${passkeyText}`));
             card.appendChild(this.passkeyLoginButton);
             // Passkey signup link
-            const passkeySignupContainer = this.createElement('div', {
-                style: 'text-align: center; margin-top: 12px;',
+            const passkeySignupContainer = this.createElement("div", {
+                style: "text-align: center; margin-top: 12px;",
             });
-            this.passkeySignupLink = this.createElement('a', {
-                className: 'onboarding-passkey-signup-link',
-                href: '#',
-                textContent: this.config.labels?.passkeySignupButton || 'Sign up with passkey',
-                'aria-label': this.config.labels?.passkeySignupButton || 'Sign up with passkey',
-                style: `color: ${passkeyLinkColor};`,
+            this.passkeySignupLink = this.createElement("a", {
+                className: "onboarding-passkey-signup-link",
+                href: "#",
+                textContent: this.config.labels?.passkeySignupButton || "Sign up with passkey",
+                "aria-label": this.config.labels?.passkeySignupButton || "Sign up with passkey",
             });
             passkeySignupContainer.appendChild(this.passkeySignupLink);
             card.appendChild(passkeySignupContainer);
             // Passkey error element (local to passkey section)
-            this.passkeyErrorElement = this.createElement('div', {
-                className: 'onboarding-error',
-                style: 'display: none; margin-top: 12px;',
-                role: 'alert',
-                'aria-live': 'polite',
+            this.passkeyErrorElement = this.createElement("div", {
+                className: "onboarding-error",
+                style: "display: none; margin-top: 12px;",
+                role: "alert",
+                "aria-live": "polite",
             });
             card.appendChild(this.passkeyErrorElement);
         }
         else {
             // Create passkey elements but hide them
-            this.passkeyLoginButton = this.createElement('button', {
-                type: 'button',
-                className: 'onboarding-button onboarding-button-passkey',
-                style: 'display: none;',
+            this.passkeyLoginButton = this.createElement("button", {
+                type: "button",
+                className: "onboarding-button onboarding-button-passkey",
+                style: "display: none;",
             });
             card.appendChild(this.passkeyLoginButton);
-            this.passkeySignupLink = this.createElement('a', {
-                className: 'onboarding-passkey-signup-link',
-                href: '#',
-                style: 'display: none;',
+            this.passkeySignupLink = this.createElement("a", {
+                className: "onboarding-passkey-signup-link",
+                href: "#",
+                style: "display: none;",
             });
             card.appendChild(this.passkeySignupLink);
-            this.passkeyErrorElement = this.createElement('div', {
-                className: 'onboarding-error',
-                style: 'display: none;',
+            this.passkeyErrorElement = this.createElement("div", {
+                className: "onboarding-error",
+                style: "display: none;",
             });
             card.appendChild(this.passkeyErrorElement);
         }
         // External wallet divider (shown immediately if external wallets are enabled)
-        this.externalWalletDivider = this.createElement('div', {
-            className: 'onboarding-divider',
-            style: this.externalWalletsEnabled ? '' : 'display: none;',
+        this.externalWalletDivider = this.createElement("div", {
+            className: "onboarding-divider",
+            style: this.externalWalletsEnabled ? "" : "display: none;",
         });
-        const externalWalletDividerText = this.createElement('span', {
-            className: 'onboarding-divider-text',
-            textContent: 'or',
+        const externalWalletDividerText = this.createElement("span", {
+            className: "onboarding-divider-text",
+            textContent: "or",
         });
         this.externalWalletDivider.appendChild(externalWalletDividerText);
         card.appendChild(this.externalWalletDivider);
         // External wallet container (shown immediately if external wallets are enabled)
-        this.externalWalletContainer = this.createElement('div', {
-            id: 'onboarding-external-wallet-container',
-            style: this.externalWalletsEnabled ? '' : 'display: none;',
+        this.externalWalletContainer = this.createElement("div", {
+            id: "onboarding-external-wallet-container",
+            style: this.externalWalletsEnabled ? "" : "display: none;",
         });
         card.appendChild(this.externalWalletContainer);
         // Footer (inside card, so it appears on initial login screen)
         if (this.config.showFooter) {
             const textColor = this.config.colors?.text ||
-                (this.config.theme === 'dark' ? '#9ca3af' : '#6b7280');
+                (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
             const brandColor = this.config.colors?.text ||
-                (this.config.theme === 'dark' ? '#e5e7eb' : '#374151');
-            this.footer = this.createElement('div', { className: 'onboarding-footer' });
-            const footerText = this.createElement('p', {
-                className: 'onboarding-footer-text',
+                (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+            this.footer = this.createElement("div", {
+                className: "onboarding-footer",
+            });
+            const footerText = this.createElement("p", {
+                className: "onboarding-footer-text",
                 style: `color: ${textColor}; display: flex; align-items: center; gap: 6px; justify-content: center;`,
             });
             // "Powered by" text
-            const poweredBySpan = this.createElement('span', { textContent: 'Powered by', style: `color: ${textColor};` });
+            const poweredBySpan = this.createElement("span", {
+                textContent: "Powered by",
+                style: `color: ${textColor};`,
+            });
             footerText.appendChild(poweredBySpan);
             // Inline brand with logo (clickable link)
-            const brandContainer = this.createElement('a', {
-                href: 'https://www.abstraxn.com/',
-                target: '_blank',
-                rel: 'noopener noreferrer',
-                style: 'display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;',
-                'aria-label': 'Visit Abstraxn website',
+            const brandContainer = this.createElement("a", {
+                href: "https://www.abstraxn.com/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: "display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;",
+                "aria-label": "Visit Abstraxn website",
             });
             // Abstraxn logo SVG
-            const logoSvg = this.createElement('span', {
+            const logoSvg = this.createElement("span", {
                 innerHTML: `
           <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
             <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_1242_781)"/>
@@ -2289,11 +2316,11 @@ export class OnboardingUIWeb {
             </defs>
           </svg>
         `,
-                style: 'display: inline-flex; align-items: center;',
+                style: "display: inline-flex; align-items: center;",
             });
             brandContainer.appendChild(logoSvg);
-            const brandText = this.createElement('span', {
-                textContent: 'abstraxn',
+            const brandText = this.createElement("span", {
+                textContent: "abstraxn",
                 style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
             });
             brandContainer.appendChild(brandText);
@@ -2307,54 +2334,57 @@ export class OnboardingUIWeb {
      * Attach event listeners
      */
     attachEventListeners() {
-        if (!this.emailForm || !this.emailInput || !this.otpInput || !this.continueButton) {
+        if (!this.emailForm ||
+            !this.emailInput ||
+            !this.otpInput ||
+            !this.continueButton) {
             return;
         }
         // Email input change
-        this.emailInput.addEventListener('input', (e) => {
+        this.emailInput.addEventListener("input", (e) => {
             this.email = e.target.value;
             this.updateButtonState();
         });
         // OTP input change
-        this.otpInput.addEventListener('input', (e) => {
+        this.otpInput.addEventListener("input", (e) => {
             this.otp = e.target.value;
         });
         // Form submit
-        this.emailForm.addEventListener('submit', (e) => {
+        this.emailForm.addEventListener("submit", (e) => {
             e.preventDefault();
             this.handleEmailSubmit();
         });
         // Google button click
         if (this.googleButton) {
-            this.googleButton.addEventListener('click', (e) => {
+            this.googleButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 this.handleGoogleLogin();
             });
         }
         // Twitter button click
         if (this.twitterButton) {
-            this.twitterButton.addEventListener('click', (e) => {
+            this.twitterButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 this.handleTwitterLogin();
             });
         }
         // Discord button click
         if (this.discordButton) {
-            this.discordButton.addEventListener('click', (e) => {
+            this.discordButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 this.handleDiscordLogin();
             });
         }
         // Passkey login button click
         if (this.passkeyLoginButton) {
-            this.passkeyLoginButton.addEventListener('click', (e) => {
+            this.passkeyLoginButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 this.handlePasskeyLogin();
             });
         }
         // Passkey signup link click
         if (this.passkeySignupLink) {
-            this.passkeySignupLink.addEventListener('click', (e) => {
+            this.passkeySignupLink.addEventListener("click", (e) => {
                 e.preventDefault();
                 this.handlePasskeySignup();
             });
@@ -2368,12 +2398,12 @@ export class OnboardingUIWeb {
             return;
         // Ensure email is captured from input field
         this.email = this.emailInput.value.trim();
-        if (!this.email || !this.email.includes('@')) {
-            this.setError('Please enter a valid email address');
+        if (!this.email || !this.email.includes("@")) {
+            this.setError("Please enter a valid email address");
             return;
         }
         this.setError(null);
-        this.setLoading(true, 'email');
+        this.setLoading(true, "email");
         try {
             if (!this.otpSent) {
                 // Initiate OTP
@@ -2382,20 +2412,20 @@ export class OnboardingUIWeb {
                 }
                 else if (this.config.emailOtpEndpoint) {
                     const response = await fetch(this.config.emailOtpEndpoint, {
-                        method: 'POST',
+                        method: "POST",
                         headers: {
-                            'Content-Type': 'application/json',
+                            "Content-Type": "application/json",
                         },
                         body: JSON.stringify({ email: this.email }),
                     });
                     if (!response.ok) {
-                        throw new Error('Failed to send OTP');
+                        throw new Error("Failed to send OTP");
                     }
                 }
                 this.otpSent = true;
                 this.showOtpInput();
                 if (this.continueButton) {
-                    this.continueButton.textContent = 'Verify OTP';
+                    this.continueButton.textContent = "Verify OTP";
                 }
             }
             else {
@@ -2406,14 +2436,14 @@ export class OnboardingUIWeb {
                         this.config.onLoginSuccess?.({ token: result.token });
                     }
                     else {
-                        throw new Error('Invalid OTP');
+                        throw new Error("Invalid OTP");
                     }
                 }
                 else if (this.config.emailOtpEndpoint) {
                     const response = await fetch(`${this.config.emailOtpEndpoint}/verify`, {
-                        method: 'POST',
+                        method: "POST",
                         headers: {
-                            'Content-Type': 'application/json',
+                            "Content-Type": "application/json",
                         },
                         body: JSON.stringify({ email: this.email, otp: this.otp }),
                     });
@@ -2422,13 +2452,13 @@ export class OnboardingUIWeb {
                         this.config.onLoginSuccess?.({ token: data.token });
                     }
                     else {
-                        throw new Error(data.message || 'Invalid OTP');
+                        throw new Error(data.message || "Invalid OTP");
                     }
                 }
             }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
             this.setError(errorMessage);
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -2441,14 +2471,14 @@ export class OnboardingUIWeb {
      */
     async handleGoogleLogin() {
         // console.log('🔵 Google login button clicked');
-        // console.log('🔵 Config:', { 
-        //   hasOnGoogleLogin: !!this.config.onGoogleLogin, 
-        //   googleAuthEndpoint: this.config.googleAuthEndpoint 
+        // console.log('🔵 Config:', {
+        //   hasOnGoogleLogin: !!this.config.onGoogleLogin,
+        //   googleAuthEndpoint: this.config.googleAuthEndpoint
         // });
         this.setError(null);
-        this.setLoading(true, 'google');
+        this.setLoading(true, "google");
         try {
-            localStorage.setItem('abstraxn_login_source', this.config.modal ? 'modal' : 'inline');
+            localStorage.setItem("abstraxn_login_source", this.config.modal ? "modal" : "inline");
             if (this.config.onGoogleLogin) {
                 // console.log('🔄 Calling onGoogleLogin callback');
                 await this.config.onGoogleLogin();
@@ -2458,11 +2488,11 @@ export class OnboardingUIWeb {
                 window.location.href = this.config.googleAuthEndpoint;
             }
             else {
-                throw new Error('Google login endpoint not configured');
+                throw new Error("Google login endpoint not configured");
             }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
             this.setError(errorMessage);
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -2475,7 +2505,7 @@ export class OnboardingUIWeb {
      */
     async handleTwitterLogin() {
         this.setError(null);
-        this.setLoading(true, 'twitter');
+        this.setLoading(true, "twitter");
         try {
             if (this.config.onTwitterLogin) {
                 await this.config.onTwitterLogin();
@@ -2484,11 +2514,11 @@ export class OnboardingUIWeb {
                 window.location.href = this.config.twitterAuthEndpoint;
             }
             else {
-                throw new Error('X (Twitter) login not configured');
+                throw new Error("X (Twitter) login not configured");
             }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
             this.setError(errorMessage);
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -2501,7 +2531,7 @@ export class OnboardingUIWeb {
      */
     async handleDiscordLogin() {
         this.setError(null);
-        this.setLoading(true, 'discord');
+        this.setLoading(true, "discord");
         try {
             if (this.config.onDiscordLogin) {
                 await this.config.onDiscordLogin();
@@ -2510,11 +2540,11 @@ export class OnboardingUIWeb {
                 window.location.href = this.config.discordAuthEndpoint;
             }
             else {
-                throw new Error('Discord login not configured');
+                throw new Error("Discord login not configured");
             }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
             this.setError(errorMessage);
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -2529,46 +2559,51 @@ export class OnboardingUIWeb {
      */
     hideLoginElements() {
         if (this.emailForm) {
-            this.emailForm.style.display = 'none';
+            this.emailForm.style.display = "none";
+        }
+        // Hide the header when showing OTP screen
+        const header = this.rootElement?.querySelector(".onboarding-header");
+        if (header) {
+            header.style.display = "none";
         }
         if (this.divider) {
-            this.divider.style.display = 'none';
+            this.divider.style.display = "none";
         }
         if (this.googleButton) {
-            this.googleButton.style.display = 'none';
+            this.googleButton.style.display = "none";
         }
         if (this.twitterButton) {
-            this.twitterButton.style.display = 'none';
+            this.twitterButton.style.display = "none";
         }
         if (this.discordButton) {
-            this.discordButton.style.display = 'none';
+            this.discordButton.style.display = "none";
         }
         if (this.socialGrid) {
-            this.socialGrid.style.display = 'none';
+            this.socialGrid.style.display = "none";
         }
         if (this.passkeyDivider) {
-            this.passkeyDivider.style.display = 'none';
+            this.passkeyDivider.style.display = "none";
         }
         // Hide passkey buttons on OTP screen
         if (this.passkeyLoginButton) {
-            this.passkeyLoginButton.style.display = 'none';
+            this.passkeyLoginButton.style.display = "none";
         }
         if (this.passkeySignupLink) {
-            this.passkeySignupLink.style.display = 'none';
+            this.passkeySignupLink.style.display = "none";
         }
         if (this.passkeyErrorElement) {
-            this.passkeyErrorElement.style.display = 'none';
+            this.passkeyErrorElement.style.display = "none";
         }
         // Hide external wallets on OTP screen
         if (this.externalWalletContainer) {
-            this.externalWalletContainer.style.display = 'none';
+            this.externalWalletContainer.style.display = "none";
         }
         if (this.externalWalletDivider) {
-            this.externalWalletDivider.style.display = 'none';
+            this.externalWalletDivider.style.display = "none";
         }
         // Hide footer on login card (OTP screen has its own footer)
         if (this.footer) {
-            this.footer.style.display = 'none';
+            this.footer.style.display = "none";
         }
     }
     /**
@@ -2594,97 +2629,115 @@ export class OnboardingUIWeb {
             this.verifyButton = null;
         }
         // Get the card element
-        const card = this.rootElement.querySelector('.onboarding-card');
+        const card = this.rootElement.querySelector(".onboarding-card");
         if (!card)
             return;
         // Add class to card to indicate OTP screen is active (for CSS targeting)
-        card.classList.add('onboarding-otp-active');
+        card.classList.add("onboarding-otp-active");
         // Create OTP verification container
-        this.otpVerificationScreen = this.createElement('div', {
-            className: 'onboarding-otp-verification',
+        this.otpVerificationScreen = this.createElement("div", {
+            className: "onboarding-otp-verification",
+        });
+        // Add Back Button
+        const backButton = this.createElement("button", {
+            type: "button",
+            className: "onboarding-otp-back-button",
+            "aria-label": "Go back to email input",
         });
+        backButton.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5M12 19l-7-7 7-7" />
+      </svg>
+    `;
+        backButton.addEventListener("click", () => {
+            if (!this.loading) {
+                this.resetToLoginForm();
+            }
+        });
+        this.otpVerificationScreen.appendChild(backButton);
         // Email icon container
-        const iconContainer = this.createElement('div', {
-            className: 'onboarding-otp-icon-container',
+        const iconContainer = this.createElement("div", {
+            className: "onboarding-otp-icon-container",
         });
-        const iconInner = this.createElement('div', {
-            className: 'onboarding-otp-icon-inner',
+        const iconInner = this.createElement("div", {
+            className: "onboarding-otp-icon-inner",
         });
         const emailIcon = this.createEmailIconSVG();
         iconInner.appendChild(emailIcon);
         iconContainer.appendChild(iconInner);
         this.otpVerificationScreen.appendChild(iconContainer);
         // Title
-        const title = this.createElement('h1', {
-            className: 'onboarding-otp-title',
-            textContent: 'Enter verification code',
+        const title = this.createElement("h1", {
+            className: "onboarding-otp-title",
+            textContent: "Enter verification code",
         });
         this.otpVerificationScreen.appendChild(title);
         // Instruction text
-        const instruction = this.createElement('p', {
-            className: 'onboarding-otp-instruction',
-            textContent: 'We sent a verification code to',
+        const instruction = this.createElement("p", {
+            className: "onboarding-otp-instruction",
+            textContent: "We sent a verification code to",
         });
         this.otpVerificationScreen.appendChild(instruction);
         // Email address
-        const emailDisplay = this.createElement('p', {
-            className: 'onboarding-otp-email',
+        const emailDisplay = this.createElement("p", {
+            className: "onboarding-otp-email",
             textContent: this.email,
         });
         this.otpVerificationScreen.appendChild(emailDisplay);
         // OTP inputs container
-        const inputsContainer = this.createElement('div', {
-            className: 'onboarding-otp-inputs-container',
+        const inputsContainer = this.createElement("div", {
+            className: "onboarding-otp-inputs-container",
         });
         // Create 6 input fields
         this.otpInputs = [];
         for (let i = 0; i < 6; i++) {
-            const input = this.createElement('input', {
-                type: 'text',
-                className: 'onboarding-otp-input',
+            const input = this.createElement("input", {
+                type: "text",
+                className: "onboarding-otp-input",
                 maxLength: 1,
-                inputMode: 'numeric',
-                pattern: '[0-9]*',
+                inputMode: "numeric",
+                pattern: "[0-9]*",
             });
             // Add event listeners for auto-advance
-            input.addEventListener('input', (e) => this.handleOtpInput(e, i));
-            input.addEventListener('keydown', (e) => this.handleOtpKeydown(e, i));
-            input.addEventListener('paste', (e) => this.handleOtpPaste(e));
+            input.addEventListener("input", (e) => this.handleOtpInput(e, i));
+            input.addEventListener("keydown", (e) => this.handleOtpKeydown(e, i));
+            input.addEventListener("paste", (e) => this.handleOtpPaste(e));
             this.otpInputs.push(input);
             inputsContainer.appendChild(input);
         }
         this.otpVerificationScreen.appendChild(inputsContainer);
         // Error element (for OTP screen)
-        const otpErrorElement = this.createElement('div', {
-            className: 'onboarding-error',
-            style: 'display: none;',
+        const otpErrorElement = this.createElement("div", {
+            className: "onboarding-error",
+            style: "display: none;",
         });
         this.otpVerificationScreen.appendChild(otpErrorElement);
         // Store reference for OTP screen errors
         this.otpVerificationScreen.errorElement = otpErrorElement;
         // Verify button
-        this.verifyButton = this.createElement('button', {
-            type: 'button',
-            className: 'onboarding-button onboarding-button-primary',
-            textContent: 'Verify',
+        this.verifyButton = this.createElement("button", {
+            type: "button",
+            className: "onboarding-button onboarding-button-primary",
+            textContent: "Verify",
         });
-        this.verifyButton.addEventListener('click', () => this.handleOtpVerify());
+        this.verifyButton.addEventListener("click", () => this.handleOtpVerify());
         this.otpVerificationScreen.appendChild(this.verifyButton);
         // Resend section
-        const resendSection = this.createElement('div', {
-            className: 'onboarding-otp-resend',
+        const resendSection = this.createElement("div", {
+            className: "onboarding-otp-resend",
         });
-        const resendText = this.createElement('p', {
-            className: 'onboarding-otp-resend-text',
+        const resendText = this.createElement("p", {
+            className: "onboarding-otp-resend-text",
         });
-        resendText.innerHTML = 'Didn\'t receive the email? <span class="onboarding-otp-resend-link" id="otp-resend-link">Resend</span>';
+        resendText.innerHTML =
+            'Didn\'t receive the email? <span class="onboarding-otp-resend-link" id="otp-resend-link">Resend</span>';
         resendSection.appendChild(resendText);
         this.otpVerificationScreen.appendChild(resendSection);
         // Add resend click handler
-        const resendLink = resendSection.querySelector('#otp-resend-link');
+        const resendLink = resendSection.querySelector("#otp-resend-link");
         if (resendLink) {
             this.resendButton = resendLink;
-            resendLink.addEventListener('click', (e) => {
+            resendLink.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 // Prevent click if cooldown is active
@@ -2697,27 +2750,32 @@ export class OnboardingUIWeb {
         // Footer (add to OTP screen as well)
         if (this.config.showFooter) {
             const textColor = this.config.colors?.text ||
-                (this.config.theme === 'dark' ? '#9ca3af' : '#6b7280');
+                (this.config.theme === "dark" ? "#9ca3af" : "#6b7280");
             const brandColor = this.config.colors?.text ||
-                (this.config.theme === 'dark' ? '#e5e7eb' : '#374151');
-            const otpFooter = this.createElement('div', { className: 'onboarding-footer' });
-            const otpFooterText = this.createElement('p', {
-                className: 'onboarding-footer-text',
+                (this.config.theme === "dark" ? "#e5e7eb" : "#374151");
+            const otpFooter = this.createElement("div", {
+                className: "onboarding-footer",
+            });
+            const otpFooterText = this.createElement("p", {
+                className: "onboarding-footer-text",
                 style: `color: ${textColor}; display: flex; align-items: center; gap: 6px; justify-content: center;`,
             });
             // "Powered by" text
-            const poweredBySpan = this.createElement('span', { textContent: 'Powered by', style: `color: ${textColor};` });
+            const poweredBySpan = this.createElement("span", {
+                textContent: "Powered by",
+                style: `color: ${textColor};`,
+            });
             otpFooterText.appendChild(poweredBySpan);
             // Inline brand with logo (clickable link)
-            const brandContainer = this.createElement('a', {
-                href: 'https://www.abstraxn.com/',
-                target: '_blank',
-                rel: 'noopener noreferrer',
-                style: 'display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;',
-                'aria-label': 'Visit Abstraxn website',
+            const brandContainer = this.createElement("a", {
+                href: "https://www.abstraxn.com/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: "display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;",
+                "aria-label": "Visit Abstraxn website",
             });
             // Abstraxn logo SVG
-            const logoSvg = this.createElement('span', {
+            const logoSvg = this.createElement("span", {
                 innerHTML: `
           <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">
             <path d="M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z" fill="url(#paint0_linear_1242_781_otp)"/>
@@ -2736,11 +2794,11 @@ export class OnboardingUIWeb {
             </defs>
           </svg>
         `,
-                style: 'display: inline-flex; align-items: center;',
+                style: "display: inline-flex; align-items: center;",
             });
             brandContainer.appendChild(logoSvg);
-            const brandText = this.createElement('span', {
-                textContent: 'abstraxn',
+            const brandText = this.createElement("span", {
+                textContent: "abstraxn",
                 style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
             });
             brandContainer.appendChild(brandText);
@@ -2755,7 +2813,8 @@ export class OnboardingUIWeb {
         this.hideLoginElements();
         // Also ensure they stay hidden after DOM updates
         setTimeout(() => {
-            if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+            if (this.otpVerificationScreen &&
+                this.otpVerificationScreen.parentElement) {
                 this.hideLoginElements();
             }
         }, 0);
@@ -2765,7 +2824,8 @@ export class OnboardingUIWeb {
                 this.otpInputs[0].focus();
             }
             // Final check to ensure social buttons are hidden
-            if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+            if (this.otpVerificationScreen &&
+                this.otpVerificationScreen.parentElement) {
                 this.hideLoginElements();
             }
         }, 100);
@@ -2776,20 +2836,15 @@ export class OnboardingUIWeb {
      * Create email icon SVG
      */
     createEmailIconSVG() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-otp-icon');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('stroke', 'currentColor');
-        svg.setAttribute('stroke-width', '2');
-        svg.setAttribute('stroke-linecap', 'round');
-        svg.setAttribute('stroke-linejoin', 'round');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-otp-icon");
+        svg.setAttribute("viewBox", "0 0 17 17");
+        svg.setAttribute("fill", "currentColor");
+        svg.setAttribute("width", "28");
+        svg.setAttribute("height", "28");
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M0 2v13h17v-13h-17zM8.494 9.817l-6.896-6.817h13.82l-6.924 6.817zM5.755 8.516l-4.755 4.682v-9.383l4.755 4.701zM6.466 9.219l2.026 2.003 1.996-1.966 4.8 4.744h-13.677l4.855-4.781zM11.201 8.555l4.799-4.725v9.467l-4.799-4.742z");
         svg.appendChild(path);
-        const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
-        polyline.setAttribute('points', '22,6 12,13 2,6');
-        svg.appendChild(polyline);
         return svg;
     }
     /**
@@ -2797,7 +2852,7 @@ export class OnboardingUIWeb {
      */
     handleOtpInput(e, index) {
         const input = e.target;
-        const value = input.value.replace(/[^0-9]/g, '');
+        const value = input.value.replace(/[^0-9]/g, "");
         if (value) {
             input.value = value;
             // Move to next input if available
@@ -2811,7 +2866,7 @@ export class OnboardingUIWeb {
             }
         }
         else {
-            input.value = '';
+            input.value = "";
         }
         this.updateOtpValue();
         // Auto-submit when 6 digits are entered (only if auto-submit is enabled)
@@ -2827,7 +2882,7 @@ export class OnboardingUIWeb {
      */
     handleOtpKeydown(e, index) {
         const input = e.target;
-        if (e.key === 'Backspace' && !input.value && index > 0) {
+        if (e.key === "Backspace" && !input.value && index > 0) {
             this.otpInputs[index - 1].focus();
         }
     }
@@ -2836,11 +2891,11 @@ export class OnboardingUIWeb {
      */
     handleOtpPaste(e) {
         e.preventDefault();
-        const pastedData = e.clipboardData?.getData('text') || '';
-        const digits = pastedData.replace(/[^0-9]/g, '').slice(0, 6);
+        const pastedData = e.clipboardData?.getData("text") || "";
+        const digits = pastedData.replace(/[^0-9]/g, "").slice(0, 6);
         for (let i = 0; i < 6; i++) {
             if (this.otpInputs[i]) {
-                this.otpInputs[i].value = digits[i] || '';
+                this.otpInputs[i].value = digits[i] || "";
             }
         }
         // Focus the last filled input or the last input
@@ -2861,7 +2916,7 @@ export class OnboardingUIWeb {
      * Update OTP value from input fields
      */
     updateOtpValue() {
-        this.otp = this.otpInputs.map(input => input.value).join('');
+        this.otp = this.otpInputs.map((input) => input.value).join("");
     }
     /**
      * Handle OTP verification
@@ -2869,14 +2924,14 @@ export class OnboardingUIWeb {
     async handleOtpVerify() {
         this.updateOtpValue();
         if (this.otp.length !== 6) {
-            this.setError('Please enter the complete 6-digit code');
+            this.setError("Please enter the complete 6-digit code");
             return;
         }
         // Disable inputs during verification
-        this.otpInputs.forEach(input => {
+        this.otpInputs.forEach((input) => {
             input.disabled = true;
         });
-        this.setLoading(true, 'email');
+        this.setLoading(true, "email");
         this.setError(null);
         try {
             if (this.config.onEmailOtpVerify) {
@@ -2886,15 +2941,15 @@ export class OnboardingUIWeb {
                 }
                 else {
                     // Use the error message from the API response, fallback to generic message only if not provided
-                    const errorMessage = result.error || 'Invalid verification code';
+                    const errorMessage = result.error || "Invalid verification code";
                     throw new Error(errorMessage);
                 }
             }
             else if (this.config.emailOtpEndpoint) {
                 const response = await fetch(`${this.config.emailOtpEndpoint}/verify`, {
-                    method: 'POST',
+                    method: "POST",
                     headers: {
-                        'Content-Type': 'application/json',
+                        "Content-Type": "application/json",
                     },
                     body: JSON.stringify({ email: this.email, otp: this.otp }),
                 });
@@ -2904,13 +2959,13 @@ export class OnboardingUIWeb {
                 }
                 else {
                     // Use the error message from the API response, fallback to generic message only if not provided
-                    const errorMessage = data.message || data.error || 'Invalid verification code';
+                    const errorMessage = data.message || data.error || "Invalid verification code";
                     throw new Error(errorMessage);
                 }
             }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
             this.setError(errorMessage);
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
             // Disable auto-submit after failed attempt
@@ -2922,23 +2977,25 @@ export class OnboardingUIWeb {
                 this.hideLoginElements();
                 // Also use setTimeout to ensure they stay hidden after any potential re-renders
                 setTimeout(() => {
-                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
                         this.hideLoginElements();
                     }
                 }, 0);
                 // Additional check after a short delay to catch any late re-renders
                 setTimeout(() => {
-                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
                         this.hideLoginElements();
                     }
                 }, 100);
             }
             // Clear OTP inputs on error
-            this.otpInputs.forEach(input => {
-                input.value = '';
+            this.otpInputs.forEach((input) => {
+                input.value = "";
                 input.disabled = false;
             });
-            this.otp = '';
+            this.otp = "";
             if (this.otpInputs[0]) {
                 this.otpInputs[0].focus();
             }
@@ -2957,29 +3014,29 @@ export class OnboardingUIWeb {
         // Re-enable auto-submit when resending OTP
         this.autoSubmitEnabled = true;
         this.setError(null);
-        this.setLoading(true, 'email');
+        this.setLoading(true, "email");
         try {
             if (this.config.onEmailOtpInitiate) {
                 await this.config.onEmailOtpInitiate(this.email);
             }
             else if (this.config.emailOtpEndpoint) {
                 const response = await fetch(this.config.emailOtpEndpoint, {
-                    method: 'POST',
+                    method: "POST",
                     headers: {
-                        'Content-Type': 'application/json',
+                        "Content-Type": "application/json",
                     },
                     body: JSON.stringify({ email: this.email }),
                 });
                 if (!response.ok) {
-                    throw new Error('Failed to resend OTP');
+                    throw new Error("Failed to resend OTP");
                 }
             }
             // Clear OTP inputs
-            this.otpInputs.forEach(input => {
-                input.value = '';
+            this.otpInputs.forEach((input) => {
+                input.value = "";
                 input.disabled = false;
             });
-            this.otp = '';
+            this.otp = "";
             if (this.otpInputs[0]) {
                 this.otpInputs[0].focus();
             }
@@ -2987,7 +3044,7 @@ export class OnboardingUIWeb {
             this.startResendCooldown();
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to resend OTP';
+            const errorMessage = err instanceof Error ? err.message : "Failed to resend OTP";
             this.setError(errorMessage);
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -3007,10 +3064,10 @@ export class OnboardingUIWeb {
         // Update UI immediately
         if (this.resendButton) {
             this.resendButton.textContent = `Resend (${this.resendCooldown}s)`;
-            this.resendButton.classList.add('onboarding-otp-resend-link-disabled');
-            this.resendButton.style.pointerEvents = 'none';
-            this.resendButton.style.cursor = 'not-allowed';
-            this.resendButton.style.opacity = '0.6';
+            this.resendButton.classList.add("onboarding-otp-resend-link-disabled");
+            this.resendButton.style.pointerEvents = "none";
+            this.resendButton.style.cursor = "not-allowed";
+            this.resendButton.style.opacity = "0.6";
         }
         // Start countdown timer
         this.resendCooldownTimer = setInterval(() => {
@@ -3027,11 +3084,11 @@ export class OnboardingUIWeb {
                     this.resendCooldownTimer = null;
                 }
                 if (this.resendButton) {
-                    this.resendButton.textContent = 'Resend';
-                    this.resendButton.classList.remove('onboarding-otp-resend-link-disabled');
-                    this.resendButton.style.pointerEvents = 'auto';
-                    this.resendButton.style.cursor = 'pointer';
-                    this.resendButton.style.opacity = '1';
+                    this.resendButton.textContent = "Resend";
+                    this.resendButton.classList.remove("onboarding-otp-resend-link-disabled");
+                    this.resendButton.style.pointerEvents = "auto";
+                    this.resendButton.style.cursor = "pointer";
+                    this.resendButton.style.opacity = "1";
                 }
             }
         }, 1000);
@@ -3040,32 +3097,42 @@ export class OnboardingUIWeb {
      * Set error message
      */
     setError(message) {
+        const formatMessage = (msg) => {
+            if (msg.startsWith("{") && msg.endsWith("}")) {
+                return msg;
+            }
+            return `{ ${msg} }`;
+        };
         // Show error in OTP screen if it exists
         if (this.otpVerificationScreen) {
-            const otpErrorElement = this.otpVerificationScreen.errorElement;
+            const otpErrorElement = this.otpVerificationScreen
+                .errorElement;
             if (otpErrorElement) {
                 if (message) {
-                    otpErrorElement.textContent = message;
-                    otpErrorElement.style.display = 'block';
+                    otpErrorElement.textContent = formatMessage(message);
+                    otpErrorElement.style.display = "block";
                 }
                 else {
-                    otpErrorElement.style.display = 'none';
+                    otpErrorElement.style.display = "none";
                 }
                 // Ensure social buttons remain hidden when showing error on OTP screen
                 // Call immediately and also with delays to catch any re-renders
                 this.hideLoginElements();
                 setTimeout(() => {
-                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
                         this.hideLoginElements();
                     }
                 }, 0);
                 setTimeout(() => {
-                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
                         this.hideLoginElements();
                     }
                 }, 50);
                 setTimeout(() => {
-                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
                         this.hideLoginElements();
                     }
                 }, 150);
@@ -3076,11 +3143,11 @@ export class OnboardingUIWeb {
         if (!this.errorElement)
             return;
         if (message) {
-            this.errorElement.textContent = message;
-            this.errorElement.style.display = 'block';
+            this.errorElement.textContent = formatMessage(message);
+            this.errorElement.style.display = "block";
         }
         else {
-            this.errorElement.style.display = 'none';
+            this.errorElement.style.display = "none";
         }
     }
     /**
@@ -3099,11 +3166,15 @@ export class OnboardingUIWeb {
         if (this.continueButton) {
             this.continueButton.disabled = loading || !this.email;
             // Show loading text only if this is the active button
-            if (loading && this.activeButton === 'email') {
-                this.continueButton.textContent = this.otpSent ? 'Verifying...' : 'Loading...';
+            if (loading && this.activeButton === "email") {
+                this.continueButton.textContent = this.otpSent
+                    ? "Verifying..."
+                    : "Loading...";
             }
             else if (!loading) {
-                this.continueButton.textContent = this.otpSent ? 'Verify OTP' : 'Continue';
+                this.continueButton.textContent = this.otpSent
+                    ? "Verify OTP"
+                    : "Continue";
             }
         }
         // Email arrow button (when all auth methods are enabled)
@@ -3127,23 +3198,23 @@ export class OnboardingUIWeb {
         if (this.passkeyLoginButton) {
             this.passkeyLoginButton.disabled = loading;
             // Show loading text only if this is the active button
-            if (loading && this.activeButton === 'passkey') {
+            if (loading && this.activeButton === "passkey") {
                 // Update only the text node, preserve the icon
-                const textNodes = Array.from(this.passkeyLoginButton.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
+                const textNodes = Array.from(this.passkeyLoginButton.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
                 if (textNodes.length > 0) {
-                    textNodes[0].textContent = ' Authenticating...';
+                    textNodes[0].textContent = " Authenticating...";
                 }
                 else {
                     // If no text node exists, append one (icon should already be there)
-                    this.passkeyLoginButton.appendChild(document.createTextNode(' Authenticating...'));
+                    this.passkeyLoginButton.appendChild(document.createTextNode(" Authenticating..."));
                 }
-                this.passkeyLoginButton.style.opacity = '0.7';
-                this.passkeyLoginButton.style.cursor = 'not-allowed';
+                this.passkeyLoginButton.style.opacity = "0.7";
+                this.passkeyLoginButton.style.cursor = "not-allowed";
             }
             else if (!loading) {
                 // Update only the text node, preserve the icon
-                const textNodes = Array.from(this.passkeyLoginButton.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
-                const passkeyText = ` ${this.config.labels?.passkeyLoginButton || 'Log in with passkey'}`;
+                const textNodes = Array.from(this.passkeyLoginButton.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
+                const passkeyText = ` ${this.config.labels?.passkeyLoginButton || "Log in with passkey"}`;
                 if (textNodes.length > 0) {
                     textNodes[0].textContent = passkeyText;
                 }
@@ -3151,21 +3222,21 @@ export class OnboardingUIWeb {
                     // If no text node exists, append one (icon should already be there)
                     this.passkeyLoginButton.appendChild(document.createTextNode(passkeyText));
                 }
-                this.passkeyLoginButton.style.opacity = '1';
-                this.passkeyLoginButton.style.cursor = 'pointer';
+                this.passkeyLoginButton.style.opacity = "1";
+                this.passkeyLoginButton.style.cursor = "pointer";
             }
         }
         // Passkey signup link
         if (this.passkeySignupLink) {
             if (loading) {
-                this.passkeySignupLink.style.opacity = '0.5';
-                this.passkeySignupLink.style.pointerEvents = 'none';
-                this.passkeySignupLink.style.cursor = 'not-allowed';
+                this.passkeySignupLink.style.opacity = "0.5";
+                this.passkeySignupLink.style.pointerEvents = "none";
+                this.passkeySignupLink.style.cursor = "not-allowed";
             }
             else {
-                this.passkeySignupLink.style.opacity = '1';
-                this.passkeySignupLink.style.pointerEvents = 'auto';
-                this.passkeySignupLink.style.cursor = 'pointer';
+                this.passkeySignupLink.style.opacity = "1";
+                this.passkeySignupLink.style.pointerEvents = "auto";
+                this.passkeySignupLink.style.cursor = "pointer";
             }
         }
         // Email input
@@ -3180,14 +3251,14 @@ export class OnboardingUIWeb {
         if (this.verifyButton) {
             this.verifyButton.disabled = loading;
             if (loading) {
-                this.verifyButton.textContent = 'Verifying...';
-                this.verifyButton.style.opacity = '0.7';
-                this.verifyButton.style.cursor = 'not-allowed';
+                this.verifyButton.textContent = "Verifying...";
+                this.verifyButton.style.opacity = "0.7";
+                this.verifyButton.style.cursor = "not-allowed";
             }
             else {
-                this.verifyButton.textContent = 'Verify';
-                this.verifyButton.style.opacity = '1';
-                this.verifyButton.style.cursor = 'pointer';
+                this.verifyButton.textContent = "Verify";
+                this.verifyButton.style.opacity = "1";
+                this.verifyButton.style.cursor = "pointer";
             }
         }
     }
@@ -3195,12 +3266,13 @@ export class OnboardingUIWeb {
      * Update button state
      */
     updateButtonState() {
+        const isValid = isValidEmail(this.email.trim());
         if (this.continueButton) {
-            this.continueButton.disabled = this.loading || !this.email;
+            this.continueButton.disabled = this.loading || !isValid;
         }
         // Update arrow button state (when all auth methods are enabled)
         if (this.emailArrowButton) {
-            this.emailArrowButton.disabled = this.loading || !this.email;
+            this.emailArrowButton.disabled = this.loading || !isValid;
         }
     }
     /**
@@ -3217,7 +3289,7 @@ export class OnboardingUIWeb {
      */
     setVisible(visible) {
         if (this.rootElement) {
-            this.rootElement.style.display = visible ? '' : 'none';
+            this.rootElement.style.display = visible ? "" : "none";
         }
     }
     /**
@@ -3236,26 +3308,26 @@ export class OnboardingUIWeb {
             this.otpVerificationScreen = null;
         }
         // Remove loading/error mode classes and OTP active class
-        const card = this.rootElement?.querySelector('.onboarding-card');
+        const card = this.rootElement?.querySelector(".onboarding-card");
         if (card) {
-            card.classList.remove('onboarding-mode-loading');
-            card.classList.remove('onboarding-mode-error');
-            card.classList.remove('onboarding-otp-active');
+            card.classList.remove("onboarding-mode-loading");
+            card.classList.remove("onboarding-mode-error");
+            card.classList.remove("onboarding-otp-active");
         }
         // Hide loading modal if exists (for inline components)
         this.hideLoadingModal();
         // Remove error container if exists
-        const errorContainer = this.rootElement?.querySelector('.onboarding-error-container');
+        const errorContainer = this.rootElement?.querySelector(".onboarding-error-container");
         if (errorContainer) {
             errorContainer.remove();
         }
         // Clear OTP inputs
-        this.otpInputs.forEach(input => {
-            input.value = '';
+        this.otpInputs.forEach((input) => {
+            input.value = "";
             input.disabled = false;
         });
         this.otpInputs = [];
-        this.otp = '';
+        this.otp = "";
         this.otpSent = false;
         this.loading = false;
         // Clear timer
@@ -3266,88 +3338,105 @@ export class OnboardingUIWeb {
         }
         this.resendCooldown = 0;
         if (this.resendButton) {
-            this.resendButton.textContent = 'Resend';
-            this.resendButton.classList.remove('onboarding-otp-resend-link-disabled');
-            this.resendButton.style.pointerEvents = 'auto';
-            this.resendButton.style.cursor = 'pointer';
-            this.resendButton.style.opacity = '1';
+            this.resendButton.textContent = "Resend";
+            this.resendButton.classList.remove("onboarding-otp-resend-link-disabled");
+            this.resendButton.style.pointerEvents = "auto";
+            this.resendButton.style.cursor = "pointer";
+            this.resendButton.style.opacity = "1";
         }
         // Get auth methods
-        const authMethods = this.config.authMethods || ['otp', 'google'];
-        const showEmail = authMethods.includes('otp');
-        const showGoogle = authMethods.includes('google');
-        const showTwitter = authMethods.includes('twitter');
-        const showDiscord = authMethods.includes('discord');
-        const showPasskey = authMethods.includes('passkey');
+        const authMethods = this.config.authMethods || ["otp", "google"];
+        const showEmail = authMethods.includes("otp");
+        const showGoogle = authMethods.includes("google");
+        const showTwitter = authMethods.includes("twitter");
+        const showDiscord = authMethods.includes("discord");
+        const showPasskey = authMethods.includes("passkey");
         const socialMethods = [
-            { key: 'google', show: showGoogle },
-            { key: 'twitter', show: showTwitter },
-            { key: 'discord', show: showDiscord },
+            { key: "google", show: showGoogle },
+            { key: "twitter", show: showTwitter },
+            { key: "discord", show: showDiscord },
         ].filter((m) => m.show);
         // Show the email form and all login-related elements
         if (this.emailForm) {
-            this.emailForm.style.display = showEmail ? '' : 'none';
+            this.emailForm.style.display = showEmail ? "" : "none";
+        }
+        // Show the header again when returning to login form
+        const header = this.rootElement?.querySelector(".onboarding-header");
+        if (header) {
+            header.style.display = "";
         }
         if (this.divider) {
-            this.divider.style.display = (showEmail && socialMethods.length > 0) ? '' : 'none';
+            this.divider.style.display =
+                showEmail && socialMethods.length > 0 ? "" : "none";
         }
         if (this.passkeyDivider) {
-            this.passkeyDivider.style.display = (showPasskey && (showEmail || socialMethods.length > 0)) ? '' : 'none';
+            this.passkeyDivider.style.display =
+                showPasskey && (showEmail || socialMethods.length > 0) ? "" : "none";
         }
         if (this.googleButton) {
-            this.googleButton.style.display = showGoogle ? '' : 'none';
+            this.googleButton.style.display = showGoogle ? "" : "none";
             this.googleButton.disabled = false;
         }
         if (this.twitterButton) {
-            this.twitterButton.style.display = showTwitter ? '' : 'none';
+            this.twitterButton.style.display = showTwitter ? "" : "none";
             this.twitterButton.disabled = false;
         }
         if (this.discordButton) {
-            this.discordButton.style.display = showDiscord ? '' : 'none';
+            this.discordButton.style.display = showDiscord ? "" : "none";
             this.discordButton.disabled = false;
         }
         if (this.socialGrid) {
-            this.socialGrid.style.display = socialMethods.length > 1 ? '' : 'none';
+            this.socialGrid.style.display = socialMethods.length > 1 ? "" : "none";
         }
         // Show passkey buttons again when returning to login form
         if (this.passkeyLoginButton) {
-            this.passkeyLoginButton.style.display = showPasskey ? '' : 'none';
+            this.passkeyLoginButton.style.display = showPasskey ? "" : "none";
         }
         if (this.passkeySignupLink) {
-            this.passkeySignupLink.style.display = showPasskey ? '' : 'none';
+            this.passkeySignupLink.style.display = showPasskey ? "" : "none";
         }
         if (this.passkeyErrorElement) {
-            this.passkeyErrorElement.style.display = 'none'; // Hide error when resetting
+            this.passkeyErrorElement.style.display = "none"; // Hide error when resetting
         }
         // Show external wallets again when returning to login form
-        // Note: The visibility will be managed by AbstraxnProvider, but we ensure they're available
-        // AbstraxnProvider will handle showing them if external wallets are enabled
+        if (this.externalWalletsEnabled) {
+            if (this.externalWalletContainer) {
+                this.externalWalletContainer.style.display = "";
+            }
+            if (this.externalWalletDivider) {
+                // Show divider only if we have email or social methods
+                const hasEmailOrSocial = showEmail || socialMethods.length > 0;
+                this.externalWalletDivider.style.display = hasEmailOrSocial
+                    ? ""
+                    : "none";
+            }
+        }
         if (this.footer) {
-            this.footer.style.display = '';
+            this.footer.style.display = "";
         }
         // Clear error messages
         this.setError(null);
         if (this.errorElement) {
-            this.errorElement.style.display = 'none';
+            this.errorElement.style.display = "none";
         }
         // Reset email input - enable it and clear value
         if (this.emailInput) {
-            this.emailInput.value = '';
+            this.emailInput.value = "";
             this.emailInput.disabled = false;
-            this.email = '';
+            this.email = "";
         }
         // Reset OTP group (hidden input)
         if (this.otpGroup) {
-            this.otpGroup.style.display = 'none';
+            this.otpGroup.style.display = "none";
             if (this.otpInput) {
-                this.otpInput.value = '';
+                this.otpInput.value = "";
                 this.otpInput.disabled = false;
             }
         }
         // Reset button state - ensure it shows "Continue" and is properly enabled/disabled
         if (this.continueButton) {
-            this.continueButton.disabled = !this.email; // Disabled only if no email
-            this.continueButton.textContent = this.config.labels?.emailButton || 'Continue';
+            this.continueButton.textContent =
+                this.config.labels?.emailButton || "Continue";
         }
         // Update button state to ensure everything is in sync
         this.updateButtonState();
@@ -3358,13 +3447,13 @@ export class OnboardingUIWeb {
     close() {
         // Clear URL params to prevent showing error again on refresh
         const url = new URL(window.location.href);
-        url.searchParams.delete('error');
-        url.searchParams.delete('success');
+        url.searchParams.delete("error");
+        url.searchParams.delete("success");
         window.history.replaceState({}, document.title, url.toString());
         if (this.modalOverlay) {
             // Add closing animation
-            this.modalOverlay.classList.remove('onboarding-modal-open');
-            this.modalOverlay.classList.add('onboarding-modal-closing');
+            this.modalOverlay.classList.remove("onboarding-modal-open");
+            this.modalOverlay.classList.add("onboarding-modal-closing");
             // Remove after animation
             setTimeout(() => {
                 this.destroy();
@@ -3374,7 +3463,7 @@ export class OnboardingUIWeb {
             this.destroy();
         }
         // Restore body scroll
-        document.body.style.overflow = '';
+        document.body.style.overflow = "";
         // Call onClose callback
         if (this.config.onClose) {
             this.config.onClose();
@@ -3395,7 +3484,7 @@ export class OnboardingUIWeb {
             this.rootElement.parentNode.removeChild(this.rootElement);
         }
         // Restore body scroll
-        document.body.style.overflow = '';
+        document.body.style.overflow = "";
         // Clear references
         this.rootElement = null;
         this.modalOverlay = null;
@@ -3407,7 +3496,6 @@ export class OnboardingUIWeb {
         this.googleButton = null;
         this.errorElement = null;
         this.otpGroup = null;
-        this.closeButton = null;
         this.otpVerificationScreen = null; // Clear OTP screen reference
         this.externalWalletContainer = null; // Clear external wallet container reference
         this.externalWalletDivider = null; // Clear external wallet divider reference
@@ -3419,35 +3507,40 @@ export class OnboardingUIWeb {
         const element = document.createElement(tag);
         Object.keys(options).forEach((key) => {
             const value = options[key];
-            if (key === 'className' && typeof value === 'string') {
+            if (key === "className" && typeof value === "string") {
                 element.className = value;
             }
-            else if (key === 'textContent' && (typeof value === 'string' || value === null)) {
+            else if (key === "textContent" &&
+                (typeof value === "string" || value === null)) {
                 element.textContent = value;
             }
-            else if (key === 'innerHTML' && typeof value === 'string') {
+            else if (key === "innerHTML" && typeof value === "string") {
                 element.innerHTML = value;
             }
-            else if (key === 'style' && typeof value === 'string') {
-                element.setAttribute('style', value);
+            else if (key === "style" && typeof value === "string") {
+                element.setAttribute("style", value);
             }
-            else if (key === 'htmlFor' && typeof value === 'string') {
+            else if (key === "htmlFor" && typeof value === "string") {
                 // Use setAttribute for htmlFor to ensure it works correctly
-                element.setAttribute('for', value);
+                element.setAttribute("for", value);
             }
-            else if (key.startsWith('aria-') || key === 'role' || key === 'tabIndex' || key === 'autocomplete' || key === 'noValidate') {
+            else if (key.startsWith("aria-") ||
+                key === "role" ||
+                key === "tabIndex" ||
+                key === "autocomplete" ||
+                key === "noValidate") {
                 // Handle ARIA attributes and other special attributes
-                if (key === 'tabIndex') {
+                if (key === "tabIndex") {
                     element.tabIndex = value;
                 }
-                else if (key === 'noValidate') {
+                else if (key === "noValidate") {
                     element.noValidate = value;
                 }
                 else {
                     element.setAttribute(key, String(value));
                 }
             }
-            else if (key !== 'style' && value !== undefined) {
+            else if (key !== "style" && value !== undefined) {
                 element[key] = value;
             }
         });
@@ -3458,34 +3551,29 @@ export class OnboardingUIWeb {
      */
     parseStyle(style) {
         if (!style)
-            return '';
-        if (typeof style === 'string')
+            return "";
+        if (typeof style === "string")
             return style;
         return Object.entries(style)
             .filter(([_, value]) => value !== undefined && value !== null)
             .map(([key, value]) => {
-            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
             return `${cssKey}: ${value}`;
         })
-            .join('; ');
+            .join("; ");
     }
     /**
      * Create email icon SVG
      */
     createEmailIcon() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-input-icon');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('viewBox', '0 0 20 20');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M2.5 6.66667L10 11.6667L17.5 6.66667M3.33333 15H16.6667C17.5871 15 18.3333 14.2538 18.3333 13.3333V6.66667C18.3333 5.74619 17.5871 5 16.6667 5H3.33333C2.41286 5 1.66667 5.74619 1.66667 6.66667V13.3333C1.66667 14.2538 2.41286 15 3.33333 15Z');
-        path.setAttribute('stroke', 'currentColor');
-        path.setAttribute('stroke-width', '1.5');
-        path.setAttribute('stroke-linecap', 'round');
-        path.setAttribute('stroke-linejoin', 'round');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-input-icon");
+        svg.setAttribute("width", "18");
+        svg.setAttribute("height", "18");
+        svg.setAttribute("viewBox", "0 0 17 17");
+        svg.setAttribute("fill", "currentColor");
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M0 2v13h17v-13h-17zM8.494 9.817l-6.896-6.817h13.82l-6.924 6.817zM5.755 8.516l-4.755 4.682v-9.383l4.755 4.701zM6.466 9.219l2.026 2.003 1.996-1.966 4.8 4.744h-13.677l4.855-4.781zM11.201 8.555l4.799-4.725v9.467l-4.799-4.742z");
         svg.appendChild(path);
         return svg;
     }
@@ -3493,35 +3581,35 @@ export class OnboardingUIWeb {
      * Create Google icon SVG
      */
     createGoogleIcon() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-google-icon');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('viewBox', '0 0 20 20');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-google-icon");
+        svg.setAttribute("width", "20");
+        svg.setAttribute("height", "20");
+        svg.setAttribute("viewBox", "0 0 20 20");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
         const paths = [
             {
-                d: 'M18.1712 8.36792H17.5V8.33333H10V11.6667H14.7096C14.2225 13.1071 13.2408 14.2854 12.0125 15.0125L14.9696 17.3458C16.7792 15.6958 17.9167 13.3958 17.9167 10.8333C17.9167 10.275 17.8708 9.72917 17.7833 9.20417L18.1712 8.36792Z',
-                fill: '#4285F4',
+                d: "M18.1712 8.36792H17.5V8.33333H10V11.6667H14.7096C14.2225 13.1071 13.2408 14.2854 12.0125 15.0125L14.9696 17.3458C16.7792 15.6958 17.9167 13.3958 17.9167 10.8333C17.9167 10.275 17.8708 9.72917 17.7833 9.20417L18.1712 8.36792Z",
+                fill: "#4285F4",
             },
             {
-                d: 'M10 18.3333C12.5542 18.3333 14.7208 17.4708 16.3042 16.0125L13.3471 13.6792C12.5042 14.2542 11.4042 14.5833 10 14.5833C7.52083 14.5833 5.39583 12.9042 4.61667 10.6917L1.57083 13.0292C3.13333 16.1 6.32083 18.3333 10 18.3333Z',
-                fill: '#34A853',
+                d: "M10 18.3333C12.5542 18.3333 14.7208 17.4708 16.3042 16.0125L13.3471 13.6792C12.5042 14.2542 11.4042 14.5833 10 14.5833C7.52083 14.5833 5.39583 12.9042 4.61667 10.6917L1.57083 13.0292C3.13333 16.1 6.32083 18.3333 10 18.3333Z",
+                fill: "#34A853",
             },
             {
-                d: 'M4.61667 10.6917C4.39583 10.0708 4.27083 9.40417 4.27083 8.70833C4.27083 8.0125 4.39583 7.34583 4.61667 6.72417L1.57083 4.3875C0.9375 5.66667 0.583336 7.10833 0.583336 8.70833C0.583336 10.3083 0.9375 11.75 1.57083 13.0292L4.61667 10.6917Z',
-                fill: '#FBBC05',
+                d: "M4.61667 10.6917C4.39583 10.0708 4.27083 9.40417 4.27083 8.70833C4.27083 8.0125 4.39583 7.34583 4.61667 6.72417L1.57083 4.3875C0.9375 5.66667 0.583336 7.10833 0.583336 8.70833C0.583336 10.3083 0.9375 11.75 1.57083 13.0292L4.61667 10.6917Z",
+                fill: "#FBBC05",
             },
             {
-                d: 'M10 2.91667C11.5125 2.91667 12.8708 3.47083 13.9292 4.42917L16.375 2C14.7208 0.483333 12.5542 -0.000165871 10 -0.000165871C6.32083 -0.000165871 3.13333 2.23333 1.57083 5.30417L4.61667 7.64167C5.39583 5.42917 7.52083 3.75 10 3.75V2.91667Z',
-                fill: '#EA4335',
+                d: "M10 2.91667C11.5125 2.91667 12.8708 3.47083 13.9292 4.42917L16.375 2C14.7208 0.483333 12.5542 -0.000165871 10 -0.000165871C6.32083 -0.000165871 3.13333 2.23333 1.57083 5.30417L4.61667 7.64167C5.39583 5.42917 7.52083 3.75 10 3.75V2.91667Z",
+                fill: "#EA4335",
             },
         ];
         paths.forEach((pathData) => {
-            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            path.setAttribute('d', pathData.d);
-            path.setAttribute('fill', pathData.fill);
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", pathData.d);
+            path.setAttribute("fill", pathData.fill);
             svg.appendChild(path);
         });
         return svg;
@@ -3530,19 +3618,19 @@ export class OnboardingUIWeb {
      * Create right arrow icon SVG
      */
     createArrowIcon() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-input-arrow-icon');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('viewBox', '0 0 20 20');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M7.5 15L12.5 10L7.5 5');
-        path.setAttribute('stroke', 'currentColor');
-        path.setAttribute('stroke-width', '2');
-        path.setAttribute('stroke-linecap', 'round');
-        path.setAttribute('stroke-linejoin', 'round');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-input-arrow-icon");
+        svg.setAttribute("width", "20");
+        svg.setAttribute("height", "20");
+        svg.setAttribute("viewBox", "0 0 20 20");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M7.5 15L12.5 10L7.5 5");
+        path.setAttribute("stroke", "currentColor");
+        path.setAttribute("stroke-width", "2");
+        path.setAttribute("stroke-linecap", "round");
+        path.setAttribute("stroke-linejoin", "round");
         svg.appendChild(path);
         return svg;
     }
@@ -3550,20 +3638,20 @@ export class OnboardingUIWeb {
      * Create passkey icon SVG
      */
     createPasskeyIcon() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-passkey-icon');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svg.setAttribute('aria-hidden', 'true');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-passkey-icon");
+        svg.setAttribute("width", "20");
+        svg.setAttribute("height", "20");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        svg.setAttribute("aria-hidden", "true");
         // Passkey icon (user with key)
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('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');
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("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");
         // Set icon color based on theme: white for dark theme, black for light theme
-        const iconColor = this.config.theme === 'dark' ? '#ffffff' : '#000000';
-        path.setAttribute('fill', iconColor);
+        const iconColor = this.config.theme === "dark" ? "#ffffff" : "#000000";
+        path.setAttribute("fill", iconColor);
         svg.appendChild(path);
         return svg;
     }
@@ -3571,16 +3659,16 @@ export class OnboardingUIWeb {
      * Create X (Twitter) icon SVG
      */
     createTwitterIcon() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-social-icon');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M4 3h4.6l3.09 4.1L14.5 3H20l-5.63 7.08L20.4 21H15.8l-3.5-4.65L8.3 21H2.8l6-7.67L4 3Zm2.04 1.2L9.7 9l.1.12L4.97 19h1.79l4.04-5.39L14.78 19h1.8l-5.02-6.55-.05-.06L17.97 4.2h-1.8l-3.52 4.62L9 4.2H6.04Z');
-        path.setAttribute('fill', 'currentColor');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-social-icon");
+        svg.setAttribute("width", "20");
+        svg.setAttribute("height", "20");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M4 3h4.6l3.09 4.1L14.5 3H20l-5.63 7.08L20.4 21H15.8l-3.5-4.65L8.3 21H2.8l6-7.67L4 3Zm2.04 1.2L9.7 9l.1.12L4.97 19h1.79l4.04-5.39L14.78 19h1.8l-5.02-6.55-.05-.06L17.97 4.2h-1.8l-3.52 4.62L9 4.2H6.04Z");
+        path.setAttribute("fill", "currentColor");
         svg.appendChild(path);
         return svg;
     }
@@ -3588,16 +3676,16 @@ export class OnboardingUIWeb {
      * Create Discord icon SVG
      */
     createDiscordIcon() {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'onboarding-social-icon');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M20.317 4.37a16.75 16.75 0 0 0-4.091-1.272.06.06 0 0 0-.063.03 11.651 11.651 0 0 0-.512 1.054 15.93 15.93 0 0 0-4.813 0 10.69 10.69 0 0 0-.522-1.054.06.06 0 0 0-.063-.03 16.742 16.742 0 0 0-4.092 1.272.055.055 0 0 0-.025.021C2.84 8.167 2.18 11.875 2.46 15.547a.066.066 0 0 0 .025.045 16.86 16.86 0 0 0 4.98 2.52.06.06 0 0 0 .066-.02c.384-.525.726-1.08 1.02-1.66a.06.06 0 0 0-.033-.083 11.117 11.117 0 0 1-1.593-.765.06.06 0 0 1-.006-.1c.107-.08.214-.162.316-.245a.06.06 0 0 1 .061-.008 11.65 11.65 0 0 0 10.104 0 .06.06 0 0 1 .062.007c.103.083.21.166.316.246a.06.06 0 0 1-.005.1 10.859 10.859 0 0 1-1.594.764.06.06 0 0 0-.033.084 9.255 9.255 0 0 0 1.02 1.659.06.06 0 0 0 .065.02 16.824 16.824 0 0 0 4.982-2.52.06.06 0 0 0 .024-.044c.416-5.09-.698-8.76-2.89-11.156a.048.048 0 0 0-.024-.02ZM9.68 13.348c-.996 0-1.812-.91-1.812-2.03 0-1.12.805-2.031 1.812-2.031 1.016 0 1.822.922 1.812 2.031 0 1.12-.805 2.03-1.812 2.03Zm4.64 0c-.996 0-1.812-.91-1.812-2.03 0-1.12.805-2.031 1.812-2.031 1.016 0 1.822.922 1.812 2.031 0 1.12-.796 2.03-1.812 2.03Z');
-        path.setAttribute('fill', 'currentColor');
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "onboarding-social-icon");
+        svg.setAttribute("width", "20");
+        svg.setAttribute("height", "20");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M20.317 4.37a16.75 16.75 0 0 0-4.091-1.272.06.06 0 0 0-.063.03 11.651 11.651 0 0 0-.512 1.054 15.93 15.93 0 0 0-4.813 0 10.69 10.69 0 0 0-.522-1.054.06.06 0 0 0-.063-.03 16.742 16.742 0 0 0-4.092 1.272.055.055 0 0 0-.025.021C2.84 8.167 2.18 11.875 2.46 15.547a.066.066 0 0 0 .025.045 16.86 16.86 0 0 0 4.98 2.52.06.06 0 0 0 .066-.02c.384-.525.726-1.08 1.02-1.66a.06.06 0 0 0-.033-.083 11.117 11.117 0 0 1-1.593-.765.06.06 0 0 1-.006-.1c.107-.08.214-.162.316-.245a.06.06 0 0 1 .061-.008 11.65 11.65 0 0 0 10.104 0 .06.06 0 0 1 .062.007c.103.083.21.166.316.246a.06.06 0 0 1-.005.1 10.859 10.859 0 0 1-1.594.764.06.06 0 0 0-.033.084 9.255 9.255 0 0 0 1.02 1.659.06.06 0 0 0 .065.02 16.824 16.824 0 0 0 4.982-2.52.06.06 0 0 0 .024-.044c.416-5.09-.698-8.76-2.89-11.156a.048.048 0 0 0-.024-.02ZM9.68 13.348c-.996 0-1.812-.91-1.812-2.03 0-1.12.805-2.031 1.812-2.031 1.016 0 1.822.922 1.812 2.031 0 1.12-.805 2.03-1.812 2.03Zm4.64 0c-.996 0-1.812-.91-1.812-2.03 0-1.12.805-2.031 1.812-2.031 1.016 0 1.822.922 1.812 2.031 0 1.12-.796 2.03-1.812 2.03Z");
+        path.setAttribute("fill", "currentColor");
         svg.appendChild(path);
         return svg;
     }
@@ -3608,7 +3696,7 @@ export class OnboardingUIWeb {
         if (this.loading)
             return;
         try {
-            this.setLoading(true, 'passkey');
+            this.setLoading(true, "passkey");
             this.hidePasskeyError();
             if (this.config.onPasskeyLogin) {
                 await this.config.onPasskeyLogin();
@@ -3618,13 +3706,15 @@ export class OnboardingUIWeb {
                 }
             }
             else {
-                throw new Error('Passkey login handler not configured');
+                throw new Error("Passkey login handler not configured");
             }
         }
         catch (error) {
-            this.showPasskeyError(error instanceof Error ? error.message : 'Failed to login with passkey');
+            this.showPasskeyError(error instanceof Error ? error.message : "Failed to login with passkey");
             if (this.config.onLoginError) {
-                this.config.onLoginError(error instanceof Error ? error : new Error('Failed to login with passkey'));
+                this.config.onLoginError(error instanceof Error
+                    ? error
+                    : new Error("Failed to login with passkey"));
             }
         }
         finally {
@@ -3638,7 +3728,7 @@ export class OnboardingUIWeb {
         if (this.loading)
             return;
         try {
-            this.setLoading(true, 'passkey');
+            this.setLoading(true, "passkey");
             this.hidePasskeyError();
             if (this.config.onPasskeySignup) {
                 await this.config.onPasskeySignup();
@@ -3648,13 +3738,15 @@ export class OnboardingUIWeb {
                 }
             }
             else {
-                throw new Error('Passkey signup handler not configured');
+                throw new Error("Passkey signup handler not configured");
             }
         }
         catch (error) {
-            this.showPasskeyError(error instanceof Error ? error.message : 'Failed to signup with passkey');
+            this.showPasskeyError(error instanceof Error ? error.message : "Failed to signup with passkey");
             if (this.config.onLoginError) {
-                this.config.onLoginError(error instanceof Error ? error : new Error('Failed to signup with passkey'));
+                this.config.onLoginError(error instanceof Error
+                    ? error
+                    : new Error("Failed to signup with passkey"));
             }
         }
         finally {
@@ -3668,7 +3760,7 @@ export class OnboardingUIWeb {
         if (!this.passkeyErrorElement)
             return;
         this.passkeyErrorElement.textContent = message;
-        this.passkeyErrorElement.style.display = 'block';
+        this.passkeyErrorElement.style.display = "block";
     }
     /**
      * Hide passkey-specific error
@@ -3676,8 +3768,8 @@ export class OnboardingUIWeb {
     hidePasskeyError() {
         if (!this.passkeyErrorElement)
             return;
-        this.passkeyErrorElement.textContent = '';
-        this.passkeyErrorElement.style.display = 'none';
+        this.passkeyErrorElement.textContent = "";
+        this.passkeyErrorElement.style.display = "none";
     }
 }
 export default OnboardingUIWeb;