payload-plugin-newsletter 0.18.0 → 0.20.0

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;
@@ -973,9 +979,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";
@@ -989,8 +995,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";
@@ -998,8 +1010,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(
@@ -1056,16 +1068,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;
@@ -1138,11 +1150,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>
@@ -1152,16 +1167,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>
@@ -1267,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",
@@ -1284,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);
@@ -1298,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, {
@@ -1320,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;
@@ -1340,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: [
@@ -1348,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",
@@ -1359,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,
@@ -1379,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",
@@ -1427,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"],
@@ -1488,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",
@@ -1507,7 +1677,7 @@ var EmailPreviewField = () => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1525,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",
@@ -1533,7 +1703,7 @@ var EmailPreviewField = () => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1551,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
       }
     ) })
   ] });
@@ -1567,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);
@@ -1623,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",
@@ -1641,7 +1812,7 @@ var BroadcastEditor = (props) => {
           }
         ),
         showPreview && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1658,7 +1829,7 @@ var BroadcastEditor = (props) => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1676,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",
@@ -1684,7 +1855,7 @@ var BroadcastEditor = (props) => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      showPreview && /* @__PURE__ */ jsx6(
+      showPreview && /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1703,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,
@@ -1727,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,
@@ -1770,7 +1941,7 @@ var PreviewControls = ({
     fontSize: "14px"
   });
   return /* @__PURE__ */ jsxs7("div", { style: controlsStyle, children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         style: updateButtonStyle,
@@ -1788,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"
           ]
@@ -1804,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"
           ]
@@ -1816,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);
@@ -1905,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(),
@@ -1916,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,
@@ -1934,7 +2105,7 @@ var BroadcastInlinePreview = () => {
         }
       )
     ] }) : previewHtml ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         PreviewControls,
         {
           onUpdate: updatePreview,
@@ -1943,7 +2114,7 @@ var BroadcastInlinePreview = () => {
           isLoading
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -1953,7 +2124,7 @@ var BroadcastInlinePreview = () => {
             justifyContent: "center",
             overflow: "auto"
           },
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -1964,7 +2135,7 @@ var BroadcastInlinePreview = () => {
                 borderRadius: "8px",
                 overflow: "hidden"
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx9(
                 "iframe",
                 {
                   srcDoc: previewHtml,
@@ -1986,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",
@@ -2000,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,
@@ -2013,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
       });
@@ -2068,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",
@@ -2080,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,
@@ -2092,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",
@@ -2140,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: {
@@ -2175,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" }) })
       ] })
     ] }) })
   ] });