@insforge/react 0.6.9 → 0.6.10

package/dist/index.js

@@ -16,6 +16,9 @@ import { createContext, useContext, useState, useMemo, useEffect, useRef, useCal
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createClient } from '@insforge/sdk';
 import { InsforgeContext } from '@insforge/shared/react';
+import createCache from '@emotion/cache';
+import { keyframes as keyframes$1, CacheProvider } from '@emotion/react';
+import styled from '@emotion/styled';
 import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
 import { z } from 'zod';
 
@@ -486,6 +489,17 @@ var InsforgeManager = class _InsforgeManager {
     this.listeners.clear();
   }
 };
+function StyleProvider({ children, nonce }) {
+  const cache = useMemo(() => {
+    const emotionCache = createCache({
+      key: "if-styles",
+      prepend: true,
+      nonce
+    });
+    return emotionCache;
+  }, [nonce]);
+  return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children });
+}
 function InsforgeProviderCore({
   children,
   baseUrl,
@@ -556,7 +570,7 @@ function InsforgeProviderCore({
   return /* @__PURE__ */ jsx(InsforgeContext.Provider, { value: contextValue, children });
 }
 function InsforgeProvider(props) {
-  return /* @__PURE__ */ jsx(NavigationProvider, { adapter: BrowserNavigationAdapter, children: /* @__PURE__ */ jsx(InsforgeProviderCore, { ...props }) });
+  return /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(NavigationProvider, { adapter: BrowserNavigationAdapter, children: /* @__PURE__ */ jsx(InsforgeProviderCore, { ...props }) }) });
 }
 function useInsforge() {
   const context = useContext(InsforgeContext);
@@ -605,9 +619,538 @@ function usePublicAuthConfig() {
   }, [getPublicAuthConfig]);
   return { authConfig, isLoaded };
 }
+
+// src/styles/theme.ts
+var theme = {
+  colors: {
+    primary: "#000000",
+    primaryHover: "#1f1f1f",
+    text: "#000000",
+    textSecondary: "#828282",
+    textMuted: "#a3a3a3",
+    textGray: "#525252",
+    border: "#d4d4d4",
+    borderGray: "#e4e4e7",
+    borderHover: "#9ca3af",
+    borderFocus: "#000000",
+    bgWhite: "#ffffff",
+    bgLight: "#fafafa",
+    bgGray: "#f5f5f5",
+    bgHover: "#f9fafb",
+    error: "#dc2626",
+    errorBg: "#fee2e2",
+    success: "#16a34a",
+    successBg: "#d1fae5",
+    successDark: "#059669",
+    black: "#000000",
+    zinc900: "#09090b"
+  },
+  spacing: {
+    1: "0.25rem",
+    // 4px
+    2: "0.5rem",
+    // 8px
+    3: "0.75rem",
+    // 12px
+    4: "1rem",
+    // 16px
+    6: "1.5rem",
+    // 24px
+    8: "2rem",
+    // 32px
+    10: "2.5rem"
+    // 40px
+  },
+  radius: {
+    xs: "0.125rem",
+    // 2px
+    sm: "0.25rem",
+    // 4px
+    md: "0.375rem",
+    // 6px
+    lg: "0.5rem",
+    // 8px
+    xl: "0.75rem",
+    // 12px
+    full: "9999px"
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem"
+    // 24px
+  },
+  lineHeight: {
+    tight: "1rem",
+    // 16px
+    normal: "1.25rem",
+    // 20px
+    relaxed: "1.5rem",
+    // 24px
+    loose: "2rem"
+    // 32px
+  },
+  fontFamily: {
+    base: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
+    manrope: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif"
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600
+  },
+  shadow: {
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    md: "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+  },
+  transition: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    base: "200ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  sizes: {
+    input: {
+      height: "2.5rem"
+      // 40px
+    },
+    button: {
+      height: "2.5rem",
+      // 40px for submit
+      heightOAuth: "2.25rem"
+      // 36px for OAuth
+    },
+    avatar: "2rem",
+    // 32px
+    icon: "1.25rem",
+    // 20px
+    iconSm: "1.125rem",
+    // 18px
+    iconLg: "1.5rem",
+    // 24px
+    verifyCode: "3rem",
+    // 48px
+    verifyIcon: "4rem",
+    // 64px
+    verifyIconInner: "2rem"
+    // 32px
+  }
+};
+var keyframes = {
+  spin: `
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `
+};
+
+// src/components/atoms/styled.ts
+var spinAnimation = keyframes$1`${keyframes.spin}`;
+var AuthContainerWrapper = styled.div`
+  width: 100%;
+  max-width: 400px;
+  border-radius: ${theme.radius.xl};
+  overflow: hidden;
+  box-shadow: ${theme.shadow.lg};
+`;
+var AuthCard = styled.div`
+  background-color: ${theme.colors.bgWhite};
+  padding: ${theme.spacing[6]};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: ${theme.spacing[6]};
+`;
+var AuthHeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: ${theme.spacing[2]};
+`;
+var AuthHeaderTitle = styled.h1`
+  font-size: ${theme.fontSize["2xl"]};
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.colors.text};
+  line-height: ${theme.lineHeight.loose};
+  margin: 0;
+  font-family: ${theme.fontFamily.base};
+`;
+var AuthHeaderSubtitle = styled.p`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.textSecondary};
+  line-height: ${theme.lineHeight.relaxed};
+  margin: 0;
+  font-family: ${theme.fontFamily.base};
+`;
+var FormFieldWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: ${theme.spacing[1]};
+`;
+var FormFieldLabel = styled.label`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.text};
+  line-height: ${theme.lineHeight.relaxed};
+  font-family: ${theme.fontFamily.base};
+`;
+var FormFieldInput = styled.input`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+  align-self: stretch;
+  padding: ${theme.spacing[2]} ${theme.spacing[3]};
+  border-radius: ${theme.radius.sm};
+  border: 1px solid ${theme.colors.border};
+  background-color: ${theme.colors.bgWhite};
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  line-height: ${theme.lineHeight.normal};
+  color: ${theme.colors.text};
+  font-family: ${theme.fontFamily.base};
+  transition: border-color ${theme.transition.base};
+
+  &::placeholder {
+    color: ${theme.colors.textMuted};
+    font-size: ${theme.fontSize.sm};
+    font-weight: ${theme.fontWeight.normal};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+`;
+var PasswordFieldWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: ${theme.spacing[1]};
+`;
+var PasswordFieldLabelRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var PasswordFieldLabel = styled.label`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.text};
+  line-height: ${theme.lineHeight.relaxed};
+  font-family: ${theme.fontFamily.base};
+`;
+var PasswordFieldForgotLink = styled.a`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.textSecondary};
+  text-decoration: none;
+  transition: color ${theme.transition.fast};
+  font-family: ${theme.fontFamily.base};
+  cursor: pointer;
+`;
+var PasswordFieldInputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+var PasswordFieldInput = styled.input`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: ${theme.spacing[2]} ${theme.spacing[3]};
+  padding-right: 2.5rem;
+  border-radius: ${theme.radius.sm};
+  border: 1px solid ${theme.colors.border};
+  background-color: ${theme.colors.bgWhite};
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  line-height: ${theme.lineHeight.normal};
+  color: ${theme.colors.text};
+  font-family: ${theme.fontFamily.base};
+  transition: border-color ${theme.transition.base};
+
+  &::placeholder {
+    color: ${theme.colors.textMuted};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+`;
+var PasswordFieldToggleButton = styled.button`
+  position: absolute;
+  right: ${theme.spacing[1]};
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${theme.spacing[1]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${theme.colors.textSecondary};
+  transition: color ${theme.transition.fast};
+`;
+var SubmitButton = styled.button`
+  border-radius: ${theme.radius.sm};
+  background-color: ${theme.colors.primary};
+  height: ${theme.sizes.button.height};
+  width: 100%;
+  display: flex;
+  margin-top: ${theme.spacing[4]};
+  padding: ${theme.spacing[2]} ${theme.spacing[4]};
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+  align-self: stretch;
+  color: ${theme.colors.bgWhite};
+  font-weight: ${theme.fontWeight.semibold};
+  font-family: ${theme.fontFamily.manrope};
+  font-size: ${theme.fontSize.base};
+  line-height: normal;
+  border: none;
+  cursor: pointer;
+  transition: background-color ${theme.transition.base};
+
+  &:hover:not(:disabled) {
+    background-color: ${theme.colors.primaryHover};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var SubmitButtonIcon = styled.div`
+  width: ${theme.sizes.icon};
+  height: ${theme.sizes.icon};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var SubmitButtonSpinner = styled.div`
+  width: ${theme.sizes.icon};
+  height: ${theme.sizes.icon};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${spinAnimation} 1s linear infinite;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var OAuthButton = styled.button`
+  display: flex;
+  width: 100%;
+  height: ${theme.sizes.button.heightOAuth};
+  padding: ${(props) => props.$variant === "short" || props.$variant === "iconOnly" ? theme.spacing[2] : `${theme.spacing[2]} ${theme.spacing[3]}`};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: ${(props) => props.$variant === "iconOnly" ? "0" : props.$variant === "short" ? theme.spacing[2] : theme.spacing[3]};
+  border-radius: ${theme.radius.md};
+  border: 1px solid ${theme.colors.borderGray};
+  background-color: ${theme.colors.bgWhite};
+  box-shadow: ${theme.shadow.md};
+  color: ${theme.colors.zinc900};
+  text-align: center;
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.medium};
+  line-height: ${theme.lineHeight.normal};
+  cursor: pointer;
+  transition: all ${theme.transition.base};
+  font-family: ${theme.fontFamily.base};
+
+  &:hover:not(:disabled) {
+    background-color: ${theme.colors.bgHover};
+    border-color: ${theme.colors.borderHover};
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`;
+var OAuthButtonIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${theme.sizes.iconSm};
+  height: ${theme.sizes.iconSm};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var OAuthProvidersContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[3]};
+  width: 100%;
+`;
+var AuthLinkWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${theme.spacing[1]};
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textSecondary};
+  font-family: ${theme.fontFamily.base};
+`;
+var AuthLinkText = styled.span`
+  font-weight: ${theme.fontWeight.normal};
+`;
+var AuthLinkLink = styled.a`
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.colors.text};
+  text-decoration: none;
+  transition: opacity ${theme.transition.fast};
+  cursor: pointer;
+`;
+var AuthDividerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  gap: ${theme.spacing[3]};
+`;
+var AuthDividerLine = styled.div`
+  flex: 1;
+  border-top: 1px solid ${theme.colors.border};
+`;
+var AuthDividerText = styled.span`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textSecondary};
+  font-weight: ${theme.fontWeight.normal};
+  font-family: ${theme.fontFamily.manrope};
+`;
+var ErrorBannerWrapper = styled.div`
+  padding: ${theme.spacing[3]};
+  background-color: ${theme.colors.errorBg};
+  border-radius: ${theme.radius.md};
+  border: 1px solid ${theme.colors.error};
+`;
+var ErrorBannerContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+`;
+var ErrorBannerIcon = styled.div`
+  width: ${theme.sizes.iconLg};
+  height: ${theme.sizes.iconLg};
+  flex-shrink: 0;
+  color: ${theme.colors.error};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var ErrorBannerText = styled.p`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.error};
+  font-weight: ${theme.fontWeight.normal};
+  font-family: ${theme.fontFamily.base};
+  margin: 0;
+`;
+var AuthBrandingWrapper = styled.div`
+  background-color: ${theme.colors.bgLight};
+  padding: ${theme.spacing[4]} ${theme.spacing[2]};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: ${theme.spacing[1]};
+`;
+var AuthBrandingText = styled.p`
+  font-size: ${theme.fontSize.xs};
+  font-weight: ${theme.fontWeight.medium};
+  color: ${theme.colors.text};
+  font-family: ${theme.fontFamily.manrope};
+  margin: 0;
+`;
+var VerificationCodeInputContainer = styled.div`
+  display: flex;
+  gap: ${theme.spacing[3]};
+  justify-content: center;
+`;
+var VerificationCodeInput = styled.input`
+  width: ${theme.sizes.verifyCode};
+  height: ${theme.sizes.verifyCode};
+  text-align: center;
+  font-size: ${theme.fontSize.base};
+  font-weight: ${theme.fontWeight.semibold};
+  border: 1px solid ${theme.colors.border};
+  border-radius: ${theme.radius.sm};
+  transition: border-color ${theme.transition.base};
+  font-family: ${theme.fontFamily.manrope};
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+`;
+var PasswordStrengthWrapper = styled.div`
+  margin-top: ${theme.spacing[2]};
+`;
+styled.div`
+  height: 100%;
+  transition:
+    width ${theme.transition.base},
+    background-color ${theme.transition.base};
+`;
+styled.span`
+  font-size: ${theme.fontSize.xs};
+  color: ${theme.colors.textSecondary};
+  font-family: ${theme.fontFamily.base};
+`;
+var PasswordStrengthRequirements = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[2]};
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textGray};
+  font-family: ${theme.fontFamily.base};
+`;
+var PasswordStrengthRequirement = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+`;
 function AuthBranding() {
-  return /* @__PURE__ */ jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
-    /* @__PURE__ */ jsx("p", { className: "if-authBranding-text", children: "Secured by" }),
+  return /* @__PURE__ */ jsxs(AuthBrandingWrapper, { children: [
+    /* @__PURE__ */ jsx(AuthBrandingText, { children: "Secured by" }),
     /* @__PURE__ */ jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
       "svg",
       {
@@ -676,30 +1219,30 @@ function AuthBranding() {
   ] });
 }
 function AuthContainer({ children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "if-authContainer if-internal-a8f3d2", children: [
-    /* @__PURE__ */ jsx("div", { className: "if-authCard if-internal-b2k9x1", children }),
+  return /* @__PURE__ */ jsxs(AuthContainerWrapper, { children: [
+    /* @__PURE__ */ jsx(AuthCard, { children }),
     /* @__PURE__ */ jsx(AuthBranding, {})
   ] });
 }
 function AuthHeader({ title, subtitle }) {
-  return /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
-    /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: title }),
-    subtitle && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: subtitle })
+  return /* @__PURE__ */ jsxs(AuthHeaderWrapper, { children: [
+    /* @__PURE__ */ jsx(AuthHeaderTitle, { children: title }),
+    subtitle && /* @__PURE__ */ jsx(AuthHeaderSubtitle, { children: subtitle })
   ] });
 }
 function AuthErrorBanner({ error }) {
   if (!error) {
     return null;
   }
-  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 })
+  return /* @__PURE__ */ jsx(ErrorBannerWrapper, { children: /* @__PURE__ */ jsxs(ErrorBannerContent, { children: [
+    /* @__PURE__ */ jsx(ErrorBannerIcon, { children: /* @__PURE__ */ jsx(AlertTriangle, {}) }),
+    /* @__PURE__ */ jsx(ErrorBannerText, { children: error })
   ] }) });
 }
 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 })
+  return /* @__PURE__ */ jsxs(FormFieldWrapper, { children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(FormFieldInput, { id, ...props })
   ] });
 }
 function AuthPasswordStrengthIndicator({
@@ -707,7 +1250,7 @@ function AuthPasswordStrengthIndicator({
   config
 }) {
   const requirements = createRequirements(config);
-  return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs("div", { className: "if-passwordStrength-requirement", children: [
+  return /* @__PURE__ */ jsx(PasswordStrengthWrapper, { children: /* @__PURE__ */ jsx(PasswordStrengthRequirements, { children: requirements.map((req) => /* @__PURE__ */ jsxs(PasswordStrengthRequirement, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -809,29 +1352,27 @@ function AuthPasswordField({
     }
     onFocus?.(e);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
-    (label || forgotPasswordLink) && /* @__PURE__ */ jsxs("div", { className: "if-passwordField-labelRow", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
-      forgotPasswordLink && resolvedForgotPasswordHref && /* @__PURE__ */ jsx(Link, { href: resolvedForgotPasswordHref, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
+  return /* @__PURE__ */ jsxs(PasswordFieldWrapper, { children: [
+    (label || forgotPasswordLink) && /* @__PURE__ */ jsxs(PasswordFieldLabelRow, { children: [
+      /* @__PURE__ */ jsx(PasswordFieldLabel, { htmlFor: id, children: label }),
+      forgotPasswordLink && resolvedForgotPasswordHref && /* @__PURE__ */ jsx(Link, { href: resolvedForgotPasswordHref, className: "", children: /* @__PURE__ */ jsx(PasswordFieldForgotLink, { as: "span", children: forgotPasswordLink.text || "Forget Password?" }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "if-passwordField-inputWrapper", children: [
+    /* @__PURE__ */ jsxs(PasswordFieldInputWrapper, { children: [
       /* @__PURE__ */ jsx(
-        "input",
+        PasswordFieldInput,
         {
           id,
           type: showPassword ? "text" : "password",
-          className: "if-passwordField-input",
           value,
           onFocus: handleFocus,
           ...props
         }
       ),
       /* @__PURE__ */ jsx(
-        "button",
+        PasswordFieldToggleButton,
         {
           type: "button",
           onClick: () => setShowPassword(!showPassword),
-          className: "if-passwordField-toggleButton",
           "aria-label": showPassword ? "Hide password" : "Show password",
           children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
         }
@@ -848,36 +1389,27 @@ function AuthSubmitButton({
   type = "submit",
   onClick
 }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      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 }),
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(SubmitButton, { type, disabled: disabled || isLoading || confirmed, onClick, children: [
+    isLoading && /* @__PURE__ */ jsx(SubmitButtonSpinner, { children: /* @__PURE__ */ jsx(Loader2, { size: 20 }) }),
+    confirmed && /* @__PURE__ */ jsx(SubmitButtonIcon, { children: /* @__PURE__ */ jsx(CircleCheck, { size: 20 }) }),
+    children
+  ] });
 }
 function AuthLink({ text, linkText, href }) {
   const searchParams = useSearchParams();
   const { Link } = useNavigationAdapter();
   const finalHref = resolveAuthUrl(href, searchParams);
-  return /* @__PURE__ */ jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
-    text && /* @__PURE__ */ jsx("span", { className: "if-authLink-text", children: text }),
+  return /* @__PURE__ */ jsxs(AuthLinkWrapper, { children: [
+    text && /* @__PURE__ */ jsx(AuthLinkText, { children: text }),
     text && " ",
-    /* @__PURE__ */ jsx(Link, { href: finalHref, className: "if-authLink-link", children: linkText })
+    /* @__PURE__ */ jsx(Link, { href: finalHref, className: "", children: /* @__PURE__ */ jsx(AuthLinkLink, { as: "span", children: linkText }) })
   ] });
 }
 function AuthDivider({ text = "or" }) {
-  return /* @__PURE__ */ jsxs("div", { className: "if-authDivider if-internal-ad7k3m", children: [
-    /* @__PURE__ */ jsx("div", { className: "if-authDivider-line" }),
-    /* @__PURE__ */ jsx("span", { className: "if-authDivider-text", children: text }),
-    /* @__PURE__ */ jsx("div", { className: "if-authDivider-line" })
+  return /* @__PURE__ */ jsxs(AuthDividerWrapper, { children: [
+    /* @__PURE__ */ jsx(AuthDividerLine, {}),
+    /* @__PURE__ */ jsx(AuthDividerText, { children: text }),
+    /* @__PURE__ */ jsx(AuthDividerLine, {})
   ] });
 }
 var OAUTH_PROVIDER_CONFIG = {
@@ -1041,23 +1573,17 @@ function AuthOAuthButton({
     }
     return "";
   };
-  const className = [
-    "if-oauthButton",
-    "if-internal-o4k7w2",
-    displayMode === "full" && "if-oauthButton-full",
-    displayMode === "short" && "if-oauthButton-short",
-    displayMode === "icon" && "if-oauthButton-icon-only"
-  ].filter(Boolean).join(" ");
+  const variant = displayMode === "icon" ? "iconOnly" : displayMode;
   return /* @__PURE__ */ jsxs(
-    "button",
+    OAuthButton,
     {
       type: "button",
       onClick: () => onClick(provider),
-      className,
+      $variant: variant,
       disabled: disabled || loading,
       style,
       children: [
-        loading ? /* @__PURE__ */ jsx(Loader2, { className: "if-oauthButton-icon if-submitButton-spinner", size: 18 }) : /* @__PURE__ */ jsx("span", { className: "if-oauthButton-icon", children: config.svg }),
+        loading ? /* @__PURE__ */ jsx(SubmitButtonSpinner, { children: /* @__PURE__ */ jsx(Loader2, { size: 18 }) }) : /* @__PURE__ */ jsx(OAuthButtonIcon, { children: config.svg }),
         !loading && getButtonText() && /* @__PURE__ */ jsx("span", { children: getButtonText() })
       ]
     }
@@ -1116,14 +1642,12 @@ function AuthOAuthProviders({
     }
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    OAuthProvidersContainer,
     {
-      className: "if-oauthProviders if-internal-op3m8k",
       style: {
         display: "grid",
         gridTemplateColumns: "repeat(6, 1fr)",
-        gap: "0.75rem",
-        width: "100%"
+        gap: "0.75rem"
       },
       children: providers.map((provider, index) => /* @__PURE__ */ jsx(
         AuthOAuthButton,
@@ -1190,8 +1714,8 @@ function AuthVerificationCodeInput({
       }
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
-    "input",
+  return /* @__PURE__ */ jsx(VerificationCodeInputContainer, { children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
+    VerificationCodeInput,
     {
       ref: (el) => {
         inputRefs.current[index] = el;
@@ -1204,12 +1728,160 @@ function AuthVerificationCodeInput({
       onKeyDown: (e) => handleKeyDown(index, e),
       onPaste: handlePaste,
       disabled,
-      className: "if-verificationCode-input",
       autoComplete: "one-time-code"
     },
     index
   )) });
 }
+styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: ${theme.spacing[6]};
+`;
+var VerificationStepWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[6]};
+  align-items: stretch;
+`;
+var VerificationStepDescriptionContainer = styled.div`
+  width: 100%;
+  background-color: ${theme.colors.bgGray};
+  border-radius: ${theme.radius.lg};
+  padding: ${theme.spacing[3]} ${theme.spacing[3]} ${theme.spacing[6]} ${theme.spacing[3]};
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[3]};
+`;
+var VerificationStepDescriptionTitle = styled.h3`
+  color: ${theme.colors.black};
+  font-family: ${theme.fontFamily.base};
+  font-size: ${theme.fontSize.base};
+  font-style: normal;
+  font-weight: ${theme.fontWeight.semibold};
+  line-height: 24px;
+  margin: 0;
+`;
+var VerificationStepDescription = styled.p`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textGray};
+  text-align: left;
+  font-family: ${theme.fontFamily.base};
+  margin: 0;
+`;
+var VerificationEmail = styled.span`
+  font-weight: ${theme.fontWeight.medium};
+  color: ${theme.colors.text};
+`;
+var VerificationStepCodeContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[10]};
+`;
+var VerificationStepCodeInputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[6]};
+`;
+styled.p`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textSecondary};
+  text-align: center;
+  font-family: ${theme.fontFamily.base};
+  margin: 0;
+`;
+var VerificationStepResendContainer = styled.div`
+  width: 100%;
+  font-size: ${theme.fontSize.sm};
+  text-align: center;
+  color: ${theme.colors.textSecondary};
+  font-family: ${theme.fontFamily.base};
+`;
+var VerificationStepResendButton = styled.button`
+  color: ${theme.colors.text};
+  font-weight: ${theme.fontWeight.medium};
+  transition: all ${theme.transition.base};
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: ${theme.fontFamily.base};
+  font-size: ${theme.fontSize.sm};
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var VerifyStatusContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: ${(props) => props.$stretch ? "stretch" : "center"};
+  justify-content: center;
+  gap: ${theme.spacing[6]};
+`;
+var VerifyStatusSpinner = styled.div`
+  border-radius: ${theme.radius.full};
+  height: ${theme.sizes.verifyCode};
+  width: ${theme.sizes.verifyCode};
+  border-bottom: 2px solid ${theme.colors.primary};
+`;
+var VerifyStatusSuccessContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${theme.spacing[4]};
+`;
+var VerifyStatusSuccessIcon = styled.div`
+  width: ${theme.sizes.verifyIcon};
+  height: ${theme.sizes.verifyIcon};
+  border-radius: ${theme.radius.full};
+  background-color: ${theme.colors.successBg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var VerifyStatusSuccessIconSvg = styled.div`
+  width: ${theme.sizes.verifyIconInner};
+  height: ${theme.sizes.verifyIconInner};
+  color: ${theme.colors.successDark};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var VerifyStatusTextCenter = styled.p`
+  text-align: center;
+  font-family: ${theme.fontFamily.base};
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.text};
+  margin: 0;
+`;
+styled.div`
+  display: none;
+`;
+styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+`;
 function AuthEmailVerificationStep({
   email,
   method,
@@ -1263,19 +1935,19 @@ function AuthEmailVerificationStep({
       setVerificationCode("");
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
-    isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
-      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Verify Your Email" }),
-      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+  return /* @__PURE__ */ jsxs(VerificationStepWrapper, { children: [
+    isLinkMethod && /* @__PURE__ */ jsxs(VerificationStepDescriptionContainer, { children: [
+      /* @__PURE__ */ jsx(VerificationStepDescriptionTitle, { children: "Verify Your Email" }),
+      /* @__PURE__ */ jsx(VerificationStepDescription, { children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
         part,
-        index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationLink-email", children: email })
+        index < array.length - 1 && /* @__PURE__ */ jsx(VerificationEmail, { children: email })
       ] }, index)) })
     ] }),
-    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeInputWrapper", children: [
-        /* @__PURE__ */ jsx("p", { className: "if-verificationStep-codeDescription", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+    !isLinkMethod && /* @__PURE__ */ jsxs(VerificationStepCodeContainer, { children: [
+      /* @__PURE__ */ jsxs(VerificationStepCodeInputWrapper, { children: [
+        /* @__PURE__ */ jsx(VerificationStepDescription, { 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 < array.length - 1 && /* @__PURE__ */ jsx(VerificationEmail, { children: email })
         ] }, index)) }),
         /* @__PURE__ */ jsx(
           AuthVerificationCodeInput,
@@ -1299,17 +1971,16 @@ function AuthEmailVerificationStep({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+    /* @__PURE__ */ jsxs(VerificationStepResendContainer, { children: [
       "Didn't receive the email?",
       " ",
       /* @__PURE__ */ jsx(
-        "button",
+        VerificationStepResendButton,
         {
           onClick: () => {
             void handleResend();
           },
           disabled: resendDisabled || isSending,
-          className: "if-verificationStep-resendButton",
           children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
         }
       )
@@ -1368,16 +2039,16 @@ function AuthResetPasswordVerificationStep({
       setVerificationCode("");
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
-    isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
-      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Check Your Email" }),
-      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+  return /* @__PURE__ */ jsxs(VerificationStepWrapper, { children: [
+    isLinkMethod && /* @__PURE__ */ jsxs(VerificationStepDescriptionContainer, { children: [
+      /* @__PURE__ */ jsx(VerificationStepDescriptionTitle, { children: "Check Your Email" }),
+      /* @__PURE__ */ jsx(VerificationStepDescription, { children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
         part,
-        index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationLink-email", children: email })
+        index < array.length - 1 && /* @__PURE__ */ jsx(VerificationEmail, { children: email })
       ] }, index)) })
     ] }),
-    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
+    !isLinkMethod && /* @__PURE__ */ jsxs(VerificationStepCodeContainer, { children: [
+      /* @__PURE__ */ jsx(VerificationStepCodeInputWrapper, { children: /* @__PURE__ */ jsx(
         AuthVerificationCodeInput,
         {
           value: verificationCode,
@@ -1398,17 +2069,16 @@ function AuthResetPasswordVerificationStep({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+    /* @__PURE__ */ jsxs(VerificationStepResendContainer, { children: [
       "Didn't receive the email?",
       " ",
       /* @__PURE__ */ jsx(
-        "button",
+        VerificationStepResendButton,
         {
           onClick: () => {
             void handleResend();
           },
           disabled: resendDisabled || isSending,
-          className: "if-verificationStep-resendButton",
           children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
         }
       )
@@ -1454,39 +2124,47 @@ function SignInForm({
         onVerifyCode,
         emailSent: false
       }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
-      /* @__PURE__ */ jsx(
-        AuthFormField,
-        {
-          id: "email",
-          type: "email",
-          label: emailLabel,
-          placeholder: emailPlaceholder,
-          value: email,
-          onChange: (e) => onEmailChange(e.target.value),
-          required: true,
-          autoComplete: "email"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AuthPasswordField,
-        {
-          id: "password",
-          label: passwordLabel,
-          placeholder: passwordPlaceholder,
-          value: password,
-          onChange: (e) => onPasswordChange(e.target.value),
-          required: true,
-          autoComplete: "current-password",
-          authConfig,
-          forgotPasswordLink: forgotPasswordUrl ? {
-            href: forgotPasswordUrl,
-            text: forgotPasswordText
-          } : void 0
-        }
-      ),
-      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
-    ] }),
+    ) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit,
+        noValidate: true,
+        style: { display: "flex", flexDirection: "column", gap: theme.spacing[6] },
+        children: [
+          /* @__PURE__ */ jsx(
+            AuthFormField,
+            {
+              id: "email",
+              type: "email",
+              label: emailLabel,
+              placeholder: emailPlaceholder,
+              value: email,
+              onChange: (e) => onEmailChange(e.target.value),
+              required: true,
+              autoComplete: "email"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AuthPasswordField,
+            {
+              id: "password",
+              label: passwordLabel,
+              placeholder: passwordPlaceholder,
+              value: password,
+              onChange: (e) => onPasswordChange(e.target.value),
+              required: true,
+              autoComplete: "current-password",
+              authConfig,
+              forgotPasswordLink: forgotPasswordUrl ? {
+                href: forgotPasswordUrl,
+                text: forgotPasswordText
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
+        ]
+      }
+    ),
     !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
       authConfig.oAuthProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1638,36 +2316,44 @@ function SignUpForm({
         onVerifyCode,
         emailSent: true
       }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
-      /* @__PURE__ */ jsx(
-        AuthFormField,
-        {
-          id: "email",
-          type: "email",
-          label: emailLabel,
-          placeholder: emailPlaceholder,
-          value: email,
-          onChange: (e) => onEmailChange(e.target.value),
-          required: true,
-          autoComplete: "email"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AuthPasswordField,
-        {
-          id: "password",
-          label: passwordLabel,
-          placeholder: passwordPlaceholder,
-          value: password,
-          onChange: (e) => onPasswordChange(e.target.value),
-          required: true,
-          autoComplete: "new-password",
-          showStrengthIndicator: true,
-          authConfig
-        }
-      ),
-      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
-    ] }),
+    ) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit,
+        noValidate: true,
+        style: { display: "flex", flexDirection: "column", gap: theme.spacing[6] },
+        children: [
+          /* @__PURE__ */ jsx(
+            AuthFormField,
+            {
+              id: "email",
+              type: "email",
+              label: emailLabel,
+              placeholder: emailPlaceholder,
+              value: email,
+              onChange: (e) => onEmailChange(e.target.value),
+              required: true,
+              autoComplete: "email"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AuthPasswordField,
+            {
+              id: "password",
+              label: passwordLabel,
+              placeholder: passwordPlaceholder,
+              value: password,
+              onChange: (e) => onPasswordChange(e.target.value),
+              required: true,
+              autoComplete: "new-password",
+              showStrengthIndicator: true,
+              authConfig
+            }
+          ),
+          /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
+        ]
+      }
+    ),
     !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
       authConfig.oAuthProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1910,22 +2596,30 @@ function ForgotPasswordForm({
         onResendEmail: onResendEmail || (async () => {
         })
       }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
-      /* @__PURE__ */ jsx(
-        AuthFormField,
-        {
-          id: "email",
-          type: "email",
-          label: emailLabel,
-          placeholder: emailPlaceholder,
-          value: email,
-          onChange: (e) => onEmailChange(e.target.value),
-          required: true,
-          autoComplete: "email"
-        }
-      ),
-      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
-    ] }),
+    ) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit,
+        noValidate: true,
+        style: { display: "flex", flexDirection: "column", gap: theme.spacing[6] },
+        children: [
+          /* @__PURE__ */ jsx(
+            AuthFormField,
+            {
+              id: "email",
+              type: "email",
+              label: emailLabel,
+              placeholder: emailPlaceholder,
+              value: email,
+              onChange: (e) => onEmailChange(e.target.value),
+              required: true,
+              autoComplete: "email"
+            }
+          ),
+          /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
+        ]
+      }
+    ),
     !showVerificationStep && /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
   ] });
 }
@@ -1954,77 +2648,64 @@ function ResetPasswordForm({
     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",
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(VerifyStatusContainer, { $stretch: true, children: /* @__PURE__ */ jsxs(VerifyStatusSuccessContent, { children: [
+      /* @__PURE__ */ jsx(VerifyStatusSuccessIcon, { children: /* @__PURE__ */ jsx(VerifyStatusSuccessIconSvg, { children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          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(VerifyStatusTextCenter, { style: { fontSize: "1.5rem", fontWeight: 600 }, children: successTitle }),
+      /* @__PURE__ */ jsx(VerifyStatusTextCenter, { style: { color: theme.colors.textSecondary }, children: successMessage })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
+    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
+    /* @__PURE__ */ jsxs(
+      "form",
       {
-        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
+        onSubmit,
+        noValidate: true,
+        style: { display: "flex", flexDirection: "column", gap: theme.spacing[6] },
         children: [
           /* @__PURE__ */ jsx(
-            "div",
+            AuthPasswordField,
             {
-              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" })
-                }
-              )
+              id: "newPassword",
+              label: newPasswordLabel,
+              placeholder: newPasswordPlaceholder,
+              value: newPassword,
+              onChange: (e) => onNewPasswordChange(e.target.value),
+              required: true,
+              autoComplete: "new-password",
+              showStrengthIndicator: true,
+              authConfig
             }
           ),
-          /* @__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(
+            AuthPasswordField,
+            {
+              id: "confirmPassword",
+              label: confirmPasswordLabel,
+              placeholder: confirmPasswordPlaceholder,
+              value: confirmPassword,
+              onChange: (e) => onConfirmPasswordChange(e.target.value),
+              required: true,
+              autoComplete: "new-password",
+              authConfig
+            }
+          ),
+          /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
         ]
       }
-    ) });
-  }
-  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: [
-      /* @__PURE__ */ jsx(
-        AuthPasswordField,
-        {
-          id: "newPassword",
-          label: newPasswordLabel,
-          placeholder: newPasswordPlaceholder,
-          value: newPassword,
-          onChange: (e) => onNewPasswordChange(e.target.value),
-          required: true,
-          autoComplete: "new-password",
-          showStrengthIndicator: true,
-          authConfig
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AuthPasswordField,
-        {
-          id: "confirmPassword",
-          label: confirmPasswordLabel,
-          placeholder: confirmPasswordPlaceholder,
-          value: confirmPassword,
-          onChange: (e) => onConfirmPasswordChange(e.target.value),
-          required: true,
-          autoComplete: "new-password",
-          authConfig
-        }
-      ),
-      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
-    ] })
+    )
   ] });
 }
 function ForgotPassword({ onError, ...uiProps }) {
@@ -2369,25 +3050,24 @@ function VerifyEmailStatus({
   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" })
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(VerifyStatusContainer, { children: [
+      /* @__PURE__ */ jsx(AuthHeader, { title: verifyingTitle }),
+      /* @__PURE__ */ jsx(VerifyStatusSpinner, {})
     ] }) });
   }
   if (status === "error") {
-    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(VerifyStatusContainer, { $stretch: true, children: /* @__PURE__ */ jsx(
+      AuthHeader,
+      {
+        title: errorTitle,
+        subtitle: `${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(
+  return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(VerifyStatusContainer, { $stretch: true, children: /* @__PURE__ */ jsxs(VerifyStatusSuccessContent, { children: [
+    /* @__PURE__ */ jsx(VerifyStatusSuccessIcon, { children: /* @__PURE__ */ jsx(VerifyStatusSuccessIconSvg, { children: /* @__PURE__ */ jsx(
       "svg",
       {
-        className: "if-verifyStatus-successIconSvg",
         fill: "none",
         strokeLinecap: "round",
         strokeLinejoin: "round",
@@ -2396,9 +3076,9 @@ function VerifyEmailStatus({
         stroke: "currentColor",
         children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
       }
-    ) }),
-    /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title if-verifyStatus-textCenter", children: successTitle }),
-    /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-verifyStatus-textCenter", children: successMessage })
+    ) }) }),
+    /* @__PURE__ */ jsx(VerifyStatusTextCenter, { style: { fontSize: "1.5rem", fontWeight: 600 }, children: successTitle }),
+    /* @__PURE__ */ jsx(VerifyStatusTextCenter, { style: { color: theme.colors.textSecondary }, children: successMessage })
   ] }) }) });
 }
 function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
@@ -2448,6 +3128,120 @@ function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
   }, [token, verifyEmail, onSuccess, onError]);
   return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
 }
+var UserButtonContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+var UserButtonButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${theme.spacing[2]};
+  padding: ${theme.spacing[2]};
+  border-radius: ${(props) => props.$detailed ? theme.radius.sm : theme.radius.full};
+  background-color: ${(props) => props.$detailed ? theme.colors.bgWhite : "transparent"};
+  border: ${(props) => props.$detailed ? `1px solid ${theme.colors.border}` : "none"};
+  cursor: pointer;
+  transition: all ${theme.transition.base};
+
+  &:hover {
+    ${(props) => props.$detailed ? `
+      background-color: ${theme.colors.bgLight};
+      opacity: 1;
+    ` : `
+      opacity: 0.8;
+    `}
+  }
+`;
+var UserButtonAvatar = styled.div`
+  width: 2rem;
+  height: 2rem;
+  border-radius: ${theme.radius.full};
+  background-color: ${theme.colors.primary};
+  color: ${theme.colors.bgWhite};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: ${theme.fontSize.sm};
+  font-family: ${theme.fontFamily.base};
+  overflow: hidden;
+`;
+var UserButtonAvatarImage = styled.img`
+  border-radius: ${theme.radius.full};
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+`;
+var UserButtonAvatarInitials = styled.span`
+  color: ${theme.colors.bgWhite};
+  font-weight: 600;
+  font-size: ${theme.fontSize.sm};
+`;
+var UserButtonInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+`;
+var UserButtonName = styled.div`
+  font-size: ${theme.fontSize.sm};
+  font-weight: 600;
+  color: ${theme.colors.text};
+  line-height: 1.25rem;
+  text-align: left;
+  font-family: ${theme.fontFamily.base};
+`;
+var UserButtonEmail = styled.div`
+  font-size: ${theme.fontSize.xs};
+  color: ${theme.colors.textSecondary};
+  line-height: 1rem;
+  text-align: left;
+  font-family: ${theme.fontFamily.base};
+`;
+var UserButtonMenu = styled.div`
+  position: absolute;
+  margin-top: ${theme.spacing[2]};
+  background-color: ${theme.colors.bgWhite};
+  border: 1px solid ${theme.colors.border};
+  border-radius: ${theme.radius.md};
+  box-shadow: ${theme.shadow.lg};
+  padding: ${theme.spacing[2]};
+  min-width: 200px;
+  z-index: 50;
+`;
+var UserButtonMenuItem = styled.button`
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+  padding: ${theme.spacing[2]};
+  border-radius: ${theme.radius.sm};
+  cursor: pointer;
+  transition: background-color ${theme.transition.fast};
+  font-size: ${theme.fontSize.sm};
+  color: ${(props) => props.$signout ? theme.colors.error : theme.colors.text};
+  font-family: ${theme.fontFamily.base};
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    background-color: ${theme.colors.bgLight};
+  }
+`;
+var UserButtonMenuItemIcon = styled.div`
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
 function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
   const { user, signOut } = useInsforge();
   const [isOpen, setIsOpen] = useState(false);
@@ -2499,43 +3293,34 @@ function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
     return null;
   }
   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-container if-internal-ub3k8p", ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs(UserButtonContainer, { ref: dropdownRef, children: [
     /* @__PURE__ */ jsxs(
-      "button",
+      UserButtonButton,
       {
-        className: buttonClassName,
+        $detailed: mode === "detailed",
         onClick: () => setIsOpen(!isOpen),
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
-            "img",
+          /* @__PURE__ */ jsx(UserButtonAvatar, { children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
+            UserButtonAvatarImage,
             {
               src: user.avatarUrl,
               alt: user.email,
-              onError: () => setImageError(true),
-              className: "if-userButton-avatarImage"
+              onError: () => setImageError(true)
             }
-          ) : /* @__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 })
+          ) : /* @__PURE__ */ jsx(UserButtonAvatarInitials, { children: initials }) }),
+          mode === "detailed" && /* @__PURE__ */ jsxs(UserButtonInfo, { children: [
+            user.name && /* @__PURE__ */ jsx(UserButtonName, { children: user.name }),
+            /* @__PURE__ */ jsx(UserButtonEmail, { children: user.email })
           ] })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => void handleSignOut(),
-        className: "if-userButton-menuItem if-userButton-menuItem-signout",
-        children: [
-          /* @__PURE__ */ jsx(LogOut, { className: "if-userButton-menuItem-icon" }),
-          "Sign out"
-        ]
-      }
-    ) })
+    isOpen && /* @__PURE__ */ jsx(UserButtonMenu, { children: /* @__PURE__ */ jsxs(UserButtonMenuItem, { $signout: true, onClick: () => void handleSignOut(), children: [
+      /* @__PURE__ */ jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsx(LogOut, {}) }),
+      "Sign out"
+    ] }) })
   ] });
 }
 function Protect({
@@ -2644,6 +3429,6 @@ function useUser() {
   return { user, isLoaded, updateUser, setUser };
 }
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, BrowserNavigationAdapter, ForgotPassword, ForgotPasswordForm, InsforgeProvider, InsforgeProviderCore, NavigationProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, SignUp, SignUpButton, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getProviderConfig, passwordSchema, resolveAuthPath, resolveAuthUrl, useAuth, useInsforge, useNavigationAdapter, usePublicAuthConfig, useSearchParams, useUser, validateEmail, validatePassword };
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, BrowserNavigationAdapter, ForgotPassword, ForgotPasswordForm, InsforgeProvider, InsforgeProviderCore, NavigationProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, SignUp, SignUpButton, SignUpForm, SignedIn, SignedOut, StyleProvider, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getProviderConfig, passwordSchema, resolveAuthPath, resolveAuthUrl, theme, useAuth, useInsforge, useNavigationAdapter, usePublicAuthConfig, useSearchParams, useUser, validateEmail, validatePassword };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map