@lalternative/auth 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   isInvitationFailure
-} from "./chunk-73BHM4PZ.js";
+} from "./chunk-6URDBMQY.js";
 
 // src/hooks/use-session.ts
 function useSession(authClient) {
@@ -138,8 +138,38 @@ function AuthSubmit({
 // src/components/login-form.tsx
 import { useState as useState2 } from "react";
 
+// src/components/auth-alert.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function AuthAlert({ children, tone = "error" }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: tone === "error" ? "alert" : "status",
+      "aria-live": tone === "error" ? "assertive" : "polite",
+      className: children ? [
+        "rounded-xl border px-3.5 py-3 text-sm leading-snug",
+        tone === "error" ? "border-destructive/25 bg-destructive/10 text-destructive" : "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
+      ].join(" ") : void 0,
+      children
+    }
+  );
+}
+
+// src/components/auth-heading.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function AuthHeading({
+  title,
+  subtitle,
+  titleClassName = "text-2xl font-semibold tracking-tight"
+}) {
+  return /* @__PURE__ */ jsxs3("header", { className: "space-y-1.5 text-center", children: [
+    /* @__PURE__ */ jsx4("h1", { className: `leading-tight text-foreground ${titleClassName}`, children: title }),
+    subtitle && /* @__PURE__ */ jsx4("p", { className: "text-balance text-sm leading-relaxed text-muted-foreground", children: subtitle })
+  ] });
+}
+
 // src/components/social-buttons.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var LABELS = {
   google: "Continuer avec Google",
   github: "Continuer avec GitHub"
@@ -153,60 +183,67 @@ function SocialButtons({
 }) {
   if (providers.length === 0) return null;
   const copy = { ...LABELS, ...labels };
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs3("div", { "aria-hidden": "true", className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx3("span", { className: "h-px flex-1 bg-border" }),
-      /* @__PURE__ */ jsx3("span", { className: "text-[11px] uppercase tracking-[0.14em] text-muted-foreground", children: separator }),
-      /* @__PURE__ */ jsx3("span", { className: "h-px flex-1 bg-border" })
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs4("div", { "aria-hidden": "true", className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx5("span", { className: "h-px flex-1 bg-border" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[11px] uppercase tracking-[0.14em] text-muted-foreground", children: separator }),
+      /* @__PURE__ */ jsx5("span", { className: "h-px flex-1 bg-border" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "space-y-2.5", children: providers.map((provider) => /* @__PURE__ */ jsxs3(
-      "button",
+    /* @__PURE__ */ jsx5(
+      "div",
       {
-        type: "button",
-        onClick: () => onSelect(provider),
-        disabled,
-        className: [
-          "flex h-[52px] w-full items-center justify-center gap-2.5 rounded-xl sm:h-11",
-          "border border-input bg-background text-base font-medium text-foreground sm:text-sm",
-          "transition-[background-color,border-color,transform] duration-150 ease-out",
-          "hover:border-foreground/20 hover:bg-accent active:translate-y-px",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          "disabled:pointer-events-none disabled:opacity-55"
-        ].join(" "),
-        children: [
-          /* @__PURE__ */ jsx3(ProviderMark, { provider }),
-          copy[provider] ?? provider
-        ]
-      },
-      provider
-    )) })
+        className: providers.length > 1 ? "grid gap-2.5 sm:grid-cols-2" : "grid gap-2.5",
+        children: providers.map((provider) => /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(provider),
+            disabled,
+            "aria-label": copy[provider] ?? provider,
+            className: [
+              "flex h-[52px] w-full items-center justify-center gap-2.5 rounded-xl sm:h-11",
+              "border border-input bg-background text-base font-medium text-foreground sm:text-sm",
+              "transition-[background-color,border-color,transform] duration-150 ease-out",
+              "hover:border-foreground/20 hover:bg-accent active:translate-y-px",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              "disabled:pointer-events-none disabled:opacity-55"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx5(ProviderMark, { provider }),
+              /* @__PURE__ */ jsx5("span", { className: providers.length > 1 ? "sm:hidden" : "", children: copy[provider] ?? provider })
+            ]
+          },
+          provider
+        ))
+      }
+    )
   ] });
 }
 function ProviderMark({ provider }) {
   if (provider === "google") {
-    return /* @__PURE__ */ jsxs3("svg", { width: "17", height: "17", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs4("svg", { width: "17", height: "17", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx5(
         "path",
         {
           fill: "#4285F4",
           d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx5(
         "path",
         {
           fill: "#34A853",
           d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.02-3.7H.96v2.33A9 9 0 0 0 9 18Z"
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx5(
         "path",
         {
           fill: "#FBBC05",
           d: "M3.98 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.02-2.33Z"
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx5(
         "path",
         {
           fill: "#EA4335",
@@ -215,11 +252,11 @@ function ProviderMark({ provider }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsx3("svg", { width: "17", height: "17", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M8 0a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48l-.01 2.2c0 .21.15.46.55.38A8 8 0 0 0 8 0Z" }) });
+  return /* @__PURE__ */ jsx5("svg", { width: "17", height: "17", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M8 0a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48l-.01 2.2c0 .21.15.46.55.38A8 8 0 0 0 8 0Z" }) });
 }
 
 // src/components/login-form.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULTS = {
   title: "Connexion",
   subtitle: "Content de te revoir. Entre tes identifiants pour continuer.",
@@ -248,13 +285,17 @@ function LoginForm({
   socialProviders = [],
   coreTokenUrl = "/api/auth/core-token",
   labels,
+  titleClassName,
+  error: externalError,
   authClient
 }) {
   const t = { ...DEFAULTS, ...labels };
   const [email, setEmail] = useState2("");
   const [password, setPassword] = useState2("");
-  const [error, setError] = useState2();
+  const [ownError, setOwnError] = useState2();
   const [isPending, setIsPending] = useState2(false);
+  const error = ownError ?? externalError;
+  const setError = setOwnError;
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!email.trim()) {
@@ -300,21 +341,18 @@ function LoginForm({
       );
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsxs4("header", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx4("h1", { className: "text-[26px] font-semibold leading-tight tracking-[-0.02em] text-foreground sm:text-2xl", children: t.title }),
-      /* @__PURE__ */ jsx4("p", { className: "text-balance text-sm leading-relaxed text-muted-foreground", children: t.subtitle })
-    ] }),
-    error && /* @__PURE__ */ jsx4(
-      "div",
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsx6(
+      AuthHeading,
       {
-        role: "alert",
-        className: "rounded-xl border border-destructive/25 bg-destructive/10 px-3.5 py-3 text-sm leading-snug text-destructive",
-        children: error
+        title: t.title,
+        subtitle: t.subtitle,
+        titleClassName
       }
     ),
-    /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx6(
         AuthField,
         {
           label: t.emailPlaceholder,
@@ -330,7 +368,7 @@ function LoginForm({
           invalid: !!error
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         AuthField,
         {
           label: t.passwordPlaceholder,
@@ -341,7 +379,7 @@ function LoginForm({
           disabled: isPending,
           autoComplete: "current-password",
           invalid: !!error,
-          hint: /* @__PURE__ */ jsx4(
+          hint: /* @__PURE__ */ jsx6(
             "a",
             {
               href: forgotPasswordUrl,
@@ -351,7 +389,7 @@ function LoginForm({
           )
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         AuthSubmit,
         {
           pending: isPending,
@@ -361,7 +399,7 @@ function LoginForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       SocialButtons,
       {
         providers: socialProviders,
@@ -369,10 +407,10 @@ function LoginForm({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ jsxs4("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs5("p", { className: "text-center text-sm text-muted-foreground", children: [
       t.noAccount,
       " ",
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "a",
         {
           href: registerUrl,
@@ -386,7 +424,7 @@ function LoginForm({
 
 // src/components/register-form.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var MIN_PASSWORD_LENGTH = 8;
 var DEFAULTS2 = {
   title: "Cr\xE9er un compte",
@@ -411,14 +449,18 @@ function RegisterForm({
   socialCallbackUrl = "/",
   socialProviders = [],
   labels,
+  titleClassName,
+  error: externalError,
   authClient
 }) {
   const t = { ...DEFAULTS2, ...labels };
   const [name, setName] = useState3("");
   const [email, setEmail] = useState3("");
   const [password, setPassword] = useState3("");
-  const [error, setError] = useState3();
+  const [ownError, setOwnError] = useState3();
   const [isPending, setIsPending] = useState3(false);
+  const error = ownError ?? externalError;
+  const setError = setOwnError;
   const tooShort = password.length > 0 && password.length < MIN_PASSWORD_LENGTH;
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -464,21 +506,18 @@ function RegisterForm({
       setError(err instanceof Error ? err.message : t.signUpFailed);
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsxs5("header", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx5("h1", { className: "text-[26px] font-semibold leading-tight tracking-[-0.02em] text-foreground sm:text-2xl", children: t.title }),
-      /* @__PURE__ */ jsx5("p", { className: "text-balance text-sm leading-relaxed text-muted-foreground", children: t.subtitle })
-    ] }),
-    error && /* @__PURE__ */ jsx5(
-      "div",
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsx7(
+      AuthHeading,
       {
-        role: "alert",
-        className: "rounded-xl border border-destructive/25 bg-destructive/10 px-3.5 py-3 text-sm leading-snug text-destructive",
-        children: error
+        title: t.title,
+        subtitle: t.subtitle,
+        titleClassName
       }
     ),
-    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
-      /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx7(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx7(
         AuthField,
         {
           label: t.namePlaceholder,
@@ -490,7 +529,7 @@ function RegisterForm({
           autoComplete: "name"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         AuthField,
         {
           label: t.emailPlaceholder,
@@ -505,7 +544,7 @@ function RegisterForm({
           spellCheck: false
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         AuthField,
         {
           label: t.passwordPlaceholder,
@@ -519,10 +558,10 @@ function RegisterForm({
           invalid: tooShort
         }
       ),
-      /* @__PURE__ */ jsx5(AuthSubmit, { pending: isPending, pendingLabel: t.submitPending, children: t.submit }),
-      legal && /* @__PURE__ */ jsx5("p", { className: "text-center text-xs leading-relaxed text-muted-foreground", children: legal })
+      /* @__PURE__ */ jsx7(AuthSubmit, { pending: isPending, pendingLabel: t.submitPending, children: t.submit }),
+      legal && /* @__PURE__ */ jsx7("p", { className: "text-center text-xs leading-relaxed text-muted-foreground", children: legal })
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx7(
       SocialButtons,
       {
         providers: socialProviders,
@@ -530,10 +569,10 @@ function RegisterForm({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ jsxs5("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs6("p", { className: "text-center text-sm text-muted-foreground", children: [
       t.haveAccount,
       " ",
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "a",
         {
           href: loginUrl,
@@ -547,12 +586,83 @@ function RegisterForm({
 
 // src/components/verify-email-form.tsx
 import { useState as useState4 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/components/auth-otp-field.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var OTP_LENGTH = 6;
+function AuthOtpField({
+  label,
+  value,
+  onChange,
+  disabled = false,
+  invalid = false,
+  id
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx8(
+      "label",
+      {
+        htmlFor: id,
+        className: "block text-sm font-medium leading-none text-foreground",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "input",
+      {
+        id,
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        maxLength: OTP_LENGTH,
+        value,
+        onChange: (e) => onChange(e.target.value.replace(/\D/g, "")),
+        required: true,
+        disabled,
+        autoComplete: "one-time-code",
+        "aria-invalid": invalid || void 0,
+        className: [
+          "h-[52px] w-full rounded-xl border bg-background px-4 sm:h-11",
+          "text-center font-mono text-lg tracking-[0.4em]",
+          "text-foreground",
+          "transition-[border-color,box-shadow] duration-150 ease-out",
+          "focus-visible:outline-none focus-visible:ring-[3px]",
+          invalid ? "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20" : "border-input focus-visible:border-ring focus-visible:ring-ring/15",
+          "disabled:cursor-not-allowed disabled:opacity-60"
+        ].join(" ")
+      }
+    )
+  ] });
+}
+
+// src/components/verify-email-form.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULTS3 = {
+  title: "V\xE9rifie ton adresse",
+  subtitle: "Entre le code \xE0 6 chiffres envoy\xE9 \xE0",
+  subtitleNoEmail: "Entre le code \xE0 6 chiffres re\xE7u par e-mail.",
+  codePlaceholder: "Code de v\xE9rification",
+  submit: "V\xE9rifier",
+  submitPending: "V\xE9rification\u2026",
+  resend: "Renvoyer le code",
+  resendPending: "Envoi\u2026",
+  resent: "Un nouveau code vient de t'\xEAtre envoy\xE9.",
+  alreadyVerified: "Adresse d\xE9j\xE0 v\xE9rifi\xE9e ?",
+  login: "Se connecter",
+  codeRequired: "Entre le code \xE0 6 chiffres",
+  invalidCode: "Code invalide. R\xE9essaie.",
+  resendFailed: "L'envoi du code a \xE9chou\xE9",
+  missingEmail: "Adresse e-mail introuvable. Recommence l'inscription."
+};
 function VerifyEmailForm({
   email,
   onSuccess,
+  loginUrl = "/login",
+  labels,
+  titleClassName,
   authClient
 }) {
+  const t = { ...DEFAULTS3, ...labels };
   const [otp, setOtp] = useState4("");
   const [isVerifying, setIsVerifying] = useState4(false);
   const [isResending, setIsResending] = useState4(false);
@@ -560,29 +670,29 @@ function VerifyEmailForm({
   const [error, setError] = useState4();
   const handleVerify = async (e) => {
     e.preventDefault();
-    if (!otp.trim() || otp.length < 6) {
-      setError("Please enter the 6-digit code");
+    if (otp.length < OTP_LENGTH) {
+      setError(t.codeRequired);
       return;
     }
     setError(void 0);
+    setResendMessage(void 0);
     setIsVerifying(true);
     try {
       const res = await authClient.emailOtp.verifyEmail({ email, otp });
-      console.log("[verify-email] response:", JSON.stringify(res?.data), "error:", JSON.stringify(res?.error));
       if (res?.error) {
-        setError(res.error.message ?? "Invalid code. Please try again.");
+        setError(res.error.message ?? t.invalidCode);
         return;
       }
       onSuccess?.();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Invalid code. Please try again.");
+      setError(err instanceof Error ? err.message : t.invalidCode);
     } finally {
       setIsVerifying(false);
     }
   };
   const handleResend = async () => {
     if (!email) {
-      setError("Email address is not available. Please register again.");
+      setError(t.missingEmail);
       return;
     }
     setError(void 0);
@@ -593,150 +703,167 @@ function VerifyEmailForm({
         email,
         type: "email-verification"
       });
-      setResendMessage("A new code has been sent to your inbox.");
+      setResendMessage(t.resent);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to resend code.");
+      setError(err instanceof Error ? err.message : t.resendFailed);
     } finally {
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsx6("h1", { className: "text-2xl font-bold tracking-tight", children: "Verify your email" }),
-      /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-muted-foreground", children: email ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-        "Enter the 6-digit code sent to",
-        " ",
-        /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground", children: email })
-      ] }) : "Enter the 6-digit code sent to your email" })
-    ] }),
-    error && /* @__PURE__ */ jsx6("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    resendMessage && /* @__PURE__ */ jsx6("div", { className: "rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-xs text-green-700", children: resendMessage }),
-    /* @__PURE__ */ jsxs6("form", { onSubmit: handleVerify, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx6(
-        "input",
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsx9(
+      AuthHeading,
+      {
+        title: t.title,
+        subtitle: email ? `${t.subtitle} ${email}.` : t.subtitleNoEmail,
+        titleClassName
+      }
+    ),
+    /* @__PURE__ */ jsx9(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsx9(AuthAlert, { tone: "success", children: resendMessage }),
+    /* @__PURE__ */ jsxs8("form", { onSubmit: handleVerify, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx9(
+        AuthOtpField,
         {
-          type: "text",
-          inputMode: "numeric",
-          pattern: "[0-9]*",
-          maxLength: 6,
+          id: "verify-email-otp",
+          label: t.codePlaceholder,
           value: otp,
-          onChange: (e) => setOtp(e.target.value.replace(/\D/g, "")),
-          placeholder: "000000",
-          required: true,
-          disabled: isVerifying,
-          autoComplete: "one-time-code",
-          className: "flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-center text-lg tracking-[0.4em] font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          onChange: setOtp,
+          disabled: isVerifying
         }
       ),
-      /* @__PURE__ */ jsx6(
-        "button",
+      /* @__PURE__ */ jsx9(
+        AuthSubmit,
         {
-          type: "submit",
-          disabled: isVerifying || otp.length < 6,
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
-          children: isVerifying ? "Verifying..." : "Verify email"
+          pending: isVerifying,
+          disabled: otp.length < OTP_LENGTH,
+          pendingLabel: t.submitPending,
+          children: t.submit
         }
-      ),
-      /* @__PURE__ */ jsx6(
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           onClick: handleResend,
           disabled: isResending,
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-          children: isResending ? "Sending..." : "Resend code"
+          className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-55",
+          children: isResending ? t.resendPending : t.resend
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs6("p", { className: "text-center text-sm text-muted-foreground", children: [
-      "Already verified?",
-      " ",
-      /* @__PURE__ */ jsx6(
-        "a",
-        {
-          href: "/login",
-          className: "font-medium text-foreground underline underline-offset-4 hover:text-foreground/80",
-          children: "Sign in"
-        }
-      )
+      ),
+      /* @__PURE__ */ jsxs8("p", { children: [
+        t.alreadyVerified,
+        " ",
+        /* @__PURE__ */ jsx9(
+          "a",
+          {
+            href: loginUrl,
+            className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: t.login
+          }
+        )
+      ] })
     ] })
   ] });
 }
 
 // src/components/forgot-password-form.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULTS4 = {
+  title: "Mot de passe oubli\xE9 ?",
+  subtitle: "Entre ton adresse e-mail et nous t'enverrons un code pour le r\xE9initialiser.",
+  emailPlaceholder: "Adresse e-mail",
+  submit: "Envoyer le code",
+  submitPending: "Envoi\u2026",
+  rememberPassword: "Tu t'en souviens finalement ?",
+  login: "Se connecter",
+  emailRequired: "Renseigne ton adresse e-mail",
+  sendFailed: "L'envoi du code a \xE9chou\xE9"
+};
 function ForgotPasswordForm({
   onSuccess,
   loginUrl = "/login",
+  labels,
+  titleClassName,
   authClient
 }) {
+  const t = { ...DEFAULTS4, ...labels };
   const [email, setEmail] = useState5("");
   const [error, setError] = useState5();
   const [isPending, setIsPending] = useState5(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!email.trim()) {
-      setError("Please enter your email address");
+      setError(t.emailRequired);
       return;
     }
     setError(void 0);
     setIsPending(true);
     try {
       const res = await authClient.emailOtp.sendVerificationOtp({
-        email,
+        email: email.trim(),
         type: "forget-password"
       });
       if (res?.error) {
-        setError(res.error.message ?? "Failed to send reset code");
+        setError(res.error.message ?? t.sendFailed);
         return;
       }
-      onSuccess?.(email);
+      onSuccess?.(email.trim());
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to send reset code");
+      setError(err instanceof Error ? err.message : t.sendFailed);
     } finally {
       setIsPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx7("h1", { className: "text-2xl font-bold tracking-tight", children: "Forgot your password?" }),
-      /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-muted-foreground", children: "Enter your email address and we'll send you a code to reset your password." })
-    ] }),
-    error && /* @__PURE__ */ jsx7("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx7(
-        "input",
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsx10(
+      AuthHeading,
+      {
+        title: t.title,
+        subtitle: t.subtitle,
+        titleClassName
+      }
+    ),
+    /* @__PURE__ */ jsx10(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx10(
+        AuthField,
         {
+          label: t.emailPlaceholder,
           type: "email",
+          inputMode: "email",
           value: email,
           onChange: (e) => setEmail(e.target.value),
-          placeholder: "Email address",
           required: true,
           disabled: isPending,
           autoComplete: "email",
-          className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          autoCapitalize: "none",
+          spellCheck: false,
+          invalid: !!error
         }
       ),
-      /* @__PURE__ */ jsx7(
-        "button",
+      /* @__PURE__ */ jsx10(
+        AuthSubmit,
         {
-          type: "submit",
-          disabled: isPending || !email.trim(),
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
-          children: isPending ? "Sending..." : "Send reset code"
+          pending: isPending,
+          disabled: !email.trim(),
+          pendingLabel: t.submitPending,
+          children: t.submit
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7("p", { className: "text-center text-sm text-muted-foreground", children: [
-      "Remember your password?",
+    /* @__PURE__ */ jsxs9("p", { className: "text-center text-sm text-muted-foreground", children: [
+      t.rememberPassword,
       " ",
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx10(
         "a",
         {
           href: loginUrl,
-          className: "font-medium text-foreground underline underline-offset-4 hover:text-foreground/80",
-          children: "Sign in"
+          className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: t.login
         }
       )
     ] })
@@ -745,13 +872,37 @@ function ForgotPasswordForm({
 
 // src/components/reset-password-form.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var MIN_PASSWORD_LENGTH2 = 8;
+var DEFAULTS5 = {
+  title: "Nouveau mot de passe",
+  subtitle: "Entre le code \xE0 6 chiffres re\xE7u par e-mail et ton nouveau mot de passe.",
+  codePlaceholder: "Code de v\xE9rification",
+  passwordPlaceholder: "Nouveau mot de passe",
+  passwordHint: `Au moins ${MIN_PASSWORD_LENGTH2} caract\xE8res.`,
+  confirmPlaceholder: "Confirme le mot de passe",
+  submit: "R\xE9initialiser",
+  submitPending: "R\xE9initialisation\u2026",
+  resend: "Renvoyer le code",
+  resendPending: "Envoi\u2026",
+  resent: "Un nouveau code vient de t'\xEAtre envoy\xE9.",
+  rememberPassword: "Tu t'en souviens finalement ?",
+  login: "Se connecter",
+  codeRequired: "Entre le code \xE0 6 chiffres",
+  passwordTooShort: `Le mot de passe doit faire au moins ${MIN_PASSWORD_LENGTH2} caract\xE8res`,
+  passwordMismatch: "Les deux mots de passe ne correspondent pas",
+  resetFailed: "La r\xE9initialisation a \xE9chou\xE9",
+  resendFailed: "L'envoi du code a \xE9chou\xE9"
+};
 function ResetPasswordForm({
   email,
   onSuccess,
   loginUrl = "/login",
+  labels,
+  titleClassName,
   authClient
 }) {
+  const t = { ...DEFAULTS5, ...labels };
   const [otp, setOtp] = useState6("");
   const [password, setPassword] = useState6("");
   const [confirmPassword, setConfirmPassword] = useState6("");
@@ -759,21 +910,24 @@ function ResetPasswordForm({
   const [isResetting, setIsResetting] = useState6(false);
   const [isResending, setIsResending] = useState6(false);
   const [resendMessage, setResendMessage] = useState6();
+  const tooShort = password.length > 0 && password.length < MIN_PASSWORD_LENGTH2;
+  const mismatch = confirmPassword.length > 0 && confirmPassword !== password;
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (!otp.trim() || otp.length < 6) {
-      setError("Please enter the 6-digit code");
+    if (otp.length < OTP_LENGTH) {
+      setError(t.codeRequired);
       return;
     }
-    if (password.length < 8) {
-      setError("Password must be at least 8 characters");
+    if (password.length < MIN_PASSWORD_LENGTH2) {
+      setError(t.passwordTooShort);
       return;
     }
     if (password !== confirmPassword) {
-      setError("Passwords do not match");
+      setError(t.passwordMismatch);
       return;
     }
     setError(void 0);
+    setResendMessage(void 0);
     setIsResetting(true);
     try {
       const res = await fetch("/api/auth/email-otp/reset-password", {
@@ -783,14 +937,12 @@ function ResetPasswordForm({
       });
       if (!res.ok) {
         const body = await res.json().catch(() => null);
-        setError(body?.message ?? "Failed to reset password");
+        setError(body?.message ?? t.resetFailed);
         return;
       }
       onSuccess?.();
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to reset password"
-      );
+      setError(err instanceof Error ? err.message : t.resetFailed);
     } finally {
       setIsResetting(false);
     }
@@ -804,125 +956,145 @@ function ResetPasswordForm({
         email,
         type: "forget-password"
       });
-      setResendMessage("A new code has been sent to your inbox.");
+      setResendMessage(t.resent);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to resend code.");
+      setError(err instanceof Error ? err.message : t.resendFailed);
     } finally {
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-bold tracking-tight", children: "Reset your password" }),
-      /* @__PURE__ */ jsxs8("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-        "Enter the 6-digit code sent to",
-        " ",
-        /* @__PURE__ */ jsx8("span", { className: "font-medium text-foreground", children: email }),
-        " and your new password."
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx8("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    resendMessage && /* @__PURE__ */ jsx8("div", { className: "rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-xs text-green-700", children: resendMessage }),
-    /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx8(
-        "input",
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsx11(
+      AuthHeading,
+      {
+        title: t.title,
+        subtitle: t.subtitle,
+        titleClassName
+      }
+    ),
+    /* @__PURE__ */ jsx11(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsx11(AuthAlert, { tone: "success", children: resendMessage }),
+    /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx11(
+        AuthOtpField,
         {
-          type: "text",
-          inputMode: "numeric",
-          pattern: "[0-9]*",
-          maxLength: 6,
+          id: "reset-password-otp",
+          label: t.codePlaceholder,
           value: otp,
-          onChange: (e) => setOtp(e.target.value.replace(/\D/g, "")),
-          placeholder: "000000",
-          required: true,
-          disabled: isResetting,
-          autoComplete: "one-time-code",
-          className: "flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-center text-lg tracking-[0.4em] font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          onChange: setOtp,
+          disabled: isResetting
         }
       ),
-      /* @__PURE__ */ jsx8(
-        "input",
+      /* @__PURE__ */ jsx11(
+        AuthField,
         {
+          label: t.passwordPlaceholder,
           type: "password",
           value: password,
           onChange: (e) => setPassword(e.target.value),
-          placeholder: "New password",
           required: true,
           disabled: isResetting,
           autoComplete: "new-password",
-          className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          description: t.passwordHint,
+          invalid: tooShort
         }
       ),
-      /* @__PURE__ */ jsx8(
-        "input",
+      /* @__PURE__ */ jsx11(
+        AuthField,
         {
+          label: t.confirmPlaceholder,
           type: "password",
           value: confirmPassword,
           onChange: (e) => setConfirmPassword(e.target.value),
-          placeholder: "Confirm new password",
           required: true,
           disabled: isResetting,
           autoComplete: "new-password",
-          className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          invalid: mismatch
         }
       ),
-      /* @__PURE__ */ jsx8(
-        "button",
+      /* @__PURE__ */ jsx11(
+        AuthSubmit,
         {
-          type: "submit",
-          disabled: isResetting || otp.length < 6 || !password,
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
-          children: isResetting ? "Resetting..." : "Reset password"
+          pending: isResetting,
+          disabled: otp.length < OTP_LENGTH || !password || !confirmPassword,
+          pendingLabel: t.submitPending,
+          children: t.submit
         }
-      ),
-      /* @__PURE__ */ jsx8(
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
           onClick: handleResend,
           disabled: isResending,
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-          children: isResending ? "Sending..." : "Resend code"
+          className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-55",
+          children: isResending ? t.resendPending : t.resend
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs8("p", { className: "text-center text-sm text-muted-foreground", children: [
-      "Remember your password?",
-      " ",
-      /* @__PURE__ */ jsx8(
-        "a",
-        {
-          href: loginUrl,
-          className: "font-medium text-foreground underline underline-offset-4 hover:text-foreground/80",
-          children: "Sign in"
-        }
-      )
+      ),
+      /* @__PURE__ */ jsxs10("p", { children: [
+        t.rememberPassword,
+        " ",
+        /* @__PURE__ */ jsx11(
+          "a",
+          {
+            href: loginUrl,
+            className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: t.login
+          }
+        )
+      ] })
     ] })
   ] });
 }
 
 // src/components/auth-layout.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function AuthLayout({
   logo,
-  title,
-  subtitle,
+  panel,
   children,
   footer
 }) {
-  return /* @__PURE__ */ jsx9("div", { className: "flex min-h-dvh flex-col bg-background px-5 pb-10 pt-12 sm:items-center sm:bg-muted/40 sm:px-6 sm:py-16", children: /* @__PURE__ */ jsxs9("div", { className: "mx-auto w-full max-w-[420px]", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "mb-7 text-center sm:mb-6", children: [
-      logo && /* @__PURE__ */ jsx9("div", { className: "mb-5 flex justify-center", children: logo }),
-      /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium tracking-[0.02em] text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-balance text-sm text-muted-foreground", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsx9("div", { className: "sm:rounded-2xl sm:border sm:border-border/70 sm:bg-card sm:p-8 sm:shadow-lg sm:shadow-black/5", children }),
-    footer && /* @__PURE__ */ jsx9("div", { className: "mt-6 text-center text-xs leading-relaxed text-muted-foreground", children: footer })
-  ] }) });
+  return /* @__PURE__ */ jsx12("div", { className: "flex min-h-dvh flex-col bg-background px-5 pb-10 pt-12 sm:items-center sm:bg-muted/40 sm:px-6 sm:py-16", children: /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: `mx-auto w-full ${panel ? "max-w-4xl" : "max-w-[420px]"}`,
+      children: [
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: [
+              "sm:overflow-hidden sm:rounded-2xl sm:border sm:border-border/70 sm:bg-card sm:shadow-lg sm:shadow-black/5",
+              panel ? "md:grid md:grid-cols-2" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsxs11("div", { className: "sm:p-8", children: [
+                logo && /* @__PURE__ */ jsx12("div", { className: "mb-7 flex justify-center", children: logo }),
+                children
+              ] }),
+              panel && // Decorative: it must never carry information the form does not,
+              // so it is hidden from assistive tech rather than described.
+              /* @__PURE__ */ jsx12(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "hidden bg-muted md:block [&>*]:h-full [&>*]:w-full [&>img]:object-cover",
+                  children: panel
+                }
+              )
+            ]
+          }
+        ),
+        footer && /* @__PURE__ */ jsx12("div", { className: "mt-6 text-center text-xs leading-relaxed text-muted-foreground", children: footer })
+      ]
+    }
+  ) });
 }
 
 // src/components/invitation-notice.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function defaultSupportEmail() {
   if (typeof window === "undefined") return void 0;
   const host = window.location.hostname;
@@ -942,15 +1114,15 @@ function InvitationNotice({
   action
 }) {
   const contact = supportEmail ?? defaultSupportEmail();
-  return /* @__PURE__ */ jsxs10("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs10("div", { children: [
-      /* @__PURE__ */ jsx10("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
-      /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-muted-foreground", children: REASON_MESSAGE[reason] ?? REASON_MESSAGE.unknown })
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsx13("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-muted-foreground", children: REASON_MESSAGE[reason] ?? REASON_MESSAGE.unknown })
     ] }),
-    contact ? /* @__PURE__ */ jsxs10("p", { className: "text-sm text-muted-foreground", children: [
+    contact ? /* @__PURE__ */ jsxs12("p", { className: "text-sm text-muted-foreground", children: [
       "\xC9crivez-nous \xE0",
       " ",
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx13(
         "a",
         {
           href: `mailto:${contact}`,