@thetechfossil/auth2 1.2.2 → 1.2.4

package/dist/index.js

@@ -1,12 +1,17 @@
+"use client";
 'use strict';
 
 var axios = require('axios');
-var react = require('react');
+var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var PhoneInputWithCountry = require('react-phone-number-input');
+require('react-phone-number-input/style.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var axios__default = /*#__PURE__*/_interopDefault(axios);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+var PhoneInputWithCountry__default = /*#__PURE__*/_interopDefault(PhoneInputWithCountry);
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -17,8 +22,9 @@ var HttpClient = class {
   constructor(baseUrl, defaultHeaders = {}) {
     this.csrfToken = null;
     this.frontendBaseUrl = null;
+    this.baseUrl = baseUrl.replace(/\/$/, "");
     this.axiosInstance = axios__default.default.create({
-      baseURL: baseUrl.replace(/\/$/, ""),
+      baseURL: this.baseUrl,
       headers: {
         "Content-Type": "application/json",
         ...defaultHeaders
@@ -29,8 +35,16 @@ var HttpClient = class {
       // 30 second timeout
     });
     this.axiosInstance.interceptors.request.use(
-      (config) => {
-        if (this.csrfToken && ["post", "put", "delete", "patch"].includes(config.method?.toLowerCase() || "")) {
+      async (config) => {
+        const isMutatingRequest = ["post", "put", "delete", "patch"].includes(config.method?.toLowerCase() || "");
+        if (isMutatingRequest && !this.csrfToken && typeof window !== "undefined") {
+          try {
+            await this.refreshCsrfToken();
+          } catch (error) {
+            console.warn("Failed to fetch CSRF token:", error);
+          }
+        }
+        if (this.csrfToken && isMutatingRequest) {
           config.headers["x-csrf-token"] = this.csrfToken;
         }
         if (this.frontendBaseUrl) {
@@ -128,9 +142,6 @@ var AuthService = class {
         this.httpClient.setFrontendBaseUrl(frontendBaseUrl);
       }
     }
-    if (this.config.csrfEnabled && typeof window !== "undefined") {
-      this.refreshCsrfToken();
-    }
   }
   loadTokenFromStorage() {
     if (typeof window !== "undefined" && this.config.localStorageKey) {
@@ -232,7 +243,7 @@ var AuthService = class {
       this.saveTokenToStorage(response.token);
       return response;
     }
-    if (response.success && response.message === "OTP sent to your email.") {
+    if (response.success && (response.message === "OTP sent to your email." || response.message === "OTP sent to your phone number.")) {
       return response;
     }
     if (response.success && response.message === "OTP verified successfully." && response.token) {
@@ -303,7 +314,7 @@ var AuthService = class {
     if (!this.token) {
       throw new Error("Not authenticated");
     }
-    const response = await this.httpClient.post("/api/v1/user/update/user", data);
+    const response = await this.httpClient.post("/api/v1/user/update/profile", data);
     if (response.success && response.token) {
       this.token = response.token;
       this.httpClient.setAuthToken(response.token);
@@ -344,7 +355,7 @@ var AuthService = class {
     if (!this.token) {
       throw new Error("Not authenticated");
     }
-    const response = await this.httpClient.post("/api/v1/user/update/avatar", { avatar });
+    const response = await this.httpClient.post("/api/v1/user/update/profile", { avatar });
     if (response.success && response.token) {
       this.token = response.token;
       this.httpClient.setAuthToken(response.token);
@@ -407,21 +418,21 @@ var AuthService = class {
     if (!this.token) {
       throw new Error("Not authenticated");
     }
-    const response = await this.httpClient.get("/api/v1/session");
+    const response = await this.httpClient.get("/api/v1/sessions");
     return response;
   }
   async revokeSession(sessionId) {
     if (!this.token) {
       throw new Error("Not authenticated");
     }
-    const response = await this.httpClient.delete(`/api/v1/session/${sessionId}`);
+    const response = await this.httpClient.delete(`/api/v1/sessions/${sessionId}`);
     return response;
   }
   async revokeAllSessions() {
     if (!this.token) {
       throw new Error("Not authenticated");
     }
-    const response = await this.httpClient.delete("/api/v1/session/revoke/all");
+    const response = await this.httpClient.delete("/api/v1/sessions/revoke/all");
     this.token = null;
     this.httpClient.removeAuthToken();
     this.removeTokenFromStorage();
@@ -467,18 +478,69 @@ var AuthService = class {
     return response;
   }
 };
-var AuthContext = react.createContext(void 0);
+var ThemeContext = React3.createContext({ theme: "light", mounted: false });
+function AuthThemeProvider({ children }) {
+  const [theme, setTheme] = React3.useState("light");
+  const [mounted, setMounted] = React3.useState(false);
+  React3.useEffect(() => {
+    const detectTheme = () => {
+      const htmlElement = document.documentElement;
+      const bodyElement = document.body;
+      if (htmlElement.classList.contains("dark") || bodyElement.classList.contains("dark")) {
+        return "dark";
+      }
+      if (htmlElement.classList.contains("light") || bodyElement.classList.contains("light")) {
+        return "light";
+      }
+      const dataTheme = htmlElement.getAttribute("data-theme") || bodyElement.getAttribute("data-theme");
+      if (dataTheme === "dark" || dataTheme === "light") {
+        return dataTheme;
+      }
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+      return "light";
+    };
+    const updateTheme = () => {
+      const detectedTheme = detectTheme();
+      setTheme(detectedTheme);
+    };
+    updateTheme();
+    setMounted(true);
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleMediaChange = () => updateTheme();
+    mediaQuery.addEventListener("change", handleMediaChange);
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener("change", handleMediaChange);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, mounted }, children });
+}
+function useAuthTheme() {
+  return React3.useContext(ThemeContext);
+}
+var AuthContext = React3.createContext(void 0);
 var AuthProvider = ({ children, config }) => {
   const authConfig = {
     baseUrl: config?.baseUrl || (typeof window !== "undefined" ? process.env.NEXT_PUBLIC_AUTH_API_URL || process.env.REACT_APP_AUTH_API_URL || "http://localhost:7000" : "http://localhost:7000"),
     localStorageKey: config?.localStorageKey || "auth_token",
     csrfEnabled: config?.csrfEnabled !== void 0 ? config.csrfEnabled : true
   };
-  const [authService] = react.useState(() => new AuthService(authConfig));
-  const [user, setUser] = react.useState(null);
-  const [isLoaded, setIsLoaded] = react.useState(false);
-  const [loading, setLoading] = react.useState(false);
-  const checkAuthStatus = react.useCallback(async () => {
+  const [authService] = React3.useState(() => new AuthService(authConfig));
+  const [user, setUser] = React3.useState(null);
+  const [isLoaded, setIsLoaded] = React3.useState(false);
+  const [loading, setLoading] = React3.useState(false);
+  const checkAuthStatus = React3.useCallback(async () => {
     const authenticated = authService.isAuthenticated();
     if (authenticated) {
       try {
@@ -493,10 +555,10 @@ var AuthProvider = ({ children, config }) => {
     }
     setIsLoaded(true);
   }, [authService]);
-  react.useEffect(() => {
+  React3.useEffect(() => {
     checkAuthStatus();
   }, [checkAuthStatus]);
-  const signIn = react.useCallback(async (data) => {
+  const signIn = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.login(data);
@@ -508,7 +570,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const signUp = react.useCallback(async (data) => {
+  const signUp = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.register(data);
@@ -517,7 +579,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const signOut = react.useCallback(async () => {
+  const signOut = React3.useCallback(async () => {
     setLoading(true);
     try {
       await authService.logout();
@@ -526,7 +588,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const verify = react.useCallback(async (data) => {
+  const verify = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.verify(data);
@@ -538,7 +600,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const verifyEmailToken = react.useCallback(async (token) => {
+  const verifyEmailToken = React3.useCallback(async (token) => {
     setLoading(true);
     try {
       const response = await authService.verifyEmailToken(token);
@@ -550,7 +612,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const updateProfile = react.useCallback(async (data) => {
+  const updateProfile = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.updateProfile(data);
@@ -562,7 +624,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const getProfile = react.useCallback(async () => {
+  const getProfile = React3.useCallback(async () => {
     setLoading(true);
     try {
       const userData = await authService.getProfile();
@@ -572,13 +634,13 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const signInWithOAuth = react.useCallback((provider) => {
+  const signInWithOAuth = React3.useCallback((provider) => {
     authService.loginWithOAuth(provider);
   }, [authService]);
-  const linkOAuthProvider = react.useCallback((provider) => {
+  const linkOAuthProvider = React3.useCallback((provider) => {
     authService.linkOAuthProvider(provider);
   }, [authService]);
-  const unlinkOAuthProvider = react.useCallback(async (provider) => {
+  const unlinkOAuthProvider = React3.useCallback(async (provider) => {
     setLoading(true);
     try {
       return await authService.unlinkOAuthProvider(provider);
@@ -586,7 +648,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const forgotPassword = react.useCallback(async (email) => {
+  const forgotPassword = React3.useCallback(async (email) => {
     setLoading(true);
     try {
       return await authService.forgotPassword(email);
@@ -594,7 +656,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const resetPassword = react.useCallback(async (token, password) => {
+  const resetPassword = React3.useCallback(async (token, password) => {
     setLoading(true);
     try {
       return await authService.resetPassword(token, password);
@@ -602,7 +664,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const changePassword = react.useCallback(async (oldPassword, newPassword) => {
+  const changePassword = React3.useCallback(async (oldPassword, newPassword) => {
     setLoading(true);
     try {
       return await authService.changePassword(oldPassword, newPassword);
@@ -610,7 +672,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const updateAvatar = react.useCallback(async (avatar) => {
+  const updateAvatar = React3.useCallback(async (avatar) => {
     setLoading(true);
     try {
       const response = await authService.updateAvatar(avatar);
@@ -622,7 +684,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const requestEmailChange = react.useCallback(async (newEmail) => {
+  const requestEmailChange = React3.useCallback(async (newEmail) => {
     setLoading(true);
     try {
       return await authService.requestEmailChange(newEmail);
@@ -630,7 +692,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const verifyEmailChange = react.useCallback(async (token) => {
+  const verifyEmailChange = React3.useCallback(async (token) => {
     setLoading(true);
     try {
       const response = await authService.verifyEmailChange(token);
@@ -642,7 +704,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const generate2FA = react.useCallback(async () => {
+  const generate2FA = React3.useCallback(async () => {
     setLoading(true);
     try {
       return await authService.generate2FA();
@@ -650,7 +712,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const enable2FA = react.useCallback(async (token) => {
+  const enable2FA = React3.useCallback(async (token) => {
     setLoading(true);
     try {
       return await authService.enable2FA(token);
@@ -658,7 +720,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const disable2FA = react.useCallback(async (token) => {
+  const disable2FA = React3.useCallback(async (token) => {
     setLoading(true);
     try {
       return await authService.disable2FA(token);
@@ -666,7 +728,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const validate2FA = react.useCallback(async (token) => {
+  const validate2FA = React3.useCallback(async (token) => {
     setLoading(true);
     try {
       return await authService.validate2FA(token);
@@ -674,7 +736,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const getSessions = react.useCallback(async () => {
+  const getSessions = React3.useCallback(async () => {
     setLoading(true);
     try {
       return await authService.getSessions();
@@ -682,7 +744,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const revokeSession = react.useCallback(async (sessionId) => {
+  const revokeSession = React3.useCallback(async (sessionId) => {
     setLoading(true);
     try {
       return await authService.revokeSession(sessionId);
@@ -690,7 +752,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const revokeAllSessions = react.useCallback(async () => {
+  const revokeAllSessions = React3.useCallback(async () => {
     setLoading(true);
     try {
       const response = await authService.revokeAllSessions();
@@ -730,21 +792,21 @@ var AuthProvider = ({ children, config }) => {
     revokeAllSessions,
     authService
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(AuthThemeProvider, { children }) });
 };
 var useAuth = () => {
-  const context = react.useContext(AuthContext);
+  const context = React3.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
 var useAuth2 = (config) => {
-  const [authService] = react.useState(() => new AuthService(config));
-  const [user, setUser] = react.useState(null);
-  const [isAuthenticated, setIsAuthenticated] = react.useState(false);
-  const [loading, setLoading] = react.useState(true);
-  const checkAuthStatus = react.useCallback(() => {
+  const [authService] = React3.useState(() => new AuthService(config));
+  const [user, setUser] = React3.useState(null);
+  const [isAuthenticated, setIsAuthenticated] = React3.useState(false);
+  const [loading, setLoading] = React3.useState(true);
+  const checkAuthStatus = React3.useCallback(() => {
     const authenticated = authService.isAuthenticated();
     setIsAuthenticated(authenticated);
     if (authenticated) {
@@ -755,10 +817,10 @@ var useAuth2 = (config) => {
     }
     setLoading(false);
   }, [authService]);
-  react.useEffect(() => {
+  React3.useEffect(() => {
     checkAuthStatus();
   }, [checkAuthStatus]);
-  const register = react.useCallback(async (data) => {
+  const register = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.register(data);
@@ -767,7 +829,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const login = react.useCallback(async (data) => {
+  const login = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.login(data);
@@ -780,7 +842,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const verify = react.useCallback(async (data) => {
+  const verify = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.verify(data);
@@ -793,7 +855,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const verifyEmailToken = react.useCallback(async (token) => {
+  const verifyEmailToken = React3.useCallback(async (token) => {
     setLoading(true);
     try {
       const response = await authService.verifyEmailToken(token);
@@ -806,7 +868,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const logout = react.useCallback(async () => {
+  const logout = React3.useCallback(async () => {
     setLoading(true);
     try {
       await authService.logout();
@@ -816,7 +878,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const updateProfile = react.useCallback(async (data) => {
+  const updateProfile = React3.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.updateProfile(data);
@@ -828,7 +890,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getProfile = react.useCallback(async () => {
+  const getProfile = React3.useCallback(async () => {
     setLoading(true);
     try {
       const userData = await authService.getProfile();
@@ -838,7 +900,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getAllUsers = react.useCallback(async () => {
+  const getAllUsers = React3.useCallback(async () => {
     setLoading(true);
     try {
       return await authService.getAllUsers();
@@ -846,7 +908,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getUserById = react.useCallback(async (id) => {
+  const getUserById = React3.useCallback(async (id) => {
     setLoading(true);
     try {
       return await authService.getUserById(id);
@@ -869,6 +931,267 @@ var useAuth2 = (config) => {
     getUserById
   };
 };
+
+// src/react/hooks/useThemeColors.ts
+var lightTheme = {
+  bgPrimary: "var(--auth-bg-primary, #ffffff)",
+  bgSecondary: "var(--auth-bg-secondary, #f8fafc)",
+  bgHover: "var(--auth-bg-hover, #f1f5f9)",
+  textPrimary: "var(--auth-text-primary, #0f172a)",
+  textSecondary: "var(--auth-text-secondary, #475569)",
+  textTertiary: "var(--auth-text-tertiary, #94a3b8)",
+  borderPrimary: "var(--auth-border-primary, #e2e8f0)",
+  borderSecondary: "var(--auth-border-secondary, #cbd5e1)",
+  buttonPrimary: "var(--auth-button-primary, #3b82f6)",
+  buttonPrimaryHover: "var(--auth-button-primary-hover, #2563eb)",
+  errorBg: "var(--auth-error-bg, #fef2f2)",
+  errorText: "var(--auth-error-text, #dc2626)",
+  errorBorder: "var(--auth-error-border, #fecaca)",
+  successBg: "var(--auth-success-bg, #f0fdf4)",
+  successText: "var(--auth-success-text, #16a34a)",
+  successBorder: "var(--auth-success-border, #bbf7d0)"
+};
+var darkTheme = {
+  bgPrimary: "var(--auth-bg-primary, #1f2937)",
+  bgSecondary: "var(--auth-bg-secondary, #111827)",
+  bgHover: "var(--auth-bg-hover, #374151)",
+  textPrimary: "var(--auth-text-primary, #f9fafb)",
+  textSecondary: "var(--auth-text-secondary, #e5e7eb)",
+  textTertiary: "var(--auth-text-tertiary, #d1d5db)",
+  borderPrimary: "var(--auth-border-primary, #374151)",
+  borderSecondary: "var(--auth-border-secondary, #4b5563)",
+  buttonPrimary: "var(--auth-button-primary, #3b82f6)",
+  buttonPrimaryHover: "var(--auth-button-primary-hover, #2563eb)",
+  errorBg: "var(--auth-error-bg, #7f1d1d)",
+  errorText: "var(--auth-error-text, #fecaca)",
+  errorBorder: "var(--auth-error-border, #991b1b)",
+  successBg: "var(--auth-success-bg, #14532d)",
+  successText: "var(--auth-success-text, #bbf7d0)",
+  successBorder: "var(--auth-success-border, #166534)"
+};
+function useThemeColors() {
+  const { theme } = useAuthTheme();
+  return theme === "dark" ? darkTheme : lightTheme;
+}
+var CustomPhoneInput = React3__default.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "input",
+  {
+    ...props,
+    ref,
+    className: "PhoneInputInput"
+  }
+));
+CustomPhoneInput.displayName = "CustomPhoneInput";
+var PhoneInput = ({
+  value,
+  onChange,
+  disabled = false,
+  required = false,
+  placeholder = "Enter phone number",
+  id = "phone",
+  style = {}
+}) => {
+  const colors = useThemeColors();
+  const [defaultCountry, setDefaultCountry] = React3.useState("US");
+  const styleContent = React3.useMemo(() => `
+    .PhoneInput {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .PhoneInputCountry {
+      position: relative;
+      align-self: stretch;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      border: 1px solid ${colors.borderSecondary};
+      border-radius: 8px;
+      background-color: ${colors.bgSecondary};
+      transition: all 0.2s ease;
+    }
+    
+    .PhoneInputCountry:focus-within {
+      border-color: ${colors.buttonPrimary};
+      outline: 2px solid ${colors.buttonPrimary}40;
+    }
+    
+    .PhoneInputCountryIcon {
+      width: 24px;
+      height: 24px;
+      margin-right: 4px;
+    }
+    
+    .PhoneInputCountryIcon--border {
+      box-shadow: none;
+    }
+    
+    .PhoneInputCountrySelect {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 1;
+      border: 0;
+      opacity: 0;
+      cursor: pointer;
+      color: ${colors.textPrimary};
+      background-color: ${colors.bgSecondary};
+    }
+    
+    .PhoneInputCountrySelect:disabled {
+      cursor: not-allowed;
+    }
+    
+    /* Dropdown menu styling */
+    .PhoneInputCountrySelect option {
+      background-color: ${colors.bgPrimary};
+      color: ${colors.textPrimary};
+      padding: 8px 12px;
+      font-size: 14px;
+    }
+    
+    .PhoneInputCountrySelect option:hover,
+    .PhoneInputCountrySelect option:focus,
+    .PhoneInputCountrySelect option:checked {
+      background-color: ${colors.buttonPrimary};
+      color: white;
+    }
+    
+    .PhoneInputCountrySelectArrow {
+      display: block;
+      content: '';
+      width: 0.3em;
+      height: 0.3em;
+      margin-left: 0.35em;
+      border-style: solid;
+      border-color: ${colors.textPrimary};
+      border-top-width: 0;
+      border-bottom-width: 1px;
+      border-left-width: 0;
+      border-right-width: 1px;
+      transform: rotate(45deg);
+      opacity: 0.7;
+    }
+    
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      padding: 12px 16px;
+      border: 1px solid ${colors.borderSecondary};
+      border-radius: 8px;
+      font-size: 16px;
+      background-color: ${colors.bgSecondary};
+      color: ${colors.textPrimary};
+      transition: all 0.2s ease;
+      -webkit-text-fill-color: ${colors.textPrimary};
+      -webkit-box-shadow: 0 0 0 1000px ${colors.bgSecondary} inset;
+    }
+    
+    .PhoneInputInput:focus {
+      border-color: ${colors.buttonPrimary};
+      outline: 2px solid ${colors.buttonPrimary}40;
+    }
+    
+    .PhoneInputInput:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+    
+    .PhoneInputInput::placeholder {
+      color: ${colors.textTertiary};
+      opacity: 0.6;
+    }
+  `, [colors]);
+  React3.useEffect(() => {
+    const detectCountry = async () => {
+      try {
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const timezoneToCountry = {
+          "America/New_York": "US",
+          "America/Chicago": "US",
+          "America/Denver": "US",
+          "America/Los_Angeles": "US",
+          "America/Phoenix": "US",
+          "America/Anchorage": "US",
+          "Pacific/Honolulu": "US",
+          "Europe/London": "GB",
+          "Europe/Paris": "FR",
+          "Europe/Berlin": "DE",
+          "Europe/Rome": "IT",
+          "Europe/Madrid": "ES",
+          "Asia/Dubai": "AE",
+          "Asia/Kolkata": "IN",
+          "Asia/Shanghai": "CN",
+          "Asia/Tokyo": "JP",
+          "Asia/Seoul": "KR",
+          "Asia/Singapore": "SG",
+          "Asia/Hong_Kong": "HK",
+          "Australia/Sydney": "AU",
+          "Pacific/Auckland": "NZ",
+          "America/Toronto": "CA",
+          "America/Vancouver": "CA",
+          "America/Mexico_City": "MX",
+          "America/Sao_Paulo": "BR",
+          "America/Buenos_Aires": "AR",
+          "Africa/Cairo": "EG",
+          "Africa/Johannesburg": "ZA",
+          "Africa/Lagos": "NG",
+          "Africa/Nairobi": "KE"
+        };
+        const detectedCountry = timezoneToCountry[timezone];
+        if (detectedCountry) {
+          setDefaultCountry(detectedCountry);
+          return;
+        }
+        const response = await fetch("https://ipapi.co/json/", {
+          signal: AbortSignal.timeout(3e3)
+          // 3 second timeout
+        });
+        if (response.ok) {
+          const data = await response.json();
+          if (data.country_code) {
+            setDefaultCountry(data.country_code);
+          }
+        }
+      } catch (error) {
+        console.log("Country detection failed, using default US");
+      }
+    };
+    detectCountry();
+  }, []);
+  const handleChange = React3.useMemo(() => (val) => {
+    onChange(val || "");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: styleContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PhoneInputWithCountry__default.default,
+          {
+            id,
+            international: true,
+            defaultCountry,
+            value: value || "",
+            onChange: handleChange,
+            disabled,
+            placeholder,
+            inputComponent: CustomPhoneInput
+          },
+          id
+        )
+      ]
+    }
+  );
+};
 var LoginForm = ({
   onSuccess,
   onLoginSuccess,
@@ -878,15 +1201,18 @@ var LoginForm = ({
   oauthProviders = ["google", "github"],
   showOAuthButtons = true
 }) => {
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [usePassword, setUsePassword] = react.useState(false);
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [rememberMe, setRememberMe] = react.useState(false);
+  const colors = useThemeColors();
+  const [email, setEmail] = React3.useState("");
+  const [phoneNumber, setPhoneNumber] = React3.useState("");
+  const [usePhone, setUsePhone] = React3.useState(false);
+  const [password, setPassword] = React3.useState("");
+  const [usePassword, setUsePassword] = React3.useState(false);
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [rememberMe, setRememberMe] = React3.useState(false);
   const { login } = useAuth2({
-    baseUrl: config?.baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
+    baseUrl: config?.baseUrl || "http://localhost:7000"
   });
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -894,20 +1220,28 @@ var LoginForm = ({
     setError(null);
     try {
       let response;
+      const loginData = {};
+      if (usePhone && phoneNumber) {
+        loginData.phoneNumber = phoneNumber;
+      } else if (email) {
+        loginData.email = email;
+      }
       if (usePassword) {
-        response = await login({ email, password });
+        loginData.password = password;
+        response = await login(loginData);
       } else {
-        response = await login({ email });
+        response = await login(loginData);
       }
       if (response.success) {
         onSuccess?.(response);
         if (onLoginSuccess) {
-          if (response.message === "OTP sent to your email.") {
-            onLoginSuccess(email, true);
+          const identifier = usePhone ? phoneNumber : email;
+          if (response.message === "OTP sent to your email." || response.message === "OTP sent to your phone number.") {
+            onLoginSuccess(identifier, true);
           } else if (response.token) {
-            onLoginSuccess(email, false);
+            onLoginSuccess(identifier, false);
           } else {
-            onLoginSuccess(email, true);
+            onLoginSuccess(identifier, true);
           }
         }
       } else {
@@ -929,43 +1263,53 @@ var LoginForm = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
     maxWidth: "400px",
     margin: "0 auto",
-    padding: "30px",
+    padding: "24px",
     borderRadius: "12px",
     boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
-    backgroundColor: "#ffffff",
-    border: "1px solid #eaeaea"
+    backgroundColor: colors.bgPrimary,
+    border: `1px solid ${colors.borderPrimary}`
   }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: {
     display: "flex",
     flexDirection: "column"
   }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
       textAlign: "center",
-      marginBottom: "24px",
-      color: "#1f2937",
+      marginBottom: "20px",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600
     }, children: usePassword ? "Login with Password" : "Login with OTP" }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
-      marginBottom: "20px",
-      backgroundColor: "#f8d7da",
-      color: "#721c24",
-      border: "1px solid #f5c6cb",
+      marginBottom: "16px",
+      backgroundColor: colors.errorBg,
+      color: colors.errorText,
+      border: `1px solid ${colors.errorBorder}`,
       borderRadius: "8px",
       fontSize: "14px",
       fontWeight: 500
     }, children: error }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: usePhone ? "phone" : "email", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
-      }, children: "Email:" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      }, children: usePhone ? "Phone Number:" : "Email:" }),
+      usePhone ? /* @__PURE__ */ jsxRuntime.jsx(
+        PhoneInput,
+        {
+          id: "phone",
+          value: phoneNumber,
+          onChange: setPhoneNumber,
+          required: true,
+          disabled: isLoading,
+          placeholder: "1234567890"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           id: "email",
@@ -977,27 +1321,48 @@ var LoginForm = ({
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: "#111827",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#ffffff"
+            backgroundColor: colors.bgSecondary
           },
           placeholder: "Enter your email"
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setUsePhone(!usePhone),
+          disabled: isLoading,
+          style: {
+            marginTop: "8px",
+            background: "none",
+            border: "none",
+            color: colors.buttonPrimary,
+            textDecoration: "none",
+            cursor: "pointer",
+            fontSize: "13px",
+            fontWeight: 500,
+            padding: "0",
+            transition: "color 0.2s ease"
+          },
+          children: usePhone ? "Use email instead" : "Use phone number instead"
+        }
       )
     ] }),
     usePassword && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginBottom: "20px",
+      marginBottom: "16px",
       position: "relative"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "login-password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Password:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1012,13 +1377,13 @@ var LoginForm = ({
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: "#333",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#fafafa"
+            backgroundColor: colors.bgSecondary
           },
           placeholder: "Enter your password"
         }
@@ -1036,7 +1401,7 @@ var LoginForm = ({
             background: "none",
             border: "none",
             cursor: "pointer",
-            color: "#666",
+            color: colors.textTertiary,
             fontSize: "14px"
           },
           children: showPassword ? "Hide" : "Show"
@@ -1046,8 +1411,8 @@ var LoginForm = ({
     usePassword && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
       display: "flex",
       alignItems: "center",
-      marginBottom: "16px",
-      marginTop: "8px"
+      marginBottom: "12px",
+      marginTop: "4px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -1071,7 +1436,7 @@ var LoginForm = ({
           htmlFor: "remember-me",
           style: {
             fontSize: "14px",
-            color: "#666",
+            color: colors.textSecondary,
             cursor: "pointer",
             userSelect: "none"
           },
@@ -1086,7 +1451,7 @@ var LoginForm = ({
         disabled: isLoading,
         style: {
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
@@ -1094,16 +1459,16 @@ var LoginForm = ({
           fontWeight: 600,
           cursor: "pointer",
           transition: "all 0.2s ease",
-          marginTop: "8px"
+          marginTop: "4px"
         },
         children: isLoading ? usePassword ? "Logging in..." : "Sending OTP..." : usePassword ? "Login" : "Send OTP"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       textAlign: "center",
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -1113,7 +1478,7 @@ var LoginForm = ({
         style: {
           background: "none",
           border: "none",
-          color: "#007bff",
+          color: colors.buttonPrimary,
           textDecoration: "none",
           cursor: "pointer",
           fontSize: "14px",
@@ -1125,9 +1490,9 @@ var LoginForm = ({
       }
     ) }),
     showOAuthButtons && oauthProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
         position: "relative",
@@ -1139,15 +1504,15 @@ var LoginForm = ({
           left: 0,
           right: 0,
           height: "1px",
-          backgroundColor: "#eee"
+          backgroundColor: colors.borderPrimary
         } }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           position: "relative",
           textAlign: "center"
         }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          backgroundColor: "#ffffff",
+          backgroundColor: colors.bgPrimary,
           padding: "0 12px",
-          color: "#666",
+          color: colors.textSecondary,
           fontSize: "14px"
         }, children: "Or continue with" }) })
       ] }),
@@ -1166,10 +1531,10 @@ var LoginForm = ({
               justifyContent: "center",
               gap: "8px",
               padding: "10px 16px",
-              backgroundColor: "#ffffff",
-              border: "1px solid #ddd",
+              backgroundColor: colors.bgPrimary,
+              border: `1px solid ${colors.borderSecondary}`,
               borderRadius: "8px",
-              color: "#333",
+              color: colors.textPrimary,
               textDecoration: "none",
               fontSize: "14px",
               fontWeight: 500,
@@ -1177,12 +1542,12 @@ var LoginForm = ({
               transition: "all 0.2s ease"
             },
             onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "#f8f8f8";
-              e.currentTarget.style.borderColor = "#007bff";
+              e.currentTarget.style.backgroundColor = colors.bgHover;
+              e.currentTarget.style.borderColor = colors.buttonPrimary;
             },
             onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "#ffffff";
-              e.currentTarget.style.borderColor = "#ddd";
+              e.currentTarget.style.backgroundColor = colors.bgPrimary;
+              e.currentTarget.style.borderColor = colors.borderSecondary;
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "18px", height: "18px" }, viewBox: "0 0 24 24", children: [
@@ -1257,11 +1622,11 @@ var LoginForm = ({
     ] }),
     showRegisterLink && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       textAlign: "center",
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
-      color: "#666",
+      color: colors.textSecondary,
       fontSize: "14px"
     }, children: [
       "Don't have an account?",
@@ -1275,7 +1640,7 @@ var LoginForm = ({
           style: {
             background: "none",
             border: "none",
-            color: "#007bff",
+            color: colors.buttonPrimary,
             textDecoration: "none",
             cursor: "pointer",
             fontSize: "14px",
@@ -1295,16 +1660,19 @@ var RegisterForm = ({
   showLoginLink = true,
   authConfig,
   oauthProviders = ["google", "github"],
-  showOAuthButtons = true
+  showOAuthButtons = true,
+  invitationToken
 }) => {
-  const [name, setName] = react.useState("");
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [confirmPassword, setConfirmPassword] = react.useState("");
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  react.useState(false);
-  react.useState(false);
+  const colors = useThemeColors();
+  const [name, setName] = React3.useState("");
+  const [email, setEmail] = React3.useState("");
+  const [phoneNumber, setPhoneNumber] = React3.useState("");
+  const [password, setPassword] = React3.useState("");
+  const [confirmPassword, setConfirmPassword] = React3.useState("");
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  React3.useState(false);
+  React3.useState(false);
   const getPasswordStrength = (pwd) => {
     if (!pwd)
       return { strength: "weak", score: 0, label: "" };
@@ -1327,7 +1695,7 @@ var RegisterForm = ({
   };
   getPasswordStrength(password);
   const config = authConfig || {
-    baseUrl: typeof window !== "undefined" ? process.env.NEXT_PUBLIC_AUTH_API_URL || window.location.origin : "http://localhost:7000"
+    baseUrl: "http://localhost:7000"
   };
   const { register } = useAuth2(config);
   const handleSubmit = async (e) => {
@@ -1345,17 +1713,45 @@ var RegisterForm = ({
       return;
     }
     try {
-      const registerData = {
-        name,
-        email,
-        password,
-        frontendBaseUrl: typeof window !== "undefined" ? process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || window.location.origin : void 0
-      };
-      const response = await register(registerData);
-      if (response.success) {
-        onRegisterSuccess?.();
+      if (invitationToken) {
+        const response = await fetch(`${config.baseUrl}/api/v1/auth/signup-with-invitation`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            name,
+            email,
+            password,
+            phoneNumber: phoneNumber || void 0,
+            invitationToken
+          })
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          if (typeof window !== "undefined" && data.token) {
+            localStorage.setItem("auth_token", data.token);
+          }
+          onRegisterSuccess?.();
+        } else {
+          setError(data.error || data.message || "Registration failed");
+        }
       } else {
-        setError(response.message || "Registration failed");
+        const registerData = {
+          name,
+          password,
+          frontendBaseUrl: typeof window !== "undefined" ? process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || window.location.origin : void 0
+        };
+        if (email)
+          registerData.email = email;
+        if (phoneNumber)
+          registerData.phoneNumber = phoneNumber;
+        const response = await register(registerData);
+        if (response.success) {
+          onRegisterSuccess?.();
+        } else {
+          setError(response.message || "Registration failed");
+        }
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "An unknown error occurred");
@@ -1366,40 +1762,40 @@ var RegisterForm = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
     maxWidth: "400px",
     margin: "0 auto",
-    padding: "30px",
+    padding: "24px",
     borderRadius: "12px",
     boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
-    backgroundColor: "#ffffff",
-    border: "1px solid #eaeaea"
+    backgroundColor: colors.bgPrimary,
+    border: `1px solid ${colors.borderPrimary}`
   }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: {
     display: "flex",
     flexDirection: "column"
   }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
       textAlign: "center",
-      marginBottom: "24px",
-      color: "#1f2937",
+      marginBottom: "20px",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600
     }, children: "Register" }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
-      marginBottom: "20px",
-      backgroundColor: "#f8d7da",
-      color: "#721c24",
-      border: "1px solid #f5c6cb",
+      marginBottom: "16px",
+      backgroundColor: colors.errorBg,
+      color: colors.errorText,
+      border: `1px solid ${colors.errorBorder}`,
       borderRadius: "8px",
       fontSize: "14px",
       fontWeight: 500
     }, children: error }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Name:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1414,26 +1810,26 @@ var RegisterForm = ({
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: "#111827",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#ffffff"
+            backgroundColor: colors.bgSecondary
           },
           placeholder: "Enter your name"
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "register-email", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Email:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1443,31 +1839,52 @@ var RegisterForm = ({
           type: "email",
           value: email,
           onChange: (e) => setEmail(e.target.value),
-          required: true,
+          required: !phoneNumber,
           disabled: isLoading,
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: "#333",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#fafafa"
+            backgroundColor: colors.bgSecondary
           },
           placeholder: "Enter your email"
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "register-phone", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: colors.textSecondary,
+        fontSize: "14px"
+      }, children: "Phone Number (Optional):" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PhoneInput,
+        {
+          id: "register-phone",
+          value: phoneNumber,
+          onChange: setPhoneNumber,
+          disabled: isLoading,
+          placeholder: "1234567890"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Password:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1482,13 +1899,13 @@ var RegisterForm = ({
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: "#333",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#fafafa"
+            backgroundColor: colors.bgSecondary
           },
           placeholder: "Enter your password",
           minLength: 6
@@ -1496,13 +1913,13 @@ var RegisterForm = ({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirm-password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Confirm Password:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1517,13 +1934,13 @@ var RegisterForm = ({
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: "#333",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#fafafa"
+            backgroundColor: colors.bgSecondary
           },
           placeholder: "Confirm your password"
         }
@@ -1536,7 +1953,7 @@ var RegisterForm = ({
         disabled: isLoading,
         style: {
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
@@ -1544,15 +1961,15 @@ var RegisterForm = ({
           fontWeight: 600,
           cursor: "pointer",
           transition: "all 0.2s ease",
-          marginTop: "8px"
+          marginTop: "4px"
         },
         children: isLoading ? "Registering..." : "Register"
       }
     ),
     showOAuthButtons && oauthProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
         position: "relative",
@@ -1564,15 +1981,15 @@ var RegisterForm = ({
           left: 0,
           right: 0,
           height: "1px",
-          backgroundColor: "#eee"
+          backgroundColor: colors.borderPrimary
         } }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           position: "relative",
           textAlign: "center"
         }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          backgroundColor: "#ffffff",
+          backgroundColor: colors.bgPrimary,
           padding: "0 12px",
-          color: "#666",
+          color: colors.textSecondary,
           fontSize: "14px"
         }, children: "Or continue with" }) })
       ] }),
@@ -1591,10 +2008,10 @@ var RegisterForm = ({
               justifyContent: "center",
               gap: "8px",
               padding: "10px 16px",
-              backgroundColor: "#ffffff",
-              border: "1px solid #ddd",
+              backgroundColor: colors.bgPrimary,
+              border: `1px solid ${colors.borderSecondary}`,
               borderRadius: "8px",
-              color: "#333",
+              color: colors.textPrimary,
               textDecoration: "none",
               fontSize: "14px",
               fontWeight: 500,
@@ -1602,12 +2019,12 @@ var RegisterForm = ({
               transition: "all 0.2s ease"
             },
             onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "#f8f8f8";
-              e.currentTarget.style.borderColor = "#007bff";
+              e.currentTarget.style.backgroundColor = colors.bgHover;
+              e.currentTarget.style.borderColor = colors.buttonPrimary;
             },
             onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "#ffffff";
-              e.currentTarget.style.borderColor = "#ddd";
+              e.currentTarget.style.backgroundColor = colors.bgPrimary;
+              e.currentTarget.style.borderColor = colors.borderSecondary;
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "18px", height: "18px" }, viewBox: "0 0 24 24", children: [
@@ -1682,11 +2099,11 @@ var RegisterForm = ({
     ] }),
     showLoginLink && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       textAlign: "center",
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
-      color: "#666",
+      color: colors.textSecondary,
       fontSize: "14px"
     }, children: [
       "Already have an account?",
@@ -1700,7 +2117,7 @@ var RegisterForm = ({
           style: {
             background: "none",
             border: "none",
-            color: "#007bff",
+            color: colors.buttonPrimary,
             textDecoration: "none",
             cursor: "pointer",
             fontSize: "14px",
@@ -1717,15 +2134,17 @@ var RegisterForm = ({
 var OtpForm = ({
   email,
   onVerifySuccess,
-  onBackToLogin
+  onBackToLogin,
+  baseUrl
 }) => {
-  const [otp, setOtp] = react.useState("");
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [resendCooldown, setResendCooldown] = react.useState(0);
-  const [resendLoading, setResendLoading] = react.useState(false);
+  const colors = useThemeColors();
+  const [otp, setOtp] = React3.useState("");
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [resendCooldown, setResendCooldown] = React3.useState(0);
+  const [resendLoading, setResendLoading] = React3.useState(false);
   const { verify, login } = useAuth2({
-    baseUrl: typeof window !== "undefined" ? window.location.origin : "http://localhost:7000"
+    baseUrl: baseUrl || process.env.NEXT_PUBLIC_AUTH_API_URL || "http://localhost:7000"
   });
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -1788,8 +2207,8 @@ var OtpForm = ({
     padding: "30px",
     borderRadius: "12px",
     boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
-    backgroundColor: "#ffffff",
-    border: "1px solid #eaeaea"
+    backgroundColor: colors.bgPrimary,
+    border: `1px solid ${colors.borderPrimary}`
   }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: {
     display: "flex",
     flexDirection: "column"
@@ -1797,25 +2216,25 @@ var OtpForm = ({
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
       textAlign: "center",
       marginBottom: "24px",
-      color: "#1f2937",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600
     }, children: "Verify OTP" }),
     /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
       textAlign: "center",
       marginBottom: "24px",
-      color: "#4b5563",
+      color: colors.textSecondary,
       fontSize: "14px"
     }, children: [
       "Enter the 6-digit code sent to ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#111827" }, children: email })
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: colors.textPrimary }, children: email })
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
       marginBottom: "20px",
-      backgroundColor: "#f8d7da",
-      color: "#721c24",
-      border: "1px solid #f5c6cb",
+      backgroundColor: colors.errorBg,
+      color: colors.errorText,
+      border: `1px solid ${colors.errorBorder}`,
       borderRadius: "8px",
       fontSize: "14px",
       fontWeight: 500
@@ -1827,7 +2246,7 @@ var OtpForm = ({
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "OTP Code:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1842,13 +2261,13 @@ var OtpForm = ({
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "20px",
             boxSizing: "border-box",
-            color: "#111827",
+            color: colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: "#ffffff",
+            backgroundColor: colors.bgSecondary,
             textAlign: "center",
             letterSpacing: "5px"
           },
@@ -1865,7 +2284,7 @@ var OtpForm = ({
         disabled: isLoading || otp.length !== 6,
         style: {
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
@@ -1882,7 +2301,7 @@ var OtpForm = ({
       textAlign: "center",
       marginTop: "20px",
       paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -1893,7 +2312,7 @@ var OtpForm = ({
           style: {
             background: "none",
             border: "none",
-            color: resendCooldown > 0 ? "#999" : "#007bff",
+            color: resendCooldown > 0 ? colors.textTertiary : colors.buttonPrimary,
             textDecoration: "none",
             cursor: resendCooldown > 0 ? "not-allowed" : "pointer",
             fontSize: "14px",
@@ -1916,7 +2335,7 @@ var OtpForm = ({
           style: {
             background: "none",
             border: "none",
-            color: "#007bff",
+            color: colors.buttonPrimary,
             textDecoration: "none",
             cursor: "pointer",
             fontSize: "14px",
@@ -1935,9 +2354,9 @@ var AuthFlow = ({
   initialStep = "login",
   showTitle = true
 }) => {
-  const [step, setStep] = react.useState(initialStep);
-  const [email, setEmail] = react.useState("");
-  const [message, setMessage] = react.useState(null);
+  const [step, setStep] = React3.useState(initialStep);
+  const [email, setEmail] = React3.useState("");
+  const [message, setMessage] = React3.useState(null);
   const handleLoginSuccess = (email2, needsOtpVerification) => {
     setEmail(email2);
     if (needsOtpVerification) {
@@ -2072,13 +2491,13 @@ var EmailVerificationPage = ({
   onVerificationError,
   baseUrl
 }) => {
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [message, setMessage] = react.useState("");
-  const [isSuccess, setIsSuccess] = react.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(true);
+  const [message, setMessage] = React3.useState("");
+  const [isSuccess, setIsSuccess] = React3.useState(false);
   const { verifyEmailToken } = useAuth2({
     baseUrl: baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
   });
-  react.useEffect(() => {
+  React3.useEffect(() => {
     const verifyEmail = async () => {
       if (!token) {
         setIsLoading(false);
@@ -2183,18 +2602,31 @@ var EmailVerificationPage = ({
     ] })
   ] }) });
 };
+var ThemeWrapper = React3.forwardRef(
+  ({ children, className = "", style }, ref) => {
+    const { theme, mounted } = useAuthTheme();
+    if (!mounted) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, style, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: `${theme} ${className}`, style, children });
+  }
+);
+ThemeWrapper.displayName = "ThemeWrapper";
 var SignIn = ({ redirectUrl, appearance }) => {
   const { signIn, isSignedIn, loading: authLoading } = useAuth();
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [otp, setOtp] = react.useState("");
-  const [usePassword, setUsePassword] = react.useState(false);
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [needsOtp, setNeedsOtp] = react.useState(false);
-  const [success, setSuccess] = react.useState(null);
-  react.useEffect(() => {
+  const colors = useThemeColors();
+  const [email, setEmail] = React3.useState("");
+  const [phoneNumber, setPhoneNumber] = React3.useState("");
+  const [password, setPassword] = React3.useState("");
+  const [otp, setOtp] = React3.useState("");
+  const [usePassword, setUsePassword] = React3.useState(false);
+  const [usePhone, setUsePhone] = React3.useState(false);
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [needsOtp, setNeedsOtp] = React3.useState(false);
+  const [success, setSuccess] = React3.useState(null);
+  React3.useEffect(() => {
     if (isSignedIn && redirectUrl) {
       const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -2207,25 +2639,26 @@ var SignIn = ({ redirectUrl, appearance }) => {
     setError(null);
     setSuccess(null);
     try {
+      const loginData = usePhone ? { phoneNumber } : { email };
       if (needsOtp) {
-        const response = await signIn({ email, otp });
+        const response = await signIn({ ...loginData, otp });
         if (response.success) {
           setSuccess("Login successful!");
         } else {
           setError(response.message || "OTP verification failed");
         }
       } else if (usePassword) {
-        const response = await signIn({ email, password });
+        const response = await signIn({ ...loginData, password });
         if (response.success) {
           setSuccess("Login successful!");
         } else {
           setError(response.message || "Login failed");
         }
       } else {
-        const response = await signIn({ email });
-        if (response.success && response.message === "OTP sent to your email.") {
+        const response = await signIn(loginData);
+        if (response.success && (response.message === "OTP sent to your email." || response.message === "OTP sent to your phone number.")) {
           setNeedsOtp(true);
-          setSuccess("OTP sent to your email. Please check your inbox.");
+          setSuccess(usePhone ? "OTP sent to your phone. Please check your messages." : "OTP sent to your email. Please check your inbox.");
         } else {
           setError(response.message || "Failed to send OTP");
         }
@@ -2243,238 +2676,366 @@ var SignIn = ({ redirectUrl, appearance }) => {
     setSuccess(null);
     setOtp("");
   };
+  const toggleLoginMethod = () => {
+    setUsePhone(!usePhone);
+    setNeedsOtp(false);
+    setError(null);
+    setSuccess(null);
+    setOtp("");
+    setEmail("");
+    setPhoneNumber("");
+  };
   if (authLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-    maxWidth: "400px",
-    margin: "0 auto",
-    padding: "30px",
-    borderRadius: "12px",
-    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
-    backgroundColor: "#ffffff",
-    border: "1px solid #eaeaea",
-    ...appearance?.elements?.card
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
-      textAlign: "center",
-      marginBottom: "24px",
-      color: "#1f2937",
-      fontSize: "24px",
-      fontWeight: 600,
-      ...appearance?.elements?.headerTitle
-    }, children: needsOtp ? "Enter OTP" : usePassword ? "Sign in with password" : "Sign in" }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      padding: "12px 16px",
-      marginBottom: "20px",
-      backgroundColor: "#fee",
-      color: "#c33",
-      border: "1px solid #fcc",
-      borderRadius: "8px",
-      fontSize: "14px"
-    }, children: error }),
-    success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      padding: "12px 16px",
-      marginBottom: "20px",
-      backgroundColor: "#efe",
-      color: "#3c3",
-      border: "1px solid #cfc",
-      borderRadius: "8px",
-      fontSize: "14px"
-    }, children: success }),
-    !needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
-        display: "block",
-        marginBottom: "8px",
-        fontWeight: 500,
-        color: "#374151",
-        fontSize: "14px"
-      }, children: "Email" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: "email",
-          type: "email",
-          value: email,
-          onChange: (e) => setEmail(e.target.value),
-          required: true,
-          disabled: isLoading,
-          style: {
-            width: "100%",
-            padding: "12px 16px",
-            border: "1px solid #ddd",
-            borderRadius: "8px",
-            fontSize: "16px",
-            boxSizing: "border-box",
-            ...appearance?.elements?.formFieldInput
-          },
-          placeholder: "Enter your email"
-        }
-      )
-    ] }),
-    usePassword && !needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
-        display: "block",
-        marginBottom: "8px",
-        fontWeight: 500,
-        color: "#374151",
-        fontSize: "14px"
-      }, children: "Password" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: "password",
-          type: showPassword ? "text" : "password",
-          value: password,
-          onChange: (e) => setPassword(e.target.value),
-          required: true,
-          disabled: isLoading,
-          style: {
-            width: "100%",
-            padding: "12px 16px",
-            border: "1px solid #ddd",
-            borderRadius: "8px",
-            fontSize: "16px",
-            boxSizing: "border-box",
-            ...appearance?.elements?.formFieldInput
-          },
-          placeholder: "Enter your password"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowPassword(!showPassword),
-          style: {
-            position: "absolute",
-            right: "12px",
-            top: "38px",
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            color: "#666",
-            fontSize: "14px"
-          },
-          children: showPassword ? "Hide" : "Show"
-        }
-      )
-    ] }),
-    needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "otp", style: {
-        display: "block",
-        marginBottom: "8px",
-        fontWeight: 500,
-        color: "#374151",
-        fontSize: "14px"
-      }, children: "One-Time Password" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: "otp",
-          type: "text",
-          value: otp,
-          onChange: (e) => setOtp(e.target.value),
-          required: true,
-          disabled: isLoading,
-          maxLength: 6,
-          style: {
-            width: "100%",
-            padding: "12px 16px",
-            border: "1px solid #ddd",
-            borderRadius: "8px",
-            fontSize: "16px",
-            boxSizing: "border-box",
-            letterSpacing: "0.5em",
-            textAlign: "center",
-            ...appearance?.elements?.formFieldInput
-          },
-          placeholder: "000000"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "submit",
-        disabled: isLoading,
-        style: {
-          width: "100%",
-          padding: "14px",
-          backgroundColor: "#007bff",
-          color: "white",
-          border: "none",
-          borderRadius: "8px",
-          fontSize: "16px",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeWrapper,
+    {
+      style: {
+        maxWidth: "400px",
+        margin: "0 auto",
+        padding: "30px",
+        borderRadius: "12px",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+        backgroundColor: colors.bgPrimary,
+        border: `1px solid ${colors.borderPrimary}`,
+        ...appearance?.elements?.card
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+          textAlign: "center",
+          marginBottom: "24px",
+          color: colors.textPrimary,
+          fontSize: "24px",
           fontWeight: 600,
-          cursor: "pointer",
-          transition: "all 0.2s ease",
-          ...appearance?.elements?.formButtonPrimary
-        },
-        children: isLoading ? "Please wait..." : needsOtp ? "Verify OTP" : usePassword ? "Sign in" : "Continue with email"
-      }
-    ),
-    !needsOtp && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: toggleAuthMethod,
-        disabled: isLoading,
-        style: {
-          background: "none",
-          border: "none",
-          color: "#007bff",
-          cursor: "pointer",
-          fontSize: "14px",
-          fontWeight: 600
-        },
-        children: usePassword ? "Use email code instead" : "Use password instead"
-      }
-    ) }),
-    needsOtp && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setNeedsOtp(false);
-          setOtp("");
-          setError(null);
-          setSuccess(null);
-        },
-        disabled: isLoading,
-        style: {
-          background: "none",
-          border: "none",
-          color: "#007bff",
-          cursor: "pointer",
-          fontSize: "14px",
-          fontWeight: 600
-        },
-        children: "Back to sign in"
-      }
-    ) })
-  ] }) });
+          ...appearance?.elements?.headerTitle
+        }, children: needsOtp ? "Enter OTP" : usePassword ? "Sign in with password" : "Sign in" }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          padding: "12px 16px",
+          marginBottom: "20px",
+          backgroundColor: colors.errorBg,
+          color: colors.errorText,
+          border: `1px solid ${colors.errorBorder}`,
+          borderRadius: "8px",
+          fontSize: "14px"
+        }, children: error }),
+        success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          padding: "12px 16px",
+          marginBottom: "20px",
+          backgroundColor: colors.successBg,
+          color: colors.successText,
+          border: `1px solid ${colors.successBorder}`,
+          borderRadius: "8px",
+          fontSize: "14px"
+        }, children: success }),
+        !needsOtp && !usePhone && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "email",
+              type: "email",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              onFocus: (e) => {
+                e.currentTarget.style.borderColor = colors.buttonPrimary;
+                e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.borderColor = colors.borderSecondary;
+                e.currentTarget.style.outline = "none";
+              },
+              required: true,
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease",
+                WebkitTextFillColor: colors.textPrimary,
+                WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
+                ...appearance?.elements?.formFieldInput
+              },
+              placeholder: "Enter your email"
+            }
+          )
+        ] }),
+        !needsOtp && usePhone && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "phoneNumber", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Phone Number" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "phoneNumber",
+              type: "tel",
+              value: phoneNumber,
+              onChange: (e) => setPhoneNumber(e.target.value),
+              onFocus: (e) => {
+                e.currentTarget.style.borderColor = colors.buttonPrimary;
+                e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.borderColor = colors.borderSecondary;
+                e.currentTarget.style.outline = "none";
+              },
+              required: true,
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease",
+                WebkitTextFillColor: colors.textPrimary,
+                WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
+                ...appearance?.elements?.formFieldInput
+              },
+              placeholder: "Enter your phone number"
+            }
+          )
+        ] }),
+        usePassword && !needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Password" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "password",
+              type: showPassword ? "text" : "password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              onFocus: (e) => {
+                e.currentTarget.style.borderColor = colors.buttonPrimary;
+                e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.borderColor = colors.borderSecondary;
+                e.currentTarget.style.outline = "none";
+              },
+              required: true,
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease",
+                WebkitTextFillColor: colors.textPrimary,
+                WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
+                ...appearance?.elements?.formFieldInput
+              },
+              placeholder: "Enter your password"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPassword(!showPassword),
+              style: {
+                position: "absolute",
+                right: "12px",
+                top: "38px",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: colors.textTertiary,
+                fontSize: "14px"
+              },
+              children: showPassword ? "Hide" : "Show"
+            }
+          )
+        ] }),
+        needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "otp", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "One-Time Password" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "otp",
+              type: "text",
+              value: otp,
+              onChange: (e) => setOtp(e.target.value),
+              onFocus: (e) => {
+                e.currentTarget.style.borderColor = colors.buttonPrimary;
+                e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.borderColor = colors.borderSecondary;
+                e.currentTarget.style.outline = "none";
+              },
+              required: true,
+              disabled: isLoading,
+              maxLength: 6,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                letterSpacing: "0.5em",
+                textAlign: "center",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease",
+                WebkitTextFillColor: colors.textPrimary,
+                WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
+                ...appearance?.elements?.formFieldInput
+              },
+              placeholder: "000000"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            onMouseEnter: (e) => {
+              if (!isLoading) {
+                e.currentTarget.style.backgroundColor = colors.buttonPrimaryHover;
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = colors.buttonPrimary;
+            },
+            style: {
+              width: "100%",
+              padding: "14px",
+              backgroundColor: colors.buttonPrimary,
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "16px",
+              fontWeight: 600,
+              cursor: isLoading ? "not-allowed" : "pointer",
+              opacity: isLoading ? 0.6 : 1,
+              transition: "all 0.2s ease",
+              ...appearance?.elements?.formButtonPrimary
+            },
+            children: isLoading ? "Please wait..." : needsOtp ? "Verify OTP" : usePassword ? "Sign in" : usePhone ? "Continue with phone" : "Continue with email"
+          }
+        ),
+        !needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginTop: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: toggleAuthMethod,
+              disabled: isLoading,
+              style: {
+                background: "none",
+                border: "none",
+                color: colors.buttonPrimary,
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: 600,
+                marginRight: "16px"
+              },
+              children: usePassword ? "Use OTP code instead" : "Use password instead"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: toggleLoginMethod,
+              disabled: isLoading,
+              style: {
+                background: "none",
+                border: "none",
+                color: colors.buttonPrimary,
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: 600
+              },
+              children: usePhone ? "Use email instead" : "Use phone instead"
+            }
+          )
+        ] }),
+        needsOtp && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setNeedsOtp(false);
+              setOtp("");
+              setError(null);
+              setSuccess(null);
+            },
+            disabled: isLoading,
+            style: {
+              background: "none",
+              border: "none",
+              color: colors.buttonPrimary,
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 600
+            },
+            children: "Back to sign in"
+          }
+        ) })
+      ] })
+    }
+  );
 };
 var SignUp = ({ redirectUrl, appearance }) => {
   const { signUp, isSignedIn } = useAuth();
-  const [name, setName] = react.useState("");
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [confirmPassword, setConfirmPassword] = react.useState("");
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [success, setSuccess] = react.useState(null);
-  react.useEffect(() => {
+  const colors = useThemeColors();
+  const [name, setName] = React3.useState("");
+  const [email, setEmail] = React3.useState("");
+  const [phoneNumber, setPhoneNumber] = React3.useState("");
+  const [password, setPassword] = React3.useState("");
+  const [confirmPassword, setConfirmPassword] = React3.useState("");
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [success, setSuccess] = React3.useState(null);
+  React3.useEffect(() => {
     if (isSignedIn && redirectUrl) {
       const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_REGISTER || process.env.REACT_APP_AUTH_REDIRECT_AFTER_REGISTER || "/dashboard";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
       window.location.href = `${baseUrl}${redirect}`;
     }
   }, [isSignedIn, redirectUrl]);
-  const getPasswordStrength = (pwd) => {
+  const getPasswordStrength = (pwd, colors2) => {
     if (!pwd)
-      return { strength: "weak", color: "#ddd" };
+      return { strength: "weak", color: colors2.borderSecondary };
     let score = 0;
     if (pwd.length >= 6)
       score++;
@@ -2487,12 +3048,12 @@ var SignUp = ({ redirectUrl, appearance }) => {
     if (/[^a-zA-Z\d]/.test(pwd))
       score++;
     if (score <= 2)
-      return { strength: "weak", color: "#f44" };
+      return { strength: "weak", color: colors2.errorText };
     if (score <= 3)
-      return { strength: "medium", color: "#fa4" };
-    return { strength: "strong", color: "#4f4" };
+      return { strength: "medium", color: colors2.warningText || "#fa4" };
+    return { strength: "strong", color: colors2.successText };
   };
-  const passwordStrength = getPasswordStrength(password);
+  const passwordStrength = getPasswordStrength(password, colors);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -2509,7 +3070,12 @@ var SignUp = ({ redirectUrl, appearance }) => {
       return;
     }
     try {
-      const response = await signUp({ name, email, password });
+      const signUpData = { name, password };
+      if (email)
+        signUpData.email = email;
+      if (phoneNumber)
+        signUpData.phoneNumber = phoneNumber;
+      const response = await signUp(signUpData);
       if (response.success) {
         setSuccess("Registration successful! Please check your email to verify your account.");
       } else {
@@ -2521,20 +3087,20 @@ var SignUp = ({ redirectUrl, appearance }) => {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeWrapper, { style: {
     maxWidth: "400px",
     margin: "0 auto",
     padding: "30px",
     borderRadius: "12px",
     boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
-    backgroundColor: "#ffffff",
-    border: "1px solid #eaeaea",
+    backgroundColor: colors.bgPrimary,
+    border: `1px solid ${colors.borderPrimary}`,
     ...appearance?.elements?.card
   }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
       textAlign: "center",
       marginBottom: "24px",
-      color: "#1f2937",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600,
       ...appearance?.elements?.headerTitle
@@ -2542,18 +3108,18 @@ var SignUp = ({ redirectUrl, appearance }) => {
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
       marginBottom: "20px",
-      backgroundColor: "#fee",
-      color: "#c33",
-      border: "1px solid #fcc",
+      backgroundColor: colors.errorBg,
+      color: colors.errorText,
+      border: `1px solid ${colors.errorBorder}`,
       borderRadius: "8px",
       fontSize: "14px"
     }, children: error }),
     success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
       marginBottom: "20px",
-      backgroundColor: "#efe",
-      color: "#3c3",
-      border: "1px solid #cfc",
+      backgroundColor: colors.successBg,
+      color: colors.successText,
+      border: `1px solid ${colors.successBorder}`,
       borderRadius: "8px",
       fontSize: "14px"
     }, children: success }),
@@ -2562,7 +3128,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Full name" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2572,15 +3138,28 @@ var SignUp = ({ redirectUrl, appearance }) => {
           type: "text",
           value: name,
           onChange: (e) => setName(e.target.value),
+          onFocus: (e) => {
+            e.currentTarget.style.borderColor = colors.buttonPrimary;
+            e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+          },
+          onBlur: (e) => {
+            e.currentTarget.style.borderColor = colors.borderSecondary;
+            e.currentTarget.style.outline = "none";
+          },
           required: true,
           disabled: isLoading,
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
+            backgroundColor: colors.bgSecondary,
+            color: colors.textPrimary,
+            transition: "all 0.2s ease",
+            WebkitTextFillColor: colors.textPrimary,
+            WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
             ...appearance?.elements?.formFieldInput
           },
           placeholder: "Enter your full name"
@@ -2592,7 +3171,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Email" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2602,27 +3181,60 @@ var SignUp = ({ redirectUrl, appearance }) => {
           type: "email",
           value: email,
           onChange: (e) => setEmail(e.target.value),
-          required: true,
+          onFocus: (e) => {
+            e.currentTarget.style.borderColor = colors.buttonPrimary;
+            e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+          },
+          onBlur: (e) => {
+            e.currentTarget.style.borderColor = colors.borderSecondary;
+            e.currentTarget.style.outline = "none";
+          },
+          required: !phoneNumber,
           disabled: isLoading,
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
+            backgroundColor: colors.bgSecondary,
+            color: colors.textPrimary,
+            transition: "all 0.2s ease",
+            WebkitTextFillColor: colors.textPrimary,
+            WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
             ...appearance?.elements?.formFieldInput
           },
           placeholder: "Enter your email"
         }
       )
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "phoneNumber", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: colors.textSecondary,
+        fontSize: "14px"
+      }, children: "Phone Number (Optional)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PhoneInput,
+        {
+          id: "phoneNumber",
+          value: phoneNumber,
+          onChange: setPhoneNumber,
+          disabled: isLoading,
+          placeholder: "1234567890",
+          style: appearance?.elements?.formFieldInput
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Password" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2632,16 +3244,29 @@ var SignUp = ({ redirectUrl, appearance }) => {
           type: showPassword ? "text" : "password",
           value: password,
           onChange: (e) => setPassword(e.target.value),
+          onFocus: (e) => {
+            e.currentTarget.style.borderColor = colors.buttonPrimary;
+            e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+          },
+          onBlur: (e) => {
+            e.currentTarget.style.borderColor = colors.borderSecondary;
+            e.currentTarget.style.outline = "none";
+          },
           required: true,
           disabled: isLoading,
           minLength: 6,
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
+            backgroundColor: colors.bgSecondary,
+            color: colors.textPrimary,
+            transition: "all 0.2s ease",
+            WebkitTextFillColor: colors.textPrimary,
+            WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
             ...appearance?.elements?.formFieldInput
           },
           placeholder: "Create a password"
@@ -2659,7 +3284,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
             background: "none",
             border: "none",
             cursor: "pointer",
-            color: "#666",
+            color: colors.textTertiary,
             fontSize: "14px"
           },
           children: showPassword ? "Hide" : "Show"
@@ -2668,7 +3293,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
       password && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "8px" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           height: "4px",
-          backgroundColor: "#eee",
+          backgroundColor: colors.borderSecondary,
           borderRadius: "2px",
           overflow: "hidden"
         }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
@@ -2693,7 +3318,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Confirm password" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2703,15 +3328,28 @@ var SignUp = ({ redirectUrl, appearance }) => {
           type: showPassword ? "text" : "password",
           value: confirmPassword,
           onChange: (e) => setConfirmPassword(e.target.value),
+          onFocus: (e) => {
+            e.currentTarget.style.borderColor = colors.buttonPrimary;
+            e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+          },
+          onBlur: (e) => {
+            e.currentTarget.style.borderColor = colors.borderSecondary;
+            e.currentTarget.style.outline = "none";
+          },
           required: true,
           disabled: isLoading,
           style: {
             width: "100%",
             padding: "12px 16px",
-            border: "1px solid #ddd",
+            border: `1px solid ${colors.borderSecondary}`,
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
+            backgroundColor: colors.bgSecondary,
+            color: colors.textPrimary,
+            transition: "all 0.2s ease",
+            WebkitTextFillColor: colors.textPrimary,
+            WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
             ...appearance?.elements?.formFieldInput
           },
           placeholder: "Confirm your password"
@@ -2723,16 +3361,25 @@ var SignUp = ({ redirectUrl, appearance }) => {
       {
         type: "submit",
         disabled: isLoading,
+        onMouseEnter: (e) => {
+          if (!isLoading) {
+            e.currentTarget.style.backgroundColor = colors.buttonPrimaryHover;
+          }
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = colors.buttonPrimary;
+        },
         style: {
           width: "100%",
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
           fontSize: "16px",
           fontWeight: 600,
-          cursor: "pointer",
+          cursor: isLoading ? "not-allowed" : "pointer",
+          opacity: isLoading ? 0.6 : 1,
           transition: "all 0.2s ease",
           ...appearance?.elements?.formButtonPrimary
         },
@@ -2743,7 +3390,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
 };
 var SignOut = ({ redirectUrl }) => {
   const { signOut } = useAuth();
-  react.useEffect(() => {
+  React3.useEffect(() => {
     const performSignOut = async () => {
       await signOut();
       const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
@@ -2756,9 +3403,10 @@ var SignOut = ({ redirectUrl }) => {
 };
 var UserButton = ({ showName = false, appearance }) => {
   const { user, signOut } = useAuth();
-  const [isOpen, setIsOpen] = react.useState(false);
-  const dropdownRef = react.useRef(null);
-  react.useEffect(() => {
+  const colors = useThemeColors();
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const dropdownRef = React3.useRef(null);
+  React3.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2778,7 +3426,7 @@ var UserButton = ({ showName = false, appearance }) => {
     const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
     window.location.href = `${baseUrl}${redirect}`;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ThemeWrapper, { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2796,7 +3444,7 @@ var UserButton = ({ showName = false, appearance }) => {
           ...appearance?.elements?.userButtonTrigger
         },
         onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "#f5f5f5";
+          e.currentTarget.style.backgroundColor = colors.bgHover;
         },
         onMouseLeave: (e) => {
           e.currentTarget.style.backgroundColor = "transparent";
@@ -2806,15 +3454,15 @@ var UserButton = ({ showName = false, appearance }) => {
             width: "36px",
             height: "36px",
             borderRadius: "50%",
-            backgroundColor: "#007bff",
-            color: "white",
+            backgroundColor: colors.buttonPrimary,
+            color: colors.textPrimary,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             fontSize: "14px",
             fontWeight: 600
           }, children: getInitials(user.name) }),
-          showName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#333" }, children: user.name })
+          showName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: colors.textPrimary }, children: user.name })
         ]
       }
     ),
@@ -2824,16 +3472,16 @@ var UserButton = ({ showName = false, appearance }) => {
       right: 0,
       marginTop: "8px",
       width: "240px",
-      backgroundColor: "white",
+      backgroundColor: colors.bgPrimary,
       borderRadius: "12px",
       boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
-      border: "1px solid #eaeaea",
+      border: `1px solid ${colors.borderPrimary}`,
       zIndex: 1e3,
       ...appearance?.elements?.userButtonPopoverCard
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         padding: "16px",
-        borderBottom: "1px solid #eee"
+        borderBottom: `1px solid ${colors.borderPrimary}`
       }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -2843,8 +3491,8 @@ var UserButton = ({ showName = false, appearance }) => {
           width: "48px",
           height: "48px",
           borderRadius: "50%",
-          backgroundColor: "#007bff",
-          color: "white",
+          backgroundColor: colors.buttonPrimary,
+          color: colors.textPrimary,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -2855,14 +3503,14 @@ var UserButton = ({ showName = false, appearance }) => {
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
             fontSize: "14px",
             fontWeight: 600,
-            color: "#333",
+            color: colors.textPrimary,
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
           }, children: user.name }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
             fontSize: "12px",
-            color: "#666",
+            color: colors.textTertiary,
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
@@ -2882,12 +3530,12 @@ var UserButton = ({ showName = false, appearance }) => {
             textAlign: "left",
             cursor: "pointer",
             fontSize: "14px",
-            color: "#333",
+            color: colors.textPrimary,
             fontWeight: 500,
             transition: "background-color 0.2s"
           },
           onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = "#f5f5f5";
+            e.currentTarget.style.backgroundColor = colors.bgHover;
           },
           onMouseLeave: (e) => {
             e.currentTarget.style.backgroundColor = "transparent";
@@ -2904,7 +3552,7 @@ var ProtectedRoute = ({
   redirectTo
 }) => {
   const { isSignedIn, isLoaded } = useAuth();
-  react.useEffect(() => {
+  React3.useEffect(() => {
     if (isLoaded && !isSignedIn) {
       const loginPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -2929,7 +3577,7 @@ var PublicRoute = ({
   redirectTo
 }) => {
   const { isSignedIn, isLoaded } = useAuth();
-  react.useEffect(() => {
+  React3.useEffect(() => {
     if (isLoaded && isSignedIn) {
       const dashboardPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -2951,9 +3599,9 @@ var PublicRoute = ({
 };
 var VerifyEmail = ({ token, onSuccess, onError }) => {
   const { verifyEmailToken } = useAuth();
-  const [status, setStatus] = react.useState("loading");
-  const [message, setMessage] = react.useState("");
-  react.useEffect(() => {
+  const [status, setStatus] = React3.useState("loading");
+  const [message, setMessage] = React3.useState("");
+  React3.useEffect(() => {
     const verify = async () => {
       const verifyToken = token || (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") : null);
       if (!verifyToken) {
@@ -3087,10 +3735,10 @@ var VerifyEmail = ({ token, onSuccess, onError }) => {
 };
 var ForgotPassword = ({ appearance }) => {
   const { forgotPassword } = useAuth();
-  const [email, setEmail] = react.useState("");
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [success, setSuccess] = react.useState(null);
+  const [email, setEmail] = React3.useState("");
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [success, setSuccess] = React3.useState(null);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -3229,14 +3877,14 @@ var ForgotPassword = ({ appearance }) => {
 };
 var ResetPassword = ({ token, appearance }) => {
   const { resetPassword } = useAuth();
-  const [resetToken, setResetToken] = react.useState(token || "");
-  const [password, setPassword] = react.useState("");
-  const [confirmPassword, setConfirmPassword] = react.useState("");
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [success, setSuccess] = react.useState(false);
-  react.useEffect(() => {
+  const [resetToken, setResetToken] = React3.useState(token || "");
+  const [password, setPassword] = React3.useState("");
+  const [confirmPassword, setConfirmPassword] = React3.useState("");
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [success, setSuccess] = React3.useState(false);
+  React3.useEffect(() => {
     if (!resetToken && typeof window !== "undefined") {
       const urlToken = new URLSearchParams(window.location.search).get("token");
       if (urlToken) {
@@ -3491,13 +4139,13 @@ var ResetPassword = ({ token, appearance }) => {
 };
 var ChangePassword = ({ onSuccess, appearance }) => {
   const { changePassword } = useAuth();
-  const [oldPassword, setOldPassword] = react.useState("");
-  const [newPassword, setNewPassword] = react.useState("");
-  const [confirmPassword, setConfirmPassword] = react.useState("");
-  const [showPasswords, setShowPasswords] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [success, setSuccess] = react.useState(false);
+  const [oldPassword, setOldPassword] = React3.useState("");
+  const [newPassword, setNewPassword] = React3.useState("");
+  const [confirmPassword, setConfirmPassword] = React3.useState("");
+  const [showPasswords, setShowPasswords] = React3.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [success, setSuccess] = React3.useState(false);
   const getPasswordStrength = (pwd) => {
     if (!pwd)
       return { strength: "weak", color: "#ddd" };
@@ -3740,43 +4388,41 @@ var UserProfile = ({
   showEmailChange = true,
   showPasswordChange = true
 }) => {
-  const { user, updateProfile, updateAvatar, requestEmailChange } = useAuth();
-  const [name, setName] = react.useState(user?.name || "");
-  const [avatar, setAvatar] = react.useState("");
-  const [newEmail, setNewEmail] = react.useState("");
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [success, setSuccess] = react.useState(null);
-  const handleUpdateName = async (e) => {
+  const { user, updateProfile, requestEmailChange } = useAuth();
+  const colors = useThemeColors();
+  const [name, setName] = React3.useState(user?.name || "");
+  const [avatar, setAvatar] = React3.useState(user?.avatar || "");
+  const [phoneNumber, setPhoneNumber] = React3.useState(user?.phoneNumber || "");
+  const [newEmail, setNewEmail] = React3.useState("");
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [success, setSuccess] = React3.useState(null);
+  const handleUpdateProfile = async (e) => {
     e.preventDefault();
     setIsLoading(true);
     setError(null);
     setSuccess(null);
     try {
-      const response = await updateProfile({ name });
-      if (response.success) {
-        setSuccess("Name updated successfully!");
-      } else {
-        setError(response.message || "Failed to update name");
+      const updates = {};
+      if (name !== user?.name) {
+        updates.name = name;
       }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "An error occurred");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const handleUpdateAvatar = async (e) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError(null);
-    setSuccess(null);
-    try {
-      const response = await updateAvatar(avatar);
+      if (showAvatar && avatar !== user?.avatar) {
+        updates.avatar = avatar;
+      }
+      if (phoneNumber !== user?.phoneNumber) {
+        updates.phoneNumber = phoneNumber;
+      }
+      if (Object.keys(updates).length === 0) {
+        setError("No changes to save");
+        setIsLoading(false);
+        return;
+      }
+      const response = await updateProfile(updates);
       if (response.success) {
-        setSuccess("Avatar updated successfully!");
-        setAvatar("");
+        setSuccess("Profile updated successfully!");
       } else {
-        setError(response.message || "Failed to update avatar");
+        setError(response.message || "Failed to update profile");
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
@@ -3805,173 +4451,220 @@ var UserProfile = ({
   };
   if (!user)
     return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600 }, children: "Profile Settings" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "700px", margin: "0 auto", padding: "20px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600, color: colors.textPrimary }, children: "Profile Settings" }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
       marginBottom: "20px",
-      backgroundColor: "#fee",
-      color: "#c33",
-      border: "1px solid #fcc",
+      backgroundColor: colors.errorBg,
+      color: colors.errorText,
+      border: `1px solid ${colors.errorBorder}`,
       borderRadius: "8px",
       fontSize: "14px"
     }, children: error }),
     success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "12px 16px",
       marginBottom: "20px",
-      backgroundColor: "#efe",
-      color: "#3c3",
-      border: "1px solid #cfc",
+      backgroundColor: colors.successBg,
+      color: colors.successText,
+      border: `1px solid ${colors.successBorder}`,
       borderRadius: "8px",
       fontSize: "14px"
     }, children: success }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      padding: "20px",
-      backgroundColor: "#fff",
-      borderRadius: "8px",
+      padding: "24px",
+      backgroundColor: colors.bgPrimary,
+      borderRadius: "12px",
       boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-      marginBottom: "20px"
+      marginBottom: "24px",
+      border: `1px solid ${colors.borderPrimary}`
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Name" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleUpdateName, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            value: name,
-            onChange: (e) => setName(e.target.value),
-            required: true,
-            disabled: isLoading,
-            style: {
-              width: "100%",
-              padding: "12px 16px",
-              border: "1px solid #ddd",
-              borderRadius: "8px",
-              fontSize: "16px",
-              boxSizing: "border-box",
-              marginBottom: "12px"
-            },
-            placeholder: "Your name"
-          }
-        ),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "20px", fontSize: "18px", fontWeight: 600, color: colors.textPrimary }, children: "Profile Information" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleUpdateProfile, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Full Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "name",
+              type: "text",
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              required: true,
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease"
+              },
+              placeholder: "Manish Batra"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "phoneNumber", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Phone Number" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PhoneInput,
+            {
+              id: "phoneNumber",
+              value: phoneNumber,
+              onChange: setPhoneNumber,
+              disabled: isLoading,
+              placeholder: "1234567890"
+            }
+          )
+        ] }),
+        showAvatar && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "avatar", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Avatar URL" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "avatar",
+              type: "url",
+              value: avatar,
+              onChange: (e) => setAvatar(e.target.value),
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease"
+              },
+              placeholder: "https://example.com/avatar.jpg"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "submit",
             disabled: isLoading,
-            style: {
-              padding: "10px 20px",
-              backgroundColor: "#007bff",
-              color: "white",
-              border: "none",
-              borderRadius: "8px",
-              fontSize: "14px",
-              fontWeight: 600,
-              cursor: "pointer"
+            onMouseEnter: (e) => {
+              if (!isLoading) {
+                e.currentTarget.style.backgroundColor = colors.buttonPrimaryHover;
+              }
             },
-            children: "Update Name"
-          }
-        )
-      ] })
-    ] }),
-    showAvatar && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      padding: "20px",
-      backgroundColor: "#fff",
-      borderRadius: "8px",
-      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-      marginBottom: "20px"
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Avatar" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleUpdateAvatar, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "url",
-            value: avatar,
-            onChange: (e) => setAvatar(e.target.value),
-            required: true,
-            disabled: isLoading,
-            style: {
-              width: "100%",
-              padding: "12px 16px",
-              border: "1px solid #ddd",
-              borderRadius: "8px",
-              fontSize: "16px",
-              boxSizing: "border-box",
-              marginBottom: "12px"
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = colors.buttonPrimary;
             },
-            placeholder: "Avatar URL"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "submit",
-            disabled: isLoading,
             style: {
-              padding: "10px 20px",
-              backgroundColor: "#007bff",
+              padding: "12px 24px",
+              backgroundColor: colors.buttonPrimary,
               color: "white",
               border: "none",
               borderRadius: "8px",
               fontSize: "14px",
               fontWeight: 600,
-              cursor: "pointer"
+              cursor: isLoading ? "not-allowed" : "pointer",
+              opacity: isLoading ? 0.6 : 1,
+              transition: "all 0.2s ease"
             },
-            children: "Update Avatar"
+            children: isLoading ? "Saving..." : "Save Changes"
           }
         )
       ] })
     ] }),
     showEmailChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      padding: "20px",
-      backgroundColor: "#fff",
-      borderRadius: "8px",
+      padding: "24px",
+      backgroundColor: colors.bgPrimary,
+      borderRadius: "12px",
       boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      border: `1px solid ${colors.borderPrimary}`
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Change Email" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "14px", color: "#666", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600, color: colors.textPrimary }, children: "Change Email" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "14px", color: colors.textSecondary, marginBottom: "16px" }, children: [
         "Current email: ",
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: user.email })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleRequestEmailChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "email",
-            value: newEmail,
-            onChange: (e) => setNewEmail(e.target.value),
-            required: true,
-            disabled: isLoading,
-            style: {
-              width: "100%",
-              padding: "12px 16px",
-              border: "1px solid #ddd",
-              borderRadius: "8px",
-              fontSize: "16px",
-              boxSizing: "border-box",
-              marginBottom: "12px"
-            },
-            placeholder: "New email address"
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "newEmail", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "New Email Address" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "newEmail",
+              type: "email",
+              value: newEmail,
+              onChange: (e) => setNewEmail(e.target.value),
+              required: true,
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease"
+              },
+              placeholder: "newemail@example.com"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "submit",
             disabled: isLoading,
+            onMouseEnter: (e) => {
+              if (!isLoading) {
+                e.currentTarget.style.backgroundColor = colors.buttonPrimaryHover;
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = colors.buttonPrimary;
+            },
             style: {
-              padding: "10px 20px",
-              backgroundColor: "#007bff",
+              padding: "12px 24px",
+              backgroundColor: colors.buttonPrimary,
               color: "white",
               border: "none",
               borderRadius: "8px",
               fontSize: "14px",
               fontWeight: 600,
-              cursor: "pointer"
+              cursor: isLoading ? "not-allowed" : "pointer",
+              opacity: isLoading ? 0.6 : 1,
+              transition: "all 0.2s ease"
             },
-            children: "Request Email Change"
+            children: isLoading ? "Sending..." : "Request Email Change"
           }
         )
       ] })
@@ -3984,11 +4677,13 @@ var react_exports = {};
 __export(react_exports, {
   AuthFlow: () => AuthFlow,
   AuthProvider: () => AuthProvider,
+  AuthThemeProvider: () => AuthThemeProvider,
   ChangePassword: () => ChangePassword,
   EmailVerificationPage: () => EmailVerificationPage,
   ForgotPassword: () => ForgotPassword,
   LoginForm: () => LoginForm,
   OtpForm: () => OtpForm,
+  PhoneInput: () => PhoneInput,
   ProtectedRoute: () => ProtectedRoute,
   PublicRoute: () => PublicRoute,
   RegisterForm: () => RegisterForm,
@@ -4000,7 +4695,8 @@ __export(react_exports, {
   UserProfile: () => UserProfile,
   VerifyEmail: () => VerifyEmail,
   useAuth: () => useAuth,
-  useAuthLegacy: () => useAuth2
+  useAuthLegacy: () => useAuth2,
+  useAuthTheme: () => useAuthTheme
 });
 
 // src/node/index.ts