@pagenflow/email 1.3.7 → 1.4.0

package/dist/index.cjs.js

@@ -1566,7 +1566,7 @@ function getBorderStyle$6(border) {
     }
     return style;
 }
-function getBorderStyleString$1(border) {
+function getBorderStyleString$2(border) {
     if (!border)
         return "";
     const styles = [];
@@ -1602,16 +1602,16 @@ function getBorderStyleString$1(border) {
 }
 function Button({ config, devMode }) {
     const { href, children, backgroundColor = "#007bff", // Default blue
-    color = "#ffffff", padding = "12px 24px", borderRadius = "3px", border, width, maxWidth, justifyContent = "center", textAlign = "center", fontSize = "16px", fontWeight = "500", fontStyle, lineHeight = "1.2", letterSpacing, textTransform, textDecoration = "none", fontFamily = "Arial, sans-serif", whiteSpace = "normal", } = config;
-    // 1. Link (A) Tag Styles (Fallback for Webmail/Mobile)
-    const linkStyle = {
-        display: "block",
-        wordBreak: "break-word"};
+    color = "#ffffff", padding = "12px 24px", borderRadius = "3px", border, width, maxWidth, justifyContent = "center", textAlign = "center", fontSize = "16px", fontWeight = "500", fontStyle, fontFamily = "Arial, sans-serif", lineHeight = "1.2", letterSpacing, textTransform, textDecoration = "none", direction, verticalAlign, opacity, whiteSpace = "normal", wordBreak = "break-word", } = config;
+    // Sanitize fontFamily early so safeFontFamily is available for all paths below.
+    const safeFontFamily = fontFamily
+        ? fontFamily.replace(/['"]/g, "")
+        : fontFamily;
     // 2. Outer TD Style for Background and Border Radius (no border)
     const backgroundTdStyle = Object.assign(Object.assign({ backgroundColor: backgroundColor, borderRadius: borderRadius, width: width || "auto" }, (maxWidth && { maxWidth: maxWidth })), (borderRadius && { overflow: "hidden" }));
     // 3. Border styles
     getBorderStyle$6(border);
-    const borderStyleString = getBorderStyleString$1(border);
+    const borderStyleString = getBorderStyleString$2(border);
     // --- Determine Button Approach Based on Width ---
     // Check if width is percentage-based or not defined
     const isPercentageWidth = !width || width.includes("%");
@@ -1665,6 +1665,8 @@ function Button({ config, devMode }) {
             ? `text-decoration:${textDecoration};`
             : "";
         const vmlWhiteSpace = whiteSpace !== "normal" ? `white-space:${whiteSpace};` : "";
+        const vmlDirection = direction ? `direction:${direction};` : "";
+        const vmlOpacity = opacity !== undefined ? `opacity:${opacity};` : "";
         // VML code uses MSO conditional comments to render only in Outlook
         // Use table with explicit MSO height for vertical centering
         const horizontalPaddingValue = padding.split(" ")[1]
@@ -1686,7 +1688,7 @@ function Button({ config, devMode }) {
       <v:textbox inset="${horizontalPaddingValue}px,${numericPadding}px,${horizontalPaddingValue}px,${numericPadding}px">
         <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;">
           <tr>
-            <td ${vmlAlignAttr} valign="middle" style="${vmlAlignStyle}color:${color};font-family:${fontFamily};font-size:${fontSize};font-weight:${vmlFontWeight};${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}line-height:${lineHeight};mso-line-height-rule:exactly;">
+            <td ${vmlAlignAttr} valign="middle" style="${vmlAlignStyle}color:${color};font-family:${safeFontFamily};font-size:${fontSize};font-weight:${vmlFontWeight};${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}${vmlDirection}${vmlOpacity}line-height:${lineHeight};mso-line-height-rule:exactly;">
               ${typeof children === "string" ? children : ""}
             </td>
           </tr>
@@ -1700,11 +1702,20 @@ function Button({ config, devMode }) {
     let simpleOutlookButton = "";
     if (useSimpleOutlookApproach) {
         // Build consistent inline styles for text properties
-        const textDecorationStyle = textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : "";
+        const textDecorationStyle = textDecoration && textDecoration !== "none"
+            ? `text-decoration: ${textDecoration};`
+            : "";
         const fontStyleProp = fontStyle ? `font-style: ${fontStyle};` : "";
-        const letterSpacingProp = letterSpacing ? `letter-spacing: ${letterSpacing};` : "";
-        const textTransformProp = textTransform ? `text-transform: ${textTransform};` : "";
+        const letterSpacingProp = letterSpacing
+            ? `letter-spacing: ${letterSpacing};`
+            : "";
+        const textTransformProp = textTransform
+            ? `text-transform: ${textTransform};`
+            : "";
         const whiteSpaceProp = whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : "";
+        const directionProp = direction ? `direction: ${direction};` : "";
+        const opacityProp = opacity !== undefined ? `opacity: ${opacity};` : "";
+        const wordBreakProp = wordBreak !== "break-word" ? `word-break: ${wordBreak};` : "";
         simpleOutlookButton = `
     <!--[if mso]>
     <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse;">
@@ -1713,7 +1724,7 @@ function Button({ config, devMode }) {
           <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${width || "auto"}" style="border-collapse: collapse;">
             <tr>
               <td bgcolor="${backgroundColor}" align="${textAlign}" style="padding: ${padding}; text-align: ${textAlign}; border-radius: ${borderRadius}; ${borderStyleString}">
-                <a href="${href}" target="_blank" rel="noopener noreferrer" style="color: ${color}; ${textDecorationStyle} display: block; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyleProp} line-height: ${lineHeight}; ${letterSpacingProp} ${textTransformProp} text-align: ${textAlign}; ${whiteSpaceProp} mso-line-height-rule: exactly;">
+                <a href="${href}" target="_blank" rel="noopener noreferrer" style="color: ${color}; ${textDecorationStyle} display: block; font-family: ${safeFontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyleProp} line-height: ${lineHeight}; ${letterSpacingProp} ${textTransformProp} text-align: ${textAlign}; ${whiteSpaceProp} ${directionProp} ${opacityProp} ${wordBreakProp} mso-line-height-rule: exactly;">
                   ${typeof children === "string" ? children : ""}
                 </a>
               </td>
@@ -1725,6 +1736,27 @@ function Button({ config, devMode }) {
     <![endif]-->
   `;
     }
+    // Build shared inline style fragments for the non-MSO path.
+    // fontFamily uses the sanitized value so embedded quotes never break the
+    // style attribute string (which is always wrapped in double quotes).
+    const sharedTextStyles = [
+        `color: ${color};`,
+        safeFontFamily ? `font-family: ${safeFontFamily};` : "",
+        fontSize ? `font-size: ${fontSize};` : "",
+        fontWeight ? `font-weight: ${fontWeight};` : "",
+        fontStyle ? `font-style: ${fontStyle};` : "",
+        lineHeight ? `line-height: ${lineHeight};` : "",
+        letterSpacing ? `letter-spacing: ${letterSpacing};` : "",
+        textTransform ? `text-transform: ${textTransform};` : "",
+        textDecoration && textDecoration !== "none"
+            ? `text-decoration: ${textDecoration};`
+            : "",
+        direction ? `direction: ${direction};` : "",
+        opacity !== undefined ? `opacity: ${opacity};` : "",
+        whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
     return (
     // Wrapper table for alignment - maintains proper positioning for hover indicators
     jsxRuntime.jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
@@ -1755,11 +1787,11 @@ function Button({ config, devMode }) {
                   <tr>
                     <td style="padding: 0;">
                       ${devMode
-                                            ? `<span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyle ? `font-style: ${fontStyle};` : ""} line-height: ${lineHeight}; ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ""} ${textTransform ? `text-transform: ${textTransform};` : ""} ${textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : ""} ${whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : ""} display: ${linkStyle.display}; text-align: ${textAlign}; word-break: ${linkStyle.wordBreak}; padding: ${padding};">
+                                            ? `<span style="${sharedTextStyles} display: block; text-align: ${textAlign}; word-break: ${wordBreak}; padding: ${padding};">
                               ${typeof children === "string" ? children : ""}
                             </span>`
-                                            : `<a href="${href}" target="_blank" rel="noopener noreferrer" style="color: ${color}; ${textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : "text-decoration: none;"} display: ${linkStyle.display}; word-break: ${linkStyle.wordBreak}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyle ? `font-style: ${fontStyle};` : ""} line-height: ${lineHeight}; ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ""} ${textTransform ? `text-transform: ${textTransform};` : ""} text-align: ${textAlign}; ${whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : ""} padding: ${padding};">
-                              <span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyle ? `font-style: ${fontStyle};` : ""} line-height: ${lineHeight}; ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ""} ${textTransform ? `text-transform: ${textTransform};` : ""} ${textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : ""} ${whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : ""}">
+                                            : `<a href="${href}" target="_blank" rel="noopener noreferrer" style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; word-break: ${wordBreak}; text-align: ${textAlign}; padding: ${padding};">
+                              <span style="${sharedTextStyles}">
                                 ${typeof children === "string" ? children : ""}
                               </span>
                             </a>`}
@@ -2023,7 +2055,7 @@ function Container({ children, config, devMode, devNode }) {
                                     fontSize: "0",
                                     lineHeight: "0",
                                     height: config.gap,
-                                }, children: "\u00A0" }))] }, `child-${index}`), jsxRuntime.jsx("td", { className: "desktop-gap-column", width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
+                                }, children: "\u00A0" }))] }, `child-${index}`), jsxRuntime.jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
         }
         return (jsxRuntime.jsx("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: child }, `child-${index}`));
     });
@@ -2079,24 +2111,58 @@ function Divider({ config, devNode }) {
 }
 var Divider_default = React.memo(Divider, arePropsEqual);
 
-function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", rowGaps = [], }) {
-    // Outlook (MSO) Styles and Reset
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function normaliseFallbacks(fallbackFontFamily) {
+    if (!fallbackFontFamily)
+        return [];
+    return Array.isArray(fallbackFontFamily)
+        ? fallbackFontFamily
+        : [fallbackFontFamily];
+}
+/**
+ * Build the CSS font-stack string from the primary family + fallbacks.
+ * Wraps names that contain spaces in single quotes.
+ */
+function buildFontStack(primary, fallbacks) {
+    const quote = (name) => (name.includes(" ") ? `'${name}'` : name);
+    return [primary, ...fallbacks].map(quote).join(", ");
+}
+// ── Component ─────────────────────────────────────────────────────────────────
+function Font({ fontFamily, fallbackFontFamily, webFont, fontWeight = 400, fontStyle = "normal", }) {
+    var _a;
+    const fallbacks = normaliseFallbacks(fallbackFontFamily);
+    const fontFaceCss = webFont
+        ? `
+@font-face {
+  font-family: '${fontFamily}';
+  font-style: ${fontStyle};
+  font-weight: ${fontWeight};
+  font-display: swap;
+  src: url('${webFont.url}') format('${webFont.format}');
+  mso-font-alt: '${(_a = fallbacks[0]) !== null && _a !== void 0 ? _a : "sans-serif"}';
+}`.trim()
+        : null;
+    const msoComment = fallbacks.length > 0
+        ? `<!--[if mso]>\n<style type="text/css">\n  .${cssClassName(fontFamily)} {\n    font-family: ${buildFontStack(fallbacks[0], fallbacks.slice(1))}, sans-serif !important;\n  }\n</style>\n<![endif]-->`
+        : null;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fontFaceCss && (jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: fontFaceCss } })), msoComment && (jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: {
+                    __html: `</style>${msoComment}<style type="text/css">`,
+                } }))] }));
+}
+// ── Utility: generate a stable CSS class name from a font family name ─────────
+// Used in the MSO conditional comment to scope the fallback rule.
+function cssClassName(fontFamily) {
+    return `font-${fontFamily.toLowerCase().replace(/\s+/g, "-")}`;
+}
+
+function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", rowGaps = [], fonts = [], }) {
     const msoResetStyles = `
-        /* Forces Outlook to render 100% width and prevents line-height issues */
         .ExternalClass { width: 100%; line-height: 100%; } 
         .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
-        
-        /* Reset tables for MSO and border issues */
         table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0; }
         td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
-        
-        /* Reset images */
         img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
-        
-        /* Fix for Gmail image wrapping and blue links */
         #MessageViewBody img { min-width: 100%; }
-        
-        /* --- APPLE BLUE LINK FIX --- */
         a[x-apple-data-detectors] { 
             color: inherit !important; 
             text-decoration: none !important; 
@@ -2105,14 +2171,8 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
             font-weight: inherit !important; 
             line-height: inherit !important; 
         }
-
-        /* 🔒 NEW: Set global background color via CSS for clients that respect it */
         body { background-color: ${backgroundColor} !important; }
-
-        /* Disable browser default margin */
-        p {
-            margin: 0;
-        }
+        p { margin: 0; }
     `;
     const globalStyles = `
         @media screen and (max-width: 768px) {
@@ -2121,7 +2181,6 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
                 max-width: 100% !important;
             }
         }
-
         @media screen and (max-width: 768px) {
           .hide-on-mobile {
             display: none !important;
@@ -2130,7 +2189,14 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
             mso-hide: all;
           }
         }
-
+        @media screen and (min-width: 769px) {
+          .hide-on-desktop {
+            display: none !important;
+            max-height: 0 !important;
+            overflow: hidden !important;
+            mso-hide: all;
+          }
+        }
         @media screen and (max-width: 768px) {
             .stack-td {
                 width: 100% !important;
@@ -2140,12 +2206,7 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
-
-            .desktop-gap-column {
-                width: 0 !important;
-                display: none !important;
-            }
-
+            .desktop-gap-column { width: 0 !important; display: none !important; }
             .mobile-gap-spacer {
                 display: block !important;
                 width: 100% !important;
@@ -2154,66 +2215,28 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
                 mso-line-height-rule: exactly;
             }
         }
-
         @media only screen and (max-width: 768px) {
-          /* 1. Handling Mobile Alignment (Justify) */
-          .row-content-table[data-mobile-justify="center"] {
-            margin: 0 auto !important;
-            float: none !important;
-          }
-          .row-content-table[data-mobile-justify="start"] {
-            margin: 0 !important;
-            float: left !important;
-          }
-          .row-content-table[data-mobile-justify="end"] {
-            margin: 0 0 0 auto !important;
-            float: right !important;
-          }
-
-          /* 2. Handling Mobile Vertical Alignment (Align Items) */
-          .row-content-table[data-mobile-align="center"] .child-cell {
-            vertical-align: middle !important;
-          }
-          .row-content-table[data-mobile-align="start"] .child-cell {
-            vertical-align: top !important;
-          }
-          .row-content-table[data-mobile-align="end"] .child-cell {
-            vertical-align: bottom !important;
-          }
-
-          /* 3. Handling Mobile Wrap - Pure CSS Solution */
-          
-          /* Force table to be full width */
-          .row-content-table[data-mobile-wrap="true"] {
-            width: 100% !important;
-            max-width: 100% !important;
-          }
-          
-          /* Force table row to stack cells */
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr {
-            display: block !important;
-          }
-          
-          /* Force each child cell to be full width block */
+          .row-content-table[data-mobile-justify="center"] { margin: 0 auto !important; float: none !important; }
+          .row-content-table[data-mobile-justify="start"] { margin: 0 !important; float: left !important; }
+          .row-content-table[data-mobile-justify="end"] { margin: 0 0 0 auto !important; float: right !important; }
+          .row-content-table[data-mobile-align="center"] .child-cell { vertical-align: middle !important; }
+          .row-content-table[data-mobile-align="start"] .child-cell { vertical-align: top !important; }
+          .row-content-table[data-mobile-align="end"] .child-cell { vertical-align: bottom !important; }
+          .row-content-table[data-mobile-wrap="true"] { width: 100% !important; max-width: 100% !important; }
+          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr { display: block !important; }
           .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell {
             display: block !important;
             width: 100% !important;
             box-sizing: border-box !important;
           }
-          
-          /* Hide horizontal gap cells */
           .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .row-gap-td {
             display: none !important;
             width: 0 !important;
             height: 0 !important;
           }
-          
-          /* Add vertical spacing between stacked cells using margin */
           .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell:not(:last-child) {
             margin-bottom: 20px !important;
           }
-          
-          /* Dynamic gap support - common values */
           ${["10px", "15px", "20px", "24px", "30px", "40px", ...rowGaps]
         .filter((gap, index, self) => self.indexOf(gap) === index)
         .map((gap) => `
@@ -2222,25 +2245,8 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
               }`)
         .join("\n")}
         }
-        
-        /* ================================================= */
-        /* 🔒 UNIVERSAL LINK RESET */
-        a {
-            color: inherit;
-            text-decoration: none;
-        }
-        /* ================================================= */
-
-        /* ================================================= */
-        /* 🔒 LIST STYLE ENFORCEMENT */
-        
-        /* Reset all lists and list items */
-        ol, ul {
-          margin: 0px;
-          padding: 0px;
-          list-style: none;
-        }
-        
+        a { color: inherit; text-decoration: none; }
+        ol, ul { margin: 0px; padding: 0px; list-style: none; }
         li {
           list-style-type: none !important;
           list-style: none !important;
@@ -2249,8 +2255,6 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
           margin: 0px;
           display: block !important;
         }
-
-        /* 🔒 FORCE HIDE ::marker pseudo-element for non-list items */
         li::marker {
           content: "" !important;
           font-size: 0px !important;
@@ -2258,24 +2262,18 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
           color: transparent !important;
           width: 0px !important;
         }
-
-        /* Apply bullet styles only to items with data-list="bullet" */
         li[data-list="bullet"] {
           list-style-type: disc !important;
           list-style-position: inside !important;
           padding-left: 1.5em;
           display: list-item !important;
         }
-
-        /* Apply ordered styles only to items with data-list="ordered" */
         li[data-list="ordered"] {
           list-style-type: decimal !important;
           list-style-position: inside !important;
           padding-left: 1.5em;
           display: list-item !important;
         }
-
-        /* Ensure marker only takes its natural size with no extra spacing */
         li[data-list="bullet"]::marker,
         li[data-list="ordered"]::marker {
           content: normal !important;
@@ -2285,22 +2283,13 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
           padding: 0 !important;
           margin: 0 !important;
         }
-        /* ================================================= */
-
-        /* ================================================= */
-        /* 🔒 HEADING STYLE RESET */
-        h1, h2, h3, h4, h5, h6 {
-          margin: 0;
-          padding: 0;
-          font-weight: inherit; /* Disables browser defaults */
-        }
-        /* ================================================= */
+        h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: inherit; }
     `;
-    return (jsxRuntime.jsxs("head", { children: [jsxRuntime.jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), jsxRuntime.jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), jsxRuntime.jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } }), children] }));
+    return (jsxRuntime.jsxs("head", { children: [jsxRuntime.jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), jsxRuntime.jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), jsxRuntime.jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), jsxRuntime.jsx("title", { children: title }), fonts.flatMap((resolved) => resolved.fontProps.map((props, i) => (jsxRuntime.jsx(Font, Object.assign({}, props), `${resolved.family}-${props.fontWeight}-${props.fontStyle}-${i}`)))), children, jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } })] }));
 }
 
 function Heading({ config, devMode, children }) {
-    const { text, level = "h1", padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, wordBreak, whiteSpace, } = config;
+    const { text, level = "h1", padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, wordBreak, whiteSpace, } = config;
     // Determine the content to render
     const content = text !== null && text !== void 0 ? text : children;
     const isString = typeof content === "string";
@@ -2315,6 +2304,7 @@ function Heading({ config, devMode, children }) {
     const headingStyle = {
         color: color,
         textAlign: textAlign,
+        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -2328,8 +2318,6 @@ function Heading({ config, devMode, children }) {
         // Critical: Remove default top/bottom margin from HTML heading tags
         margin: "0",
         padding: "0",
-        // Ensures compatibility with MSO/general font rendering
-        fontFamily: "Arial, Helvetica, sans-serif",
         // Outlook specific fixes (using string indexing)
         ["msoLineHeightRule"]: "exactly",
     };
@@ -2364,92 +2352,196 @@ function Html({ children, backgroundColor = "#ffffff", }) {
     );
 }
 
+/**
+ * Content rendered by Outlook Classic only.
+ * Outputs: <!--[if mso]> ... <![endif]-->
+ */
+function MsoOnly({ html }) {
+    return (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]>${html}<![endif]-->`,
+        } }));
+}
+/**
+ * Content hidden from Outlook Classic, visible in all other clients.
+ * Outputs: <!--[if !mso]><!--> ... <!--<![endif]-->
+ */
+function NonMso({ html }) {
+    return (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if !mso]><!-->${html}<!--<![endif]-->`,
+        } }));
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
 function getBorderStyle$3(border) {
     if (!border)
         return {};
     const style = {};
-    // If a full border is specified, apply it
     if (border.width && border.style && border.color) {
         style.border = `${border.width} ${border.style} ${border.color}`;
     }
     else {
-        // If only individual borders are specified, explicitly set others to 'none'
-        // to prevent Outlook Classic from showing black borders
-        const hasIndividualBorders = border.top || border.right || border.bottom || border.left;
-        if (hasIndividualBorders) {
-            // Default all borders to none
+        const hasIndividual = border.top || border.right || border.bottom || border.left;
+        if (hasIndividual) {
             style.borderTop = "none";
             style.borderRight = "none";
             style.borderBottom = "none";
             style.borderLeft = "none";
         }
     }
-    // Override with specific borders if provided
-    if (border.top) {
+    if (border.top)
         style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
-    }
-    if (border.right) {
+    if (border.right)
         style.borderRight = `${border.right.width} ${border.right.style} ${border.right.color}`;
-    }
-    if (border.bottom) {
+    if (border.bottom)
         style.borderBottom = `${border.bottom.width} ${border.bottom.style} ${border.bottom.color}`;
-    }
-    if (border.left) {
+    if (border.left)
         style.borderLeft = `${border.left.width} ${border.left.style} ${border.left.color}`;
-    }
     return style;
 }
-function Image({ config, devNode, devMode }) {
-    const { src, alt, width, height, maxHeight, maxWidth, backgroundColor, padding, borderRadius, border, href, target, } = config;
-    // Get border styles
+function getBorderStyleString$1(border) {
+    if (!border)
+        return "";
+    const styles = [];
+    if (border.width && border.style && border.color) {
+        styles.push(`border:${border.width} ${border.style} ${border.color};`);
+    }
+    else {
+        const hasIndividual = border.top || border.right || border.bottom || border.left;
+        if (hasIndividual) {
+            styles.push("border-top:none;", "border-right:none;", "border-bottom:none;", "border-left:none;");
+        }
+    }
+    if (border.top)
+        styles.push(`border-top:${border.top.width} ${border.top.style} ${border.top.color};`);
+    if (border.right)
+        styles.push(`border-right:${border.right.width} ${border.right.style} ${border.right.color};`);
+    if (border.bottom)
+        styles.push(`border-bottom:${border.bottom.width} ${border.bottom.style} ${border.bottom.color};`);
+    if (border.left)
+        styles.push(`border-left:${border.left.width} ${border.left.style} ${border.left.color};`);
+    return styles.join(" ");
+}
+// ---------------------------------------------------------------------------
+// Merged styles helper — applies mobile overrides on top of desktop values
+// ---------------------------------------------------------------------------
+function mergeConfig(config, overrides) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return {
+        width: (_a = overrides === null || overrides === void 0 ? void 0 : overrides.width) !== null && _a !== void 0 ? _a : config.width,
+        height: (_b = overrides === null || overrides === void 0 ? void 0 : overrides.height) !== null && _b !== void 0 ? _b : config.height,
+        maxWidth: (_c = overrides === null || overrides === void 0 ? void 0 : overrides.maxWidth) !== null && _c !== void 0 ? _c : config.maxWidth,
+        maxHeight: (_d = overrides === null || overrides === void 0 ? void 0 : overrides.maxHeight) !== null && _d !== void 0 ? _d : config.maxHeight,
+        backgroundColor: (_e = overrides === null || overrides === void 0 ? void 0 : overrides.backgroundColor) !== null && _e !== void 0 ? _e : config.backgroundColor,
+        padding: (_f = overrides === null || overrides === void 0 ? void 0 : overrides.padding) !== null && _f !== void 0 ? _f : config.padding,
+        borderRadius: (_g = overrides === null || overrides === void 0 ? void 0 : overrides.borderRadius) !== null && _g !== void 0 ? _g : config.borderRadius,
+        border: (_h = overrides === null || overrides === void 0 ? void 0 : overrides.border) !== null && _h !== void 0 ? _h : config.border,
+    };
+}
+// ---------------------------------------------------------------------------
+// Desktop table — JSX (same as original)
+// ---------------------------------------------------------------------------
+function renderDesktopTable({ config, className, devNode, devMode, }) {
+    const { src, alt, href, target } = config;
+    const { width, height, maxWidth, maxHeight, backgroundColor, padding, borderRadius, border, } = mergeConfig(config);
     const borderStyle = getBorderStyle$3(border);
-    // 1. Image Style: Critical for compatibility, especially display: block
-    const imgStyle = Object.assign({ 
-        // Basic image properties
-        display: "block", objectFit: "cover", 
-        // Dimensions (using CSS fallback)
-        width: width || "100%", height: height || "auto", maxWidth: maxWidth || "100%", maxHeight: maxHeight, 
-        // Styling
-        border: "0", borderRadius: borderRadius }, borderStyle);
-    // 2. Link Style: Ensure no underline or color changes
+    const imgStyle = Object.assign({ display: "block", objectFit: "cover", width: width || "100%", height: height || "auto", maxWidth: maxWidth || "100%", maxHeight: maxHeight, border: "0", borderRadius: borderRadius }, borderStyle);
     const linkStyle = {
         display: "block",
         textDecoration: "none",
         border: "0",
         outline: "none",
     };
-    // 3. TD Style: Where padding and background are reliably applied
     const tdStyle = {
         padding: padding,
         backgroundColor: backgroundColor,
-        fontSize: "0", // CRITICAL: Collapses extra space from Outlook/Gmail
-        lineHeight: "0", // CRITICAL: Collapses extra space from Outlook/Gmail
+        fontSize: "0",
+        lineHeight: "0",
     };
-    // Image element with proper attributes for email compatibility
-    const imageElement = (jsxRuntime.jsx("img", { draggable: false, src: src, alt: alt, style: imgStyle, 
-        // For Outlook: Use the smaller of width or maxWidth for the HTML attribute
-        width: (() => {
-            const widthPx = (width === null || width === void 0 ? void 0 : width.endsWith("px")) ? parseInt(width, 10) : undefined;
-            const maxWidthPx = (maxWidth === null || maxWidth === void 0 ? void 0 : maxWidth.endsWith("px"))
-                ? parseInt(maxWidth, 10)
-                : undefined;
-            if (widthPx && maxWidthPx) {
-                return Math.min(widthPx, maxWidthPx);
-            }
-            return widthPx || maxWidthPx;
-        })(), height: (height === null || height === void 0 ? void 0 : height.endsWith("px")) ? parseInt(height, 10) : undefined, border: 0 }));
-    // Wrap image in link if href is provided and not in dev mode
+    const widthNum = (width === null || width === void 0 ? void 0 : width.endsWith("px")) ? parseInt(width, 10) : undefined;
+    const maxWidthNum = (maxWidth === null || maxWidth === void 0 ? void 0 : maxWidth.endsWith("px"))
+        ? parseInt(maxWidth, 10)
+        : undefined;
+    const heightNum = (height === null || height === void 0 ? void 0 : height.endsWith("px")) ? parseInt(height, 10) : undefined;
+    const imageElement = (jsxRuntime.jsx("img", { draggable: false, src: src, alt: alt, style: imgStyle, width: widthNum && maxWidthNum
+            ? Math.min(widthNum, maxWidthNum)
+            : widthNum || maxWidthNum, height: heightNum, border: 0 }));
     const content = href && !devMode ? (jsxRuntime.jsx("a", Object.assign({ href: href, target: target, style: linkStyle }, (target === "_blank" ? { rel: "noopener noreferrer" } : {}), { children: imageElement }))) : (imageElement);
-    return (
-    // We wrap the image in a table to reliably apply padding, background, and alignment.
-    jsxRuntime.jsxs("table", { "aria-label": `Image Wrapper for: ${alt}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            // --- Start dev
+    return (jsxRuntime.jsxs("table", { "aria-label": `Image Wrapper for: ${alt}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, className: className, style: {
             position: "relative",
-            // --- End dev
             width: width || "100%",
             borderCollapse: "collapse",
         }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: "center", children: content }) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
 }
+// ---------------------------------------------------------------------------
+// Mobile table — HTML string (injected via NonMso, same pattern as Icon VML)
+// ---------------------------------------------------------------------------
+function buildMobileTableHTML({ config, overrides, className, }) {
+    const { src, alt, href, target } = config;
+    const { width, height, maxWidth, maxHeight, backgroundColor, padding, borderRadius, border, } = mergeConfig(config, overrides);
+    const borderStyleStr = getBorderStyleString$1(border);
+    const widthNum = (width === null || width === void 0 ? void 0 : width.endsWith("px")) ? parseInt(width, 10) : undefined;
+    const maxWidthNum = (maxWidth === null || maxWidth === void 0 ? void 0 : maxWidth.endsWith("px"))
+        ? parseInt(maxWidth, 10)
+        : undefined;
+    const heightNum = (height === null || height === void 0 ? void 0 : height.endsWith("px")) ? parseInt(height, 10) : undefined;
+    const resolvedWidth = widthNum && maxWidthNum
+        ? Math.min(widthNum, maxWidthNum)
+        : widthNum || maxWidthNum;
+    const imgTag = `<img
+    draggable="false"
+    src="${src}"
+    alt="${alt}"
+    ${resolvedWidth ? `width="${resolvedWidth}"` : ""}
+    ${heightNum ? `height="${heightNum}"` : ""}
+    border="0"
+    style="display:block;object-fit:cover;width:${width || "100%"};height:${height || "auto"};max-width:${maxWidth || "100%"};${maxHeight ? `max-height:${maxHeight};` : ""}border:0;${borderRadius ? `border-radius:${borderRadius};` : ""}${borderStyleStr}"
+  />`;
+    const content = href
+        ? `<a href="${href}" target="${target || "_self"}" style="display:block;text-decoration:none;border:0;outline:none;"${target === "_blank" ? ' rel="noopener noreferrer"' : ""}>${imgTag}</a>`
+        : imgTag;
+    return `
+    <table
+      aria-label="Image Wrapper for: ${alt}"
+      role="presentation"
+      cellpadding="0"
+      cellspacing="0"
+      border="0"
+      class="${className}"
+      style="position:relative;width:${width || "100%"};border-collapse:collapse;"
+    >
+      <tbody>
+        <tr>
+          <td
+            align="center"
+            style="padding:${padding || ""};background-color:${backgroundColor || ""};font-size:0;line-height:0;"
+          >
+            ${content}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Image({ config, devNode, devMode }) {
+    const { mobile } = config;
+    const hasMobileOverrides = !!mobile && !mobile.hidden;
+    const isHiddenOnMobile = !!(mobile === null || mobile === void 0 ? void 0 : mobile.hidden);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderDesktopTable({
+                config,
+                className: hasMobileOverrides || isHiddenOnMobile ? "hide-on-mobile" : undefined,
+                devNode,
+                devMode,
+            }), hasMobileOverrides && !devMode && (jsxRuntime.jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: { width: "100%", borderCollapse: "collapse" }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx(NonMso, { html: buildMobileTableHTML({
+                                config,
+                                overrides: mobile,
+                                className: "hide-on-desktop",
+                            }) }) }) }) }))] }));
+}
 var Image_default = React.memo(Image, arePropsEqual);
 
 const justifyMap$1 = {
@@ -2680,7 +2772,7 @@ function Spacer({ config, devNode }) {
 var Spacer_default = React.memo(Spacer, arePropsEqual);
 
 function Text({ config, devMode, children }) {
-    const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", } = config;
+    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", } = config;
     // 1. TD Style: Where padding and background are reliably applied.
     const tdStyle = {
         padding: padding,
@@ -2692,6 +2784,7 @@ function Text({ config, devMode, children }) {
     const contentStyle = {
         color: color,
         textAlign: textAlign,
+        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -2706,7 +2799,6 @@ function Text({ config, devMode, children }) {
         wordBreak: wordBreak,
         margin: "0",
         padding: "0",
-        fontFamily: "Arial, Helvetica, sans-serif",
     };
     // Determine content to render
     const content = text !== null && text !== void 0 ? text : children;
@@ -2991,11 +3083,14 @@ exports.Button = Button_default;
 exports.Column = Column_default;
 exports.Container = Container_default;
 exports.Divider = Divider_default;
+exports.Font = Font;
 exports.Head = Head;
 exports.Heading = Heading_default;
 exports.Html = Html;
 exports.Icon = Icon_default;
 exports.Image = Image_default;
+exports.MsoOnly = MsoOnly;
+exports.NonMso = NonMso;
 exports.Row = Row_default;
 exports.Section = Section_default;
 exports.Spacer = Spacer_default;