@insforge/react 0.4.0 → 0.4.5

package/dist/forms.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { AlertTriangle, EyeOff, Eye, Loader2, CircleCheck, Check } from 'lucide-react';
-import { createContext, useState, useEffect, useContext, useRef } from 'react';
-import { createClient } from '@insforge/sdk';
+import { createContext, useState, useEffect, useCallback, useContext, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import '@insforge/sdk';
 
 function AuthBranding() {
   return /* @__PURE__ */ jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
@@ -89,21 +90,12 @@ function AuthErrorBanner({ error }) {
   if (!error) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-    /* @__PURE__ */ jsx(
-      AlertTriangle,
-      {
-        style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#dc2626" }
-      }
-    ),
+  return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { className: "if-errorBanner-content", children: [
+    /* @__PURE__ */ jsx(AlertTriangle, { className: "if-errorBanner-icon" }),
     /* @__PURE__ */ jsx("span", { className: "if-errorBanner-text", children: error })
   ] }) });
 }
-function AuthFormField({
-  label,
-  id,
-  ...props
-}) {
+function AuthFormField({ label, id, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
     /* @__PURE__ */ jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
@@ -230,14 +222,17 @@ function AuthSubmitButton({
   children,
   isLoading = false,
   confirmed = false,
-  disabled = false
+  disabled = false,
+  type = "submit",
+  onClick
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      type: "submit",
+      type,
       className: "if-submitButton if-internal-b8p3m4",
       disabled: disabled || isLoading || confirmed,
+      onClick,
       children: [
         isLoading && /* @__PURE__ */ jsx(Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
         confirmed && /* @__PURE__ */ jsx(CircleCheck, { className: "if-submitButton-icon", size: 20 }),
@@ -246,24 +241,16 @@ function AuthSubmitButton({
     }
   );
 }
-function AuthLink({
-  text,
-  linkText,
-  href
-}) {
-  const currentSearch = typeof window !== "undefined" ? window.location.search : "";
+function AuthLink({ text, linkText, href }) {
+  const [searchParams] = useSearchParams();
+  const currentSearch = searchParams.toString();
   const finalHref = (() => {
     if (!currentSearch) {
       return href;
     }
     try {
       const url = new URL(href, window.location.origin);
-      const currentParams = new URLSearchParams(currentSearch);
-      currentParams.forEach((value, key) => {
-        if (!url.searchParams.has(key)) {
-          url.searchParams.set(key, value);
-        }
-      });
+      url.search = currentSearch;
       return url.pathname + url.search;
     } catch {
       return href;
@@ -628,28 +615,26 @@ function useInsforge() {
 }
 function AuthEmailVerificationStep({
   email,
-  description,
   method = "code",
   onVerifyCode
 }) {
-  const { baseUrl } = useInsforge();
-  const [insforge] = useState(() => createClient({ baseUrl }));
+  const { sendVerificationEmail } = useInsforge();
   const [resendDisabled, setResendDisabled] = useState(true);
   const [resendCountdown, setResendCountdown] = useState(60);
   const [isSending, setIsSending] = useState(false);
   const [verificationCode, setVerificationCode] = useState("");
   const [isVerifying, setIsVerifying] = useState(false);
-  const [verificationError, setVerificationError] = useState("");
   const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
   useEffect(() => {
     const sendInitialEmail = async () => {
       try {
-        await insforge.auth.sendVerificationEmail({ email });
-      } catch {
+        await sendVerificationEmail(email);
+      } catch (error) {
+        console.error("Failed to send verification email:", error);
       }
     };
     void sendInitialEmail();
-  }, [email, method, insforge.auth]);
+  }, [email, sendVerificationEmail]);
   useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
@@ -668,9 +653,8 @@ function AuthEmailVerificationStep({
     setResendDisabled(true);
     setResendCountdown(60);
     setIsSending(true);
-    setVerificationError("");
     try {
-      await insforge.auth.sendVerificationEmail({ email });
+      await sendVerificationEmail(email);
     } catch {
       setResendDisabled(false);
       setResendCountdown(0);
@@ -678,123 +662,157 @@ function AuthEmailVerificationStep({
       setIsSending(false);
     }
   };
-  const handleVerifyCode = async (code) => {
-    if (!onVerifyCode) {
+  const handleSubmit = async () => {
+    if (!onVerifyCode || verificationCode.length !== 6) {
       return;
     }
     setIsVerifying(true);
-    setVerificationError("");
     try {
-      await onVerifyCode(code);
-    } catch (error) {
-      setVerificationError(
-        error instanceof Error ? error.message : "Invalid verification code. Please try again."
-      );
-      setVerificationCode("");
+      await onVerifyCode(verificationCode);
     } finally {
       setIsVerifying(false);
+      setVerificationCode("");
     }
   };
-  const displayDescription = description || defaultDescription;
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx("p", { className: "if-verificationCode-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+  const displayDescription = defaultDescription;
+  const isLinkMethod = method === "link";
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
       part,
       index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
     ] }, index)) }),
-    verificationError && /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
+      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying
+        }
+      ) }),
       /* @__PURE__ */ jsx(
-        "svg",
+        AuthSubmitButton,
         {
-          style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#DC2626" },
-          fill: "none",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: "2",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" })
+          type: "button",
+          isLoading: isVerifying,
+          disabled: isVerifying || verificationCode.length !== 6,
+          onClick: () => {
+            void handleSubmit();
+          },
+          children: isVerifying ? "Verifying..." : "Verify Code"
         }
-      ),
-      /* @__PURE__ */ jsx("p", { className: "if-errorBanner-text", children: verificationError })
-    ] }) }),
-    method === "code" && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          backgroundColor: "#F5F5F5",
-          borderRadius: "0.5rem",
-          padding: "1rem 1rem 1.5rem",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            AuthVerificationCodeInput,
-            {
-              value: verificationCode,
-              onChange: setVerificationCode,
-              email,
-              disabled: isVerifying,
-              onComplete: (code) => {
-                void handleVerifyCode(code);
-              }
-            }
-          ),
-          isVerifying && /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                fontSize: "0.875rem",
-                color: "#828282",
-                textAlign: "center",
-                fontFamily: "var(--if-font-family)"
-              },
-              children: "Verifying..."
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          fontSize: "0.875rem",
-          textAlign: "center",
-          color: "#828282",
-          fontFamily: "var(--if-font-family)"
-        },
-        children: [
-          "Didn't receive the email?",
-          " ",
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                void handleResend();
-              },
-              disabled: resendDisabled || isSending,
-              style: {
-                color: "#000",
-                fontWeight: 500,
-                transition: "all 0.2s",
-                cursor: resendDisabled || isSending ? "not-allowed" : "pointer",
-                background: "none",
-                border: "none",
-                padding: 0,
-                textDecoration: resendDisabled || isSending ? "none" : "underline",
-                opacity: resendDisabled || isSending ? 0.5 : 1,
-                fontFamily: "var(--if-font-family)"
-              },
-              children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
-            }
-          )
-        ]
-      }
-    )
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "if-verificationStep-resendButton",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
+  ] });
+}
+function AuthResetPasswordVerificationStep({
+  email,
+  method,
+  onVerifyCode,
+  onResendEmail
+}) {
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSending, setIsSending] = useState(false);
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown]);
+  const handleResend = useCallback(async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSending(true);
+    try {
+      await onResendEmail();
+    } catch {
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSending(false);
+    }
+  }, [onResendEmail]);
+  const handleSubmit = async () => {
+    if (!onVerifyCode || verificationCode.length !== 6) {
+      return;
+    }
+    setIsVerifying(true);
+    try {
+      await onVerifyCode(verificationCode);
+    } finally {
+      setIsVerifying(false);
+      setVerificationCode("");
+    }
+  };
+  const isLinkMethod = method === "link";
+  const description = isLinkMethod ? `We've sent a password reset link to ${email}. Please check your email and click the link to reset your password. The link will expire in 10 minutes.` : `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`;
+  return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
+    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: description }),
+    !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
+      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        AuthSubmitButton,
+        {
+          type: "button",
+          isLoading: isVerifying,
+          disabled: isVerifying || verificationCode.length !== 6,
+          onClick: () => {
+            void handleSubmit();
+          },
+          children: isVerifying ? "Verifying..." : "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "if-verificationStep-resendButton",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
   ] });
 }
 function SignInForm({
@@ -824,8 +842,7 @@ function SignInForm({
   signUpUrl = "/sign-up",
   dividerText = "or",
   showVerificationStep = false,
-  onVerifyCode,
-  verificationDescription
+  onVerifyCode
 }) {
   return /* @__PURE__ */ jsxs(AuthContainer, { children: [
     /* @__PURE__ */ jsx(
@@ -836,14 +853,7 @@ function SignInForm({
       }
     ),
     /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    showVerificationStep ? /* @__PURE__ */ jsx(
-      AuthEmailVerificationStep,
-      {
-        email,
-        description: verificationDescription,
-        onVerifyCode
-      }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+    showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsx(
         AuthFormField,
         {
@@ -918,8 +928,7 @@ function SignUpForm({
   signInUrl = "/sign-in",
   dividerText = "or",
   showVerificationStep = false,
-  onVerifyCode,
-  verificationDescription
+  onVerifyCode
 }) {
   return /* @__PURE__ */ jsxs(AuthContainer, { children: [
     /* @__PURE__ */ jsx(
@@ -930,14 +939,7 @@ function SignUpForm({
       }
     ),
     /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    showVerificationStep ? /* @__PURE__ */ jsx(
-      AuthEmailVerificationStep,
-      {
-        email,
-        description: verificationDescription,
-        onVerifyCode
-      }
-    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+    showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsx(
         AuthFormField,
         {
@@ -991,7 +993,6 @@ function ForgotPasswordForm({
   onSubmit,
   error,
   loading = false,
-  success = false,
   title = "Forgot Password?",
   subtitle = "Enter your email address and we'll send you a code to reset your password.",
   emailLabel = "Email",
@@ -1000,53 +1001,30 @@ function ForgotPasswordForm({
   loadingButtonText = "Sending...",
   backToSignInText = "Remember your password?",
   backToSignInUrl = "/sign-in",
-  successTitle = "Check Your Email",
-  successMessage
+  showVerificationStep = false,
+  resetPasswordMethod = "code",
+  onVerifyCode,
+  onResendEmail
 }) {
-  if (success) {
-    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
-      "div",
+  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
+    /* @__PURE__ */ jsx(
+      AuthHeader,
       {
-        style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: "4rem",
-                height: "4rem",
-                borderRadius: "50%",
-                backgroundColor: "#D1FAE5",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  style: { width: "2rem", height: "2rem", color: "#059669" },
-                  fill: "none",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: "2",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
-          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
-        ]
+        title: showVerificationStep ? resetPasswordMethod === "link" ? "Check Your Email" : "Enter Reset Code" : title,
+        subtitle: showVerificationStep ? "" : subtitle
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
-    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
+    ),
     /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
+    showVerificationStep ? /* @__PURE__ */ jsx(
+      AuthResetPasswordVerificationStep,
+      {
+        email,
+        method: resetPasswordMethod,
+        onVerifyCode,
+        onResendEmail: onResendEmail || (async () => {
+        })
+      }
+    ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsx(
         AuthFormField,
         {
@@ -1062,7 +1040,7 @@ function ForgotPasswordForm({
       ),
       /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
     ] }),
-    /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
+    !showVerificationStep && /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
   ] });
 }
 function ResetPasswordForm({
@@ -1083,11 +1061,12 @@ function ResetPasswordForm({
   confirmPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
   submitButtonText = "Reset Password",
   loadingButtonText = "Resetting...",
-  backToSignInText = "",
-  backToSignInUrl = "/sign-in",
-  successTitle = "Password Reset Successful!",
-  successMessage = "Your password has been successfully reset. You can now sign in with your new password."
+  successTitle = "Password Reset Successful!"
 }) {
+  let successMessage = "Your password has been successfully reset. You can close this page and sign in with your new password.";
+  if (authConfig && authConfig.verifyEmailMethod === "code") {
+    successMessage = "Your password has been successfully reset. You can wait for redirect to sign in with your new password.";
+  }
   if (success) {
     return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
       "div",
@@ -1122,8 +1101,7 @@ function ResetPasswordForm({
             }
           ),
           /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
-          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
+          /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
         ]
       }
     ) });
@@ -1160,8 +1138,7 @@ function ResetPasswordForm({
         }
       ),
       /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
-    ] }),
-    /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
+    ] })
   ] });
 }
 function VerifyEmailStatus({
@@ -1169,111 +1146,41 @@ function VerifyEmailStatus({
   error,
   verifyingTitle = "Verifying your email...",
   successTitle = "Email Verified!",
-  successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
+  successMessage = "Your email has been verified successfully. You can close this page and sign in to your app.",
   errorTitle = "Verification Failed"
 }) {
   if (status === "verifying") {
-    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "1.5rem"
-        },
-        children: [
-          /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "if-submitButton-spinner",
-              style: {
-                borderRadius: "50%",
-                height: "3rem",
-                width: "3rem",
-                borderBottom: "2px solid black"
-              }
-            }
-          )
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-container", children: [
+      /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
+      /* @__PURE__ */ jsx("div", { className: "if-submitButton-spinner if-verifyStatus-spinner" })
+    ] }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
-      "div",
+    return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
+      /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
+      /* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: [
+        error || "The verification link is invalid or has expired.",
+        " Please try again or contact support if the problem persists. You can close this page and return to your app."
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-successContent", children: [
+    /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-successIcon", children: /* @__PURE__ */ jsx(
+      "svg",
       {
-        style: {
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch",
-          justifyContent: "center",
-          gap: "1.5rem"
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
-          /* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
-          /* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", style: { lineHeight: "1.5" }, children: [
-            error || "The verification link is invalid or has expired.",
-            " Please try again or contact support if the problem persists. You can close this page and return to your app."
-          ] })
-        ] })
+        className: "if-verifyStatus-successIconSvg",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-        justifyContent: "center",
-        gap: "1.5rem"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "4rem",
-                  height: "4rem",
-                  borderRadius: "50%",
-                  backgroundColor: "#D1FAE5",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    style: { width: "2rem", height: "2rem", color: "#059669" },
-                    fill: "none",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
-            /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
-          ]
-        }
-      )
-    }
-  ) });
+    ) }),
+    /* @__PURE__ */ jsx("h2", { className: "if-authHeader-title if-verifyStatus-textCenter", children: successTitle }),
+    /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-verifyStatus-textCenter", children: successMessage })
+  ] }) }) });
 }
 
 export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus };