@thetechfossil/auth2 1.2.1 → 1.2.2

package/dist/index.components.js

@@ -12,6 +12,7 @@ var axios__default = /*#__PURE__*/_interopDefault(axios);
 var HttpClient = class {
   constructor(baseUrl, defaultHeaders = {}) {
     this.csrfToken = null;
+    this.frontendBaseUrl = null;
     this.axiosInstance = axios__default.default.create({
       baseURL: baseUrl.replace(/\/$/, ""),
       headers: {
@@ -28,6 +29,9 @@ var HttpClient = class {
         if (this.csrfToken && ["post", "put", "delete", "patch"].includes(config.method?.toLowerCase() || "")) {
           config.headers["x-csrf-token"] = this.csrfToken;
         }
+        if (this.frontendBaseUrl) {
+          config.headers["X-Frontend-URL"] = this.frontendBaseUrl;
+        }
         return config;
       },
       (error) => Promise.reject(error)
@@ -83,6 +87,15 @@ var HttpClient = class {
   removeCsrfToken() {
     this.csrfToken = null;
   }
+  setFrontendBaseUrl(url) {
+    this.frontendBaseUrl = url;
+  }
+  getFrontendBaseUrl() {
+    return this.frontendBaseUrl;
+  }
+  removeFrontendBaseUrl() {
+    this.frontendBaseUrl = null;
+  }
   async refreshCsrfToken() {
     try {
       const response = await this.axiosInstance.get("/api/v1/auth/csrf-token");
@@ -105,6 +118,12 @@ var AuthService = class {
     };
     this.httpClient = new HttpClient(this.config.baseUrl);
     this.loadTokenFromStorage();
+    if (typeof window !== "undefined") {
+      const frontendBaseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
+      if (frontendBaseUrl) {
+        this.httpClient.setFrontendBaseUrl(frontendBaseUrl);
+      }
+    }
     if (this.config.csrfEnabled && typeof window !== "undefined") {
       this.refreshCsrfToken();
     }
@@ -221,11 +240,7 @@ var AuthService = class {
     throw new Error(response.message || "Login failed");
   }
   async register(data) {
-    const registerData = { ...data };
-    if (!registerData.frontendBaseUrl && typeof window !== "undefined") {
-      registerData.frontendBaseUrl = process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
-    }
-    const response = await this.httpClient.post("/api/v1/auth/register", registerData);
+    const response = await this.httpClient.post("/api/v1/auth/register", data);
     if (response.success && response.message === "Registration data saved. Verification email sent. Please check your inbox.") {
       return response;
     }
@@ -241,15 +256,33 @@ var AuthService = class {
     return response;
   }
   async verifyEmailToken(token) {
-    const response = await this.httpClient.get(`/api/v1/auth/verify-email?token=${token}`);
-    if (response.success && response.token) {
-      this.token = response.token;
-      this.httpClient.setAuthToken(response.token);
-      this.saveTokenToStorage(response.token);
+    try {
+      const response = await this.httpClient.get(`/api/v1/auth/verify-email?token=${token}`);
+      if (response.success && response.token) {
+        this.token = response.token;
+        this.httpClient.setAuthToken(response.token);
+        this.saveTokenToStorage(response.token);
+      }
+      return response;
+    } catch (error) {
+      if (error.response?.data) {
+        return {
+          success: false,
+          message: error.response.data.message || "Email verification failed"
+        };
+      }
+      return {
+        success: false,
+        message: error.message || "Network error occurred"
+      };
     }
-    return response;
   }
   async logout() {
+    try {
+      await this.httpClient.post("/api/v1/auth/logout", {});
+    } catch (error) {
+      console.warn("Failed to call logout endpoint:", error);
+    }
     this.token = null;
     this.httpClient.removeAuthToken();
     this.httpClient.removeCsrfToken();
@@ -286,9 +319,6 @@ var AuthService = class {
     return response.user;
   }
   async forgotPassword(email) {
-    if (typeof window !== "undefined") {
-      process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
-    }
     const response = await this.httpClient.post("/api/v1/auth/forgot-password", { email });
     return response;
   }
@@ -296,6 +326,142 @@ var AuthService = class {
     const response = await this.httpClient.post("/api/v1/auth/reset-password", { token, password });
     return response;
   }
+  async changePassword(oldPassword, newPassword) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/change-password", {
+      oldPassword,
+      newPassword
+    });
+    return response;
+  }
+  async updateAvatar(avatar) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/update/avatar", { avatar });
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+    }
+    return response;
+  }
+  async requestEmailChange(newEmail) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/request-email-change", {
+      newEmail
+    });
+    return response;
+  }
+  async verifyEmailChange(token) {
+    const response = await this.httpClient.get(`/api/v1/user/verify-email-change?token=${token}`);
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+    }
+    return response;
+  }
+  // 2FA / MFA Methods
+  async generate2FA() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(
+      "/api/v1/mfa/generate",
+      {}
+    );
+    return response;
+  }
+  async enable2FA(token) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/mfa/enable", { token });
+    return response;
+  }
+  async disable2FA(token) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/mfa/disable", { token });
+    return response;
+  }
+  async validate2FA(token) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/mfa/validate", { token });
+    return response;
+  }
+  // Session Management Methods
+  async getSessions() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.get("/api/v1/session");
+    return response;
+  }
+  async revokeSession(sessionId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.delete(`/api/v1/session/${sessionId}`);
+    return response;
+  }
+  async revokeAllSessions() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.delete("/api/v1/session/revoke/all");
+    this.token = null;
+    this.httpClient.removeAuthToken();
+    this.removeTokenFromStorage();
+    return response;
+  }
+  // Admin Methods
+  async getAuditLogs(filters) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.get(
+      "/api/v1/admin/audit-logs",
+      filters
+    );
+    return response;
+  }
+  async adminVerifyUser(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/verify-user/${userId}`, {});
+    return response;
+  }
+  async adminForcePasswordReset(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/force-password-reset/${userId}`, {});
+    return response;
+  }
+  async adminSuspendUser(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/suspend-user/${userId}`, {});
+    return response;
+  }
+  async adminActivateUser(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/activate-user/${userId}`, {});
+    return response;
+  }
 };
 
 // src/react/use-auth.ts
@@ -321,11 +487,7 @@ var useAuth = (config) => {
   const register = react.useCallback(async (data) => {
     setLoading(true);
     try {
-      const registerData = { ...data };
-      if (!registerData.frontendBaseUrl && typeof window !== "undefined") {
-        registerData.frontendBaseUrl = process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
-      }
-      const response = await authService.register(registerData);
+      const response = await authService.register(data);
       return response;
     } finally {
       setLoading(false);
@@ -1747,11 +1909,1825 @@ var EmailVerificationPage = ({
     ] })
   ] }) });
 };
+var AuthContext = react.createContext(void 0);
+var useAuth2 = () => {
+  const context = react.useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
+var SignIn = ({ redirectUrl, appearance }) => {
+  const { signIn, isSignedIn, loading: authLoading } = useAuth2();
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [otp, setOtp] = react.useState("");
+  const [usePassword, setUsePassword] = react.useState(false);
+  const [showPassword, setShowPassword] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [needsOtp, setNeedsOtp] = react.useState(false);
+  const [success, setSuccess] = react.useState(null);
+  react.useEffect(() => {
+    if (isSignedIn && redirectUrl) {
+      const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
+      const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+      window.location.href = `${baseUrl}${redirect}`;
+    }
+  }, [isSignedIn, redirectUrl]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      if (needsOtp) {
+        const response = await signIn({ email, otp });
+        if (response.success) {
+          setSuccess("Login successful!");
+        } else {
+          setError(response.message || "OTP verification failed");
+        }
+      } else if (usePassword) {
+        const response = await signIn({ email, 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.") {
+          setNeedsOtp(true);
+          setSuccess("OTP sent to your email. Please check your inbox.");
+        } else {
+          setError(response.message || "Failed to send OTP");
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const toggleAuthMethod = () => {
+    setUsePassword(!usePassword);
+    setNeedsOtp(false);
+    setError(null);
+    setSuccess(null);
+    setOtp("");
+  };
+  if (authLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: needsOtp ? "Enter OTP" : usePassword ? "Sign in with password" : "Sign in" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    !needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    usePassword && !needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "password",
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your password"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      )
+    ] }),
+    needsOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "otp", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "One-Time Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "otp",
+          type: "text",
+          value: otp,
+          onChange: (e) => setOtp(e.target.value),
+          required: true,
+          disabled: isLoading,
+          maxLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            letterSpacing: "0.5em",
+            textAlign: "center",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "000000"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Please wait..." : needsOtp ? "Verify OTP" : usePassword ? "Sign in" : "Continue with email"
+      }
+    ),
+    !needsOtp && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleAuthMethod,
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: usePassword ? "Use email code instead" : "Use password instead"
+      }
+    ) }),
+    needsOtp && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setNeedsOtp(false);
+          setOtp("");
+          setError(null);
+          setSuccess(null);
+        },
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: "Back to sign in"
+      }
+    ) })
+  ] }) });
+};
+var SignUp = ({ redirectUrl, appearance }) => {
+  const { signUp, isSignedIn } = useAuth2();
+  const [name, setName] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [showPassword, setShowPassword] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [success, setSuccess] = react.useState(null);
+  react.useEffect(() => {
+    if (isSignedIn && redirectUrl) {
+      const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_REGISTER || process.env.REACT_APP_AUTH_REDIRECT_AFTER_REGISTER || "/dashboard";
+      const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+      window.location.href = `${baseUrl}${redirect}`;
+    }
+  }, [isSignedIn, redirectUrl]);
+  const getPasswordStrength = (pwd) => {
+    if (!pwd)
+      return { strength: "weak", color: "#ddd" };
+    let score = 0;
+    if (pwd.length >= 6)
+      score++;
+    if (pwd.length >= 8)
+      score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
+      score++;
+    if (/\d/.test(pwd))
+      score++;
+    if (/[^a-zA-Z\d]/.test(pwd))
+      score++;
+    if (score <= 2)
+      return { strength: "weak", color: "#f44" };
+    if (score <= 3)
+      return { strength: "medium", color: "#fa4" };
+    return { strength: "strong", color: "#4f4" };
+  };
+  const passwordStrength = getPasswordStrength(password);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await signUp({ name, email, password });
+      if (response.success) {
+        setSuccess("Registration successful! Please check your email to verify your account.");
+      } else {
+        setError(response.message || "Registration failed");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Create your account" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Full name" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "name",
+          type: "text",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your full name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "password",
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          minLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Create a password"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      ),
+      password && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: "4px",
+          backgroundColor: "#eee",
+          borderRadius: "2px",
+          overflow: "hidden"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: "100%",
+          width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
+          backgroundColor: passwordStrength.color,
+          transition: "all 0.3s ease"
+        } }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+          fontSize: "12px",
+          color: passwordStrength.color,
+          marginTop: "4px",
+          textTransform: "capitalize"
+        }, children: [
+          passwordStrength.strength,
+          " password"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Confirm password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: showPassword ? "text" : "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(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: "Confirm your password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Creating account..." : "Sign up"
+      }
+    )
+  ] }) });
+};
+var SignOut = ({ redirectUrl }) => {
+  const { signOut } = useAuth2();
+  react.useEffect(() => {
+    const performSignOut = async () => {
+      await signOut();
+      const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
+      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}`;
+    };
+    performSignOut();
+  }, [signOut, redirectUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Signing out..." }) });
+};
+var UserButton = ({ showName = false, appearance }) => {
+  const { user, signOut } = useAuth2();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const dropdownRef = react.useRef(null);
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  if (!user)
+    return null;
+  const getInitials = (name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+  const handleSignOut = async () => {
+    await signOut();
+    const redirect = process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
+    const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+    window.location.href = `${baseUrl}${redirect}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: "6px",
+          backgroundColor: "transparent",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          transition: "background-color 0.2s",
+          ...appearance?.elements?.userButtonTrigger
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f5f5f5";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            width: "36px",
+            height: "36px",
+            borderRadius: "50%",
+            backgroundColor: "#007bff",
+            color: "white",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "14px",
+            fontWeight: 600
+          }, children: getInitials(user.name) }),
+          showName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#333" }, children: user.name })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      marginTop: "8px",
+      width: "240px",
+      backgroundColor: "white",
+      borderRadius: "12px",
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+      border: "1px solid #eaeaea",
+      zIndex: 1e3,
+      ...appearance?.elements?.userButtonPopoverCard
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        padding: "16px",
+        borderBottom: "1px solid #eee"
+      }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          width: "48px",
+          height: "48px",
+          borderRadius: "50%",
+          backgroundColor: "#007bff",
+          color: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "18px",
+          fontWeight: 600
+        }, children: getInitials(user.name) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            fontSize: "14px",
+            fontWeight: 600,
+            color: "#333",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: user.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            fontSize: "12px",
+            color: "#666",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: user.email })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleSignOut,
+          style: {
+            width: "100%",
+            padding: "10px 16px",
+            backgroundColor: "transparent",
+            border: "none",
+            borderRadius: "8px",
+            textAlign: "left",
+            cursor: "pointer",
+            fontSize: "14px",
+            color: "#333",
+            fontWeight: 500,
+            transition: "background-color 0.2s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#f5f5f5";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          children: "Sign out"
+        }
+      ) })
+    ] })
+  ] });
+};
+var ProtectedRoute = ({
+  children,
+  fallback,
+  redirectTo
+}) => {
+  const { isSignedIn, isLoaded } = useAuth2();
+  react.useEffect(() => {
+    if (isLoaded && !isSignedIn) {
+      const loginPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
+      const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+      window.location.href = `${baseUrl}${loginPath}`;
+    }
+  }, [isSignedIn, isLoaded, redirectTo]);
+  if (!isLoaded) {
+    return fallback || /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "100vh"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) });
+  }
+  if (!isSignedIn) {
+    return fallback || null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var PublicRoute = ({
+  children,
+  redirectTo
+}) => {
+  const { isSignedIn, isLoaded } = useAuth2();
+  react.useEffect(() => {
+    if (isLoaded && isSignedIn) {
+      const dashboardPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
+      const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+      window.location.href = `${baseUrl}${dashboardPath}`;
+    }
+  }, [isSignedIn, isLoaded, redirectTo]);
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "100vh"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) });
+  }
+  if (isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var VerifyEmail = ({ token, onSuccess, onError }) => {
+  const { verifyEmailToken } = useAuth2();
+  const [status, setStatus] = react.useState("loading");
+  const [message, setMessage] = react.useState("");
+  react.useEffect(() => {
+    const verify = async () => {
+      const verifyToken = token || (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") : null);
+      if (!verifyToken) {
+        setStatus("error");
+        setMessage("No verification token provided");
+        onError?.("No verification token provided");
+        return;
+      }
+      try {
+        const response = await verifyEmailToken(verifyToken);
+        if (response.success) {
+          setStatus("success");
+          setMessage("Email verified successfully! Redirecting...");
+          onSuccess?.();
+          setTimeout(() => {
+            const redirect = process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_VERIFY || process.env.REACT_APP_AUTH_REDIRECT_AFTER_VERIFY || "/dashboard";
+            const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+            window.location.href = `${baseUrl}${redirect}`;
+          }, 2e3);
+        } else {
+          setStatus("error");
+          setMessage(response.message || "Verification failed");
+          onError?.(response.message || "Verification failed");
+        }
+      } catch (err) {
+        setStatus("error");
+        const errorMsg = err instanceof Error ? err.message : "An error occurred";
+        setMessage(errorMsg);
+        onError?.(errorMsg);
+      }
+    };
+    verify();
+  }, [token, verifyEmailToken, onSuccess, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    maxWidth: "400px",
+    margin: "40px auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    textAlign: "center"
+  }, children: [
+    status === "loading" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        width: "48px",
+        height: "48px",
+        margin: "0 auto 20px",
+        border: "4px solid #f3f3f3",
+        borderTop: "4px solid #007bff",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite"
+      } }),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          ` }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Verifying your email..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#666" }, children: "Please wait while we verify your email address." })
+    ] }),
+    status === "success" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        width: "64px",
+        height: "64px",
+        margin: "0 auto 20px",
+        backgroundColor: "#4caf50",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Email Verified!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#666" }, children: message })
+    ] }),
+    status === "error" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        width: "64px",
+        height: "64px",
+        margin: "0 auto 20px",
+        backgroundColor: "#f44336",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Verification Failed" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: message }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
+            const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+            window.location.href = `${baseUrl}${loginPath}`;
+          },
+          style: {
+            padding: "10px 20px",
+            backgroundColor: "#007bff",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "14px",
+            fontWeight: 600,
+            cursor: "pointer"
+          },
+          children: "Go to Login"
+        }
+      )
+    ] })
+  ] });
+};
+var ForgotPassword = ({ appearance }) => {
+  const { forgotPassword } = useAuth2();
+  const [email, setEmail] = react.useState("");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [success, setSuccess] = react.useState(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await forgotPassword(email);
+      if (response.success) {
+        setSuccess("Password reset link sent! Please check your email.");
+        setEmail("");
+      } else {
+        setError(response.message || "Failed to send reset link");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "12px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Forgot password?" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#666",
+      fontSize: "14px"
+    }, children: "Enter your email address and we'll send you a link to reset your password." }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          marginBottom: "16px",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Sending..." : "Send reset link"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
+          const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+          window.location.href = `${baseUrl}${loginPath}`;
+        },
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: "Back to sign in"
+      }
+    ) })
+  ] }) });
+};
+var ResetPassword = ({ token, appearance }) => {
+  const { resetPassword } = useAuth2();
+  const [resetToken, setResetToken] = react.useState(token || "");
+  const [password, setPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [showPassword, setShowPassword] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [success, setSuccess] = react.useState(false);
+  react.useEffect(() => {
+    if (!resetToken && typeof window !== "undefined") {
+      const urlToken = new URLSearchParams(window.location.search).get("token");
+      if (urlToken) {
+        setResetToken(urlToken);
+      }
+    }
+  }, [resetToken]);
+  const getPasswordStrength = (pwd) => {
+    if (!pwd)
+      return { strength: "weak", color: "#ddd" };
+    let score = 0;
+    if (pwd.length >= 6)
+      score++;
+    if (pwd.length >= 8)
+      score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
+      score++;
+    if (/\d/.test(pwd))
+      score++;
+    if (/[^a-zA-Z\d]/.test(pwd))
+      score++;
+    if (score <= 2)
+      return { strength: "weak", color: "#f44" };
+    if (score <= 3)
+      return { strength: "medium", color: "#fa4" };
+    return { strength: "strong", color: "#4f4" };
+  };
+  const passwordStrength = getPasswordStrength(password);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      setIsLoading(false);
+      return;
+    }
+    if (!resetToken) {
+      setError("Invalid reset token");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await resetPassword(resetToken, password);
+      if (response.success) {
+        setSuccess(true);
+        setTimeout(() => {
+          const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
+          const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+          window.location.href = `${baseUrl}${loginPath}`;
+        }, 2e3);
+      } else {
+        setError(response.message || "Failed to reset password");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (success) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      maxWidth: "400px",
+      margin: "40px auto",
+      padding: "30px",
+      borderRadius: "12px",
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+      backgroundColor: "#ffffff",
+      border: "1px solid #eaeaea",
+      textAlign: "center"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        width: "64px",
+        height: "64px",
+        margin: "0 auto 20px",
+        backgroundColor: "#4caf50",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Password Reset Successful!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "#666" }, children: "Your password has been reset. Redirecting to login..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "12px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Reset your password" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#666",
+      fontSize: "14px"
+    }, children: "Enter your new password below." }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "New password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "password",
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          minLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter new password"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      ),
+      password && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: "4px",
+          backgroundColor: "#eee",
+          borderRadius: "2px",
+          overflow: "hidden"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: "100%",
+          width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
+          backgroundColor: passwordStrength.color,
+          transition: "all 0.3s ease"
+        } }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+          fontSize: "12px",
+          color: passwordStrength.color,
+          marginTop: "4px",
+          textTransform: "capitalize"
+        }, children: [
+          passwordStrength.strength,
+          " password"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Confirm password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: showPassword ? "text" : "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(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: "Confirm new password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Resetting..." : "Reset password"
+      }
+    )
+  ] }) });
+};
+var ChangePassword = ({ onSuccess, appearance }) => {
+  const { changePassword } = useAuth2();
+  const [oldPassword, setOldPassword] = react.useState("");
+  const [newPassword, setNewPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [showPasswords, setShowPasswords] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [success, setSuccess] = react.useState(false);
+  const getPasswordStrength = (pwd) => {
+    if (!pwd)
+      return { strength: "weak", color: "#ddd" };
+    let score = 0;
+    if (pwd.length >= 6)
+      score++;
+    if (pwd.length >= 8)
+      score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
+      score++;
+    if (/\d/.test(pwd))
+      score++;
+    if (/[^a-zA-Z\d]/.test(pwd))
+      score++;
+    if (score <= 2)
+      return { strength: "weak", color: "#f44" };
+    if (score <= 3)
+      return { strength: "medium", color: "#fa4" };
+    return { strength: "strong", color: "#4f4" };
+  };
+  const passwordStrength = getPasswordStrength(newPassword);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(false);
+    if (newPassword !== confirmPassword) {
+      setError("New passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+    if (newPassword.length < 6) {
+      setError("New password must be at least 6 characters");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await changePassword(oldPassword, newPassword);
+      if (response.success) {
+        setSuccess(true);
+        setOldPassword("");
+        setNewPassword("");
+        setConfirmPassword("");
+        onSuccess?.();
+      } else {
+        setError(response.message || "Failed to change password");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Change Password" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: "Password changed successfully!" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "oldPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Current password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "oldPassword",
+          type: showPasswords ? "text" : "password",
+          value: oldPassword,
+          onChange: (e) => setOldPassword(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 current password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "newPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "New password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "newPassword",
+          type: showPasswords ? "text" : "password",
+          value: newPassword,
+          onChange: (e) => setNewPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          minLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter new password"
+        }
+      ),
+      newPassword && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: "4px",
+          backgroundColor: "#eee",
+          borderRadius: "2px",
+          overflow: "hidden"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: "100%",
+          width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
+          backgroundColor: passwordStrength.color,
+          transition: "all 0.3s ease"
+        } }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+          fontSize: "12px",
+          color: passwordStrength.color,
+          marginTop: "4px",
+          textTransform: "capitalize"
+        }, children: [
+          passwordStrength.strength,
+          " password"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Confirm new password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: showPasswords ? "text" : "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(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: "Confirm new password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: showPasswords,
+          onChange: (e) => setShowPasswords(e.target.checked),
+          style: { marginRight: "8px" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", color: "#666" }, children: "Show passwords" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Changing password..." : "Change password"
+      }
+    )
+  ] }) });
+};
+var UserProfile = ({
+  showAvatar = true,
+  showEmailChange = true,
+  showPasswordChange = true
+}) => {
+  const { user, updateProfile, updateAvatar, requestEmailChange } = useAuth2();
+  const [name, setName] = react.useState(user?.name || "");
+  const [avatar, setAvatar] = react.useState("");
+  const [newEmail, setNewEmail] = react.useState("");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [success, setSuccess] = react.useState(null);
+  const handleUpdateName = async (e) => {
+    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");
+      }
+    } 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 (response.success) {
+        setSuccess("Avatar updated successfully!");
+        setAvatar("");
+      } else {
+        setError(response.message || "Failed to update avatar");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleRequestEmailChange = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await requestEmailChange(newEmail);
+      if (response.success) {
+        setSuccess("Verification email sent! Please check your inbox.");
+        setNewEmail("");
+      } else {
+        setError(response.message || "Failed to request email change");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (!user)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600 }, children: "Profile Settings" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "20px",
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Name" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleUpdateName, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            required: true,
+            disabled: isLoading,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              fontSize: "16px",
+              boxSizing: "border-box",
+              marginBottom: "12px"
+            },
+            placeholder: "Your name"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            style: {
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Update Name"
+          }
+        )
+      ] })
+    ] }),
+    showAvatar && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "20px",
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Avatar" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleUpdateAvatar, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "url",
+            value: avatar,
+            onChange: (e) => setAvatar(e.target.value),
+            required: true,
+            disabled: isLoading,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              fontSize: "16px",
+              boxSizing: "border-box",
+              marginBottom: "12px"
+            },
+            placeholder: "Avatar URL"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            style: {
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Update Avatar"
+          }
+        )
+      ] })
+    ] }),
+    showEmailChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "20px",
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Change Email" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "14px", color: "#666", marginBottom: "12px" }, children: [
+        "Current email: ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: user.email })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleRequestEmailChange, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "email",
+            value: newEmail,
+            onChange: (e) => setNewEmail(e.target.value),
+            required: true,
+            disabled: isLoading,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              fontSize: "16px",
+              boxSizing: "border-box",
+              marginBottom: "12px"
+            },
+            placeholder: "New email address"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            style: {
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Request Email Change"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
 
 exports.AuthFlow = AuthFlow;
+exports.ChangePassword = ChangePassword;
 exports.EmailVerificationPage = EmailVerificationPage;
+exports.ForgotPassword = ForgotPassword;
 exports.LoginForm = LoginForm;
 exports.OtpForm = OtpForm;
+exports.ProtectedRoute = ProtectedRoute;
+exports.PublicRoute = PublicRoute;
 exports.RegisterForm = RegisterForm;
+exports.ResetPassword = ResetPassword;
+exports.SignIn = SignIn;
+exports.SignOut = SignOut;
+exports.SignUp = SignUp;
+exports.UserButton = UserButton;
+exports.UserProfile = UserProfile;
+exports.VerifyEmail = VerifyEmail;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.components.js.map