@jl0810/email-templates 1.0.0

package/dist/branding.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Branding configuration for email templates
+ * Each app can provide its own branding
+ */
+export interface AppBranding {
+    /** App name (e.g., "CardsGoneCrazy", "RetirementPlanner", "FakeSharp") */
+    appName: string;
+    /** Logo URL (absolute URL) */
+    logoUrl: string;
+    /** Primary brand color (hex, e.g., "#7C3AED") */
+    primaryColor: string;
+    /** Secondary/accent color (hex) */
+    accentColor?: string;
+    /** Support email address */
+    supportEmail: string;
+    /** App website URL */
+    websiteUrl: string;
+    /** Footer text */
+    footerText?: string;
+    /** CSS Gradient for the logo icon (e.g., "linear-gradient(to bottom right, #06B5D4, #3B82F6)") */
+    logoGradient?: string;
+}
+/**
+ * Pre-configured branding for RayDoug apps
+ */
+export declare const APP_BRANDING: Record<string, AppBranding>;

package/dist/branding.js

@@ -0,0 +1,35 @@
+/**
+ * Pre-configured branding for RayDoug apps
+ */
+export const APP_BRANDING = {
+    cards: {
+        appName: "CardsGoneCrazy",
+        logoUrl: "",
+        primaryColor: "#06B5D4", // Cyan-500
+        accentColor: "#3B82F6", // Blue-500
+        logoGradient: "linear-gradient(135deg, #06B5D4 0%, #2563EB 100%)", // Cyan-500 to Blue-600
+        supportEmail: "support@cardsgonecrazy.com",
+        websiteUrl: "https://cardsgonecrazy.com",
+        footerText: "© CardsGoneCrazy. All rights reserved.",
+    },
+    retirement: {
+        appName: "RouteMyRetirement",
+        logoUrl: "",
+        primaryColor: "#2563EB", // Blue-600
+        accentColor: "#6366F1", // Indigo-500
+        logoGradient: "linear-gradient(135deg, #2563EB 0%, #4F46E5 100%)", // Blue-600 to Indigo-600
+        supportEmail: "support@routemyretirement.com",
+        websiteUrl: "https://routemyretirement.com",
+        footerText: "© RouteMyRetirement. All rights reserved.",
+    },
+    fakesharp: {
+        appName: "FakeSharp",
+        logoUrl: "",
+        primaryColor: "#10B981", // Emerald-500
+        accentColor: "#3B82F6", // Blue-500 for the logo gradient
+        logoGradient: "linear-gradient(135deg, #10B981 0%, #3B82F6 100%)", // Emerald-500 to Blue-500
+        supportEmail: "support@fakesharp.com",
+        websiteUrl: "https://fakesharp.com",
+        footerText: "© FakeSharp. All rights reserved.",
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import { render } from "@react-email/components";
+export * from "./branding";
+export { MagicLinkEmail } from "./templates/magic-link";
+export { WelcomeEmail } from "./templates/welcome";
+export { PasswordResetEmail } from "./templates/password-reset";
+export { render };
+import type { AppBranding } from "./branding";
+/**
+ * Helper to get branding by app key
+ */
+export declare function getBranding(appKey: "cards" | "retirement" | "fakesharp"): AppBranding;
+/**
+ * Render magic link email to HTML
+ */
+export declare function renderMagicLinkEmail(options: {
+    magicLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+}): Promise<string>;
+/**
+ * Render welcome email to HTML
+ */
+export declare function renderWelcomeEmail(options: {
+    branding: AppBranding;
+    userName?: string;
+    dashboardUrl?: string;
+}): Promise<string>;
+/**
+ * Render password reset email to HTML
+ */
+export declare function renderPasswordResetEmail(options: {
+    resetLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+    expiresIn?: string;
+}): Promise<string>;
+/**
+ * useSend API helper - sends email via useSend
+ */
+export declare function sendEmail(options: {
+    to: string;
+    from: string;
+    subject: string;
+    html: string;
+    apiKey: string;
+    apiUrl?: string;
+}): Promise<{
+    emailId: string;
+}>;
+/**
+ * High-level helper: Send magic link email
+ */
+export declare function sendMagicLinkEmail(options: {
+    to: string;
+    magicLink: string;
+    branding: AppBranding;
+    apiKey: string;
+}): Promise<{
+    emailId: string;
+}>;
+/**
+ * High-level helper: Send welcome email
+ */
+export declare function sendWelcomeEmail(options: {
+    to: string;
+    userName?: string;
+    branding: AppBranding;
+    apiKey: string;
+    dashboardUrl?: string;
+}): Promise<{
+    emailId: string;
+}>;

package/dist/index.js

@@ -0,0 +1,110 @@
+import { render } from "@react-email/components";
+import * as React from "react";
+// Export branding
+export * from "./branding";
+// Export templates
+export { MagicLinkEmail } from "./templates/magic-link";
+export { WelcomeEmail } from "./templates/welcome";
+export { PasswordResetEmail } from "./templates/password-reset";
+// Re-export render for convenience
+export { render };
+// Import templates for the helper functions
+import { MagicLinkEmail } from "./templates/magic-link";
+import { WelcomeEmail } from "./templates/welcome";
+import { PasswordResetEmail } from "./templates/password-reset";
+import { APP_BRANDING } from "./branding";
+/**
+ * Helper to get branding by app key
+ */
+export function getBranding(appKey) {
+    return APP_BRANDING[appKey];
+}
+/**
+ * Render magic link email to HTML
+ */
+export async function renderMagicLinkEmail(options) {
+    return render(React.createElement(MagicLinkEmail, {
+        magicLink: options.magicLink,
+        branding: options.branding,
+        userEmail: options.userEmail,
+    }));
+}
+/**
+ * Render welcome email to HTML
+ */
+export async function renderWelcomeEmail(options) {
+    return render(React.createElement(WelcomeEmail, {
+        branding: options.branding,
+        userName: options.userName,
+        dashboardUrl: options.dashboardUrl,
+    }));
+}
+/**
+ * Render password reset email to HTML
+ */
+export async function renderPasswordResetEmail(options) {
+    return render(React.createElement(PasswordResetEmail, {
+        resetLink: options.resetLink,
+        branding: options.branding,
+        userEmail: options.userEmail,
+        expiresIn: options.expiresIn,
+    }));
+}
+/**
+ * useSend API helper - sends email via useSend
+ */
+export async function sendEmail(options) {
+    const baseUrl = options.apiUrl || "https://mail.raydoug.com/api/v1";
+    const response = await fetch(`${baseUrl}/emails`, {
+        method: "POST",
+        headers: {
+            Authorization: `Bearer ${options.apiKey}`,
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            to: options.to,
+            from: options.from,
+            subject: options.subject,
+            html: options.html,
+        }),
+    });
+    if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw new Error(`Failed to send email: ${response.statusText} - ${JSON.stringify(error)}`);
+    }
+    return response.json();
+}
+/**
+ * High-level helper: Send magic link email
+ */
+export async function sendMagicLinkEmail(options) {
+    const html = await renderMagicLinkEmail({
+        magicLink: options.magicLink,
+        branding: options.branding,
+        userEmail: options.to,
+    });
+    return sendEmail({
+        to: options.to,
+        from: options.branding.supportEmail.replace("support@", "noreply@"),
+        subject: `Sign in to ${options.branding.appName}`,
+        html,
+        apiKey: options.apiKey,
+    });
+}
+/**
+ * High-level helper: Send welcome email
+ */
+export async function sendWelcomeEmail(options) {
+    const html = await renderWelcomeEmail({
+        branding: options.branding,
+        userName: options.userName,
+        dashboardUrl: options.dashboardUrl,
+    });
+    return sendEmail({
+        to: options.to,
+        from: options.branding.supportEmail.replace("support@", "noreply@"),
+        subject: `Welcome to ${options.branding.appName}! 🎉`,
+        html,
+        apiKey: options.apiKey,
+    });
+}

package/dist/templates/magic-link.d.ts

@@ -0,0 +1,8 @@
+import type { AppBranding } from "../branding";
+interface MagicLinkEmailProps {
+    magicLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+}
+export declare const MagicLinkEmail: ({ magicLink, branding, userEmail, }: MagicLinkEmailProps) => import("react/jsx-runtime").JSX.Element;
+export default MagicLinkEmail;

package/dist/templates/magic-link.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Html, Link, Preview, Section, Text, Hr, } from "@react-email/components";
+export const MagicLinkEmail = ({ magicLink, branding, userEmail, }) => {
+    const previewText = `Sign in to ${branding.appName}`;
+    return (_jsxs(Html, { children: [_jsx(Head, {}), _jsx(Preview, { children: previewText }), _jsx(Body, { style: main, children: _jsxs(Container, { style: container, children: [_jsx(Section, { style: {
+                                ...heroHeader,
+                                backgroundImage: branding.logoGradient,
+                                backgroundColor: branding.primaryColor,
+                            }, children: _jsx(Heading, { style: brandHeading, children: branding.appName.includes("Cards") ? (_jsxs(_Fragment, { children: ["Cards", _jsx("span", { style: { fontWeight: 400 }, children: "Gone" }), _jsx("span", { style: { fontStyle: "italic" }, children: "Crazy" })] })) : branding.appName.includes("Retirement") ? (_jsxs(_Fragment, { children: ["Route", _jsx("span", { style: { opacity: 0.75 }, children: "My" }), "Retirement"] })) : branding.appName.includes("Sharp") ? (_jsxs(_Fragment, { children: ["Fake", _jsx("span", { style: { fontWeight: 300 }, children: "Sharp" })] })) : (branding.appName) }) }), _jsxs(Section, { style: contentContainer, children: [_jsx(Heading, { style: mainHeading, children: "Sign in to your account" }), _jsxs(Text, { style: paragraph, children: ["We received a request to sign in to your account", userEmail ? _jsxs("span", { style: { color: "#334155", fontWeight: 600 }, children: [" (", userEmail, ")"] }) : "", "."] }), _jsx(Text, { style: paragraph, children: "Click the button below to authenticate clearly and securely." }), _jsx(Section, { style: buttonContainer, children: _jsx(Button, { style: {
+                                            ...button,
+                                            backgroundColor: branding.primaryColor,
+                                            boxShadow: `0 0 20px ${branding.primaryColor}40`, // 25% opacity glow
+                                        }, href: magicLink, children: "Sign In" }) }), _jsx(Text, { style: paragraphSmall, children: "Or paste this link into your browser:" }), _jsx(Text, { style: linkText, children: magicLink }), _jsx(Hr, { style: divider }), _jsx(Text, { style: paragraphMuted, children: "If you didn't request this, you can safely ignore this email." }), _jsxs(Section, { style: footer, children: [_jsx(Text, { style: footerText, children: branding.footerText || `© ${branding.appName}` }), _jsx(Link, { href: branding.websiteUrl, style: footerLink, children: branding.websiteUrl.replace("https://", "") })] })] })] }) })] }));
+};
+// Styles
+const main = {
+    backgroundColor: "#f8fafc", // Slate-50
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    padding: "40px 0",
+};
+const container = {
+    backgroundColor: "#ffffff", // White
+    margin: "0 auto",
+    padding: "0",
+    maxWidth: "520px",
+    borderRadius: "16px",
+    border: "1px solid #e2e8f0", // Slate-200
+    overflow: "hidden",
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)", // Soft shadow
+};
+const heroHeader = {
+    padding: "48px 0",
+    textAlign: "center",
+};
+const contentContainer = {
+    padding: "48px",
+};
+const brandHeading = {
+    margin: "0",
+    fontSize: "28px",
+    fontWeight: "800",
+    color: "#ffffff",
+    letterSpacing: "-0.5px",
+    textShadow: "0 2px 4px rgba(0,0,0,0.1)",
+};
+const mainHeading = {
+    color: "#0f172a", // Slate-900
+    fontSize: "30px",
+    fontWeight: "700",
+    margin: "0 0 24px",
+    letterSpacing: "-0.5px",
+    lineHeight: "38px",
+};
+const paragraph = {
+    color: "#334155", // Slate-700
+    fontSize: "16px",
+    lineHeight: "26px",
+    margin: "0 0 16px",
+};
+const buttonContainer = {
+    margin: "32px 0",
+};
+const button = {
+    color: "#ffffff",
+    fontSize: "15px",
+    fontWeight: "600",
+    textDecoration: "none",
+    textAlign: "center",
+    display: "inline-block",
+    padding: "14px 32px",
+    borderRadius: "8px",
+};
+const paragraphSmall = {
+    color: "#64748b", // Slate-500
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0 0 8px",
+};
+const linkText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    lineHeight: "18px",
+    wordBreak: "break-all",
+    margin: "0 0 24px",
+};
+const divider = {
+    borderColor: "#e2e8f0", // Slate-200
+    margin: "32px 0",
+};
+const paragraphMuted = {
+    color: "#94a3b8",
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0 0 24px",
+};
+const footer = {
+    textAlign: "center",
+};
+const footerText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    margin: "0 0 8px",
+};
+const footerLink = {
+    color: "#64748b", // Slate-500
+    fontSize: "12px",
+    textDecoration: "underline",
+};
+export default MagicLinkEmail;

package/dist/templates/password-reset.d.ts

@@ -0,0 +1,9 @@
+import type { AppBranding } from "../branding";
+interface PasswordResetEmailProps {
+    resetLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+    expiresIn?: string;
+}
+export declare const PasswordResetEmail: ({ resetLink, branding, userEmail, expiresIn, }: PasswordResetEmailProps) => import("react/jsx-runtime").JSX.Element;
+export default PasswordResetEmail;

package/dist/templates/password-reset.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Html, Link, Preview, Section, Text, Hr, } from "@react-email/components";
+export const PasswordResetEmail = ({ resetLink, branding, userEmail, expiresIn = "1 hour", }) => {
+    const previewText = `Reset your ${branding.appName} password`;
+    return (_jsxs(Html, { children: [_jsx(Head, {}), _jsx(Preview, { children: previewText }), _jsx(Body, { style: main, children: _jsxs(Container, { style: container, children: [_jsx(Section, { style: {
+                                ...heroHeader,
+                                backgroundImage: branding.logoGradient,
+                                backgroundColor: branding.primaryColor,
+                            }, children: _jsx(Heading, { style: brandHeading, children: branding.appName.includes("Cards") ? (_jsxs(_Fragment, { children: ["Cards", _jsx("span", { style: { fontWeight: 400 }, children: "Gone" }), _jsx("span", { style: { fontStyle: "italic" }, children: "Crazy" })] })) : branding.appName.includes("Retirement") ? (_jsxs(_Fragment, { children: ["Route", _jsx("span", { style: { opacity: 0.75 }, children: "My" }), "Retirement"] })) : branding.appName.includes("Sharp") ? (_jsxs(_Fragment, { children: ["Fake", _jsx("span", { style: { fontWeight: 300 }, children: "Sharp" })] })) : (branding.appName) }) }), _jsxs(Section, { style: contentContainer, children: [_jsx(Heading, { style: mainHeading, children: "Reset your password" }), _jsxs(Text, { style: paragraph, children: ["We received a request to update the password for your account", userEmail ? _jsxs("span", { style: { color: "#334155", fontWeight: 600 }, children: [" (", userEmail, ")"] }) : "", "."] }), _jsx(Text, { style: paragraph, children: "To create a new password, click the button below." }), _jsx(Section, { style: buttonContainer, children: _jsx(Button, { style: {
+                                            ...button,
+                                            backgroundColor: branding.primaryColor,
+                                            boxShadow: `0 0 20px ${branding.primaryColor}40`,
+                                        }, href: resetLink, children: "Reset Password" }) }), _jsx(Text, { style: paragraphSmall, children: "Or paste this link into your browser:" }), _jsx(Text, { style: linkText, children: resetLink }), _jsxs(Text, { style: { ...paragraphMuted, margin: "16px 0 0" }, children: ["This link will expire in ", _jsx("span", { style: { color: "#d4d4d8" }, children: expiresIn }), "."] }), _jsx(Hr, { style: divider }), _jsxs(Section, { style: warningBox, children: [_jsx(Text, { style: warningTitle, children: "SECURITY NOTICE" }), _jsx(Text, { style: warningText, children: "If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged." })] }), _jsxs(Section, { style: footer, children: [_jsx(Text, { style: footerText, children: branding.footerText || `© ${branding.appName}` }), _jsx(Link, { href: branding.websiteUrl, style: footerLink, children: branding.websiteUrl.replace("https://", "") })] })] })] }) })] }));
+};
+// Styles
+const main = {
+    backgroundColor: "#f8fafc", // Slate-50
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    padding: "40px 0",
+};
+const container = {
+    backgroundColor: "#ffffff", // White
+    margin: "0 auto",
+    padding: "0",
+    maxWidth: "520px",
+    borderRadius: "16px",
+    border: "1px solid #e2e8f0", // Slate-200
+    overflow: "hidden",
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)",
+};
+const heroHeader = {
+    padding: "48px 0",
+    textAlign: "center",
+};
+const contentContainer = {
+    padding: "48px",
+};
+const brandHeading = {
+    margin: "0",
+    fontSize: "28px",
+    fontWeight: "800",
+    color: "#ffffff",
+    letterSpacing: "-0.5px",
+    textShadow: "0 2px 4px rgba(0,0,0,0.1)",
+};
+const mainHeading = {
+    color: "#0f172a", // Slate-900
+    fontSize: "30px",
+    fontWeight: "700",
+    margin: "0 0 24px",
+    letterSpacing: "-0.5px",
+    lineHeight: "38px",
+};
+const paragraph = {
+    color: "#334155", // Slate-700
+    fontSize: "16px",
+    lineHeight: "26px",
+    margin: "0 0 16px",
+};
+const buttonContainer = {
+    margin: "32px 0",
+};
+const button = {
+    color: "#ffffff",
+    fontSize: "15px",
+    fontWeight: "600",
+    textDecoration: "none",
+    textAlign: "center",
+    display: "inline-block",
+    padding: "14px 32px",
+    borderRadius: "8px",
+};
+const paragraphSmall = {
+    color: "#64748b", // Slate-500
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0 0 8px",
+};
+const linkText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    lineHeight: "18px",
+    wordBreak: "break-all",
+    margin: "0 0 24px",
+};
+const divider = {
+    borderColor: "#e2e8f0", // Slate-200
+    margin: "32px 0",
+};
+const paragraphMuted = {
+    color: "#64748b", // Slate-500
+    fontSize: "13px",
+    lineHeight: "20px",
+};
+const warningBox = {
+    padding: "16px",
+    backgroundColor: "#fffbeb", // Amber-50
+    border: "1px solid #fcd34d", // Amber-300
+    borderRadius: "8px",
+    margin: "0 0 24px",
+};
+const warningTitle = {
+    color: "#b45309", // Amber-700
+    fontSize: "11px",
+    fontWeight: "700",
+    letterSpacing: "1px",
+    margin: "0 0 8px",
+};
+const warningText = {
+    color: "#92400e", // Amber-800
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0",
+};
+const footer = {
+    textAlign: "center",
+};
+const footerText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    margin: "0 0 8px",
+};
+const footerLink = {
+    color: "#64748b", // Slate-500
+    fontSize: "12px",
+    textDecoration: "underline",
+};
+export default PasswordResetEmail;

package/dist/templates/welcome.d.ts

@@ -0,0 +1,8 @@
+import type { AppBranding } from "../branding";
+interface WelcomeEmailProps {
+    branding: AppBranding;
+    userName?: string;
+    dashboardUrl?: string;
+}
+export declare const WelcomeEmail: ({ branding, userName, dashboardUrl, }: WelcomeEmailProps) => import("react/jsx-runtime").JSX.Element;
+export default WelcomeEmail;

package/dist/templates/welcome.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Html, Link, Preview, Section, Text, Hr, } from "@react-email/components";
+export const WelcomeEmail = ({ branding, userName, dashboardUrl, }) => {
+    const previewText = `Welcome to ${branding.appName}!`;
+    const ctaUrl = dashboardUrl || branding.websiteUrl;
+    return (_jsxs(Html, { children: [_jsx(Head, {}), _jsx(Preview, { children: previewText }), _jsx(Body, { style: main, children: _jsxs(Container, { style: container, children: [_jsx(Section, { style: {
+                                ...heroHeader,
+                                backgroundImage: branding.logoGradient,
+                                backgroundColor: branding.primaryColor,
+                            }, children: _jsx(Heading, { style: brandHeading, children: branding.appName.includes("Cards") ? (_jsxs(_Fragment, { children: ["Cards", _jsx("span", { style: { fontWeight: 400 }, children: "Gone" }), _jsx("span", { style: { fontStyle: "italic" }, children: "Crazy" })] })) : branding.appName.includes("Retirement") ? (_jsxs(_Fragment, { children: ["Route", _jsx("span", { style: { opacity: 0.75 }, children: "My" }), "Retirement"] })) : branding.appName.includes("Sharp") ? (_jsxs(_Fragment, { children: ["Fake", _jsx("span", { style: { fontWeight: 300 }, children: "Sharp" })] })) : (branding.appName) }) }), _jsxs(Section, { style: contentContainer, children: [_jsx(Heading, { style: mainHeading, children: "Welcome aboard!" }), _jsx(Text, { style: paragraph, children: userName ? `Hi ${userName},` : "Hello," }), _jsxs(Text, { style: paragraph, children: ["Thanks for joining ", _jsx("span", { style: { color: "#334155", fontWeight: 700 }, children: branding.appName }), ". We're thrilled to have you with us."] }), _jsxs(Section, { style: featuresContainer, children: [_jsx(Text, { style: featureHeading, children: "GETTING STARTED" }), _jsxs(Section, { style: featureRow, children: [_jsx("div", { style: { ...bullet, backgroundColor: branding.primaryColor } }), _jsx(Text, { style: featureText, children: "Explore your new command center" })] }), _jsxs(Section, { style: featureRow, children: [_jsx("div", { style: { ...bullet, backgroundColor: branding.primaryColor } }), _jsx(Text, { style: featureText, children: "Customize your preferences and settings" })] }), _jsxs(Section, { style: featureRow, children: [_jsx("div", { style: { ...bullet, backgroundColor: branding.primaryColor } }), _jsx(Text, { style: featureText, children: "Start your first project or plan" })] })] }), _jsx(Section, { style: buttonContainer, children: _jsx(Button, { style: {
+                                            ...button,
+                                            backgroundColor: branding.primaryColor,
+                                            boxShadow: `0 0 20px ${branding.primaryColor}40`,
+                                        }, href: ctaUrl, children: "Get Started" }) }), _jsx(Hr, { style: divider }), _jsxs(Text, { style: paragraphMuted, children: ["Need help? Reply to this email or contact ", _jsx(Link, { href: `mailto:${branding.supportEmail}`, style: link, children: branding.supportEmail }), "."] }), _jsxs(Section, { style: footer, children: [_jsx(Text, { style: footerText, children: branding.footerText || `© ${branding.appName}` }), _jsx(Link, { href: branding.websiteUrl, style: footerLink, children: branding.websiteUrl.replace("https://", "") })] })] })] }) })] }));
+};
+// Styles
+const main = {
+    backgroundColor: "#f8fafc", // Slate-50
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    padding: "40px 0",
+};
+const container = {
+    backgroundColor: "#ffffff", // White
+    margin: "0 auto",
+    padding: "0",
+    maxWidth: "520px",
+    borderRadius: "16px",
+    border: "1px solid #e2e8f0", // Slate-200
+    overflow: "hidden",
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)",
+};
+const heroHeader = {
+    padding: "48px 0",
+    textAlign: "center",
+};
+const contentContainer = {
+    padding: "48px",
+};
+const brandHeading = {
+    margin: "0",
+    fontSize: "28px",
+    fontWeight: "800",
+    color: "#ffffff",
+    letterSpacing: "-0.5px",
+    textShadow: "0 2px 4px rgba(0,0,0,0.1)",
+};
+const mainHeading = {
+    color: "#0f172a", // Slate-900
+    fontSize: "30px",
+    fontWeight: "700",
+    margin: "0 0 24px",
+    letterSpacing: "-0.5px",
+    lineHeight: "38px",
+};
+const paragraph = {
+    color: "#334155", // Slate-700
+    fontSize: "16px",
+    lineHeight: "26px",
+    margin: "0 0 16px",
+};
+const featuresContainer = {
+    margin: "32px 0 32px",
+    padding: "24px",
+    backgroundColor: "#f1f5f9", // Slate-100
+    borderRadius: "12px",
+    border: "1px solid #e2e8f0", // Slate-200
+};
+const featureHeading = {
+    color: "#64748b", // Slate-500
+    fontSize: "11px",
+    fontWeight: "700",
+    letterSpacing: "1px",
+    margin: "0 0 16px",
+    textTransform: "uppercase",
+};
+const featureRow = {
+    marginBottom: "12px",
+};
+const bullet = {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    display: "inline-block",
+    marginRight: "12px",
+};
+const featureText = {
+    color: "#475569", // Slate-600
+    fontSize: "14px",
+    fontWeight: "600",
+    display: "inline-block",
+    margin: "0",
+};
+const buttonContainer = {
+    margin: "32px 0",
+};
+const button = {
+    color: "#ffffff",
+    fontSize: "15px",
+    fontWeight: "600",
+    textDecoration: "none",
+    textAlign: "center",
+    display: "inline-block",
+    padding: "14px 32px",
+    borderRadius: "8px",
+};
+const divider = {
+    borderColor: "#e2e8f0", // Slate-200
+    margin: "32px 0",
+};
+const paragraphMuted = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0 0 8px",
+};
+const link = {
+    color: "#64748b", // Slate-500
+    textDecoration: "underline",
+};
+const footer = {
+    marginTop: "24px",
+    textAlign: "center",
+};
+const footerText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    margin: "0 0 8px",
+};
+const footerLink = {
+    color: "#64748b", // Slate-500
+    fontSize: "12px",
+    textDecoration: "underline",
+};
+export default WelcomeEmail;