@burdenoff/microfe-auth 2026.624.2 → 2026.625.1

package/dist/auth/pages/PasswordResetPage.js

@@ -6,72 +6,74 @@ import { useEffect as u, useState as d } from "react";
 import { useNavigate as f, useSearchParams as p } from "react-router-dom";
 import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Button as v } from "@burdenoff/fe-libs/button";
+import { PagePurpose as y } from "@burdenoff/fe-libs/ui";
 //#region src/auth/pages/PasswordResetPage.tsx
-var v = 5;
-function y() {
-	let y = f(), { t: b } = m(), x = (e, t) => {
-		let n = b(e);
+var b = 5;
+function x() {
+	let x = f(), { t: S } = m(), C = (e, t) => {
+		let n = S(e);
 		return n === e ? t : n;
-	}, [S] = p(), C = S.get("token"), w = S.get("returnTo"), { requestPasswordReset: T, resetPassword: E, isLoading: D } = l(), { executeRecaptcha: O } = c(), [k, A] = d(""), [j, M] = d(""), [N, P] = d(""), [F, I] = d(!1), [L, R] = d(!1), [z, B] = d(!1), [V, H] = d(""), [U, W] = d(v);
+	}, [w] = p(), T = w.get("token"), E = w.get("returnTo"), { requestPasswordReset: D, resetPassword: O, isLoading: k } = l(), { executeRecaptcha: A } = c(), [j, M] = d(""), [N, P] = d(""), [F, I] = d(""), [L, R] = d(!1), [z, B] = d(!1), [V, H] = d(!1), [U, W] = d(""), [G, K] = d(b);
 	u(() => {
-		if (!z || !C) return;
-		let e = w ? `/auth/login?returnTo=${encodeURIComponent(w)}` : "/auth/login", t = setInterval(() => {
-			W((n) => n <= 1 ? (clearInterval(t), y(e), 0) : n - 1);
+		if (!V || !T) return;
+		let e = E ? `/auth/login?returnTo=${encodeURIComponent(E)}` : "/auth/login", t = setInterval(() => {
+			K((n) => n <= 1 ? (clearInterval(t), x(e), 0) : n - 1);
 		}, 1e3);
 		return () => clearInterval(t);
 	}, [
-		z,
-		C,
-		y,
-		w
+		V,
+		T,
+		x,
+		E
 	]);
-	let G = (() => {
-		let e = j;
+	let q = (() => {
+		let e = N;
 		return [
 			{
-				label: x("auth.passwordReset.pwMin8", "At least 12 characters"),
+				label: C("auth.passwordReset.pwMin8", "At least 12 characters"),
 				met: e.length >= 12
 			},
 			{
-				label: x("auth.passwordReset.pwUppercase", "One uppercase letter"),
+				label: C("auth.passwordReset.pwUppercase", "One uppercase letter"),
 				met: /[A-Z]/.test(e)
 			},
 			{
-				label: x("auth.passwordReset.pwLowercase", "One lowercase letter"),
+				label: C("auth.passwordReset.pwLowercase", "One lowercase letter"),
 				met: /[a-z]/.test(e)
 			},
 			{
-				label: x("auth.passwordReset.pwNumber", "One number"),
+				label: C("auth.passwordReset.pwNumber", "One number"),
 				met: /\d/.test(e)
 			},
 			{
-				label: x("auth.passwordReset.pwSpecial", "One special character"),
+				label: C("auth.passwordReset.pwSpecial", "One special character"),
 				met: /[!@#$%^&*(),.?":{}|<>]/.test(e)
 			}
 		];
-	})(), K = (() => {
-		let e = G.filter((e) => e.met).length;
+	})(), J = (() => {
+		let e = q.filter((e) => e.met).length;
 		return e <= 2 ? {
-			level: x("auth.passwordReset.passwordStrengthWeak", "weak"),
+			level: C("auth.passwordReset.passwordStrengthWeak", "weak"),
 			color: "bg-status-error-bg-subtle0",
 			width: "w-1/4"
 		} : e <= 3 ? {
-			level: x("auth.passwordReset.passwordStrengthFair", "fair"),
+			level: C("auth.passwordReset.passwordStrengthFair", "fair"),
 			color: "bg-status-warning-text",
 			width: "w-2/4"
 		} : e <= 4 ? {
-			level: x("auth.passwordReset.passwordStrengthGood", "good"),
+			level: C("auth.passwordReset.passwordStrengthGood", "good"),
 			color: "bg-status-warning-bg-subtle0",
 			width: "w-3/4"
 		} : {
-			level: x("auth.passwordReset.passwordStrengthStrong", "strong"),
+			level: C("auth.passwordReset.passwordStrengthStrong", "strong"),
 			color: "bg-status-success-bg-subtle0",
 			width: "w-full"
 		};
 	})();
-	return z ? /* @__PURE__ */ _(e, {
-		title: C ? x("auth.passwordReset.passwordUpdated", "Password updated") : x("auth.passwordReset.checkEmail", "Check your email"),
-		subtitle: C ? x("auth.passwordReset.successSubtitle", "Your password has been successfully reset") : x("auth.passwordReset.sentInstructions", "We sent you instructions to reset your password"),
+	return V ? /* @__PURE__ */ _(e, {
+		title: T ? C("auth.passwordReset.passwordUpdated", "Password updated") : C("auth.passwordReset.checkEmail", "Check your email"),
+		subtitle: T ? C("auth.passwordReset.successSubtitle", "Your password has been successfully reset") : C("auth.passwordReset.sentInstructions", "We sent you instructions to reset your password"),
 		children: [
 			/* @__PURE__ */ g("div", {
 				className: "flex justify-center mb-6",
@@ -93,275 +95,288 @@ function y() {
 			}),
 			/* @__PURE__ */ g("p", {
 				className: "text-center text-[var(--color-text-secondary)] mb-8",
-				children: C ? x("auth.passwordReset.canNowSignIn", "You can now use your new password to sign in to your account.") : x("auth.passwordReset.emailSentTo", "We sent an email to {{email}}. Click the link in the email to reset your password.").replace("{{email}}", k)
+				children: T ? C("auth.passwordReset.canNowSignIn", "You can now use your new password to sign in to your account.") : C("auth.passwordReset.emailSentTo", "We sent an email to {{email}}. Click the link in the email to reset your password.").replace("{{email}}", j)
 			}),
-			C ? /* @__PURE__ */ _("div", {
+			T ? /* @__PURE__ */ _("div", {
 				className: "space-y-4",
 				children: [/* @__PURE__ */ _("p", {
 					className: "text-center text-sm text-[var(--color-text-tertiary)]",
 					children: [
-						x("auth.passwordReset.redirectingIn", "Redirecting to sign in in"),
+						C("auth.passwordReset.redirectingIn", "Redirecting to sign in in"),
 						" ",
 						/* @__PURE__ */ g("span", {
 							className: "font-semibold text-[var(--color-text-primary)]",
-							children: U
+							children: G
 						}),
 						" ",
-						x("auth.passwordReset.seconds", "seconds...")
+						C("auth.passwordReset.seconds", "seconds...")
 					]
-				}), /* @__PURE__ */ g("button", {
+				}), /* @__PURE__ */ g(v, {
 					type: "button",
-					onClick: () => y(w ? `/auth/login?returnTo=${encodeURIComponent(w)}` : "/auth/login"),
-					className: "auth-primary-button w-full px-4 py-3 font-semibold",
-					children: x("auth.passwordReset.signInNow", "Sign in now")
+					onClick: () => x(E ? `/auth/login?returnTo=${encodeURIComponent(E)}` : "/auth/login"),
+					variant: "default",
+					size: "lg",
+					className: "w-full font-semibold",
+					children: C("auth.passwordReset.signInNow", "Sign in now")
 				})]
 			}) : /* @__PURE__ */ _("div", {
 				className: "space-y-4",
 				children: [/* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => B(!1),
+					onClick: () => H(!1),
 					className: "w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all",
-					children: x("auth.passwordReset.didntReceive", "Didn't receive the email? Try again")
+					children: C("auth.passwordReset.didntReceive", "Didn't receive the email? Try again")
 				}), /* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => y("/auth/login"),
+					onClick: () => x("/auth/login"),
 					className: "w-full py-3 px-4 rounded-xl text-[var(--color-text-secondary)] font-medium hover:text-[var(--color-text-primary)] transition-colors",
-					children: x("auth.passwordReset.backToSignIn", "Back to sign in")
+					children: C("auth.passwordReset.backToSignIn", "Back to sign in")
 				})]
 			})
 		]
 	}) : /* @__PURE__ */ _(e, {
-		title: C ? x("auth.passwordReset.createNewPassword", "Create new password") : x("auth.passwordReset.resetTitle", "Reset your password"),
-		subtitle: C ? x("auth.passwordReset.enterNewPassword", "Enter a new password for your account") : x("auth.passwordReset.enterEmail", "Enter your email and we'll send you a reset link"),
-		children: [C ? /* @__PURE__ */ _("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), H(""), C) {
-					if (j !== N) {
-						H(x("auth.passwordReset.passwordsNoMatch", "Passwords do not match"));
-						return;
+		title: T ? C("auth.passwordReset.createNewPassword", "Create new password") : C("auth.passwordReset.resetTitle", "Reset your password"),
+		subtitle: T ? C("auth.passwordReset.enterNewPassword", "Enter a new password for your account") : C("auth.passwordReset.enterEmail", "Enter your email and we'll send you a reset link"),
+		children: [
+			/* @__PURE__ */ g(y, {
+				className: "mb-5",
+				children: T ? C("auth.passwordReset.purposeReset", "Choose a new password for your account. Make it strong and unique — you'll use it to sign in next time.") : C("auth.passwordReset.purposeRequest", "Forgot your password? Enter your email and we'll send a secure link to reset it. The link expires shortly for your safety.")
+			}),
+			T ? /* @__PURE__ */ _("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), W(""), T) {
+						if (N !== F) {
+							W(C("auth.passwordReset.passwordsNoMatch", "Passwords do not match"));
+							return;
+						}
+						try {
+							await O(T, N), H(!0);
+						} catch (e) {
+							let t = e instanceof Error ? e.message : "";
+							W(t === "TOKEN_EXPIRED" ? C("auth.passwordReset.errorTokenExpired", "This password reset link has expired. Please request a new one.") : t === "INVALID_TOKEN" ? C("auth.passwordReset.errorInvalidToken", "This password reset link is invalid or has already been used.") : C("auth.passwordReset.errorGeneric", "Failed to reset password. Please try again."));
+						}
 					}
+				},
+				className: "space-y-5",
+				children: [
+					U && /* @__PURE__ */ _("div", {
+						className: "flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
+						children: [/* @__PURE__ */ g("svg", {
+							className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								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"
+							})
+						}), /* @__PURE__ */ g("p", {
+							className: "text-sm text-[var(--color-status-error-text)]",
+							children: U
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ g("label", {
+								htmlFor: "newPassword",
+								className: "block text-sm font-medium text-[var(--color-text-primary)]",
+								children: C("auth.passwordReset.newPasswordLabel", "New Password")
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "relative",
+								children: [
+									/* @__PURE__ */ g("div", {
+										className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
+										children: /* @__PURE__ */ g(a, { className: "size-5 text-[var(--color-text-tertiary)]" })
+									}),
+									/* @__PURE__ */ g("input", {
+										id: "newPassword",
+										type: L ? "text" : "password",
+										required: !0,
+										"aria-required": "true",
+										"aria-label": C("auth.passwordReset.newPasswordLabel", "New Password"),
+										autoComplete: "new-password",
+										value: N,
+										onChange: (e) => P(e.target.value),
+										className: "block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+										placeholder: C("auth.passwordReset.newPasswordPlaceholder", "Enter new password")
+									}),
+									/* @__PURE__ */ g("button", {
+										type: "button",
+										onClick: () => R(!L),
+										"aria-label": L ? "Hide password" : "Show password",
+										className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors",
+										children: g(L ? i : r, { className: "size-5" })
+									})
+								]
+							}),
+							N && /* @__PURE__ */ _("div", {
+								className: "space-y-3 pt-2",
+								children: [/* @__PURE__ */ _("div", {
+									className: "space-y-1",
+									children: [/* @__PURE__ */ g("div", {
+										className: "h-1.5 bg-[var(--color-bg-sunken)] rounded-full overflow-hidden",
+										children: /* @__PURE__ */ g("div", { className: `h-full ${J.color} ${J.width} transition-all duration-300` })
+									}), /* @__PURE__ */ _("p", {
+										className: "text-xs text-[var(--color-text-tertiary)] capitalize",
+										children: [
+											C("auth.passwordReset.passwordStrength", "Password strength:"),
+											" ",
+											/* @__PURE__ */ g("span", {
+												className: "font-medium",
+												children: J.level
+											})
+										]
+									})]
+								}), /* @__PURE__ */ g("div", {
+									className: "grid grid-cols-2 gap-2",
+									children: q.map((e) => /* @__PURE__ */ _("div", {
+										className: "flex items-center gap-2",
+										children: [e.met ? /* @__PURE__ */ g(t, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ g(s, { className: "size-4 text-[var(--color-text-tertiary)]" }), /* @__PURE__ */ g("span", {
+											className: `text-xs ${e.met ? "text-[var(--color-status-success-text)]" : "text-[var(--color-text-tertiary)]"}`,
+											children: e.label
+										})]
+									}, e.label))
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ g("label", {
+								htmlFor: "confirmPassword",
+								className: "block text-sm font-medium text-[var(--color-text-primary)]",
+								children: C("auth.passwordReset.confirmPasswordLabel", "Confirm Password")
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "relative",
+								children: [
+									/* @__PURE__ */ g("div", {
+										className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
+										children: /* @__PURE__ */ g(a, { className: "size-5 text-[var(--color-text-tertiary)]" })
+									}),
+									/* @__PURE__ */ g("input", {
+										id: "confirmPassword",
+										type: z ? "text" : "password",
+										required: !0,
+										"aria-required": "true",
+										"aria-label": C("auth.passwordReset.confirmPasswordLabel", "Confirm Password"),
+										autoComplete: "new-password",
+										"aria-invalid": F.length > 0 && N !== F,
+										value: F,
+										onChange: (e) => I(e.target.value),
+										className: "block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+										placeholder: C("auth.passwordReset.confirmPasswordPlaceholder", "Confirm new password")
+									}),
+									/* @__PURE__ */ g("button", {
+										type: "button",
+										onClick: () => B(!z),
+										"aria-label": z ? "Hide password" : "Show password",
+										className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors",
+										children: g(z ? i : r, { className: "size-5" })
+									})
+								]
+							}),
+							F && N !== F && /* @__PURE__ */ g("p", {
+								className: "text-xs text-[var(--color-status-error-text)]",
+								children: C("auth.passwordReset.passwordsMismatch", "Passwords do not match")
+							})
+						]
+					}),
+					/* @__PURE__ */ g(v, {
+						type: "submit",
+						disabled: k || F.length > 0 && N !== F,
+						variant: "default",
+						size: "lg",
+						className: "w-full font-semibold",
+						children: k ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o, { className: "size-5 animate-spin" }), /* @__PURE__ */ g("span", { children: C("auth.passwordReset.resetting", "Resetting password...") })] }) : C("auth.passwordReset.resetButton", "Reset password")
+					})
+				]
+			}) : /* @__PURE__ */ _("form", {
+				onSubmit: async (e) => {
+					e.preventDefault(), W("");
 					try {
-						await E(C, j), B(!0);
+						await D(j, await A("password_reset")), H(!0);
 					} catch (e) {
-						let t = e instanceof Error ? e.message : "";
-						H(t === "TOKEN_EXPIRED" ? x("auth.passwordReset.errorTokenExpired", "This password reset link has expired. Please request a new one.") : t === "INVALID_TOKEN" ? x("auth.passwordReset.errorInvalidToken", "This password reset link is invalid or has already been used.") : x("auth.passwordReset.errorGeneric", "Failed to reset password. Please try again."));
+						W(C("auth.passwordReset.sendFailed", "Failed to send reset email. Please try again.")), console.error("Failed to request password reset:", e);
 					}
-				}
-			},
-			className: "space-y-5",
-			children: [
-				V && /* @__PURE__ */ _("div", {
-					className: "flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
-					children: [/* @__PURE__ */ g("svg", {
-						className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor",
-						children: /* @__PURE__ */ g("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							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"
-						})
-					}), /* @__PURE__ */ g("p", {
-						className: "text-sm text-[var(--color-status-error-text)]",
-						children: V
-					})]
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "space-y-2",
-					children: [
-						/* @__PURE__ */ g("label", {
-							htmlFor: "newPassword",
+				},
+				className: "space-y-5",
+				children: [
+					U && /* @__PURE__ */ _("div", {
+						className: "flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
+						children: [/* @__PURE__ */ g("svg", {
+							className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								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"
+							})
+						}), /* @__PURE__ */ g("p", {
+							className: "text-sm text-[var(--color-status-error-text)]",
+							children: U
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ g("label", {
+							htmlFor: "email",
 							className: "block text-sm font-medium text-[var(--color-text-primary)]",
-							children: x("auth.passwordReset.newPasswordLabel", "New Password")
-						}),
-						/* @__PURE__ */ _("div", {
+							children: C("auth.passwordReset.emailLabel", "Email address")
+						}), /* @__PURE__ */ _("div", {
 							className: "relative",
-							children: [
-								/* @__PURE__ */ g("div", {
-									className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
-									children: /* @__PURE__ */ g(a, { className: "size-5 text-[var(--color-text-tertiary)]" })
-								}),
-								/* @__PURE__ */ g("input", {
-									id: "newPassword",
-									type: F ? "text" : "password",
-									required: !0,
-									"aria-required": "true",
-									"aria-label": x("auth.passwordReset.newPasswordLabel", "New Password"),
-									autoComplete: "new-password",
-									value: j,
-									onChange: (e) => M(e.target.value),
-									className: "block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-									placeholder: x("auth.passwordReset.newPasswordPlaceholder", "Enter new password")
-								}),
-								/* @__PURE__ */ g("button", {
-									type: "button",
-									onClick: () => I(!F),
-									"aria-label": F ? "Hide password" : "Show password",
-									className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors",
-									children: g(F ? i : r, { className: "size-5" })
-								})
-							]
-						}),
-						j && /* @__PURE__ */ _("div", {
-							className: "space-y-3 pt-2",
-							children: [/* @__PURE__ */ _("div", {
-								className: "space-y-1",
-								children: [/* @__PURE__ */ g("div", {
-									className: "h-1.5 bg-[var(--color-bg-sunken)] rounded-full overflow-hidden",
-									children: /* @__PURE__ */ g("div", { className: `h-full ${K.color} ${K.width} transition-all duration-300` })
-								}), /* @__PURE__ */ _("p", {
-									className: "text-xs text-[var(--color-text-tertiary)] capitalize",
-									children: [
-										x("auth.passwordReset.passwordStrength", "Password strength:"),
-										" ",
-										/* @__PURE__ */ g("span", {
-											className: "font-medium",
-											children: K.level
-										})
-									]
-								})]
-							}), /* @__PURE__ */ g("div", {
-								className: "grid grid-cols-2 gap-2",
-								children: G.map((e) => /* @__PURE__ */ _("div", {
-									className: "flex items-center gap-2",
-									children: [e.met ? /* @__PURE__ */ g(t, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ g(s, { className: "size-4 text-[var(--color-text-tertiary)]" }), /* @__PURE__ */ g("span", {
-										className: `text-xs ${e.met ? "text-[var(--color-status-success-text)]" : "text-[var(--color-text-tertiary)]"}`,
-										children: e.label
-									})]
-								}, e.label))
+							children: [/* @__PURE__ */ g("div", {
+								className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
+								children: /* @__PURE__ */ g(n, { className: "size-5 text-[var(--color-text-tertiary)]" })
+							}), /* @__PURE__ */ g("input", {
+								id: "email",
+								type: "email",
+								required: !0,
+								"aria-required": "true",
+								"aria-label": C("auth.passwordReset.emailLabel", "Email address"),
+								autoComplete: "email",
+								value: j,
+								onChange: (e) => M(e.target.value),
+								className: "block w-full pl-[3.5rem] pr-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+								placeholder: C("auth.passwordReset.emailPlaceholder", "you@example.com")
 							})]
-						})
-					]
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "space-y-2",
-					children: [
-						/* @__PURE__ */ g("label", {
-							htmlFor: "confirmPassword",
-							className: "block text-sm font-medium text-[var(--color-text-primary)]",
-							children: x("auth.passwordReset.confirmPasswordLabel", "Confirm Password")
-						}),
-						/* @__PURE__ */ _("div", {
-							className: "relative",
-							children: [
-								/* @__PURE__ */ g("div", {
-									className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
-									children: /* @__PURE__ */ g(a, { className: "size-5 text-[var(--color-text-tertiary)]" })
-								}),
-								/* @__PURE__ */ g("input", {
-									id: "confirmPassword",
-									type: L ? "text" : "password",
-									required: !0,
-									"aria-required": "true",
-									"aria-label": x("auth.passwordReset.confirmPasswordLabel", "Confirm Password"),
-									autoComplete: "new-password",
-									"aria-invalid": N.length > 0 && j !== N,
-									value: N,
-									onChange: (e) => P(e.target.value),
-									className: "block w-full pl-[3.5rem] pr-12 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-									placeholder: x("auth.passwordReset.confirmPasswordPlaceholder", "Confirm new password")
-								}),
-								/* @__PURE__ */ g("button", {
-									type: "button",
-									onClick: () => R(!L),
-									"aria-label": L ? "Hide password" : "Show password",
-									className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors",
-									children: g(L ? i : r, { className: "size-5" })
-								})
-							]
-						}),
-						N && j !== N && /* @__PURE__ */ g("p", {
-							className: "text-xs text-[var(--color-status-error-text)]",
-							children: x("auth.passwordReset.passwordsMismatch", "Passwords do not match")
-						})
-					]
-				}),
-				/* @__PURE__ */ g("button", {
-					type: "submit",
-					disabled: D || N.length > 0 && j !== N,
-					className: "auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold",
-					children: D ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o, { className: "size-5 animate-spin" }), /* @__PURE__ */ g("span", { children: x("auth.passwordReset.resetting", "Resetting password...") })] }) : x("auth.passwordReset.resetButton", "Reset password")
-				})
-			]
-		}) : /* @__PURE__ */ _("form", {
-			onSubmit: async (e) => {
-				e.preventDefault(), H("");
-				try {
-					await T(k, await O("password_reset")), B(!0);
-				} catch (e) {
-					H(x("auth.passwordReset.sendFailed", "Failed to send reset email. Please try again.")), console.error("Failed to request password reset:", e);
-				}
-			},
-			className: "space-y-5",
-			children: [
-				V && /* @__PURE__ */ _("div", {
-					className: "flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
-					children: [/* @__PURE__ */ g("svg", {
-						className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor",
-						children: /* @__PURE__ */ g("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							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"
-						})
-					}), /* @__PURE__ */ g("p", {
-						className: "text-sm text-[var(--color-status-error-text)]",
-						children: V
-					})]
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ g("label", {
-						htmlFor: "email",
-						className: "block text-sm font-medium text-[var(--color-text-primary)]",
-						children: x("auth.passwordReset.emailLabel", "Email address")
-					}), /* @__PURE__ */ _("div", {
-						className: "relative",
-						children: [/* @__PURE__ */ g("div", {
-							className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
-							children: /* @__PURE__ */ g(n, { className: "size-5 text-[var(--color-text-tertiary)]" })
-						}), /* @__PURE__ */ g("input", {
-							id: "email",
-							type: "email",
-							required: !0,
-							"aria-required": "true",
-							"aria-label": x("auth.passwordReset.emailLabel", "Email address"),
-							autoComplete: "email",
-							value: k,
-							onChange: (e) => A(e.target.value),
-							className: "block w-full pl-[3.5rem] pr-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
-							placeholder: x("auth.passwordReset.emailPlaceholder", "you@example.com")
 						})]
-					})]
-				}),
-				/* @__PURE__ */ g("button", {
-					type: "submit",
-					disabled: D,
-					className: "auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold",
-					children: D ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o, { className: "size-5 animate-spin" }), /* @__PURE__ */ g("span", { children: x("auth.passwordReset.sending", "Sending...") })] }) : x("auth.passwordReset.sendResetLink", "Send reset link")
-				})
-			]
-		}), /* @__PURE__ */ _("p", {
-			className: "mt-8 text-center text-sm text-[var(--color-text-secondary)]",
-			children: [
-				x("auth.passwordReset.rememberPassword", "Remember your password?"),
-				" ",
-				/* @__PURE__ */ g("button", {
-					type: "button",
-					onClick: () => y("/auth/login"),
-					className: "font-semibold text-text-link hover:text-text-linkHover transition-colors",
-					children: x("auth.passwordReset.signIn", "Sign in")
-				})
-			]
-		})]
+					}),
+					/* @__PURE__ */ g(v, {
+						type: "submit",
+						disabled: k,
+						variant: "default",
+						size: "lg",
+						className: "w-full font-semibold",
+						children: k ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o, { className: "size-5 animate-spin" }), /* @__PURE__ */ g("span", { children: C("auth.passwordReset.sending", "Sending...") })] }) : C("auth.passwordReset.sendResetLink", "Send reset link")
+					})
+				]
+			}),
+			/* @__PURE__ */ _("p", {
+				className: "mt-8 text-center text-sm text-[var(--color-text-secondary)]",
+				children: [
+					C("auth.passwordReset.rememberPassword", "Remember your password?"),
+					" ",
+					/* @__PURE__ */ g("button", {
+						type: "button",
+						onClick: () => x("/auth/login"),
+						className: "font-semibold text-text-link hover:text-text-linkHover transition-colors",
+						children: C("auth.passwordReset.signIn", "Sign in")
+					})
+				]
+			})
+		]
 	});
 }
 //#endregion
-export { y as PasswordResetPage };
+export { x as PasswordResetPage };
 
 //# sourceMappingURL=PasswordResetPage.js.map