@beyondcorp/beyond-ui 1.3.12 → 1.4.0

package/dist/components/Email/components/EmailHeader.d.ts

@@ -0,0 +1,4 @@
+export declare const EmailHeader: ({ logoUrl, companyName }: {
+    logoUrl?: string | undefined;
+    companyName?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Email/components/EmailHeader.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Img } from '../../../node_modules/@react-email/img/dist/index.js';
+import { Section } from '../../../node_modules/@react-email/section/dist/index.js';
+
+const EmailHeader = ({ logoUrl = 'https://via.placeholder.com/150x50', companyName = 'Beyond Corp' }) => (jsx(Section, { className: "mt-8 mb-8", children: jsx(Img, { src: logoUrl, width: "150", height: "50", alt: companyName, className: "mx-auto" }) }));
+
+export { EmailHeader };
+//# sourceMappingURL=EmailHeader.js.map

package/dist/components/Email/components/EmailHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailHeader.js","sources":["../../../../src/components/Email/components/EmailHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Img, Section } from '@react-email/components';\n\nexport const EmailHeader = ({ logoUrl = 'https://via.placeholder.com/150x50', companyName = 'Beyond Corp' }) => (\n  <Section className=\"mt-8 mb-8\">\n    <Img src={logoUrl} width=\"150\" height=\"50\" alt={companyName} className=\"mx-auto\" />\n  </Section>\n);"],"names":["_jsx"],"mappings":";;;;MAGa,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,oCAAoC,EAAE,WAAW,GAAG,aAAa,EAAE,MACzGA,IAAC,OAAO,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAC5BA,IAAC,GAAG,EAAA,EAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC3E;;;;"}

package/dist/components/Email/components/EmailLayout.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const EmailLayout: ({ children, previewText, title }: {
+    children: React.ReactNode;
+    previewText?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Email/components/EmailLayout.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { EmailHeader } from './EmailHeader.js';
+import { EmailFooter } from './EmailFooter.js';
+import { theme } from './theme.js';
+import { Html } from '../../../node_modules/@react-email/html/dist/index.js';
+import { Tailwind } from '../../../node_modules/@react-email/tailwind/dist/index.js';
+import { Head } from '../../../node_modules/@react-email/head/dist/index.js';
+import { Preview } from '../../../node_modules/@react-email/preview/dist/index.js';
+import { Body } from '../../../node_modules/@react-email/body/dist/index.js';
+import { Container } from '../../../node_modules/@react-email/container/dist/index.js';
+
+const EmailLayout = ({ children, previewText, title }) => (jsx(Html, { children: jsxs(Tailwind, { config: { theme: { extend: { colors: theme.colors } } }, children: [jsx(Head, { children: jsx("title", { children: title }) }), previewText && jsx(Preview, { children: previewText }), jsx(Body, { className: "bg-gray-50 dark:bg-gray-900 my-auto mx-auto font-sans px-2", children: jsxs(Container, { className: "max-w-[600px] mx-auto bg-white dark:bg-gray-800 rounded-lg p-8 my-8 shadow-sm border border-gray-100 dark:border-gray-700", children: [jsx(EmailHeader, {}), children, jsx(EmailFooter, {})] }) })] }) }));
+
+export { EmailLayout };
+//# sourceMappingURL=EmailLayout.js.map

package/dist/components/Email/components/EmailLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailLayout.js","sources":["../../../../src/components/Email/components/EmailLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { Html, Body, Container, Tailwind, Head, Preview } from '@react-email/components';\nimport { EmailHeader } from './EmailHeader';\nimport { EmailFooter } from './EmailFooter';\nimport { theme } from './theme';\n\nexport const EmailLayout = ({ children, previewText, title }: { \n  children: React.ReactNode; \n  previewText?: string; \n  title?: string;\n}) => (\n  <Html>\n    <Tailwind config={{ theme: { extend: { colors: theme.colors } } }}>\n      <Head><title>{title}</title></Head>\n      {previewText && <Preview>{previewText}</Preview>}\n      <Body className=\"bg-gray-50 dark:bg-gray-900 my-auto mx-auto font-sans px-2\">\n        <Container className=\"max-w-[600px] mx-auto bg-white dark:bg-gray-800 rounded-lg p-8 my-8 shadow-sm border border-gray-100 dark:border-gray-700\">\n          <EmailHeader />\n          {children}\n          <EmailFooter />\n        </Container>\n      </Body>\n    </Tailwind>\n  </Html>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAMO,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAIzD,MACCA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHC,IAAA,CAAC,QAAQ,EAAA,EAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,aAC/DD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAACA,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,KAAK,EAAA,CAAS,EAAA,CAAO,EAClC,WAAW,IAAIA,IAAC,OAAO,EAAA,EAAA,QAAA,EAAE,WAAW,EAAA,CAAW,EAChDA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAC1EC,IAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,2HAA2H,aAC9ID,GAAA,CAAC,WAAW,KAAG,EACd,QAAQ,EACTA,GAAA,CAAC,WAAW,EAAA,EAAA,CAAG,CAAA,EAAA,CACL,GACP,CAAA,EAAA,CACE,EAAA,CACN;;;;"}

package/dist/components/Email/components/EmailPreviewer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface EmailPreviewerProps {
+    component: React.ReactElement;
+}
+export declare const EmailPreviewer: React.FC<EmailPreviewerProps>;

package/dist/components/Email/components/EmailPreviewer.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { render } from '../../../node_modules/@react-email/render/dist/node/index.js';
+
+const EmailPreviewer = ({ component }) => {
+    const [html, setHtml] = useState('');
+    const [viewMode, setViewMode] = useState('desktop');
+    useEffect(() => {
+        const generateHtml = async () => {
+            try {
+                const result = await render(component);
+                setHtml(result);
+            }
+            catch (error) {
+                console.error('Error rendering email:', error);
+                setHtml('<div style="color:red; padding: 20px;">Error rendering email template.</div>');
+            }
+        };
+        generateHtml();
+    }, [component]);
+    return (jsxs("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden flex flex-col bg-gray-50 dark:bg-gray-900 w-full", children: [jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 p-3 flex justify-center gap-4 bg-white dark:bg-gray-950", children: [jsx("button", { onClick: () => setViewMode('desktop'), className: `px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${viewMode === 'desktop' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'}`, children: "Desktop" }), jsx("button", { onClick: () => setViewMode('mobile'), className: `px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${viewMode === 'mobile' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'}`, children: "Mobile" })] }), jsx("div", { className: `mx-auto transition-all duration-300 ease-in-out w-full ${viewMode === 'mobile' ? 'max-w-[375px]' : 'max-w-full'}`, children: jsx("iframe", { srcDoc: html, className: "w-full h-[600px] bg-white border-x border-gray-200 dark:border-gray-800 shadow-sm", title: "Email Preview" }) })] }));
+};
+
+export { EmailPreviewer };
+//# sourceMappingURL=EmailPreviewer.js.map

package/dist/components/Email/components/EmailPreviewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailPreviewer.js","sources":["../../../../src/components/Email/components/EmailPreviewer.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { render } from '@react-email/render';\n\nexport interface EmailPreviewerProps {\n  component: React.ReactElement;\n}\n\nexport const EmailPreviewer: React.FC<EmailPreviewerProps> = ({ component }) => {\n  const [html, setHtml] = useState<string>('');\n  const [viewMode, setViewMode] = useState<'desktop' | 'mobile'>('desktop');\n\n  useEffect(() => {\n    const generateHtml = async () => {\n      try {\n        const result = await render(component);\n        setHtml(result);\n      } catch (error) {\n        console.error('Error rendering email:', error);\n        setHtml('<div style=\"color:red; padding: 20px;\">Error rendering email template.</div>');\n      }\n    };\n    \n    generateHtml();\n  }, [component]);\n\n  return (\n    <div className=\"border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden flex flex-col bg-gray-50 dark:bg-gray-900 w-full\">\n      {/* Toolbar */}\n      <div className=\"border-b border-gray-200 dark:border-gray-800 p-3 flex justify-center gap-4 bg-white dark:bg-gray-950\">\n        <button \n          onClick={() => setViewMode('desktop')}\n          className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${viewMode === 'desktop' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'}`}\n        >\n          Desktop\n        </button>\n        <button \n          onClick={() => setViewMode('mobile')}\n          className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${viewMode === 'mobile' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'}`}\n        >\n          Mobile\n        </button>\n      </div>\n      {/* Canvas */}\n      <div className={`mx-auto transition-all duration-300 ease-in-out w-full ${viewMode === 'mobile' ? 'max-w-[375px]' : 'max-w-full'}`}>\n        <iframe\n          srcDoc={html}\n          className=\"w-full h-[600px] bg-white border-x border-gray-200 dark:border-gray-800 shadow-sm\"\n          title=\"Email Preview\"\n        />\n      </div>\n    </div>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;MAOa,cAAc,GAAkC,CAAC,EAAE,SAAS,EAAE,KAAI;IAC7E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;IAC5C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAuB,SAAS,CAAC;IAEzE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,YAAY,GAAG,YAAW;AAC9B,YAAA,IAAI;AACF,gBAAA,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC;gBACtC,OAAO,CAAC,MAAM,CAAC;YACjB;YAAE,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,KAAK,CAAC;gBAC9C,OAAO,CAAC,8EAA8E,CAAC;YACzF;AACF,QAAA,CAAC;AAED,QAAA,YAAY,EAAE;AAChB,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACEA,cAAK,SAAS,EAAC,yHAAyH,EAAA,QAAA,EAAA,CAEtIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uGAAuG,EAAA,QAAA,EAAA,CACpHC,gBACE,OAAO,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,EACrC,SAAS,EAAE,gEAAgE,QAAQ,KAAK,SAAS,GAAG,+DAA+D,GAAG,2EAA2E,CAAA,CAAE,wBAG5O,EACTA,GAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,EACpC,SAAS,EAAE,CAAA,6DAAA,EAAgE,QAAQ,KAAK,QAAQ,GAAG,+DAA+D,GAAG,2EAA2E,CAAA,CAAE,EAAA,QAAA,EAAA,QAAA,EAAA,CAG3O,IACL,EAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,uDAAA,EAA0D,QAAQ,KAAK,QAAQ,GAAG,eAAe,GAAG,YAAY,CAAA,CAAE,EAAA,QAAA,EAChIA,GAAA,CAAA,QAAA,EAAA,EACE,MAAM,EAAE,IAAI,EACZ,SAAS,EAAC,mFAAmF,EAC7F,KAAK,EAAC,eAAe,EAAA,CACrB,EAAA,CACE,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/Email/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './EmailButton';
+export * from './EmailDivider';
+export * from './EmailFooter';
+export * from './EmailHeader';
+export * from './EmailLayout';
+export * from './EmailPreviewer';
+export * from './theme';

package/dist/components/Email/components/theme.d.ts

@@ -0,0 +1,27 @@
+export declare const theme: {
+    colors: {
+        primary: string;
+        primaryDark: string;
+        success: string;
+        warning: string;
+        error: string;
+        text: string;
+        textLight: string;
+        border: string;
+        background: string;
+    };
+    fonts: {
+        sans: string;
+    };
+    spacing: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};

package/dist/components/Email/components/theme.js

@@ -0,0 +1,21 @@
+const theme = {
+    colors: {
+        primary: '#007ee6',
+        primaryDark: '#0062b3',
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        text: '#1f2937',
+        textLight: '#6b7280',
+        border: '#e5e7eb',
+        background: '#f9fafb',
+    },
+    fonts: {
+        sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    },
+    spacing: { sm: '8px', md: '16px', lg: '24px', xl: '32px' },
+    borderRadius: { sm: '4px', md: '8px', lg: '12px' },
+};
+
+export { theme };
+//# sourceMappingURL=theme.js.map

package/dist/components/Email/components/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../src/components/Email/components/theme.ts"],"sourcesContent":["export const theme = {\n  colors: {\n    primary: '#007ee6',\n    primaryDark: '#0062b3',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n    text: '#1f2937',\n    textLight: '#6b7280',\n    border: '#e5e7eb',\n    background: '#f9fafb',\n  },\n  fonts: {\n    sans: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n  },\n  spacing: { sm: '8px', md: '16px', lg: '24px', xl: '32px' },\n  borderRadius: { sm: '4px', md: '8px', lg: '12px' },\n};"],"names":[],"mappings":"AAAO,MAAM,KAAK,GAAG;AACnB,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,mEAAmE;AAC1E,KAAA;AACD,IAAA,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;AAC1D,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE;;;;;"}

package/dist/components/Email/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './templates';

package/dist/components/Email/templates/auth/ConfirmEmail.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ConfirmEmailProps {
+    confirmationLink?: string;
+    expiryMinutes?: number;
+}
+export declare const ConfirmEmail: React.FC<ConfirmEmailProps>;
+export default ConfirmEmail;

package/dist/components/Email/templates/auth/ConfirmEmail.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const ConfirmEmail = ({ confirmationLink = 'https://example.com/confirm', expiryMinutes = 15 }) => {
+    return (jsxs(EmailLayout, { previewText: "Confirm your email address", title: "Confirm your email", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Confirm your email address" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Please confirm that you want to use this as your account email address. This link is valid for ", expiryMinutes, " minutes."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: confirmationLink, children: "Verify Email" }) })] }));
+};
+
+export { ConfirmEmail, ConfirmEmail as default };
+//# sourceMappingURL=ConfirmEmail.js.map

package/dist/components/Email/templates/auth/ConfirmEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmEmail.js","sources":["../../../../../src/components/Email/templates/auth/ConfirmEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../components';\n\nexport interface ConfirmEmailProps {\n  confirmationLink?: string;\n  expiryMinutes?: number;\n}\n\nexport const ConfirmEmail: React.FC<ConfirmEmailProps> = ({\n  confirmationLink = 'https://example.com/confirm',\n  expiryMinutes = 15\n}) => {\n  return (\n    <EmailLayout previewText=\"Confirm your email address\" title=\"Confirm your email\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Confirm your email address</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Please confirm that you want to use this as your account email address. This link is valid for {expiryMinutes} minutes.\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={confirmationLink}>\n          Verify Email\n        </EmailButton>\n      </Section>\n    </EmailLayout>\n  );\n};\n\nexport default ConfirmEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASO,MAAM,YAAY,GAAgC,CAAC,EACxD,gBAAgB,GAAG,6BAA6B,EAChD,aAAa,GAAG,EAAE,EACnB,KAAI;IACH,QACEA,KAAC,WAAW,EAAA,EAAC,WAAW,EAAC,4BAA4B,EAAC,KAAK,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAC9EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,4BAAA,EAAA,CAAkC,EACzGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,gHACiB,aAAa,EAAA,WAAA,CAAA,EAAA,CACxG,EACPC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,YACnCA,GAAA,CAAC,WAAW,IAAC,IAAI,EAAE,gBAAgB,EAAA,QAAA,EAAA,cAAA,EAAA,CAErB,EAAA,CACN,CAAA,EAAA,CACE;AAElB;;;;"}

package/dist/components/Email/templates/auth/EmailChangeVerification.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface EmailChangeVerificationProps {
+    userName?: string;
+    newEmail?: string;
+    verificationLink?: string;
+    expiryMinutes?: number;
+}
+export declare const EmailChangeVerification: React.FC<EmailChangeVerificationProps>;
+export default EmailChangeVerification;

package/dist/components/Email/templates/auth/EmailChangeVerification.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const EmailChangeVerification = ({ userName = 'User', newEmail = 'new@example.com', verificationLink = 'https://example.com/settings/verify-email?token=123', expiryMinutes = 30 }) => {
+    return (jsxs(EmailLayout, { previewText: "Verify your new email address", title: "Verify Email Change", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Verify your new email" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", you recently requested to change the email address associated with your account to ", jsx("strong", { children: newEmail }), "."] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Please click the button below to confirm this change. This link will expire in ", expiryMinutes, " minutes."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: verificationLink, children: "Verify New Email" }) })] }));
+};
+
+export { EmailChangeVerification, EmailChangeVerification as default };
+//# sourceMappingURL=EmailChangeVerification.js.map

package/dist/components/Email/templates/auth/EmailChangeVerification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailChangeVerification.js","sources":["../../../../../src/components/Email/templates/auth/EmailChangeVerification.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface EmailChangeVerificationProps {\n  userName?: string;\n  newEmail?: string;\n  verificationLink?: string;\n  expiryMinutes?: number;\n}\n\nexport const EmailChangeVerification: React.FC<EmailChangeVerificationProps> = ({\n  userName = 'User',\n  newEmail = 'new@example.com',\n  verificationLink = 'https://example.com/settings/verify-email?token=123',\n  expiryMinutes = 30\n}) => {\n  return (\n    <EmailLayout previewText=\"Verify your new email address\" title=\"Verify Email Change\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Verify your new email</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Hi {userName}, you recently requested to change the email address associated with your account to <strong>{newEmail}</strong>.\n      </Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">Please click the button below to confirm this change. This link will expire in {expiryMinutes} minutes.</Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={verificationLink}>Verify New Email</EmailButton>\n      </Section>\n    </EmailLayout>\n  );\n};\n\nexport default EmailChangeVerification;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;MAWa,uBAAuB,GAA2C,CAAC,EAC9E,QAAQ,GAAG,MAAM,EACjB,QAAQ,GAAG,iBAAiB,EAC5B,gBAAgB,GAAG,qDAAqD,EACxE,aAAa,GAAG,EAAE,EACnB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,+BAA+B,EAAC,KAAK,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAClFC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,uBAAA,EAAA,CAA6B,EACpGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,uFAAA,EAAsFC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,QAAQ,EAAA,CAAU,EAAA,GAAA,CAAA,EAAA,CACxH,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,iFAAA,EAAiF,aAAa,EAAA,WAAA,CAAA,EAAA,CAAiB,EAChMC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,gBAAgB,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAgC,EAAA,CAC3D,CAAA,EAAA,CACE;AAElB;;;;"}

package/dist/components/Email/templates/auth/MagicLinkEmail.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MagicLinkEmailProps {
+    magicLink?: string;
+    expiryMinutes?: number;
+}
+export declare const MagicLinkEmail: React.FC<MagicLinkEmailProps>;
+export default MagicLinkEmail;

package/dist/components/Email/templates/auth/MagicLinkEmail.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailDivider } from '../../components/EmailDivider.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const MagicLinkEmail = ({ magicLink = 'https://example.com/api/auth/magic?token=123', expiryMinutes = 15 }) => {
+    return (jsxs(EmailLayout, { previewText: "Your magic link is here", title: "Log in to your account", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Log in to your account" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Click the button below to securely log into your account. This link will expire in ", expiryMinutes, " minutes."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: magicLink, children: "Log in now" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "If you didn't request this email, you can safely ignore it." })] }));
+};
+
+export { MagicLinkEmail, MagicLinkEmail as default };
+//# sourceMappingURL=MagicLinkEmail.js.map

package/dist/components/Email/templates/auth/MagicLinkEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicLinkEmail.js","sources":["../../../../../src/components/Email/templates/auth/MagicLinkEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface MagicLinkEmailProps {\n  magicLink?: string;\n  expiryMinutes?: number;\n}\n\nexport const MagicLinkEmail: React.FC<MagicLinkEmailProps> = ({\n  magicLink = 'https://example.com/api/auth/magic?token=123',\n  expiryMinutes = 15\n}) => {\n  return (\n    <EmailLayout previewText=\"Your magic link is here\" title=\"Log in to your account\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Log in to your account</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Click the button below to securely log into your account. This link will expire in {expiryMinutes} minutes.\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={magicLink}>\n          Log in now\n        </EmailButton>\n      </Section>\n      <EmailDivider />\n      <Text className=\"text-gray-500 dark:text-gray-400 text-sm\">If you didn't request this email, you can safely ignore it.</Text>\n    </EmailLayout>\n  );\n};\n\nexport default MagicLinkEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASO,MAAM,cAAc,GAAkC,CAAC,EAC5D,SAAS,GAAG,8CAA8C,EAC1D,aAAa,GAAG,EAAE,EACnB,KAAI;IACH,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,yBAAyB,EAAC,KAAK,EAAC,wBAAwB,EAAA,QAAA,EAAA,CAC/EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,wBAAA,EAAA,CAA8B,EACrGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,qFAAA,EACK,aAAa,EAAA,WAAA,CAAA,EAAA,CAC5F,EACPC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,CAEd,EAAA,CACN,EACVA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAChBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,6DAAA,EAAA,CAAmE,CAAA,EAAA,CACjH;AAElB;;;;"}

package/dist/components/Email/templates/auth/ResetPasswordEmail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ResetPasswordEmailProps {
+    userName?: string;
+    resetUrl?: string;
+    companyName?: string;
+}
+export declare const ResetPasswordEmail: React.FC<ResetPasswordEmailProps>;
+export default ResetPasswordEmail;

package/dist/components/Email/templates/auth/ResetPasswordEmail.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const ResetPasswordEmail = ({ userName = 'User', resetUrl = 'https://example.com/reset-password', companyName = 'Beyond Corp' }) => {
+    return (jsxs(EmailLayout, { previewText: `Reset your ${companyName} password`, title: "Reset Password", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Reset Password" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4", children: ["Hello ", userName, ","] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Someone recently requested a password change for your ", companyName, " account. If this was you, you can set a new password here:"] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: resetUrl, children: "Reset Password" }) }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4", children: "If you don't want to change your password or didn't request this, just ignore and delete this message." }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base", children: ["Thanks,", jsx("br", {}), "The ", companyName, " Team"] })] }));
+};
+
+export { ResetPasswordEmail, ResetPasswordEmail as default };
+//# sourceMappingURL=ResetPasswordEmail.js.map

package/dist/components/Email/templates/auth/ResetPasswordEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResetPasswordEmail.js","sources":["../../../../../src/components/Email/templates/auth/ResetPasswordEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../components';\n\nexport interface ResetPasswordEmailProps {\n  userName?: string;\n  resetUrl?: string;\n  companyName?: string;\n}\n\nexport const ResetPasswordEmail: React.FC<ResetPasswordEmailProps> = ({\n  userName = 'User',\n  resetUrl = 'https://example.com/reset-password',\n  companyName = 'Beyond Corp'\n}) => {\n  return (\n    <EmailLayout \n      previewText={`Reset your ${companyName} password`}\n      title=\"Reset Password\"\n    >\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Reset Password</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4\">Hello {userName},</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Someone recently requested a password change for your {companyName} account. If this was you, you can set a new password here:\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={resetUrl}>\n          Reset Password\n        </EmailButton>\n      </Section>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4\">\n        If you don't want to change your password or didn't request this, just ignore and delete this message.\n      </Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base\">\n        Thanks,<br />\n        The {companyName} Team\n      </Text>\n    </EmailLayout>\n  );\n};\n\nexport default ResetPasswordEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAUO,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,GAAG,MAAM,EACjB,QAAQ,GAAG,oCAAoC,EAC/C,WAAW,GAAG,aAAa,EAC5B,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EACV,WAAW,EAAE,CAAA,WAAA,EAAc,WAAW,CAAA,SAAA,CAAW,EACjD,KAAK,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAEtBC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,+BAAsB,EAC7FD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,QAAA,EAAQ,QAAQ,SAAS,EAC1GA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,wDAAA,EACxB,WAAW,EAAA,6DAAA,CAAA,EAAA,CAC7D,EACPC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,EAAA,QAAA,EAAA,gBAAA,EAAA,CAEb,EAAA,CACN,EACVA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,wGAAA,EAAA,CAE1E,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4CAA4C,wBACnDC,GAAA,CAAA,IAAA,EAAA,EAAA,CAAM,EAAA,MAAA,EACR,WAAW,EAAA,OAAA,CAAA,EAAA,CACX,CAAA,EAAA,CACK;AAElB;;;;"}

package/dist/components/Email/templates/auth/WelcomeEmail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface WelcomeEmailProps {
+    userName?: string;
+    loginUrl?: string;
+    companyName?: string;
+}
+export declare const WelcomeEmail: React.FC<WelcomeEmailProps>;
+export default WelcomeEmail;

package/dist/components/Email/templates/auth/WelcomeEmail.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const WelcomeEmail = ({ userName = 'User', loginUrl = 'https://example.com/login', companyName = 'Beyond Corp' }) => {
+    return (jsxs(EmailLayout, { previewText: `Welcome to ${companyName}!`, title: `Welcome to ${companyName}`, children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["Welcome to ", companyName, ", ", userName, "!"] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "We're thrilled to have you on board. To get started, please log in to your account." }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: loginUrl, children: "Get Started" }) }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base", children: ["Best,", jsx("br", {}), "The ", companyName, " Team"] })] }));
+};
+
+export { WelcomeEmail, WelcomeEmail as default };
+//# sourceMappingURL=WelcomeEmail.js.map

package/dist/components/Email/templates/auth/WelcomeEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WelcomeEmail.js","sources":["../../../../../src/components/Email/templates/auth/WelcomeEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../components';\n\nexport interface WelcomeEmailProps {\n  userName?: string;\n  loginUrl?: string;\n  companyName?: string;\n}\n\nexport const WelcomeEmail: React.FC<WelcomeEmailProps> = ({\n  userName = 'User',\n  loginUrl = 'https://example.com/login',\n  companyName = 'Beyond Corp'\n}) => {\n  return (\n    <EmailLayout \n      previewText={`Welcome to ${companyName}!`}\n      title={`Welcome to ${companyName}`}\n    >\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Welcome to {companyName}, {userName}!</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        We're thrilled to have you on board. To get started, please log in to your account.\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={loginUrl}>\n          Get Started\n        </EmailButton>\n      </Section>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base\">\n        Best,<br />\n        The {companyName} Team\n      </Text>\n    </EmailLayout>\n  );\n};\n\nexport default WelcomeEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAUO,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,GAAG,MAAM,EACjB,QAAQ,GAAG,2BAA2B,EACtC,WAAW,GAAG,aAAa,EAC5B,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EACV,WAAW,EAAE,CAAA,WAAA,EAAc,WAAW,CAAA,CAAA,CAAG,EACzC,KAAK,EAAE,cAAc,WAAW,CAAA,CAAE,EAAA,QAAA,EAAA,CAElCA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,CAAA,aAAA,EAAa,WAAW,EAAA,IAAA,EAAI,QAAQ,EAAA,GAAA,CAAA,EAAA,CAAS,EACpHC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,qFAAA,EAAA,CAE1E,EACPA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAA,QAAA,EAAA,aAAA,EAAA,CAEb,EAAA,CACN,EACVD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAAA,OAAA,EACrDC,GAAA,CAAA,IAAA,EAAA,EAAA,CAAM,EAAA,MAAA,EACN,WAAW,EAAA,OAAA,CAAA,EAAA,CACX,CAAA,EAAA,CACK;AAElB;;;;"}

package/dist/components/Email/templates/auth/index.d.ts

@@ -0,0 +1,5 @@
+export * from './WelcomeEmail';
+export * from './ResetPasswordEmail';
+export * from './ConfirmEmail';
+export * from './MagicLinkEmail';
+export * from './EmailChangeVerification';

package/dist/components/Email/templates/billing/CreditCardExpiring.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CreditCardExpiringProps {
+    userName?: string;
+    cardLast4?: string;
+    expirationDate?: string;
+    updateLink?: string;
+}
+export declare const CreditCardExpiring: React.FC<CreditCardExpiringProps>;
+export default CreditCardExpiring;

package/dist/components/Email/templates/billing/CreditCardExpiring.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailDivider } from '../../components/EmailDivider.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const CreditCardExpiring = ({ userName = 'User', cardLast4 = '4242', expirationDate = '10/26', updateLink = 'https://example.com/billing/payment-methods' }) => {
+    return (jsxs(EmailLayout, { previewText: "Your payment method is expiring soon", title: "Update Payment Method", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Action Required" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", the credit card ending in ", jsx("strong", { children: cardLast4 }), " that we have on file for your subscription is scheduled to expire on ", jsx("strong", { children: expirationDate }), "."] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "To avoid any interruption to your service, please update your payment information as soon as possible." }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: updateLink, children: "Update Payment Details" }) }), jsx(EmailDivider, {})] }));
+};
+
+export { CreditCardExpiring, CreditCardExpiring as default };
+//# sourceMappingURL=CreditCardExpiring.js.map

package/dist/components/Email/templates/billing/CreditCardExpiring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardExpiring.js","sources":["../../../../../src/components/Email/templates/billing/CreditCardExpiring.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface CreditCardExpiringProps {\n  userName?: string;\n  cardLast4?: string;\n  expirationDate?: string;\n  updateLink?: string;\n}\n\nexport const CreditCardExpiring: React.FC<CreditCardExpiringProps> = ({\n  userName = 'User',\n  cardLast4 = '4242',\n  expirationDate = '10/26',\n  updateLink = 'https://example.com/billing/payment-methods'\n}) => {\n  return (\n    <EmailLayout previewText=\"Your payment method is expiring soon\" title=\"Update Payment Method\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Action Required</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Hi {userName}, the credit card ending in <strong>{cardLast4}</strong> that we have on file for your subscription is scheduled to expire on <strong>{expirationDate}</strong>.\n      </Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        To avoid any interruption to your service, please update your payment information as soon as possible.\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={updateLink}>Update Payment Details</EmailButton>\n      </Section>\n      <EmailDivider />\n    </EmailLayout>\n  );\n};\n\nexport default CreditCardExpiring;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;MAWa,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,GAAG,MAAM,EACjB,SAAS,GAAG,MAAM,EAClB,cAAc,GAAG,OAAO,EACxB,UAAU,GAAG,6CAA6C,EAC3D,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,sCAAsC,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAC3FC,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,iBAAA,EAAA,CAAuB,EAC9FD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,8BAAA,EAA6BC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,SAAS,EAAA,CAAU,EAAA,wEAAA,EAAsEA,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,cAAc,EAAA,CAAU,EAAA,GAAA,CAAA,EAAA,CACvK,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,wGAAA,EAAA,CAE1E,EACPA,GAAA,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,EAAA,QAAA,EAAA,wBAAA,EAAA,CAAsC,EAAA,CAC3D,EACVA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,CAAA,EAAA,CACJ;AAElB;;;;"}

package/dist/components/Email/templates/billing/InvoiceEmail.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface InvoiceEmailProps {
+    userName?: string;
+    amount?: string;
+    planName?: string;
+    billingPeriod?: string;
+    invoiceUrl?: string;
+}
+export declare const InvoiceEmail: React.FC<InvoiceEmailProps>;
+export default InvoiceEmail;

package/dist/components/Email/templates/billing/InvoiceEmail.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailDivider } from '../../components/EmailDivider.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Row } from '../../../../node_modules/@react-email/row/dist/index.js';
+import { Column } from '../../../../node_modules/@react-email/column/dist/index.js';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const InvoiceEmail = ({ userName = 'User', amount = '$29.00', planName = 'Pro Plan', billingPeriod = 'May 2026 - Jun 2026', invoiceUrl = 'https://example.com/invoice' }) => {
+    return (jsxs(EmailLayout, { previewText: "Your latest invoice is ready", title: "Invoice Available", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Your Receipt" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", thanks for your continued support! We've successfully processed your payment for the ", planName, "."] }), jsxs(Section, { className: "bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6", children: [jsxs(Row, { className: "mb-2", children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0", children: "Plan" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "font-semibold text-gray-900 dark:text-white m-0", children: planName }) })] }), jsxs(Row, { className: "mb-2", children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0", children: "Period" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "font-semibold text-gray-900 dark:text-white m-0", children: billingPeriod }) })] }), jsx(EmailDivider, {}), jsxs(Row, { children: [jsx(Column, { children: jsx(Text, { className: "text-gray-900 dark:text-white font-bold m-0", children: "Total" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "font-bold text-blue-600 dark:text-blue-400 m-0", children: amount }) })] })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: invoiceUrl, children: "Download PDF" }) })] }));
+};
+
+export { InvoiceEmail, InvoiceEmail as default };
+//# sourceMappingURL=InvoiceEmail.js.map

package/dist/components/Email/templates/billing/InvoiceEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceEmail.js","sources":["../../../../../src/components/Email/templates/billing/InvoiceEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface InvoiceEmailProps {\n  userName?: string;\n  amount?: string;\n  planName?: string;\n  billingPeriod?: string;\n  invoiceUrl?: string;\n}\n\nexport const InvoiceEmail: React.FC<InvoiceEmailProps> = ({\n  userName = 'User',\n  amount = '$29.00',\n  planName = 'Pro Plan',\n  billingPeriod = 'May 2026 - Jun 2026',\n  invoiceUrl = 'https://example.com/invoice'\n}) => {\n  return (\n    <EmailLayout previewText=\"Your latest invoice is ready\" title=\"Invoice Available\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Your Receipt</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Hi {userName}, thanks for your continued support! We've successfully processed your payment for the {planName}.\n      </Text>\n      \n      <Section className=\"bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6\">\n        <Row className=\"mb-2\">\n          <Column><Text className=\"text-gray-500 dark:text-gray-400 m-0\">Plan</Text></Column>\n          <Column className=\"text-right\"><Text className=\"font-semibold text-gray-900 dark:text-white m-0\">{planName}</Text></Column>\n        </Row>\n        <Row className=\"mb-2\">\n          <Column><Text className=\"text-gray-500 dark:text-gray-400 m-0\">Period</Text></Column>\n          <Column className=\"text-right\"><Text className=\"font-semibold text-gray-900 dark:text-white m-0\">{billingPeriod}</Text></Column>\n        </Row>\n        <EmailDivider />\n        <Row>\n          <Column><Text className=\"text-gray-900 dark:text-white font-bold m-0\">Total</Text></Column>\n          <Column className=\"text-right\"><Text className=\"font-bold text-blue-600 dark:text-blue-400 m-0\">{amount}</Text></Column>\n        </Row>\n      </Section>\n\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={invoiceUrl}>\n          Download PDF\n        </EmailButton>\n      </Section>\n    </EmailLayout>\n  );\n};\n\nexport default InvoiceEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAYO,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,QAAQ,EACjB,QAAQ,GAAG,UAAU,EACrB,aAAa,GAAG,qBAAqB,EACrC,UAAU,GAAG,6BAA6B,EAC3C,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,8BAA8B,EAAC,KAAK,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAC/EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,cAAA,EAAA,CAAoB,EAC3FD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,yFAAA,EAAyF,QAAQ,EAAA,GAAA,CAAA,EAAA,CACxG,EAEPA,KAAC,OAAO,EAAA,EAAC,SAAS,EAAC,iDAAiD,aAClEA,IAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,IAAC,MAAM,EAAA,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,MAAA,EAAA,CAAY,EAAA,CAAS,EACnFA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,YAAE,QAAQ,EAAA,CAAQ,EAAA,CAAS,CAAA,EAAA,CACvH,EACND,IAAA,CAAC,GAAG,IAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,sCAAsC,uBAAc,EAAA,CAAS,EACrFA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,YAAE,aAAa,EAAA,CAAQ,GAAS,CAAA,EAAA,CAC5H,EACNA,IAAC,YAAY,EAAA,EAAA,CAAG,EAChBD,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,CACFC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,sBAAa,EAAA,CAAS,EAC3FA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAE,MAAM,EAAA,CAAQ,EAAA,CAAS,CAAA,EAAA,CACpH,CAAA,EAAA,CACE,EAEVA,GAAA,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,6BAEf,EAAA,CACN,CAAA,EAAA,CACE;AAElB;;;;"}

package/dist/components/Email/templates/billing/OverduePaymentNotice.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface OverduePaymentNoticeProps {
+    userName?: string;
+    amountDue?: string;
+    suspensionDate?: string;
+    paymentLink?: string;
+}
+export declare const OverduePaymentNotice: React.FC<OverduePaymentNoticeProps>;
+export default OverduePaymentNotice;

package/dist/components/Email/templates/billing/OverduePaymentNotice.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const OverduePaymentNotice = ({ userName = 'User', amountDue = '$29.00', suspensionDate = 'May 15, 2026', paymentLink = 'https://example.com/billing/pay' }) => {
+    return (jsxs(EmailLayout, { previewText: "Final Notice: Payment Overdue", title: "Overdue Payment", children: [jsx(Text, { className: "text-2xl font-bold text-red-600 dark:text-red-400 mb-4", children: "Payment Overdue" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", your recent payment of ", jsx("strong", { children: amountDue }), " is currently overdue."] }), jsx(Section, { className: "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-4 rounded-lg mb-6", children: jsxs(Text, { className: "text-red-800 dark:text-red-200 m-0", children: ["To avoid account suspension and keep access to your workspace, please process your payment by ", jsx("strong", { children: suspensionDate }), "."] }) }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: paymentLink, children: "Pay Balance Now" }) })] }));
+};
+
+export { OverduePaymentNotice, OverduePaymentNotice as default };
+//# sourceMappingURL=OverduePaymentNotice.js.map

package/dist/components/Email/templates/billing/OverduePaymentNotice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverduePaymentNotice.js","sources":["../../../../../src/components/Email/templates/billing/OverduePaymentNotice.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface OverduePaymentNoticeProps {\n  userName?: string;\n  amountDue?: string;\n  suspensionDate?: string;\n  paymentLink?: string;\n}\n\nexport const OverduePaymentNotice: React.FC<OverduePaymentNoticeProps> = ({\n  userName = 'User',\n  amountDue = '$29.00',\n  suspensionDate = 'May 15, 2026',\n  paymentLink = 'https://example.com/billing/pay'\n}) => {\n  return (\n    <EmailLayout previewText=\"Final Notice: Payment Overdue\" title=\"Overdue Payment\">\n      <Text className=\"text-2xl font-bold text-red-600 dark:text-red-400 mb-4\">Payment Overdue</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Hi {userName}, your recent payment of <strong>{amountDue}</strong> is currently overdue.\n      </Text>\n      <Section className=\"bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-4 rounded-lg mb-6\">\n        <Text className=\"text-red-800 dark:text-red-200 m-0\">\n          To avoid account suspension and keep access to your workspace, please process your payment by <strong>{suspensionDate}</strong>.\n        </Text>\n      </Section>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={paymentLink}>Pay Balance Now</EmailButton>\n      </Section>\n    </EmailLayout>\n  );\n};\n\nexport default OverduePaymentNotice;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;MAWa,oBAAoB,GAAwC,CAAC,EACxE,QAAQ,GAAG,MAAM,EACjB,SAAS,GAAG,QAAQ,EACpB,cAAc,GAAG,cAAc,EAC/B,WAAW,GAAG,iCAAiC,EAChD,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,+BAA+B,EAAC,KAAK,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC9EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wDAAwD,EAAA,QAAA,EAAA,iBAAA,EAAA,CAAuB,EAC/FD,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,2BAAA,EAA0BC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,SAAS,EAAA,CAAU,8BAC7D,EACPA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAC7GD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,CAAA,gGAAA,EAC4CC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,cAAc,EAAA,CAAU,SAC1H,EAAA,CACC,EACVA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,YACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,CAA+B,EAAA,CACrD,CAAA,EAAA,CACE;AAElB;;;;"}

package/dist/components/Email/templates/billing/PaymentFailedEmail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PaymentFailedEmailProps {
+    userName?: string;
+    amount?: string;
+    updatePaymentLink?: string;
+}
+export declare const PaymentFailedEmail: React.FC<PaymentFailedEmailProps>;
+export default PaymentFailedEmail;

package/dist/components/Email/templates/billing/PaymentFailedEmail.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailDivider } from '../../components/EmailDivider.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const PaymentFailedEmail = ({ userName = 'User', amount = '$29.00', updatePaymentLink = 'https://example.com/billing' }) => {
+    return (jsxs(EmailLayout, { previewText: "Action Required: Payment Failed", title: "Payment Failed", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Payment Failed" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we were unable to process your recent payment of ", amount, ". To keep your subscription active, please update your payment information."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: updatePaymentLink, children: "Update Payment Details" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "If you have already updated your payment information, please ignore this email." })] }));
+};
+
+export { PaymentFailedEmail, PaymentFailedEmail as default };
+//# sourceMappingURL=PaymentFailedEmail.js.map

package/dist/components/Email/templates/billing/PaymentFailedEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentFailedEmail.js","sources":["../../../../../src/components/Email/templates/billing/PaymentFailedEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface PaymentFailedEmailProps {\n  userName?: string;\n  amount?: string;\n  updatePaymentLink?: string;\n}\n\nexport const PaymentFailedEmail: React.FC<PaymentFailedEmailProps> = ({\n  userName = 'User',\n  amount = '$29.00',\n  updatePaymentLink = 'https://example.com/billing'\n}) => {\n  return (\n    <EmailLayout previewText=\"Action Required: Payment Failed\" title=\"Payment Failed\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Payment Failed</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Hi {userName}, we were unable to process your recent payment of {amount}. To keep your subscription active, please update your payment information.\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={updatePaymentLink}>\n          Update Payment Details\n        </EmailButton>\n      </Section>\n      <EmailDivider />\n      <Text className=\"text-gray-500 dark:text-gray-400 text-sm\">\n        If you have already updated your payment information, please ignore this email.\n      </Text>\n    </EmailLayout>\n  );\n};\n\nexport default PaymentFailedEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAUO,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,QAAQ,EACjB,iBAAiB,GAAG,6BAA6B,EAClD,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,iCAAiC,EAAC,KAAK,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAC/EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,gBAAA,EAAA,CAAsB,EAC7FD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,qDAAA,EAAqD,MAAM,EAAA,6EAAA,CAAA,EAAA,CAClE,EACPC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,iBAAiB,EAAA,QAAA,EAAA,wBAAA,EAAA,CAEtB,EAAA,CACN,EACVA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAChBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,iFAAA,EAAA,CAEnD,CAAA,EAAA,CACK;AAElB;;;;"}

package/dist/components/Email/templates/billing/PaymentReceipt.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PaymentReceiptProps {
+    userName?: string;
+    amount?: string;
+    date?: string;
+    receiptId?: string;
+    receiptUrl?: string;
+}
+export declare const PaymentReceipt: React.FC<PaymentReceiptProps>;
+export default PaymentReceipt;

package/dist/components/Email/templates/billing/PaymentReceipt.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+import { Row } from '../../../../node_modules/@react-email/row/dist/index.js';
+import { Column } from '../../../../node_modules/@react-email/column/dist/index.js';
+
+const PaymentReceipt = ({ userName = 'User', amount = '$49.00', date = 'May 8, 2026', receiptId = 'RCPT-98765', receiptUrl = 'https://example.com/billing/receipts/98765' }) => {
+    return (jsxs(EmailLayout, { previewText: `Payment receipt for ${amount}`, title: "Payment Receipt", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Thank you for your payment!" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we've successfully received your payment."] }), jsxs(Section, { className: "bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 border border-gray-100 dark:border-gray-600", children: [jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 mb-1 text-sm", children: "Amount Paid" }), jsx(Text, { className: "text-3xl font-bold text-gray-900 dark:text-white m-0 mb-4", children: amount }), jsxs(Row, { className: "mb-2", children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 text-sm", children: "Date" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "text-gray-900 dark:text-white font-medium m-0 text-sm", children: date }) })] }), jsxs(Row, { children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 text-sm", children: "Receipt ID" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "text-gray-900 dark:text-white font-medium m-0 text-sm", children: receiptId }) })] })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: receiptUrl, children: "View Full Receipt" }) })] }));
+};
+
+export { PaymentReceipt, PaymentReceipt as default };
+//# sourceMappingURL=PaymentReceipt.js.map

package/dist/components/Email/templates/billing/PaymentReceipt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentReceipt.js","sources":["../../../../../src/components/Email/templates/billing/PaymentReceipt.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface PaymentReceiptProps {\n  userName?: string;\n  amount?: string;\n  date?: string;\n  receiptId?: string;\n  receiptUrl?: string;\n}\n\nexport const PaymentReceipt: React.FC<PaymentReceiptProps> = ({\n  userName = 'User',\n  amount = '$49.00',\n  date = 'May 8, 2026',\n  receiptId = 'RCPT-98765',\n  receiptUrl = 'https://example.com/billing/receipts/98765'\n}) => {\n  return (\n    <EmailLayout previewText={`Payment receipt for ${amount}`} title=\"Payment Receipt\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Thank you for your payment!</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">Hi {userName}, we've successfully received your payment.</Text>\n      <Section className=\"bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 border border-gray-100 dark:border-gray-600\">\n        <Text className=\"text-gray-500 dark:text-gray-400 m-0 mb-1 text-sm\">Amount Paid</Text>\n        <Text className=\"text-3xl font-bold text-gray-900 dark:text-white m-0 mb-4\">{amount}</Text>\n        <Row className=\"mb-2\"><Column><Text className=\"text-gray-500 dark:text-gray-400 m-0 text-sm\">Date</Text></Column><Column className=\"text-right\"><Text className=\"text-gray-900 dark:text-white font-medium m-0 text-sm\">{date}</Text></Column></Row>\n        <Row><Column><Text className=\"text-gray-500 dark:text-gray-400 m-0 text-sm\">Receipt ID</Text></Column><Column className=\"text-right\"><Text className=\"text-gray-900 dark:text-white font-medium m-0 text-sm\">{receiptId}</Text></Column></Row>\n      </Section>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={receiptUrl}>View Full Receipt</EmailButton>\n      </Section>\n    </EmailLayout>\n  );\n};\n\nexport default PaymentReceipt;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAYO,MAAM,cAAc,GAAkC,CAAC,EAC5D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,QAAQ,EACjB,IAAI,GAAG,aAAa,EACpB,SAAS,GAAG,YAAY,EACxB,UAAU,GAAG,4CAA4C,EAC1D,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,CAAA,oBAAA,EAAuB,MAAM,CAAA,CAAE,EAAE,KAAK,EAAC,iBAAiB,aAChFC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,6BAAA,EAAA,CAAmC,EAC1GD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAAK,QAAQ,EAAA,6CAAA,CAAA,EAAA,CAAmD,EACjJA,KAAC,OAAO,EAAA,EAAC,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC9GC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,aAAA,EAAA,CAAmB,EACtFA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2DAA2D,EAAA,QAAA,EAAE,MAAM,EAAA,CAAQ,EAC3FD,IAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAACC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,MAAA,EAAA,CAAY,EAAA,CAAS,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,YAAE,IAAI,EAAA,CAAQ,EAAA,CAAS,CAAA,EAAA,CAAM,EACpPD,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,CAACC,IAAC,MAAM,EAAA,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,YAAA,EAAA,CAAkB,GAAS,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAE,SAAS,EAAA,CAAQ,EAAA,CAAS,IAAM,CAAA,EAAA,CACtO,EACVA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,YACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,EAAA,QAAA,EAAA,mBAAA,EAAA,CAAiC,EAAA,CACtD,CAAA,EAAA,CACE;AAElB;;;;"}

package/dist/components/Email/templates/billing/SubscriptionCancelled.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface SubscriptionCancelledProps {
+    userName?: string;
+    planName?: string;
+    cancellationDate?: string;
+    reactivationLink?: string;
+}
+export declare const SubscriptionCancelled: React.FC<SubscriptionCancelledProps>;
+export default SubscriptionCancelled;

package/dist/components/Email/templates/billing/SubscriptionCancelled.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmailButton } from '../../components/EmailButton.js';
+import { EmailDivider } from '../../components/EmailDivider.js';
+import { EmailLayout } from '../../components/EmailLayout.js';
+import 'react';
+import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
+import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
+
+const SubscriptionCancelled = ({ userName = 'User', planName = 'Pro Plan', cancellationDate = 'June 8, 2026', reactivationLink = 'https://example.com/billing/reactivate' }) => {
+    return (jsxs(EmailLayout, { previewText: "Your subscription has been cancelled", title: "Subscription Cancelled", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Subscription Cancelled" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", your ", planName, " subscription has been successfully cancelled. You will continue to have access to your premium features until the end of your current billing cycle on ", jsx("strong", { children: cancellationDate }), "."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: reactivationLink, children: "Reactivate Subscription" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "We're sorry to see you go. If you have a moment, we'd love to hear your feedback on how we can improve." })] }));
+};
+
+export { SubscriptionCancelled, SubscriptionCancelled as default };
+//# sourceMappingURL=SubscriptionCancelled.js.map

package/dist/components/Email/templates/billing/SubscriptionCancelled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionCancelled.js","sources":["../../../../../src/components/Email/templates/billing/SubscriptionCancelled.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Link } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface SubscriptionCancelledProps {\n  userName?: string;\n  planName?: string;\n  cancellationDate?: string;\n  reactivationLink?: string;\n}\n\nexport const SubscriptionCancelled: React.FC<SubscriptionCancelledProps> = ({\n  userName = 'User',\n  planName = 'Pro Plan',\n  cancellationDate = 'June 8, 2026',\n  reactivationLink = 'https://example.com/billing/reactivate'\n}) => {\n  return (\n    <EmailLayout previewText=\"Your subscription has been cancelled\" title=\"Subscription Cancelled\">\n      <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Subscription Cancelled</Text>\n      <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n        Hi {userName}, your {planName} subscription has been successfully cancelled. You will continue to have access to your premium features until the end of your current billing cycle on <strong>{cancellationDate}</strong>.\n      </Text>\n      <Section className=\"text-center mb-6\">\n        <EmailButton href={reactivationLink}>Reactivate Subscription</EmailButton>\n      </Section>\n      <EmailDivider />\n      <Text className=\"text-gray-500 dark:text-gray-400 text-sm\">We're sorry to see you go. If you have a moment, we'd love to hear your feedback on how we can improve.</Text>\n    </EmailLayout>\n  );\n};\n\nexport default SubscriptionCancelled;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;MAWa,qBAAqB,GAAyC,CAAC,EAC1E,QAAQ,GAAG,MAAM,EACjB,QAAQ,GAAG,UAAU,EACrB,gBAAgB,GAAG,cAAc,EACjC,gBAAgB,GAAG,wCAAwC,EAC5D,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,sCAAsC,EAAC,KAAK,EAAC,wBAAwB,EAAA,QAAA,EAAA,CAC5FC,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,wBAAA,EAAA,CAA8B,EACrGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,SAAA,EAAS,QAAQ,EAAA,0JAAA,EAAyJC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,gBAAgB,EAAA,CAAU,EAAA,GAAA,CAAA,EAAA,CACpN,EACPA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,gBAAgB,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAuC,EAAA,CAClE,EACVA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAChBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,yGAAA,EAAA,CAA+G,CAAA,EAAA,CAC7J;AAElB;;;;"}