payload-plugin-newsletter 0.18.0 → 0.20.0

package/dist/components.cjs

@@ -900,7 +900,7 @@ function useNewsletterAuth(_options = {}) {
 }
 
 // src/components/Broadcasts/EmailPreview.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/utils/emailSafeHtml.ts
 var import_isomorphic_dompurify = __toESM(require("isomorphic-dompurify"), 1);
@@ -971,6 +971,12 @@ async function convertToEmailSafeHtml(editorState, options) {
   const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl, options?.customBlockConverter);
   const sanitizedHtml = import_isomorphic_dompurify.default.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;
@@ -1024,9 +1030,9 @@ async function convertParagraph(node, mediaUrl, customBlockConverter) {
   );
   const children = childParts.join("");
   if (!children.trim()) {
-    return '<p style="margin: 0 0 16px 0; min-height: 1em;">&nbsp;</p>';
+    return '<p class="mobile-margin-bottom-16" style="margin: 0 0 16px 0; min-height: 1em;">&nbsp;</p>';
   }
-  return `<p style="margin: 0 0 16px 0; text-align: ${align};">${children}</p>`;
+  return `<p class="mobile-margin-bottom-16" style="margin: 0 0 16px 0; text-align: ${align}; font-size: 16px; line-height: 1.5;">${children}</p>`;
 }
 async function convertHeading(node, mediaUrl, customBlockConverter) {
   const tag = node.tag || "h1";
@@ -1040,8 +1046,14 @@ async function convertHeading(node, mediaUrl, customBlockConverter) {
     h2: "font-size: 24px; font-weight: 600; margin: 0 0 16px 0; line-height: 1.3;",
     h3: "font-size: 20px; font-weight: 600; margin: 0 0 12px 0; line-height: 1.4;"
   };
+  const mobileClasses = {
+    h1: "mobile-font-size-24",
+    h2: "mobile-font-size-20",
+    h3: "mobile-font-size-16"
+  };
   const style = `${styles[tag] || styles.h3} text-align: ${align};`;
-  return `<${tag} style="${style}">${children}</${tag}>`;
+  const mobileClass = mobileClasses[tag] || mobileClasses.h3;
+  return `<${tag} class="${mobileClass}" style="${style}">${children}</${tag}>`;
 }
 async function convertList(node, mediaUrl, customBlockConverter) {
   const tag = node.listType === "number" ? "ol" : "ul";
@@ -1049,8 +1061,8 @@ async function convertList(node, mediaUrl, customBlockConverter) {
     (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
   );
   const children = childParts.join("");
-  const style = tag === "ul" ? "margin: 0 0 16px 0; padding-left: 24px; list-style-type: disc;" : "margin: 0 0 16px 0; padding-left: 24px; list-style-type: decimal;";
-  return `<${tag} style="${style}">${children}</${tag}>`;
+  const style = tag === "ul" ? "margin: 0 0 16px 0; padding-left: 24px; list-style-type: disc; font-size: 16px; line-height: 1.5;" : "margin: 0 0 16px 0; padding-left: 24px; list-style-type: decimal; font-size: 16px; line-height: 1.5;";
+  return `<${tag} class="mobile-margin-bottom-16" style="${style}">${children}</${tag}>`;
 }
 async function convertListItem(node, mediaUrl, customBlockConverter) {
   const childParts = await Promise.all(
@@ -1107,16 +1119,16 @@ function convertUpload(node, mediaUrl) {
   }
   const alt = node.fields?.altText || upload.alt || "";
   const caption = node.fields?.caption || "";
-  const imgHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" />`;
+  const imgHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="mobile-width-100" style="max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 6px;" />`;
   if (caption) {
     return `
-      <div style="margin: 0 0 16px 0; text-align: center;">
+      <div style="margin: 0 0 16px 0; text-align: center;" class="mobile-margin-bottom-16">
         ${imgHtml}
-        <p style="margin: 8px 0 0 0; font-size: 14px; color: #6b7280; font-style: italic;">${escapeHtml(caption)}</p>
+        <p style="margin: 8px 0 0 0; font-size: 14px; color: #6b7280; font-style: italic; text-align: center;" class="mobile-font-size-14">${escapeHtml(caption)}</p>
       </div>
     `;
   }
-  return `<div style="margin: 0 0 16px 0; text-align: center;">${imgHtml}</div>`;
+  return `<div style="margin: 0 0 16px 0; text-align: center;" class="mobile-margin-bottom-16">${imgHtml}</div>`;
 }
 async function convertBlock(node, mediaUrl, customBlockConverter) {
   const blockType = node.fields?.blockName || node.blockName;
@@ -1189,11 +1201,14 @@ function escapeHtml(text) {
 }
 function wrapInEmailTemplate(content, preheader) {
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Email</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <title>Newsletter</title>
+  
   <!--[if mso]>
   <noscript>
     <xml>
@@ -1203,16 +1218,155 @@ function wrapInEmailTemplate(content, preheader) {
     </xml>
   </noscript>
   <![endif]-->
+  
+  <style>
+    /* Reset and base styles */
+    * {
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+    
+    body {
+      margin: 0 !important;
+      padding: 0 !important;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+      font-size: 16px;
+      line-height: 1.5;
+      color: #1A1A1A;
+      background-color: #f8f9fa;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    
+    table {
+      border-spacing: 0 !important;
+      border-collapse: collapse !important;
+      table-layout: fixed !important;
+      margin: 0 auto !important;
+    }
+    
+    table table table {
+      table-layout: auto;
+    }
+    
+    img {
+      -ms-interpolation-mode: bicubic;
+      max-width: 100%;
+      height: auto;
+      border: 0;
+      outline: none;
+      text-decoration: none;
+    }
+    
+    /* Responsive styles */
+    @media only screen and (max-width: 640px) {
+      .mobile-hide {
+        display: none !important;
+      }
+      
+      .mobile-center {
+        text-align: center !important;
+      }
+      
+      .mobile-width-100 {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+      
+      .mobile-padding {
+        padding: 20px !important;
+      }
+      
+      .mobile-padding-sm {
+        padding: 16px !important;
+      }
+      
+      .mobile-font-size-14 {
+        font-size: 14px !important;
+      }
+      
+      .mobile-font-size-16 {
+        font-size: 16px !important;
+      }
+      
+      .mobile-font-size-20 {
+        font-size: 20px !important;
+        line-height: 1.3 !important;
+      }
+      
+      .mobile-font-size-24 {
+        font-size: 24px !important;
+        line-height: 1.2 !important;
+      }
+      
+      /* Stack sections on mobile */
+      .mobile-stack {
+        display: block !important;
+        width: 100% !important;
+      }
+      
+      /* Mobile-specific spacing */
+      .mobile-margin-bottom-16 {
+        margin-bottom: 16px !important;
+      }
+      
+      .mobile-margin-bottom-20 {
+        margin-bottom: 20px !important;
+      }
+    }
+    
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      .dark-mode-bg {
+        background-color: #1a1a1a !important;
+      }
+      
+      .dark-mode-text {
+        color: #ffffff !important;
+      }
+      
+      .dark-mode-border {
+        border-color: #333333 !important;
+      }
+    }
+    
+    /* Outlook-specific fixes */
+    <!--[if mso]>
+    <style>
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        border: none;
+        margin: 0;
+      }
+      
+      div, p {
+        margin: 0;
+      }
+    </style>
+    <![endif]-->
+  </style>
 </head>
-<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333333; background-color: #f3f4f6;">
-  ${preheader ? `<div style="display: none; max-height: 0; overflow: hidden;">${escapeHtml(preheader)}</div>` : ""}
-  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0;">
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #1A1A1A; background-color: #f8f9fa;">
+  ${preheader ? `
+  <!-- Preheader text -->
+  <div style="display: none; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: transparent;">
+    ${escapeHtml(preheader)}
+  </div>
+  ` : ""}
+  
+  <!-- Main container -->
+  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0; background-color: #f8f9fa;">
     <tr>
-      <td align="center" style="padding: 20px 0;">
-        <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden;">
+      <td align="center" style="padding: 20px 10px;">
+        <!-- Email wrapper -->
+        <table role="presentation" cellpadding="0" cellspacing="0" width="600" class="mobile-width-100" style="margin: 0 auto; max-width: 600px;">
           <tr>
-            <td style="padding: 40px 30px;">
-              ${content}
+            <td class="mobile-padding" style="padding: 0;">
+              <!-- Content area with light background -->
+              <div style="background-color: #ffffff; padding: 40px 30px; border-radius: 8px;" class="mobile-padding">
+                ${content}
+              </div>
             </td>
           </tr>
         </table>
@@ -1318,8 +1472,16 @@ function validateEmailHtml(html) {
   };
 }
 
-// src/components/Broadcasts/EmailPreview.tsx
+// src/contexts/PluginConfigContext.tsx
+var import_react5 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var PluginConfigContext = (0, import_react5.createContext)(null);
+var usePluginConfigOptional = () => {
+  return (0, import_react5.useContext)(PluginConfigContext);
+};
+
+// src/components/Broadcasts/EmailPreview.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var SAMPLE_DATA = {
   "subscriber.name": "John Doe",
   "subscriber.firstName": "John",
@@ -1335,13 +1497,16 @@ var EmailPreview = ({
   subject,
   preheader,
   mode = "desktop",
-  onValidation
+  onValidation,
+  pluginConfig: propPluginConfig
 }) => {
-  const [html, setHtml] = (0, import_react5.useState)("");
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [validationResult, setValidationResult] = (0, import_react5.useState)(null);
-  const iframeRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const contextPluginConfig = usePluginConfigOptional();
+  const pluginConfig = propPluginConfig || contextPluginConfig;
+  const [html, setHtml] = (0, import_react6.useState)("");
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [validationResult, setValidationResult] = (0, import_react6.useState)(null);
+  const iframeRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     const convertContent = async () => {
       if (!content) {
         setHtml("");
@@ -1349,9 +1514,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, {
@@ -1371,8 +1540,8 @@ var EmailPreview = ({
       }
     };
     convertContent();
-  }, [content, subject, preheader, onValidation]);
-  (0, import_react5.useEffect)(() => {
+  }, [content, subject, preheader, onValidation, pluginConfig]);
+  (0, import_react6.useEffect)(() => {
     if (iframeRef.current && html) {
       const doc = iframeRef.current.contentDocument;
       if (doc) {
@@ -1383,26 +1552,26 @@ var EmailPreview = ({
     }
   }, [html]);
   const viewport = VIEWPORT_SIZES[mode];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    validationResult && (validationResult.errors.length > 0 || validationResult.warnings.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "16px", borderBottom: "1px solid #e5e7eb" }, children: [
-      validationResult.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h4", { style: { color: "#dc2626", margin: "0 0 8px 0", fontSize: "14px" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    validationResult && (validationResult.errors.length > 0 || validationResult.warnings.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "16px", borderBottom: "1px solid #e5e7eb" }, children: [
+      validationResult.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { style: { color: "#dc2626", margin: "0 0 8px 0", fontSize: "14px" }, children: [
           "Errors (",
           validationResult.errors.length,
           ")"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#dc2626" }, children: validationResult.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: error }, index)) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#dc2626" }, children: validationResult.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: error }, index)) })
       ] }),
-      validationResult.warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h4", { style: { color: "#d97706", margin: "0 0 8px 0", fontSize: "14px" }, children: [
+      validationResult.warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { style: { color: "#d97706", margin: "0 0 8px 0", fontSize: "14px" }, children: [
           "Warnings (",
           validationResult.warnings.length,
           ")"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#d97706" }, children: validationResult.warnings.map((warning, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: warning }, index)) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: { margin: 0, paddingLeft: "20px", fontSize: "13px", color: "#d97706" }, children: validationResult.warnings.map((warning, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: warning }, index)) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
       flex: 1,
       display: "flex",
       alignItems: "center",
@@ -1410,14 +1579,14 @@ var EmailPreview = ({
       backgroundColor: "#f3f4f6",
       padding: "20px",
       overflow: "auto"
-    }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Loading preview..." }) }) : html ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Loading preview..." }) }) : html ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "iframe",
       {
         ref: iframeRef,
@@ -1430,8 +1599,8 @@ var EmailPreview = ({
         },
         sandbox: "allow-same-origin"
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Start typing to see the email preview" }) }) }),
-    validationResult && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Start typing to see the email preview" }) }) }),
+    validationResult && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       padding: "12px 16px",
       borderTop: "1px solid #e5e7eb",
       fontSize: "13px",
@@ -1439,20 +1608,20 @@ var EmailPreview = ({
       display: "flex",
       gap: "24px"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
         "Size: ",
         Math.round(validationResult.stats.sizeInBytes / 1024),
         "KB"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
         "Links: ",
         validationResult.stats.linkCount
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
         "Images: ",
         validationResult.stats.imageCount
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
         "Viewport: ",
         mode === "desktop" ? "600px" : "320px"
       ] })
@@ -1476,13 +1645,14 @@ function escapeHtml2(text) {
 }
 
 // src/components/Broadcasts/EmailPreviewField.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_ui = require("@payloadcms/ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var EmailPreviewField = () => {
-  const [previewMode, setPreviewMode] = (0, import_react6.useState)("desktop");
-  const [isValid, setIsValid] = (0, import_react6.useState)(true);
-  const [validationSummary, setValidationSummary] = (0, import_react6.useState)("");
+  const [previewMode, setPreviewMode] = (0, import_react7.useState)("desktop");
+  const [isValid, setIsValid] = (0, import_react7.useState)(true);
+  const [validationSummary, setValidationSummary] = (0, import_react7.useState)("");
+  const pluginConfig = usePluginConfigOptional();
   const fields = (0, import_ui.useFormFields)(([fields2]) => ({
     content: fields2["contentSection.content"],
     subject: fields2["subject"],
@@ -1524,13 +1694,13 @@ var EmailPreviewField = () => {
       alert(error instanceof Error ? error.message : "Failed to send test email");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
     marginTop: "24px",
     border: "1px solid #e5e7eb",
     borderRadius: "8px",
     overflow: "hidden"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -1538,10 +1708,10 @@ var EmailPreviewField = () => {
       borderBottom: "1px solid #e5e7eb",
       backgroundColor: "#f9fafb"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Email Preview" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Email Preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -1558,7 +1728,7 @@ var EmailPreviewField = () => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -1576,7 +1746,7 @@ var EmailPreviewField = () => {
             }
           )
         ] }),
-        validationSummary && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+        validationSummary && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
           padding: "6px 12px",
           backgroundColor: isValid ? "#fef3c7" : "#fee2e2",
           color: isValid ? "#92400e" : "#991b1b",
@@ -1584,7 +1754,7 @@ var EmailPreviewField = () => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -1602,34 +1772,35 @@ var EmailPreviewField = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: "600px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: "600px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       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
       }
     ) })
   ] });
 };
 
 // src/components/Broadcasts/BroadcastEditor.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_ui2 = require("@payloadcms/ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var BroadcastEditor = (props) => {
   const { value } = (0, import_ui2.useField)({ path: props.path });
-  const [showPreview, setShowPreview] = (0, import_react7.useState)(true);
-  const [previewMode, setPreviewMode] = (0, import_react7.useState)("desktop");
-  const [isValid, setIsValid] = (0, import_react7.useState)(true);
-  const [validationSummary, setValidationSummary] = (0, import_react7.useState)("");
+  const [showPreview, setShowPreview] = (0, import_react8.useState)(true);
+  const [previewMode, setPreviewMode] = (0, import_react8.useState)("desktop");
+  const [isValid, setIsValid] = (0, import_react8.useState)(true);
+  const [validationSummary, setValidationSummary] = (0, import_react8.useState)("");
   const fields = (0, import_ui2.useFormFields)(([fields2]) => ({
     subject: fields2["subject"],
     preheader: fields2["contentSection.preheader"]
   }));
-  const handleValidation = (0, import_react7.useCallback)((result) => {
+  const handleValidation = (0, import_react8.useCallback)((result) => {
     setIsValid(result.valid);
     const errorCount = result.errors.length;
     const warningCount = result.warnings.length;
@@ -1664,8 +1835,8 @@ var BroadcastEditor = (props) => {
       alert(error instanceof Error ? error.message : "Failed to send test email");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { height: "600px", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { height: "600px", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -1673,8 +1844,8 @@ var BroadcastEditor = (props) => {
       borderBottom: "1px solid #e5e7eb",
       backgroundColor: "#f9fafb"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
@@ -1691,8 +1862,8 @@ var BroadcastEditor = (props) => {
             children: showPreview ? "Hide Preview" : "Show Preview"
           }
         ),
-        showPreview && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showPreview && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -1709,7 +1880,7 @@ var BroadcastEditor = (props) => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -1727,7 +1898,7 @@ var BroadcastEditor = (props) => {
             }
           )
         ] }),
-        showPreview && validationSummary && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+        showPreview && validationSummary && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
           padding: "6px 12px",
           backgroundColor: isValid ? "#fef3c7" : "#fee2e2",
           color: isValid ? "#92400e" : "#991b1b",
@@ -1735,7 +1906,7 @@ var BroadcastEditor = (props) => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      showPreview && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      showPreview && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -1753,13 +1924,13 @@ var BroadcastEditor = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
         flex: showPreview ? "0 0 50%" : "1",
         overflow: "auto",
         borderRight: showPreview ? "1px solid #e5e7eb" : "none"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rich-text-lexical" }) }) }),
-      showPreview && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: "0 0 50%", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rich-text-lexical" }) }) }),
+      showPreview && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: "0 0 50%", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         EmailPreview,
         {
           content: value,
@@ -1774,11 +1945,11 @@ var BroadcastEditor = (props) => {
 };
 
 // src/components/Broadcasts/BroadcastInlinePreview.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_ui3 = require("@payloadcms/ui");
 
 // src/components/Broadcasts/PreviewControls.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var PreviewControls = ({
   onUpdate,
   device,
@@ -1820,8 +1991,8 @@ var PreviewControls = ({
     cursor: "pointer",
     fontSize: "14px"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: controlsStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: controlsStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         style: updateButtonStyle,
@@ -1830,33 +2001,33 @@ var PreviewControls = ({
         children: isLoading ? "Updating..." : "Update Preview"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: deviceSelectorStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: deviceSelectorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
           style: deviceButtonStyle(device === "desktop"),
           onClick: () => onDeviceChange("desktop"),
           "aria-label": "Desktop view",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
             ] }),
             "Desktop"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
           style: deviceButtonStyle(device === "mobile"),
           onClick: () => onDeviceChange("mobile"),
           "aria-label": "Mobile view",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "18", x2: "12", y2: "18" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "12", y1: "18", x2: "12", y2: "18" })
             ] }),
             "Mobile"
           ]
@@ -1867,19 +2038,19 @@ var PreviewControls = ({
 };
 
 // src/components/Broadcasts/BroadcastInlinePreview.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var BroadcastInlinePreview = () => {
-  const [device, setDevice] = (0, import_react8.useState)("desktop");
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
-  const [showPreview, setShowPreview] = (0, import_react8.useState)(false);
-  const [previewHtml, setPreviewHtml] = (0, import_react8.useState)(null);
-  const [error, setError] = (0, import_react8.useState)(null);
+  const [device, setDevice] = (0, import_react9.useState)("desktop");
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [showPreview, setShowPreview] = (0, import_react9.useState)(false);
+  const [previewHtml, setPreviewHtml] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)(null);
   const fields = (0, import_ui3.useFormFields)(([fields2]) => ({
     subject: fields2["subject"]?.value,
     preheader: fields2["contentSection.preheader"]?.value,
     content: fields2["contentSection.content"]?.value
   }));
-  const updatePreview = (0, import_react8.useCallback)(async () => {
+  const updatePreview = (0, import_react9.useCallback)(async () => {
     if (!fields.content) {
       setError(new Error("Please add some content before previewing"));
       return;
@@ -1954,10 +2125,10 @@ var BroadcastInlinePreview = () => {
     fontSize: "14px",
     fontWeight: 500
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: headerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: titleStyle, children: "Email Preview" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: headerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { style: titleStyle, children: "Email Preview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           onClick: () => showPreview ? setShowPreview(false) : updatePreview(),
@@ -1967,9 +2138,9 @@ var BroadcastInlinePreview = () => {
         }
       )
     ] }),
-    showPreview && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: previewContainerStyle, children: error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: errorStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    showPreview && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: previewContainerStyle, children: error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: errorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           onClick: updatePreview,
@@ -1984,8 +2155,8 @@ var BroadcastInlinePreview = () => {
           children: "Retry"
         }
       )
-    ] }) : previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ] }) : previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         PreviewControls,
         {
           onUpdate: updatePreview,
@@ -1994,7 +2165,7 @@ var BroadcastInlinePreview = () => {
           isLoading
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           style: {
@@ -2004,7 +2175,7 @@ var BroadcastInlinePreview = () => {
             justifyContent: "center",
             overflow: "auto"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               style: {
@@ -2015,7 +2186,7 @@ var BroadcastInlinePreview = () => {
                 borderRadius: "8px",
                 overflow: "hidden"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "iframe",
                 {
                   srcDoc: previewHtml,
@@ -2037,9 +2208,9 @@ var BroadcastInlinePreview = () => {
 };
 
 // src/components/Broadcasts/BroadcastPreviewField.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var BroadcastPreviewField = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: {
     padding: "1rem",
     background: "#f9fafb",
     borderRadius: "4px",
@@ -2049,22 +2220,22 @@ var BroadcastPreviewField = () => {
 };
 
 // src/components/Broadcasts/EmailRenderer.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_render = require("@react-email/render");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var EmailRenderer = ({
   template,
   data,
   device = "desktop",
   onRender
 }) => {
-  const [renderedHtml, setRenderedHtml] = (0, import_react9.useState)("");
-  const [error, setError] = (0, import_react9.useState)(null);
-  const iframeRef = (0, import_react9.useRef)(null);
-  const renderEmail = (0, import_react9.useCallback)(async () => {
+  const [renderedHtml, setRenderedHtml] = (0, import_react10.useState)("");
+  const [error, setError] = (0, import_react10.useState)(null);
+  const iframeRef = (0, import_react10.useRef)(null);
+  const renderEmail = (0, import_react10.useCallback)(async () => {
     try {
       const TemplateComponent = template;
-      const element = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TemplateComponent, { ...data });
+      const element = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TemplateComponent, { ...data });
       const html = await (0, import_render.render)(element, {
         pretty: true
       });
@@ -2076,10 +2247,10 @@ var EmailRenderer = ({
       console.error("Failed to render email template:", err);
     }
   }, [template, data, onRender]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     renderEmail();
   }, [renderEmail]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (iframeRef.current && renderedHtml) {
       const iframe = iframeRef.current;
       const doc = iframe.contentDocument || iframe.contentWindow?.document;
@@ -2118,9 +2289,9 @@ var EmailRenderer = ({
     maxWidth: "500px"
   };
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: errorStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: "Template Render Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: errorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: "Template Render Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("pre", { style: {
         background: "#f9fafb",
         padding: "1rem",
         borderRadius: "4px",
@@ -2131,7 +2302,7 @@ var EmailRenderer = ({
       }, children: error.message })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "iframe",
     {
       ref: iframeRef,
@@ -2143,7 +2314,7 @@ var EmailRenderer = ({
 };
 
 // src/components/Broadcasts/StatusBadge.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var statusConfig = {
   ["draft" /* DRAFT */]: {
     label: "Draft",
@@ -2191,7 +2362,7 @@ var statusConfig = {
 var StatusBadge = ({ cellData }) => {
   const status = cellData;
   const config = statusConfig[status] || statusConfig["draft" /* DRAFT */];
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "span",
     {
       style: {
@@ -2216,21 +2387,21 @@ var EmptyField = () => {
 
 // src/email-templates/DefaultBroadcastTemplate.tsx
 var import_components2 = require("@react-email/components");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DefaultBroadcastTemplate = ({
   subject,
   preheader,
   content
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_components2.Html, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Head, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Preview, { children: preheader || subject }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Body, { style: main, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_components2.Container, { style: container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Section, { style: contentSection, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Hr, { style: divider }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_components2.Section, { style: footer, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Text, { style: footerText, children: "You're receiving this email because you subscribed to our newsletter." }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Text, { style: footerText, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Link, { href: "{{unsubscribe_url}}", style: footerLink, children: "Unsubscribe" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_components2.Html, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Head, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Preview, { children: preheader || subject }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Body, { style: main, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_components2.Container, { style: container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Section, { style: contentSection, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Hr, { style: divider }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_components2.Section, { style: footer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Text, { style: footerText, children: "You're receiving this email because you subscribed to our newsletter." }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Text, { style: footerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components2.Link, { href: "{{unsubscribe_url}}", style: footerLink, children: "Unsubscribe" }) })
       ] })
     ] }) })
   ] });