@insforge/react 0.4.0 → 0.4.5

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-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 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-4);\n}\n\n.if-verificationCode-description {\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-verificationCode-email {\n  font-weight: 600;\n  color: var(--if-color-text);\n}\n\n.if-verificationCode-inputContainer {\n  display: flex;\n  gap: var(--if-space-2);\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-xl);\n  font-weight: 600;\n  border: 2px solid var(--if-color-border);\n  border-radius: var(--if-radius-md);\n  transition: border-color var(--if-transition-base);\n  font-family: var(--if-font-family);\n}\n\n.if-verificationCode-input:focus {\n  outline: none;\n  border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n   PASSWORD STRENGTH INDICATOR\n   ============================================ */\n.if-passwordStrength {\n  margin-top: var(--if-space-2);\n}\n\n.if-passwordStrength-bar {\n  height: 4px;\n  background-color: #e5e7eb;\n  border-radius: 2px;\n  overflow: hidden;\n  margin-bottom: 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-fill.weak {\n  background-color: #ef4444;\n  width: 33%;\n}\n\n.if-passwordStrength-fill.medium {\n  background-color: #f59e0b;\n  width: 66%;\n}\n\n.if-passwordStrength-fill.strong {\n  background-color: var(--if-color-success);\n  width: 100%;\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  margin-top: var(--if-space-2);\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-requirement {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-1);\n  margin-bottom: var(--if-space-1);\n}\n\n.if-passwordStrength-requirement.met {\n  color: var(--if-color-success);\n}\n\n.if-passwordStrength-requirement.unmet {\n  color: var(--if-color-text-muted);\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 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--if-space-2);\n  border-radius: 9999px;\n  background-color: var(--if-color-bg-white);\n  border: 1px solid var(--if-color-border);\n  cursor: pointer;\n  transition: all var(--if-transition-base);\n}\n\n.if-userButton:hover {\n  background-color: var(--if-color-bg-light);\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}\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}\n\n.if-userButton-menuItem:hover {\n  background-color: var(--if-color-bg-light);\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 = "/**\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 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-4);\n}\n\n.if-verificationCode-description {\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-verificationCode-email {\n  font-weight: 600;\n  color: var(--if-color-text);\n}\n\n.if-verificationCode-inputContainer {\n  display: flex;\n  gap: var(--if-space-2);\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-xl);\n  font-weight: 600;\n  border: 2px solid var(--if-color-border);\n  border-radius: var(--if-radius-md);\n  transition: border-color var(--if-transition-base);\n  font-family: var(--if-font-family);\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-description {\n  font-size: var(--if-font-size-sm);\n  color: var(--if-color-text-secondary);\n  text-align: center;\n  margin: 0;\n  font-family: var(--if-font-family);\n}\n\n.if-verificationStep-codeContainer {\n  width: 100%;\n  background-color: #f5f5f5;\n  border-radius: var(--if-radius-lg);\n  padding: var(--if-space-4) var(--if-space-4) var(--if-space-6);\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-4);\n}\n\n.if-verificationStep-codeInputWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--if-space-3);\n  margin-top: var(--if-space-2);\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  text-decoration: underline;\n}\n\n.if-verificationStep-resendButton:disabled {\n  cursor: not-allowed;\n  text-decoration: none;\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-bar {\n  height: 4px;\n  background-color: #e5e7eb;\n  border-radius: 2px;\n  overflow: hidden;\n  margin-bottom: 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-fill.weak {\n  background-color: #ef4444;\n  width: 33%;\n}\n\n.if-passwordStrength-fill.medium {\n  background-color: #f59e0b;\n  width: 66%;\n}\n\n.if-passwordStrength-fill.strong {\n  background-color: var(--if-color-success);\n  width: 100%;\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  margin-top: var(--if-space-2);\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-requirement {\n  display: flex;\n  align-items: center;\n  gap: var(--if-space-1);\n  margin-bottom: var(--if-space-1);\n}\n\n.if-passwordStrength-requirement.met {\n  color: var(--if-color-success);\n}\n\n.if-passwordStrength-requirement.unmet {\n  color: var(--if-color-text-muted);\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";
     if (document.head) {
       document.head.appendChild(style);
     }
@@ -13,6 +13,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
 }
 
 import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { createClient } from '@insforge/sdk';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
@@ -23,8 +24,8 @@ function InsforgeProvider({
   children,
   baseUrl,
   onAuthChange,
-  syncTokenToCookie,
-  clearCookie
+  onSignIn,
+  onSignOut
 }) {
   const [user, setUser] = useState(null);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -60,9 +61,9 @@ function InsforgeProvider({
         return { success: true };
       } else {
         await insforge.auth.signOut();
-        if (clearCookie) {
+        if (onSignOut) {
           try {
-            await clearCookie();
+            await onSignOut();
           } catch (error) {
             if (error instanceof Error) {
               console.error("[InsforgeProvider] Error clearing cookie:", error.message);
@@ -79,9 +80,9 @@ function InsforgeProvider({
     } catch (error) {
       console.error("[InsforgeProvider] Token validation failed:", error);
       await insforge.auth.signOut();
-      if (clearCookie) {
+      if (onSignOut) {
         try {
-          await clearCookie();
+          await onSignOut();
         } catch (error2) {
           if (error2 instanceof Error) {
             console.error("[InsforgeProvider] Error clearing cookie:", error2.message);
@@ -98,7 +99,7 @@ function InsforgeProvider({
         error: error instanceof Error ? error.message : "Authentication failed"
       };
     }
-  }, [insforge, onAuthChange, clearCookie]);
+  }, [insforge, onAuthChange, onSignOut]);
   useEffect(() => {
     loadAuthState();
     const intervalId = refreshIntervalRef.current;
@@ -137,9 +138,9 @@ function InsforgeProvider({
         if (onAuthChange) {
           onAuthChange(userData);
         }
-        if (syncTokenToCookie) {
+        if (onSignIn) {
           try {
-            await syncTokenToCookie(authToken);
+            await onSignIn(authToken);
           } catch (error) {
             if (error instanceof Error) {
               console.error("[InsforgeProvider] Error syncing token to cookie:", error.message);
@@ -159,7 +160,7 @@ function InsforgeProvider({
         }
       }
     },
-    [insforge, onAuthChange, syncTokenToCookie]
+    [insforge, onAuthChange, onSignIn]
   );
   const signIn = useCallback(
     async (email, password) => {
@@ -214,9 +215,9 @@ function InsforgeProvider({
   );
   const signOut = useCallback(async () => {
     await insforge.auth.signOut();
-    if (clearCookie) {
+    if (onSignOut) {
       try {
-        await clearCookie();
+        await onSignOut();
       } catch (error) {
         if (error instanceof Error) {
           console.error("[InsforgeProvider] Error clearing cookie:", error.message);
@@ -230,7 +231,7 @@ function InsforgeProvider({
     if (onAuthChange) {
       onAuthChange(null);
     }
-  }, [insforge, onAuthChange, clearCookie]);
+  }, [insforge, onAuthChange, onSignOut]);
   const updateUser = useCallback(
     async (data) => {
       if (!user) {
@@ -260,6 +261,13 @@ function InsforgeProvider({
     },
     [user, onAuthChange, insforge]
   );
+  const sendVerificationEmail = useCallback(
+    async (email) => {
+      const sdkResult = await insforge.auth.sendVerificationEmail({ email });
+      return sdkResult.data;
+    },
+    [insforge]
+  );
   const sendResetPasswordEmail = useCallback(
     async (email) => {
       const sdkResult = await insforge.auth.sendResetPasswordEmail({ email });
@@ -278,8 +286,39 @@ function InsforgeProvider({
     [insforge]
   );
   const verifyEmail = useCallback(
-    async (token) => {
-      const sdkResult = await insforge.auth.verifyEmail({ otp: token });
+    async (otp, email) => {
+      const sdkResult = await insforge.auth.verifyEmail({ otp, email: email || void 0 });
+      if (sdkResult.data) {
+        return sdkResult.data;
+      } else {
+        return {
+          accessToken: "",
+          error: {
+            message: sdkResult.error?.message || "Email verification failed"
+          }
+        };
+      }
+    },
+    [insforge]
+  );
+  const exchangeResetPasswordToken = useCallback(
+    async (email, code) => {
+      const sdkResult = await insforge.auth.exchangeResetPasswordToken({ email, code });
+      if (sdkResult.data) {
+        return sdkResult.data;
+      } else {
+        return {
+          error: {
+            message: sdkResult.error?.message || "Failed to exchange reset password token"
+          }
+        };
+      }
+    },
+    [insforge]
+  );
+  const loginWithOAuth = useCallback(
+    async (provider, redirectTo) => {
+      const sdkResult = await insforge.auth.signInWithOAuth({ provider, redirectTo });
       return sdkResult.data;
     },
     [insforge]
@@ -298,10 +337,13 @@ function InsforgeProvider({
         updateUser,
         reloadAuth: loadAuthState,
         baseUrl,
+        sendVerificationEmail,
         sendResetPasswordEmail,
         resetPassword,
         verifyEmail,
-        getPublicAuthConfig
+        exchangeResetPasswordToken,
+        getPublicAuthConfig,
+        loginWithOAuth
       },
       children
     }
@@ -419,21 +461,12 @@ function AuthErrorBanner({ error }) {
   if (!error) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-    /* @__PURE__ */ jsx(
-      AlertTriangle,
-      {
-        style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#dc2626" }
-      }
-    ),
+  return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { className: "if-errorBanner-content", children: [
+    /* @__PURE__ */ jsx(AlertTriangle, { className: "if-errorBanner-icon" }),
     /* @__PURE__ */ jsx("span", { className: "if-errorBanner-text", children: error })
   ] }) });
 }
-function AuthFormField({
-  label,
-  id,
-  ...props
-}) {
+function AuthFormField({ label, id, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
     /* @__PURE__ */ jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
@@ -560,14 +593,17 @@ function AuthSubmitButton({
   children,
   isLoading = false,
   confirmed = false,
-  disabled = false
+  disabled = false,
+  type = "submit",
+  onClick
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      type: "submit",
+      type,
       className: "if-submitButton if-internal-b8p3m4",
       disabled: disabled || isLoading || confirmed,
+      onClick,
       children: [
         isLoading && /* @__PURE__ */ jsx(Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
         confirmed && /* @__PURE__ */ jsx(CircleCheck, { className: "if-submitButton-icon", size: 20 }),
@@ -576,24 +612,16 @@ function AuthSubmitButton({
     }
   );
 }
-function AuthLink({
-  text,
-  linkText,
-  href
-}) {
-  const currentSearch = typeof window !== "undefined" ? window.location.search : "";
+function AuthLink({ text, linkText, href }) {
+  const [searchParams] = useSearchParams();
+  const currentSearch = searchParams.toString();
   const finalHref = (() => {
     if (!currentSearch) {
       return href;
     }
     try {
       const url = new URL(href, window.location.origin);
-      const currentParams = new URLSearchParams(currentSearch);
-      currentParams.forEach((value, key) => {
-        if (!url.searchParams.has(key)) {
-          url.searchParams.set(key, value);
-        }
-      });
+      url.search = currentSearch;
       return url.pathname + url.search;
     } catch {
       return href;
@@ -953,28 +981,26 @@ function AuthVerificationCodeInput({
 }
 function AuthEmailVerificationStep({
   email,
-  description,
   method = "code",
   onVerifyCode
 }) {
-  const { baseUrl } = useInsforge();
-  const [insforge] = useState(() => createClient({ baseUrl }));
+  const { sendVerificationEmail } = useInsforge();
   const [resendDisabled, setResendDisabled] = useState(true);
   const [resendCountdown, setResendCountdown] = useState(60);
   const [isSending, setIsSending] = useState(false);
   const [verificationCode, setVerificationCode] = useState("");
   const [isVerifying, setIsVerifying] = useState(false);
-  const [verificationError, setVerificationError] = useState("");
   const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
   useEffect(() => {
     const sendInitialEmail = async () => {
       try {
-        await insforge.auth.sendVerificationEmail({ email });
-      } catch {
+        await sendVerificationEmail(email);
+      } catch (error) {
+        console.error("Failed to send verification email:", error);
       }
     };
     void sendInitialEmail();
-  }, [email, method, insforge.auth]);
+  }, [email, sendVerificationEmail]);
   useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
@@ -993,9 +1019,8 @@ function AuthEmailVerificationStep({
     setResendDisabled(true);
     setResendCountdown(60);
     setIsSending(true);
-    setVerificationError("");
     try {
-      await insforge.auth.sendVerificationEmail({ email });
+      await sendVerificationEmail(email);
     } catch {
       setResendDisabled(false);
       setResendCountdown(0);
@@ -1003,123 +1028,157 @@ function AuthEmailVerificationStep({
       setIsSending(false);
     }
   };
-  const handleVerifyCode = async (code) => {
-    if (!onVerifyCode) {
+  const handleSubmit = async () => {
+    if (!onVerifyCode || verificationCode.length !== 6) {
       return;
     }
     setIsVerifying(true);
-    setVerificationError("");
     try {
-      await onVerifyCode(code);
-    } catch (error) {
-      setVerificationError(
-        error instanceof Error ? error.message : "Invalid verification code. Please try again."
-      );
-      setVerificationCode("");
+      await onVerifyCode(verificationCode);
     } finally {
       setIsVerifying(false);
+      setVerificationCode("");
     }
   };
-  const displayDescription = description || defaultDescription;
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx("p", { className: "if-verificationCode-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+  const displayDescription = defaultDescription;
+  const isLinkMethod = method === "link";
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
       part,
       index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
     ] }, index)) }),
-    verificationError && /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
+      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying
+        }
+      ) }),
       /* @__PURE__ */ jsx(
-        "svg",
+        AuthSubmitButton,
         {
-          style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#DC2626" },
-          fill: "none",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: "2",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" })
+          type: "button",
+          isLoading: isVerifying,
+          disabled: isVerifying || verificationCode.length !== 6,
+          onClick: () => {
+            void handleSubmit();
+          },
+          children: isVerifying ? "Verifying..." : "Verify Code"
         }
-      ),
-      /* @__PURE__ */ jsx("p", { className: "if-errorBanner-text", children: verificationError })
-    ] }) }),
-    method === "code" && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          backgroundColor: "#F5F5F5",
-          borderRadius: "0.5rem",
-          padding: "1rem 1rem 1.5rem",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            AuthVerificationCodeInput,
-            {
-              value: verificationCode,
-              onChange: setVerificationCode,
-              email,
-              disabled: isVerifying,
-              onComplete: (code) => {
-                void handleVerifyCode(code);
-              }
-            }
-          ),
-          isVerifying && /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                fontSize: "0.875rem",
-                color: "#828282",
-                textAlign: "center",
-                fontFamily: "var(--if-font-family)"
-              },
-              children: "Verifying..."
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          fontSize: "0.875rem",
-          textAlign: "center",
-          color: "#828282",
-          fontFamily: "var(--if-font-family)"
-        },
-        children: [
-          "Didn't receive the email?",
-          " ",
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                void handleResend();
-              },
-              disabled: resendDisabled || isSending,
-              style: {
-                color: "#000",
-                fontWeight: 500,
-                transition: "all 0.2s",
-                cursor: resendDisabled || isSending ? "not-allowed" : "pointer",
-                background: "none",
-                border: "none",
-                padding: 0,
-                textDecoration: resendDisabled || isSending ? "none" : "underline",
-                opacity: resendDisabled || isSending ? 0.5 : 1,
-                fontFamily: "var(--if-font-family)"
-              },
-              children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
-            }
-          )
-        ]
-      }
-    )
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "if-verificationStep-resendButton",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
+  ] });
+}
+function AuthResetPasswordVerificationStep({
+  email,
+  method,
+  onVerifyCode,
+  onResendEmail
+}) {
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSending, setIsSending] = useState(false);
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown]);
+  const handleResend = useCallback(async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSending(true);
+    try {
+      await onResendEmail();
+    } catch {
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSending(false);
+    }
+  }, [onResendEmail]);
+  const handleSubmit = async () => {
+    if (!onVerifyCode || verificationCode.length !== 6) {
+      return;
+    }
+    setIsVerifying(true);
+    try {
+      await onVerifyCode(verificationCode);
+    } finally {
+      setIsVerifying(false);
+      setVerificationCode("");
+    }
+  };
+  const isLinkMethod = method === "link";
+  const description = isLinkMethod ? `We've sent a password reset link to ${email}. Please check your email and click the link to reset your password. The link will expire in 10 minutes.` : `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`;
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: description }),
+    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
+      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        AuthSubmitButton,
+        {
+          type: "button",
+          isLoading: isVerifying,
+          disabled: isVerifying || verificationCode.length !== 6,
+          onClick: () => {
+            void handleSubmit();
+          },
+          children: isVerifying ? "Verifying..." : "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "if-verificationStep-resendButton",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
   ] });
 }
 function SignInForm({
@@ -1149,8 +1208,7 @@ function SignInForm({
   signUpUrl = "/sign-up",
   dividerText = "or",
   showVerificationStep = false,
-  onVerifyCode,
-  verificationDescription
+  onVerifyCode
 }) {
   return /* @__PURE__ */ jsxs(AuthContainer, { children: [
     /* @__PURE__ */ jsx(
@@ -1161,14 +1219,7 @@ function SignInForm({
       }
     ),
     /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    showVerificationStep ? /* @__PURE__ */ jsx(
-      AuthEmailVerificationStep,
-      {
-        email,
-        description: verificationDescription,
-        onVerifyCode
-      }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+    showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsx(
         AuthFormField,
         {
@@ -1218,16 +1269,17 @@ function SignInForm({
     ] })
   ] });
 }
-function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }) {
-  const { signIn, baseUrl } = useInsforge();
+function SignIn({ onError, ...uiProps }) {
+  const { signIn, verifyEmail, loginWithOAuth } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [step, setStep] = useState("form");
-  const [oauthLoading, setOauthLoading] = useState(null);
-  const [insforge] = useState(() => createClient({ baseUrl }));
+  const [oauthLoading] = useState(null);
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
   async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
@@ -1243,10 +1295,13 @@ function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }) {
         throw new Error(result.error);
       }
       const { user, accessToken, redirectTo } = result;
-      if (onSuccess) {
-        if (user) {
-          onSuccess(user, accessToken || "", redirectTo);
-        }
+      if (user) {
+        const finalUrl = new URL(redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", accessToken);
+        finalUrl.searchParams.set("user_id", user.id);
+        finalUrl.searchParams.set("email", user.email);
+        finalUrl.searchParams.set("name", user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Sign in failed";
@@ -1259,38 +1314,28 @@ function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }) {
     }
   }
   async function handleVerifyCode(code) {
+    setError("");
     try {
-      const result = await insforge.auth.verifyEmail({ email, otp: code });
-      if (result.error) {
+      const result = await verifyEmail(email, code);
+      if (result?.error) {
         throw new Error(result.error.message || "Verification failed");
       }
-      if (result.data?.accessToken) {
-        if (onSuccess && result.data.user) {
-          onSuccess(result.data.user, result.data.accessToken);
-        }
+      if (result?.user) {
+        const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", result.accessToken);
+        finalUrl.searchParams.set("user_id", result.user.id);
+        finalUrl.searchParams.set("email", result.user.email);
+        finalUrl.searchParams.set("name", result.user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
-      throw new Error(errorMessage);
-    }
-  }
-  async function handleOAuth(provider) {
-    try {
-      setOauthLoading(provider);
-      setError("");
-      await insforge.auth.signInWithOAuth({
-        provider,
-        redirectTo: afterSignInUrl
-      });
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : `${provider} sign in failed`;
       setError(errorMessage);
-      if (onError) {
-        onError(new Error(errorMessage));
-      }
-      setOauthLoading(null);
     }
   }
+  function handleOAuth(provider) {
+    loginWithOAuth(provider, redirectUrl || "");
+  }
   if (!authConfig) {
     return null;
   }
@@ -1339,8 +1384,7 @@ function SignUpForm({
   signInUrl = "/sign-in",
   dividerText = "or",
   showVerificationStep = false,
-  onVerifyCode,
-  verificationDescription
+  onVerifyCode
 }) {
   return /* @__PURE__ */ jsxs(AuthContainer, { children: [
     /* @__PURE__ */ jsx(
@@ -1351,14 +1395,7 @@ function SignUpForm({
       }
     ),
     /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    showVerificationStep ? /* @__PURE__ */ jsx(
-      AuthEmailVerificationStep,
-      {
-        email,
-        description: verificationDescription,
-        onVerifyCode
-      }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+    showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsx(
         AuthFormField,
         {
@@ -1477,16 +1514,17 @@ function checkPasswordStrength(password) {
   }
   return { score, feedback };
 }
-function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }) {
-  const { signUp, baseUrl } = useInsforge();
+function SignUp({ onError, ...uiProps }) {
+  const { signUp, verifyEmail, loginWithOAuth } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [step, setStep] = useState("form");
-  const [oauthLoading, setOauthLoading] = useState(null);
-  const [insforge] = useState(() => createClient({ baseUrl }));
+  const [oauthLoading] = useState(null);
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
   async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
@@ -1528,9 +1566,12 @@ function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }) {
         return;
       }
       if (result.accessToken && result.user) {
-        if (onSuccess) {
-          onSuccess(result.user, result.accessToken, result.redirectTo);
-        }
+        const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", result.accessToken);
+        finalUrl.searchParams.set("user_id", result.user.id);
+        finalUrl.searchParams.set("email", result.user.email);
+        finalUrl.searchParams.set("name", result.user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Sign up failed";
@@ -1543,38 +1584,28 @@ function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }) {
     }
   }
   async function handleVerifyCode(code) {
+    setError("");
     try {
-      const result = await insforge.auth.verifyEmail({ email, otp: code });
-      if (result.error) {
+      const result = await verifyEmail(email, code);
+      if (result?.error) {
         throw new Error(result.error.message || "Verification failed");
       }
-      if (result.data?.accessToken) {
-        if (onSuccess && result.data.user) {
-          onSuccess(result.data.user, result.data.accessToken);
-        }
+      if (result?.user) {
+        const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
+        finalUrl.searchParams.set("access_token", result.accessToken);
+        finalUrl.searchParams.set("user_id", result.user.id);
+        finalUrl.searchParams.set("email", result.user.email);
+        finalUrl.searchParams.set("name", result.user.name);
+        window.location.href = finalUrl.toString();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
-      throw new Error(errorMessage);
-    }
-  }
-  async function handleOAuth(provider) {
-    try {
-      setOauthLoading(provider);
-      setError("");
-      await insforge.auth.signInWithOAuth({
-        provider,
-        redirectTo: afterSignUpUrl
-      });
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : `${provider} sign up failed`;
       setError(errorMessage);
-      if (onError) {
-        onError(new Error(errorMessage));
-      }
-      setOauthLoading(null);
     }
   }
+  function handleOAuth(provider) {
+    loginWithOAuth(provider, redirectUrl || "");
+  }
   if (!authConfig) {
     return null;
   }
@@ -1604,7 +1635,6 @@ function ForgotPasswordForm({
   onSubmit,
   error,
   loading = false,
-  success = false,
   title = "Forgot Password?",
   subtitle = "Enter your email address and we'll send you a code to reset your password.",
   emailLabel = "Email",
@@ -1613,53 +1643,30 @@ function ForgotPasswordForm({
   loadingButtonText = "Sending...",
   backToSignInText = "Remember your password?",
   backToSignInUrl = "/sign-in",
-  successTitle = "Check Your Email",
-  successMessage
+  showVerificationStep = false,
+  resetPasswordMethod = "code",
+  onVerifyCode,
+  onResendEmail
 }) {
-  if (success) {
-    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
-      "div",
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(
+      AuthHeader,
       {
-        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: "4rem",
-                height: "4rem",
-                borderRadius: "50%",
-                backgroundColor: "#D1FAE5",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  style: { width: "2rem", height: "2rem", color: "#059669" },
-                  fill: "none",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: "2",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
-          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
-        ]
+        title: showVerificationStep ? resetPasswordMethod === "link" ? "Check Your Email" : "Enter Reset Code" : title,
+        subtitle: showVerificationStep ? "" : subtitle
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
-    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
+    ),
     /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+    showVerificationStep ? /* @__PURE__ */ jsx(
+      AuthResetPasswordVerificationStep,
+      {
+        email,
+        method: resetPasswordMethod,
+        onVerifyCode,
+        onResendEmail: onResendEmail || (async () => {
+        })
+      }
+    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsx(
         AuthFormField,
         {
@@ -1675,7 +1682,7 @@ function ForgotPasswordForm({
       ),
       /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
     ] }),
-    /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
+    !showVerificationStep && /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
   ] });
 }
 function ResetPasswordForm({
@@ -1696,11 +1703,12 @@ function ResetPasswordForm({
   confirmPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
   submitButtonText = "Reset Password",
   loadingButtonText = "Resetting...",
-  backToSignInText = "",
-  backToSignInUrl = "/sign-in",
-  successTitle = "Password Reset Successful!",
-  successMessage = "Your password has been successfully reset. You can now sign in with your new password."
+  successTitle = "Password Reset Successful!"
 }) {
+  let successMessage = "Your password has been successfully reset. You can close this page and sign in with your new password.";
+  if (authConfig && authConfig.verifyEmailMethod === "code") {
+    successMessage = "Your password has been successfully reset. You can wait for redirect to sign in with your new password.";
+  }
   if (success) {
     return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
       "div",
@@ -1735,8 +1743,7 @@ function ResetPasswordForm({
             }
           ),
           /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
-          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
+          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
         ]
       }
     ) });
@@ -1773,40 +1780,87 @@ function ResetPasswordForm({
         }
       ),
       /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
-    ] }),
-    /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
+    ] })
   ] });
 }
-function ResetPassword({
-  token,
-  backToSignInUrl = "/sign-in",
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
-  const { resetPassword } = useInsforge();
+function ForgotPassword({ onError, ...uiProps }) {
+  const { sendResetPasswordEmail, exchangeResetPasswordToken, resetPassword } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
-  const [newPassword, setNewPassword] = useState("");
+  const [searchParams] = useSearchParams();
+  const [step, setStep] = useState("email");
+  const [email, setEmail] = useState("");
+  const [resetToken, setResetToken] = useState("");
+  const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
-  async function handleSubmit(e) {
+  const [showVerificationStep, setShowVerificationStep] = useState(false);
+  async function handleEmailSubmit(e) {
     e.preventDefault();
     setLoading(true);
     setError("");
-    if (!authConfig) {
-      setError("Configuration not loaded. Please refresh the page.");
+    const emailValidation = emailSchema.safeParse(email);
+    if (!emailValidation.success) {
+      const firstError = emailValidation.error.issues[0];
+      setError(firstError.message);
       setLoading(false);
       return;
     }
+    try {
+      const result = await sendResetPasswordEmail(emailValidation.data);
+      if (result?.success) {
+        setShowVerificationStep(true);
+      } else {
+        const errorMessage = result?.message || "Failed to send reset email";
+        setError(errorMessage);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to send reset email";
+      setError(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleVerifyCode(code) {
+    setError("");
+    try {
+      const result = await exchangeResetPasswordToken(email, code);
+      if ("error" in result) {
+        throw new Error(result.error.message || "Failed to verify code");
+      }
+      if (result.token) {
+        setResetToken(result.token);
+        setStep("password");
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
+      setError(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+    }
+  }
+  async function handleResendEmail() {
+    await sendResetPasswordEmail(email);
+  }
+  async function handleResetPasswordSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
     if (newPassword !== confirmPassword) {
       setError("Passwords do not match");
       setLoading(false);
       return;
     }
-    if (!token) {
-      setError("Reset token is missing");
+    if (!authConfig) {
+      setError("Configuration not loaded");
       setLoading(false);
       return;
     }
@@ -1825,12 +1879,16 @@ function ResetPassword({
       return;
     }
     try {
-      const result = await resetPassword(token, newPassword);
+      const result = await resetPassword(resetToken, newPassword);
       if (result?.message) {
         setSuccess(true);
-        if (onSuccess) {
-          onSuccess();
-        }
+        const signInUrl = new URL("/sign-in", window.location.origin);
+        searchParams.forEach((value, key) => {
+          signInUrl.searchParams.set(key, value);
+        });
+        setTimeout(() => {
+          window.location.href = signInUrl.toString();
+        }, 2e3);
       } else {
         const errorMessage = "Failed to reset password";
         setError(errorMessage);
@@ -1851,6 +1909,25 @@ function ResetPassword({
   if (!authConfig) {
     return null;
   }
+  if (step === "email") {
+    return /* @__PURE__ */ jsx(
+      ForgotPasswordForm,
+      {
+        email,
+        onEmailChange: setEmail,
+        onSubmit: (e) => {
+          void handleEmailSubmit(e);
+        },
+        error,
+        loading,
+        showVerificationStep,
+        resetPasswordMethod: authConfig.resetPasswordMethod,
+        onVerifyCode: handleVerifyCode,
+        onResendEmail: handleResendEmail,
+        ...uiProps
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     ResetPasswordForm,
     {
@@ -1858,83 +1935,71 @@ function ResetPassword({
       confirmPassword,
       onNewPasswordChange: setNewPassword,
       onConfirmPasswordChange: setConfirmPassword,
-      onSubmit: handleSubmit,
+      onSubmit: handleResetPasswordSubmit,
       error,
       loading,
       success,
       authConfig,
-      backToSignInUrl,
       ...uiProps
     }
   );
 }
-function ForgotPassword({
-  backToSignInUrl = "/sign-in",
-  onSuccess,
-  onError,
-  ...uiProps
-}) {
-  const { sendResetPasswordEmail, baseUrl } = useInsforge();
+function ResetPassword({ onError, ...uiProps }) {
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get("token");
+  const { resetPassword } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
-  const [insforge] = useState(() => createClient({ baseUrl }));
-  const [step, setStep] = useState("email");
-  const [email, setEmail] = useState("");
-  const [verificationCode, setVerificationCode] = useState("");
-  const [resetToken, setResetToken] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
-  const [resendDisabled, setResendDisabled] = useState(true);
-  const [resendCountdown, setResendCountdown] = useState(60);
-  const [isSendingCode, setIsSendingCode] = useState(false);
-  const [isVerifyingCode, setIsVerifyingCode] = useState(false);
-  useEffect(() => {
-    if (resendCountdown > 0 && step === "code") {
-      const timer = setInterval(() => {
-        setResendCountdown((prev) => {
-          if (prev <= 1) {
-            setResendDisabled(false);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1e3);
-      return () => clearInterval(timer);
-    }
-  }, [resendCountdown, step]);
-  async function handleEmailSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
     setError("");
-    const emailValidation = emailSchema.safeParse(email);
-    if (!emailValidation.success) {
-      const firstError = emailValidation.error.issues[0];
+    if (!authConfig) {
+      setError("Configuration not loaded. Please refresh the page.");
+      setLoading(false);
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match");
+      setLoading(false);
+      return;
+    }
+    if (!token) {
+      setError("Reset token is missing");
+      setLoading(false);
+      return;
+    }
+    const passwordZodSchema = createPasswordSchema({
+      minLength: authConfig.passwordMinLength,
+      requireUppercase: authConfig.requireUppercase,
+      requireLowercase: authConfig.requireLowercase,
+      requireNumber: authConfig.requireNumber,
+      requireSpecialChar: authConfig.requireSpecialChar
+    });
+    const passwordValidation = passwordZodSchema.safeParse(newPassword);
+    if (!passwordValidation.success) {
+      const firstError = passwordValidation.error.issues[0];
       setError(firstError.message);
       setLoading(false);
       return;
     }
     try {
-      const result = await sendResetPasswordEmail(emailValidation.data);
-      if (result?.success) {
-        if (authConfig?.resetPasswordMethod === "link") {
-          setSuccess(true);
-          if (onSuccess) {
-            onSuccess();
-          }
-        } else {
-          setStep("code");
-          setResendDisabled(true);
-          setResendCountdown(60);
-        }
+      const result = await resetPassword(token, newPassword);
+      if (result?.message) {
+        setSuccess(true);
       } else {
-        const errorMessage = result?.message || "Failed to send reset code";
+        const errorMessage = "Failed to reset password";
         setError(errorMessage);
         if (onError) {
           onError(new Error(errorMessage));
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Failed to send reset code";
+      const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
       setError(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -1943,297 +2008,157 @@ function ForgotPassword({
       setLoading(false);
     }
   }
-  async function handleVerifyCode(code) {
-    setIsVerifyingCode(true);
-    setError("");
-    setVerificationCode(code);
-    try {
-      const result = await insforge.auth.exchangeResetPasswordToken({ email, code });
-      if (result.error) {
-        throw new Error(result.error.message || "Failed to verify code");
-      }
-      if (result.data) {
-        setResetToken(result.data.token);
-        setStep("password");
-      }
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
-      setError(errorMessage);
-      setVerificationCode("");
-    } finally {
-      setIsVerifyingCode(false);
-    }
-  }
-  const handleResendCode = useCallback(async () => {
-    setResendDisabled(true);
-    setResendCountdown(60);
-    setIsSendingCode(true);
-    setError("");
-    try {
-      await sendResetPasswordEmail(email);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Failed to resend code";
-      setError(errorMessage);
-      setResendDisabled(false);
-      setResendCountdown(0);
-    } finally {
-      setIsSendingCode(false);
-    }
-  }, [email, sendResetPasswordEmail]);
-  function handlePasswordResetSuccess(redirectTo) {
-    const targetUrl = redirectTo || backToSignInUrl;
-    if (onSuccess) {
-      onSuccess();
-    }
-    setTimeout(() => {
-      window.location.href = targetUrl;
-    }, 1500);
-  }
   if (!authConfig) {
     return null;
   }
-  if (step === "email") {
-    return /* @__PURE__ */ jsx(
-      ForgotPasswordForm,
-      {
-        email,
-        onEmailChange: setEmail,
-        onSubmit: (e) => {
-          void handleEmailSubmit(e);
-        },
-        error,
-        loading,
-        success,
-        backToSignInUrl,
-        ...uiProps
-      }
-    );
-  }
-  if (step === "code") {
+  if (!token) {
     return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+      /* @__PURE__ */ jsx(AuthHeader, { title: "Invalid Reset Link", subtitle: "" }),
       /* @__PURE__ */ jsx(
-        AuthHeader,
-        {
-          title: "Enter Reset Code",
-          subtitle: `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`
-        }
-      ),
-      /* @__PURE__ */ jsx(AuthErrorBanner, { error }),
-      /* @__PURE__ */ jsxs(
         "div",
         {
           style: {
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1.5rem",
-            alignItems: "center"
+            padding: "1.5rem",
+            backgroundColor: "#FEE2E2",
+            borderRadius: "0.5rem",
+            border: "1px solid #DC2626"
           },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  backgroundColor: "#F5F5F5",
-                  borderRadius: "0.5rem",
-                  padding: "1rem 1rem 1.5rem",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "1rem"
-                },
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "0.75rem",
-                      marginTop: "0.5rem"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        AuthVerificationCodeInput,
-                        {
-                          value: verificationCode,
-                          onChange: setVerificationCode,
-                          email,
-                          disabled: isVerifyingCode,
-                          onComplete: (code) => {
-                            void handleVerifyCode(code);
-                          }
-                        }
-                      ),
-                      isVerifyingCode && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: "Verifying..." })
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  fontSize: "0.875rem",
-                  textAlign: "center",
-                  color: "#828282",
-                  fontFamily: "var(--if-font-family)"
-                },
-                children: [
-                  "Didn't receive the email?",
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        void handleResendCode();
-                      },
-                      disabled: resendDisabled || isSendingCode,
-                      style: {
-                        color: "#000",
-                        fontWeight: 500,
-                        transition: "all 0.2s",
-                        cursor: resendDisabled || isSendingCode ? "not-allowed" : "pointer",
-                        background: "none",
-                        border: "none",
-                        padding: 0,
-                        textDecoration: resendDisabled || isSendingCode ? "none" : "underline",
-                        opacity: resendDisabled || isSendingCode ? 0.5 : 1,
-                        fontFamily: "var(--if-font-family)"
-                      },
-                      children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
-                    }
-                  )
-                ]
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "0.875rem",
+                color: "#DC2626",
+                margin: 0,
+                fontFamily: "var(--if-font-family)"
+              },
+              children: "The password reset link is missing or invalid. Please request a new password reset link."
+            }
+          )
         }
-      ),
-      /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", children: "Back to Sign In" }) })
+      )
     ] });
   }
-  return /* @__PURE__ */ jsx(
-    ResetPassword,
-    {
-      token: resetToken,
-      backToSignInUrl,
-      onSuccess: handlePasswordResetSuccess,
-      onError
-    }
-  );
-}
-function VerifyEmailStatus({
-  status,
-  error,
-  verifyingTitle = "Verifying your email...",
-  successTitle = "Email Verified!",
-  successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
-  errorTitle = "Verification Failed"
-}) {
-  if (status === "verifying") {
+  if (success) {
     return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
       "div",
       {
-        style: {
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "1.5rem"
-        },
+        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
         children: [
-          /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "if-submitButton-spinner",
               style: {
+                width: "4rem",
+                height: "4rem",
                 borderRadius: "50%",
-                height: "3rem",
-                width: "3rem",
-                borderBottom: "2px solid black"
-              }
+                backgroundColor: "#D1FAE5",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  style: { width: "2rem", height: "2rem", color: "#059669" },
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              style: {
+                fontSize: "1.5rem",
+                fontWeight: 600,
+                color: "#000",
+                margin: 0,
+                textAlign: "center",
+                fontFamily: "var(--if-font-family)"
+              },
+              children: "Password Reset Successfully"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "0.875rem",
+                color: "#828282",
+                textAlign: "center",
+                margin: 0,
+                fontFamily: "var(--if-font-family)"
+              },
+              children: "Your password has been reset successfully. You can now close this page and return to the login page in your original tab."
             }
           )
         ]
       }
     ) });
   }
+  return /* @__PURE__ */ jsx(
+    ResetPasswordForm,
+    {
+      newPassword,
+      confirmPassword,
+      onNewPasswordChange: setNewPassword,
+      onConfirmPasswordChange: setConfirmPassword,
+      onSubmit: handleSubmit,
+      error,
+      loading,
+      success: false,
+      authConfig,
+      ...uiProps
+    }
+  );
+}
+function VerifyEmailStatus({
+  status,
+  error,
+  verifyingTitle = "Verifying your email...",
+  successTitle = "Email Verified!",
+  successMessage = "Your email has been verified successfully. You can close this page and sign in to your app.",
+  errorTitle = "Verification Failed"
+}) {
+  if (status === "verifying") {
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-container", children: [
+      /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
+      /* @__PURE__ */ jsx("div", { className: "if-submitButton-spinner if-verifyStatus-spinner" })
+    ] }) });
+  }
   if (status === "error") {
-    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
-      "div",
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
+      /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
+      /* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: [
+        error || "The verification link is invalid or has expired.",
+        " Please try again or contact support if the problem persists. You can close this page and return to your app."
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-successContent", children: [
+    /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-successIcon", children: /* @__PURE__ */ jsx(
+      "svg",
       {
-        style: {
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch",
-          justifyContent: "center",
-          gap: "1.5rem"
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
-          /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
-          /* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", style: { lineHeight: "1.5" }, children: [
-            error || "The verification link is invalid or has expired.",
-            " Please try again or contact support if the problem persists. You can close this page and return to your app."
-          ] })
-        ] })
+        className: "if-verifyStatus-successIconSvg",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-        justifyContent: "center",
-        gap: "1.5rem"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "4rem",
-                  height: "4rem",
-                  borderRadius: "50%",
-                  backgroundColor: "#D1FAE5",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    style: { width: "2rem", height: "2rem", color: "#059669" },
-                    fill: "none",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
-            /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
-          ]
-        }
-      )
-    }
-  ) });
+    ) }),
+    /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title if-verifyStatus-textCenter", children: successTitle }),
+    /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-verifyStatus-textCenter", children: successMessage })
+  ] }) }) });
 }
 function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
   const { verifyEmail } = useInsforge();
@@ -2334,93 +2259,43 @@ function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
   }
   const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
   const buttonClassName = mode === "detailed" ? "if-userButton if-userButton-detailed" : "if-userButton";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "if-userButton if-internal-ub3k8p",
-      style: { position: "relative", display: "inline-block" },
-      ref: dropdownRef,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: buttonClassName,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "0.5rem",
-              ...mode === "detailed" ? { borderRadius: "0.5rem", padding: "0.5rem" } : {}
-            },
-            onClick: () => setIsOpen(!isOpen),
-            "aria-expanded": isOpen,
-            "aria-haspopup": "true",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: user.avatarUrl,
-                  alt: user.email,
-                  onError: () => setImageError(true),
-                  style: { borderRadius: "50%", objectFit: "cover", width: "100%", height: "100%" }
-                }
-              ) : /* @__PURE__ */ jsx("span", { style: { color: "white", fontWeight: 600, fontSize: "0.875rem" }, children: initials }) }),
-              mode === "detailed" && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    gap: "0.125rem"
-                  },
-                  children: [
-                    user.name && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "0.875rem",
-                          fontWeight: 600,
-                          color: "#1f1f1f",
-                          lineHeight: "1.25rem",
-                          textAlign: "left"
-                        },
-                        children: user.name
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "0.75rem",
-                          color: "#828282",
-                          lineHeight: "1rem",
-                          textAlign: "left"
-                        },
-                        children: user.email
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleSignOut,
-            className: "if-userButton-menuItem",
-            style: { color: "#DC2626" },
-            children: [
-              /* @__PURE__ */ jsx(LogOut, { style: { width: "1.25rem", height: "1.25rem" } }),
-              "Sign out"
-            ]
-          }
-        ) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "if-userButton-container if-internal-ub3k8p", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: buttonClassName,
+        onClick: () => setIsOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: user.avatarUrl,
+              alt: user.email,
+              onError: () => setImageError(true),
+              className: "if-userButton-avatarImage"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "if-userButton-avatarInitials", children: initials }) }),
+          mode === "detailed" && /* @__PURE__ */ jsxs("div", { className: "if-userButton-info", children: [
+            user.name && /* @__PURE__ */ jsx("div", { className: "if-userButton-name", children: user.name }),
+            /* @__PURE__ */ jsx("div", { className: "if-userButton-email", children: user.email })
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleSignOut,
+        className: "if-userButton-menuItem if-userButton-menuItem-signout",
+        children: [
+          /* @__PURE__ */ jsx(LogOut, { className: "if-userButton-menuItem-icon" }),
+          "Sign out"
+        ]
+      }
+    ) })
+  ] });
 }
 function Protect({
   children,
@@ -2478,94 +2353,6 @@ function SignedOut({ children }) {
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function InsforgeCallback({
-  redirectTo = "/",
-  onSuccess,
-  onError,
-  loadingComponent,
-  onRedirect
-}) {
-  const isProcessingRef = useRef(false);
-  const { isLoaded, isSignedIn } = useInsforge();
-  useEffect(() => {
-    if (!isLoaded) {
-      return;
-    }
-    if (isProcessingRef.current) {
-      return;
-    }
-    isProcessingRef.current = true;
-    const processCallback = () => {
-      const searchParams = new URLSearchParams(window.location.search);
-      const error = searchParams.get("error");
-      if (error) {
-        if (onError) {
-          onError(error);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(error);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      if (!isSignedIn) {
-        const errorMsg = "authentication_failed";
-        if (onError) {
-          onError(errorMsg);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      window.history.replaceState({}, "", window.location.pathname);
-      if (onSuccess) {
-        onSuccess();
-      }
-      if (onRedirect) {
-        onRedirect(redirectTo);
-      } else {
-        window.location.href = redirectTo;
-      }
-    };
-    processCallback();
-  }, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
-  const defaultLoading = /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "100vh"
-      },
-      children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { marginBottom: "1rem" }, children: "Completing authentication..." }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "if-submitButton-spinner",
-            style: {
-              borderRadius: "50%",
-              height: "3rem",
-              width: "3rem",
-              borderBottom: "2px solid #2563EB",
-              margin: "0 auto"
-            }
-          }
-        )
-      ] })
-    }
-  );
-  return loadingComponent || defaultLoading;
-}
 
 // src/hooks/useAuth.ts
 function useAuth() {
@@ -2624,6 +2411,6 @@ function getInsforgeRoutes(config) {
   return routes;
 }
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, InsforgeCallback, InsforgeProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getInsforgeRoutes, getProviderConfig, passwordSchema, useAuth, useInsforge, usePublicAuthConfig, useUser, validateEmail, validatePassword };
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, InsforgeProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getInsforgeRoutes, getProviderConfig, passwordSchema, useAuth, useInsforge, usePublicAuthConfig, useUser, validateEmail, validatePassword };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map