payload-plugin-newsletter 0.19.0 → 0.20.1

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;
@@ -1466,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",
@@ -1483,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("");
@@ -1497,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, {
@@ -1519,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) {
@@ -1531,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",
@@ -1558,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,
@@ -1578,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",
@@ -1587,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"
       ] })
@@ -1624,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"],
@@ -1672,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",
@@ -1686,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",
@@ -1706,7 +1728,7 @@ var EmailPreviewField = () => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -1724,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",
@@ -1732,7 +1754,7 @@ var EmailPreviewField = () => {
           fontSize: "13px"
         }, children: validationSummary })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -1750,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;
@@ -1812,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",
@@ -1821,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",
@@ -1839,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",
@@ -1857,7 +1880,7 @@ var BroadcastEditor = (props) => {
               children: "Desktop"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -1875,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",
@@ -1883,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",
@@ -1901,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,
@@ -1922,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,
@@ -1968,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,
@@ -1978,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"
           ]
@@ -2015,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;
@@ -2102,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(),
@@ -2115,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,
@@ -2132,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,
@@ -2142,7 +2165,7 @@ var BroadcastInlinePreview = () => {
           isLoading
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           style: {
@@ -2152,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: {
@@ -2163,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,
@@ -2185,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",
@@ -2197,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
       });
@@ -2224,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;
@@ -2266,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",
@@ -2279,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,
@@ -2291,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",
@@ -2339,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: {
@@ -2364,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" }) })
       ] })
     ] }) })
   ] });