@insforge/react 1.1.2-dev.0 → 1.1.2-dev.3

package/dist/index.js

@@ -5,7 +5,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
   if (!document.getElementById(styleId)) {
     const style = document.createElement('style');
     style.id = styleId;
-    style.textContent = "/**\n * InsForge React Component Library Styles\n * Traditional CSS with scoped class names (no Tailwind)\n */\n\n/* ============================================\n   FONTS\n   ============================================ */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');\n\n/* ============================================\n   CSS VARIABLES\n   ============================================ */\n:root {\n  /* Colors */\n  --if-color-primary: #000000;\n  --if-color-primary-hover: #1f1f1f;\n  --if-color-text: #000000;\n  --if-color-text-secondary: #828282;\n  --if-color-text-muted: #a3a3a3;\n  --if-color-border: #d4d4d4;\n  --if-color-border-focus: #000000;\n  --if-color-bg-white: #ffffff;\n  --if-color-bg-light: #fafafa;\n  --if-color-bg-hover: #f9fafb;\n  --if-color-error: #dc2626;\n  --if-color-error-bg: #fee2e2;\n  --if-color-success: #16a34a;\n\n  /* Spacing */\n  --if-space-1: 0.25rem; /* 4px */\n  --if-space-2: 0.5rem; /* 8px */\n  --if-space-3: 0.75rem; /* 12px */\n  --if-space-4: 1rem; /* 16px */\n  --if-space-6: 1.5rem; /* 24px */\n  --if-space-8: 2rem; /* 32px */\n\n  /* Border Radius */\n  --if-radius-xs: 0.125rem; /* 2px */\n  --if-radius-sm: 0.25rem; /* 4px */\n  --if-radius-md: 0.375rem; /* 6px */\n  --if-radius-lg: 0.5rem; /* 8px */\n  --if-radius-xl: 0.75rem; /* 12px */\n\n  /* Typography */\n  --if-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  --if-font-family-manrope:\n    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  --if-font-size-xs: 0.75rem; /* 12px */\n  --if-font-size-sm: 0.875rem; /* 14px */\n  --if-font-size-base: 1rem; /* 16px */\n  --if-font-size-lg: 1.125rem; /* 18px */\n  --if-font-size-xl: 1.25rem; /* 20px */\n  --if-font-size-2xl: 1.5rem; /* 24px */\n\n  /* Shadows */\n  --if-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --if-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n  --if-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n\n  /* Transitions */\n  --if-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  --if-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ============================================\n   AUTH CONTAINER\n   ============================================ */\n.if-authContainer {\n  width: 100%;\n  max-width: 400px;\n  border-radius: var(--if-radius-xl);\n  overflow: hidden;\n  box-shadow: var(--if-shadow-lg);\n}\n\n.if-authCard {\n  background-color: var(--if-color-bg-white);\n  padding: var(--if-space-6);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: var(--if-space-6);\n}\n\n/* ============================================\n   AUTH HEADER\n   ============================================ */\n.if-authHeader {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: var(--if-space-2);\n}\n\n.if-authHeader-title {\n  font-size: var(--if-font-size-2xl);\n  font-weight: 600;\n  color: var(--if-color-text);\n  line-height: 2rem;\n  margin: 0;\n  font-family: var(--if-font-family);\n}\n\n.if-authHeader-subtitle {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text-secondary);\n  line-height: 1.5rem;\n  margin: 0;\n  font-family: var(--if-font-family);\n}\n\n/* ============================================\n   FORM FIELD\n   ============================================ */\n.if-formField {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: var(--if-space-1);\n}\n\n.if-formField-label {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text);\n  line-height: 1.5rem;\n  font-family: var(--if-font-family);\n}\n\n.if-formField-input {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n  align-self: stretch;\n  padding: var(--if-space-2) var(--if-space-3);\n  border-radius: var(--if-radius-sm);\n  border: 1px solid var(--if-color-border);\n  background-color: var(--if-color-bg-white);\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  line-height: 1.25rem;\n  color: var(--if-color-text);\n  font-family: var(--if-font-family);\n  transition: border-color var(--if-transition-base);\n}\n\n.if-formField-input::placeholder {\n  color: var(--if-color-text-muted);\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n}\n\n.if-formField-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n   PASSWORD FIELD\n   ============================================ */\n.if-passwordField {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: var(--if-space-1);\n}\n\n.if-passwordField-labelRow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.if-passwordField-label {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text);\n  line-height: 1.5rem;\n  font-family: var(--if-font-family);\n}\n\n.if-passwordField-forgotLink {\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  color: var(--if-color-text-secondary);\n  text-decoration: none;\n  transition: color var(--if-transition-fast);\n  font-family: var(--if-font-family);\n}\n\n.if-passwordField-inputWrapper {\n  position: relative;\n  width: 100%;\n}\n\n.if-passwordField-input {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  padding: var(--if-space-2) var(--if-space-3);\n  padding-right: 2.5rem; /* Space for toggle button */\n  border-radius: var(--if-radius-sm);\n  border: 1px solid var(--if-color-border);\n  background-color: var(--if-color-bg-white);\n  font-size: var(--if-font-size-sm);\n  font-weight: 400;\n  line-height: 1.25rem;\n  color: var(--if-color-text);\n  font-family: var(--if-font-family);\n  transition: border-color var(--if-transition-base);\n}\n\n.if-passwordField-input::placeholder {\n  color: var(--if-color-text-muted);\n}\n\n.if-passwordField-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n.if-passwordField-toggleButton {\n  position: absolute;\n  right: var(--if-space-1);\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: var(--if-space-1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--if-color-text-secondary);\n  transition: color var(--if-transition-fast);\n}\n\n/* ============================================\n   SUBMIT BUTTON\n   ============================================ */\n.if-submitButton {\n  border-radius: var(--if-radius-sm);\n  background-color: var(--if-color-primary);\n  height: 2.5rem;\n  width: 100%;\n  display: flex;\n  margin-top: var(--if-space-4);\n  padding: var(--if-space-2) var(--if-space-4);\n  justify-content: center;\n  align-items: center;\n  gap: 0.625rem;\n  align-self: stretch;\n  color: var(--if-color-bg-white);\n  font-weight: 600;\n  font-family: var(--if-font-family-manrope);\n  font-size: var(--if-font-size-base);\n  line-height: normal;\n  border: none;\n  cursor: pointer;\n  transition: background-color var(--if-transition-base);\n}\n\n.if-submitButton:hover:not(:disabled) {\n  background-color: var(--if-color-primary-hover);\n}\n\n.if-submitButton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.if-submitButton-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* Spinner animation */\n@keyframes if-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.if-submitButton-spinner {\n  animation: if-spin 1s linear infinite;\n}\n\n/* ============================================\n   OAUTH BUTTON\n   ============================================ */\n.if-oauthButton {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: var(--if-space-2) var(--if-space-3);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--if-space-3);\n  border-radius: var(--if-radius-md);\n  border: 1px solid #e4e4e7;\n  background-color: var(--if-color-bg-white);\n  box-shadow: var(--if-shadow-md);\n  color: #09090b;\n  text-align: center;\n  font-size: var(--if-font-size-sm);\n  font-weight: 500;\n  line-height: 1.25rem;\n  cursor: pointer;\n  transition: all var(--if-transition-base);\n  font-family: var(--if-font-family);\n}\n\n.if-oauthButton:hover:not(:disabled) {\n  background-color: var(--if-color-bg-hover);\n  border-color: #9ca3af;\n}\n\n.if-oauthButton:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.if-oauthButton-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.125rem;\n  height: 1.125rem;\n}\n\n.if-oauthButton-full {\n  justify-content: center;\n}\n\n.if-oauthButton-short {\n  justify-content: center;\n  padding: var(--if-space-2);\n  gap: var(--if-space-2);\n}\n\n.if-oauthButton-icon-only {\n  justify-content: center;\n  gap: 0;\n}\n\n/* ============================================\n   OAUTH PROVIDERS CONTAINER\n   ============================================ */\n.if-oauthProviders {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-3);\n  width: 100%;\n}\n\n/* ============================================\n   AUTH LINK\n   ============================================ */\n.if-authLink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--if-space-1);\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-authLink-text {\n  font-weight: 400;\n}\n\n.if-authLink-link {\n  font-weight: 600;\n  color: var(--if-color-text);\n  text-decoration: none;\n  transition: opacity var(--if-transition-fast);\n}\n\n/* ============================================\n   AUTH DIVIDER\n   ============================================ */\n.if-authDivider {\n  display: flex;\n  align-items: center;\n  text-align: center;\n  width: 100%;\n  gap: var(--if-space-3);\n}\n\n.if-authDivider-line {\n  flex: 1;\n  border-top: 1px solid var(--if-color-border);\n}\n\n.if-authDivider-text {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  font-weight: 400;\n  font-family: var(--if-font-family-manrope);\n}\n\n/* ============================================\n   ERROR BANNER\n   ============================================ */\n.if-errorBanner {\n  padding: var(--if-space-3);\n  background-color: var(--if-color-error-bg);\n  border-radius: var(--if-radius-md);\n  border: 1px solid var(--if-color-error);\n}\n\n.if-errorBanner-content {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n}\n\n.if-errorBanner-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  color: var(--if-color-error);\n}\n\n.if-errorBanner-text {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-error);\n  font-weight: 400;\n  font-family: var(--if-font-family);\n  margin: 0;\n}\n\n/* ============================================\n   AUTH BRANDING\n   ============================================ */\n.if-authBranding {\n  background-color: var(--if-color-bg-light);\n  padding: var(--if-space-4) var(--if-space-2);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--if-space-1);\n}\n\n.if-authBranding-text {\n  font-size: var(--if-font-size-xs);\n  font-weight: 500;\n  color: var(--if-color-text);\n  font-family: var(--if-font-family-manrope);\n  margin: 0;\n}\n\n/* ============================================\n   VERIFICATION CODE INPUT\n   ============================================ */\n.if-verificationCode-inputContainer {\n  display: flex;\n  gap: var(--if-space-3);\n  justify-content: center;\n}\n\n.if-verificationCode-input {\n  width: 3rem;\n  height: 3rem;\n  text-align: center;\n  font-size: var(--if-font-size-base);\n  font-weight: 600;\n  border: 1px solid var(--if-color-border);\n  border-radius: var(--if-radius-sm);\n  background-color: var(--if-color-bg-white);\n  color: var(--if-color-text);\n  transition: border-color var(--if-transition-base);\n  font-family: var(--if-font-family-manrope);\n}\n\n.if-verificationCode-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n   VERIFICATION STEP\n   ============================================ */\n.if-verificationStep {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-6);\n  align-items: stretch;\n}\n\n.if-verificationStep-descriptionContainer {\n  width: 100%;\n  background-color: #f5f5f5;\n  border-radius: var(--if-radius-lg);\n  padding: var(--if-space-3) var(--if-space-3) var(--if-space-6) var(--if-space-3);\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-3);\n}\n\n.if-verificationStep-descriptionTitle {\n  color: var(--black, #000);\n  font-family: var(--if-font-family);\n  font-size: var(--if-font-size-base);\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px;\n}\n\n.if-verificationStep-description,\n.if-verificationStep-codeDescription {\n  font-size: var(--if-font-size-sm);\n  color: #525252;\n  text-align: left;\n  font-family: var(--if-font-family);\n  margin: 0;\n}\n\n.if-verificationLink-email,\n.if-verificationCode-email {\n  font-weight: 500;\n  color: var(--if-color-text);\n}\n\n.if-verificationStep-codeContainer {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n}\n\n.if-verificationStep-codeInputWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-6);\n}\n\n.if-verificationStep-verifyingText {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  text-align: center;\n  font-family: var(--if-font-family);\n}\n\n.if-verificationStep-resendContainer {\n  width: 100%;\n  font-size: var(--if-font-size-sm);\n  text-align: center;\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-verificationStep-resendButton {\n  color: var(--if-color-text);\n  font-weight: 500;\n  transition: all var(--if-transition-base);\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--if-font-family);\n  font-size: var(--if-font-size-sm);\n}\n\n.if-verificationStep-resendButton:not(:disabled) {\n  cursor: pointer;\n}\n\n.if-verificationStep-resendButton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* ============================================\n   PASSWORD STRENGTH INDICATOR\n   ============================================ */\n.if-passwordStrength {\n  margin-top: var(--if-space-2);\n}\n\n.if-passwordStrength-fill {\n  height: 100%;\n  transition:\n    width var(--if-transition-base),\n    background-color var(--if-transition-base);\n}\n\n.if-passwordStrength-text {\n  font-size: var(--if-font-size-xs);\n  color: var(--if-color-text-secondary);\n  font-family: var(--if-font-family);\n}\n\n.if-passwordStrength-requirements {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-2);\n  font-size: var(--if-font-size-sm);\n  color: #525252;\n  font-family: var(--if-font-family);\n}\n\n.if-passwordStrength-requirement {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n}\n\n/* ============================================\n   FORM CONTAINER\n   ============================================ */\n.if-form {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  gap: var(--if-space-6);\n}\n\n/* ============================================\n   USER BUTTON\n   ============================================ */\n.if-userButton-container {\n  position: relative;\n  display: inline-block;\n}\n\n.if-userButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--if-space-2);\n  padding: var(--if-space-2);\n  border-radius: 9999px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: all var(--if-transition-base);\n}\n\n.if-userButton:hover {\n  opacity: 0.8;\n}\n\n.if-userButton-detailed {\n  background-color: var(--if-color-bg-white);\n  border: 1px solid var(--if-color-border);\n  border-radius: var(--if-radius-sm);\n  padding: var(--if-space-2);\n}\n\n.if-userButton-detailed:hover {\n  background-color: var(--if-color-bg-light);\n  opacity: 1;\n}\n\n.if-userButton-avatar {\n  width: 2rem;\n  height: 2rem;\n  border-radius: 9999px;\n  background-color: var(--if-color-primary);\n  color: var(--if-color-bg-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: var(--if-font-size-sm);\n  font-family: var(--if-font-family);\n  overflow: hidden;\n}\n\n.if-userButton-avatarImage {\n  border-radius: 9999px;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.if-userButton-avatarInitials {\n  color: var(--if-color-bg-white);\n  font-weight: 600;\n  font-size: var(--if-font-size-sm);\n}\n\n.if-userButton-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n.if-userButton-name {\n  font-size: var(--if-font-size-sm);\n  font-weight: 600;\n  color: var(--if-color-text);\n  line-height: 1.25rem;\n  text-align: left;\n  font-family: var(--if-font-family);\n}\n\n.if-userButton-email {\n  font-size: var(--if-font-size-xs);\n  color: var(--if-color-text-secondary);\n  line-height: 1rem;\n  text-align: left;\n  font-family: var(--if-font-family);\n}\n\n.if-userButton-menu {\n  position: absolute;\n  margin-top: var(--if-space-2);\n  background-color: var(--if-color-bg-white);\n  border: 1px solid var(--if-color-border);\n  border-radius: var(--if-radius-md);\n  box-shadow: var(--if-shadow-lg);\n  padding: var(--if-space-2);\n  min-width: 200px;\n  z-index: 50;\n}\n\n.if-userButton-menuItem {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-2);\n  padding: var(--if-space-2);\n  border-radius: var(--if-radius-sm);\n  cursor: pointer;\n  transition: background-color var(--if-transition-fast);\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text);\n  font-family: var(--if-font-family);\n  background: none;\n  border: none;\n  width: 100%;\n  text-align: left;\n}\n\n.if-userButton-menuItem:hover {\n  background-color: var(--if-color-bg-light);\n}\n\n.if-userButton-menuItem-signout {\n  color: var(--if-color-error);\n}\n\n.if-userButton-menuItem-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* ============================================\n   EMAIL VERIFICATION STATUS\n   ============================================ */\n.if-verifyStatus-container {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--if-space-6);\n}\n\n.if-verifyStatus-container-stretch {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  gap: var(--if-space-6);\n}\n\n.if-verifyStatus-spinner {\n  border-radius: 9999px;\n  height: 3rem;\n  width: 3rem;\n  border-bottom: 2px solid var(--if-color-primary);\n}\n\n.if-verifyStatus-successContent {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--if-space-4);\n}\n\n.if-verifyStatus-successIcon {\n  width: 4rem;\n  height: 4rem;\n  border-radius: 9999px;\n  background-color: #d1fae5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.if-verifyStatus-successIconSvg {\n  width: 2rem;\n  height: 2rem;\n  color: #059669;\n}\n\n.if-verifyStatus-textCenter {\n  text-align: center;\n}\n\n/* ============================================\n   UTILITY CLASSES\n   ============================================ */\n.if-hidden {\n  display: none;\n}\n\n.if-visuallyHidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+    style.textContent = "/**\r\n * InsForge React Component Library Styles\r\n * Traditional CSS with scoped class names (no Tailwind)\r\n */\r\n\r\n/* ============================================\r\n   FONTS\r\n   ============================================ */\r\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\r\n@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');\r\n\r\n/* ============================================\r\n   CSS VARIABLES\r\n   ============================================ */\r\n:root {\r\n  /* Colors */\r\n  --if-color-primary: #000000;\r\n  --if-color-primary-hover: #1f1f1f;\r\n  --if-color-text: #000000;\r\n  --if-color-text-secondary: #828282;\r\n  --if-color-text-muted: #a3a3a3;\r\n  --if-color-border: #d4d4d4;\r\n  --if-color-border-focus: #000000;\r\n  --if-color-bg-white: #ffffff;\r\n  --if-color-bg-light: #fafafa;\r\n  --if-color-bg-hover: #f9fafb;\r\n  --if-color-error: #dc2626;\r\n  --if-color-error-bg: #fee2e2;\r\n  --if-color-success: #16a34a;\r\n\r\n  /* Spacing */\r\n  --if-space-1: 0.25rem; /* 4px */\r\n  --if-space-2: 0.5rem; /* 8px */\r\n  --if-space-3: 0.75rem; /* 12px */\r\n  --if-space-4: 1rem; /* 16px */\r\n  --if-space-6: 1.5rem; /* 24px */\r\n  --if-space-8: 2rem; /* 32px */\r\n\r\n  /* Border Radius */\r\n  --if-radius-xs: 0.125rem; /* 2px */\r\n  --if-radius-sm: 0.25rem; /* 4px */\r\n  --if-radius-md: 0.375rem; /* 6px */\r\n  --if-radius-lg: 0.5rem; /* 8px */\r\n  --if-radius-xl: 0.75rem; /* 12px */\r\n\r\n  /* Typography */\r\n  --if-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\r\n  --if-font-family-manrope:\r\n    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\r\n  --if-font-size-xs: 0.75rem; /* 12px */\r\n  --if-font-size-sm: 0.875rem; /* 14px */\r\n  --if-font-size-base: 1rem; /* 16px */\r\n  --if-font-size-lg: 1.125rem; /* 18px */\r\n  --if-font-size-xl: 1.25rem; /* 20px */\r\n  --if-font-size-2xl: 1.5rem; /* 24px */\r\n\r\n  /* Shadows */\r\n  --if-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\r\n  --if-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\r\n  --if-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n\r\n  /* Transitions */\r\n  --if-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n  --if-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n/* ============================================\r\n   AUTH CONTAINER\r\n   ============================================ */\r\n.if-authContainer {\r\n  width: 100%;\r\n  max-width: 400px;\r\n  border-radius: var(--if-radius-xl);\r\n  overflow: hidden;\r\n  box-shadow: var(--if-shadow-lg);\r\n}\r\n\r\n.if-authCard {\r\n  background-color: var(--if-color-bg-white);\r\n  padding: var(--if-space-6);\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: stretch;\r\n  gap: var(--if-space-6);\r\n}\r\n\r\n/* ============================================\r\n   AUTH HEADER\r\n   ============================================ */\r\n.if-authHeader {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: flex-start;\r\n  gap: var(--if-space-2);\r\n}\r\n\r\n.if-authHeader-title {\r\n  font-size: var(--if-font-size-2xl);\r\n  font-weight: 600;\r\n  color: var(--if-color-text);\r\n  line-height: 2rem;\r\n  margin: 0;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-authHeader-subtitle {\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n  color: var(--if-color-text-secondary);\r\n  line-height: 1.5rem;\r\n  margin: 0;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n/* ============================================\r\n   FORM FIELD\r\n   ============================================ */\r\n.if-formField {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: stretch;\r\n  gap: var(--if-space-1);\r\n}\r\n\r\n.if-formField-label {\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n  color: var(--if-color-text);\r\n  line-height: 1.5rem;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-formField-input {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--if-space-2);\r\n  align-self: stretch;\r\n  padding: var(--if-space-2) var(--if-space-3);\r\n  border-radius: var(--if-radius-sm);\r\n  border: 1px solid var(--if-color-border);\r\n  background-color: var(--if-color-bg-white);\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n  line-height: 1.25rem;\r\n  color: var(--if-color-text);\r\n  font-family: var(--if-font-family);\r\n  transition: border-color var(--if-transition-base);\r\n}\r\n\r\n.if-formField-input::placeholder {\r\n  color: var(--if-color-text-muted);\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n}\r\n\r\n.if-formField-input:focus {\r\n  outline: none;\r\n  border-color: var(--if-color-border-focus);\r\n}\r\n\r\n/* ============================================\r\n   PASSWORD FIELD\r\n   ============================================ */\r\n.if-passwordField {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: stretch;\r\n  gap: var(--if-space-1);\r\n}\r\n\r\n.if-passwordField-labelRow {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.if-passwordField-label {\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n  color: var(--if-color-text);\r\n  line-height: 1.5rem;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-passwordField-forgotLink {\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n  color: var(--if-color-text-secondary);\r\n  text-decoration: none;\r\n  transition: color var(--if-transition-fast);\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-passwordField-inputWrapper {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n.if-passwordField-input {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  align-self: stretch;\r\n  padding: var(--if-space-2) var(--if-space-3);\r\n  padding-right: 2.5rem; /* Space for toggle button */\r\n  border-radius: var(--if-radius-sm);\r\n  border: 1px solid var(--if-color-border);\r\n  background-color: var(--if-color-bg-white);\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 400;\r\n  line-height: 1.25rem;\r\n  color: var(--if-color-text);\r\n  font-family: var(--if-font-family);\r\n  transition: border-color var(--if-transition-base);\r\n}\r\n\r\n.if-passwordField-input::placeholder {\r\n  color: var(--if-color-text-muted);\r\n}\r\n\r\n.if-passwordField-input:focus {\r\n  outline: none;\r\n  border-color: var(--if-color-border-focus);\r\n}\r\n\r\n.if-passwordField-toggleButton {\r\n  position: absolute;\r\n  right: var(--if-space-1);\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: var(--if-space-1);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--if-color-text-secondary);\r\n  transition: color var(--if-transition-fast);\r\n}\r\n\r\n/* ============================================\r\n   SUBMIT BUTTON\r\n   ============================================ */\r\n.if-submitButton {\r\n  border-radius: var(--if-radius-sm);\r\n  background-color: var(--if-color-primary);\r\n  height: 2.5rem;\r\n  width: 100%;\r\n  display: flex;\r\n  margin-top: var(--if-space-4);\r\n  padding: var(--if-space-2) var(--if-space-4);\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.625rem;\r\n  align-self: stretch;\r\n  color: var(--if-color-bg-white);\r\n  font-weight: 600;\r\n  font-family: var(--if-font-family-manrope);\r\n  font-size: var(--if-font-size-base);\r\n  line-height: normal;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: background-color var(--if-transition-base);\r\n}\r\n\r\n.if-submitButton:hover:not(:disabled) {\r\n  background-color: var(--if-color-primary-hover);\r\n}\r\n\r\n.if-submitButton:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.if-submitButton-icon {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n/* Spinner animation */\r\n@keyframes if-spin {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n.if-submitButton-spinner {\r\n  animation: if-spin 1s linear infinite;\r\n}\r\n\r\n/* ============================================\r\n   OAUTH BUTTON\r\n   ============================================ */\r\n.if-oauthButton {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 2.25rem;\r\n  padding: var(--if-space-2) var(--if-space-3);\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: var(--if-space-3);\r\n  border-radius: var(--if-radius-md);\r\n  border: 1px solid #e4e4e7;\r\n  background-color: var(--if-color-bg-white);\r\n  box-shadow: var(--if-shadow-md);\r\n  color: #09090b;\r\n  text-align: center;\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 500;\r\n  line-height: 1.25rem;\r\n  cursor: pointer;\r\n  transition: all var(--if-transition-base);\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-oauthButton:hover:not(:disabled) {\r\n  background-color: var(--if-color-bg-hover);\r\n  border-color: #9ca3af;\r\n}\r\n\r\n.if-oauthButton:disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.if-oauthButton-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: 1.125rem;\r\n  height: 1.125rem;\r\n}\r\n\r\n.if-oauthButton-full {\r\n  justify-content: center;\r\n}\r\n\r\n.if-oauthButton-short {\r\n  justify-content: center;\r\n  padding: var(--if-space-2);\r\n  gap: var(--if-space-2);\r\n}\r\n\r\n.if-oauthButton-icon-only {\r\n  justify-content: center;\r\n  gap: 0;\r\n}\r\n\r\n/* ============================================\r\n   OAUTH PROVIDERS CONTAINER\r\n   ============================================ */\r\n.if-oauthProviders {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--if-space-3);\r\n  width: 100%;\r\n}\r\n\r\n/* ============================================\r\n   AUTH LINK\r\n   ============================================ */\r\n.if-authLink {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: var(--if-space-1);\r\n  font-size: var(--if-font-size-sm);\r\n  color: var(--if-color-text-secondary);\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-authLink-text {\r\n  font-weight: 400;\r\n}\r\n\r\n.if-authLink-link {\r\n  font-weight: 600;\r\n  color: var(--if-color-text);\r\n  text-decoration: none;\r\n  transition: opacity var(--if-transition-fast);\r\n}\r\n\r\n/* ============================================\r\n   AUTH DIVIDER\r\n   ============================================ */\r\n.if-authDivider {\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  width: 100%;\r\n  gap: var(--if-space-3);\r\n}\r\n\r\n.if-authDivider-line {\r\n  flex: 1;\r\n  border-top: 1px solid var(--if-color-border);\r\n}\r\n\r\n.if-authDivider-text {\r\n  font-size: var(--if-font-size-sm);\r\n  color: var(--if-color-text-secondary);\r\n  font-weight: 400;\r\n  font-family: var(--if-font-family-manrope);\r\n}\r\n\r\n/* ============================================\r\n   ERROR BANNER\r\n   ============================================ */\r\n.if-errorBanner {\r\n  padding: var(--if-space-3);\r\n  background-color: var(--if-color-error-bg);\r\n  border-radius: var(--if-radius-md);\r\n  border: 1px solid var(--if-color-error);\r\n}\r\n\r\n.if-errorBanner-content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--if-space-2);\r\n}\r\n\r\n.if-errorBanner-icon {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n  flex-shrink: 0;\r\n  color: var(--if-color-error);\r\n}\r\n\r\n.if-errorBanner-text {\r\n  font-size: var(--if-font-size-sm);\r\n  color: var(--if-color-error);\r\n  font-weight: 400;\r\n  font-family: var(--if-font-family);\r\n  margin: 0;\r\n}\r\n\r\n/* ============================================\r\n   AUTH BRANDING\r\n   ============================================ */\r\n.if-authBranding {\r\n  background-color: var(--if-color-bg-light);\r\n  padding: var(--if-space-4) var(--if-space-2);\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: var(--if-space-1);\r\n}\r\n\r\n.if-authBranding-text {\r\n  font-size: var(--if-font-size-xs);\r\n  font-weight: 500;\r\n  color: var(--if-color-text);\r\n  font-family: var(--if-font-family-manrope);\r\n  margin: 0;\r\n}\r\n\r\n/* ============================================\r\n   VERIFICATION CODE INPUT\r\n   ============================================ */\r\n.if-verificationCode-inputContainer {\r\n  display: flex;\r\n  gap: var(--if-space-3);\r\n  justify-content: center;\r\n}\r\n\r\n.if-verificationCode-input {\r\n  width: 3rem;\r\n  height: 3rem;\r\n  text-align: center;\r\n  font-size: var(--if-font-size-base);\r\n  font-weight: 600;\r\n  border: 1px solid var(--if-color-border);\r\n  border-radius: var(--if-radius-sm);\r\n  background-color: var(--if-color-bg-white);\r\n  color: var(--if-color-text);\r\n  transition: border-color var(--if-transition-base);\r\n  font-family: var(--if-font-family-manrope);\r\n}\r\n\r\n.if-verificationCode-input:focus {\r\n  outline: none;\r\n  border-color: var(--if-color-border-focus);\r\n}\r\n\r\n/* ============================================\r\n   VERIFICATION STEP\r\n   ============================================ */\r\n.if-verificationStep {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--if-space-6);\r\n  align-items: stretch;\r\n}\r\n\r\n.if-verificationStep-descriptionContainer {\r\n  width: 100%;\r\n  background-color: #f5f5f5;\r\n  border-radius: var(--if-radius-lg);\r\n  padding: var(--if-space-3) var(--if-space-3) var(--if-space-6) var(--if-space-3);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--if-space-3);\r\n}\r\n\r\n.if-verificationStep-descriptionTitle {\r\n  color: var(--black, #000);\r\n  font-family: var(--if-font-family);\r\n  font-size: var(--if-font-size-base);\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n}\r\n\r\n.if-verificationStep-description,\r\n.if-verificationStep-codeDescription {\r\n  font-size: var(--if-font-size-sm);\r\n  color: #525252;\r\n  text-align: left;\r\n  font-family: var(--if-font-family);\r\n  margin: 0;\r\n}\r\n\r\n.if-verificationLink-email,\r\n.if-verificationCode-email {\r\n  font-weight: 500;\r\n  color: var(--if-color-text);\r\n}\r\n\r\n.if-verificationStep-codeContainer {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 40px;\r\n}\r\n\r\n.if-verificationStep-codeInputWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--if-space-6);\r\n}\r\n\r\n.if-verificationStep-verifyingText {\r\n  font-size: var(--if-font-size-sm);\r\n  color: var(--if-color-text-secondary);\r\n  text-align: center;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-verificationStep-resendContainer {\r\n  width: 100%;\r\n  font-size: var(--if-font-size-sm);\r\n  text-align: center;\r\n  color: var(--if-color-text-secondary);\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-verificationStep-resendButton {\r\n  color: var(--if-color-text);\r\n  font-weight: 500;\r\n  transition: all var(--if-transition-base);\r\n  background: none;\r\n  border: none;\r\n  padding: 0;\r\n  font-family: var(--if-font-family);\r\n  font-size: var(--if-font-size-sm);\r\n}\r\n\r\n.if-verificationStep-resendButton:not(:disabled) {\r\n  cursor: pointer;\r\n}\r\n\r\n.if-verificationStep-resendButton:disabled {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n}\r\n\r\n/* ============================================\r\n   PASSWORD STRENGTH INDICATOR\r\n   ============================================ */\r\n.if-passwordStrength {\r\n  margin-top: var(--if-space-2);\r\n}\r\n\r\n.if-passwordStrength-fill {\r\n  height: 100%;\r\n  transition:\r\n    width var(--if-transition-base),\r\n    background-color var(--if-transition-base);\r\n}\r\n\r\n.if-passwordStrength-text {\r\n  font-size: var(--if-font-size-xs);\r\n  color: var(--if-color-text-secondary);\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-passwordStrength-requirements {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--if-space-2);\r\n  font-size: var(--if-font-size-sm);\r\n  color: #525252;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-passwordStrength-requirement {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--if-space-2);\r\n}\r\n\r\n/* ============================================\r\n   FORM CONTAINER\r\n   ============================================ */\r\n.if-form {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  justify-content: center;\r\n  gap: var(--if-space-6);\r\n}\r\n\r\n/* ============================================\r\n   USER BUTTON\r\n   ============================================ */\r\n.if-userButton-container {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.if-userButton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--if-space-2);\r\n  padding: var(--if-space-2);\r\n  border-radius: 9999px;\r\n  background-color: transparent;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: all var(--if-transition-base);\r\n}\r\n\r\n.if-userButton:hover {\r\n  opacity: 0.8;\r\n}\r\n\r\n.if-userButton-detailed {\r\n  background-color: var(--if-color-bg-white);\r\n  border: 1px solid var(--if-color-border);\r\n  border-radius: var(--if-radius-sm);\r\n  padding: var(--if-space-2);\r\n}\r\n\r\n.if-userButton-detailed:hover {\r\n  background-color: var(--if-color-bg-light);\r\n  opacity: 1;\r\n}\r\n\r\n.if-userButton-avatar {\r\n  width: 2rem;\r\n  height: 2rem;\r\n  border-radius: 9999px;\r\n  background-color: var(--if-color-primary);\r\n  color: var(--if-color-bg-white);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-weight: 600;\r\n  font-size: var(--if-font-size-sm);\r\n  font-family: var(--if-font-family);\r\n  overflow: hidden;\r\n}\r\n\r\n.if-userButton-avatarImage {\r\n  border-radius: 9999px;\r\n  object-fit: cover;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.if-userButton-avatarInitials {\r\n  color: var(--if-color-bg-white);\r\n  font-weight: 600;\r\n  font-size: var(--if-font-size-sm);\r\n}\r\n\r\n.if-userButton-info {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 0.125rem;\r\n}\r\n\r\n.if-userButton-name {\r\n  font-size: var(--if-font-size-sm);\r\n  font-weight: 600;\r\n  color: var(--if-color-text);\r\n  line-height: 1.25rem;\r\n  text-align: left;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-userButton-email {\r\n  font-size: var(--if-font-size-xs);\r\n  color: var(--if-color-text-secondary);\r\n  line-height: 1rem;\r\n  text-align: left;\r\n  font-family: var(--if-font-family);\r\n}\r\n\r\n.if-userButton-menu {\r\n  position: absolute;\r\n  margin-top: var(--if-space-2);\r\n  background-color: var(--if-color-bg-white);\r\n  border: 1px solid var(--if-color-border);\r\n  border-radius: var(--if-radius-md);\r\n  box-shadow: var(--if-shadow-lg);\r\n  padding: var(--if-space-2);\r\n  min-width: 200px;\r\n  z-index: 50;\r\n}\r\n\r\n.if-userButton-menuItem {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--if-space-2);\r\n  padding: var(--if-space-2);\r\n  border-radius: var(--if-radius-sm);\r\n  cursor: pointer;\r\n  transition: background-color var(--if-transition-fast);\r\n  font-size: var(--if-font-size-sm);\r\n  color: var(--if-color-text);\r\n  font-family: var(--if-font-family);\r\n  background: none;\r\n  border: none;\r\n  width: 100%;\r\n  text-align: left;\r\n}\r\n\r\n.if-userButton-menuItem:hover {\r\n  background-color: var(--if-color-bg-light);\r\n}\r\n\r\n.if-userButton-menuItem-signout {\r\n  color: var(--if-color-error);\r\n}\r\n\r\n.if-userButton-menuItem-icon {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n/* ============================================\r\n   EMAIL VERIFICATION STATUS\r\n   ============================================ */\r\n.if-verifyStatus-container {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--if-space-6);\r\n}\r\n\r\n.if-verifyStatus-container-stretch {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  justify-content: center;\r\n  gap: var(--if-space-6);\r\n}\r\n\r\n.if-verifyStatus-spinner {\r\n  border-radius: 9999px;\r\n  height: 3rem;\r\n  width: 3rem;\r\n  border-bottom: 2px solid var(--if-color-primary);\r\n}\r\n\r\n.if-verifyStatus-successContent {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: var(--if-space-4);\r\n}\r\n\r\n.if-verifyStatus-successIcon {\r\n  width: 4rem;\r\n  height: 4rem;\r\n  border-radius: 9999px;\r\n  background-color: #d1fae5;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.if-verifyStatus-successIconSvg {\r\n  width: 2rem;\r\n  height: 2rem;\r\n  color: #059669;\r\n}\r\n\r\n.if-verifyStatus-textCenter {\r\n  text-align: center;\r\n}\r\n\r\n/* ============================================\r\n   UTILITY CLASSES\r\n   ============================================ */\r\n.if-hidden {\r\n  display: none;\r\n}\r\n\r\n.if-visuallyHidden {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border-width: 0;\r\n}\r\n";
     if (document.head) {
       document.head.appendChild(style);
     }
@@ -638,8 +638,12 @@ var InsforgeManager = class _InsforgeManager {
       };
     }
   }
-  async signUp(email, password) {
-    const sdkResult = await this.sdk.auth.signUp({ email, password });
+  async signUp(email, password, options) {
+    const sdkResult = await this.sdk.auth.signUp({
+      email,
+      password,
+      options
+    });
     if (sdkResult.data) {
       if (sdkResult.data.requireEmailVerification) {
         return sdkResult.data;
@@ -711,8 +715,11 @@ var InsforgeManager = class _InsforgeManager {
   async reloadAuth() {
     return await this.loadAuthState();
   }
-  async sendVerificationEmail(email) {
-    const sdkResult = await this.sdk.auth.sendVerificationEmail({ email });
+  async resendVerificationEmail(email, options) {
+    const sdkResult = await this.sdk.auth.resendVerificationEmail({
+      email,
+      options
+    });
     return sdkResult.data;
   }
   async sendResetPasswordEmail(email) {
@@ -2183,11 +2190,11 @@ function InsforgeProviderCore({
     () => ({
       setUser: (user) => manager.setUser(user),
       signIn: (email, password) => manager.signIn(email, password),
-      signUp: (email, password) => manager.signUp(email, password),
+      signUp: (email, password, options) => manager.signUp(email, password, options),
       signOut: () => manager.signOut(),
       updateUser: (data) => manager.updateUser(data),
       reloadAuth: () => manager.reloadAuth(),
-      sendVerificationEmail: (email) => manager.sendVerificationEmail(email),
+      resendVerificationEmail: (email, options) => manager.resendVerificationEmail(email, options),
       sendResetPasswordEmail: (email) => manager.sendResetPasswordEmail(email),
       resetPassword: (token2, newPassword) => manager.resetPassword(token2, newPassword),
       verifyEmail: (otp, email) => manager.verifyEmail(otp, email),
@@ -2246,7 +2253,7 @@ function useInsforge() {
       signOut: () => Promise.resolve(),
       updateUser: () => Promise.resolve({ error: "SSR mode" }),
       reloadAuth: () => Promise.resolve({ success: false, error: "SSR mode" }),
-      sendVerificationEmail: () => Promise.resolve(null),
+      resendVerificationEmail: () => Promise.resolve(null),
       sendResetPasswordEmail: () => Promise.resolve(null),
       resetPassword: () => Promise.resolve(null),
       verifyEmail: () => Promise.resolve({ error: "SSR mode" }),
@@ -3839,7 +3846,7 @@ function AuthEmailVerificationStep({
   onVerifyCode,
   emailSent = false
 }) {
-  const { sendVerificationEmail } = useInsforge();
+  const { resendVerificationEmail } = useInsforge();
   const [resendDisabled, setResendDisabled] = useState(emailSent ? true : false);
   const [resendCountdown, setResendCountdown] = useState(emailSent ? 60 : 0);
   const [isSending, setIsSending] = useState(false);
@@ -3866,7 +3873,7 @@ function AuthEmailVerificationStep({
     setResendCountdown(60);
     setIsSending(true);
     try {
-      await sendVerificationEmail(email);
+      await resendVerificationEmail(email);
     } catch {
       setResendDisabled(false);
       setResendCountdown(0);
@@ -4397,7 +4404,7 @@ function checkPasswordStrength(password) {
   }
   return { score, feedback };
 }
-function SignUp({ onError, ...uiProps }) {
+function SignUp({ onError, emailRedirectTo, ...uiProps }) {
   const { signUp, verifyEmail, loginWithOAuth } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
   const [email, setEmail] = useState("");
@@ -4439,7 +4446,7 @@ function SignUp({ onError, ...uiProps }) {
       return;
     }
     try {
-      const result = await signUp(emailValidation.data, password);
+      const result = await signUp(emailValidation.data, password, { emailRedirectTo });
       if ("error" in result) {
         throw new Error(result.error);
       }