@better-auth-ui/react 1.6.7 → 1.6.9

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

@@ -1,140 +1,75 @@
-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/email-verification.tsx
-var y = {
-	VERIFY_YOUR_EMAIL_ADDRESS: "Verify your email address",
-	LOGO: "Logo",
-	CLICK_BUTTON_TO_VERIFY_EMAIL: "Click the button below to verify your email address {emailAddress} for your {appName} account.",
-	VERIFY_EMAIL_ADDRESS: "Verify email address",
-	OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
-	THIS_LINK_EXPIRES_IN_MINUTES: "This link 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}"
-}, b = ({ url: y, email: x, appName: S, expirationMinutes: C = 60, logoURL: w, colors: T, classNames: E, darkMode: D = !0, poweredBy: O, head: k, ...A }) => {
-	let j = {
-		...b.localization,
-		...A.localization
-	}, M = j.VERIFY_YOUR_EMAIL_ADDRESS;
-	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: T,
-				darkMode: D
-			}),
-			k
-		] }),
-		/* @__PURE__ */ r(m, { children: M }),
-		/* @__PURE__ */ r(g, {
-			config: { presets: [v] },
-			children: /* @__PURE__ */ r(a, {
-				className: e("bg-background font-sans", E?.body),
-				children: /* @__PURE__ */ r(s, {
-					className: e("mx-auto my-auto max-w-xl px-2 py-10", E?.container),
-					children: /* @__PURE__ */ i(h, {
-						className: e("bg-card text-card-foreground rounded-none border border-border p-8", E?.card),
-						children: [
-							w && (typeof w == "string" ? /* @__PURE__ */ r(f, {
-								src: w,
-								width: 48,
-								height: 48,
-								alt: S || j.LOGO,
-								className: e("mx-auto mb-8", E?.logo)
-							}) : /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(f, {
-								src: w.light,
-								width: 48,
-								height: 48,
-								alt: S || j.LOGO,
-								className: e("mx-auto mb-8 logo-light", E?.logo)
-							}), /* @__PURE__ */ r(f, {
-								src: w.dark,
-								width: 48,
-								height: 48,
-								alt: S || j.LOGO,
-								className: e("hidden mx-auto mb-8 logo-dark", E?.logo)
-							})] })),
-							/* @__PURE__ */ r(l, {
-								className: e("m-0 mb-5 text-2xl font-semibold", E?.title),
-								children: j.VERIFY_EMAIL_ADDRESS
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("text-sm font-normal", E?.content),
-								children: (() => {
-									let e = j.CLICK_BUTTON_TO_VERIFY_EMAIL.replace("{appName}", S || "").replace(/\s{2,}/g, " ").replace(" .", "."), [t, a] = e.split("{emailAddress}");
-									return x ? /* @__PURE__ */ i(n, { children: [
-										t,
-										/* @__PURE__ */ r(p, {
-											href: `mailto:${x}`,
-											className: "text-primary font-medium",
-											children: x
-										}),
-										a
-									] }) : e.replace("{emailAddress}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							/* @__PURE__ */ r(h, {
-								className: "my-6",
-								children: /* @__PURE__ */ r(o, {
-									href: y,
-									className: e("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", E?.button),
-									children: j.VERIFY_EMAIL_ADDRESS
-								})
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("mb-3 text-xs text-muted-foreground", E?.description),
-								children: j.OR_COPY_AND_PASTE_URL
-							}),
-							/* @__PURE__ */ r(p, {
-								className: e("break-all text-xs text-primary", E?.link),
-								href: y,
-								children: y
-							}),
-							/* @__PURE__ */ r(u, { className: e("my-6 w-full border border-solid border-border", E?.separator) }),
-							C || S ? /* @__PURE__ */ i(_, {
-								className: e("mb-3 text-xs text-muted-foreground", E?.description),
-								children: [C ? j.THIS_LINK_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", C.toString()) : null, S && /* @__PURE__ */ i(n, { children: [C ? " " : "", j.EMAIL_SENT_BY.replace("{appName}", S)] })]
-							}) : null,
-							/* @__PURE__ */ r(_, {
-								className: e("mt-3 text-xs text-muted-foreground", E?.description),
-								children: j.IF_YOU_DIDNT_REQUEST_THIS_EMAIL
-							}),
-							O && /* @__PURE__ */ r(_, {
-								className: e("mt-4 mb-0 text-center text-[11px] text-muted-foreground", E?.poweredBy),
-								children: (() => {
-									let [t, a] = j.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", E?.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 emailVerificationEmailLocalization = {
+    VERIFY_YOUR_EMAIL_ADDRESS: "Verify your email address",
+    LOGO: "Logo",
+    CLICK_BUTTON_TO_VERIFY_EMAIL: "Click the button below to verify your email address {emailAddress} for your {appName} account.",
+    VERIFY_EMAIL_ADDRESS: "Verify email address",
+    OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+    THIS_LINK_EXPIRES_IN_MINUTES: "This link 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}"
 };
-b.localization = y, b.PreviewProps = {
-	url: "https://better-auth-ui.com/auth/verify-email?token=example-token",
-	appName: "Better Auth",
-	email: "m@example.com",
-	darkMode: !0
+/**
+ * Email template component that sends email verification links to users.
+ *
+ * This email includes:
+ * - Verification button and fallback URL
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailVerificationEmail
+ *   url="https://example.com/verify?token=abc123"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={60}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailVerificationEmail = ({ url, email, appName, expirationMinutes = 60, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...EmailVerificationEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.VERIFY_YOUR_EMAIL_ADDRESS;
+    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.VERIFY_EMAIL_ADDRESS }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.CLICK_BUTTON_TO_VERIFY_EMAIL.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeEmailAddress, afterEmailAddress] = textWithAppName.split("{emailAddress}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeEmailAddress, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterEmailAddress] })) : (textWithAppName
+                                            .replace("{emailAddress}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), _jsx(Section, { className: "my-6", children: _jsx(Button, { href: url, 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.VERIFY_EMAIL_ADDRESS }) }), _jsx(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.OR_COPY_AND_PASTE_URL }), _jsx(Link, { className: cn("break-all text-xs text-primary", classNames?.link), href: url, children: url }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), expirationMinutes || appName ? (_jsxs(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: [expirationMinutes
+                                            ? localization.THIS_LINK_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", expirationMinutes.toString())
+                                            : null, appName && (_jsxs(_Fragment, { children: [expirationMinutes ? " " : "", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] })) : null, _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 { b as default };
+/**
+ * Default localization strings for the email verification template.
+ * Can be overridden via the `localization` prop.
+ */
+EmailVerificationEmail.localization = emailVerificationEmailLocalization;
+/**
+ * Example props for previewing the email template in development.
+ */
+EmailVerificationEmail.PreviewProps = {
+    url: "https://better-auth-ui.com/auth/verify-email?token=example-token",
+    appName: "Better Auth",
+    email: "m@example.com",
+    darkMode: true
+};
+export default EmailVerificationEmail;

package/dist/components/auth/email/index.d.ts

@@ -1,9 +1,10 @@
-export * from './email-changed';
-export * from './email-localization';
-export * from './email-styles';
-export * from './email-verification';
-export * from './magic-link';
-export * from './new-device';
-export * from './otp-email';
-export * from './password-changed';
-export * from './reset-password';
+export * from "./email-changed";
+export * from "./email-localization";
+export * from "./email-styles";
+export * from "./email-verification";
+export * from "./magic-link";
+export * from "./new-device";
+export * from "./organization-invitation";
+export * from "./otp-email";
+export * from "./password-changed";
+export * from "./reset-password";

package/dist/components/auth/email/index.js

@@ -1,9 +1,10 @@
-import "./email-styles.js";
-import "./email-changed.js";
-import "./email-verification.js";
-import "./magic-link.js";
-import "./new-device.js";
-import "./otp-email.js";
-import "./password-changed.js";
-import "./reset-password.js";
-import "./email-localization.js";
+export * from "./email-changed";
+export * from "./email-localization";
+export * from "./email-styles";
+export * from "./email-verification";
+export * from "./magic-link";
+export * from "./new-device";
+export * from "./organization-invitation";
+export * from "./otp-email";
+export * from "./password-changed";
+export * from "./reset-password";

package/dist/components/auth/email/magic-link.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 magicLinkEmailLocalization: {
     SIGN_IN_TO_APP_NAME: string;
     SIGN_IN_TO_YOUR_ACCOUNT: string;

package/dist/components/auth/email/magic-link.js

@@ -1,141 +1,72 @@
-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/magic-link.tsx
-var y = {
-	SIGN_IN_TO_APP_NAME: "Sign in to {appName}",
-	SIGN_IN_TO_YOUR_ACCOUNT: "Sign in to your account",
-	YOUR_ACCOUNT: "your account",
-	LOGO: "Logo",
-	CLICK_BUTTON_TO_SIGN_IN: "Click the button below to sign in to your account {emailAddress}.",
-	OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
-	THIS_LINK_EXPIRES_IN_MINUTES: "This link 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}"
-}, b = ({ url: y, email: x, appName: S, expirationMinutes: C = 5, logoURL: w, colors: T, classNames: E, darkMode: D = !0, poweredBy: O, head: k, ...A }) => {
-	let j = {
-		...b.localization,
-		...A.localization
-	}, M = S ? j.SIGN_IN_TO_APP_NAME.replace("{appName}", S) : j.SIGN_IN_TO_YOUR_ACCOUNT;
-	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: T,
-				darkMode: D
-			}),
-			k
-		] }),
-		/* @__PURE__ */ r(m, { children: M }),
-		/* @__PURE__ */ r(g, {
-			config: { presets: [v] },
-			children: /* @__PURE__ */ r(a, {
-				className: e("bg-background font-sans", E?.body),
-				children: /* @__PURE__ */ r(s, {
-					className: e("mx-auto my-auto max-w-xl px-2 py-10", E?.container),
-					children: /* @__PURE__ */ i(h, {
-						className: e("bg-card text-card-foreground rounded-none border border-border p-8", E?.card),
-						children: [
-							w && (typeof w == "string" ? /* @__PURE__ */ r(f, {
-								src: w,
-								width: 48,
-								height: 48,
-								alt: S || j.LOGO,
-								className: e("mx-auto mb-8", E?.logo)
-							}) : /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(f, {
-								src: w.light,
-								width: 48,
-								height: 48,
-								alt: S || j.LOGO,
-								className: e("mx-auto mb-8 logo-light", E?.logo)
-							}), /* @__PURE__ */ r(f, {
-								src: w.dark,
-								width: 48,
-								height: 48,
-								alt: S || j.LOGO,
-								className: e("hidden mx-auto mb-8 logo-dark", E?.logo)
-							})] })),
-							/* @__PURE__ */ r(l, {
-								className: e("m-0 mb-5 text-2xl font-semibold", E?.title),
-								children: S ? j.SIGN_IN_TO_APP_NAME.replace("{appName}", S) : j.SIGN_IN_TO_YOUR_ACCOUNT
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("m-0 text-sm font-normal", E?.content),
-								children: (() => {
-									let [e, t] = j.CLICK_BUTTON_TO_SIGN_IN.split("{emailAddress}");
-									return x ? /* @__PURE__ */ i(n, { children: [
-										e,
-										/* @__PURE__ */ r(p, {
-											href: `mailto:${x}`,
-											className: "text-primary font-medium",
-											children: x
-										}),
-										t
-									] }) : j.CLICK_BUTTON_TO_SIGN_IN.replace("{emailAddress}", "").replace(/\s{2,}/g, " ").replace(" .", ".");
-								})()
-							}),
-							/* @__PURE__ */ r(h, {
-								className: "my-6",
-								children: /* @__PURE__ */ r(o, {
-									href: y,
-									className: e("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", E?.button),
-									children: S ? j.SIGN_IN_TO_APP_NAME.replace("{appName}", S) : j.SIGN_IN_TO_YOUR_ACCOUNT
-								})
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("m-0 mb-3 text-xs text-muted-foreground", E?.description),
-								children: j.OR_COPY_AND_PASTE_URL
-							}),
-							/* @__PURE__ */ r(p, {
-								className: e("break-all text-xs text-primary", E?.link),
-								href: y,
-								children: y
-							}),
-							/* @__PURE__ */ r(u, { className: e("my-6 w-full border border-solid border-border", E?.separator) }),
-							C || S ? /* @__PURE__ */ i(_, {
-								className: e("m-0 mb-3 text-xs text-muted-foreground", E?.description),
-								children: [C ? j.THIS_LINK_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", C.toString()) : null, S && /* @__PURE__ */ i(n, { children: [C ? " " : "", j.EMAIL_SENT_BY.replace("{appName}", S)] })]
-							}) : null,
-							/* @__PURE__ */ r(_, {
-								className: e("m-0 text-xs text-muted-foreground", E?.description),
-								children: j.IF_YOU_DIDNT_REQUEST_THIS_EMAIL
-							}),
-							O && /* @__PURE__ */ r(_, {
-								className: e("m-0 mt-4 text-center text-[11px] text-muted-foreground", E?.poweredBy),
-								children: (() => {
-									let [t, a] = j.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", E?.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 magicLinkEmailLocalization = {
+    SIGN_IN_TO_APP_NAME: "Sign in to {appName}",
+    SIGN_IN_TO_YOUR_ACCOUNT: "Sign in to your account",
+    YOUR_ACCOUNT: "your account",
+    LOGO: "Logo",
+    CLICK_BUTTON_TO_SIGN_IN: "Click the button below to sign in to your account {emailAddress}.",
+    OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+    THIS_LINK_EXPIRES_IN_MINUTES: "This link 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}"
 };
-b.localization = y, b.PreviewProps = {
-	url: "https://better-auth-ui.com/auth/verify?token=example-token",
-	email: "m@example.com",
-	appName: "Better Auth",
-	darkMode: !0
+/**
+ * Email template component that sends magic link authentication emails for passwordless sign-in.
+ *
+ * This email includes:
+ * - Sign-in button with magic link
+ * - Fallback URL for manual copy/paste
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <MagicLinkEmail
+ *   url="https://example.com/auth/verify?token=abc123"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={5}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const MagicLinkEmail = ({ url, email, appName, expirationMinutes = 5, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...MagicLinkEmail.localization,
+        ...props.localization
+    };
+    const previewText = appName
+        ? localization.SIGN_IN_TO_APP_NAME.replace("{appName}", appName)
+        : localization.SIGN_IN_TO_YOUR_ACCOUNT;
+    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: appName
+                                        ? localization.SIGN_IN_TO_APP_NAME.replace("{appName}", appName)
+                                        : localization.SIGN_IN_TO_YOUR_ACCOUNT }), _jsx(Text, { className: cn("m-0 text-sm font-normal", classNames?.content), children: (() => {
+                                        const [beforeEmailAddress, afterEmailAddress] = localization.CLICK_BUTTON_TO_SIGN_IN.split("{emailAddress}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeEmailAddress, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterEmailAddress] })) : (localization.CLICK_BUTTON_TO_SIGN_IN.replace("{emailAddress}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), _jsx(Section, { className: "my-6", children: _jsx(Button, { href: url, 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: appName
+                                            ? localization.SIGN_IN_TO_APP_NAME.replace("{appName}", appName)
+                                            : localization.SIGN_IN_TO_YOUR_ACCOUNT }) }), _jsx(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.OR_COPY_AND_PASTE_URL }), _jsx(Link, { className: cn("break-all text-xs text-primary", classNames?.link), href: url, children: url }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), expirationMinutes || appName ? (_jsxs(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: [expirationMinutes
+                                            ? localization.THIS_LINK_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", expirationMinutes.toString())
+                                            : null, appName && (_jsxs(_Fragment, { children: [expirationMinutes ? " " : "", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] })) : null, _jsx(Text, { className: cn("m-0 text-xs text-muted-foreground", classNames?.description), children: localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL }), poweredBy && (_jsx(Text, { className: cn("m-0 mt-4 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 };
+MagicLinkEmail.localization = magicLinkEmailLocalization;
+MagicLinkEmail.PreviewProps = {
+    url: "https://better-auth-ui.com/auth/verify?token=example-token",
+    email: "m@example.com",
+    appName: "Better Auth",
+    darkMode: true
+};
+export default MagicLinkEmail;

package/dist/components/auth/email/new-device.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";
 /**
  * Device information displayed in the new device email notification.
  */