@pagenflow/email 1.3.4 → 1.3.6

package/dist/components/Heading.d.ts

@@ -15,15 +15,22 @@ export interface HeadingConfig {
     fontSize?: string;
     /** Font weight (e.g., 'normal', 'bold', or '700'). */
     fontWeight?: string;
-    /** Font style (e.g., 'italic'). */ fontStyle?: string;
+    /** Font style (e.g., 'italic'). */
+    fontStyle?: string;
     /** Line height (e.g., '1.3' or '30px'). */
     lineHeight?: string;
-    /** Letter spacing (e.g., '0.5px', '1px'). */ letterSpacing?: string;
-    /** Text transform (e.g., 'uppercase', 'lowercase', 'capitalize'). */ textTransform?: string;
-    /** Text decoration (e.g., 'underline', 'line-through'). */ textDecoration?: string;
-    /** Text direction (e.g., 'ltr', 'rtl'). */ direction?: string;
-    /** Vertical alignment (e.g., 'sub', 'super'). Applied to content wrapper in Text, applied to TD here for alignment. */ verticalAlign?: string;
-    /** Background color of the heading block. */ backgroundColor?: string;
+    /** Letter spacing (e.g., '0.5px', '1px'). */
+    letterSpacing?: string;
+    /** Text transform (e.g., 'uppercase', 'lowercase', 'capitalize'). */
+    textTransform?: string;
+    /** Text decoration (e.g., 'underline', 'line-through'). */
+    textDecoration?: string;
+    /** Text direction (e.g., 'ltr', 'rtl'). */
+    direction?: string;
+    /** Vertical alignment (e.g., 'sub', 'super'). Applied to content wrapper in Text, applied to TD here for alignment. */
+    verticalAlign?: string;
+    /** Background color of the heading block. */
+    backgroundColor?: string;
 }
 export type HeadingProps = {
     config: HeadingConfig;

package/dist/index.cjs.js

@@ -2022,53 +2022,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;
           }
         }
@@ -2150,8 +2152,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,
@@ -2178,7 +2182,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;
@@ -2187,7 +2190,7 @@ function Heading({ config, devMode, children }) {
     jsxRuntime.jsx("table", { "aria-label": "Heading Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             width: "100%",
             borderCollapse: "collapse",
-        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: jsxRuntime.jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: (_a = text !== null && text !== void 0 ? text : children) !== null && _a !== void 0 ? _a : "" } }) }) }) }) }));
+        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: isString ? (jsxRuntime.jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: content } })) : (jsxRuntime.jsx(HeadingTag, { style: headingStyle, children: content })) }) }) }) }));
 }
 var Heading_default = React.memo(Heading, arePropsEqual);
 
@@ -2345,7 +2348,7 @@ function Row({ children, config, devNode }) {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
-                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.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: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
+                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.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: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
                                                                                     verticalAlign: tdValign,
                                                                                     textAlign: "left",
                                                                                     padding: "0",