@better-auth-ui/react 1.6.1 → 1.6.2

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

@@ -1,6 +1,7 @@
-import { type AnyAuthClient, type AnyAuthConfig, type AuthConfig } from "@better-auth-ui/react";
-import { QueryClient } from "@tanstack/react-query";
-import { type PropsWithChildren } from "react";
+import { QueryClient } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+import { AnyAuthClient } from '../../lib/auth-client';
+import { AnyAuthConfig, AuthConfig } from '../../lib/auth-config';
 export type AuthProviderProps = PropsWithChildren<AnyAuthConfig> & {
     authClient: AnyAuthClient;
     navigate: (options: {

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

@@ -1,44 +1,28 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { deepmerge, defaultAuthConfig } from "@better-auth-ui/core";
-import { AuthContext } from "@better-auth-ui/react";
-import { QueryClient, QueryClientContext, QueryClientProvider } from "@tanstack/react-query";
-import { useContext } from "react";
-const fallbackQueryClient = new QueryClient();
-const baseAuthConfig = {
-    ...defaultAuthConfig,
-    Link: (props) => _jsx("a", { ...props })
+import { AuthContext as e } from "../../lib/auth-context.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 { useContext as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/auth/auth-provider.tsx
+var c = new r(), l = {
+	...n,
+	Link: (e) => /* @__PURE__ */ s("a", { ...e })
 };
-/**
- * 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 contextQueryClient = useContext(QueryClientContext);
-    const resolvedQueryClient = queryClient || contextQueryClient || fallbackQueryClient;
-    const mergedConfig = deepmerge(baseAuthConfig, config);
-    mergedConfig.redirectTo =
-        (typeof window !== "undefined" &&
-            new URLSearchParams(window.location.search).get("redirectTo")?.trim()) ||
-            mergedConfig.redirectTo;
-    return (_jsx(AuthContext.Provider, { value: mergedConfig, children: _jsx(QueryClientProvider, { client: resolvedQueryClient, children: children }) }));
+function u({ children: n, queryClient: r, ...u }) {
+	let d = o(i), f = r || d || c, p = t(l, u);
+	return p.redirectTo = typeof window < "u" && new URLSearchParams(window.location.search).get("redirectTo")?.trim() || p.redirectTo, /* @__PURE__ */ s(e.Provider, {
+		value: p,
+		children: /* @__PURE__ */ s(a, {
+			client: f,
+			children: n
+		})
+	});
 }
-/**
- * Accesses the current authentication configuration from AuthContext.
- *
- * @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;
+function d() {
+	let t = o(e);
+	if (!t) throw Error("[Better Auth UI] AuthProvider is required");
+	return t;
 }
+//#endregion
+export { u as AuthProvider, d as useAuth };

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

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

@@ -1,70 +1,156 @@
-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}"
+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/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
+									] });
+								})()
+							})
+						]
+					})
+				})
+			})
+		})
+	] });
 };
-/**
- * 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] }));
-                                    })() }))] }) }) }) })] }));
+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
 };
-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;
+//#endregion
+export { b as default };

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

@@ -1,24 +1,19 @@
-import EmailChangedEmail from "./email-changed";
-import EmailVerificationEmail from "./email-verification";
-import MagicLinkEmail from "./magic-link";
-import NewDeviceEmail from "./new-device";
-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, OtpEmail,
- * PasswordChangedEmail, ResetPasswordEmail) into a single object for convenient
- * bulk customization.
- */
-export const emailLocalization = {
-    ...EmailChangedEmail.localization,
-    ...EmailVerificationEmail.localization,
-    ...MagicLinkEmail.localization,
-    ...NewDeviceEmail.localization,
-    ...OtpEmail.localization,
-    ...PasswordChangedEmail.localization,
-    ...ResetPasswordEmail.localization
+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/email/email-localization.tsx
+var s = {
+	...e.localization,
+	...t.localization,
+	...n.localization,
+	...r.localization,
+	...i.localization,
+	...a.localization,
+	...o.localization
 };
+//#endregion
+export { s as emailLocalization };

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

@@ -1,81 +1,57 @@
-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: `
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/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: `
       .bg-background {
-        background-color: ${colors?.light?.background || defaultColors.light.background} !important;
+        background-color: ${n?.light?.background || t.light.background} !important;
       }
       .bg-card {
-        background-color: ${colors?.light?.card || defaultColors.light.card} !important;
+        background-color: ${n?.light?.card || t.light.card} !important;
       }
       .bg-primary {
-        background-color: ${colors?.light?.primary || defaultColors.light.primary} !important;
+        background-color: ${n?.light?.primary || t.light.primary} !important;
       }
       .bg-muted {
-        background-color: ${colors?.light?.muted || defaultColors.light.muted} !important;
+        background-color: ${n?.light?.muted || t.light.muted} !important;
       }
       .border-border {
-        border-color: ${colors?.light?.border || defaultColors.light.border} !important;
+        border-color: ${n?.light?.border || t.light.border} !important;
       }
       .text-card-foreground {
-        color: ${colors?.light?.cardForeground || defaultColors.light.cardForeground} !important;
+        color: ${n?.light?.cardForeground || t.light.cardForeground} !important;
       }
       .text-muted-foreground {
-        color: ${colors?.light?.mutedForeground || defaultColors.light.mutedForeground} !important;
+        color: ${n?.light?.mutedForeground || t.light.mutedForeground} !important;
       }
       .text-primary {
-        color: ${colors?.light?.primary || defaultColors.light.primary} !important;
+        color: ${n?.light?.primary || t.light.primary} !important;
       }
       .text-primary-foreground {
-        color: ${colors?.light?.primaryForeground || defaultColors.light.primaryForeground} !important;
+        color: ${n?.light?.primaryForeground || t.light.primaryForeground} !important;
       }
       .logo-dark {
         display: none !important;
@@ -84,34 +60,33 @@ export const EmailStyles = ({ colors, darkMode = true }) => {
         display: block !important;
       }
 
-      ${darkMode
-            ? `@media (prefers-color-scheme: dark) {
+      ${r ? `@media (prefers-color-scheme: dark) {
         .bg-background {
-          background-color: ${colors?.dark?.background || defaultColors.dark.background} !important;
+          background-color: ${n?.dark?.background || t.dark.background} !important;
         }
         .bg-card {
-          background-color: ${colors?.dark?.card || defaultColors.dark.card} !important;
+          background-color: ${n?.dark?.card || t.dark.card} !important;
         }
         .bg-primary {
-          background-color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
+          background-color: ${n?.dark?.primary || t.dark.primary} !important;
         }
         .bg-muted {
-          background-color: ${colors?.dark?.muted || defaultColors.dark.muted} !important;
+          background-color: ${n?.dark?.muted || t.dark.muted} !important;
         }
         .border-border {
-          border-color: ${colors?.dark?.border || defaultColors.dark.border} !important;
+          border-color: ${n?.dark?.border || t.dark.border} !important;
         }
         .text-card-foreground {
-          color: ${colors?.dark?.cardForeground || defaultColors.dark.cardForeground} !important;
+          color: ${n?.dark?.cardForeground || t.dark.cardForeground} !important;
         }
         .text-muted-foreground {
-          color: ${colors?.dark?.mutedForeground || defaultColors.dark.mutedForeground} !important;
+          color: ${n?.dark?.mutedForeground || t.dark.mutedForeground} !important;
         }
         .text-primary {
-          color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
+          color: ${n?.dark?.primary || t.dark.primary} !important;
         }
         .text-primary-foreground {
-          color: ${colors?.dark?.primaryForeground || defaultColors.dark.primaryForeground} !important;
+          color: ${n?.dark?.primaryForeground || t.dark.primaryForeground} !important;
         }
         .logo-dark {
           display: block !important;
@@ -122,8 +97,8 @@ export const EmailStyles = ({ colors, darkMode = true }) => {
         * {
           box-shadow: none !important;
         }
-      }`
-            : ""}
-    ` }));
-};
-export default EmailStyles;
+      }` : ""}
+    `
+});
+//#endregion
+export { n as default, t as defaultColors };

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