@pagenflow/email 1.3.4 → 1.3.6

package/dist/index.esm.js

@@ -2020,53 +2020,55 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
           }
 
           /* 3. Handling Mobile Wrap - Pure CSS Solution */
+          /* Target only the direct row-content-table, not nested ones */
+          
           /* Force table to act like block container */
-          .responsive-row[data-mobile-wrap="true"] .content-table {
+          .responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table {
             width: 100% !important;
             max-width: 100% !important;
           }
           
           /* Force table row to stack cells */
-          .responsive-row[data-mobile-wrap="true"] .content-tr {
+          .responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr {
             display: block !important;
           }
           
           /* Force each child cell to be full width block */
-          .responsive-row[data-mobile-wrap="true"] .child-cell {
+          .responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell {
             display: block !important;
             width: 100% !important;
             box-sizing: border-box !important;
           }
           
           /* Hide horizontal gap cells and create vertical spacing with padding */
-          .responsive-row[data-mobile-wrap="true"] .row-gap-td {
+          .responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .row-gap-td {
             display: none !important;
             width: 0 !important;
             height: 0 !important;
           }
           
           /* Add vertical spacing between stacked cells using margin */
-          .responsive-row[data-mobile-wrap="true"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 20px !important;
           }
           
           /* Dynamic gap support - common values */
-          .responsive-row[data-mobile-wrap="true"][data-gap="10px"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"][data-gap="10px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 10px !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-gap="15px"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"][data-gap="15px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 15px !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-gap="20px"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"][data-gap="20px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 20px !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-gap="24px"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"][data-gap="24px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 24px !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-gap="30px"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"][data-gap="30px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 30px !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-gap="40px"] .child-cell:not(:last-child) {
+          .responsive-row[data-mobile-wrap="true"][data-gap="40px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 40px !important;
           }
         }
@@ -2148,8 +2150,10 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
 }
 
 function Heading({ config, devMode, children }) {
-    var _a;
     const { text, level = "h1", padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, } = config;
+    // Determine the content to render
+    const content = text !== null && text !== void 0 ? text : children;
+    const isString = typeof content === "string";
     // 1. TD Style: Where padding, background, width, and verticalAlign are applied.
     const tdStyle = {
         padding: padding,
@@ -2176,7 +2180,6 @@ function Heading({ config, devMode, children }) {
         fontFamily: "Arial, Helvetica, sans-serif",
         // Outlook specific fixes (using string indexing)
         ["msoLineHeightRule"]: "exactly",
-        // ["mso-line-height-rule" as string]: "exactly",
     };
     // Dynamically create the Heading element
     const HeadingTag = level;
@@ -2185,7 +2188,7 @@ function Heading({ config, devMode, children }) {
     jsx("table", { "aria-label": "Heading Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             width: "100%",
             borderCollapse: "collapse",
-        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: textAlign, children: jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: (_a = text !== null && text !== void 0 ? text : children) !== null && _a !== void 0 ? _a : "" } }) }) }) }) }));
+        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: textAlign, children: isString ? (jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: content } })) : (jsx(HeadingTag, { style: headingStyle, children: content })) }) }) }) }));
 }
 var Heading_default = memo(Heading, arePropsEqual);
 
@@ -2343,7 +2346,7 @@ function Row({ children, config, devNode }) {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
-                                            }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { align: tdAlign, children: jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table", children: jsx("tbody", { children: jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsx("td", { valign: tdValign, style: {
+                                            }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { align: tdAlign, children: jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table row-content-table", children: jsx("tbody", { children: jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsx("td", { valign: tdValign, style: {
                                                                                     verticalAlign: tdValign,
                                                                                     textAlign: "left",
                                                                                     padding: "0",