@better-auth-ui/react 1.6.8 → 1.6.9

package/dist/components/auth/email/otp-email.js

@@ -1,129 +1,65 @@
-import { cn as e } from "../../../lib/utils.js";
-import t from "./email-styles.js";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Body as a, Container as o, Head as s, Heading as c, Hr as l, Html as u, Img as d, Link as f, Preview as p, Section as m, Tailwind as h, Text as g, pixelBasedPreset as _ } from "@react-email/components";
-//#region src/components/auth/email/otp-email.tsx
-var v = {
-	YOUR_VERIFICATION_CODE_IS_CODE: "Your verification code is {verificationCode}",
-	LOGO: "Logo",
-	VERIFY_YOUR_EMAIL: "Verify your email",
-	WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: "We need to verify your email address {email} before you can access your {appName} account. Enter the code below in your open browser window.",
-	THIS_CODE_EXPIRES_IN_MINUTES: "This code expires in {expirationMinutes} minutes.",
-	EMAIL_SENT_BY: "Email sent by {appName}.",
-	IF_YOU_DIDNT_REQUEST_THIS_EMAIL: "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
-	POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
-}, y = ({ verificationCode: v, email: b, appName: x, expirationMinutes: S = 10, logoURL: C, colors: w, classNames: T, darkMode: E = !0, poweredBy: D, head: O, ...k }) => {
-	let A = {
-		...y.localization,
-		...k.localization
-	}, j = A.YOUR_VERIFICATION_CODE_IS_CODE.replace("{verificationCode}", v);
-	return /* @__PURE__ */ i(u, { children: [
-		/* @__PURE__ */ i(s, { children: [
-			/* @__PURE__ */ r("meta", {
-				content: "light dark",
-				name: "color-scheme"
-			}),
-			/* @__PURE__ */ r("meta", {
-				content: "light dark",
-				name: "supported-color-schemes"
-			}),
-			/* @__PURE__ */ r(t, {
-				colors: w,
-				darkMode: E
-			}),
-			O
-		] }),
-		/* @__PURE__ */ r(p, { children: j }),
-		/* @__PURE__ */ r(h, {
-			config: { presets: [_] },
-			children: /* @__PURE__ */ r(a, {
-				className: e("bg-background font-sans", T?.body),
-				children: /* @__PURE__ */ r(o, {
-					className: e("mx-auto my-auto max-w-xl px-2 py-10", T?.container),
-					children: /* @__PURE__ */ i(m, {
-						className: e("bg-card text-card-foreground rounded-none border border-border p-8", T?.card),
-						children: [
-							C && (typeof C == "string" ? /* @__PURE__ */ r(d, {
-								src: C,
-								width: 48,
-								height: 48,
-								alt: x || A.LOGO,
-								className: e("mx-auto mb-8", T?.logo)
-							}) : /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(d, {
-								src: C.light,
-								width: 48,
-								height: 48,
-								alt: x || A.LOGO,
-								className: e("mx-auto mb-8 logo-light", T?.logo)
-							}), /* @__PURE__ */ r(d, {
-								src: C.dark,
-								width: 48,
-								height: 48,
-								alt: x || A.LOGO,
-								className: e("hidden mx-auto mb-8 logo-dark", T?.logo)
-							})] })),
-							/* @__PURE__ */ r(c, {
-								className: e("mb-5 text-2xl font-semibold", T?.title),
-								children: A.VERIFY_YOUR_EMAIL
-							}),
-							/* @__PURE__ */ r(g, {
-								className: e("text-sm font-normal", T?.content),
-								children: (() => {
-									let e = A.WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS.replace("{appName}", x || "").replace(/\s{2,}/g, " ").replace(" .", "."), [t, a] = e.split("{email}");
-									return b ? /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(f, {
-											href: `mailto:${b}`,
-											className: "text-primary font-medium",
-											children: b
-										}),
-										a
-									] }) : e.replace("{email}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							/* @__PURE__ */ r(m, {
-								className: e("my-6 border border-border bg-muted p-6", T?.codeBlock),
-								children: /* @__PURE__ */ r(g, {
-									className: e("m-0 text-center text-4xl font-semibold tracking-widest", T?.title),
-									children: v
-								})
-							}),
-							/* @__PURE__ */ r(l, { className: e("my-6 w-full border border-solid border-border", T?.separator) }),
-							/* @__PURE__ */ i(g, {
-								className: e("mb-3 text-xs text-muted-foreground", T?.description),
-								children: [A.THIS_CODE_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", S.toString()), x && /* @__PURE__ */ i(n, { children: [" ", A.EMAIL_SENT_BY.replace("{appName}", x)] })]
-							}),
-							/* @__PURE__ */ r(g, {
-								className: e("mt-3 text-xs text-muted-foreground", T?.description),
-								children: A.IF_YOU_DIDNT_REQUEST_THIS_EMAIL
-							}),
-							D && /* @__PURE__ */ r(g, {
-								className: e("mt-4 mb-0 text-center text-[11px] text-muted-foreground", T?.poweredBy),
-								children: (() => {
-									let [t, a] = A.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
-									return /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(f, {
-											href: "https://better-auth.com",
-											className: e("text-primary underline", T?.link),
-											children: "better-auth"
-										}),
-										a
-									] });
-								})()
-							})
-						]
-					})
-				})
-			})
-		})
-	] });
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const otpEmailLocalization = {
+    YOUR_VERIFICATION_CODE_IS_CODE: "Your verification code is {verificationCode}",
+    LOGO: "Logo",
+    VERIFY_YOUR_EMAIL: "Verify your email",
+    WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: "We need to verify your email address {email} before you can access your {appName} account. Enter the code below in your open browser window.",
+    THIS_CODE_EXPIRES_IN_MINUTES: "This code expires in {expirationMinutes} minutes.",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
 };
-y.localization = v, y.PreviewProps = {
-	verificationCode: "069420",
-	email: "m@example.com",
-	appName: "Better Auth",
-	darkMode: !0
+/**
+ * Email template component that sends one-time password (OTP) verification codes to users.
+ *
+ * This email includes:
+ * - Large, prominently displayed verification code
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <OtpEmail
+ *   verificationCode="069420"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={10}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const OtpEmail = ({ verificationCode, email, appName, expirationMinutes = 10, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...OtpEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.YOUR_VERIFICATION_CODE_IS_CODE.replace("{verificationCode}", verificationCode);
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("mb-5 text-2xl font-semibold", classNames?.title), children: localization.VERIFY_YOUR_EMAIL }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeEmail, afterEmail] = textWithAppName.split("{email}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeEmail, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterEmail] })) : (textWithAppName
+                                            .replace("{email}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), _jsx(Section, { className: cn("my-6 border border-border bg-muted p-6", classNames?.codeBlock), children: _jsx(Text, { className: cn("m-0 text-center text-4xl font-semibold tracking-widest", classNames?.title), children: verificationCode }) }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), _jsxs(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: [localization.THIS_CODE_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", expirationMinutes.toString()), appName && (_jsxs(_Fragment, { children: [" ", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] }), _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
 };
-//#endregion
-export { y as default };
+OtpEmail.localization = otpEmailLocalization;
+OtpEmail.PreviewProps = {
+    verificationCode: "069420",
+    email: "m@example.com",
+    appName: "Better Auth",
+    darkMode: true
+};
+export default OtpEmail;

package/dist/components/auth/email/password-changed.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { EmailClassNames, EmailColors } from './email-styles';
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
 declare const passwordChangedEmailLocalization: {
     YOUR_PASSWORD_HAS_BEEN_CHANGED: string;
     LOGO: string;

package/dist/components/auth/email/password-changed.js

@@ -1,159 +1,76 @@
-import { cn as e } from "../../../lib/utils.js";
-import t from "./email-styles.js";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/auth/email/password-changed.tsx
-var y = {
-	YOUR_PASSWORD_HAS_BEEN_CHANGED: "Your password has been changed",
-	LOGO: "Logo",
-	PASSWORD_CHANGED_SUCCESSFULLY: "Password changed successfully",
-	PASSWORD_FOR_YOUR_ACCOUNT_CHANGED: "The password for your {appName} account {userEmail} has been changed successfully.",
-	CHANGED_AT: "Changed at",
-	IF_YOU_MADE_THIS_CHANGE: "If you made this change, you can safely ignore this email. Your account is secure.",
-	I_DIDNT_MAKE_THIS_CHANGE: "I didn't make this change",
-	EMAIL_SENT_BY: "Email sent by {appName}.",
-	IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: "If you didn't authorize this change, please contact support immediately {supportEmail} to secure your account.",
-	POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
-}, b = ({ email: y, timestamp: x, secureAccountURL: S, appName: C, supportEmail: w, logoURL: T, colors: E, classNames: D, darkMode: O = !0, poweredBy: k, head: A, ...j }) => {
-	let M = {
-		...b.localization,
-		...j.localization
-	}, N = M.YOUR_PASSWORD_HAS_BEEN_CHANGED;
-	return /* @__PURE__ */ i(d, { children: [
-		/* @__PURE__ */ i(c, { children: [
-			/* @__PURE__ */ r("meta", {
-				content: "light dark",
-				name: "color-scheme"
-			}),
-			/* @__PURE__ */ r("meta", {
-				content: "light dark",
-				name: "supported-color-schemes"
-			}),
-			/* @__PURE__ */ r(t, {
-				colors: E,
-				darkMode: O
-			}),
-			A
-		] }),
-		/* @__PURE__ */ r(m, { children: N }),
-		/* @__PURE__ */ r(g, {
-			config: { presets: [v] },
-			children: /* @__PURE__ */ r(a, {
-				className: e("bg-background font-sans", D?.body),
-				children: /* @__PURE__ */ r(s, {
-					className: e("mx-auto my-auto max-w-xl px-2 py-10", D?.container),
-					children: /* @__PURE__ */ i(h, {
-						className: e("bg-card text-card-foreground rounded-none border border-border p-8", D?.card),
-						children: [
-							T && (typeof T == "string" ? /* @__PURE__ */ r(f, {
-								src: T,
-								width: 48,
-								height: 48,
-								alt: C || M.LOGO,
-								className: e("mx-auto mb-8", D?.logo)
-							}) : /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(f, {
-								src: T.light,
-								width: 48,
-								height: 48,
-								alt: C || M.LOGO,
-								className: e("mx-auto mb-8 logo-light", D?.logo)
-							}), /* @__PURE__ */ r(f, {
-								src: T.dark,
-								width: 48,
-								height: 48,
-								alt: C || M.LOGO,
-								className: e("hidden mx-auto mb-8 logo-dark", D?.logo)
-							})] })),
-							/* @__PURE__ */ r(l, {
-								className: e("m-0 mb-5 text-2xl font-semibold", D?.title),
-								children: M.PASSWORD_CHANGED_SUCCESSFULLY
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("text-sm font-normal", D?.content),
-								children: (() => {
-									let e = M.PASSWORD_FOR_YOUR_ACCOUNT_CHANGED.replace("{appName}", C || "").replace(/\s{2,}/g, " ").replace(" .", "."), [t, a] = e.split("{userEmail}");
-									return y ? /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: `mailto:${y}`,
-											className: "text-primary font-medium",
-											children: y
-										}),
-										a
-									] }) : e.replace("{userEmail}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							x && /* @__PURE__ */ i(h, {
-								className: e("my-6 border border-border bg-muted p-4", D?.codeBlock),
-								children: [/* @__PURE__ */ i(_, {
-									className: e("m-0 mb-2 text-xs text-muted-foreground", D?.description),
-									children: [M.CHANGED_AT, ":"]
-								}), /* @__PURE__ */ r(_, {
-									className: e("m-0 text-sm font-semibold", D?.content),
-									children: x
-								})]
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("text-sm font-normal", D?.content),
-								children: M.IF_YOU_MADE_THIS_CHANGE
-							}),
-							S && /* @__PURE__ */ r(h, {
-								className: "mt-6",
-								children: /* @__PURE__ */ r(o, {
-									href: S,
-									className: e("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", D?.button),
-									children: M.I_DIDNT_MAKE_THIS_CHANGE
-								})
-							}),
-							/* @__PURE__ */ r(u, { className: e("my-6 w-full border border-solid border-border", D?.separator) }),
-							C && /* @__PURE__ */ r(_, {
-								className: e("mb-3 text-xs text-muted-foreground", D?.description),
-								children: M.EMAIL_SENT_BY.replace("{appName}", C)
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("mt-3 text-xs text-muted-foreground", D?.description),
-								children: (() => {
-									let [t, a] = M.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.split("{supportEmail}");
-									return w ? /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: `mailto:${w}`,
-											className: e("text-primary underline", D?.link),
-											children: w
-										}),
-										a
-									] }) : M.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.replace("{supportEmail}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							k && /* @__PURE__ */ r(_, {
-								className: e("mt-4 mb-0 text-center text-[11px] text-muted-foreground", D?.poweredBy),
-								children: (() => {
-									let [t, a] = M.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
-									return /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: "https://better-auth.com",
-											className: e("text-primary underline", D?.link),
-											children: "better-auth"
-										}),
-										a
-									] });
-								})()
-							})
-						]
-					})
-				})
-			})
-		})
-	] });
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const passwordChangedEmailLocalization = {
+    YOUR_PASSWORD_HAS_BEEN_CHANGED: "Your password has been changed",
+    LOGO: "Logo",
+    PASSWORD_CHANGED_SUCCESSFULLY: "Password changed successfully",
+    PASSWORD_FOR_YOUR_ACCOUNT_CHANGED: "The password for your {appName} account {userEmail} has been changed successfully.",
+    CHANGED_AT: "Changed at",
+    IF_YOU_MADE_THIS_CHANGE: "If you made this change, you can safely ignore this email. Your account is secure.",
+    I_DIDNT_MAKE_THIS_CHANGE: "I didn't make this change",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE: "If you didn't authorize this change, please contact support immediately {supportEmail} to secure your account.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
 };
-b.localization = y, b.PreviewProps = {
-	email: "m@example.com",
-	timestamp: "February 10, 2025 at 4:20 PM UTC",
-	secureAccountURL: "https://better-auth-ui.com/settings/security",
-	appName: "Better Auth",
-	supportEmail: "support@example.com",
-	darkMode: !0
+/**
+ * Email template component that notifies users when their password has been changed.
+ *
+ * This email includes:
+ * - Password change confirmation message
+ * - Timestamp of the change
+ * - Secure account action button if unauthorized change occurred
+ * - Security warnings and support contact information
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <PasswordChangedEmail
+ *   email="user@example.com"
+ *   timestamp="February 10, 2025 at 4:20 PM UTC"
+ *   secureAccountURL="https://example.com/settings/security"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const PasswordChangedEmail = ({ email, timestamp, secureAccountURL, appName, supportEmail, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...PasswordChangedEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.YOUR_PASSWORD_HAS_BEEN_CHANGED;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: localization.PASSWORD_CHANGED_SUCCESSFULLY }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.PASSWORD_FOR_YOUR_ACCOUNT_CHANGED.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeUserEmail, afterUserEmail] = textWithAppName.split("{userEmail}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeUserEmail, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterUserEmail] })) : (textWithAppName
+                                            .replace("{userEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), timestamp && (_jsxs(Section, { className: cn("my-6 border border-border bg-muted p-4", classNames?.codeBlock), children: [_jsxs(Text, { className: cn("m-0 mb-2 text-xs text-muted-foreground", classNames?.description), children: [localization.CHANGED_AT, ":"] }), _jsx(Text, { className: cn("m-0 text-sm font-semibold", classNames?.content), children: timestamp })] })), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.IF_YOU_MADE_THIS_CHANGE }), secureAccountURL && (_jsx(Section, { className: "mt-6", children: _jsx(Button, { href: secureAccountURL, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: localization.I_DIDNT_MAKE_THIS_CHANGE }) })), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), appName && (_jsx(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.EMAIL_SENT_BY.replace("{appName}", appName) })), _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: (() => {
+                                        const [beforeSupportEmail, afterSupportEmail] = localization.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.split("{supportEmail}");
+                                        return supportEmail ? (_jsxs(_Fragment, { children: [beforeSupportEmail, _jsx(Link, { href: `mailto:${supportEmail}`, className: cn("text-primary underline", classNames?.link), children: supportEmail }), afterSupportEmail] })) : (localization.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.replace("{supportEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
 };
-//#endregion
-export { b as default };
+PasswordChangedEmail.localization = passwordChangedEmailLocalization;
+PasswordChangedEmail.PreviewProps = {
+    email: "m@example.com",
+    timestamp: "February 10, 2025 at 4:20 PM UTC",
+    secureAccountURL: "https://better-auth-ui.com/settings/security",
+    appName: "Better Auth",
+    supportEmail: "support@example.com",
+    darkMode: true
+};
+export default PasswordChangedEmail;

package/dist/components/auth/email/reset-password.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { EmailClassNames, EmailColors } from './email-styles';
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
 declare const resetPasswordEmailLocalization: {
     RESET_YOUR_PASSWORD: string;
     LOGO: string;