@better-auth-ui/react 1.6.1 → 1.6.2

package/dist/components/email/new-device.js

@@ -1,90 +1,223 @@
-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 newDeviceEmailLocalization = {
-    NEW_SIGN_IN_DETECTED: "New sign-in detected",
-    LOGO: "Logo",
-    NEW_SIGN_IN_TO_YOUR_ACCOUNT: "We detected a new sign-in to your {appName} account {userEmail} from a device we don't recognize.",
-    DEVICE_DETAILS: "Device details",
-    BROWSER: "Browser",
-    OPERATING_SYSTEM: "Operating System",
-    LOCATION: "Location",
-    IP_ADDRESS: "IP Address",
-    TIME: "Time",
-    IF_THIS_WAS_YOU: "If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.",
-    SECURE_MY_ACCOUNT: "Secure my account",
-    EMAIL_SENT_BY: "Email sent by {appName}.",
-    IF_YOU_DIDNT_SIGN_IN: "If you didn't sign in, please contact support immediately {supportEmail} to secure your account.",
-    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+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/email/new-device.tsx
+var y = {
+	NEW_SIGN_IN_DETECTED: "New sign-in detected",
+	LOGO: "Logo",
+	NEW_SIGN_IN_TO_YOUR_ACCOUNT: "We detected a new sign-in to your {appName} account {userEmail} from a device we don't recognize.",
+	DEVICE_DETAILS: "Device details",
+	BROWSER: "Browser",
+	OPERATING_SYSTEM: "Operating System",
+	LOCATION: "Location",
+	IP_ADDRESS: "IP Address",
+	TIME: "Time",
+	IF_THIS_WAS_YOU: "If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.",
+	SECURE_MY_ACCOUNT: "Secure my account",
+	EMAIL_SENT_BY: "Email sent by {appName}.",
+	IF_YOU_DIDNT_SIGN_IN: "If you didn't sign in, please contact support immediately {supportEmail} to secure your account.",
+	POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+}, b = ({ userEmail: y, deviceInfo: x, secureAccountLink: 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.NEW_SIGN_IN_DETECTED;
+	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.NEW_SIGN_IN_DETECTED
+							}),
+							/* @__PURE__ */ r(_, {
+								className: e("text-sm font-normal", D?.content),
+								children: (() => {
+									let e = M.NEW_SIGN_IN_TO_YOUR_ACCOUNT.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-3 text-xs text-muted-foreground", D?.description),
+										children: [M.DEVICE_DETAILS, ":"]
+									}),
+									x.browser && /* @__PURE__ */ i(_, {
+										className: e("m-0 mb-2 text-sm", D?.content),
+										children: [
+											/* @__PURE__ */ i("span", {
+												className: "font-semibold",
+												children: [M.BROWSER, ":"]
+											}),
+											" ",
+											x.browser
+										]
+									}),
+									x.os && /* @__PURE__ */ i(_, {
+										className: e("m-0 mb-2 text-sm", D?.content),
+										children: [
+											/* @__PURE__ */ i("span", {
+												className: "font-semibold",
+												children: [M.OPERATING_SYSTEM, ":"]
+											}),
+											" ",
+											x.os
+										]
+									}),
+									x.location && /* @__PURE__ */ i(_, {
+										className: e("m-0 mb-2 text-sm", D?.content),
+										children: [
+											/* @__PURE__ */ i("span", {
+												className: "font-semibold",
+												children: [M.LOCATION, ":"]
+											}),
+											" ",
+											x.location
+										]
+									}),
+									x.ipAddress && /* @__PURE__ */ i(_, {
+										className: e("m-0 mb-2 text-sm", D?.content),
+										children: [
+											/* @__PURE__ */ i("span", {
+												className: "font-semibold",
+												children: [M.IP_ADDRESS, ":"]
+											}),
+											" ",
+											x.ipAddress
+										]
+									}),
+									x.timestamp && /* @__PURE__ */ i(_, {
+										className: e("m-0 text-sm", D?.content),
+										children: [
+											/* @__PURE__ */ i("span", {
+												className: "font-semibold",
+												children: [M.TIME, ":"]
+											}),
+											" ",
+											x.timestamp
+										]
+									})
+								]
+							}),
+							/* @__PURE__ */ r(_, {
+								className: e("text-sm font-normal", D?.content),
+								children: M.IF_THIS_WAS_YOU
+							}),
+							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.SECURE_MY_ACCOUNT
+								})
+							}),
+							/* @__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_SIGN_IN.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_SIGN_IN.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
+									] });
+								})()
+							})
+						]
+					})
+				})
+			})
+		})
+	] });
 };
-/**
- * Email template component that notifies users when a new device signs into their account.
- *
- * This email includes:
- * - Device information display (browser, OS, location, IP, timestamp)
- * - Secure account action button
- * - Security warnings and support contact information
- * - Customizable branding and styling
- * - Support for light/dark mode themes
- *
- * @example
- * ```tsx
- * <NewDeviceEmail
- *   userEmail="user@example.com"
- *   deviceInfo={{
- *     browser: "Chrome on macOS",
- *     os: "macOS 14.0",
- *     location: "San Francisco, CA",
- *     ipAddress: "192.168.1.1",
- *     timestamp: "February 10, 2025 at 4:20 PM UTC"
- *   }}
- *   secureAccountLink="https://example.com/secure-account"
- *   appName="My App"
- *   supportEmail="support@example.com"
- *   darkMode={true}
- * />
- * ```
- */
-export const NewDeviceEmail = ({ userEmail, deviceInfo, secureAccountLink, appName, supportEmail, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
-    const localization = {
-        ...NewDeviceEmail.localization,
-        ...props.localization
-    };
-    const previewText = localization.NEW_SIGN_IN_DETECTED;
-    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.NEW_SIGN_IN_DETECTED }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
-                                        const textWithAppName = localization.NEW_SIGN_IN_TO_YOUR_ACCOUNT.replace("{appName}", appName || "")
-                                            .replace(/\s{2,}/g, " ")
-                                            .replace(" .", ".");
-                                        const [beforeUserEmail, afterUserEmail] = textWithAppName.split("{userEmail}");
-                                        return userEmail ? (_jsxs(_Fragment, { children: [beforeUserEmail, _jsx(Link, { href: `mailto:${userEmail}`, className: "text-primary font-medium", children: userEmail }), afterUserEmail] })) : (textWithAppName
-                                            .replace("{userEmail}", "")
-                                            .replace(/\s{2,}/g, " ")
-                                            .replace(" .", "."));
-                                    })() }), deviceInfo && (_jsxs(Section, { className: cn("my-6 border border-border bg-muted p-4", classNames?.codeBlock), children: [_jsxs(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: [localization.DEVICE_DETAILS, ":"] }), deviceInfo.browser && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.BROWSER, ":"] }), " ", deviceInfo.browser] })), deviceInfo.os && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.OPERATING_SYSTEM, ":"] }), " ", deviceInfo.os] })), deviceInfo.location && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.LOCATION, ":"] }), " ", deviceInfo.location] })), deviceInfo.ipAddress && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.IP_ADDRESS, ":"] }), " ", deviceInfo.ipAddress] })), deviceInfo.timestamp && (_jsxs(Text, { className: cn("m-0 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.TIME, ":"] }), " ", deviceInfo.timestamp] }))] })), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.IF_THIS_WAS_YOU }), secureAccountLink && (_jsx(Section, { className: "mt-6", children: _jsx(Button, { href: secureAccountLink, 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.SECURE_MY_ACCOUNT }) })), _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_SIGN_IN.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_SIGN_IN.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] }));
-                                    })() }))] }) }) }) })] }));
+b.localization = y, b.PreviewProps = {
+	userEmail: "m@example.com",
+	deviceInfo: {
+		browser: "Chrome on macOS",
+		os: "macOS 26.2",
+		location: "San Francisco, CA, United States",
+		ipAddress: "127.0.0.1",
+		timestamp: "February 10, 2025 at 4:20 PM UTC"
+	},
+	secureAccountLink: "https://better-auth-ui.com/auth/secure-account",
+	appName: "Better Auth",
+	supportEmail: "support@example.com",
+	darkMode: !0
 };
-NewDeviceEmail.localization = newDeviceEmailLocalization;
-NewDeviceEmail.PreviewProps = {
-    userEmail: "m@example.com",
-    deviceInfo: {
-        browser: "Chrome on macOS",
-        os: "macOS 26.2",
-        location: "San Francisco, CA, United States",
-        ipAddress: "127.0.0.1",
-        timestamp: "February 10, 2025 at 4:20 PM UTC"
-    },
-    secureAccountLink: "https://better-auth-ui.com/auth/secure-account",
-    appName: "Better Auth",
-    supportEmail: "support@example.com",
-    darkMode: true
-};
-export default NewDeviceEmail;
+//#endregion
+export { b as default };

package/dist/components/email/otp-email.d.ts

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

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

@@ -1,65 +1,129 @@
-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}"
+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/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
+									] });
+								})()
+							})
+						]
+					})
+				})
+			})
+		})
+	] });
 };
-/**
- * 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] }));
-                                    })() }))] }) }) }) })] }));
+y.localization = v, y.PreviewProps = {
+	verificationCode: "069420",
+	email: "m@example.com",
+	appName: "Better Auth",
+	darkMode: !0
 };
-OtpEmail.localization = otpEmailLocalization;
-OtpEmail.PreviewProps = {
-    verificationCode: "069420",
-    email: "m@example.com",
-    appName: "Better Auth",
-    darkMode: true
-};
-export default OtpEmail;
+//#endregion
+export { y as default };

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

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