@abstraxn/signer-react 1.0.0

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

@@ -0,0 +1,3782 @@
+import { isValidEmail } from "@abstraxn/signer-core";
+// CSS styles embedded as string
+const ONBOARDING_UI_STYLES = `
+.onboarding-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Inline mode - no extra height */
+.onboarding-container.onboarding-inline {
+  min-height: auto;
+  padding: 0;
+}
+
+/* Modal Styles */
+.onboarding-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  display: none; /* Start hidden by default to prevent flicker */
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  padding: 16px;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.onboarding-modal-overlay::-webkit-scrollbar {
+  display: none;
+}
+
+.onboarding-modal-overlay {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.onboarding-modal-overlay.onboarding-modal-open {
+  display: flex; /* Show when explicitly opened */
+  opacity: 1;
+}
+
+.onboarding-modal-overlay.onboarding-modal-closing {
+  opacity: 0;
+}
+
+.onboarding-modal-content {
+  position: relative;
+  width: 420px;
+  max-width: 420px;
+  min-width: 420px;
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+  transform: scale(0.95);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+@media (max-width: 480px) {
+  .onboarding-modal-content {
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+  
+  .onboarding-card {
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+  }
+  
+  .onboarding-modal-overlay {
+    padding: 0;
+  }
+}
+
+.onboarding-modal-overlay.onboarding-modal-open .onboarding-modal-content {
+  transform: scale(1);
+}
+
+.onboarding-modal-overlay.onboarding-modal-closing .onboarding-modal-content {
+  transform: scale(0.95);
+}
+
+/* Modal container adjustments */
+.onboarding-modal-content .onboarding-container {
+  min-height: auto;
+  padding: 0;
+}
+
+/* Light Theme */
+.onboarding-theme-light {
+  color: #000000;
+}
+
+/* Dark Theme */
+.onboarding-theme-dark {
+  color: #ffffff;
+}
+
+.onboarding-card {
+  width: 420px;
+  max-width: 420px;
+  min-width: 420px;
+  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;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: calc(100vh - 32px);
+  overscroll-behavior: contain;
+  transition: height 0.3s ease-in-out;
+  box-sizing: border-box;
+}
+
+.onboarding-card::-webkit-scrollbar {
+  width: 6px;
+}
+
+.onboarding-card::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.onboarding-card::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.onboarding-theme-dark .onboarding-card::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+@media (max-width: 480px) {
+  .onboarding-card {
+    padding: 24px 20px;
+    border-radius: 0;
+    max-height: 100vh;
+  }
+}
+
+.onboarding-theme-light .onboarding-card {
+  background-color: #ffffff;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.onboarding-theme-dark .onboarding-card {
+  background-color: #1f2937;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.onboarding-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.onboarding-logo-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.onboarding-logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 6px;
+  gap: 10px;
+}
+
+.onboarding-logo-img {
+  max-width: 120px;
+  max-height: 60px;
+  object-fit: contain;
+}
+
+.onboarding-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+  color: inherit;
+  text-align: center;
+  margin-bottom: 4px;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+@media (max-width: 480px) {
+  .onboarding-title {
+    font-size: 24px;
+    margin-bottom: 24px;
+  }
+}
+
+.onboarding-theme-light .onboarding-title {
+  color: #111827;
+}
+
+.onboarding-theme-dark .onboarding-title {
+  color: #ffffff;
+}
+
+.onboarding-form {
+  width: 100%;
+}
+
+.onboarding-input-group {
+  margin-bottom: 8px;
+}
+
+.onboarding-input-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 4px;
+  letter-spacing: -0.01em;
+  line-height: 1.5;
+  text-align: left;
+  width: 100%;
+}
+
+.onboarding-theme-dark .onboarding-input-label {
+  color: #e5e7eb;
+}
+
+.onboarding-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.onboarding-input-icon {
+  position: absolute;
+  left: 14px;
+  color: #9ca3af;
+  pointer-events: none;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+}
+
+.onboarding-theme-dark .onboarding-input-icon {
+  color: #9ca3af;
+}
+
+.onboarding-input {
+  width: 100%;
+  padding: 10px 14px 10px 44px;
+  font-size: 14px;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 8px;
+  background-color: inherit;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+
+.onboarding-theme-light .onboarding-input {
+  background-color: #ffffff;
+  border-color: #e5e7eb;
+  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;
+}
+
+.onboarding-theme-light .onboarding-input:focus {
+  border-color: #111827;
+  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.onboarding-theme-dark .onboarding-input {
+  border-color: #4b5563;
+  background-color: #374151;
+}
+
+.onboarding-theme-dark .onboarding-input:focus {
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+  background-color: #374151;
+  color: #ffffff;
+}
+
+.onboarding-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Arrow button inside email input */
+.onboarding-input-arrow-button {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+}
+
+/* Light theme arrow button */
+.onboarding-theme-light .onboarding-input-arrow-button {
+  color: #111827;
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button:hover {
+  background-color: rgba(17, 24, 39, 0.1);
+  color: #1f2937;
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button:active {
+  background-color: rgba(17, 24, 39, 0.15);
+}
+
+/* Dark theme arrow button */
+.onboarding-theme-dark .onboarding-input-arrow-button {
+  color: #9ca3af;
+}
+
+.onboarding-theme-dark .onboarding-input-arrow-button:hover {
+  background-color: rgba(156, 163, 175, 0.2);
+  color: #d1d5db;
+}
+
+.onboarding-theme-dark .onboarding-input-arrow-button:active {
+  background-color: rgba(156, 163, 175, 0.25);
+}
+
+.onboarding-input-arrow-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.onboarding-input-arrow-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.onboarding-error {
+  padding: 12px;
+  margin-bottom: 16px;
+  background-color: #fee2e2;
+  color: #dc2626;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.onboarding-theme-dark .onboarding-error {
+  background-color: #7f1d1d;
+  color: #fca5a5;
+}
+
+.onboarding-button {
+  width: 100%;
+  padding: 13px 24px;
+  font-size: 15px;
+  font-weight: 600;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  letter-spacing: -0.01em;
+  line-height: 1.5;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  min-height: 48px;
+}
+
+.onboarding-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.onboarding-button-primary {
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Light theme button */
+.onboarding-theme-light .onboarding-button-primary {
+  background-color: #111827;
+  color: #ffffff;
+}
+
+.onboarding-theme-light .onboarding-button-primary:hover:not(:disabled) {
+  background-color: #1f2937;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.onboarding-theme-light .onboarding-button-primary:active:not(:disabled) {
+  background-color: #374151;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transform: translateY(0);
+}
+
+/* Dark theme button */
+.onboarding-theme-dark .onboarding-button-primary {
+  background-color: #4b5563;
+  color: #ffffff;
+}
+
+.onboarding-theme-dark .onboarding-button-primary:hover:not(:disabled) {
+  background-color: #6b7280;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
+}
+
+.onboarding-theme-dark .onboarding-button-primary:active:not(:disabled) {
+  background-color: #6b7280;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transform: translateY(0);
+}
+
+.onboarding-button-google {
+  background-color: #ffffff;
+  color: #1f2937;
+  border: 1.5px solid #e5e7eb;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+}
+
+.onboarding-button-social {
+  background-color: #ffffff;
+  color: #1f2937;
+  border: 1.5px solid #e5e7eb;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+}
+
+.onboarding-theme-dark .onboarding-button-google {
+  background-color: #374151;
+  color: #ffffff;
+  border-color: #4b5563;
+}
+
+.onboarding-theme-dark .onboarding-button-social {
+  background-color: #2f3239;
+  color: #ffffff;
+  border-color: #4b5563;
+}
+
+.onboarding-button-google:hover:not(:disabled) {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.onboarding-button-social:hover:not(:disabled) {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.onboarding-theme-dark .onboarding-button-google:hover:not(:disabled) {
+  background-color: #4b5563;
+  border-color: #6b7280;
+}
+
+.onboarding-theme-dark .onboarding-button-social:hover:not(:disabled) {
+  background-color: #3c404a;
+  border-color: #6b7280;
+}
+
+.onboarding-button-social-icon {
+  width: 100%;
+  height: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 12px;
+  background-color: #ffffff;
+  color: #1f2937;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  flex: 1;
+}
+
+.onboarding-button-social-icon:hover:not(:disabled) {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.onboarding-theme-dark .onboarding-button-social-icon {
+  background-color: #2f3239;
+  border-color: #4b5563;
+  color: #ffffff;
+}
+
+.onboarding-theme-dark .onboarding-button-social-icon:hover:not(:disabled) {
+  background-color: #3c404a;
+  border-color: #6b7280;
+}
+
+.onboarding-social-grid {
+  display: flex;
+  gap: 12px;
+  flex-wrap: nowrap;
+  margin-top: 8px;
+  width: 100%;
+}
+
+/* Hide social buttons when OTP screen is visible - using class for better browser support */
+.onboarding-card.onboarding-otp-active .onboarding-button-google,
+.onboarding-card.onboarding-otp-active .onboarding-button-social,
+.onboarding-card.onboarding-otp-active .onboarding-social-grid,
+.onboarding-card.onboarding-otp-active .onboarding-divider:not(.onboarding-otp-divider),
+.onboarding-card.onboarding-otp-active .onboarding-button-passkey,
+.onboarding-card.onboarding-otp-active .onboarding-passkey-signup-link,
+.onboarding-card.onboarding-otp-active .onboarding-passkey-divider,
+.onboarding-card.onboarding-otp-active .onboarding-form:not(.onboarding-otp-form),
+.onboarding-card.onboarding-otp-active .onboarding-input-group:not(.onboarding-otp-inputs-container) {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Fallback using :has() for modern browsers */
+@supports selector(:has(*)) {
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-button-google,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-button-social,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-social-grid,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-divider:not(.onboarding-otp-divider),
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-button-passkey,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-passkey-signup-link,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-passkey-divider {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+.onboarding-social-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.onboarding-google-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.onboarding-divider {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  position: relative;
+}
+
+.onboarding-divider::before,
+.onboarding-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.onboarding-theme-dark .onboarding-divider::before,
+.onboarding-theme-dark .onboarding-divider::after {
+  background-color: #4b5563;
+}
+
+.onboarding-divider-text {
+  padding: 0 16px;
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.onboarding-theme-dark .onboarding-divider-text {
+  color: #9ca3af;
+}
+
+
+.onboarding-footer {
+  margin-top: 16px;
+  padding: 0;
+  text-align: center;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.onboarding-footer-text {
+  font-size: 11px;
+  color: #9ca3af;
+  margin: 0;
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+.onboarding-theme-dark .onboarding-footer-text {
+  color: #6b7280;
+}
+
+.onboarding-footer-brand {
+  font-weight: 700;
+  text-decoration: none;
+  margin-left: 2px;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.onboarding-theme-light .onboarding-footer-brand {
+  color: #111827;
+}
+
+.onboarding-theme-dark .onboarding-footer-brand {
+  color: #9ca3af;
+}
+
+.onboarding-footer-brand:hover {
+  text-decoration: none;
+  opacity: 0.8;
+}
+
+/* Modal container adjustments */
+.onboarding-modal-content .onboarding-container {
+  min-height: auto;
+  padding: 0;
+}
+
+.onboarding-modal-content .onboarding-card {
+  margin: 0;
+}
+
+/* OTP Verification Screen */
+.onboarding-otp-verification {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+}
+
+.onboarding-otp-verification .onboarding-button {
+  /* Match OTP inputs width: 6 inputs × 44px + 5 gaps × 10px = 314px */
+  width: 314px;
+  max-width: 314px;
+}
+
+.onboarding-otp-icon-container {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  position: relative;
+  background: transparent;
+  border: 3px solid #eef2ff;
+}
+
+.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 {
+  border-color: rgba(156, 163, 175, 0.2);
+}
+
+.onboarding-otp-icon-inner {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.onboarding-otp-icon {
+  width: 28px;
+  height: 28px;
+  color: #363ff9;
+}
+
+.onboarding-otp-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  color: inherit;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.onboarding-theme-light .onboarding-otp-title {
+  color: #111827;
+}
+
+.onboarding-theme-dark .onboarding-otp-title {
+  color: #ffffff;
+}
+
+.onboarding-otp-instruction {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0 0 4px 0;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.onboarding-theme-dark .onboarding-otp-instruction {
+  color: #9ca3af;
+}
+
+.onboarding-otp-email {
+  font-size: 14px;
+  font-weight: 600;
+  color: inherit;
+  margin: 0 0 24px 0;
+  line-height: 1.5;
+}
+
+.onboarding-theme-light .onboarding-otp-email {
+  color: #111827;
+}
+
+.onboarding-theme-dark .onboarding-otp-email {
+  color: #ffffff;
+}
+
+.onboarding-otp-inputs-container {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.onboarding-otp-input {
+  width: 44px;
+  height: 52px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 8px;
+  background-color: inherit;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  line-height: 1;
+}
+
+.onboarding-theme-light .onboarding-otp-input {
+  background-color: #ffffff;
+  border-color: #e5e7eb;
+  color: #000000;
+}
+
+.onboarding-otp-input:focus {
+  outline: none;
+}
+
+.onboarding-theme-light .onboarding-otp-input:focus {
+  border-color: #111827;
+  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.onboarding-theme-dark .onboarding-otp-input {
+  border-color: #4b5563;
+  background-color: #374151;
+  color: #ffffff;
+}
+
+.onboarding-theme-dark .onboarding-otp-input:focus {
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+  background-color: #4b5563;
+  color: #ffffff;
+}
+
+.onboarding-otp-resend {
+  text-align: center;
+  margin-top: 20px;
+  line-height: 1.5;
+}
+
+.onboarding-otp-resend-text {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.onboarding-theme-dark .onboarding-otp-resend-text {
+  color: #9ca3af;
+}
+
+.onboarding-otp-resend-link {
+  color: #dc2626;
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color 0.15s ease;
+  font-size: 13px;
+}
+
+.onboarding-otp-resend-link:hover:not(:disabled) {
+  color: #b91c1c;
+}
+
+.onboarding-otp-resend-link:disabled,
+.onboarding-otp-resend-link-disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+  text-decoration: none;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.onboarding-theme-dark .onboarding-otp-resend-link:disabled,
+.onboarding-theme-dark .onboarding-otp-resend-link-disabled {
+  color: #6b7280;
+}
+
+/* Passkey Button Styles */
+.onboarding-button-passkey {
+  background-color: #374151;
+  color: #ffffff;
+  border: 1.5px solid #4b5563;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+}
+
+.onboarding-theme-dark .onboarding-button-passkey {
+  background-color: #4b5563;
+  color: #ffffff;
+  border-color: #6b7280;
+}
+
+.onboarding-button-passkey:hover:not(:disabled) {
+  background-color: #4b5563;
+  border-color: #6b7280;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.onboarding-theme-dark .onboarding-button-passkey:hover:not(:disabled) {
+  background-color: #6b7280;
+  border-color: #9ca3af;
+}
+
+.onboarding-passkey-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.onboarding-passkey-signup-link {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 12px;
+  display: block;
+  text-align: center;
+  transition: color 0.15s ease;
+}
+
+.onboarding-theme-light .onboarding-passkey-signup-link {
+  color:  #2170f5;
+} 
+
+
+.onboarding-theme-dark .onboarding-passkey-signup-link {
+  color:  #2170f5;
+} 
+
+`;
+/**
+ * OnboardingUI Class
+ *
+ * A customizable user onboarding component with email-OTP and Google login options.
+ * Works with vanilla JavaScript - no framework dependencies required.
+ */
+export class OnboardingUIWeb {
+    static stylesInjected = false;
+    config;
+    container = null;
+    rootElement = null;
+    modalOverlay = null;
+    modalContent = null;
+    emailInput = null;
+    otpInput = null;
+    otpInputs = [];
+    autoSubmitEnabled = true; // Flag to control auto-submit after failed attempts
+    emailForm = null;
+    continueButton = null;
+    emailArrowButton = null;
+    googleButton = null;
+    twitterButton = null;
+    discordButton = null;
+    passkeyLoginButton = null;
+    passkeySignupLink = null;
+    passkeyDivider = null;
+    passkeyErrorElement = null;
+    errorElement = null;
+    otpGroup = null;
+    otpVerificationScreen = null;
+    resendButton = null;
+    socialGrid = null;
+    externalWalletContainer = null;
+    externalWalletDivider = null;
+    divider = null;
+    footer = null;
+    verifyButton = null;
+    email = "";
+    otp = "";
+    otpSent = false;
+    loading = false;
+    activeButton = null;
+    resendCooldown = 0;
+    resendCooldownTimer = null;
+    externalWalletsEnabled = false;
+    constructor(config, externalWalletsEnabled = false) {
+        this.externalWalletsEnabled = externalWalletsEnabled;
+        const defaultTheme = config.theme || "light";
+        this.config = {
+            theme: defaultTheme,
+            showFooter: config.showFooter !== false,
+            className: config.className || "",
+            modal: config.modal !== false,
+            closeOnBackdropClick: config.closeOnBackdropClick !== false,
+            onboardTitle: config.onboardTitle || "Sign In",
+            handleUrlParams: config.handleUrlParams !== false,
+            ...config,
+        };
+    }
+    /**
+     * Show external wallet container and divider
+     * Call this before init() to prevent flicker when external wallets are enabled
+     */
+    showExternalWallets() {
+        if (this.externalWalletContainer) {
+            this.externalWalletContainer.style.display = "";
+        }
+        if (this.externalWalletDivider) {
+            this.externalWalletDivider.style.display = "";
+        }
+    }
+    /**
+     * Initialize and render the component
+     */
+    init() {
+        this.injectStyles();
+        this.setupContainer();
+        this.render();
+        this.attachEventListeners();
+        this.checkUrlParams();
+    }
+    /**
+     * Check URL parameters for social login callbacks
+     */
+    checkUrlParams() {
+        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");
+        // 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 payload = JSON.parse(jsonPayload);
+                return (payload.authProvider || payload.provider || "").toLowerCase();
+            }
+            catch (e) {
+                return null;
+            }
+        };
+        // Detect OAuth callback: check for provider in URL or extract from accessToken
+        let detectedProvider = provider;
+        if (!detectedProvider && accessToken) {
+            detectedProvider = getAuthProviderFromToken(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) {
+            // Show loading modal immediately - it creates its own overlay
+            // Use requestAnimationFrame + setTimeout to ensure DOM is ready
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    // Directly show loading modal - it will create its own overlay with header and footer
+                    this.showLoadingModal();
+                }, 100);
+            });
+            return;
+        }
+        // Check login source to decide if we should handle this (for errors)
+        const source = localStorage.getItem("abstraxn_login_source");
+        const isModal = this.config.modal;
+        if (source) {
+            if (source === "modal" && !isModal)
+                return; // Modal initiated, I am Inline -> Ignore
+            if (source === "inline" && isModal)
+                return; // Inline initiated, I am Modal -> Ignore
+        }
+        else {
+            // No source (e.g. unknown origin), default to Modal handling it
+            if (!isModal)
+                return;
+        }
+        if (error) {
+            this.showError(decodeURIComponent(error));
+        }
+    }
+    /**
+     * Show error screen or modal (public method)
+     */
+    showError(message) {
+        // Hide loading modal if it exists
+        this.hideLoadingModal();
+        if (this.config.modal) {
+            this.showErrorModal(message);
+        }
+        else {
+            this.showErrorScreen(message);
+        }
+    }
+    /**
+     * Show error screen
+     */
+    showErrorScreen(message) {
+        if (!this.rootElement)
+            return;
+        // Hide loading modal if it exists (for inline components)
+        this.hideLoadingModal();
+        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");
+        // Create or show 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;",
+            });
+            // 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;",
+            });
+            // 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");
+            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");
+            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");
+            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;",
+            });
+            errorContainer.appendChild(title);
+            // Message
+            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;",
+            });
+            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;",
+            });
+            okButton.addEventListener("click", () => {
+                if (this.config.modal) {
+                    this.close();
+                }
+                else {
+                    this.resetToLoginForm();
+                }
+                // Also clear URL params to prevent showing error again on refresh
+                const url = new URL(window.location.href);
+                url.searchParams.delete("error");
+                window.history.replaceState({}, document.title, url.toString());
+            });
+            errorContainer.appendChild(okButton);
+            card.appendChild(errorContainer);
+        }
+        else {
+            // Update message if container exists
+            const msgEl = errorContainer.querySelector("p");
+            if (msgEl)
+                msgEl.textContent = message;
+            errorContainer.style.display = "flex";
+        }
+        // Move footer to the bottom
+        if (this.footer) {
+            card.appendChild(this.footer);
+        }
+    }
+    /**
+     * Show loading screen
+     */
+    showLoadingScreen() {
+        if (!this.rootElement)
+            return;
+        // If inline component, show loading as a modal overlay
+        if (!this.config.modal) {
+            this.showLoadingModal();
+            return;
+        }
+        // Hide the main modal overlay to prevent showing wallet options below loading screen
+        if (this.modalOverlay) {
+            this.modalOverlay.style.display = "none";
+        }
+        // Show loading modal overlay instead (with higher z-index)
+        this.showLoadingModal();
+    }
+    /**
+     * Show loading screen as a modal overlay (for inline components)
+     * Public method to allow external access
+     */
+    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");
+        otherModals.forEach((modal) => {
+            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");
+        if (!loadingModalOverlay) {
+            loadingModalOverlay = this.createElement("div", {
+                id: "onboarding-loading-modal-overlay",
+                style: `
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 9999999;
+          backdrop-filter: blur(4px);
+        `,
+            });
+            const loadingCard = this.createElement("div", {
+                className: `onboarding-card onboarding-theme-${this.config.theme}`,
+                style: `
+          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);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 420px;
+          max-width: 420px;
+          min-width: 420px;
+          gap: 20px;
+          box-sizing: border-box;
+        `,
+            });
+            // 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 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", {
+                    src: this.config.logo,
+                    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",
+                style: `
+          font-size: 24px;
+          font-weight: 600;
+          margin: 0;
+          color: ${this.config.theme === "dark" ? "#ffffff" : "#111827"};
+          text-align: center;
+          margin-bottom: 0;
+          letter-spacing: -0.01em;
+          line-height: 1.4;
+        `,
+            });
+            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",
+                style: `
+          width: 40px;
+          height: 40px;
+          border: 3px solid ${spinnerBorderColor};
+          border-radius: 50%;
+          border-top-color: ${spinnerColor};
+          animation: onboarding-spin 1s ease-in-out infinite;
+          margin-bottom: 16px;
+        `,
+            });
+            // Add keyframes if not exists
+            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); }
+          }
+        `;
+                document.head.appendChild(style);
+            }
+            // Text
+            const text = this.createElement("p", {
+                textContent: "Verifying login...",
+                style: `
+          font-size: 16px;
+          color: ${this.config.theme === "dark" ? "#e5e7eb" : "#374151"};
+          margin: 0;
+          font-weight: 500;
+        `,
+            });
+            loadingCard.appendChild(spinner);
+            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",
+                    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};`,
+                });
+                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 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)"/>
+              <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_1242_781)"/>
+              <defs>
+                <linearGradient id="paint0_linear_1242_781" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#F878D2"/>
+                  <stop offset="0.393522" stop-color="#FDCC81"/>
+                  <stop offset="1" stop-color="#F9A0D9"/>
+                </linearGradient>
+                <linearGradient id="paint1_linear_1242_781" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#F878D2"/>
+                  <stop offset="0.393522" stop-color="#FDCC81"/>
+                  <stop offset="1" stop-color="#F9A0D9"/>
+                </linearGradient>
+              </defs>
+            </svg>
+          `,
+                    style: "display: inline-flex; align-items: center;",
+                });
+                brandContainer.appendChild(logoSvg);
+                const brandText = this.createElement("span", {
+                    textContent: "abstraxn",
+                    style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
+                });
+                brandContainer.appendChild(brandText);
+                footerText.appendChild(brandContainer);
+                footer.appendChild(footerText);
+                loadingCard.appendChild(footer);
+            }
+            loadingModalOverlay.appendChild(loadingCard);
+            document.body.appendChild(loadingModalOverlay);
+        }
+        else {
+            // Ensure modal is visible
+            loadingModalOverlay.style.display = "flex";
+            loadingModalOverlay.style.visibility = "visible";
+            loadingModalOverlay.style.opacity = "1";
+            loadingModalOverlay.style.zIndex = "9999999";
+        }
+        // Prevent body scroll
+        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";
+        }
+    }
+    /**
+     * Hide loading modal overlay
+     */
+    hideLoadingModal() {
+        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 = "";
+        }
+    }
+    /**
+     * Show error screen as a modal overlay (for inline components)
+     */
+    showErrorModal(message) {
+        // Helper function to close error modal
+        const closeErrorModal = () => {
+            const overlay = document.getElementById("onboarding-error-modal-overlay");
+            if (overlay) {
+                overlay.style.display = "none";
+                document.body.style.overflow = "";
+                // Clear URL params
+                const url = new URL(window.location.href);
+                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");
+        if (!errorModalOverlay) {
+            errorModalOverlay = this.createElement("div", {
+                id: "onboarding-error-modal-overlay",
+                style: `
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 999999;
+          backdrop-filter: blur(4px);
+        `,
+            });
+            // Add backdrop click handler to close modal
+            errorModalOverlay.addEventListener("click", (e) => {
+                if (e.target === errorModalOverlay) {
+                    closeErrorModal();
+                }
+            });
+            const errorCard = this.createElement("div", {
+                className: `onboarding-card onboarding-theme-${this.config.theme}`,
+                style: `
+          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);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 420px;
+          max-width: 420px;
+          min-width: 420px;
+          text-align: center;
+          position: relative;
+          box-sizing: border-box;
+        `,
+            });
+            // Prevent clicks on card from closing modal
+            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 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", {
+                    src: this.config.logo,
+                    alt: "Abstraxn",
+                    className: "onboarding-logo-img",
+                });
+                logoContainer.appendChild(logoImg);
+                logoSection.appendChild(logoContainer);
+            }
+            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");
+            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");
+            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");
+            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"};`,
+            });
+            errorCard.appendChild(title);
+            // Message
+            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;`,
+            });
+            errorCard.appendChild(msg);
+            // OK Button
+            const okButton = this.createElement("button", {
+                className: "onboarding-button onboarding-button-primary",
+                textContent: "OK",
+                style: "width: 100%; max-width: 200px;",
+            });
+            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",
+                    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};`,
+                });
+                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 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)"/>
+              <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_error_modal)"/>
+              <defs>
+                <linearGradient id="paint0_linear_error_modal" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#F878D2"/>
+                  <stop offset="0.393522" stop-color="#FDCC81"/>
+                  <stop offset="1" stop-color="#F9A0D9"/>
+                </linearGradient>
+                <linearGradient id="paint1_linear_error_modal" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#F878D2"/>
+                  <stop offset="0.393522" stop-color="#FDCC81"/>
+                  <stop offset="1" stop-color="#F9A0D9"/>
+                </linearGradient>
+              </defs>
+            </svg>
+          `,
+                    style: "display: inline-flex; align-items: center;",
+                });
+                brandContainer.appendChild(logoSvg);
+                const brandText = this.createElement("span", {
+                    textContent: "abstraxn",
+                    style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
+                });
+                brandContainer.appendChild(brandText);
+                footerText.appendChild(brandContainer);
+                footer.appendChild(footerText);
+                errorCard.appendChild(footer);
+            }
+            errorModalOverlay.appendChild(errorCard);
+            document.body.appendChild(errorModalOverlay);
+        }
+        else {
+            // Update message if overlay exists
+            const msgEl = errorModalOverlay.querySelector("p");
+            if (msgEl)
+                msgEl.textContent = message;
+            errorModalOverlay.style.display = "flex";
+        }
+        // Prevent body scroll
+        document.body.style.overflow = "hidden";
+    }
+    /**
+     * Inject CSS styles into the document head (only once)
+     */
+    injectStyles() {
+        if (OnboardingUIWeb.stylesInjected) {
+            return;
+        }
+        // Check if styles are already injected
+        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";
+        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";
+            customStyleElement.textContent = this.config.customCSS;
+            document.head.appendChild(customStyleElement);
+        }
+        // Apply custom colors if provided
+        if (this.config.colors) {
+            this.applyCustomColors();
+        }
+        OnboardingUIWeb.stylesInjected = true;
+        // Inject utility styles for loading/error modes
+        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) {
+        display: none !important;
+      }
+    `;
+        document.head.appendChild(utilityStyle);
+    }
+    /**
+     * Apply custom colors from config
+     */
+    applyCustomColors() {
+        if (!this.config.colors)
+            return;
+        const root = this.rootElement || document.documentElement;
+        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; }`;
+            css += `.onboarding-passkey-signup-link { color: ${this.config.colors.primary} !important; }`;
+        }
+        if (this.config.colors.primaryHover) {
+            css += `.onboarding-button-primary:hover:not(:disabled) { background-color: ${this.config.colors.primaryHover} !important; background: ${this.config.colors.primaryHover} !important; }`;
+        }
+        if (this.config.colors.background) {
+            css += `.onboarding-card { background-color: ${this.config.colors.background} !important; }`;
+        }
+        if (this.config.colors.text) {
+            css += `.onboarding-card { color: ${this.config.colors.text} !important; }`;
+        }
+        if (this.config.colors.border) {
+            css += `.onboarding-input { border-color: ${this.config.colors.border} !important; }`;
+        }
+        if (this.config.colors.error) {
+            css += `.onboarding-error { color: ${this.config.colors.error} !important; }`;
+        }
+        style.textContent = css;
+        document.head.appendChild(style);
+    }
+    /**
+     * Setup the container element
+     */
+    setupContainer() {
+        // For modal mode, always use body
+        if (this.config.modal) {
+            this.container = document.body;
+        }
+        else {
+            if (this.config.container) {
+                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}`);
+                    }
+                }
+                else {
+                    this.container = this.config.container;
+                }
+            }
+            else {
+                // Create a default container
+                this.container = document.body;
+            }
+        }
+    }
+    /**
+     * Render the component
+     */
+    render() {
+        if (!this.container)
+            return;
+        if (this.config.modal) {
+            this.renderAsModal();
+        }
+        else {
+            this.renderInline();
+        }
+    }
+    /**
+     * Render as modal overlay
+     */
+    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
+        });
+        // Create modal content wrapper
+        this.modalContent = this.createElement("div", {
+            className: `onboarding-modal-content onboarding-theme-${this.config.theme}`,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "onboarding-title",
+            tabIndex: -1,
+        });
+        // Create root element for the form
+        this.rootElement = this.createElement("div", {
+            className: `onboarding-container onboarding-theme-${this.config.theme} ${this.config.className}`,
+            style: this.parseStyle(this.config.style),
+        });
+        // Build the form content
+        this.buildFormContent();
+        // Append form to root, root to modal content, modal content to overlay
+        this.modalContent.appendChild(this.rootElement);
+        this.modalOverlay.appendChild(this.modalContent);
+        // Add click handler for backdrop
+        if (this.config.closeOnBackdropClick) {
+            this.modalOverlay.addEventListener("click", (e) => {
+                if (e.target === this.modalOverlay) {
+                    this.close();
+                }
+            });
+        }
+        // Prevent body scroll when modal is open
+        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");
+                // Focus management for accessibility
+                if (this.emailInput) {
+                    this.emailInput.focus();
+                }
+            }
+        }, 10);
+        // Add keyboard navigation
+        this.modalOverlay.addEventListener("keydown", (e) => {
+            // Trap focus within modal
+            if (e.key === "Tab") {
+                this.trapFocus(e);
+            }
+        });
+    }
+    /**
+     * Trap focus within modal for accessibility
+     */
+    trapFocus(e) {
+        if (!this.modalContent)
+            return;
+        const focusableElements = this.modalContent.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey && document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+        }
+    }
+    /**
+     * Render inline (non-modal)
+     */
+    renderInline() {
+        if (!this.container)
+            return;
+        // Create root element
+        this.rootElement = this.createElement("div", {
+            className: `onboarding-container onboarding-inline onboarding-theme-${this.config.theme} ${this.config.className}`,
+            style: this.parseStyle(this.config.style),
+        });
+        // Build the form content
+        this.buildFormContent();
+        // Append to container
+        if (this.container === document.body) {
+            this.container.appendChild(this.rootElement);
+        }
+        else {
+            this.container.innerHTML = "";
+            this.container.appendChild(this.rootElement);
+        }
+    }
+    /**
+     * Build form content (shared between modal and inline)
+     */
+    buildFormContent() {
+        if (!this.rootElement)
+            return;
+        // Create card
+        const card = this.createElement("div", { className: "onboarding-card" });
+        // Header with logo at top
+        const header = this.createElement("div", {
+            className: "onboarding-header",
+        });
+        // Logo section (centered at top)
+        if (this.config.logo) {
+            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",
+            });
+            logoContainer.appendChild(logoImg);
+            logoSection.appendChild(logoContainer);
+            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",
+        });
+        header.appendChild(title);
+        // 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",
+        });
+        // Email label
+        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",
+        });
+        // 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 socialMethods = [
+            { 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",
+            required: true,
+            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",
+                disabled: true,
+            });
+            const arrowIcon = this.createArrowIcon();
+            arrowIcon.setAttribute("aria-hidden", "true");
+            this.emailArrowButton.appendChild(arrowIcon);
+            // Add click handler to submit form
+            this.emailArrowButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                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() &&
+                    isValidEmail(this.emailInput.value.trim())) {
+                    e.preventDefault();
+                    this.emailForm?.requestSubmit();
+                }
+            });
+            emailWrapper.appendChild(this.emailArrowButton);
+        }
+        emailGroup.appendChild(emailWrapper);
+        this.emailForm.appendChild(emailGroup);
+        // OTP input group (initially hidden)
+        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",
+        });
+        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",
+            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",
+        });
+        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.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;" : "",
+            disabled: true,
+        });
+        this.emailForm.appendChild(this.continueButton);
+        card.appendChild(header);
+        // Re-check auth methods for other elements (already checked above)
+        // Only append email form if email auth is enabled
+        if (showEmail) {
+            card.appendChild(this.emailForm);
+        }
+        else {
+            // Still create the form but hide it (needed for OTP flow)
+            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.appendChild(dividerText);
+            card.appendChild(this.divider);
+        }
+        else {
+            // Create divider element but hide it
+            this.divider = this.createElement("div", {
+                className: "onboarding-divider",
+                style: "display: none;",
+            });
+            card.appendChild(this.divider);
+        }
+        // Social login buttons (Google, Twitter, Discord)
+        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"
+                                : `Continue with ${method.charAt(0).toUpperCase() + method.slice(1)}`),
+                });
+                const icon = isGoogle
+                    ? this.createGoogleIcon()
+                    : isTwitter
+                        ? this.createTwitterIcon()
+                        : this.createDiscordIcon();
+                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"
+                            : `Continue with ${method.charAt(0).toUpperCase() + method.slice(1)}`);
+                button.appendChild(document.createTextNode(` ${label}`));
+                if (isGoogle) {
+                    this.googleButton = button;
+                }
+                else if (isTwitter) {
+                    this.twitterButton = button;
+                }
+                else {
+                    this.discordButton = button;
+                }
+                card.appendChild(button);
+            }
+            else {
+                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"
+                                    : method.charAt(0).toUpperCase() + method.slice(1)),
+                    });
+                    const icon = isGoogle
+                        ? this.createGoogleIcon()
+                        : isTwitter
+                            ? this.createTwitterIcon()
+                            : this.createDiscordIcon();
+                    icon.setAttribute("aria-hidden", "true");
+                    button.appendChild(icon);
+                    if (isGoogle) {
+                        this.googleButton = button;
+                    }
+                    else if (isTwitter) {
+                        this.twitterButton = button;
+                    }
+                    else {
+                        this.discordButton = button;
+                    }
+                    if (this.socialGrid) {
+                        this.socialGrid.appendChild(button);
+                    }
+                });
+                if (this.socialGrid) {
+                    card.appendChild(this.socialGrid);
+                }
+            }
+        }
+        // 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.appendChild(passkeyDividerText);
+            card.appendChild(this.passkeyDivider);
+        }
+        else {
+            this.passkeyDivider = null;
+        }
+        // Passkey login button (only show if passkey auth is enabled)
+        if (showPasskey) {
+            const passkeyBg = this.config.colors?.primary ||
+                (this.config.theme === "dark" ? "#4b5563" : "#ffffff");
+            const passkeyBorder = this.config.colors?.border ||
+                (this.config.theme === "dark" ? "#6b7280" : "#e5e7eb");
+            const passkeyTextColor = this.config.colors?.text ||
+                (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};
+          border: 1.5px solid ${passkeyBorder};
+        `,
+            });
+            const passkeyIcon = this.createPasskeyIcon();
+            passkeyIcon.setAttribute("aria-hidden", "true");
+            this.passkeyLoginButton.appendChild(passkeyIcon);
+            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;",
+            });
+            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",
+            });
+            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;",
+            });
+            card.appendChild(this.passkeyLoginButton);
+            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;",
+            });
+            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;",
+        });
+        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;",
+        });
+        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");
+            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",
+                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};`,
+            });
+            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",
+            });
+            // Abstraxn logo SVG
+            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)"/>
+            <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_1242_781)"/>
+            <defs>
+              <linearGradient id="paint0_linear_1242_781" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#F878D2"/>
+                <stop offset="0.393522" stop-color="#FDCC81"/>
+                <stop offset="1" stop-color="#F9A0D9"/>
+              </linearGradient>
+              <linearGradient id="paint1_linear_1242_781" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#F878D2"/>
+                <stop offset="0.393522" stop-color="#FDCC81"/>
+                <stop offset="1" stop-color="#F9A0D9"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        `,
+                style: "display: inline-flex; align-items: center;",
+            });
+            brandContainer.appendChild(logoSvg);
+            const brandText = this.createElement("span", {
+                textContent: "abstraxn",
+                style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
+            });
+            brandContainer.appendChild(brandText);
+            footerText.appendChild(brandContainer);
+            this.footer.appendChild(footerText);
+            card.appendChild(this.footer);
+        }
+        this.rootElement.appendChild(card);
+    }
+    /**
+     * Attach event listeners
+     */
+    attachEventListeners() {
+        if (!this.emailForm ||
+            !this.emailInput ||
+            !this.otpInput ||
+            !this.continueButton) {
+            return;
+        }
+        // Email input change
+        this.emailInput.addEventListener("input", (e) => {
+            this.email = e.target.value;
+            this.updateButtonState();
+        });
+        // OTP input change
+        this.otpInput.addEventListener("input", (e) => {
+            this.otp = e.target.value;
+        });
+        // Form submit
+        this.emailForm.addEventListener("submit", (e) => {
+            e.preventDefault();
+            this.handleEmailSubmit();
+        });
+        // Google button click
+        if (this.googleButton) {
+            this.googleButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.handleGoogleLogin();
+            });
+        }
+        // Twitter button click
+        if (this.twitterButton) {
+            this.twitterButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.handleTwitterLogin();
+            });
+        }
+        // Discord button click
+        if (this.discordButton) {
+            this.discordButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.handleDiscordLogin();
+            });
+        }
+        // Passkey login button click
+        if (this.passkeyLoginButton) {
+            this.passkeyLoginButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.handlePasskeyLogin();
+            });
+        }
+        // Passkey signup link click
+        if (this.passkeySignupLink) {
+            this.passkeySignupLink.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.handlePasskeySignup();
+            });
+        }
+    }
+    /**
+     * Handle email form submission
+     */
+    async handleEmailSubmit() {
+        if (!this.emailInput || !this.otpInput)
+            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");
+            return;
+        }
+        this.setError(null);
+        this.setLoading(true, "email");
+        try {
+            if (!this.otpSent) {
+                // Initiate OTP
+                if (this.config.onEmailOtpInitiate) {
+                    await this.config.onEmailOtpInitiate(this.email);
+                }
+                else if (this.config.emailOtpEndpoint) {
+                    const response = await fetch(this.config.emailOtpEndpoint, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({ email: this.email }),
+                    });
+                    if (!response.ok) {
+                        throw new Error("Failed to send OTP");
+                    }
+                }
+                this.otpSent = true;
+                this.showOtpInput();
+                if (this.continueButton) {
+                    this.continueButton.textContent = "Verify OTP";
+                }
+            }
+            else {
+                // Verify OTP
+                if (this.config.onEmailOtpVerify) {
+                    const result = await this.config.onEmailOtpVerify(this.email, this.otp);
+                    if (result.success) {
+                        this.config.onLoginSuccess?.({ token: result.token });
+                    }
+                    else {
+                        throw new Error("Invalid OTP");
+                    }
+                }
+                else if (this.config.emailOtpEndpoint) {
+                    const response = await fetch(`${this.config.emailOtpEndpoint}/verify`, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({ email: this.email, otp: this.otp }),
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        this.config.onLoginSuccess?.({ token: data.token });
+                    }
+                    else {
+                        throw new Error(data.message || "Invalid OTP");
+                    }
+                }
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
+            this.setError(errorMessage);
+            this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Handle Google login
+     */
+    async handleGoogleLogin() {
+        // console.log('🔵 Google login button clicked');
+        // console.log('🔵 Config:', {
+        //   hasOnGoogleLogin: !!this.config.onGoogleLogin,
+        //   googleAuthEndpoint: this.config.googleAuthEndpoint
+        // });
+        this.setError(null);
+        this.setLoading(true, "google");
+        try {
+            localStorage.setItem("abstraxn_login_source", this.config.modal ? "modal" : "inline");
+            if (this.config.onGoogleLogin) {
+                // console.log('🔄 Calling onGoogleLogin callback');
+                await this.config.onGoogleLogin();
+            }
+            else if (this.config.googleAuthEndpoint) {
+                // console.log('🔄 Redirecting to Google auth endpoint:', this.config.googleAuthEndpoint);
+                window.location.href = this.config.googleAuthEndpoint;
+            }
+            else {
+                throw new Error("Google login endpoint not configured");
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
+            this.setError(errorMessage);
+            this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Handle Twitter login
+     */
+    async handleTwitterLogin() {
+        this.setError(null);
+        this.setLoading(true, "twitter");
+        try {
+            if (this.config.onTwitterLogin) {
+                await this.config.onTwitterLogin();
+            }
+            else if (this.config.twitterAuthEndpoint) {
+                window.location.href = this.config.twitterAuthEndpoint;
+            }
+            else {
+                throw new Error("X (Twitter) login not configured");
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
+            this.setError(errorMessage);
+            this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Handle Discord login
+     */
+    async handleDiscordLogin() {
+        this.setError(null);
+        this.setLoading(true, "discord");
+        try {
+            if (this.config.onDiscordLogin) {
+                await this.config.onDiscordLogin();
+            }
+            else if (this.config.discordAuthEndpoint) {
+                window.location.href = this.config.discordAuthEndpoint;
+            }
+            else {
+                throw new Error("Discord login not configured");
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "An error occurred";
+            this.setError(errorMessage);
+            this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Hide all login-related elements (social buttons, passkey, etc.)
+     * This ensures they stay hidden on the OTP screen
+     * Made public so it can be called from AbstraxnProvider
+     */
+    hideLoginElements() {
+        if (this.emailForm) {
+            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";
+        }
+        if (this.googleButton) {
+            this.googleButton.style.display = "none";
+        }
+        if (this.twitterButton) {
+            this.twitterButton.style.display = "none";
+        }
+        if (this.discordButton) {
+            this.discordButton.style.display = "none";
+        }
+        if (this.socialGrid) {
+            this.socialGrid.style.display = "none";
+        }
+        if (this.passkeyDivider) {
+            this.passkeyDivider.style.display = "none";
+        }
+        // Hide passkey buttons on OTP screen
+        if (this.passkeyLoginButton) {
+            this.passkeyLoginButton.style.display = "none";
+        }
+        if (this.passkeySignupLink) {
+            this.passkeySignupLink.style.display = "none";
+        }
+        if (this.passkeyErrorElement) {
+            this.passkeyErrorElement.style.display = "none";
+        }
+        // Hide external wallets on OTP screen
+        if (this.externalWalletContainer) {
+            this.externalWalletContainer.style.display = "none";
+        }
+        if (this.externalWalletDivider) {
+            this.externalWalletDivider.style.display = "none";
+        }
+        // Hide footer on login card (OTP screen has its own footer)
+        if (this.footer) {
+            this.footer.style.display = "none";
+        }
+    }
+    /**
+     * Show OTP verification screen
+     */
+    showOtpInput() {
+        if (!this.rootElement)
+            return;
+        // Hide the email form and all login-related elements
+        this.hideLoginElements();
+        // Create OTP verification screen
+        this.createOtpVerificationScreen();
+    }
+    /**
+     * Create OTP verification screen with 6 input fields
+     */
+    createOtpVerificationScreen() {
+        if (!this.rootElement)
+            return;
+        // Remove existing OTP screen if any
+        if (this.otpVerificationScreen) {
+            this.otpVerificationScreen.remove();
+            this.verifyButton = null;
+        }
+        // Get the card element
+        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");
+        // Create OTP verification container
+        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 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",
+        });
+        this.otpVerificationScreen.appendChild(title);
+        // Instruction text
+        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",
+            textContent: this.email,
+        });
+        this.otpVerificationScreen.appendChild(emailDisplay);
+        // 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",
+                maxLength: 1,
+                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));
+            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;",
+        });
+        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.addEventListener("click", () => this.handleOtpVerify());
+        this.otpVerificationScreen.appendChild(this.verifyButton);
+        // Resend section
+        const resendSection = this.createElement("div", {
+            className: "onboarding-otp-resend",
+        });
+        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>';
+        resendSection.appendChild(resendText);
+        this.otpVerificationScreen.appendChild(resendSection);
+        // Add resend click handler
+        const resendLink = resendSection.querySelector("#otp-resend-link");
+        if (resendLink) {
+            this.resendButton = resendLink;
+            resendLink.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Prevent click if cooldown is active
+                if (this.resendCooldown > 0) {
+                    return;
+                }
+                this.handleResendOtp();
+            });
+        }
+        // Footer (add to OTP screen as well)
+        if (this.config.showFooter) {
+            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 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};`,
+            });
+            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",
+            });
+            // Abstraxn logo SVG
+            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)"/>
+            <path d="M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z" fill="url(#paint1_linear_1242_781_otp)"/>
+            <defs>
+              <linearGradient id="paint0_linear_1242_781_otp" x1="7.03362" y1="6.09543" x2="47.2003" y2="57.0656" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#F878D2"/>
+                <stop offset="0.393522" stop-color="#FDCC81"/>
+                <stop offset="1" stop-color="#F9A0D9"/>
+              </linearGradient>
+              <linearGradient id="paint1_linear_1242_781_otp" x1="2.53739" y1="21.5136" x2="48.7969" y2="38.5742" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#F878D2"/>
+                <stop offset="0.393522" stop-color="#FDCC81"/>
+                <stop offset="1" stop-color="#F9A0D9"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        `,
+                style: "display: inline-flex; align-items: center;",
+            });
+            brandContainer.appendChild(logoSvg);
+            const brandText = this.createElement("span", {
+                textContent: "abstraxn",
+                style: `color: ${brandColor}; font-weight: 700; letter-spacing: 0.2px;`,
+            });
+            brandContainer.appendChild(brandText);
+            otpFooterText.appendChild(brandContainer);
+            otpFooter.appendChild(otpFooterText);
+            this.otpVerificationScreen.appendChild(otpFooter);
+        }
+        // Append to card
+        card.appendChild(this.otpVerificationScreen);
+        // Ensure login elements are hidden when OTP screen is created
+        // This is critical to prevent social buttons from showing
+        this.hideLoginElements();
+        // Also ensure they stay hidden after DOM updates
+        setTimeout(() => {
+            if (this.otpVerificationScreen &&
+                this.otpVerificationScreen.parentElement) {
+                this.hideLoginElements();
+            }
+        }, 0);
+        // Focus first input
+        setTimeout(() => {
+            if (this.otpInputs[0]) {
+                this.otpInputs[0].focus();
+            }
+            // Final check to ensure social buttons are hidden
+            if (this.otpVerificationScreen &&
+                this.otpVerificationScreen.parentElement) {
+                this.hideLoginElements();
+            }
+        }, 100);
+        // Start resend cooldown
+        this.startResendCooldown();
+    }
+    /**
+     * 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 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);
+        return svg;
+    }
+    /**
+     * Handle OTP input - auto-advance to next field
+     */
+    handleOtpInput(e, index) {
+        const input = e.target;
+        const value = input.value.replace(/[^0-9]/g, "");
+        if (value) {
+            input.value = value;
+            // Move to next input if available
+            if (index < 5 && this.otpInputs[index + 1]) {
+                this.otpInputs[index + 1].focus();
+            }
+            // Re-enable auto-submit when user starts typing (clears previous error state)
+            if (!this.autoSubmitEnabled) {
+                this.autoSubmitEnabled = true;
+                this.setError(null); // Clear any previous error
+            }
+        }
+        else {
+            input.value = "";
+        }
+        this.updateOtpValue();
+        // Auto-submit when 6 digits are entered (only if auto-submit is enabled)
+        if (this.otp.length === 6 && this.autoSubmitEnabled && !this.loading) {
+            // Small delay to ensure the last digit is properly set
+            setTimeout(() => {
+                this.handleOtpVerify();
+            }, 100);
+        }
+    }
+    /**
+     * Handle OTP keydown - backspace to go to previous field
+     */
+    handleOtpKeydown(e, index) {
+        const input = e.target;
+        if (e.key === "Backspace" && !input.value && index > 0) {
+            this.otpInputs[index - 1].focus();
+        }
+    }
+    /**
+     * Handle OTP paste - fill all fields from clipboard
+     */
+    handleOtpPaste(e) {
+        e.preventDefault();
+        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] || "";
+            }
+        }
+        // Focus the last filled input or the last input
+        const lastFilledIndex = Math.min(digits.length - 1, 5);
+        if (this.otpInputs[lastFilledIndex]) {
+            this.otpInputs[lastFilledIndex].focus();
+        }
+        this.updateOtpValue();
+        // Auto-submit when 6 digits are pasted (only if auto-submit is enabled)
+        if (this.otp.length === 6 && this.autoSubmitEnabled && !this.loading) {
+            // Small delay to ensure all digits are properly set
+            setTimeout(() => {
+                this.handleOtpVerify();
+            }, 100);
+        }
+    }
+    /**
+     * Update OTP value from input fields
+     */
+    updateOtpValue() {
+        this.otp = this.otpInputs.map((input) => input.value).join("");
+    }
+    /**
+     * Handle OTP verification
+     */
+    async handleOtpVerify() {
+        this.updateOtpValue();
+        if (this.otp.length !== 6) {
+            this.setError("Please enter the complete 6-digit code");
+            return;
+        }
+        // Disable inputs during verification
+        this.otpInputs.forEach((input) => {
+            input.disabled = true;
+        });
+        this.setLoading(true, "email");
+        this.setError(null);
+        try {
+            if (this.config.onEmailOtpVerify) {
+                const result = await this.config.onEmailOtpVerify(this.email, this.otp);
+                if (result.success) {
+                    this.config.onLoginSuccess?.(result);
+                }
+                else {
+                    // Use the error message from the API response, fallback to generic message only if not provided
+                    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",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ email: this.email, otp: this.otp }),
+                });
+                const data = await response.json();
+                if (data.success) {
+                    this.config.onLoginSuccess?.({ token: data.token });
+                }
+                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";
+                    throw new Error(errorMessage);
+                }
+            }
+        }
+        catch (err) {
+            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
+            this.autoSubmitEnabled = false;
+            // Ensure social buttons and login elements remain hidden on OTP screen when error occurs
+            // This prevents them from appearing when an OTP error is shown
+            if (this.otpVerificationScreen) {
+                // Immediately hide login elements
+                this.hideLoginElements();
+                // Also use setTimeout to ensure they stay hidden after any potential re-renders
+                setTimeout(() => {
+                    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) {
+                        this.hideLoginElements();
+                    }
+                }, 100);
+            }
+            // Clear OTP inputs on error
+            this.otpInputs.forEach((input) => {
+                input.value = "";
+                input.disabled = false;
+            });
+            this.otp = "";
+            if (this.otpInputs[0]) {
+                this.otpInputs[0].focus();
+            }
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Handle resend OTP
+     */
+    async handleResendOtp() {
+        if (this.resendCooldown > 0) {
+            return;
+        }
+        // Re-enable auto-submit when resending OTP
+        this.autoSubmitEnabled = true;
+        this.setError(null);
+        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",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ email: this.email }),
+                });
+                if (!response.ok) {
+                    throw new Error("Failed to resend OTP");
+                }
+            }
+            // Clear OTP inputs
+            this.otpInputs.forEach((input) => {
+                input.value = "";
+                input.disabled = false;
+            });
+            this.otp = "";
+            if (this.otpInputs[0]) {
+                this.otpInputs[0].focus();
+            }
+            // Start cooldown
+            this.startResendCooldown();
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Failed to resend OTP";
+            this.setError(errorMessage);
+            this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Start resend cooldown timer
+     */
+    startResendCooldown() {
+        // Clear any existing cooldown timer
+        if (this.resendCooldownTimer) {
+            clearInterval(this.resendCooldownTimer);
+        }
+        this.resendCooldown = 60; // 60 seconds cooldown
+        // 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";
+        }
+        // Start countdown timer
+        this.resendCooldownTimer = setInterval(() => {
+            if (this.resendCooldown > 0) {
+                this.resendCooldown--;
+                if (this.resendButton) {
+                    this.resendButton.textContent = `Resend (${this.resendCooldown}s)`;
+                }
+            }
+            else {
+                // Cooldown complete, enable resend
+                if (this.resendCooldownTimer) {
+                    clearInterval(this.resendCooldownTimer);
+                    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";
+                }
+            }
+        }, 1000);
+    }
+    /**
+     * 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;
+            if (otpErrorElement) {
+                if (message) {
+                    otpErrorElement.textContent = formatMessage(message);
+                    otpErrorElement.style.display = "block";
+                }
+                else {
+                    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) {
+                        this.hideLoginElements();
+                    }
+                }, 0);
+                setTimeout(() => {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 50);
+                setTimeout(() => {
+                    if (this.otpVerificationScreen &&
+                        this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 150);
+                return;
+            }
+        }
+        // Fallback to regular error element
+        if (!this.errorElement)
+            return;
+        if (message) {
+            this.errorElement.textContent = formatMessage(message);
+            this.errorElement.style.display = "block";
+        }
+        else {
+            this.errorElement.style.display = "none";
+        }
+    }
+    /**
+     * Set loading state
+     */
+    setLoading(loading, buttonType) {
+        this.loading = loading;
+        // Track which button is active
+        if (loading && buttonType) {
+            this.activeButton = buttonType;
+        }
+        else if (!loading) {
+            this.activeButton = null;
+        }
+        // Email/Continue button
+        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...";
+            }
+            else if (!loading) {
+                this.continueButton.textContent = this.otpSent
+                    ? "Verify OTP"
+                    : "Continue";
+            }
+        }
+        // Email arrow button (when all auth methods are enabled)
+        if (this.emailArrowButton) {
+            this.emailArrowButton.disabled = loading || !this.email;
+        }
+        // Google button
+        if (this.googleButton) {
+            this.googleButton.disabled = loading;
+            // Google button doesn't change text, just gets disabled
+        }
+        // Twitter button
+        if (this.twitterButton) {
+            this.twitterButton.disabled = loading;
+        }
+        // Discord button
+        if (this.discordButton) {
+            this.discordButton.disabled = loading;
+        }
+        // Passkey login button
+        if (this.passkeyLoginButton) {
+            this.passkeyLoginButton.disabled = loading;
+            // Show loading text only if this is the active button
+            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);
+                if (textNodes.length > 0) {
+                    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.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"}`;
+                if (textNodes.length > 0) {
+                    textNodes[0].textContent = passkeyText;
+                }
+                else {
+                    // 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";
+            }
+        }
+        // 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";
+            }
+            else {
+                this.passkeySignupLink.style.opacity = "1";
+                this.passkeySignupLink.style.pointerEvents = "auto";
+                this.passkeySignupLink.style.cursor = "pointer";
+            }
+        }
+        // Email input
+        if (this.emailInput) {
+            this.emailInput.disabled = loading || this.otpSent;
+        }
+        // OTP input
+        if (this.otpInput) {
+            this.otpInput.disabled = loading;
+        }
+        // Verify button
+        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";
+            }
+            else {
+                this.verifyButton.textContent = "Verify";
+                this.verifyButton.style.opacity = "1";
+                this.verifyButton.style.cursor = "pointer";
+            }
+        }
+    }
+    /**
+     * Update button state
+     */
+    updateButtonState() {
+        const isValid = isValidEmail(this.email.trim());
+        if (this.continueButton) {
+            this.continueButton.disabled = this.loading || !isValid;
+        }
+        // Update arrow button state (when all auth methods are enabled)
+        if (this.emailArrowButton) {
+            this.emailArrowButton.disabled = this.loading || !isValid;
+        }
+    }
+    /**
+     * Update theme
+     */
+    setTheme(theme) {
+        this.config.theme = theme;
+        if (this.rootElement) {
+            this.rootElement.className = `onboarding-container onboarding-theme-${theme} ${this.config.className}`;
+        }
+    }
+    /**
+     * Show/hide component
+     */
+    setVisible(visible) {
+        if (this.rootElement) {
+            this.rootElement.style.display = visible ? "" : "none";
+        }
+    }
+    /**
+     * Reset OTP screen and show initial login form
+     */
+    resetToLoginForm() {
+        // Clear resend cooldown timer
+        if (this.resendCooldownTimer) {
+            clearInterval(this.resendCooldownTimer);
+            this.resendCooldownTimer = null;
+        }
+        this.resendCooldown = 0;
+        // Clear OTP verification screen
+        if (this.otpVerificationScreen) {
+            this.otpVerificationScreen.remove();
+            this.otpVerificationScreen = null;
+        }
+        // Remove loading/error mode classes and OTP active class
+        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");
+        }
+        // Hide loading modal if exists (for inline components)
+        this.hideLoadingModal();
+        // Remove error container if exists
+        const errorContainer = this.rootElement?.querySelector(".onboarding-error-container");
+        if (errorContainer) {
+            errorContainer.remove();
+        }
+        // Clear OTP inputs
+        this.otpInputs.forEach((input) => {
+            input.value = "";
+            input.disabled = false;
+        });
+        this.otpInputs = [];
+        this.otp = "";
+        this.otpSent = false;
+        this.loading = false;
+        // Clear timer
+        // Clear resend cooldown timer
+        if (this.resendCooldownTimer) {
+            clearInterval(this.resendCooldownTimer);
+            this.resendCooldownTimer = null;
+        }
+        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";
+        }
+        // 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 socialMethods = [
+            { 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";
+        }
+        // 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";
+        }
+        if (this.passkeyDivider) {
+            this.passkeyDivider.style.display =
+                showPasskey && (showEmail || socialMethods.length > 0) ? "" : "none";
+        }
+        if (this.googleButton) {
+            this.googleButton.style.display = showGoogle ? "" : "none";
+            this.googleButton.disabled = false;
+        }
+        if (this.twitterButton) {
+            this.twitterButton.style.display = showTwitter ? "" : "none";
+            this.twitterButton.disabled = false;
+        }
+        if (this.discordButton) {
+            this.discordButton.style.display = showDiscord ? "" : "none";
+            this.discordButton.disabled = false;
+        }
+        if (this.socialGrid) {
+            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";
+        }
+        if (this.passkeySignupLink) {
+            this.passkeySignupLink.style.display = showPasskey ? "" : "none";
+        }
+        if (this.passkeyErrorElement) {
+            this.passkeyErrorElement.style.display = "none"; // Hide error when resetting
+        }
+        // Show external wallets again when returning to login form
+        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 = "";
+        }
+        // Clear error messages
+        this.setError(null);
+        if (this.errorElement) {
+            this.errorElement.style.display = "none";
+        }
+        // Reset email input - enable it and clear value
+        if (this.emailInput) {
+            this.emailInput.value = "";
+            this.emailInput.disabled = false;
+            this.email = "";
+        }
+        // Reset OTP group (hidden input)
+        if (this.otpGroup) {
+            this.otpGroup.style.display = "none";
+            if (this.otpInput) {
+                this.otpInput.value = "";
+                this.otpInput.disabled = false;
+            }
+        }
+        // Reset button state - ensure it shows "Continue" and is properly enabled/disabled
+        if (this.continueButton) {
+            this.continueButton.textContent =
+                this.config.labels?.emailButton || "Continue";
+        }
+        // Update button state to ensure everything is in sync
+        this.updateButtonState();
+    }
+    /**
+     * Close the modal
+     */
+    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");
+        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");
+            // Remove after animation
+            setTimeout(() => {
+                this.destroy();
+            }, 200);
+        }
+        else {
+            this.destroy();
+        }
+        // Restore body scroll
+        document.body.style.overflow = "";
+        // Call onClose callback
+        if (this.config.onClose) {
+            this.config.onClose();
+        }
+    }
+    /**
+     * Destroy the component
+     */
+    destroy() {
+        // Reset to login form before destroying to ensure clean state
+        this.resetToLoginForm();
+        // Clean up modal
+        if (this.modalOverlay && this.modalOverlay.parentNode) {
+            this.modalOverlay.parentNode.removeChild(this.modalOverlay);
+        }
+        // Clean up inline
+        if (this.rootElement && this.rootElement.parentNode) {
+            this.rootElement.parentNode.removeChild(this.rootElement);
+        }
+        // Restore body scroll
+        document.body.style.overflow = "";
+        // Clear references
+        this.rootElement = null;
+        this.modalOverlay = null;
+        this.modalContent = null;
+        this.emailInput = null;
+        this.otpInput = null;
+        this.emailForm = null;
+        this.continueButton = null;
+        this.googleButton = null;
+        this.errorElement = null;
+        this.otpGroup = null;
+        this.otpVerificationScreen = null; // Clear OTP screen reference
+        this.externalWalletContainer = null; // Clear external wallet container reference
+        this.externalWalletDivider = null; // Clear external wallet divider reference
+    }
+    /**
+     * Create DOM element helper
+     */
+    createElement(tag, options = {}) {
+        const element = document.createElement(tag);
+        Object.keys(options).forEach((key) => {
+            const value = options[key];
+            if (key === "className" && typeof value === "string") {
+                element.className = value;
+            }
+            else if (key === "textContent" &&
+                (typeof value === "string" || value === null)) {
+                element.textContent = value;
+            }
+            else if (key === "innerHTML" && typeof value === "string") {
+                element.innerHTML = value;
+            }
+            else if (key === "style" && typeof value === "string") {
+                element.setAttribute("style", value);
+            }
+            else if (key === "htmlFor" && typeof value === "string") {
+                // Use setAttribute for htmlFor to ensure it works correctly
+                element.setAttribute("for", value);
+            }
+            else if (key.startsWith("aria-") ||
+                key === "role" ||
+                key === "tabIndex" ||
+                key === "autocomplete" ||
+                key === "noValidate") {
+                // Handle ARIA attributes and other special attributes
+                if (key === "tabIndex") {
+                    element.tabIndex = value;
+                }
+                else if (key === "noValidate") {
+                    element.noValidate = value;
+                }
+                else {
+                    element.setAttribute(key, String(value));
+                }
+            }
+            else if (key !== "style" && value !== undefined) {
+                element[key] = value;
+            }
+        });
+        return element;
+    }
+    /**
+     * Parse style object or string
+     */
+    parseStyle(style) {
+        if (!style)
+            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();
+            return `${cssKey}: ${value}`;
+        })
+            .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", "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;
+    }
+    /**
+     * 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 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: "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: "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);
+            svg.appendChild(path);
+        });
+        return svg;
+    }
+    /**
+     * 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");
+        svg.appendChild(path);
+        return svg;
+    }
+    /**
+     * 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");
+        // 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");
+        // 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);
+        svg.appendChild(path);
+        return svg;
+    }
+    /**
+     * 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");
+        svg.appendChild(path);
+        return svg;
+    }
+    /**
+     * 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");
+        svg.appendChild(path);
+        return svg;
+    }
+    /**
+     * Handle passkey login
+     */
+    async handlePasskeyLogin() {
+        if (this.loading)
+            return;
+        try {
+            this.setLoading(true, "passkey");
+            this.hidePasskeyError();
+            if (this.config.onPasskeyLogin) {
+                await this.config.onPasskeyLogin();
+                // Call onLoginSuccess to close modal and update state
+                if (this.config.onLoginSuccess) {
+                    this.config.onLoginSuccess({ user: null });
+                }
+            }
+            else {
+                throw new Error("Passkey login handler not configured");
+            }
+        }
+        catch (error) {
+            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"));
+            }
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Handle passkey signup
+     */
+    async handlePasskeySignup() {
+        if (this.loading)
+            return;
+        try {
+            this.setLoading(true, "passkey");
+            this.hidePasskeyError();
+            if (this.config.onPasskeySignup) {
+                await this.config.onPasskeySignup();
+                // Call onLoginSuccess to close modal and update state
+                if (this.config.onLoginSuccess) {
+                    this.config.onLoginSuccess({ user: null });
+                }
+            }
+            else {
+                throw new Error("Passkey signup handler not configured");
+            }
+        }
+        catch (error) {
+            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"));
+            }
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Show passkey-specific error near the passkey controls
+     */
+    showPasskeyError(message) {
+        if (!this.passkeyErrorElement)
+            return;
+        this.passkeyErrorElement.textContent = message;
+        this.passkeyErrorElement.style.display = "block";
+    }
+    /**
+     * Hide passkey-specific error
+     */
+    hidePasskeyError() {
+        if (!this.passkeyErrorElement)
+            return;
+        this.passkeyErrorElement.textContent = "";
+        this.passkeyErrorElement.style.display = "none";
+    }
+}
+export default OnboardingUIWeb;
+//# sourceMappingURL=OnboardingUIWeb.js.map