payload-plugin-newsletter 0.19.0 → 0.20.1

package/dist/components.d.cts

@@ -1,4 +1,5 @@
 export { MagicLinkVerify, MagicLinkVerifyProps, NewsletterForm, PreferencesForm, UseNewsletterAuthOptions, UseNewsletterAuthReturn, createMagicLinkVerify, createNewsletterForm, createPreferencesForm, useNewsletterAuth } from './client.cjs';
+import { NewsletterPluginConfig } from './types.cjs';
 export { PreferencesFormProps, SignupFormProps, Subscriber } from './types.cjs';
 import React from 'react';
 import { SerializedEditorState } from 'lexical';
@@ -14,6 +15,7 @@ interface EmailPreviewProps {
         warnings: string[];
         errors: string[];
     }) => void;
+    pluginConfig?: NewsletterPluginConfig;
 }
 declare const EmailPreview: React.FC<EmailPreviewProps>;
 

package/dist/components.d.ts

@@ -1,4 +1,5 @@
 export { MagicLinkVerify, MagicLinkVerifyProps, NewsletterForm, PreferencesForm, UseNewsletterAuthOptions, UseNewsletterAuthReturn, createMagicLinkVerify, createNewsletterForm, createPreferencesForm, useNewsletterAuth } from './client.js';
+import { NewsletterPluginConfig } from './types.js';
 export { PreferencesFormProps, SignupFormProps, Subscriber } from './types.js';
 import React from 'react';
 import { SerializedEditorState } from 'lexical';
@@ -14,6 +15,7 @@ interface EmailPreviewProps {
         warnings: string[];
         errors: string[];
     }) => void;
+    pluginConfig?: NewsletterPluginConfig;
 }
 declare const EmailPreview: React.FC<EmailPreviewProps>;
 

package/dist/components.js

@@ -920,6 +920,12 @@ async function convertToEmailSafeHtml(editorState, options) {
   const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl, options?.customBlockConverter);
   const sanitizedHtml = DOMPurify.sanitize(rawHtml, EMAIL_SAFE_CONFIG);
   if (options?.wrapInTemplate) {
+    if (options.customWrapper) {
+      return await Promise.resolve(options.customWrapper(sanitizedHtml, {
+        preheader: options.preheader,
+        subject: options.subject
+      }));
+    }
     return wrapInEmailTemplate(sanitizedHtml, options.preheader);
   }
   return sanitizedHtml;
@@ -1415,8 +1421,16 @@ function validateEmailHtml(html) {
   };
 }
 
+// src/contexts/PluginConfigContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PluginConfigContext = createContext(null);
+var usePluginConfigOptional = () => {
+  return useContext(PluginConfigContext);
+};
+
 // src/components/Broadcasts/EmailPreview.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SAMPLE_DATA = {
   "subscriber.name": "John Doe",
   "subscriber.firstName": "John",
@@ -1432,8 +1446,11 @@ var EmailPreview = ({
   subject,
   preheader,
   mode = "desktop",
-  onValidation
+  onValidation,
+  pluginConfig: propPluginConfig
 }) => {
+  const contextPluginConfig = usePluginConfigOptional();
+  const pluginConfig = propPluginConfig || contextPluginConfig;
   const [html, setHtml] = useState5("");
   const [loading, setLoading] = useState5(false);
   const [validationResult, setValidationResult] = useState5(null);
@@ -1446,9 +1463,13 @@ var EmailPreview = ({
       }
       setLoading(true);
       try {
+        const emailPreviewConfig = pluginConfig?.customizations?.broadcasts?.emailPreview;
         const emailHtml = await convertToEmailSafeHtml(content, {
-          wrapInTemplate: true,
-          preheader
+          wrapInTemplate: emailPreviewConfig?.wrapInTemplate ?? true,
+          preheader,
+          subject,
+          customWrapper: emailPreviewConfig?.customWrapper,
+          customBlockConverter: pluginConfig?.customizations?.broadcasts?.customBlockConverter
         });
         const personalizedHtml = replacePersonalizationTags(emailHtml, SAMPLE_DATA);
         const previewHtml = addEmailHeader(personalizedHtml, {
@@ -1468,7 +1489,7 @@ var EmailPreview = ({
       }
     };
     convertContent();
-  }, [content, subject, preheader, onValidation]);
+  }, [content, subject, preheader, onValidation, pluginConfig]);
   useEffect4(() => {
     if (iframeRef.current && html) {
       const doc = iframeRef.current.contentDocument;
@@ -1488,7 +1509,7 @@ var EmailPreview = ({
           validationResult.errors.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsx4("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#dc2626" }, children: validationResult.errors.map((error, index) => /* @__PURE__ */ jsx4("li", { children: error }, index)) })
+        /* @__PURE__ */ jsx5("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#dc2626" }, children: validationResult.errors.map((error, index) => /* @__PURE__ */ jsx5("li", { children: error }, index)) })
       ] }),
       validationResult.warnings.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
         /* @__PURE__ */ jsxs4("h4", { style: { color: "#d97706", margin: "0 0 8px 0", fontSize: "14px" }, children: [
@@ -1496,10 +1517,10 @@ var EmailPreview = ({
           validationResult.warnings.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsx4("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#d97706" }, children: validationResult.warnings.map((warning, index) => /* @__PURE__ */ jsx4("li", { children: warning }, index)) })
+        /* @__PURE__ */ jsx5("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#d97706" }, children: validationResult.warnings.map((warning, index) => /* @__PURE__ */ jsx5("li", { children: warning }, index)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { style: {
+    /* @__PURE__ */ jsx5("div", { style: {
       flex: 1,
       display: "flex",
       alignItems: "center",
@@ -1507,14 +1528,14 @@ var EmailPreview = ({
       backgroundColor: "#f3f4f6",
       padding: "20px",
       overflow: "auto"
-    }, children: loading ? /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ jsx4("p", { children: "Loading preview..." }) }) : html ? /* @__PURE__ */ jsx4("div", { style: {
+    }, children: loading ? /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ jsx5("p", { children: "Loading preview..." }) }) : html ? /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: "white",
       boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
       borderRadius: "8px",
       overflow: "hidden",
       transform: `scale(${viewport.scale})`,
       transformOrigin: "top center"
-    }, children: /* @__PURE__ */ jsx4(
+    }, children: /* @__PURE__ */ jsx5(
       "iframe",
       {
         ref: iframeRef,
@@ -1527,7 +1548,7 @@ var EmailPreview = ({
         },
         sandbox: "allow-same-origin"
       }
-    ) }) : /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ jsx4("p", { children: "Start typing to see the email preview" }) }) }),
+    ) }) : /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ jsx5("p", { children: "Start typing to see the email preview" }) }) }),
     validationResult && /* @__PURE__ */ jsxs4("div", { style: {
       padding: "12px 16px",
       borderTop: "1px solid #e5e7eb",
@@ -1575,11 +1596,12 @@ function escapeHtml2(text) {
 // src/components/Broadcasts/EmailPreviewField.tsx
 import { useState as useState6 } from "react";
 import { useFormFields } from "@payloadcms/ui";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var EmailPreviewField = () => {
   const [previewMode, setPreviewMode] = useState6("desktop");
   const [isValid, setIsValid] = useState6(true);
   const [validationSummary, setValidationSummary] = useState6("");
+  const pluginConfig = usePluginConfigOptional();
   const fields = useFormFields(([fields2]) => ({
     content: fields2["contentSection.content"],
     subject: fields2["subject"],
@@ -1636,9 +1658,9 @@ var EmailPreviewField = () => {
       backgroundColor: "#f9fafb"
     }, children: [
       /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
-        /* @__PURE__ */ jsx5("h3", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Email Preview" }),
+        /* @__PURE__ */ jsx6("h3", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Email Preview" }),
         /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1655,7 +1677,7 @@ var EmailPreviewField = () => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1673,7 +1695,7 @@ var EmailPreviewField = () => {
             }
           )
         ] }),
-        validationSummary && /* @__PURE__ */ jsx5("div", { style: {
+        validationSummary && /* @__PURE__ */ jsx6("div", { style: {
           padding: "6px 12px",
           backgroundColor: isValid ? "#fef3c7" : "#fee2e2",
           color: isValid ? "#92400e" : "#991b1b",
@@ -1681,7 +1703,7 @@ var EmailPreviewField = () => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1699,14 +1721,15 @@ var EmailPreviewField = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx5("div", { style: { height: "600px" }, children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("div", { style: { height: "600px" }, children: /* @__PURE__ */ jsx6(
       EmailPreview,
       {
         content: fields.content?.value || null,
         subject: fields.subject?.value || "Email Subject",
         preheader: fields.preheader?.value,
         mode: previewMode,
-        onValidation: handleValidation
+        onValidation: handleValidation,
+        pluginConfig: pluginConfig || void 0
       }
     ) })
   ] });
@@ -1715,7 +1738,7 @@ var EmailPreviewField = () => {
 // src/components/Broadcasts/BroadcastEditor.tsx
 import { useState as useState7, useCallback as useCallback2 } from "react";
 import { useField, useFormFields as useFormFields2 } from "@payloadcms/ui";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var BroadcastEditor = (props) => {
   const { value } = useField({ path: props.path });
   const [showPreview, setShowPreview] = useState7(true);
@@ -1771,7 +1794,7 @@ var BroadcastEditor = (props) => {
       backgroundColor: "#f9fafb"
     }, children: [
       /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1789,7 +1812,7 @@ var BroadcastEditor = (props) => {
           }
         ),
         showPreview && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1806,7 +1829,7 @@ var BroadcastEditor = (props) => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1824,7 +1847,7 @@ var BroadcastEditor = (props) => {
             }
           )
         ] }),
-        showPreview && validationSummary && /* @__PURE__ */ jsx6("div", { style: {
+        showPreview && validationSummary && /* @__PURE__ */ jsx7("div", { style: {
           padding: "6px 12px",
           backgroundColor: isValid ? "#fef3c7" : "#fee2e2",
           color: isValid ? "#92400e" : "#991b1b",
@@ -1832,7 +1855,7 @@ var BroadcastEditor = (props) => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      showPreview && /* @__PURE__ */ jsx6(
+      showPreview && /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1851,12 +1874,12 @@ var BroadcastEditor = (props) => {
       )
     ] }),
     /* @__PURE__ */ jsxs6("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-      /* @__PURE__ */ jsx6("div", { style: {
+      /* @__PURE__ */ jsx7("div", { style: {
         flex: showPreview ? "0 0 50%" : "1",
         overflow: "auto",
         borderRight: showPreview ? "1px solid #e5e7eb" : "none"
-      }, children: /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: /* @__PURE__ */ jsx6("div", { className: "rich-text-lexical" }) }) }),
-      showPreview && /* @__PURE__ */ jsx6("div", { style: { flex: "0 0 50%", overflow: "hidden" }, children: /* @__PURE__ */ jsx6(
+      }, children: /* @__PURE__ */ jsx7("div", { style: { padding: "16px" }, children: /* @__PURE__ */ jsx7("div", { className: "rich-text-lexical" }) }) }),
+      showPreview && /* @__PURE__ */ jsx7("div", { style: { flex: "0 0 50%", overflow: "hidden" }, children: /* @__PURE__ */ jsx7(
         EmailPreview,
         {
           content: value,
@@ -1875,7 +1898,7 @@ import { useState as useState8, useCallback as useCallback3 } from "react";
 import { useFormFields as useFormFields3 } from "@payloadcms/ui";
 
 // src/components/Broadcasts/PreviewControls.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var PreviewControls = ({
   onUpdate,
   device,
@@ -1918,7 +1941,7 @@ var PreviewControls = ({
     fontSize: "14px"
   });
   return /* @__PURE__ */ jsxs7("div", { style: controlsStyle, children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         style: updateButtonStyle,
@@ -1936,9 +1959,9 @@ var PreviewControls = ({
           "aria-label": "Desktop view",
           children: [
             /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx7("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-              /* @__PURE__ */ jsx7("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-              /* @__PURE__ */ jsx7("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+              /* @__PURE__ */ jsx8("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx8("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ jsx8("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
             ] }),
             "Desktop"
           ]
@@ -1952,8 +1975,8 @@ var PreviewControls = ({
           "aria-label": "Mobile view",
           children: [
             /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx7("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
-              /* @__PURE__ */ jsx7("line", { x1: "12", y1: "18", x2: "12", y2: "18" })
+              /* @__PURE__ */ jsx8("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx8("line", { x1: "12", y1: "18", x2: "12", y2: "18" })
             ] }),
             "Mobile"
           ]
@@ -1964,7 +1987,7 @@ var PreviewControls = ({
 };
 
 // src/components/Broadcasts/BroadcastInlinePreview.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var BroadcastInlinePreview = () => {
   const [device, setDevice] = useState8("desktop");
   const [isLoading, setIsLoading] = useState8(false);
@@ -2053,8 +2076,8 @@ var BroadcastInlinePreview = () => {
   };
   return /* @__PURE__ */ jsxs8("div", { style: containerStyle, children: [
     /* @__PURE__ */ jsxs8("div", { style: headerStyle, children: [
-      /* @__PURE__ */ jsx8("h3", { style: titleStyle, children: "Email Preview" }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("h3", { style: titleStyle, children: "Email Preview" }),
+      /* @__PURE__ */ jsx9(
         "button",
         {
           onClick: () => showPreview ? setShowPreview(false) : updatePreview(),
@@ -2064,9 +2087,9 @@ var BroadcastInlinePreview = () => {
         }
       )
     ] }),
-    showPreview && /* @__PURE__ */ jsx8("div", { style: previewContainerStyle, children: error ? /* @__PURE__ */ jsxs8("div", { style: errorStyle, children: [
-      /* @__PURE__ */ jsx8("p", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: error.message }),
-      /* @__PURE__ */ jsx8(
+    showPreview && /* @__PURE__ */ jsx9("div", { style: previewContainerStyle, children: error ? /* @__PURE__ */ jsxs8("div", { style: errorStyle, children: [
+      /* @__PURE__ */ jsx9("p", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: error.message }),
+      /* @__PURE__ */ jsx9(
         "button",
         {
           onClick: updatePreview,
@@ -2082,7 +2105,7 @@ var BroadcastInlinePreview = () => {
         }
       )
     ] }) : previewHtml ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         PreviewControls,
         {
           onUpdate: updatePreview,
@@ -2091,7 +2114,7 @@ var BroadcastInlinePreview = () => {
           isLoading
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -2101,7 +2124,7 @@ var BroadcastInlinePreview = () => {
             justifyContent: "center",
             overflow: "auto"
           },
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -2112,7 +2135,7 @@ var BroadcastInlinePreview = () => {
                 borderRadius: "8px",
                 overflow: "hidden"
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx9(
                 "iframe",
                 {
                   srcDoc: previewHtml,
@@ -2134,9 +2157,9 @@ var BroadcastInlinePreview = () => {
 };
 
 // src/components/Broadcasts/BroadcastPreviewField.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var BroadcastPreviewField = () => {
-  return /* @__PURE__ */ jsx9("div", { style: {
+  return /* @__PURE__ */ jsx10("div", { style: {
     padding: "1rem",
     background: "#f9fafb",
     borderRadius: "4px",
@@ -2148,7 +2171,7 @@ var BroadcastPreviewField = () => {
 // src/components/Broadcasts/EmailRenderer.tsx
 import { useEffect as useEffect5, useState as useState9, useCallback as useCallback4, useRef as useRef2 } from "react";
 import { render } from "@react-email/render";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var EmailRenderer = ({
   template,
   data,
@@ -2161,7 +2184,7 @@ var EmailRenderer = ({
   const renderEmail = useCallback4(async () => {
     try {
       const TemplateComponent = template;
-      const element = /* @__PURE__ */ jsx10(TemplateComponent, { ...data });
+      const element = /* @__PURE__ */ jsx11(TemplateComponent, { ...data });
       const html = await render(element, {
         pretty: true
       });
@@ -2216,8 +2239,8 @@ var EmailRenderer = ({
   };
   if (error) {
     return /* @__PURE__ */ jsxs9("div", { style: errorStyle, children: [
-      /* @__PURE__ */ jsx10("h3", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: "Template Render Error" }),
-      /* @__PURE__ */ jsx10("pre", { style: {
+      /* @__PURE__ */ jsx11("h3", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: "Template Render Error" }),
+      /* @__PURE__ */ jsx11("pre", { style: {
         background: "#f9fafb",
         padding: "1rem",
         borderRadius: "4px",
@@ -2228,7 +2251,7 @@ var EmailRenderer = ({
       }, children: error.message })
     ] });
   }
-  return /* @__PURE__ */ jsx10("div", { style: containerStyle, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { style: containerStyle, children: /* @__PURE__ */ jsx11(
     "iframe",
     {
       ref: iframeRef,
@@ -2240,7 +2263,7 @@ var EmailRenderer = ({
 };
 
 // src/components/Broadcasts/StatusBadge.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var statusConfig = {
   ["draft" /* DRAFT */]: {
     label: "Draft",
@@ -2288,7 +2311,7 @@ var statusConfig = {
 var StatusBadge = ({ cellData }) => {
   const status = cellData;
   const config = statusConfig[status] || statusConfig["draft" /* DRAFT */];
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "span",
     {
       style: {
@@ -2323,21 +2346,21 @@ import {
   Section,
   Text
 } from "@react-email/components";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var DefaultBroadcastTemplate = ({
   subject,
   preheader,
   content
 }) => {
   return /* @__PURE__ */ jsxs10(Html, { children: [
-    /* @__PURE__ */ jsx12(Head, {}),
-    /* @__PURE__ */ jsx12(Preview, { children: preheader || subject }),
-    /* @__PURE__ */ jsx12(Body, { style: main, children: /* @__PURE__ */ jsxs10(Container, { style: container, children: [
-      /* @__PURE__ */ jsx12(Section, { style: contentSection, children: /* @__PURE__ */ jsx12("div", { dangerouslySetInnerHTML: { __html: content } }) }),
-      /* @__PURE__ */ jsx12(Hr, { style: divider }),
+    /* @__PURE__ */ jsx13(Head, {}),
+    /* @__PURE__ */ jsx13(Preview, { children: preheader || subject }),
+    /* @__PURE__ */ jsx13(Body, { style: main, children: /* @__PURE__ */ jsxs10(Container, { style: container, children: [
+      /* @__PURE__ */ jsx13(Section, { style: contentSection, children: /* @__PURE__ */ jsx13("div", { dangerouslySetInnerHTML: { __html: content } }) }),
+      /* @__PURE__ */ jsx13(Hr, { style: divider }),
       /* @__PURE__ */ jsxs10(Section, { style: footer, children: [
-        /* @__PURE__ */ jsx12(Text, { style: footerText, children: "You're receiving this email because you subscribed to our newsletter." }),
-        /* @__PURE__ */ jsx12(Text, { style: footerText, children: /* @__PURE__ */ jsx12(Link, { href: "{{unsubscribe_url}}", style: footerLink, children: "Unsubscribe" }) })
+        /* @__PURE__ */ jsx13(Text, { style: footerText, children: "You're receiving this email because you subscribed to our newsletter." }),
+        /* @__PURE__ */ jsx13(Text, { style: footerText, children: /* @__PURE__ */ jsx13(Link, { href: "{{unsubscribe_url}}", style: footerLink, children: "Unsubscribe" }) })
       ] })
     ] }) })
   ] });