@proveanything/smartlinks-auth-ui 0.6.2 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CUSTOMIZATION_GUIDE.md +2 -0
  2. package/README.md +2 -0
  3. package/dist/components/EmailAuthForm.d.ts +2 -0
  4. package/dist/components/EmailAuthForm.d.ts.map +1 -1
  5. package/dist/components/SmartlinksAuthUI.d.ts.map +1 -1
  6. package/dist/index.css +1 -1
  7. package/dist/index.css.map +1 -1
  8. package/dist/index.esm.css +1 -1
  9. package/dist/index.esm.css.map +1 -1
  10. package/dist/index.esm.js +24 -15
  11. package/dist/index.esm.js.map +1 -1
  12. package/dist/index.js +24 -15
  13. package/dist/index.js.map +1 -1
  14. package/dist/types.d.ts +4 -0
  15. package/dist/types.d.ts.map +1 -1
  16. package/package.json +1 -1
package/dist/index.esm.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["AuthContainer.css","AuthModeToggle.css","AuthForm.css","OTPInput.css","style.css","PhoneInput.css"],"names":[],"mappings":"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","file":"index.esm.css","sourcesContent":[".auth-container {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n background: linear-gradient(135deg, var(--auth-bg-color, #e0f2fe) 0%, #f0f9ff 100%);\r\n font-family: var(--auth-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);\r\n}\r\n\r\n.auth-theme-dark.auth-container {\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n}\r\n\r\n/* Minimal mode - transparent, no framing, inherits from parent, but centered */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n background: transparent;\r\n font-family: inherit;\r\n}\r\n\r\n.auth-card {\r\n width: 100%;\r\n max-width: 440px;\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 40px rgba(59, 130, 246, 0.1);\r\n padding: 1.75rem;\r\n animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.auth-theme-dark .auth-card {\r\n background: #1e293b;\r\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/* Inherit host app's card background when inheritHostStyles is enabled */\r\n.auth-inherit-host .auth-card {\r\n background: hsl(var(--card, 0 0% 100%));\r\n color: hsl(var(--card-foreground, 215 25% 15%));\r\n border: 1px solid hsl(var(--border, 214 32% 88%));\r\n}\r\n\r\n.auth-inherit-host.auth-theme-dark .auth-card {\r\n background: hsl(var(--card, 215 25% 14%));\r\n color: hsl(var(--card-foreground, 210 40% 98%));\r\n border-color: hsl(var(--border, 217 33% 20%));\r\n}\r\n\r\n/* Minimal card - no background, border, shadow, or animation */\r\n.auth-minimal-card {\r\n width: 100%;\r\n max-width: 440px;\r\n background: transparent;\r\n border-radius: 0;\r\n box-shadow: none;\r\n padding: 0;\r\n animation: none;\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.auth-header {\r\n text-align: center;\r\n margin-bottom: 1.25rem;\r\n}\r\n\r\n.auth-logo {\r\n display: inline-flex;\r\n margin-bottom: 0.75rem;\r\n animation: float 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes float {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n 50% {\r\n transform: translateY(-8px);\r\n }\r\n}\r\n\r\n.auth-title {\r\n font-size: 1.75rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin: 0;\r\n}\r\n\r\n.auth-subtitle {\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n margin: 0.25rem 0 0 0;\r\n}\r\n\r\n.auth-theme-dark .auth-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-theme-dark .auth-subtitle {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-content {\r\n /* Content styles handled by child components */\r\n}\r\n\r\n.auth-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n padding-top: 1rem;\r\n margin-top: 1rem;\r\n border-top: 1px solid #e2e8f0;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-theme-dark .auth-footer {\r\n border-top-color: #334155;\r\n}\r\n\r\n.auth-footer a {\r\n color: var(--auth-primary-color, #3B82F6);\r\n text-decoration: none;\r\n}\r\n\r\n.auth-footer a:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.auth-footer span {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-theme-dark .auth-footer span {\r\n color: #475569;\r\n}\r\n\r\n.auth-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid #e2e8f0;\r\n border-top-color: var(--auth-primary-color, #3B82F6);\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n margin: 0 auto;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Mobile optimizations - reduced white space and condensed layout */\r\n@media (max-width: 640px) {\r\n .auth-container {\r\n padding: 0.5rem;\r\n min-height: 100vh;\r\n min-height: 100dvh; /* Dynamic viewport height for mobile browsers */\r\n }\r\n\r\n .auth-card {\r\n padding: 1.5rem 1.25rem;\r\n border-radius: 12px;\r\n max-width: 100%;\r\n }\r\n \r\n .auth-header {\r\n margin-bottom: 1.25rem;\r\n }\r\n \r\n .auth-logo {\r\n margin-bottom: 0.75rem;\r\n }\r\n \r\n .auth-title {\r\n font-size: 1.375rem;\r\n line-height: 1.3;\r\n }\r\n \r\n .auth-subtitle {\r\n font-size: 0.8125rem;\r\n margin-top: 0.125rem;\r\n }\r\n \r\n .auth-footer {\r\n padding-top: 0.75rem;\r\n margin-top: 0.75rem;\r\n font-size: 0.8125rem;\r\n gap: 0.5rem;\r\n }\r\n}\r\n\r\n/* Extra small devices (< 375px) */\r\n@media (max-width: 374px) {\r\n .auth-card {\r\n padding: 1.25rem 1rem;\r\n }\r\n \r\n .auth-title {\r\n font-size: 1.25rem;\r\n }\r\n \r\n .auth-subtitle {\r\n font-size: 0.75rem;\r\n }\r\n}\r\n\r\n/* ============= Account Management Styles ============= */\r\n\r\n.account-section {\r\n padding: 1.5rem 0;\r\n border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .account-section {\r\n border-bottom-color: #334155;\r\n}\r\n\r\n.account-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.section-title {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n color: #1e293b;\r\n margin: 0 0 1rem 0;\r\n}\r\n\r\n.auth-theme-dark .section-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.current-info {\r\n background: #f8fafc;\r\n padding: 1rem;\r\n border-radius: 8px;\r\n margin-bottom: 1rem;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-theme-dark .current-info {\r\n background: #0f172a;\r\n}\r\n\r\n.current-info p {\r\n margin: 0.25rem 0;\r\n color: #475569;\r\n}\r\n\r\n.auth-theme-dark .current-info p {\r\n color: #94a3b8;\r\n}\r\n\r\n.current-info strong {\r\n color: #1e293b;\r\n}\r\n\r\n.auth-theme-dark .current-info strong {\r\n color: #f1f5f9;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: #334155;\r\n margin-bottom: 0.375rem;\r\n}\r\n\r\n.auth-theme-dark .form-group label {\r\n color: #cbd5e1;\r\n}\r\n\r\n.button-group {\r\n display: flex;\r\n gap: 0.75rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.danger-zone {\r\n background: #fef2f2;\r\n padding: 1.5rem;\r\n border-radius: 8px;\r\n border: 1px solid #fecaca;\r\n}\r\n\r\n.auth-theme-dark .danger-zone {\r\n background: #450a0a;\r\n border-color: #991b1b;\r\n}\r\n\r\n.text-danger {\r\n color: #dc2626 !important;\r\n}\r\n\r\n.text-success {\r\n color: #16a34a;\r\n}\r\n\r\n.text-warning {\r\n color: #ea580c;\r\n}\r\n\r\n.auth-theme-dark .text-success {\r\n color: #22c55e;\r\n}\r\n\r\n.auth-theme-dark .text-warning {\r\n color: #fb923c;\r\n}\r\n\r\n.delete-confirm {\r\n margin-top: 1rem;\r\n}\r\n\r\n.warning-text {\r\n color: #dc2626;\r\n font-size: 0.875rem;\r\n margin: 0 0 1rem 0;\r\n padding: 0.75rem;\r\n background: #fee2e2;\r\n border-radius: 6px;\r\n line-height: 1.5;\r\n}\r\n\r\n.auth-theme-dark .warning-text {\r\n background: #7f1d1d;\r\n color: #fca5a5;\r\n}\r\n\r\n.button-danger {\r\n background: #dc2626 !important;\r\n color: white !important;\r\n}\r\n\r\n.button-danger:hover:not(:disabled) {\r\n background: #b91c1c !important;\r\n}\r\n\r\n.button-secondary {\r\n background: #e2e8f0 !important;\r\n color: #1e293b !important;\r\n}\r\n\r\n.auth-theme-dark .button-secondary {\r\n background: #334155 !important;\r\n color: #f1f5f9 !important;\r\n}\r\n\r\n.button-secondary:hover:not(:disabled) {\r\n background: #cbd5e1 !important;\r\n}\r\n\r\n.auth-theme-dark .button-secondary:hover:not(:disabled) {\r\n background: #475569 !important;\r\n}\r\n\r\n.photo-preview {\r\n display: block;\r\n object-fit: cover;\r\n}\r\n\r\n/* Mobile optimizations for account management */\r\n@media (max-width: 640px) {\r\n .account-section {\r\n padding: 1rem 0;\r\n }\r\n \r\n .section-title {\r\n font-size: 1rem;\r\n }\r\n \r\n .current-info {\r\n padding: 0.75rem;\r\n }\r\n \r\n .button-group {\r\n flex-direction: column;\r\n }\r\n \r\n .button-group .auth-button {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Account Management Layout */\r\n.account-management {\r\n width: 100%;\r\n max-width: 600px;\r\n}\r\n\r\n.account-section {\r\n background: white;\r\n border-radius: 8px;\r\n padding: 1.25rem;\r\n margin-bottom: 1rem;\r\n border: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .account-section {\r\n background: #1e293b;\r\n border-color: #334155;\r\n}\r\n\r\n.account-field {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n gap: 1rem;\r\n align-items: start;\r\n}\r\n\r\n.field-info {\r\n min-width: 0;\r\n}\r\n\r\n.field-label {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: #64748b;\r\n text-transform: uppercase;\r\n letter-spacing: 0.025em;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.auth-theme-dark .field-label {\r\n color: #94a3b8;\r\n}\r\n\r\n.field-value {\r\n font-size: 0.9375rem;\r\n color: #1e293b;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n word-break: break-word;\r\n}\r\n\r\n.auth-theme-dark .field-value {\r\n color: #f1f5f9;\r\n}\r\n\r\n.verification-badge {\r\n display: inline-block;\r\n font-size: 0.6875rem;\r\n padding: 0.125rem 0.5rem;\r\n border-radius: 9999px;\r\n font-weight: 500;\r\n white-space: nowrap;\r\n}\r\n\r\n.verification-badge.verified {\r\n background: #dcfce7;\r\n color: #16a34a;\r\n}\r\n\r\n.auth-theme-dark .verification-badge.verified {\r\n background: #14532d;\r\n color: #86efac;\r\n}\r\n\r\n.verification-badge.unverified {\r\n background: #fef3c7;\r\n color: #d97706;\r\n}\r\n\r\n.auth-theme-dark .verification-badge.unverified {\r\n background: #78350f;\r\n color: #fcd34d;\r\n}\r\n\r\n.account-field .auth-button {\r\n white-space: nowrap;\r\n padding: 0.5rem 1rem;\r\n font-size: 0.875rem;\r\n height: auto;\r\n align-self: start;\r\n}\r\n\r\n.edit-form {\r\n width: 100%;\r\n margin-top: 1rem;\r\n padding-top: 1rem;\r\n border-top: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .edit-form {\r\n border-top-color: #334155;\r\n}\r\n\r\n.edit-form .form-group {\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.edit-form .button-group {\r\n margin-top: 1rem;\r\n display: flex;\r\n gap: 0.5rem;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .account-field {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .account-field .auth-button {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n \r\n .edit-form .button-group {\r\n flex-direction: column;\r\n }\r\n \r\n .edit-form .button-group .auth-button {\r\n width: 100%;\r\n }\r\n}\r\n\r\n",".auth-mode-toggle {\r\n display: flex;\r\n gap: 0;\r\n margin-bottom: 1.25rem;\r\n background: #f1f5f9;\r\n border-radius: 0.5rem;\r\n padding: 0.25rem;\r\n}\r\n\r\n.auth-theme-dark .auth-mode-toggle {\r\n background: #1e293b;\r\n}\r\n\r\n.auth-mode-toggle-button {\r\n flex: 1;\r\n padding: 0.625rem 1rem;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n background: transparent;\r\n color: #64748b;\r\n border: none;\r\n border-radius: 0.375rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.auth-mode-toggle-button:hover:not(:disabled) {\r\n color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-mode-toggle-button:hover:not(:disabled) {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-mode-toggle-button--active {\r\n background: white;\r\n color: #1e293b;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.auth-theme-dark .auth-mode-toggle-button--active {\r\n background: #334155;\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-mode-toggle-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Inherit host styles */\r\n.auth-inherit-host .auth-mode-toggle {\r\n background: hsl(var(--muted, 210 40% 96.1%));\r\n}\r\n\r\n.auth-inherit-host .auth-mode-toggle-button--active {\r\n background: hsl(var(--background, 0 0% 100%));\r\n color: hsl(var(--foreground, 222.2 84% 4.9%));\r\n}\r\n\r\n/* Mobile optimizations */\r\n@media (max-width: 640px) {\r\n .auth-mode-toggle {\r\n margin-bottom: 1rem;\r\n }\r\n \r\n .auth-mode-toggle-button {\r\n padding: 0.5rem 0.75rem;\r\n font-size: 0.8125rem;\r\n }\r\n}\r\n\r\n@media (max-width: 374px) {\r\n .auth-mode-toggle-button {\r\n padding: 0.5rem;\r\n font-size: 0.75rem;\r\n }\r\n}\r\n",".auth-form {\r\n width: 100%;\r\n}\r\n\r\n.auth-form-header {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.auth-form-title {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin: 0 0 0.5rem 0;\r\n}\r\n\r\n.auth-theme-dark .auth-form-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-form-subtitle {\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n margin: 0;\r\n}\r\n\r\n.auth-theme-dark .auth-form-subtitle {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-error {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.75rem 1rem;\r\n background: #fef2f2;\r\n border: 1px solid #fecaca;\r\n border-radius: 0.5rem;\r\n color: #dc2626;\r\n font-size: 0.875rem;\r\n margin-bottom: 1rem;\r\n animation: shake 0.4s ease;\r\n}\r\n\r\n.auth-theme-dark .auth-error {\r\n background: #7f1d1d;\r\n border-color: #991b1b;\r\n color: #fca5a5;\r\n}\r\n\r\n@keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-8px); }\r\n 75% { transform: translateX(8px); }\r\n}\r\n\r\n.auth-form-group {\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.auth-label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: #334155;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.auth-theme-dark .auth-label {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-input {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n font-size: 1rem;\r\n color: #1e293b;\r\n background: #f8fafc;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 0.5rem;\r\n transition: all 0.2s ease;\r\n box-sizing: border-box;\r\n}\r\n\r\n.auth-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.auth-input:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-theme-dark .auth-input {\r\n background: #0f172a;\r\n border-color: #334155;\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-theme-dark .auth-input:focus {\r\n background: #1e293b;\r\n border-color: #3b82f6;\r\n}\r\n\r\n.auth-form-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.auth-link {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font-size: 0.875rem;\r\n color: #3b82f6;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.auth-link:hover:not(:disabled) {\r\n color: #1d4ed8;\r\n text-decoration: underline;\r\n}\r\n\r\n.auth-link:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-link-bold {\r\n font-weight: 600;\r\n}\r\n\r\n.auth-button {\r\n width: 100%;\r\n padding: 0.875rem 1.5rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.auth-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-button-primary {\r\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n.auth-button-primary:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);\r\n}\r\n\r\n.auth-button-primary:active:not(:disabled) {\r\n transform: translateY(0);\r\n}\r\n\r\n/* Inherit host app's Tailwind CSS variables */\r\n.auth-inherit-host .auth-button-primary {\r\n background: hsl(var(--primary));\r\n color: hsl(var(--primary-foreground));\r\n box-shadow: 0 4px 12px hsl(var(--primary) / 0.25);\r\n}\r\n\r\n.auth-inherit-host .auth-button-primary:hover:not(:disabled) {\r\n background: hsl(var(--primary) / 0.9);\r\n box-shadow: 0 6px 20px hsl(var(--primary) / 0.35);\r\n}\r\n\r\n.auth-inherit-host .auth-button-secondary {\r\n background: hsl(var(--secondary));\r\n color: hsl(var(--secondary-foreground));\r\n border-color: hsl(var(--border));\r\n}\r\n\r\n.auth-inherit-host .auth-button-secondary:hover:not(:disabled) {\r\n background: hsl(var(--secondary) / 0.8);\r\n}\r\n\r\n.auth-inherit-host .auth-link {\r\n color: hsl(var(--primary));\r\n}\r\n\r\n.auth-inherit-host .auth-link:hover:not(:disabled) {\r\n color: hsl(var(--primary) / 0.8);\r\n}\r\n\r\n.auth-inherit-host .auth-input:focus {\r\n border-color: hsl(var(--primary));\r\n box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\r\n}\r\n\r\n.auth-button-secondary {\r\n background: white;\r\n color: #334155;\r\n border: 1px solid #e2e8f0;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.auth-button-secondary:hover:not(:disabled) {\r\n background: #f8fafc;\r\n border-color: #cbd5e1;\r\n}\r\n\r\n.auth-theme-dark .auth-button-secondary {\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-button-secondary:hover:not(:disabled) {\r\n background: #1e293b;\r\n border-color: #475569;\r\n}\r\n\r\n.auth-spinner {\r\n display: inline-block;\r\n width: 18px;\r\n height: 18px;\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-top-color: white;\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n.auth-divider {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n margin-top: 1rem;\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n}\r\n\r\n.auth-theme-dark .auth-divider {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-provider-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.625rem;\r\n margin-top: 1rem;\r\n}\r\n\r\n.auth-provider-button {\r\n width: 100%;\r\n padding: 0.875rem 1.5rem;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n background: white;\r\n color: #334155;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n}\r\n\r\n.auth-provider-button:hover:not(:disabled) {\r\n background: #f8fafc;\r\n border-color: #cbd5e1;\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.auth-provider-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-theme-dark .auth-provider-button {\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-provider-button:hover:not(:disabled) {\r\n background: #1e293b;\r\n border-color: #475569;\r\n}\r\n\r\n.auth-or-divider {\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n margin: 1rem 0;\r\n color: #94a3b8;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-or-divider::before,\r\n.auth-or-divider::after {\r\n content: '';\r\n flex: 1;\r\n border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-or-divider span {\r\n padding: 0 1rem;\r\n}\r\n\r\n.auth-theme-dark .auth-or-divider::before,\r\n.auth-theme-dark .auth-or-divider::after {\r\n border-color: #334155;\r\n}\r\n\r\n/* Mobile optimizations - condensed spacing and sizing */\r\n@media (max-width: 640px) {\r\n .auth-form-header {\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .auth-form-title {\r\n font-size: 1.125rem;\r\n margin-bottom: 0.375rem;\r\n }\r\n \r\n .auth-form-subtitle {\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-error {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.8125rem;\r\n margin-bottom: 0.875rem;\r\n }\r\n \r\n .auth-form-group {\r\n margin-bottom: 0.875rem;\r\n }\r\n \r\n .auth-label {\r\n font-size: 0.8125rem;\r\n margin-bottom: 0.375rem;\r\n }\r\n \r\n .auth-input {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.9375rem;\r\n }\r\n \r\n .auth-form-footer {\r\n margin-bottom: 1rem;\r\n }\r\n \r\n .auth-link {\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-button,\r\n .auth-provider-button {\r\n padding: 0.75rem 1rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .auth-divider {\r\n margin-top: 1rem;\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-provider-buttons {\r\n gap: 0.625rem;\r\n margin-top: 1rem;\r\n }\r\n \r\n .auth-or-divider {\r\n margin: 1rem 0;\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-or-divider span {\r\n padding: 0 0.75rem;\r\n }\r\n}\r\n\r\n/* Extra small devices */\r\n@media (max-width: 374px) {\r\n .auth-form-title {\r\n font-size: 1rem;\r\n }\r\n \r\n .auth-input {\r\n padding: 0.5rem 0.75rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .auth-button,\r\n .auth-provider-button {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.8125rem;\r\n }\r\n}\r\n",".otp-input-container {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: center;\r\n}\r\n\r\n.otp-input-box {\r\n width: 48px;\r\n height: 56px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n text-align: center;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 8px;\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n transition: all 0.2s ease;\r\n outline: none;\r\n}\r\n\r\n.otp-input-box:focus {\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.otp-input-box:disabled {\r\n background-color: #f3f4f6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Dark theme support */\r\n.auth-theme-dark .otp-input-box {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n.auth-theme-dark .otp-input-box:focus {\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n}\r\n\r\n.auth-theme-dark .otp-input-box:disabled {\r\n background-color: #1f2937;\r\n}\r\n\r\n/* Mobile responsiveness - more compact for mobile devices */\r\n@media (max-width: 640px) {\r\n .otp-input-box {\r\n width: 36px;\r\n height: 44px;\r\n font-size: 18px;\r\n }\r\n \r\n .otp-input-container {\r\n gap: 5px;\r\n }\r\n}\r\n\r\n/* Extra small devices - very compact */\r\n@media (max-width: 374px) {\r\n .otp-input-box {\r\n width: 32px;\r\n height: 40px;\r\n font-size: 16px;\r\n }\r\n \r\n .otp-input-container {\r\n gap: 4px;\r\n }\r\n}\r\n","/* CSS variables. */\r\n:root {\r\n\t--PhoneInput-color--focus: #03b2cb;\r\n\t--PhoneInputInternationalIconPhone-opacity: 0.8;\r\n\t--PhoneInputInternationalIconGlobe-opacity: 0.65;\r\n\t--PhoneInputCountrySelect-marginRight: 0.35em;\r\n\t--PhoneInputCountrySelectArrow-width: 0.3em;\r\n\t--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\r\n\t--PhoneInputCountrySelectArrow-borderWidth: 1px;\r\n\t--PhoneInputCountrySelectArrow-opacity: 0.45;\r\n\t--PhoneInputCountrySelectArrow-color: currentColor;\r\n\t--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountrySelectArrow-transform: rotate(45deg);\r\n\t--PhoneInputCountryFlag-aspectRatio: 1.5;\r\n\t--PhoneInputCountryFlag-height: 1em;\r\n\t--PhoneInputCountryFlag-borderWidth: 1px;\r\n\t--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\r\n\t--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\r\n}\r\n\r\n.PhoneInput {\r\n\t/* This is done to stretch the contents of this component. */\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.PhoneInputInput {\r\n\t/* The phone number input stretches to fill all empty space */\r\n\tflex: 1;\r\n\t/* The phone number input should shrink\r\n\t to make room for the extension input */\r\n\tmin-width: 0;\r\n}\r\n\r\n.PhoneInputCountryIcon {\r\n\twidth: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\r\n\theight: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--square {\r\n\twidth: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--border {\r\n\t/* Removed `background-color` because when an `<img/>` was still loading\r\n\t it would show a dark gray rectangle. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom. */\r\n\tbackground-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\r\n\t/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom,\r\n\t so an additional \"inset\" border is added. */\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\r\n}\r\n\r\n.PhoneInputCountryIconImg {\r\n\t/* Fixes weird vertical space above the flag icon. */\r\n\t/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */\r\n\tdisplay: block;\r\n\t/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.\r\n\t Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.PhoneInputInternationalIconPhone {\r\n\topacity: var(--PhoneInputInternationalIconPhone-opacity);\r\n}\r\n\r\n.PhoneInputInternationalIconGlobe {\r\n\topacity: var(--PhoneInputInternationalIconGlobe-opacity);\r\n}\r\n\r\n/* Styling native country `<select/>`. */\r\n\r\n.PhoneInputCountry {\r\n\tposition: relative;\r\n\talign-self: stretch;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tmargin-right: var(--PhoneInputCountrySelect-marginRight);\r\n}\r\n\r\n.PhoneInputCountrySelect {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\tborder: 0;\r\n\topacity: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.PhoneInputCountrySelect[disabled],\r\n.PhoneInputCountrySelect[readonly] {\r\n\tcursor: default;\r\n}\r\n\r\n.PhoneInputCountrySelectArrow {\r\n\tdisplay: block;\r\n\tcontent: '';\r\n\twidth: var(--PhoneInputCountrySelectArrow-width);\r\n\theight: var(--PhoneInputCountrySelectArrow-width);\r\n\tmargin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\r\n\tborder-style: solid;\r\n\tborder-color: var(--PhoneInputCountrySelectArrow-color);\r\n\tborder-top-width: 0;\r\n\tborder-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\tborder-left-width: 0;\r\n\tborder-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\ttransform: var(--PhoneInputCountrySelectArrow-transform);\r\n\topacity: var(--PhoneInputCountrySelectArrow-opacity);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}",".phone-input-wrapper {\r\n width: 100%;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInput {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput {\r\n flex: 1;\r\n width: 100%;\r\n padding: 0.75rem;\r\n font-size: 0.9375rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n transition: all 0.2s;\r\n font-family: inherit;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput:disabled {\r\n background-color: #f3f4f6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountry {\r\n margin-right: 0.5rem;\r\n padding: 0.5rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountry:hover {\r\n background-color: #f9fafb;\r\n border-color: #9ca3af;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountrySelect {\r\n padding: 0.5rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n font-size: 0.9375rem;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 24px;\r\n height: 24px;\r\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountrySelectArrow {\r\n width: 0.5rem;\r\n height: 0.5rem;\r\n margin-left: 0.5rem;\r\n opacity: 0.5;\r\n}\r\n\r\n/* Dark theme support */\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus {\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled {\r\n background-color: #1f2937;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountry {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover {\r\n background-color: #4b5563;\r\n border-color: #6b7280;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n/* Mobile responsiveness - condensed */\r\n@media (max-width: 640px) {\r\n .phone-input-wrapper .PhoneInputInput {\r\n padding: 0.625rem 0.75rem;\r\n font-size: 0.9375rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountry {\r\n padding: 0.375rem;\r\n margin-right: 0.375rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n}\r\n\r\n/* Extra small devices */\r\n@media (max-width: 374px) {\r\n .phone-input-wrapper .PhoneInputInput {\r\n padding: 0.5rem 0.625rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountry {\r\n padding: 0.3125rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n}\r\n"]}
1
+ {"version":3,"sources":["AuthContainer.css","AuthModeToggle.css","AuthForm.css","OTPInput.css","style.css","PhoneInput.css"],"names":[],"mappings":"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","file":"index.esm.css","sourcesContent":[".auth-container {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n background: linear-gradient(135deg, var(--auth-bg-color, #e0f2fe) 0%, #f0f9ff 100%);\r\n font-family: var(--auth-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);\r\n}\r\n\r\n.auth-theme-dark.auth-container {\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n}\r\n\r\n/* Minimal mode - transparent, no framing, inherits from parent, but centered */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n background: transparent;\r\n font-family: inherit;\r\n}\r\n\r\n.auth-card {\r\n width: 100%;\r\n max-width: 440px;\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 40px rgba(59, 130, 246, 0.1);\r\n padding: 1.75rem;\r\n animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.auth-theme-dark .auth-card {\r\n background: #1e293b;\r\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/* Inherit host app's card background when inheritHostStyles is enabled */\r\n.auth-inherit-host .auth-card {\r\n background: hsl(var(--card, 0 0% 100%));\r\n color: hsl(var(--card-foreground, 215 25% 15%));\r\n border: 1px solid hsl(var(--border, 214 32% 88%));\r\n}\r\n\r\n.auth-inherit-host.auth-theme-dark .auth-card {\r\n background: hsl(var(--card, 215 25% 14%));\r\n color: hsl(var(--card-foreground, 210 40% 98%));\r\n border-color: hsl(var(--border, 217 33% 20%));\r\n}\r\n\r\n/* Minimal card - no background, border, shadow, or animation */\r\n.auth-minimal-card {\r\n width: 100%;\r\n max-width: 440px;\r\n background: transparent;\r\n border-radius: 0;\r\n box-shadow: none;\r\n padding: 0;\r\n animation: none;\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.auth-header {\r\n text-align: center;\r\n margin-bottom: 1.25rem;\r\n}\r\n\r\n.auth-logo {\r\n display: inline-flex;\r\n margin-bottom: 0.75rem;\r\n animation: float 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes float {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n 50% {\r\n transform: translateY(-8px);\r\n }\r\n}\r\n\r\n.auth-title {\r\n font-size: 1.75rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin: 0;\r\n}\r\n\r\n.auth-subtitle {\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n margin: 0.25rem 0 0 0;\r\n}\r\n\r\n.auth-theme-dark .auth-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-theme-dark .auth-subtitle {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-content {\r\n /* Content styles handled by child components */\r\n}\r\n\r\n.auth-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n padding-top: 1rem;\r\n margin-top: 1rem;\r\n border-top: 1px solid #e2e8f0;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-theme-dark .auth-footer {\r\n border-top-color: #334155;\r\n}\r\n\r\n.auth-footer a {\r\n color: var(--auth-primary-color, #3B82F6);\r\n text-decoration: none;\r\n}\r\n\r\n.auth-footer a:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.auth-footer span {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-theme-dark .auth-footer span {\r\n color: #475569;\r\n}\r\n\r\n.auth-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid #e2e8f0;\r\n border-top-color: var(--auth-primary-color, #3B82F6);\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n margin: 0 auto;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Mobile optimizations - reduced white space and condensed layout */\r\n@media (max-width: 640px) {\r\n .auth-container {\r\n padding: 0.5rem;\r\n min-height: 100vh;\r\n min-height: 100dvh; /* Dynamic viewport height for mobile browsers */\r\n }\r\n\r\n .auth-card {\r\n padding: 1.5rem 1.25rem;\r\n border-radius: 12px;\r\n max-width: 100%;\r\n }\r\n \r\n .auth-header {\r\n margin-bottom: 1.25rem;\r\n }\r\n \r\n .auth-logo {\r\n margin-bottom: 0.75rem;\r\n }\r\n \r\n .auth-title {\r\n font-size: 1.375rem;\r\n line-height: 1.3;\r\n }\r\n \r\n .auth-subtitle {\r\n font-size: 0.8125rem;\r\n margin-top: 0.125rem;\r\n }\r\n \r\n .auth-footer {\r\n padding-top: 0.75rem;\r\n margin-top: 0.75rem;\r\n font-size: 0.8125rem;\r\n gap: 0.5rem;\r\n }\r\n}\r\n\r\n/* Extra small devices (< 375px) */\r\n@media (max-width: 374px) {\r\n .auth-card {\r\n padding: 1.25rem 1rem;\r\n }\r\n \r\n .auth-title {\r\n font-size: 1.25rem;\r\n }\r\n \r\n .auth-subtitle {\r\n font-size: 0.75rem;\r\n }\r\n}\r\n\r\n/* ============= Account Management Styles ============= */\r\n\r\n.account-section {\r\n padding: 1.5rem 0;\r\n border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .account-section {\r\n border-bottom-color: #334155;\r\n}\r\n\r\n.account-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.section-title {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n color: #1e293b;\r\n margin: 0 0 1rem 0;\r\n}\r\n\r\n.auth-theme-dark .section-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.current-info {\r\n background: #f8fafc;\r\n padding: 1rem;\r\n border-radius: 8px;\r\n margin-bottom: 1rem;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-theme-dark .current-info {\r\n background: #0f172a;\r\n}\r\n\r\n.current-info p {\r\n margin: 0.25rem 0;\r\n color: #475569;\r\n}\r\n\r\n.auth-theme-dark .current-info p {\r\n color: #94a3b8;\r\n}\r\n\r\n.current-info strong {\r\n color: #1e293b;\r\n}\r\n\r\n.auth-theme-dark .current-info strong {\r\n color: #f1f5f9;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: #334155;\r\n margin-bottom: 0.375rem;\r\n}\r\n\r\n.auth-theme-dark .form-group label {\r\n color: #cbd5e1;\r\n}\r\n\r\n.button-group {\r\n display: flex;\r\n gap: 0.75rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.danger-zone {\r\n background: #fef2f2;\r\n padding: 1.5rem;\r\n border-radius: 8px;\r\n border: 1px solid #fecaca;\r\n}\r\n\r\n.auth-theme-dark .danger-zone {\r\n background: #450a0a;\r\n border-color: #991b1b;\r\n}\r\n\r\n.text-danger {\r\n color: #dc2626 !important;\r\n}\r\n\r\n.text-success {\r\n color: #16a34a;\r\n}\r\n\r\n.text-warning {\r\n color: #ea580c;\r\n}\r\n\r\n.auth-theme-dark .text-success {\r\n color: #22c55e;\r\n}\r\n\r\n.auth-theme-dark .text-warning {\r\n color: #fb923c;\r\n}\r\n\r\n.delete-confirm {\r\n margin-top: 1rem;\r\n}\r\n\r\n.warning-text {\r\n color: #dc2626;\r\n font-size: 0.875rem;\r\n margin: 0 0 1rem 0;\r\n padding: 0.75rem;\r\n background: #fee2e2;\r\n border-radius: 6px;\r\n line-height: 1.5;\r\n}\r\n\r\n.auth-theme-dark .warning-text {\r\n background: #7f1d1d;\r\n color: #fca5a5;\r\n}\r\n\r\n.button-danger {\r\n background: #dc2626 !important;\r\n color: white !important;\r\n}\r\n\r\n.button-danger:hover:not(:disabled) {\r\n background: #b91c1c !important;\r\n}\r\n\r\n.button-secondary {\r\n background: #e2e8f0 !important;\r\n color: #1e293b !important;\r\n}\r\n\r\n.auth-theme-dark .button-secondary {\r\n background: #334155 !important;\r\n color: #f1f5f9 !important;\r\n}\r\n\r\n.button-secondary:hover:not(:disabled) {\r\n background: #cbd5e1 !important;\r\n}\r\n\r\n.auth-theme-dark .button-secondary:hover:not(:disabled) {\r\n background: #475569 !important;\r\n}\r\n\r\n.photo-preview {\r\n display: block;\r\n object-fit: cover;\r\n}\r\n\r\n/* Mobile optimizations for account management */\r\n@media (max-width: 640px) {\r\n .account-section {\r\n padding: 1rem 0;\r\n }\r\n \r\n .section-title {\r\n font-size: 1rem;\r\n }\r\n \r\n .current-info {\r\n padding: 0.75rem;\r\n }\r\n \r\n .button-group {\r\n flex-direction: column;\r\n }\r\n \r\n .button-group .auth-button {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Account Management Layout */\r\n.account-management {\r\n width: 100%;\r\n max-width: 600px;\r\n}\r\n\r\n.account-section {\r\n background: white;\r\n border-radius: 8px;\r\n padding: 1.25rem;\r\n margin-bottom: 1rem;\r\n border: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .account-section {\r\n background: #1e293b;\r\n border-color: #334155;\r\n}\r\n\r\n.account-field {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n gap: 1rem;\r\n align-items: start;\r\n}\r\n\r\n.field-info {\r\n min-width: 0;\r\n}\r\n\r\n.field-label {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: #64748b;\r\n text-transform: uppercase;\r\n letter-spacing: 0.025em;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.auth-theme-dark .field-label {\r\n color: #94a3b8;\r\n}\r\n\r\n.field-value {\r\n font-size: 0.9375rem;\r\n color: #1e293b;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n word-break: break-word;\r\n}\r\n\r\n.auth-theme-dark .field-value {\r\n color: #f1f5f9;\r\n}\r\n\r\n.verification-badge {\r\n display: inline-block;\r\n font-size: 0.6875rem;\r\n padding: 0.125rem 0.5rem;\r\n border-radius: 9999px;\r\n font-weight: 500;\r\n white-space: nowrap;\r\n}\r\n\r\n.verification-badge.verified {\r\n background: #dcfce7;\r\n color: #16a34a;\r\n}\r\n\r\n.auth-theme-dark .verification-badge.verified {\r\n background: #14532d;\r\n color: #86efac;\r\n}\r\n\r\n.verification-badge.unverified {\r\n background: #fef3c7;\r\n color: #d97706;\r\n}\r\n\r\n.auth-theme-dark .verification-badge.unverified {\r\n background: #78350f;\r\n color: #fcd34d;\r\n}\r\n\r\n.account-field .auth-button {\r\n white-space: nowrap;\r\n padding: 0.5rem 1rem;\r\n font-size: 0.875rem;\r\n height: auto;\r\n align-self: start;\r\n}\r\n\r\n.edit-form {\r\n width: 100%;\r\n margin-top: 1rem;\r\n padding-top: 1rem;\r\n border-top: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .edit-form {\r\n border-top-color: #334155;\r\n}\r\n\r\n.edit-form .form-group {\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.edit-form .button-group {\r\n margin-top: 1rem;\r\n display: flex;\r\n gap: 0.5rem;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .account-field {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .account-field .auth-button {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n \r\n .edit-form .button-group {\r\n flex-direction: column;\r\n }\r\n \r\n .edit-form .button-group .auth-button {\r\n width: 100%;\r\n }\r\n}\r\n\r\n",".auth-mode-toggle {\r\n display: flex;\r\n gap: 0;\r\n margin-bottom: 1.25rem;\r\n background: #f1f5f9;\r\n border-radius: 0.5rem;\r\n padding: 0.25rem;\r\n}\r\n\r\n.auth-theme-dark .auth-mode-toggle {\r\n background: #1e293b;\r\n}\r\n\r\n.auth-mode-toggle-button {\r\n flex: 1;\r\n padding: 0.625rem 1rem;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n background: transparent;\r\n color: #64748b;\r\n border: none;\r\n border-radius: 0.375rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.auth-mode-toggle-button:hover:not(:disabled) {\r\n color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-mode-toggle-button:hover:not(:disabled) {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-mode-toggle-button--active {\r\n background: white;\r\n color: #1e293b;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.auth-theme-dark .auth-mode-toggle-button--active {\r\n background: #334155;\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-mode-toggle-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Inherit host styles */\r\n.auth-inherit-host .auth-mode-toggle {\r\n background: hsl(var(--muted, 210 40% 96.1%));\r\n}\r\n\r\n.auth-inherit-host .auth-mode-toggle-button--active {\r\n background: hsl(var(--background, 0 0% 100%));\r\n color: hsl(var(--foreground, 222.2 84% 4.9%));\r\n}\r\n\r\n/* Mobile optimizations */\r\n@media (max-width: 640px) {\r\n .auth-mode-toggle {\r\n margin-bottom: 1rem;\r\n }\r\n \r\n .auth-mode-toggle-button {\r\n padding: 0.5rem 0.75rem;\r\n font-size: 0.8125rem;\r\n }\r\n}\r\n\r\n@media (max-width: 374px) {\r\n .auth-mode-toggle-button {\r\n padding: 0.5rem;\r\n font-size: 0.75rem;\r\n }\r\n}\r\n",".auth-form {\r\n width: 100%;\r\n}\r\n\r\n.auth-form-header {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.auth-form-title {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin: 0 0 0.5rem 0;\r\n}\r\n\r\n.auth-theme-dark .auth-form-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-form-subtitle {\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n margin: 0;\r\n}\r\n\r\n.auth-theme-dark .auth-form-subtitle {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-error {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.75rem 1rem;\r\n background: #fef2f2;\r\n border: 1px solid #fecaca;\r\n border-radius: 0.5rem;\r\n color: #dc2626;\r\n font-size: 0.875rem;\r\n margin-bottom: 1rem;\r\n animation: shake 0.4s ease;\r\n}\r\n\r\n.auth-theme-dark .auth-error {\r\n background: #7f1d1d;\r\n border-color: #991b1b;\r\n color: #fca5a5;\r\n}\r\n\r\n@keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-8px); }\r\n 75% { transform: translateX(8px); }\r\n}\r\n\r\n.auth-form-group {\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.auth-label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: #334155;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.auth-theme-dark .auth-label {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-input {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n font-size: 1rem;\r\n color: #1e293b;\r\n background: #f8fafc;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 0.5rem;\r\n transition: all 0.2s ease;\r\n box-sizing: border-box;\r\n}\r\n\r\n.auth-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.auth-input:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-theme-dark .auth-input {\r\n background: #0f172a;\r\n border-color: #334155;\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-theme-dark .auth-input:focus {\r\n background: #1e293b;\r\n border-color: #3b82f6;\r\n}\r\n\r\n/* Chrome/Safari autofill override — prevents the white \"autofilled\" background\r\n from breaking dark-mode styling. Uses a large inset box-shadow because\r\n WebKit ignores background-color on autofilled inputs. */\r\n.auth-input:-webkit-autofill,\r\n.auth-input:-webkit-autofill:hover,\r\n.auth-input:-webkit-autofill:focus,\r\n.auth-input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #f8fafc inset;\r\n -webkit-text-fill-color: #1e293b;\r\n caret-color: #1e293b;\r\n transition: background-color 9999s ease-in-out 0s;\r\n}\r\n\r\n.auth-theme-dark .auth-input:-webkit-autofill,\r\n.auth-theme-dark .auth-input:-webkit-autofill:hover,\r\n.auth-theme-dark .auth-input:-webkit-autofill:focus,\r\n.auth-theme-dark .auth-input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #0f172a inset;\r\n -webkit-text-fill-color: #f1f5f9;\r\n caret-color: #f1f5f9;\r\n}\r\n\r\n.auth-inherit-host .auth-input:-webkit-autofill,\r\n.auth-inherit-host .auth-input:-webkit-autofill:hover,\r\n.auth-inherit-host .auth-input:-webkit-autofill:focus,\r\n.auth-inherit-host .auth-input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px hsl(var(--background, 0 0% 100%)) inset;\r\n -webkit-text-fill-color: hsl(var(--foreground, 222.2 84% 4.9%));\r\n caret-color: hsl(var(--foreground, 222.2 84% 4.9%));\r\n}\r\n\r\n\r\n.auth-form-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.auth-link {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font-size: 0.875rem;\r\n color: #3b82f6;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.auth-link:hover:not(:disabled) {\r\n color: #1d4ed8;\r\n text-decoration: underline;\r\n}\r\n\r\n.auth-link:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-link-bold {\r\n font-weight: 600;\r\n}\r\n\r\n.auth-button {\r\n width: 100%;\r\n padding: 0.875rem 1.5rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.auth-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-button-primary {\r\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n.auth-button-primary:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);\r\n}\r\n\r\n.auth-button-primary:active:not(:disabled) {\r\n transform: translateY(0);\r\n}\r\n\r\n/* Inherit host app's Tailwind CSS variables */\r\n.auth-inherit-host .auth-button-primary {\r\n background: hsl(var(--primary));\r\n color: hsl(var(--primary-foreground));\r\n box-shadow: 0 4px 12px hsl(var(--primary) / 0.25);\r\n}\r\n\r\n.auth-inherit-host .auth-button-primary:hover:not(:disabled) {\r\n background: hsl(var(--primary) / 0.9);\r\n box-shadow: 0 6px 20px hsl(var(--primary) / 0.35);\r\n}\r\n\r\n.auth-inherit-host .auth-button-secondary {\r\n background: hsl(var(--secondary));\r\n color: hsl(var(--secondary-foreground));\r\n border-color: hsl(var(--border));\r\n}\r\n\r\n.auth-inherit-host .auth-button-secondary:hover:not(:disabled) {\r\n background: hsl(var(--secondary) / 0.8);\r\n}\r\n\r\n.auth-inherit-host .auth-link {\r\n color: hsl(var(--primary));\r\n}\r\n\r\n.auth-inherit-host .auth-link:hover:not(:disabled) {\r\n color: hsl(var(--primary) / 0.8);\r\n}\r\n\r\n.auth-inherit-host .auth-input:focus {\r\n border-color: hsl(var(--primary));\r\n box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\r\n}\r\n\r\n.auth-button-secondary {\r\n background: white;\r\n color: #334155;\r\n border: 1px solid #e2e8f0;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.auth-button-secondary:hover:not(:disabled) {\r\n background: #f8fafc;\r\n border-color: #cbd5e1;\r\n}\r\n\r\n.auth-theme-dark .auth-button-secondary {\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-button-secondary:hover:not(:disabled) {\r\n background: #1e293b;\r\n border-color: #475569;\r\n}\r\n\r\n.auth-spinner {\r\n display: inline-block;\r\n width: 18px;\r\n height: 18px;\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-top-color: white;\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n.auth-divider {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n margin-top: 1rem;\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n}\r\n\r\n.auth-theme-dark .auth-divider {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-provider-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.625rem;\r\n margin-top: 1rem;\r\n}\r\n\r\n.auth-provider-button {\r\n width: 100%;\r\n padding: 0.875rem 1.5rem;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n background: white;\r\n color: #334155;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n}\r\n\r\n.auth-provider-button:hover:not(:disabled) {\r\n background: #f8fafc;\r\n border-color: #cbd5e1;\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.auth-provider-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-theme-dark .auth-provider-button {\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-provider-button:hover:not(:disabled) {\r\n background: #1e293b;\r\n border-color: #475569;\r\n}\r\n\r\n.auth-or-divider {\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n margin: 1rem 0;\r\n color: #94a3b8;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-or-divider::before,\r\n.auth-or-divider::after {\r\n content: '';\r\n flex: 1;\r\n border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-or-divider span {\r\n padding: 0 1rem;\r\n}\r\n\r\n.auth-theme-dark .auth-or-divider::before,\r\n.auth-theme-dark .auth-or-divider::after {\r\n border-color: #334155;\r\n}\r\n\r\n/* Mobile optimizations - condensed spacing and sizing */\r\n@media (max-width: 640px) {\r\n .auth-form-header {\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .auth-form-title {\r\n font-size: 1.125rem;\r\n margin-bottom: 0.375rem;\r\n }\r\n \r\n .auth-form-subtitle {\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-error {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.8125rem;\r\n margin-bottom: 0.875rem;\r\n }\r\n \r\n .auth-form-group {\r\n margin-bottom: 0.875rem;\r\n }\r\n \r\n .auth-label {\r\n font-size: 0.8125rem;\r\n margin-bottom: 0.375rem;\r\n }\r\n \r\n .auth-input {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.9375rem;\r\n }\r\n \r\n .auth-form-footer {\r\n margin-bottom: 1rem;\r\n }\r\n \r\n .auth-link {\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-button,\r\n .auth-provider-button {\r\n padding: 0.75rem 1rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .auth-divider {\r\n margin-top: 1rem;\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-provider-buttons {\r\n gap: 0.625rem;\r\n margin-top: 1rem;\r\n }\r\n \r\n .auth-or-divider {\r\n margin: 1rem 0;\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-or-divider span {\r\n padding: 0 0.75rem;\r\n }\r\n}\r\n\r\n/* Extra small devices */\r\n@media (max-width: 374px) {\r\n .auth-form-title {\r\n font-size: 1rem;\r\n }\r\n \r\n .auth-input {\r\n padding: 0.5rem 0.75rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .auth-button,\r\n .auth-provider-button {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.8125rem;\r\n }\r\n}\r\n",".otp-input-container {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: center;\r\n}\r\n\r\n.otp-input-box {\r\n width: 48px;\r\n height: 56px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n text-align: center;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 8px;\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n transition: all 0.2s ease;\r\n outline: none;\r\n}\r\n\r\n.otp-input-box:focus {\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.otp-input-box:disabled {\r\n background-color: #f3f4f6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Dark theme support */\r\n.auth-theme-dark .otp-input-box {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n.auth-theme-dark .otp-input-box:focus {\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n}\r\n\r\n.auth-theme-dark .otp-input-box:disabled {\r\n background-color: #1f2937;\r\n}\r\n\r\n/* Mobile responsiveness - more compact for mobile devices */\r\n@media (max-width: 640px) {\r\n .otp-input-box {\r\n width: 36px;\r\n height: 44px;\r\n font-size: 18px;\r\n }\r\n \r\n .otp-input-container {\r\n gap: 5px;\r\n }\r\n}\r\n\r\n/* Extra small devices - very compact */\r\n@media (max-width: 374px) {\r\n .otp-input-box {\r\n width: 32px;\r\n height: 40px;\r\n font-size: 16px;\r\n }\r\n \r\n .otp-input-container {\r\n gap: 4px;\r\n }\r\n}\r\n","/* CSS variables. */\r\n:root {\r\n\t--PhoneInput-color--focus: #03b2cb;\r\n\t--PhoneInputInternationalIconPhone-opacity: 0.8;\r\n\t--PhoneInputInternationalIconGlobe-opacity: 0.65;\r\n\t--PhoneInputCountrySelect-marginRight: 0.35em;\r\n\t--PhoneInputCountrySelectArrow-width: 0.3em;\r\n\t--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\r\n\t--PhoneInputCountrySelectArrow-borderWidth: 1px;\r\n\t--PhoneInputCountrySelectArrow-opacity: 0.45;\r\n\t--PhoneInputCountrySelectArrow-color: currentColor;\r\n\t--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountrySelectArrow-transform: rotate(45deg);\r\n\t--PhoneInputCountryFlag-aspectRatio: 1.5;\r\n\t--PhoneInputCountryFlag-height: 1em;\r\n\t--PhoneInputCountryFlag-borderWidth: 1px;\r\n\t--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\r\n\t--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\r\n}\r\n\r\n.PhoneInput {\r\n\t/* This is done to stretch the contents of this component. */\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.PhoneInputInput {\r\n\t/* The phone number input stretches to fill all empty space */\r\n\tflex: 1;\r\n\t/* The phone number input should shrink\r\n\t to make room for the extension input */\r\n\tmin-width: 0;\r\n}\r\n\r\n.PhoneInputCountryIcon {\r\n\twidth: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\r\n\theight: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--square {\r\n\twidth: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--border {\r\n\t/* Removed `background-color` because when an `<img/>` was still loading\r\n\t it would show a dark gray rectangle. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom. */\r\n\tbackground-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\r\n\t/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom,\r\n\t so an additional \"inset\" border is added. */\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\r\n}\r\n\r\n.PhoneInputCountryIconImg {\r\n\t/* Fixes weird vertical space above the flag icon. */\r\n\t/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */\r\n\tdisplay: block;\r\n\t/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.\r\n\t Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.PhoneInputInternationalIconPhone {\r\n\topacity: var(--PhoneInputInternationalIconPhone-opacity);\r\n}\r\n\r\n.PhoneInputInternationalIconGlobe {\r\n\topacity: var(--PhoneInputInternationalIconGlobe-opacity);\r\n}\r\n\r\n/* Styling native country `<select/>`. */\r\n\r\n.PhoneInputCountry {\r\n\tposition: relative;\r\n\talign-self: stretch;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tmargin-right: var(--PhoneInputCountrySelect-marginRight);\r\n}\r\n\r\n.PhoneInputCountrySelect {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\tborder: 0;\r\n\topacity: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.PhoneInputCountrySelect[disabled],\r\n.PhoneInputCountrySelect[readonly] {\r\n\tcursor: default;\r\n}\r\n\r\n.PhoneInputCountrySelectArrow {\r\n\tdisplay: block;\r\n\tcontent: '';\r\n\twidth: var(--PhoneInputCountrySelectArrow-width);\r\n\theight: var(--PhoneInputCountrySelectArrow-width);\r\n\tmargin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\r\n\tborder-style: solid;\r\n\tborder-color: var(--PhoneInputCountrySelectArrow-color);\r\n\tborder-top-width: 0;\r\n\tborder-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\tborder-left-width: 0;\r\n\tborder-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\ttransform: var(--PhoneInputCountrySelectArrow-transform);\r\n\topacity: var(--PhoneInputCountrySelectArrow-opacity);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}",".phone-input-wrapper {\r\n width: 100%;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInput {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput {\r\n flex: 1;\r\n width: 100%;\r\n padding: 0.75rem;\r\n font-size: 0.9375rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n transition: all 0.2s;\r\n font-family: inherit;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput:disabled {\r\n background-color: #f3f4f6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountry {\r\n margin-right: 0.5rem;\r\n padding: 0.5rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountry:hover {\r\n background-color: #f9fafb;\r\n border-color: #9ca3af;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountrySelect {\r\n padding: 0.5rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n font-size: 0.9375rem;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 24px;\r\n height: 24px;\r\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountrySelectArrow {\r\n width: 0.5rem;\r\n height: 0.5rem;\r\n margin-left: 0.5rem;\r\n opacity: 0.5;\r\n}\r\n\r\n/* Dark theme support */\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus {\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled {\r\n background-color: #1f2937;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountry {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover {\r\n background-color: #4b5563;\r\n border-color: #6b7280;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n/* Mobile responsiveness - condensed */\r\n@media (max-width: 640px) {\r\n .phone-input-wrapper .PhoneInputInput {\r\n padding: 0.625rem 0.75rem;\r\n font-size: 0.9375rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountry {\r\n padding: 0.375rem;\r\n margin-right: 0.375rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n}\r\n\r\n/* Extra small devices */\r\n@media (max-width: 374px) {\r\n .phone-input-wrapper .PhoneInputInput {\r\n padding: 0.5rem 0.625rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountry {\r\n padding: 0.3125rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n}\r\n"]}
package/dist/index.esm.js CHANGED
@@ -257,11 +257,11 @@ const AuthModeToggle = ({ mode, onModeChange, disabled = false, }) => {
257
257
  return (jsxs("div", { className: "auth-mode-toggle", role: "tablist", "aria-label": "Authentication mode", children: [jsx("button", { type: "button", role: "tab", "aria-selected": mode === 'login', className: `auth-mode-toggle-button ${mode === 'login' ? 'auth-mode-toggle-button--active' : ''}`, onClick: () => onModeChange('login'), disabled: disabled, children: "Sign In" }), jsx("button", { type: "button", role: "tab", "aria-selected": mode === 'register', className: `auth-mode-toggle-button ${mode === 'register' ? 'auth-mode-toggle-button--active' : ''}`, onClick: () => onModeChange('register'), disabled: disabled, children: "Create Account" })] }));
258
258
  };
259
259
 
260
- const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, signupProminence = 'minimal', signupRedirectUrl, schema, registrationFieldsConfig = [], additionalFields = [], }) => {
260
+ const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, signupProminence = 'minimal', signupRedirectUrl, prefillEmail, prefillDisplayName, schema, registrationFieldsConfig = [], additionalFields = [], }) => {
261
261
  const [formData, setFormData] = useState({
262
- email: '',
262
+ email: prefillEmail || '',
263
263
  password: '',
264
- displayName: '',
264
+ displayName: prefillDisplayName || '',
265
265
  });
266
266
  const [customFieldValues, setCustomFieldValues] = useState({});
267
267
  // Get schema-driven registration fields
@@ -13713,7 +13713,7 @@ const checkSilentGoogleSignIn = async (clientId, googleClientId) => {
13713
13713
  });
13714
13714
  };
13715
13715
  // getFriendlyErrorMessage is now imported from ../utils/errorHandling
13716
- const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, onRedirect, enabledProviders = ['email', 'google', 'phone'], initialMode, signupProminence, redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, collectionId, disableConfigCache = false, enableSilentGoogleSignIn = false, nativeAuth, enableSilentNativeSignIn = false, whatsappReply, whatsappPrefillMessage, }) => {
13716
+ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, prefillEmail, prefillDisplayName, onAuthSuccess, onAuthError, onRedirect, enabledProviders = ['email', 'google', 'phone'], initialMode, signupProminence, redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, collectionId, disableConfigCache = false, enableSilentGoogleSignIn = false, nativeAuth, enableSilentNativeSignIn = false, whatsappReply, whatsappPrefillMessage, }) => {
13717
13717
  // Resolve signup prominence from props, customization, config, or default
13718
13718
  const resolvedSignupProminence = signupProminence || customization?.signupProminence || 'minimal';
13719
13719
  // Determine initial mode based on signupProminence setting
@@ -14410,18 +14410,21 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
14410
14410
  catch (err) {
14411
14411
  // Debug: log the raw error shape to help diagnose SDK error wrapping issues
14412
14412
  log.error('handleEmailAuth error:', typeof err, err instanceof Error ? `Error.message=${err.message}` : '', JSON.stringify(err, Object.getOwnPropertyNames(err || {})));
14413
- // Check if error requires email verification (403 EMAIL_NOT_VERIFIED, ACCOUNT_LOCKED, etc.)
14413
+ const errorCode = getErrorCode(err);
14414
+ // 1. Explicit "email exists AND is unverified" → go straight to resend.
14415
+ // Also catches generic EMAIL_NOT_VERIFIED / ACCOUNT_LOCKED / etc.
14414
14416
  if (requiresEmailVerification(err)) {
14415
14417
  setShowResendVerification(true);
14416
14418
  setResendEmail(data.email);
14417
14419
  setError(getFriendlyErrorMessage(err) + ' Click below to resend the verification link.');
14418
14420
  }
14419
- // Check if error is about email already registered (409 conflict)
14420
- else if (mode === 'register' && (isConflictError(err) ||
14421
- (err instanceof Error && /already (registered|exists)/i.test(err.message)))) {
14422
- setShowResendVerification(true);
14423
- setResendEmail(data.email);
14424
- setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
14421
+ // 2. Explicit "email already exists" (verified account) on register → send to login.
14422
+ else if (mode === 'register' && (errorCode === 'EMAIL_ALREADY_EXISTS' ||
14423
+ errorCode === 'EMAIL_ALREADY_IN_USE' ||
14424
+ isConflictError(err) ||
14425
+ (err instanceof Error && /already (registered|exists|in use)/i.test(err.message)))) {
14426
+ setMode('login');
14427
+ setError('An account with this email already exists. Please sign in instead.');
14425
14428
  }
14426
14429
  else {
14427
14430
  setError(getFriendlyErrorMessage(err));
@@ -15423,16 +15426,17 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
15423
15426
  boxSizing: 'border-box',
15424
15427
  backgroundColor: resolvedTheme === 'dark' ? '#0f172a' : '#f8fafc',
15425
15428
  color: resolvedTheme === 'dark' ? '#f1f5f9' : '#1e293b'
15426
- } }), jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, className: config?.branding?.inheritHostStyles ? 'auth-button auth-button-primary' : undefined, style: config?.branding?.inheritHostStyles ? {
15427
- flex: 1,
15429
+ } }), jsxs("div", { style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }, children: [jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, className: config?.branding?.inheritHostStyles ? 'auth-button auth-button-primary' : undefined, style: config?.branding?.inheritHostStyles ? {
15430
+ flex: '2 1 12rem',
15428
15431
  padding: '0.625rem 1rem',
15429
15432
  borderRadius: '0.375rem',
15430
15433
  fontSize: '0.875rem',
15431
15434
  fontWeight: 500,
15435
+ whiteSpace: 'nowrap',
15432
15436
  opacity: (loading || !resendEmail) ? 0.6 : 1,
15433
15437
  cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
15434
15438
  } : {
15435
- flex: 1,
15439
+ flex: '2 1 12rem',
15436
15440
  padding: '0.625rem 1rem',
15437
15441
  backgroundColor: 'var(--auth-primary-color, #4F46E5)',
15438
15442
  color: 'white',
@@ -15441,19 +15445,23 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
15441
15445
  cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
15442
15446
  fontSize: '0.875rem',
15443
15447
  fontWeight: 500,
15448
+ whiteSpace: 'nowrap',
15444
15449
  opacity: (loading || !resendEmail) ? 0.6 : 1
15445
15450
  }, children: loading ? 'Sending...' : 'Send New Verification Link' }), jsx("button", { onClick: () => {
15446
15451
  setShowResendVerification(false);
15447
15452
  setResendEmail('');
15448
15453
  setError(undefined);
15449
15454
  }, disabled: loading, className: config?.branding?.inheritHostStyles ? 'auth-button auth-button-secondary' : undefined, style: config?.branding?.inheritHostStyles ? {
15455
+ flex: '0 0 auto',
15450
15456
  padding: '0.625rem 1rem',
15451
15457
  borderRadius: '0.375rem',
15452
15458
  fontSize: '0.875rem',
15453
15459
  fontWeight: 500,
15460
+ whiteSpace: 'nowrap',
15454
15461
  opacity: loading ? 0.6 : 1,
15455
15462
  cursor: loading ? 'not-allowed' : 'pointer',
15456
15463
  } : {
15464
+ flex: '0 0 auto',
15457
15465
  padding: '0.625rem 1rem',
15458
15466
  backgroundColor: 'transparent',
15459
15467
  color: resolvedTheme === 'dark' ? '#94a3b8' : '#6B7280',
@@ -15462,6 +15470,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
15462
15470
  cursor: loading ? 'not-allowed' : 'pointer',
15463
15471
  fontSize: '0.875rem',
15464
15472
  fontWeight: 500,
15473
+ whiteSpace: 'nowrap',
15465
15474
  opacity: loading ? 0.6 : 1
15466
15475
  }, children: "Cancel" })] })] })) : showRequestNewReset ? (jsxs("div", { style: {
15467
15476
  marginTop: '1rem',
@@ -15651,7 +15660,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
15651
15660
  setShowResendVerification(false);
15652
15661
  setShowRequestNewReset(false);
15653
15662
  setError(undefined);
15654
- }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, signupProminence: resolvedSignupProminence, signupRedirectUrl: config?.signupRedirectUrl || customization?.signupRedirectUrl, schema: contactSchema, registrationFieldsConfig: config?.registrationFields, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onAppleLogin: handleAppleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), onWhatsAppLogin: () => setMode('whatsapp'), loading: loading }))] }));
15663
+ }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, signupProminence: resolvedSignupProminence, signupRedirectUrl: config?.signupRedirectUrl || customization?.signupRedirectUrl, prefillEmail: prefillEmail, prefillDisplayName: prefillDisplayName, schema: contactSchema, registrationFieldsConfig: config?.registrationFields, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onAppleLogin: handleAppleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), onWhatsAppLogin: () => setMode('whatsapp'), loading: loading }))] }));
15655
15664
  })()] })) })) : null }));
15656
15665
  };
15657
15666