payload-plugin-newsletter 0.1.0

package/dist/src/templates/BaseTemplate.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Body, Container, Head, Html, Preview, Section, Text, Link, Hr } from '@react-email/components';
+export const baseStyles = {
+    main: {
+        backgroundColor: '#ffffff',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+    },
+    container: {
+        margin: '0 auto',
+        padding: '20px 0 48px',
+        maxWidth: '600px'
+    },
+    content: {
+        padding: '0 20px'
+    },
+    footer: {
+        padding: '32px 20px',
+        textAlign: 'center'
+    },
+    footerText: {
+        color: '#8898aa',
+        fontSize: '12px',
+        lineHeight: '16px',
+        margin: '0'
+    },
+    footerLink: {
+        color: '#8898aa',
+        textDecoration: 'underline'
+    },
+    hr: {
+        borderColor: '#e6ebf1',
+        margin: '32px 0'
+    }
+};
+export const BaseTemplate = ({ preview, children, footer })=>{
+    return /*#__PURE__*/ _jsxs(Html, {
+        children: [
+            /*#__PURE__*/ _jsx(Head, {}),
+            preview && /*#__PURE__*/ _jsx(Preview, {
+                children: preview
+            }),
+            /*#__PURE__*/ _jsx(Body, {
+                style: baseStyles.main,
+                children: /*#__PURE__*/ _jsxs(Container, {
+                    style: baseStyles.container,
+                    children: [
+                        /*#__PURE__*/ _jsx(Section, {
+                            style: baseStyles.content,
+                            children: children
+                        }),
+                        footer && /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Hr, {
+                                    style: baseStyles.hr
+                                }),
+                                /*#__PURE__*/ _jsxs(Section, {
+                                    style: baseStyles.footer,
+                                    children: [
+                                        (footer.unsubscribeUrl || footer.preferencesUrl) && /*#__PURE__*/ _jsxs(Text, {
+                                            style: baseStyles.footerText,
+                                            children: [
+                                                footer.preferencesUrl && /*#__PURE__*/ _jsxs(_Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Link, {
+                                                            href: footer.preferencesUrl,
+                                                            style: baseStyles.footerLink,
+                                                            children: "Manage preferences"
+                                                        }),
+                                                        footer.unsubscribeUrl && ' • '
+                                                    ]
+                                                }),
+                                                footer.unsubscribeUrl && /*#__PURE__*/ _jsx(Link, {
+                                                    href: footer.unsubscribeUrl,
+                                                    style: baseStyles.footerLink,
+                                                    children: "Unsubscribe"
+                                                })
+                                            ]
+                                        }),
+                                        footer.address && /*#__PURE__*/ _jsx(Text, {
+                                            style: {
+                                                ...baseStyles.footerText,
+                                                marginTop: '16px'
+                                            },
+                                            children: footer.address
+                                        }),
+                                        footer.copyright && /*#__PURE__*/ _jsx(Text, {
+                                            style: {
+                                                ...baseStyles.footerText,
+                                                marginTop: '8px'
+                                            },
+                                            children: footer.copyright
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=BaseTemplate.js.map

package/dist/src/templates/BaseTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/templates/BaseTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Body,\n  Container,\n  Head,\n  Html,\n  Preview,\n  Section,\n  Text,\n  Link,\n  Hr,\n} from '@react-email/components'\n\nexport interface BaseTemplateProps {\n  preview?: string\n  children: React.ReactNode\n  footer?: {\n    unsubscribeUrl?: string\n    preferencesUrl?: string\n    address?: string\n    copyright?: string\n  }\n}\n\nexport const baseStyles = {\n  main: {\n    backgroundColor: '#ffffff',\n    fontFamily:\n      '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',\n  },\n  container: {\n    margin: '0 auto',\n    padding: '20px 0 48px',\n    maxWidth: '600px',\n  },\n  content: {\n    padding: '0 20px',\n  },\n  footer: {\n    padding: '32px 20px',\n    textAlign: 'center' as const,\n  },\n  footerText: {\n    color: '#8898aa',\n    fontSize: '12px',\n    lineHeight: '16px',\n    margin: '0',\n  },\n  footerLink: {\n    color: '#8898aa',\n    textDecoration: 'underline',\n  },\n  hr: {\n    borderColor: '#e6ebf1',\n    margin: '32px 0',\n  },\n}\n\nexport const BaseTemplate: React.FC<BaseTemplateProps> = ({\n  preview,\n  children,\n  footer,\n}) => {\n  return (\n    <Html>\n      <Head />\n      {preview && <Preview>{preview}</Preview>}\n      <Body style={baseStyles.main}>\n        <Container style={baseStyles.container}>\n          <Section style={baseStyles.content}>\n            {children}\n          </Section>\n          \n          {footer && (\n            <>\n              <Hr style={baseStyles.hr} />\n              <Section style={baseStyles.footer}>\n                {(footer.unsubscribeUrl || footer.preferencesUrl) && (\n                  <Text style={baseStyles.footerText}>\n                    {footer.preferencesUrl && (\n                      <>\n                        <Link\n                          href={footer.preferencesUrl}\n                          style={baseStyles.footerLink}\n                        >\n                          Manage preferences\n                        </Link>\n                        {footer.unsubscribeUrl && ' • '}\n                      </>\n                    )}\n                    {footer.unsubscribeUrl && (\n                      <Link\n                        href={footer.unsubscribeUrl}\n                        style={baseStyles.footerLink}\n                      >\n                        Unsubscribe\n                      </Link>\n                    )}\n                  </Text>\n                )}\n                \n                {footer.address && (\n                  <Text style={{ ...baseStyles.footerText, marginTop: '16px' }}>\n                    {footer.address}\n                  </Text>\n                )}\n                \n                {footer.copyright && (\n                  <Text style={{ ...baseStyles.footerText, marginTop: '8px' }}>\n                    {footer.copyright}\n                  </Text>\n                )}\n              </Section>\n            </>\n          )}\n        </Container>\n      </Body>\n    </Html>\n  )\n}"],"names":["React","Body","Container","Head","Html","Preview","Section","Text","Link","Hr","baseStyles","main","backgroundColor","fontFamily","container","margin","padding","maxWidth","content","footer","textAlign","footerText","color","fontSize","lineHeight","footerLink","textDecoration","hr","borderColor","BaseTemplate","preview","children","style","unsubscribeUrl","preferencesUrl","href","address","marginTop","copyright"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AACzB,SACEC,IAAI,EACJC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,IAAI,EACJC,IAAI,EACJC,EAAE,QACG,0BAAyB;AAahC,OAAO,MAAMC,aAAa;IACxBC,MAAM;QACJC,iBAAiB;QACjBC,YACE;IACJ;IACAC,WAAW;QACTC,QAAQ;QACRC,SAAS;QACTC,UAAU;IACZ;IACAC,SAAS;QACPF,SAAS;IACX;IACAG,QAAQ;QACNH,SAAS;QACTI,WAAW;IACb;IACAC,YAAY;QACVC,OAAO;QACPC,UAAU;QACVC,YAAY;QACZT,QAAQ;IACV;IACAU,YAAY;QACVH,OAAO;QACPI,gBAAgB;IAClB;IACAC,IAAI;QACFC,aAAa;QACbb,QAAQ;IACV;AACF,EAAC;AAED,OAAO,MAAMc,eAA4C,CAAC,EACxDC,OAAO,EACPC,QAAQ,EACRZ,MAAM,EACP;IACC,qBACE,MAACf;;0BACC,KAACD;YACA2B,yBAAW,KAACzB;0BAASyB;;0BACtB,KAAC7B;gBAAK+B,OAAOtB,WAAWC,IAAI;0BAC1B,cAAA,MAACT;oBAAU8B,OAAOtB,WAAWI,SAAS;;sCACpC,KAACR;4BAAQ0B,OAAOtB,WAAWQ,OAAO;sCAC/Ba;;wBAGFZ,wBACC;;8CACE,KAACV;oCAAGuB,OAAOtB,WAAWiB,EAAE;;8CACxB,MAACrB;oCAAQ0B,OAAOtB,WAAWS,MAAM;;wCAC7BA,CAAAA,OAAOc,cAAc,IAAId,OAAOe,cAAc,AAAD,mBAC7C,MAAC3B;4CAAKyB,OAAOtB,WAAWW,UAAU;;gDAC/BF,OAAOe,cAAc,kBACpB;;sEACE,KAAC1B;4DACC2B,MAAMhB,OAAOe,cAAc;4DAC3BF,OAAOtB,WAAWe,UAAU;sEAC7B;;wDAGAN,OAAOc,cAAc,IAAI;;;gDAG7Bd,OAAOc,cAAc,kBACpB,KAACzB;oDACC2B,MAAMhB,OAAOc,cAAc;oDAC3BD,OAAOtB,WAAWe,UAAU;8DAC7B;;;;wCAONN,OAAOiB,OAAO,kBACb,KAAC7B;4CAAKyB,OAAO;gDAAE,GAAGtB,WAAWW,UAAU;gDAAEgB,WAAW;4CAAO;sDACxDlB,OAAOiB,OAAO;;wCAIlBjB,OAAOmB,SAAS,kBACf,KAAC/B;4CAAKyB,OAAO;gDAAE,GAAGtB,WAAWW,UAAU;gDAAEgB,WAAW;4CAAM;sDACvDlB,OAAOmB,SAAS;;;;;;;;;;;AAUrC,EAAC"}

package/dist/src/templates/MagicLinkTemplate.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Heading, Text, Button, Section } from '@react-email/components';
+import { BaseTemplate } from './BaseTemplate';
+const magicLinkStyles = {
+    heading: {
+        fontSize: '28px',
+        fontWeight: '700',
+        color: '#1a1a1a',
+        margin: '0 0 16px 0'
+    },
+    text: {
+        fontSize: '16px',
+        lineHeight: '24px',
+        color: '#4a4a4a',
+        margin: '0 0 16px 0'
+    },
+    button: {
+        backgroundColor: '#0066cc',
+        borderRadius: '6px',
+        color: '#ffffff',
+        fontSize: '16px',
+        fontWeight: '600',
+        textDecoration: 'none',
+        textAlign: 'center',
+        display: 'block',
+        width: '100%',
+        padding: '16px 24px',
+        margin: '32px 0'
+    },
+    codeSection: {
+        backgroundColor: '#f6f8fa',
+        borderRadius: '6px',
+        padding: '24px',
+        margin: '24px 0',
+        textAlign: 'center'
+    },
+    code: {
+        fontSize: '24px',
+        fontWeight: '700',
+        color: '#1a1a1a',
+        letterSpacing: '2px',
+        fontFamily: 'monospace'
+    },
+    warning: {
+        fontSize: '14px',
+        color: '#dc3545',
+        margin: '16px 0',
+        padding: '12px',
+        backgroundColor: '#f8d7da',
+        borderRadius: '4px'
+    },
+    expire: {
+        fontSize: '14px',
+        color: '#6c757d',
+        fontStyle: 'italic'
+    }
+};
+export const MagicLinkTemplate = ({ magicLinkUrl, subscriber })=>{
+    // Extract a verification code from the URL for fallback
+    const urlParams = new URL(magicLinkUrl).searchParams;
+    const token = urlParams.get('token');
+    const verificationCode = token ? token.slice(-6).toUpperCase() : 'XXXXXX';
+    return /*#__PURE__*/ _jsxs(BaseTemplate, {
+        preview: "Sign in to manage your newsletter preferences",
+        children: [
+            /*#__PURE__*/ _jsx(Heading, {
+                style: magicLinkStyles.heading,
+                children: "Sign in to your account"
+            }),
+            /*#__PURE__*/ _jsxs(Text, {
+                style: magicLinkStyles.text,
+                children: [
+                    "Hi",
+                    subscriber.name ? ` ${subscriber.name}` : '',
+                    ","
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                style: magicLinkStyles.text,
+                children: "You requested a sign-in link for your newsletter account. Click the button below to access your preferences:"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                href: magicLinkUrl,
+                style: magicLinkStyles.button,
+                children: "Sign In to Your Account"
+            }),
+            /*#__PURE__*/ _jsxs(Section, {
+                style: magicLinkStyles.codeSection,
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        style: {
+                            ...magicLinkStyles.text,
+                            margin: '0 0 8px 0'
+                        },
+                        children: "Or use this verification code:"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        style: magicLinkStyles.code,
+                        children: verificationCode
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                style: magicLinkStyles.warning,
+                children: "If you didn't request this email, you can safely ignore it."
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                style: magicLinkStyles.expire,
+                children: "This link will expire in 7 days for your security."
+            })
+        ]
+    });
+};
+// Export a function that creates a custom magic link template
+export function createMagicLinkTemplate(customContent, customStyles) {
+    const mergedStyles = {
+        ...magicLinkStyles,
+        ...customStyles
+    };
+    return (props)=>{
+        const urlParams = new URL(props.magicLinkUrl).searchParams;
+        const token = urlParams.get('token');
+        const verificationCode = token ? token.slice(-6).toUpperCase() : 'XXXXXX';
+        return /*#__PURE__*/ _jsxs(BaseTemplate, {
+            preview: customContent?.heading || "Sign in to manage your newsletter preferences",
+            children: [
+                /*#__PURE__*/ _jsx(Heading, {
+                    style: mergedStyles.heading,
+                    children: customContent?.heading || 'Sign in to your account'
+                }),
+                /*#__PURE__*/ _jsxs(Text, {
+                    style: mergedStyles.text,
+                    children: [
+                        "Hi",
+                        props.subscriber.name ? ` ${props.subscriber.name}` : '',
+                        ","
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    style: mergedStyles.text,
+                    children: customContent?.intro || 'You requested a sign-in link for your newsletter account. Click the button below to access your preferences:'
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    href: props.magicLinkUrl,
+                    style: mergedStyles.button,
+                    children: customContent?.buttonText || 'Sign In to Your Account'
+                }),
+                customContent?.includeCode !== false && /*#__PURE__*/ _jsxs(Section, {
+                    style: mergedStyles.codeSection,
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            style: {
+                                ...mergedStyles.text,
+                                margin: '0 0 8px 0'
+                            },
+                            children: "Or use this verification code:"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            style: mergedStyles.code,
+                            children: verificationCode
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    style: mergedStyles.warning,
+                    children: customContent?.warning || "If you didn't request this email, you can safely ignore it."
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    style: mergedStyles.expire,
+                    children: customContent?.expireText || 'This link will expire in 7 days for your security.'
+                })
+            ]
+        });
+    };
+}
+
+//# sourceMappingURL=MagicLinkTemplate.js.map

package/dist/src/templates/MagicLinkTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/templates/MagicLinkTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Heading,\n  Text,\n  Button,\n  Section,\n} from '@react-email/components'\nimport { BaseTemplate } from './BaseTemplate'\nimport type { MagicLinkEmailProps } from '../types'\n\nconst magicLinkStyles = {\n  heading: {\n    fontSize: '28px',\n    fontWeight: '700',\n    color: '#1a1a1a',\n    margin: '0 0 16px 0',\n  },\n  text: {\n    fontSize: '16px',\n    lineHeight: '24px',\n    color: '#4a4a4a',\n    margin: '0 0 16px 0',\n  },\n  button: {\n    backgroundColor: '#0066cc',\n    borderRadius: '6px',\n    color: '#ffffff',\n    fontSize: '16px',\n    fontWeight: '600',\n    textDecoration: 'none',\n    textAlign: 'center' as const,\n    display: 'block',\n    width: '100%',\n    padding: '16px 24px',\n    margin: '32px 0',\n  },\n  codeSection: {\n    backgroundColor: '#f6f8fa',\n    borderRadius: '6px',\n    padding: '24px',\n    margin: '24px 0',\n    textAlign: 'center' as const,\n  },\n  code: {\n    fontSize: '24px',\n    fontWeight: '700',\n    color: '#1a1a1a',\n    letterSpacing: '2px',\n    fontFamily: 'monospace',\n  },\n  warning: {\n    fontSize: '14px',\n    color: '#dc3545',\n    margin: '16px 0',\n    padding: '12px',\n    backgroundColor: '#f8d7da',\n    borderRadius: '4px',\n  },\n  expire: {\n    fontSize: '14px',\n    color: '#6c757d',\n    fontStyle: 'italic',\n  },\n}\n\nexport const MagicLinkTemplate: React.FC<MagicLinkEmailProps> = ({\n  magicLinkUrl,\n  subscriber,\n}) => {\n  // Extract a verification code from the URL for fallback\n  const urlParams = new URL(magicLinkUrl).searchParams\n  const token = urlParams.get('token')\n  const verificationCode = token ? token.slice(-6).toUpperCase() : 'XXXXXX'\n\n  return (\n    <BaseTemplate\n      preview=\"Sign in to manage your newsletter preferences\"\n    >\n      <Heading style={magicLinkStyles.heading}>\n        Sign in to your account\n      </Heading>\n      \n      <Text style={magicLinkStyles.text}>\n        Hi{subscriber.name ? ` ${subscriber.name}` : ''},\n      </Text>\n      \n      <Text style={magicLinkStyles.text}>\n        You requested a sign-in link for your newsletter account. Click the button below to access your preferences:\n      </Text>\n      \n      <Button\n        href={magicLinkUrl}\n        style={magicLinkStyles.button}\n      >\n        Sign In to Your Account\n      </Button>\n      \n      <Section style={magicLinkStyles.codeSection}>\n        <Text style={{ ...magicLinkStyles.text, margin: '0 0 8px 0' }}>\n          Or use this verification code:\n        </Text>\n        <Text style={magicLinkStyles.code}>\n          {verificationCode}\n        </Text>\n      </Section>\n      \n      <Text style={magicLinkStyles.warning}>\n        If you didn't request this email, you can safely ignore it.\n      </Text>\n      \n      <Text style={magicLinkStyles.expire}>\n        This link will expire in 7 days for your security.\n      </Text>\n    </BaseTemplate>\n  )\n}\n\n// Export a function that creates a custom magic link template\nexport function createMagicLinkTemplate(\n  customContent?: {\n    heading?: string\n    intro?: string\n    buttonText?: string\n    warning?: string\n    expireText?: string\n    includeCode?: boolean\n  },\n  customStyles?: Partial<typeof magicLinkStyles>\n): React.FC<MagicLinkEmailProps> {\n  const mergedStyles = {\n    ...magicLinkStyles,\n    ...customStyles,\n  }\n  \n  return (props: MagicLinkEmailProps) => {\n    const urlParams = new URL(props.magicLinkUrl).searchParams\n    const token = urlParams.get('token')\n    const verificationCode = token ? token.slice(-6).toUpperCase() : 'XXXXXX'\n    \n    return (\n      <BaseTemplate\n        preview={customContent?.heading || \"Sign in to manage your newsletter preferences\"}\n      >\n        <Heading style={mergedStyles.heading}>\n          {customContent?.heading || 'Sign in to your account'}\n        </Heading>\n        \n        <Text style={mergedStyles.text}>\n          Hi{props.subscriber.name ? ` ${props.subscriber.name}` : ''},\n        </Text>\n        \n        <Text style={mergedStyles.text}>\n          {customContent?.intro || 'You requested a sign-in link for your newsletter account. Click the button below to access your preferences:'}\n        </Text>\n        \n        <Button\n          href={props.magicLinkUrl}\n          style={mergedStyles.button}\n        >\n          {customContent?.buttonText || 'Sign In to Your Account'}\n        </Button>\n        \n        {customContent?.includeCode !== false && (\n          <Section style={mergedStyles.codeSection}>\n            <Text style={{ ...mergedStyles.text, margin: '0 0 8px 0' }}>\n              Or use this verification code:\n            </Text>\n            <Text style={mergedStyles.code}>\n              {verificationCode}\n            </Text>\n          </Section>\n        )}\n        \n        <Text style={mergedStyles.warning}>\n          {customContent?.warning || \"If you didn't request this email, you can safely ignore it.\"}\n        </Text>\n        \n        <Text style={mergedStyles.expire}>\n          {customContent?.expireText || 'This link will expire in 7 days for your security.'}\n        </Text>\n      </BaseTemplate>\n    )\n  }\n}"],"names":["React","Heading","Text","Button","Section","BaseTemplate","magicLinkStyles","heading","fontSize","fontWeight","color","margin","text","lineHeight","button","backgroundColor","borderRadius","textDecoration","textAlign","display","width","padding","codeSection","code","letterSpacing","fontFamily","warning","expire","fontStyle","MagicLinkTemplate","magicLinkUrl","subscriber","urlParams","URL","searchParams","token","get","verificationCode","slice","toUpperCase","preview","style","name","href","createMagicLinkTemplate","customContent","customStyles","mergedStyles","props","intro","buttonText","includeCode","expireText"],"mappings":"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"}

package/dist/src/templates/NewsletterTemplate.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Heading, Button, Markdown } from '@react-email/components';
+import { BaseTemplate } from './BaseTemplate';
+const newsletterStyles = {
+    heading: {
+        fontSize: '32px',
+        fontWeight: '700',
+        color: '#1a1a1a',
+        margin: '0 0 24px 0'
+    },
+    markdown: {
+        h1: {
+            fontSize: '28px',
+            fontWeight: '700',
+            color: '#1a1a1a',
+            margin: '32px 0 16px 0'
+        },
+        h2: {
+            fontSize: '24px',
+            fontWeight: '600',
+            color: '#1a1a1a',
+            margin: '24px 0 12px 0'
+        },
+        h3: {
+            fontSize: '20px',
+            fontWeight: '600',
+            color: '#1a1a1a',
+            margin: '20px 0 8px 0'
+        },
+        p: {
+            fontSize: '16px',
+            lineHeight: '24px',
+            color: '#4a4a4a',
+            margin: '0 0 16px 0'
+        },
+        a: {
+            color: '#0066cc',
+            textDecoration: 'underline'
+        },
+        ul: {
+            paddingLeft: '20px',
+            margin: '0 0 16px 0'
+        },
+        ol: {
+            paddingLeft: '20px',
+            margin: '0 0 16px 0'
+        },
+        li: {
+            fontSize: '16px',
+            lineHeight: '24px',
+            color: '#4a4a4a',
+            marginBottom: '8px'
+        },
+        img: {
+            maxWidth: '100%',
+            height: 'auto',
+            margin: '16px 0'
+        },
+        blockquote: {
+            borderLeft: '4px solid #e6ebf1',
+            paddingLeft: '16px',
+            margin: '0 0 16px 0',
+            fontStyle: 'italic',
+            color: '#6a6a6a'
+        },
+        code: {
+            backgroundColor: '#f6f8fa',
+            padding: '2px 4px',
+            borderRadius: '3px',
+            fontFamily: 'monospace',
+            fontSize: '14px'
+        },
+        pre: {
+            backgroundColor: '#f6f8fa',
+            padding: '16px',
+            borderRadius: '6px',
+            overflow: 'auto',
+            margin: '0 0 16px 0'
+        }
+    },
+    button: {
+        backgroundColor: '#0066cc',
+        borderRadius: '6px',
+        color: '#ffffff',
+        fontSize: '16px',
+        fontWeight: '600',
+        textDecoration: 'none',
+        textAlign: 'center',
+        display: 'block',
+        width: '100%',
+        padding: '12px 20px',
+        margin: '32px 0'
+    }
+};
+export const NewsletterTemplate = ({ subject, preheader, title, content, ctaButton, footer })=>{
+    return /*#__PURE__*/ _jsxs(BaseTemplate, {
+        preview: preheader || subject,
+        footer: footer,
+        children: [
+            title && /*#__PURE__*/ _jsx(Heading, {
+                style: newsletterStyles.heading,
+                children: title
+            }),
+            /*#__PURE__*/ _jsx(Markdown, {
+                markdownCustomStyles: newsletterStyles.markdown,
+                markdownContainerStyles: {
+                    padding: '0'
+                },
+                children: content
+            }),
+            ctaButton && /*#__PURE__*/ _jsx(Button, {
+                href: ctaButton.href,
+                style: newsletterStyles.button,
+                children: ctaButton.text
+            })
+        ]
+    });
+};
+// Export a function that creates a custom newsletter template
+export function createNewsletterTemplate(customStyles) {
+    const mergedStyles = {
+        ...newsletterStyles,
+        ...customStyles
+    };
+    return (props)=>/*#__PURE__*/ _jsxs(BaseTemplate, {
+            preview: props.preheader || props.subject,
+            footer: props.footer,
+            children: [
+                props.title && /*#__PURE__*/ _jsx(Heading, {
+                    style: mergedStyles.heading,
+                    children: props.title
+                }),
+                /*#__PURE__*/ _jsx(Markdown, {
+                    markdownCustomStyles: mergedStyles.markdown,
+                    markdownContainerStyles: {
+                        padding: '0'
+                    },
+                    children: props.content
+                }),
+                props.ctaButton && /*#__PURE__*/ _jsx(Button, {
+                    href: props.ctaButton.href,
+                    style: mergedStyles.button,
+                    children: props.ctaButton.text
+                })
+            ]
+        });
+}
+
+//# sourceMappingURL=NewsletterTemplate.js.map

package/dist/src/templates/NewsletterTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/templates/NewsletterTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Heading,\n  Text,\n  Link,\n  Img,\n  Button,\n  Markdown,\n} from '@react-email/components'\nimport { BaseTemplate, baseStyles } from './BaseTemplate'\n\nexport interface NewsletterTemplateProps {\n  subject: string\n  preheader?: string\n  title?: string\n  content: string // Markdown content\n  ctaButton?: {\n    text: string\n    href: string\n  }\n  footer?: {\n    unsubscribeUrl?: string\n    preferencesUrl?: string\n    address?: string\n    copyright?: string\n  }\n}\n\nconst newsletterStyles = {\n  heading: {\n    fontSize: '32px',\n    fontWeight: '700',\n    color: '#1a1a1a',\n    margin: '0 0 24px 0',\n  },\n  markdown: {\n    h1: {\n      fontSize: '28px',\n      fontWeight: '700',\n      color: '#1a1a1a',\n      margin: '32px 0 16px 0',\n    },\n    h2: {\n      fontSize: '24px',\n      fontWeight: '600',\n      color: '#1a1a1a',\n      margin: '24px 0 12px 0',\n    },\n    h3: {\n      fontSize: '20px',\n      fontWeight: '600',\n      color: '#1a1a1a',\n      margin: '20px 0 8px 0',\n    },\n    p: {\n      fontSize: '16px',\n      lineHeight: '24px',\n      color: '#4a4a4a',\n      margin: '0 0 16px 0',\n    },\n    a: {\n      color: '#0066cc',\n      textDecoration: 'underline',\n    },\n    ul: {\n      paddingLeft: '20px',\n      margin: '0 0 16px 0',\n    },\n    ol: {\n      paddingLeft: '20px',\n      margin: '0 0 16px 0',\n    },\n    li: {\n      fontSize: '16px',\n      lineHeight: '24px',\n      color: '#4a4a4a',\n      marginBottom: '8px',\n    },\n    img: {\n      maxWidth: '100%',\n      height: 'auto',\n      margin: '16px 0',\n    },\n    blockquote: {\n      borderLeft: '4px solid #e6ebf1',\n      paddingLeft: '16px',\n      margin: '0 0 16px 0',\n      fontStyle: 'italic',\n      color: '#6a6a6a',\n    },\n    code: {\n      backgroundColor: '#f6f8fa',\n      padding: '2px 4px',\n      borderRadius: '3px',\n      fontFamily: 'monospace',\n      fontSize: '14px',\n    },\n    pre: {\n      backgroundColor: '#f6f8fa',\n      padding: '16px',\n      borderRadius: '6px',\n      overflow: 'auto',\n      margin: '0 0 16px 0',\n    },\n  },\n  button: {\n    backgroundColor: '#0066cc',\n    borderRadius: '6px',\n    color: '#ffffff',\n    fontSize: '16px',\n    fontWeight: '600',\n    textDecoration: 'none',\n    textAlign: 'center' as const,\n    display: 'block',\n    width: '100%',\n    padding: '12px 20px',\n    margin: '32px 0',\n  },\n}\n\nexport const NewsletterTemplate: React.FC<NewsletterTemplateProps> = ({\n  subject,\n  preheader,\n  title,\n  content,\n  ctaButton,\n  footer,\n}) => {\n  return (\n    <BaseTemplate\n      preview={preheader || subject}\n      footer={footer}\n    >\n      {title && (\n        <Heading style={newsletterStyles.heading}>\n          {title}\n        </Heading>\n      )}\n      \n      <Markdown\n        markdownCustomStyles={newsletterStyles.markdown}\n        markdownContainerStyles={{\n          padding: '0',\n        }}\n      >\n        {content}\n      </Markdown>\n      \n      {ctaButton && (\n        <Button\n          href={ctaButton.href}\n          style={newsletterStyles.button}\n        >\n          {ctaButton.text}\n        </Button>\n      )}\n    </BaseTemplate>\n  )\n}\n\n// Export a function that creates a custom newsletter template\nexport function createNewsletterTemplate(\n  customStyles?: Partial<typeof newsletterStyles>\n): React.FC<NewsletterTemplateProps> {\n  const mergedStyles = {\n    ...newsletterStyles,\n    ...customStyles,\n  }\n  \n  return (props: NewsletterTemplateProps) => (\n    <BaseTemplate\n      preview={props.preheader || props.subject}\n      footer={props.footer}\n    >\n      {props.title && (\n        <Heading style={mergedStyles.heading}>\n          {props.title}\n        </Heading>\n      )}\n      \n      <Markdown\n        markdownCustomStyles={mergedStyles.markdown}\n        markdownContainerStyles={{\n          padding: '0',\n        }}\n      >\n        {props.content}\n      </Markdown>\n      \n      {props.ctaButton && (\n        <Button\n          href={props.ctaButton.href}\n          style={mergedStyles.button}\n        >\n          {props.ctaButton.text}\n        </Button>\n      )}\n    </BaseTemplate>\n  )\n}"],"names":["React","Heading","Button","Markdown","BaseTemplate","newsletterStyles","heading","fontSize","fontWeight","color","margin","markdown","h1","h2","h3","p","lineHeight","a","textDecoration","ul","paddingLeft","ol","li","marginBottom","img","maxWidth","height","blockquote","borderLeft","fontStyle","code","backgroundColor","padding","borderRadius","fontFamily","pre","overflow","button","textAlign","display","width","NewsletterTemplate","subject","preheader","title","content","ctaButton","footer","preview","style","markdownCustomStyles","markdownContainerStyles","href","text","createNewsletterTemplate","customStyles","mergedStyles","props"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AACzB,SACEC,OAAO,EAIPC,MAAM,EACNC,QAAQ,QACH,0BAAyB;AAChC,SAASC,YAAY,QAAoB,iBAAgB;AAmBzD,MAAMC,mBAAmB;IACvBC,SAAS;QACPC,UAAU;QACVC,YAAY;QACZC,OAAO;QACPC,QAAQ;IACV;IACAC,UAAU;QACRC,IAAI;YACFL,UAAU;YACVC,YAAY;YACZC,OAAO;YACPC,QAAQ;QACV;QACAG,IAAI;YACFN,UAAU;YACVC,YAAY;YACZC,OAAO;YACPC,QAAQ;QACV;QACAI,IAAI;YACFP,UAAU;YACVC,YAAY;YACZC,OAAO;YACPC,QAAQ;QACV;QACAK,GAAG;YACDR,UAAU;YACVS,YAAY;YACZP,OAAO;YACPC,QAAQ;QACV;QACAO,GAAG;YACDR,OAAO;YACPS,gBAAgB;QAClB;QACAC,IAAI;YACFC,aAAa;YACbV,QAAQ;QACV;QACAW,IAAI;YACFD,aAAa;YACbV,QAAQ;QACV;QACAY,IAAI;YACFf,UAAU;YACVS,YAAY;YACZP,OAAO;YACPc,cAAc;QAChB;QACAC,KAAK;YACHC,UAAU;YACVC,QAAQ;YACRhB,QAAQ;QACV;QACAiB,YAAY;YACVC,YAAY;YACZR,aAAa;YACbV,QAAQ;YACRmB,WAAW;YACXpB,OAAO;QACT;QACAqB,MAAM;YACJC,iBAAiB;YACjBC,SAAS;YACTC,cAAc;YACdC,YAAY;YACZ3B,UAAU;QACZ;QACA4B,KAAK;YACHJ,iBAAiB;YACjBC,SAAS;YACTC,cAAc;YACdG,UAAU;YACV1B,QAAQ;QACV;IACF;IACA2B,QAAQ;QACNN,iBAAiB;QACjBE,cAAc;QACdxB,OAAO;QACPF,UAAU;QACVC,YAAY;QACZU,gBAAgB;QAChBoB,WAAW;QACXC,SAAS;QACTC,OAAO;QACPR,SAAS;QACTtB,QAAQ;IACV;AACF;AAEA,OAAO,MAAM+B,qBAAwD,CAAC,EACpEC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,MAAM,EACP;IACC,qBACE,MAAC3C;QACC4C,SAASL,aAAaD;QACtBK,QAAQA;;YAEPH,uBACC,KAAC3C;gBAAQgD,OAAO5C,iBAAiBC,OAAO;0BACrCsC;;0BAIL,KAACzC;gBACC+C,sBAAsB7C,iBAAiBM,QAAQ;gBAC/CwC,yBAAyB;oBACvBnB,SAAS;gBACX;0BAECa;;YAGFC,2BACC,KAAC5C;gBACCkD,MAAMN,UAAUM,IAAI;gBACpBH,OAAO5C,iBAAiBgC,MAAM;0BAE7BS,UAAUO,IAAI;;;;AAKzB,EAAC;AAED,8DAA8D;AAC9D,OAAO,SAASC,yBACdC,YAA+C;IAE/C,MAAMC,eAAe;QACnB,GAAGnD,gBAAgB;QACnB,GAAGkD,YAAY;IACjB;IAEA,OAAO,CAACE,sBACN,MAACrD;YACC4C,SAASS,MAAMd,SAAS,IAAIc,MAAMf,OAAO;YACzCK,QAAQU,MAAMV,MAAM;;gBAEnBU,MAAMb,KAAK,kBACV,KAAC3C;oBAAQgD,OAAOO,aAAalD,OAAO;8BACjCmD,MAAMb,KAAK;;8BAIhB,KAACzC;oBACC+C,sBAAsBM,aAAa7C,QAAQ;oBAC3CwC,yBAAyB;wBACvBnB,SAAS;oBACX;8BAECyB,MAAMZ,OAAO;;gBAGfY,MAAMX,SAAS,kBACd,KAAC5C;oBACCkD,MAAMK,MAAMX,SAAS,CAACM,IAAI;oBAC1BH,OAAOO,aAAanB,MAAM;8BAEzBoB,MAAMX,SAAS,CAACO,IAAI;;;;AAK/B"}