@thetechfossil/auth2 1.2.2 → 1.2.4

package/dist/index.components.mjs

@@ -1,14 +1,17 @@
-import { createContext, useState, useEffect, useRef, useCallback, useContext } from 'react';
+"use client";
+import React2, { createContext, forwardRef, useContext, useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import axios from 'axios';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import PhoneInputWithCountry from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
 
-// src/react/components/LoginForm.tsx
 var HttpClient = class {
   constructor(baseUrl, defaultHeaders = {}) {
     this.csrfToken = null;
     this.frontendBaseUrl = null;
+    this.baseUrl = baseUrl.replace(/\/$/, "");
     this.axiosInstance = axios.create({
-      baseURL: baseUrl.replace(/\/$/, ""),
+      baseURL: this.baseUrl,
       headers: {
         "Content-Type": "application/json",
         ...defaultHeaders
@@ -19,8 +22,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) {
@@ -118,9 +129,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) {
@@ -222,7 +230,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) {
@@ -293,7 +301,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);
@@ -334,7 +342,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);
@@ -397,21 +405,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();
@@ -589,6 +597,271 @@ var useAuth = (config) => {
     getUserById
   };
 };
+var ThemeContext = createContext({ theme: "light", mounted: false });
+function useAuthTheme() {
+  return useContext(ThemeContext);
+}
+
+// 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 = React2.forwardRef((props, ref) => /* @__PURE__ */ 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] = useState("US");
+  const styleContent = 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]);
+  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 = useMemo(() => (val) => {
+    onChange(val || "");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: styleContent }),
+        /* @__PURE__ */ jsx(
+          PhoneInputWithCountry,
+          {
+            id,
+            international: true,
+            defaultCountry,
+            value: value || "",
+            onChange: handleChange,
+            disabled,
+            placeholder,
+            inputComponent: CustomPhoneInput
+          },
+          id
+        )
+      ]
+    }
+  );
+};
 var LoginForm = ({
   onSuccess,
   onLoginSuccess,
@@ -598,7 +871,10 @@ var LoginForm = ({
   oauthProviders = ["google", "github"],
   showOAuthButtons = true
 }) => {
+  const colors = useThemeColors();
   const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [usePhone, setUsePhone] = useState(false);
   const [password, setPassword] = useState("");
   const [usePassword, setUsePassword] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -606,7 +882,7 @@ var LoginForm = ({
   const [error, setError] = useState(null);
   const [rememberMe, setRememberMe] = useState(false);
   const { login } = useAuth({
-    baseUrl: config?.baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
+    baseUrl: config?.baseUrl || "http://localhost:7000"
   });
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -614,20 +890,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 {
@@ -649,43 +933,53 @@ var LoginForm = ({
   return /* @__PURE__ */ 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__ */ jsxs("form", { onSubmit: handleSubmit, style: {
     display: "flex",
     flexDirection: "column"
   }, children: [
     /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
+      /* @__PURE__ */ jsx("label", { htmlFor: usePhone ? "phone" : "email", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
-      }, children: "Email:" }),
-      /* @__PURE__ */ jsx(
+      }, children: usePhone ? "Phone Number:" : "Email:" }),
+      usePhone ? /* @__PURE__ */ jsx(
+        PhoneInput,
+        {
+          id: "phone",
+          value: phoneNumber,
+          onChange: setPhoneNumber,
+          required: true,
+          disabled: isLoading,
+          placeholder: "1234567890"
+        }
+      ) : /* @__PURE__ */ jsx(
         "input",
         {
           id: "email",
@@ -697,27 +991,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__ */ 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__ */ jsxs("div", { style: {
-      marginBottom: "20px",
+      marginBottom: "16px",
       position: "relative"
     }, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: "login-password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Password:" }),
       /* @__PURE__ */ jsx(
@@ -732,13 +1047,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"
         }
@@ -756,7 +1071,7 @@ var LoginForm = ({
             background: "none",
             border: "none",
             cursor: "pointer",
-            color: "#666",
+            color: colors.textTertiary,
             fontSize: "14px"
           },
           children: showPassword ? "Hide" : "Show"
@@ -766,8 +1081,8 @@ var LoginForm = ({
     usePassword && /* @__PURE__ */ jsxs("div", { style: {
       display: "flex",
       alignItems: "center",
-      marginBottom: "16px",
-      marginTop: "8px"
+      marginBottom: "12px",
+      marginTop: "4px"
     }, children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -791,7 +1106,7 @@ var LoginForm = ({
           htmlFor: "remember-me",
           style: {
             fontSize: "14px",
-            color: "#666",
+            color: colors.textSecondary,
             cursor: "pointer",
             userSelect: "none"
           },
@@ -806,7 +1121,7 @@ var LoginForm = ({
         disabled: isLoading,
         style: {
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
@@ -814,16 +1129,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__ */ jsx("div", { style: {
       textAlign: "center",
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -833,7 +1148,7 @@ var LoginForm = ({
         style: {
           background: "none",
           border: "none",
-          color: "#007bff",
+          color: colors.buttonPrimary,
           textDecoration: "none",
           cursor: "pointer",
           fontSize: "14px",
@@ -845,9 +1160,9 @@ var LoginForm = ({
       }
     ) }),
     showOAuthButtons && oauthProviders.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: [
       /* @__PURE__ */ jsxs("div", { style: {
         position: "relative",
@@ -859,15 +1174,15 @@ var LoginForm = ({
           left: 0,
           right: 0,
           height: "1px",
-          backgroundColor: "#eee"
+          backgroundColor: colors.borderPrimary
         } }),
         /* @__PURE__ */ jsx("div", { style: {
           position: "relative",
           textAlign: "center"
         }, children: /* @__PURE__ */ jsx("span", { style: {
-          backgroundColor: "#ffffff",
+          backgroundColor: colors.bgPrimary,
           padding: "0 12px",
-          color: "#666",
+          color: colors.textSecondary,
           fontSize: "14px"
         }, children: "Or continue with" }) })
       ] }),
@@ -886,10 +1201,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,
@@ -897,12 +1212,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__ */ jsxs("svg", { style: { width: "18px", height: "18px" }, viewBox: "0 0 24 24", children: [
@@ -977,11 +1292,11 @@ var LoginForm = ({
     ] }),
     showRegisterLink && /* @__PURE__ */ jsx("div", { style: {
       textAlign: "center",
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: /* @__PURE__ */ jsxs("p", { style: {
-      color: "#666",
+      color: colors.textSecondary,
       fontSize: "14px"
     }, children: [
       "Don't have an account?",
@@ -995,7 +1310,7 @@ var LoginForm = ({
           style: {
             background: "none",
             border: "none",
-            color: "#007bff",
+            color: colors.buttonPrimary,
             textDecoration: "none",
             cursor: "pointer",
             fontSize: "14px",
@@ -1015,10 +1330,13 @@ var RegisterForm = ({
   showLoginLink = true,
   authConfig,
   oauthProviders = ["google", "github"],
-  showOAuthButtons = true
+  showOAuthButtons = true,
+  invitationToken
 }) => {
+  const colors = useThemeColors();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -1047,7 +1365,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 } = useAuth(config);
   const handleSubmit = async (e) => {
@@ -1065,17 +1383,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");
@@ -1086,40 +1432,40 @@ var RegisterForm = ({
   return /* @__PURE__ */ 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__ */ jsxs("form", { onSubmit: handleSubmit, style: {
     display: "flex",
     flexDirection: "column"
   }, children: [
     /* @__PURE__ */ jsx("h2", { style: {
       textAlign: "center",
-      marginBottom: "24px",
-      color: "#1f2937",
+      marginBottom: "20px",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600
     }, children: "Register" }),
     error && /* @__PURE__ */ 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__ */ jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: "name", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Name:" }),
       /* @__PURE__ */ jsx(
@@ -1134,26 +1480,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__ */ jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: "register-email", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Email:" }),
       /* @__PURE__ */ jsx(
@@ -1163,31 +1509,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__ */ jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
+    }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "register-phone", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: colors.textSecondary,
+        fontSize: "14px"
+      }, children: "Phone Number (Optional):" }),
+      /* @__PURE__ */ jsx(
+        PhoneInput,
+        {
+          id: "register-phone",
+          value: phoneNumber,
+          onChange: setPhoneNumber,
+          disabled: isLoading,
+          placeholder: "1234567890"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Password:" }),
       /* @__PURE__ */ jsx(
@@ -1202,13 +1569,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
@@ -1216,13 +1583,13 @@ var RegisterForm = ({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { style: {
-      marginBottom: "20px"
+      marginBottom: "16px"
     }, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: "confirm-password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#555",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Confirm Password:" }),
       /* @__PURE__ */ jsx(
@@ -1237,13 +1604,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"
         }
@@ -1256,7 +1623,7 @@ var RegisterForm = ({
         disabled: isLoading,
         style: {
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
@@ -1264,15 +1631,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__ */ jsxs("div", { style: {
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: [
       /* @__PURE__ */ jsxs("div", { style: {
         position: "relative",
@@ -1284,15 +1651,15 @@ var RegisterForm = ({
           left: 0,
           right: 0,
           height: "1px",
-          backgroundColor: "#eee"
+          backgroundColor: colors.borderPrimary
         } }),
         /* @__PURE__ */ jsx("div", { style: {
           position: "relative",
           textAlign: "center"
         }, children: /* @__PURE__ */ jsx("span", { style: {
-          backgroundColor: "#ffffff",
+          backgroundColor: colors.bgPrimary,
           padding: "0 12px",
-          color: "#666",
+          color: colors.textSecondary,
           fontSize: "14px"
         }, children: "Or continue with" }) })
       ] }),
@@ -1311,10 +1678,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,
@@ -1322,12 +1689,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__ */ jsxs("svg", { style: { width: "18px", height: "18px" }, viewBox: "0 0 24 24", children: [
@@ -1402,11 +1769,11 @@ var RegisterForm = ({
     ] }),
     showLoginLink && /* @__PURE__ */ jsx("div", { style: {
       textAlign: "center",
-      marginTop: "20px",
-      paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      marginTop: "16px",
+      paddingTop: "16px",
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: /* @__PURE__ */ jsxs("p", { style: {
-      color: "#666",
+      color: colors.textSecondary,
       fontSize: "14px"
     }, children: [
       "Already have an account?",
@@ -1420,7 +1787,7 @@ var RegisterForm = ({
           style: {
             background: "none",
             border: "none",
-            color: "#007bff",
+            color: colors.buttonPrimary,
             textDecoration: "none",
             cursor: "pointer",
             fontSize: "14px",
@@ -1437,15 +1804,17 @@ var RegisterForm = ({
 var OtpForm = ({
   email,
   onVerifySuccess,
-  onBackToLogin
+  onBackToLogin,
+  baseUrl
 }) => {
+  const colors = useThemeColors();
   const [otp, setOtp] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [resendCooldown, setResendCooldown] = useState(0);
   const [resendLoading, setResendLoading] = useState(false);
   const { verify, login } = useAuth({
-    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();
@@ -1508,8 +1877,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__ */ jsxs("form", { onSubmit: handleSubmit, style: {
     display: "flex",
     flexDirection: "column"
@@ -1517,25 +1886,25 @@ var OtpForm = ({
     /* @__PURE__ */ jsx("h2", { style: {
       textAlign: "center",
       marginBottom: "24px",
-      color: "#1f2937",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600
     }, children: "Verify OTP" }),
     /* @__PURE__ */ jsxs("p", { style: {
       textAlign: "center",
       marginBottom: "24px",
-      color: "#4b5563",
+      color: colors.textSecondary,
       fontSize: "14px"
     }, children: [
       "Enter the 6-digit code sent to ",
-      /* @__PURE__ */ jsx("strong", { style: { color: "#111827" }, children: email })
+      /* @__PURE__ */ jsx("strong", { style: { color: colors.textPrimary }, children: email })
     ] }),
     error && /* @__PURE__ */ 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
@@ -1547,7 +1916,7 @@ var OtpForm = ({
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "OTP Code:" }),
       /* @__PURE__ */ jsx(
@@ -1562,13 +1931,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"
           },
@@ -1585,7 +1954,7 @@ var OtpForm = ({
         disabled: isLoading || otp.length !== 6,
         style: {
           padding: "14px",
-          backgroundColor: "#007bff",
+          backgroundColor: colors.buttonPrimary,
           color: "white",
           border: "none",
           borderRadius: "8px",
@@ -1602,7 +1971,7 @@ var OtpForm = ({
       textAlign: "center",
       marginTop: "20px",
       paddingTop: "20px",
-      borderTop: "1px solid #eee"
+      borderTop: `1px solid ${colors.borderPrimary}`
     }, children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -1613,7 +1982,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",
@@ -1636,7 +2005,7 @@ var OtpForm = ({
           style: {
             background: "none",
             border: "none",
-            color: "#007bff",
+            color: colors.buttonPrimary,
             textDecoration: "none",
             cursor: "pointer",
             fontSize: "14px",
@@ -1911,12 +2280,25 @@ var useAuth2 = () => {
   }
   return context;
 };
+var ThemeWrapper = forwardRef(
+  ({ children, className = "", style }, ref) => {
+    const { theme, mounted } = useAuthTheme();
+    if (!mounted) {
+      return /* @__PURE__ */ jsx("div", { ref, className, style, children });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, className: `${theme} ${className}`, style, children });
+  }
+);
+ThemeWrapper.displayName = "ThemeWrapper";
 var SignIn = ({ redirectUrl, appearance }) => {
   const { signIn, isSignedIn, loading: authLoading } = useAuth2();
+  const colors = useThemeColors();
   const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
   const [password, setPassword] = useState("");
   const [otp, setOtp] = useState("");
   const [usePassword, setUsePassword] = useState(false);
+  const [usePhone, setUsePhone] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -1935,25 +2317,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");
         }
@@ -1971,222 +2354,350 @@ var SignIn = ({ redirectUrl, appearance }) => {
     setSuccess(null);
     setOtp("");
   };
+  const toggleLoginMethod = () => {
+    setUsePhone(!usePhone);
+    setNeedsOtp(false);
+    setError(null);
+    setSuccess(null);
+    setOtp("");
+    setEmail("");
+    setPhoneNumber("");
+  };
   if (authLoading) {
     return /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
   }
-  return /* @__PURE__ */ 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__ */ jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ 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__ */ jsx("div", { style: {
-      padding: "12px 16px",
-      marginBottom: "20px",
-      backgroundColor: "#fee",
-      color: "#c33",
-      border: "1px solid #fcc",
-      borderRadius: "8px",
-      fontSize: "14px"
-    }, children: error }),
-    success && /* @__PURE__ */ jsx("div", { style: {
-      padding: "12px 16px",
-      marginBottom: "20px",
-      backgroundColor: "#efe",
-      color: "#3c3",
-      border: "1px solid #cfc",
-      borderRadius: "8px",
-      fontSize: "14px"
-    }, children: success }),
-    !needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
-        display: "block",
-        marginBottom: "8px",
-        fontWeight: 500,
-        color: "#374151",
-        fontSize: "14px"
-      }, children: "Email" }),
-      /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
-        display: "block",
-        marginBottom: "8px",
-        fontWeight: 500,
-        color: "#374151",
-        fontSize: "14px"
-      }, children: "Password" }),
-      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "otp", style: {
-        display: "block",
-        marginBottom: "8px",
-        fontWeight: 500,
-        color: "#374151",
-        fontSize: "14px"
-      }, children: "One-Time Password" }),
-      /* @__PURE__ */ 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__ */ jsx(
-      "button",
-      {
-        type: "submit",
-        disabled: isLoading,
-        style: {
-          width: "100%",
-          padding: "14px",
-          backgroundColor: "#007bff",
-          color: "white",
-          border: "none",
-          borderRadius: "8px",
-          fontSize: "16px",
+  return /* @__PURE__ */ 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__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ 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__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ 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__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Email" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "phoneNumber", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Phone Number" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Password" }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "otp", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "One-Time Password" }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { textAlign: "center", marginTop: "16px" }, children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ 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 } = useAuth2();
+  const colors = useThemeColors();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
@@ -2200,9 +2711,9 @@ var SignUp = ({ redirectUrl, appearance }) => {
       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++;
@@ -2215,12 +2726,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);
@@ -2237,7 +2748,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 {
@@ -2249,20 +2765,20 @@ var SignUp = ({ redirectUrl, appearance }) => {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { style: {
+  return /* @__PURE__ */ 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__ */ jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsx("h2", { style: {
       textAlign: "center",
       marginBottom: "24px",
-      color: "#1f2937",
+      color: colors.textPrimary,
       fontSize: "24px",
       fontWeight: 600,
       ...appearance?.elements?.headerTitle
@@ -2270,18 +2786,18 @@ var SignUp = ({ redirectUrl, appearance }) => {
     error && /* @__PURE__ */ 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__ */ 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 }),
@@ -2290,7 +2806,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Full name" }),
       /* @__PURE__ */ jsx(
@@ -2300,15 +2816,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"
@@ -2320,7 +2849,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Email" }),
       /* @__PURE__ */ jsx(
@@ -2330,27 +2859,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__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "phoneNumber", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: colors.textSecondary,
+        fontSize: "14px"
+      }, children: "Phone Number (Optional)" }),
+      /* @__PURE__ */ jsx(
+        PhoneInput,
+        {
+          id: "phoneNumber",
+          value: phoneNumber,
+          onChange: setPhoneNumber,
+          disabled: isLoading,
+          placeholder: "1234567890",
+          style: appearance?.elements?.formFieldInput
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Password" }),
       /* @__PURE__ */ jsx(
@@ -2360,16 +2922,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"
@@ -2387,7 +2962,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
             background: "none",
             border: "none",
             cursor: "pointer",
-            color: "#666",
+            color: colors.textTertiary,
             fontSize: "14px"
           },
           children: showPassword ? "Hide" : "Show"
@@ -2396,7 +2971,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
       password && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
         /* @__PURE__ */ jsx("div", { style: {
           height: "4px",
-          backgroundColor: "#eee",
+          backgroundColor: colors.borderSecondary,
           borderRadius: "2px",
           overflow: "hidden"
         }, children: /* @__PURE__ */ jsx("div", { style: {
@@ -2421,7 +2996,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
         display: "block",
         marginBottom: "8px",
         fontWeight: 500,
-        color: "#374151",
+        color: colors.textSecondary,
         fontSize: "14px"
       }, children: "Confirm password" }),
       /* @__PURE__ */ jsx(
@@ -2431,15 +3006,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"
@@ -2451,16 +3039,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
         },
@@ -2484,6 +3081,7 @@ var SignOut = ({ redirectUrl }) => {
 };
 var UserButton = ({ showName = false, appearance }) => {
   const { user, signOut } = useAuth2();
+  const colors = useThemeColors();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   useEffect(() => {
@@ -2506,7 +3104,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__ */ jsxs("div", { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs(ThemeWrapper, { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2524,7 +3122,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";
@@ -2534,15 +3132,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__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#333" }, children: user.name })
+          showName && /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: colors.textPrimary }, children: user.name })
         ]
       }
     ),
@@ -2552,16 +3150,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__ */ jsx("div", { style: {
         padding: "16px",
-        borderBottom: "1px solid #eee"
+        borderBottom: `1px solid ${colors.borderPrimary}`
       }, children: /* @__PURE__ */ jsxs("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -2571,8 +3169,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",
@@ -2583,14 +3181,14 @@ var UserButton = ({ showName = false, appearance }) => {
           /* @__PURE__ */ jsx("div", { style: {
             fontSize: "14px",
             fontWeight: 600,
-            color: "#333",
+            color: colors.textPrimary,
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
           }, children: user.name }),
           /* @__PURE__ */ jsx("div", { style: {
             fontSize: "12px",
-            color: "#666",
+            color: colors.textTertiary,
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
@@ -2610,12 +3208,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";
@@ -3468,43 +4066,41 @@ var UserProfile = ({
   showEmailChange = true,
   showPasswordChange = true
 }) => {
-  const { user, updateProfile, updateAvatar, requestEmailChange } = useAuth2();
+  const { user, updateProfile, requestEmailChange } = useAuth2();
+  const colors = useThemeColors();
   const [name, setName] = useState(user?.name || "");
-  const [avatar, setAvatar] = useState("");
+  const [avatar, setAvatar] = useState(user?.avatar || "");
+  const [phoneNumber, setPhoneNumber] = useState(user?.phoneNumber || "");
   const [newEmail, setNewEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
-  const handleUpdateName = async (e) => {
+  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");
@@ -3533,173 +4129,220 @@ var UserProfile = ({
   };
   if (!user)
     return null;
-  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" }, children: [
-    /* @__PURE__ */ jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600 }, children: "Profile Settings" }),
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "700px", margin: "0 auto", padding: "20px" }, children: [
+    /* @__PURE__ */ jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600, color: colors.textPrimary }, children: "Profile Settings" }),
     error && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Name" }),
-      /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateName, children: [
-        /* @__PURE__ */ 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__ */ jsx("h3", { style: { marginBottom: "20px", fontSize: "18px", fontWeight: 600, color: colors.textPrimary }, children: "Profile Information" }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateProfile, children: [
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "name", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Full Name" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "phoneNumber", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Phone Number" }),
+          /* @__PURE__ */ jsx(
+            PhoneInput,
+            {
+              id: "phoneNumber",
+              value: phoneNumber,
+              onChange: setPhoneNumber,
+              disabled: isLoading,
+              placeholder: "1234567890"
+            }
+          )
+        ] }),
+        showAvatar && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "avatar", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Avatar URL" }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: {
-      padding: "20px",
-      backgroundColor: "#fff",
-      borderRadius: "8px",
-      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-      marginBottom: "20px"
-    }, children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Avatar" }),
-      /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateAvatar, children: [
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Change Email" }),
-      /* @__PURE__ */ jsxs("p", { style: { fontSize: "14px", color: "#666", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600, color: colors.textPrimary }, children: "Change Email" }),
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: "14px", color: colors.textSecondary, marginBottom: "16px" }, children: [
         "Current email: ",
         /* @__PURE__ */ jsx("strong", { children: user.email })
       ] }),
       /* @__PURE__ */ jsxs("form", { onSubmit: handleRequestEmailChange, children: [
-        /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "newEmail", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "New Email Address" }),
+          /* @__PURE__ */ 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__ */ 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"
           }
         )
       ] })
@@ -3707,6 +4350,6 @@ var UserProfile = ({
   ] });
 };
 
-export { AuthFlow, ChangePassword, EmailVerificationPage, ForgotPassword, LoginForm, OtpForm, ProtectedRoute, PublicRoute, RegisterForm, ResetPassword, SignIn, SignOut, SignUp, UserButton, UserProfile, VerifyEmail };
+export { AuthFlow, ChangePassword, EmailVerificationPage, ForgotPassword, LoginForm, OtpForm, PhoneInput, ProtectedRoute, PublicRoute, RegisterForm, ResetPassword, SignIn, SignOut, SignUp, UserButton, UserProfile, VerifyEmail };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.components.mjs.map