@better-auth-ui/react 1.6.8 → 1.6.9

package/dist/components/auth/auth-context.d.ts

@@ -0,0 +1,3 @@
+import type { AuthConfig } from "@better-auth-ui/core";
+/** Split from `auth-provider` so HMR reloading that file does not replace this context instance. */
+export declare const AuthContext: import("react").Context<AuthConfig | undefined>;

package/dist/components/auth/auth-context.js

@@ -0,0 +1,4 @@
+"use client";
+import { createContext } from "react";
+/** Split from `auth-provider` so HMR reloading that file does not replace this context instance. */
+export const AuthContext = createContext(undefined);

package/dist/components/auth/auth-provider.d.ts

@@ -1,7 +1,7 @@
-import { AuthConfig, DeepPartial } from '@better-auth-ui/core';
-import { QueryClient } from '@tanstack/react-query';
-import { PropsWithChildren, ReactNode } from 'react';
-import { AuthClient } from '../../lib/auth-client';
+import { type AuthConfig, type DeepPartial } from "@better-auth-ui/core";
+import { QueryClient } from "@tanstack/react-query";
+import { type PropsWithChildren, type ReactNode } from "react";
+import type { AuthClient } from "../../lib/auth-client";
 declare module "@better-auth-ui/core" {
     interface AuthConfig {
         /**

package/dist/components/auth/auth-provider.js

@@ -1,44 +1,68 @@
 "use client";
-import { FetchOptionsProvider as e } from "./fetch-options-provider.js";
-import { deepmerge as t, defaultAuthConfig as n } from "@better-auth-ui/core";
-import { QueryClient as r, QueryClientContext as i, QueryClientProvider as a } from "@tanstack/react-query";
-import { createContext as o, useContext as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-//#region src/components/auth/auth-provider.tsx
-var l = o(void 0), u = new r({ defaultOptions: { queries: { staleTime: 5e3 } } });
-function d({ children: r, queryClient: o, ...d }) {
-	let f = t(n, {
-		...d,
-		viewPaths: {
-			auth: {
-				...n.viewPaths.auth,
-				...d.viewPaths?.auth
-			},
-			settings: {
-				...n.viewPaths.settings,
-				...d.viewPaths?.settings
-			}
-		}
-	});
-	f.redirectTo = typeof window < "u" && new URLSearchParams(window.location.search).get("redirectTo")?.trim() || f.redirectTo;
-	let p = /* @__PURE__ */ new Map();
-	for (let e of f.plugins ?? []) for (let t of e.additionalFields ?? []) p.set(t.name, t);
-	for (let e of f.additionalFields ?? []) p.set(e.name, e);
-	return f.additionalFields = Array.from(p.values()), s(i) ? /* @__PURE__ */ c(l.Provider, {
-		value: f,
-		children: /* @__PURE__ */ c(e, { children: r })
-	}) : /* @__PURE__ */ c(a, {
-		client: o || u,
-		children: /* @__PURE__ */ c(l.Provider, {
-			value: f,
-			children: /* @__PURE__ */ c(e, { children: r })
-		})
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { deepmerge, defaultAuthConfig } from "@better-auth-ui/core";
+import { QueryClient, QueryClientContext, QueryClientProvider } from "@tanstack/react-query";
+import { useContext } from "react";
+import { MutationInvalidator } from "../mutation-invalidator";
+import { AuthContext } from "./auth-context";
+import { FetchOptionsProvider } from "./fetch-options-provider";
+const fallbackQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 5000
+        }
+    }
+});
+/**
+ * Provides merged authentication configuration and a resolved React Query client to descendant components.
+ *
+ * The component merges the provided auth config with the library defaults, updates `redirectTo` from the
+ * current URL when the app is hydrated, wires a QueryClient (prop, context, or fallback) and installs an
+ * error handler that surfaces query errors via the configured toast. It then supplies the merged config
+ * via AuthContext and wraps children with QueryClientProvider.
+ *
+ * @returns The children wrapped with AuthContext.Provider and QueryClientProvider configured for auth.
+ */
+export function AuthProvider({ children, queryClient, ...config }) {
+    const { authClient, ...partialConfig } = config;
+    const mergedConfig = {
+        ...deepmerge(defaultAuthConfig, partialConfig),
+        authClient
+    };
+    mergedConfig.redirectTo =
+        (typeof window !== "undefined" &&
+            new URLSearchParams(window.location.search).get("redirectTo")?.trim()) ||
+            mergedConfig.redirectTo;
+    // Merge plugin-contributed `additionalFields` with user-supplied ones.
+    // Plugin order is preserved; user-supplied entries with the same `name`
+    // override the plugin contribution.
+    const fieldsByName = new Map();
+    for (const plugin of mergedConfig.plugins ?? []) {
+        for (const field of plugin.additionalFields ?? []) {
+            fieldsByName.set(field.name, field);
+        }
+    }
+    for (const field of mergedConfig.additionalFields ?? []) {
+        fieldsByName.set(field.name, field);
+    }
+    mergedConfig.additionalFields = Array.from(fieldsByName.values());
+    const contextQueryClient = useContext(QueryClientContext);
+    return (_jsx(QueryClientProvider, { client: queryClient || contextQueryClient || fallbackQueryClient, children: _jsx(AuthContext.Provider, { value: mergedConfig, children: _jsxs(FetchOptionsProvider, { children: [_jsx(MutationInvalidator, {}), children] }) }) }));
 }
-function f() {
-	let e = s(l);
-	if (!e) throw Error("[Better Auth UI] AuthProvider is required");
-	return e;
+/**
+ * Accesses the current authentication configuration from AuthContext.
+ *
+ * UI packages widen the plugin type globally via the `Register` interface
+ * (see module augmentation in `@better-auth-ui/heroui`), so callers don't
+ * need to pass a generic.
+ *
+ * @returns The merged authentication configuration provided by AuthProvider.
+ * @throws If no AuthProvider is present in the component tree.
+ */
+export function useAuth() {
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error("[Better Auth UI] AuthProvider is required");
+    }
+    return context;
 }
-//#endregion
-export { d as AuthProvider, f as useAuth };

package/dist/components/auth/email/email-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 emailChangedEmailLocalization: {
     YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: string;
     LOGO: string;

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

@@ -1,156 +1,70 @@
-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-changed.tsx
-var y = {
-	YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
-	LOGO: "Logo",
-	EMAIL_ADDRESS_CHANGED: "Email address changed",
-	EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: "The email address for your {appName} account has been changed.",
-	PREVIOUS_EMAIL: "Previous email:",
-	NEW_EMAIL: "New email:",
-	IF_YOU_MADE_THIS_CHANGE: "If you made this change, you can safely ignore this email.",
-	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 = ({ oldEmail: y, newEmail: x, revertURL: 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_EMAIL_ADDRESS_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.EMAIL_ADDRESS_CHANGED
-							}),
-							/* @__PURE__ */ r(_, {
-								className: e("text-sm font-normal", D?.content),
-								children: M.EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED.replace("{appName}", C || "").replace(/\s{2,}/g, " ").replace(" .", ".")
-							}),
-							(y || x) && /* @__PURE__ */ i(h, {
-								className: e("my-6 border border-border bg-muted p-4", D?.codeBlock),
-								children: [y && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(_, {
-									className: e("m-0 mb-2 text-xs text-muted-foreground", D?.description),
-									children: M.PREVIOUS_EMAIL
-								}), /* @__PURE__ */ r(_, {
-									className: e("m-0 mb-4 text-sm font-semibold", D?.content),
-									children: y
-								})] }), x && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(_, {
-									className: e("m-0 mb-2 text-xs text-muted-foreground", D?.description),
-									children: M.NEW_EMAIL
-								}), /* @__PURE__ */ r(_, {
-									className: e("m-0 text-sm font-semibold text-primary", 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: "my-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 emailChangedEmailLocalization = {
+    YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
+    LOGO: "Logo",
+    EMAIL_ADDRESS_CHANGED: "Email address changed",
+    EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED: "The email address for your {appName} account has been changed.",
+    PREVIOUS_EMAIL: "Previous email:",
+    NEW_EMAIL: "New email:",
+    IF_YOU_MADE_THIS_CHANGE: "If you made this change, you can safely ignore this email.",
+    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 = {
-	oldEmail: "old@example.com",
-	newEmail: "new@example.com",
-	supportEmail: "support@example.com",
-	revertURL: "https://better-auth-ui.com/auth/revert-email?token=example-token",
-	appName: "Better Auth",
-	poweredBy: !0,
-	darkMode: !0
+/**
+ * Email template component that notifies users when their email address has been changed.
+ *
+ * This email includes:
+ * - Display of both old and new email addresses
+ * - Revert action button if unauthorized change occurred
+ * - Security information and support contact details
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailChangedEmail
+ *   oldEmail="old@example.com"
+ *   newEmail="new@example.com"
+ *   revertURL="https://example.com/revert?token=abc123"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailChangedEmail = ({ oldEmail, newEmail, revertURL, appName, supportEmail, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...EmailChangedEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.YOUR_EMAIL_ADDRESS_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.EMAIL_ADDRESS_CHANGED }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED.replace("{appName}", appName || "")
+                                        .replace(/\s{2,}/g, " ")
+                                        .replace(" .", ".") }), (oldEmail || newEmail) && (_jsxs(Section, { className: cn("my-6 border border-border bg-muted p-4", classNames?.codeBlock), children: [oldEmail && (_jsxs(_Fragment, { children: [_jsx(Text, { className: cn("m-0 mb-2 text-xs text-muted-foreground", classNames?.description), children: localization.PREVIOUS_EMAIL }), _jsx(Text, { className: cn("m-0 mb-4 text-sm font-semibold", classNames?.content), children: oldEmail })] })), newEmail && (_jsxs(_Fragment, { children: [_jsx(Text, { className: cn("m-0 mb-2 text-xs text-muted-foreground", classNames?.description), children: localization.NEW_EMAIL }), _jsx(Text, { className: cn("m-0 text-sm font-semibold text-primary", classNames?.content), children: newEmail })] }))] })), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.IF_YOU_MADE_THIS_CHANGE }), revertURL && (_jsx(Section, { className: "my-6", children: _jsx(Button, { href: revertURL, 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 };
+EmailChangedEmail.localization = emailChangedEmailLocalization;
+EmailChangedEmail.PreviewProps = {
+    oldEmail: "old@example.com",
+    newEmail: "new@example.com",
+    supportEmail: "support@example.com",
+    revertURL: "https://better-auth-ui.com/auth/revert-email?token=example-token",
+    appName: "Better Auth",
+    poweredBy: true,
+    darkMode: true
+};
+export default EmailChangedEmail;

package/dist/components/auth/email/email-localization.d.ts

@@ -2,9 +2,9 @@
  * Aggregated localization strings for all email components.
  *
  * Combines localization strings from all email templates (EmailChangedEmail,
- * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail, OtpEmail,
- * PasswordChangedEmail, ResetPasswordEmail) into a single object for convenient
- * bulk customization.
+ * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail,
+ * OrganizationInvitationEmail, OtpEmail, PasswordChangedEmail,
+ * ResetPasswordEmail) into a single object for convenient bulk customization.
  */
 export declare const emailLocalization: {
     RESET_YOUR_PASSWORD: string;
@@ -28,6 +28,14 @@ export declare const emailLocalization: {
     WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: string;
     THIS_CODE_EXPIRES_IN_MINUTES: string;
     IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    YOU_RE_INVITED_TO_ORGANIZATION: string;
+    YOU_RE_INVITED: string;
+    ORGANIZATION_LOGO: string;
+    INVITED_TO_JOIN_ORGANIZATION: string;
+    ACCEPT_INVITATION: string;
+    VIEW_INVITATION: string;
+    THIS_INVITATION_EXPIRES_IN_HOURS: string;
+    IF_YOU_DIDNT_EXPECT_THIS_INVITATION: string;
     NEW_SIGN_IN_DETECTED: string;
     NEW_SIGN_IN_TO_YOUR_ACCOUNT: string;
     DEVICE_DETAILS: string;

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

@@ -1,19 +1,26 @@
-import e from "./email-changed.js";
-import t from "./email-verification.js";
-import n from "./magic-link.js";
-import r from "./new-device.js";
-import i from "./otp-email.js";
-import a from "./password-changed.js";
-import o from "./reset-password.js";
-//#region src/components/auth/email/email-localization.tsx
-var s = {
-	...e.localization,
-	...t.localization,
-	...n.localization,
-	...r.localization,
-	...i.localization,
-	...a.localization,
-	...o.localization
+import EmailChangedEmail from "./email-changed";
+import EmailVerificationEmail from "./email-verification";
+import MagicLinkEmail from "./magic-link";
+import NewDeviceEmail from "./new-device";
+import OrganizationInvitationEmail from "./organization-invitation";
+import OtpEmail from "./otp-email";
+import PasswordChangedEmail from "./password-changed";
+import ResetPasswordEmail from "./reset-password";
+/**
+ * Aggregated localization strings for all email components.
+ *
+ * Combines localization strings from all email templates (EmailChangedEmail,
+ * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail,
+ * OrganizationInvitationEmail, OtpEmail, PasswordChangedEmail,
+ * ResetPasswordEmail) into a single object for convenient bulk customization.
+ */
+export const emailLocalization = {
+    ...EmailChangedEmail.localization,
+    ...EmailVerificationEmail.localization,
+    ...MagicLinkEmail.localization,
+    ...NewDeviceEmail.localization,
+    ...OrganizationInvitationEmail.localization,
+    ...OtpEmail.localization,
+    ...PasswordChangedEmail.localization,
+    ...ResetPasswordEmail.localization
 };
-//#endregion
-export { s as emailLocalization };

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

@@ -1,57 +1,81 @@
-import { jsx as e } from "react/jsx-runtime";
-//#region src/components/auth/email/email-styles.tsx
-var t = {
-	light: {
-		background: "#F5F5F5",
-		border: "#E5E5E5",
-		card: "#FFFFFF",
-		cardForeground: "#0A0A0A",
-		foreground: "#262626",
-		muted: "#F5F5F5",
-		mutedForeground: "#737373",
-		primary: "#171717",
-		primaryForeground: "#FAFAFA"
-	},
-	dark: {
-		background: "#0A0A0A",
-		border: "#2E2E2E",
-		card: "#171717",
-		cardForeground: "#FAFAFA",
-		foreground: "#D4D4D4",
-		muted: "#212121",
-		mutedForeground: "#A1A1A1",
-		primary: "#E5E5E5",
-		primaryForeground: "#171717"
-	}
-}, n = ({ colors: n, darkMode: r = !0 }) => /* @__PURE__ */ e("style", {
-	type: "text/css",
-	children: `
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Default color scheme for email templates in light and dark modes.
+ *
+ * Provides a consistent color palette that can be customized via the EmailColors type.
+ */
+export const defaultColors = {
+    light: {
+        background: "#F5F5F5",
+        border: "#E5E5E5",
+        card: "#FFFFFF",
+        cardForeground: "#0A0A0A",
+        foreground: "#262626",
+        muted: "#F5F5F5",
+        mutedForeground: "#737373",
+        primary: "#171717",
+        primaryForeground: "#FAFAFA"
+    },
+    dark: {
+        background: "#0A0A0A",
+        border: "#2E2E2E",
+        card: "#171717",
+        cardForeground: "#FAFAFA",
+        foreground: "#D4D4D4",
+        muted: "#212121",
+        mutedForeground: "#A1A1A1",
+        primary: "#E5E5E5",
+        primaryForeground: "#171717"
+    }
+};
+/**
+ * Component that injects CSS styles for email templates with support for light and dark modes.
+ *
+ * Generates inline styles that adapt to the user's color scheme preference and applies
+ * custom colors if provided. Handles logo visibility switching between light and dark modes.
+ *
+ * @param props - Style configuration options
+ * @returns A style element containing CSS for email template theming
+ *
+ * @example
+ * ```tsx
+ * <EmailStyles
+ *   colors={{
+ *     light: { primary: "#000000" },
+ *     dark: { primary: "#FFFFFF" }
+ *   }}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailStyles = ({ colors, darkMode = true }) => {
+    return (_jsx("style", { type: "text/css", children: `
       .bg-background {
-        background-color: ${n?.light?.background || t.light.background} !important;
+        background-color: ${colors?.light?.background || defaultColors.light.background} !important;
       }
       .bg-card {
-        background-color: ${n?.light?.card || t.light.card} !important;
+        background-color: ${colors?.light?.card || defaultColors.light.card} !important;
       }
       .bg-primary {
-        background-color: ${n?.light?.primary || t.light.primary} !important;
+        background-color: ${colors?.light?.primary || defaultColors.light.primary} !important;
       }
       .bg-muted {
-        background-color: ${n?.light?.muted || t.light.muted} !important;
+        background-color: ${colors?.light?.muted || defaultColors.light.muted} !important;
       }
       .border-border {
-        border-color: ${n?.light?.border || t.light.border} !important;
+        border-color: ${colors?.light?.border || defaultColors.light.border} !important;
       }
       .text-card-foreground {
-        color: ${n?.light?.cardForeground || t.light.cardForeground} !important;
+        color: ${colors?.light?.cardForeground || defaultColors.light.cardForeground} !important;
       }
       .text-muted-foreground {
-        color: ${n?.light?.mutedForeground || t.light.mutedForeground} !important;
+        color: ${colors?.light?.mutedForeground || defaultColors.light.mutedForeground} !important;
       }
       .text-primary {
-        color: ${n?.light?.primary || t.light.primary} !important;
+        color: ${colors?.light?.primary || defaultColors.light.primary} !important;
       }
       .text-primary-foreground {
-        color: ${n?.light?.primaryForeground || t.light.primaryForeground} !important;
+        color: ${colors?.light?.primaryForeground || defaultColors.light.primaryForeground} !important;
       }
       .logo-dark {
         display: none !important;
@@ -60,33 +84,34 @@ var t = {
         display: block !important;
       }
 
-      ${r ? `@media (prefers-color-scheme: dark) {
+      ${darkMode
+            ? `@media (prefers-color-scheme: dark) {
         .bg-background {
-          background-color: ${n?.dark?.background || t.dark.background} !important;
+          background-color: ${colors?.dark?.background || defaultColors.dark.background} !important;
         }
         .bg-card {
-          background-color: ${n?.dark?.card || t.dark.card} !important;
+          background-color: ${colors?.dark?.card || defaultColors.dark.card} !important;
         }
         .bg-primary {
-          background-color: ${n?.dark?.primary || t.dark.primary} !important;
+          background-color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
         }
         .bg-muted {
-          background-color: ${n?.dark?.muted || t.dark.muted} !important;
+          background-color: ${colors?.dark?.muted || defaultColors.dark.muted} !important;
         }
         .border-border {
-          border-color: ${n?.dark?.border || t.dark.border} !important;
+          border-color: ${colors?.dark?.border || defaultColors.dark.border} !important;
         }
         .text-card-foreground {
-          color: ${n?.dark?.cardForeground || t.dark.cardForeground} !important;
+          color: ${colors?.dark?.cardForeground || defaultColors.dark.cardForeground} !important;
         }
         .text-muted-foreground {
-          color: ${n?.dark?.mutedForeground || t.dark.mutedForeground} !important;
+          color: ${colors?.dark?.mutedForeground || defaultColors.dark.mutedForeground} !important;
         }
         .text-primary {
-          color: ${n?.dark?.primary || t.dark.primary} !important;
+          color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
         }
         .text-primary-foreground {
-          color: ${n?.dark?.primaryForeground || t.dark.primaryForeground} !important;
+          color: ${colors?.dark?.primaryForeground || defaultColors.dark.primaryForeground} !important;
         }
         .logo-dark {
           display: block !important;
@@ -97,8 +122,8 @@ var t = {
         * {
           box-shadow: none !important;
         }
-      }` : ""}
-    `
-});
-//#endregion
-export { n as default, t as defaultColors };
+      }`
+            : ""}
+    ` }));
+};
+export default EmailStyles;

package/dist/components/auth/email/email-verification.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 emailVerificationEmailLocalization: {
     VERIFY_YOUR_EMAIL_ADDRESS: string;
     LOGO: string;