@pagenflow/email 1.3.6 → 1.4.0

package/dist/index.esm.js

@@ -1529,80 +1529,267 @@ const justifyMap$3 = {
     center: "center",
     end: "right",
 };
+function getBorderStyle$6(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
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
+    if (border.top) {
+        style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
+    }
+    if (border.right) {
+        style.borderRight = `${border.right.width} ${border.right.style} ${border.right.color}`;
+    }
+    if (border.bottom) {
+        style.borderBottom = `${border.bottom.width} ${border.bottom.style} ${border.bottom.color}`;
+    }
+    if (border.left) {
+        style.borderLeft = `${border.left.width} ${border.left.style} ${border.left.color}`;
+    }
+    return style;
+}
+function getBorderStyleString$2(border) {
+    if (!border)
+        return "";
+    const styles = [];
+    // If a full border is specified, apply it
+    if (border.width && border.style && border.color) {
+        styles.push(`border: ${border.width} ${border.style} ${border.color};`);
+    }
+    else {
+        // If only individual borders are specified
+        const hasIndividualBorders = border.top || border.right || border.bottom || border.left;
+        if (hasIndividualBorders) {
+            // Default all borders to none
+            styles.push("border-top: none;");
+            styles.push("border-right: none;");
+            styles.push("border-bottom: none;");
+            styles.push("border-left: none;");
+        }
+    }
+    // Override with specific borders if provided
+    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(" ");
+}
 function Button({ config, devMode }) {
     const { href, children, backgroundColor = "#007bff", // Default blue
-    color = "#ffffff", padding = "12px 24px", borderRadius = "3px", width, 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({ backgroundColor: backgroundColor, borderRadius: borderRadius, width: width || "auto" }, (borderRadius && { overflow: "hidden" }));
-    // --- VML Calculation and Code for Outlook Compatibility ---
-    // VML needs fixed pixel height. We estimate it based on padding.
-    const numericPadding = parseInt(padding.split(" ")[0] || "12", 10);
-    const vmlHeight = numericPadding * 2 + 20; // Estimate height based on padding + font size
-    const vmlWidth = width ? parseInt(width, 10) : 200; // Default VML width (fixed)
-    // VML colors must use the full hex format (e.g., #000000)
-    const vmlFillColor = backgroundColor.startsWith("#")
-        ? backgroundColor
-        : `#${backgroundColor}`;
+    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$2(border);
+    // --- Determine Button Approach Based on Width ---
+    // Check if width is percentage-based or not defined
+    const isPercentageWidth = !width || width.includes("%");
+    const useSimpleOutlookApproach = isPercentageWidth;
     const align = justifyMap$3[justifyContent];
-    // Build VML font styles
-    const vmlFontWeight = fontWeight || "bold";
-    const vmlFontStyle = fontStyle === "italic" ? "font-style:italic;" : "";
-    const vmlLetterSpacing = letterSpacing
-        ? `letter-spacing:${letterSpacing};`
-        : "";
-    const vmlTextTransform = textTransform
-        ? `text-transform:${textTransform};`
-        : "";
-    const vmlTextDecoration = textDecoration && textDecoration !== "none"
-        ? `text-decoration:${textDecoration};`
-        : "";
-    const vmlWhiteSpace = whiteSpace && whiteSpace !== "normal" ? `white-space:${whiteSpace};` : "";
-    // VML code uses MSO conditional comments to render only in Outlook
-    const vmlButton = `
+    // --- VML Calculation and Code for Outlook Compatibility (Fixed Width Only) ---
+    let vmlButton = "";
+    if (!useSimpleOutlookApproach) {
+        // VML needs fixed pixel height. We estimate it based on padding and potential wrapping.
+        const numericPadding = parseInt(padding.split(" ")[0] || "12", 10);
+        const numericFontSize = parseInt(fontSize, 10);
+        const numericLineHeight = lineHeight.includes("px")
+            ? parseInt(lineHeight, 10)
+            : numericFontSize * parseFloat(lineHeight);
+        // Trust user's explicit pixel width - no calculation needed
+        const vmlWidth = parseInt(width, 10);
+        // Calculate VML height - trust user's padding and let text wrap naturally
+        // VML v:textbox will handle text wrapping automatically
+        const textContent = typeof children === "string" ? children : "";
+        // Estimate number of lines based on text length and button width
+        const horizontalPadding = padding.split(" ")[1]
+            ? parseInt(padding.split(" ")[1], 10) * 2
+            : numericPadding * 2;
+        const availableTextWidth = vmlWidth - horizontalPadding;
+        const charWidthMultiplier = fontWeight && parseInt(fontWeight) >= 500 ? 0.7 : 0.6;
+        const avgCharWidth = numericFontSize * charWidthMultiplier;
+        const charsPerLine = Math.max(Math.floor(availableTextWidth / avgCharWidth), 1);
+        const numberOfLines = Math.max(Math.ceil(textContent.length / charsPerLine), 1);
+        // Calculate height: vertical padding + (lines * line height) + extra buffer for VML
+        const textHeight = numberOfLines * numericLineHeight;
+        // Add extra 4px buffer to prevent bottom cropping in VML
+        const vmlHeight = Math.max(numericPadding * 2 + textHeight + 4, 40);
+        // VML colors must use the full hex format (e.g., #000000)
+        const vmlFillColor = backgroundColor.startsWith("#")
+            ? backgroundColor
+            : `#${backgroundColor}`;
+        // VML stroke color for border
+        const vmlStrokeColor = (border === null || border === void 0 ? void 0 : border.color) || vmlFillColor;
+        const vmlStrokeWeight = (border === null || border === void 0 ? void 0 : border.width) ? parseInt(border.width, 10) : 0;
+        const hasVmlStroke = vmlStrokeWeight > 0;
+        // Build VML font styles - consistent with other rendering paths
+        const vmlFontWeight = fontWeight || "500";
+        const vmlFontStyle = fontStyle === "italic" ? "font-style:italic;" : "";
+        const vmlLetterSpacing = letterSpacing
+            ? `letter-spacing:${letterSpacing};`
+            : "";
+        const vmlTextTransform = textTransform
+            ? `text-transform:${textTransform};`
+            : "";
+        const vmlTextDecoration = textDecoration && textDecoration !== "none"
+            ? `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]
+            ? parseInt(padding.split(" ")[1], 10)
+            : numericPadding;
+        // For VML, we need to use a table inside to properly apply padding and centering
+        let vmlAlignAttr = "";
+        let vmlAlignStyle = "";
+        if (textAlign === "center") {
+            vmlAlignAttr = 'align="center"';
+        }
+        else {
+            vmlAlignStyle = `text-align:${textAlign};`;
+        }
+        vmlButton = `
     <!--[if mso]>
-    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${href}" style="height:${vmlHeight}px;v-text-anchor:middle;width:${vmlWidth}px;" arcsize="${(parseInt(borderRadius) / vmlHeight) * 100}%" strokecolor="${vmlFillColor}" fillcolor="${vmlFillColor}">
+    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${href}" style="height:${vmlHeight}px;width:${vmlWidth}px;" arcsize="${Math.min((parseInt(borderRadius) / vmlHeight) * 100, 50)}%" strokecolor="${vmlStrokeColor}" ${hasVmlStroke ? `strokeweight="${vmlStrokeWeight}px"` : 'stroke="f"'} fillcolor="${vmlFillColor}">
       <w:anchorlock/>
-      <center style="color:${color};font-family:${fontFamily};font-size:${fontSize};font-weight:${vmlFontWeight};${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}">
-        ${typeof children === "string" ? children : ""}
-      </center>
+      <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:${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>
+        </table>
+      </v:textbox>
     </v:roundrect>
     <![endif]-->
   `;
+    }
+    // --- Simple Outlook Approach for Percentage Widths ---
+    let simpleOutlookButton = "";
+    if (useSimpleOutlookApproach) {
+        // Build consistent inline styles for text properties
+        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 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;">
+      <tr>
+        <td align="${align}" style="padding: 0;">
+          <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: ${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>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+    <![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 (
-    // Outer table for alignment (center the button horizontally)
-    jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: {
-            // --- Start dev
-            position: "relative",
-            // --- End dev
-            width: width || "auto",
+    // Wrapper table for alignment - maintains proper positioning for hover indicators
+    jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            width: "100%",
             borderCollapse: "collapse",
-            // base
             boxSizing: "border-box",
             border: 0,
             margin: 0,
             padding: 0,
-        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { dangerouslySetInnerHTML: {
-                        __html: `
-      ${devMode ? "" : vmlButton}
+        }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { align: align, style: {
+                        padding: 0,
+                    }, children: jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: Object.assign(Object.assign({ 
+                            // --- Start dev
+                            position: "relative", 
+                            // --- End dev
+                            width: width || "auto" }, (maxWidth && { maxWidth: maxWidth })), { borderCollapse: "collapse", 
+                            // base
+                            boxSizing: "border-box", border: 0, margin: 0, padding: 0 }), onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { dangerouslySetInnerHTML: {
+                                        __html: `
+      ${devMode ? "" : useSimpleOutlookApproach ? simpleOutlookButton : vmlButton}
       <!--[if !mso]><!-->
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
         <tbody>
           <tr>
-            <td style="background-color: ${backgroundTdStyle.backgroundColor}; border-radius: ${backgroundTdStyle.borderRadius}; width: ${backgroundTdStyle.width}; ${borderRadius ? "overflow: hidden;" : ""}">
-              <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; border-spacing: 0; border-radius: ${borderRadius}; width: 100%;">
+            <td style="background-color: ${backgroundTdStyle.backgroundColor}; border-radius: ${backgroundTdStyle.borderRadius}; width: ${backgroundTdStyle.width}; ${maxWidth ? `max-width: ${maxWidth};` : ""} ${borderRadius ? "overflow: hidden;" : ""}">
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; border-spacing: 0; border-radius: ${borderRadius}; width: 100%; ${borderStyleString}">
                 <tbody>
                   <tr>
-                    <td style="padding: ${padding};">
+                    <td style="padding: 0;">
                       ${devMode
-                            ? `<span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle || "normal"}; line-height: ${lineHeight}; letter-spacing: ${letterSpacing || "normal"}; text-transform: ${textTransform || "none"}; text-decoration: ${textDecoration}; white-space: ${whiteSpace}; display: ${linkStyle.display}; text-align: ${textAlign}; word-break: ${linkStyle.wordBreak};">
+                                            ? `<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}; text-decoration: ${textDecoration}; display: ${linkStyle.display}; word-break: ${linkStyle.wordBreak}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle || "normal"}; line-height: ${lineHeight}; letter-spacing: ${letterSpacing || "normal"}; text-transform: ${textTransform || "none"}; text-align: ${textAlign}; white-space: ${whiteSpace};">
-                              <span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle || "normal"}; line-height: ${lineHeight}; letter-spacing: ${letterSpacing || "normal"}; text-transform: ${textTransform || "none"}; text-decoration: ${textDecoration}; 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>`}
@@ -1616,7 +1803,7 @@ function Button({ config, devMode }) {
       </table>
       <!--<![endif]-->
     `,
-                    } }) }) }) }));
+                                    } }) }) }) }) }) }) }) }));
 }
 var Button_default = memo(Button, arePropsEqual);
 
@@ -1633,15 +1820,27 @@ const alignMap$2 = {
     end: "right",
 };
 // Helper to convert border config to CSS border shorthand
-function getBorderStyle$3(border) {
+function getBorderStyle$5(border) {
     if (!border)
         return {};
     const style = {};
-    // Check for unified border
+    // If a full border is specified, apply it
     if (border.width && border.style && border.color) {
         style.border = `${border.width} ${border.style} ${border.color}`;
     }
-    // Individual sides override unified border
+    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
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
     if (border.top) {
         style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
     }
@@ -1661,24 +1860,32 @@ function Column({ children, config, devNode }) {
     // Process children array for gap support
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
     const numChildren = childrenArray.length;
-    // 1. Outer table style: Takes up the full width/height of its parent TD
+    // 1. Outer table style: Takes up the full width/height of its parent TD.
+    //    height here drives the *total* outer height of the column.
     const outerTableStyle = {
         width: "100%",
         height: config.height,
         borderCollapse: "collapse",
     };
-    // 2. Outer TD style: Background and Border Radius (no border here)
+    // 2. Outer TD style: Background and Border Radius (no border here).
+    //    height is set so the TD occupies the full declared height.
     const outerTdStyle = Object.assign({ width: config.width, height: config.height, backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, 
         // Background Image styles
         backgroundImage: config.backgroundImage
             ? `url(${config.backgroundImage.src})`
             : undefined, backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat, backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size, backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position }, (config.borderRadius && { overflow: "hidden" }));
-    // 2b. Inner table style: Border and Border Radius
-    const innerTableStyle = Object.assign({ width: "100%", height: config.height, borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$3(config.border));
-    // 3. Inner TD style: Padding and Vertical Alignment
+    // 2b. Inner table style: Border and Border Radius.
+    //     height: 100% so it stretches to fill the outer TD's declared height.
+    const innerTableStyle = Object.assign({ width: "100%", height: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$5(config.border));
+    // 3. Inner TD style: Padding and Vertical Alignment only.
+    //    *** No height here. ***
+    //    The outer TD/table owns the height; padding is purely inner spacing,
+    //    so the total rendered height = declared height (padding is inside).
     const innerTdStyle = {
         padding: config.padding,
-        height: config.height,
+        // height intentionally omitted — setting it here would make browsers
+        // treat it as content-box height and add padding on top, causing the
+        // total to exceed the declared height in preview mode.
         verticalAlign: config.alignItems ? alignMap$2[config.alignItems] : "top",
     };
     // 4. Gap spacer style (used between children)
@@ -1689,7 +1896,7 @@ function Column({ children, config, devNode }) {
         width: "100%",
     };
     // Main content rendering
-    const renderContent = () => (jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", Object.assign({ style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap$2[config.alignItems] : "left" }, (config.height && { height: config.height }), { children: config.gap && numChildren > 1 ? (jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    const renderContent = () => (jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap$2[config.alignItems] : "left", children: config.gap && numChildren > 1 ? (jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
                             width: "100%",
                             borderCollapse: "collapse",
                         }, children: jsx("tbody", { children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsx("tr", { children: jsx("td", { style: {
@@ -1700,7 +1907,7 @@ function Column({ children, config, devNode }) {
                                                 ? vAlignMap[config.justifyContent]
                                                 : "top", align: config.alignItems
                                                 ? alignMap$2[config.alignItems]
-                                                : "left", children: child }) }), index < numChildren - 1 && (jsx("tr", { children: jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) })) }) }) }));
+                                                : "left", children: child }) }), index < numChildren - 1 && (jsx("tr", { children: jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) }) }) }) }));
     return (jsxs("table", Object.assign({ "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: Object.assign({ position: "relative" }, outerTableStyle) }, (config.height && { height: config.height }), { children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", Object.assign({ style: outerTdStyle }, (config.width && { width: config.width }), (config.height && { height: config.height }), { children: renderContent() })) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] })));
 }
 var Column_default = memo(Column, arePropsEqual);
@@ -1715,13 +1922,27 @@ const justifyMap$2 = {
     center: "center",
     end: "right",
 };
-function getBorderStyle$2(border) {
+function getBorderStyle$4(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
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
     if (border.top) {
         style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
     }
@@ -1796,7 +2017,7 @@ function Container({ children, config, devMode, devNode }) {
             ? `url(${config.backgroundImage.src})`
             : undefined, backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat, backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size, backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position }, (config.borderRadius && { overflow: "hidden" }));
     // 2. Border Table Style - Border and border radius
-    const borderTableStyle = Object.assign({ width: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$2(config.border));
+    const borderTableStyle = Object.assign({ width: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$4(config.border));
     // 3. Padding TD Style
     const innerTdStyle = {
         padding: config.padding,
@@ -1832,7 +2053,7 @@ function Container({ children, config, devMode, devNode }) {
                                     fontSize: "0",
                                     lineHeight: "0",
                                     height: config.gap,
-                                }, children: "\u00A0" }))] }, `child-${index}`), jsx("td", { className: "desktop-gap-column", width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
+                                }, children: "\u00A0" }))] }, `child-${index}`), jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
         }
         return (jsx("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: child }, `child-${index}`));
     });
@@ -1850,7 +2071,7 @@ function Container({ children, config, devMode, devNode }) {
 var Container_default = memo(Container, arePropsEqual);
 
 function Divider({ config, devNode }) {
-    const { height = "1px", color = "#cccccc", width = "100%", margin = "20px 0", align = "center", } = config;
+    const { height = "1px", color = "#cccccc", width = "100%", margin = "20px 0", align = "center", hideOnMobile, } = config;
     // 1. Outer TD Style: Applies the vertical spacing (margin)
     const outerTdStyle = {
         padding: margin,
@@ -1879,7 +2100,7 @@ function Divider({ config, devNode }) {
             // --- End dev
             width: "100%",
             borderCollapse: "collapse",
-        }, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: outerTdStyle, align: align, children: jsx("table", Object.assign({ "aria-label": "Divider Line", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: dividerTableStyle }, { height: dividerHeightAttribute }, { children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: {
+        }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: outerTdStyle, align: align, children: jsx("table", Object.assign({ "aria-label": "Divider Line", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: dividerTableStyle }, { height: dividerHeightAttribute }, { children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: {
                                             height: height,
                                             fontSize: "0",
                                             lineHeight: "0",
@@ -1888,24 +2109,58 @@ function Divider({ config, devNode }) {
 }
 var Divider_default = memo(Divider, arePropsEqual);
 
-function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", }) {
-    // 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 (jsxs(Fragment$1, { children: [fontFaceCss && (jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: fontFaceCss } })), msoComment && (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; 
@@ -1914,14 +2169,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) {
@@ -1930,7 +2179,22 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
                 max-width: 100% !important;
             }
         }
-
+        @media screen and (max-width: 768px) {
+          .hide-on-mobile {
+            display: none !important;
+            max-height: 0 !important;
+            overflow: hidden !important;
+            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;
@@ -1940,12 +2204,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;
@@ -1954,143 +2213,38 @@ 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) - Works for both wrapped and non-wrapped */
-          /* We target the inner table alignment */
-          .responsive-row[data-mobile-justify="center"] .content-table {
-            margin: 0 auto !important;
-            float: none !important;
-          }
-          .responsive-row[data-mobile-justify="start"] .content-table {
-            margin: 0 !important;
-            float: left !important;
-          }
-          .responsive-row[data-mobile-justify="end"] .content-table {
-            margin: 0 0 0 auto !important;
-            float: right !important;
-          }
-
-          /* Mobile justify for wrapped children - we need to target the outer wrapper td */
-          .responsive-row[data-mobile-wrap="true"][data-mobile-justify="center"] td[align] {
-            text-align: center !important;
-          }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-justify="start"] td[align] {
-            text-align: left !important;
-          }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-justify="end"] td[align] {
-            text-align: right !important;
-          }
-
-          /* Also apply to child content tables for better support */
-          .responsive-row[data-mobile-wrap="true"][data-mobile-justify="center"] .child-cell table {
-            margin-left: auto !important;
-            margin-right: auto !important;
-          }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-justify="start"] .child-cell table {
-            margin-left: 0 !important;
-            margin-right: auto !important;
-          }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-justify="end"] .child-cell table {
-            margin-left: auto !important;
-            margin-right: 0 !important;
-          }
-
-          /* 2. Handling Mobile Vertical Alignment (Align Items) */
-          /* For non-wrapped rows - controls vertical alignment when cells are side-by-side */
-          .responsive-row[data-mobile-align="center"]:not([data-mobile-wrap="true"]) .child-cell {
-            vertical-align: middle !important;
-          }
-          .responsive-row[data-mobile-align="start"]:not([data-mobile-wrap="true"]) .child-cell {
-            vertical-align: top !important;
-          }
-          .responsive-row[data-mobile-align="end"]:not([data-mobile-wrap="true"]) .child-cell {
-            vertical-align: bottom !important;
-          }
-
-          /* For wrapped rows - alignItems controls vertical alignment of content within each child cell */
-          .responsive-row[data-mobile-wrap="true"][data-mobile-align="center"] .child-cell {
-            vertical-align: middle !important;
-          }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-align="start"] .child-cell {
-            vertical-align: top !important;
-          }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-align="end"] .child-cell {
-            vertical-align: bottom !important;
-          }
-
-          /* 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"] > 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"] > 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"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell {
+          .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 and create vertical spacing with padding */
-          .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 {
+          .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 */
-          .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) {
+          .row-content-table[data-mobile-wrap="true"] > 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"] > 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"] > 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"] > 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"] > 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"] > 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"] > 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;
-          }
+          ${["10px", "15px", "20px", "24px", "30px", "40px", ...rowGaps]
+        .filter((gap, index, self) => self.indexOf(gap) === index)
+        .map((gap) => `
+              .row-content-table[data-mobile-wrap="true"][data-gap="${gap}"] > tbody > .content-tr > .child-cell:not(:last-child) {
+                margin-bottom: ${gap} !important;
+              }`)
+        .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;
@@ -2099,8 +2253,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;
@@ -2108,24 +2260,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;
@@ -2135,22 +2281,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 (jsxs("head", { children: [jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), jsx("title", { children: title }), jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } }), children] }));
+    return (jsxs("head", { children: [jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), jsx("title", { children: title }), fonts.flatMap((resolved) => resolved.fontProps.map((props, i) => (jsx(Font, Object.assign({}, props), `${resolved.family}-${props.fontWeight}-${props.fontStyle}-${i}`)))), children, jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), 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, } = 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";
@@ -2165,6 +2302,7 @@ function Heading({ config, devMode, children }) {
     const headingStyle = {
         color: color,
         textAlign: textAlign,
+        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -2173,11 +2311,11 @@ function Heading({ config, devMode, children }) {
         textTransform: textTransform,
         textDecoration: textDecoration,
         direction: direction,
+        wordBreak: wordBreak,
+        whiteSpace: whiteSpace,
         // 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",
     };
@@ -2212,61 +2350,196 @@ function Html({ children, backgroundColor = "#ffffff", }) {
     );
 }
 
-function Image({ config, devNode, devMode }) {
-    const { src, alt, width, height, maxHeight, maxWidth, backgroundColor, padding, borderRadius, href, target, } = config;
-    // 1. Image Style: Critical for compatibility, especially display: block
-    const imgStyle = {
-        // Basic image properties
-        display: "block", // Prevents extra vertical space/gaps below the image
-        objectFit: "cover", // For controlling how the image fits (modern CSS, may be ignored)
-        // Dimensions (using CSS fallback)
-        width: width || "100%",
-        height: height || "auto",
-        maxWidth: maxWidth || "100%",
-        maxHeight: maxHeight,
-        // Styling
-        border: "0", // Ensures no default browser/client border
-        borderRadius: borderRadius,
+/**
+ * Content rendered by Outlook Classic only.
+ * Outputs: <!--[if mso]> ... <![endif]-->
+ */
+function MsoOnly({ html }) {
+    return (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 (jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if !mso]><!-->${html}<!--<![endif]-->`,
+        } }));
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function getBorderStyle$3(border) {
+    if (!border)
+        return {};
+    const style = {};
+    if (border.width && border.style && border.color) {
+        style.border = `${border.width} ${border.style} ${border.color}`;
+    }
+    else {
+        const hasIndividual = border.top || border.right || border.bottom || border.left;
+        if (hasIndividual) {
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    if (border.top)
+        style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
+    if (border.right)
+        style.borderRight = `${border.right.width} ${border.right.style} ${border.right.color}`;
+    if (border.bottom)
+        style.borderBottom = `${border.bottom.width} ${border.bottom.style} ${border.bottom.color}`;
+    if (border.left)
+        style.borderLeft = `${border.left.width} ${border.left.style} ${border.left.color}`;
+    return style;
+}
+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,
     };
-    // 2. Link Style: Ensure no underline or color changes
+}
+// ---------------------------------------------------------------------------
+// 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);
+    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 = (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 = (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 ? (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.
-    jsxs("table", { "aria-label": `Image Wrapper for: ${alt}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            // --- Start dev
+    return (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: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: tdStyle, align: "center", children: content }) }) }), devMode && !!devNode && (jsx("tfoot", { children: jsx("tr", { children: 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 (jsxs(Fragment$1, { children: [renderDesktopTable({
+                config,
+                className: hasMobileOverrides || isHiddenOnMobile ? "hide-on-mobile" : undefined,
+                devNode,
+                devMode,
+            }), hasMobileOverrides && !devMode && (jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: { width: "100%", borderCollapse: "collapse" }, children: jsx("tbody", { children: jsx("tr", { children: jsx(NonMso, { html: buildMobileTableHTML({
+                                config,
+                                overrides: mobile,
+                                className: "hide-on-desktop",
+                            }) }) }) }) }))] }));
+}
 var Image_default = memo(Image, arePropsEqual);
 
 const justifyMap$1 = {
@@ -2279,13 +2552,27 @@ const alignMap = {
     center: "middle",
     end: "bottom",
 };
-function getBorderStyle$1(border) {
+function getBorderStyle$2(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
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
     if (border.top) {
         style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
     }
@@ -2300,23 +2587,50 @@ function getBorderStyle$1(border) {
     }
     return style;
 }
-function Row({ children, config, devNode }) {
-    var _a, _b, _c, _d, _e, _f;
+function getHrefFromInnerLink(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return undefined;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : undefined;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : undefined;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : undefined;
+        case "page_top":
+            return "#";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return undefined;
+    }
+}
+function Row({ children, config, devNode, devMode }) {
+    var _a, _b, _c, _d, _e, _f, _g;
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
     const numChildren = childrenArray.length;
-    // 1. Outer TD for Background and Border Radius (no border here)
+    const href = getHrefFromInnerLink(config.innerLink);
+    const target = (_a = config.innerLink) === null || _a === void 0 ? void 0 : _a.target;
+    // 1. Outer TD for Background and Border Radius (no border here).
+    //    height declared here is the *total* outer height.
     const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height, 
         // Background Image styles
         backgroundImage: config.backgroundImage
             ? `url(${config.backgroundImage.src})`
-            : undefined, backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat, backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size, backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position }, (config.borderRadius && { overflow: "hidden" }));
-    // 2. Inner Table for Border and Border Radius
-    const borderTableStyle = Object.assign({ width: "100%", height: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$1(config.border));
-    // 3. TD for Padding
+            : undefined, backgroundRepeat: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.repeat, backgroundSize: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.size, backgroundPosition: (_d = config.backgroundImage) === null || _d === void 0 ? void 0 : _d.position }, (config.borderRadius && { overflow: "hidden" }));
+    // 2. Inner Table for Border and Border Radius.
+    //    height: 100% so it stretches to fill the outer TD.
+    const borderTableStyle = Object.assign({ width: "100%", height: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$2(config.border));
+    // 3. TD for Padding only — no height.
+    //    The outer TD owns the total height; setting height here would cause
+    //    browsers/email clients to treat it as content-box height and add
+    //    padding on top, making the row taller than the declared height.
     const paddingTdStyle = {
         padding: config.padding,
         width: "100%",
-        height: "100%",
+        // height intentionally omitted — padding must be inner, not additive
         verticalAlign: "top",
     };
     // 4. Content Table - horizontal layout
@@ -2337,32 +2651,56 @@ function Row({ children, config, devNode }) {
         ? justifyMap$1[config.justifyContent]
         : "left";
     const tdValign = config.alignItems ? alignMap[config.alignItems] : "top";
-    return (jsxs("table", Object.assign({ "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    // Content to render - wrapped in anchor if innerLink is defined
+    const content = (jsxs("table", Object.assign({ "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             position: "relative",
             width: config.width || "100%",
             height: config.height,
             borderCollapse: "collapse",
-        } }, (config.height && { height: config.height }), { "data-mobile-justify": (_d = config.mobile) === null || _d === void 0 ? void 0 : _d.justifyContent, "data-mobile-align": (_e = config.mobile) === null || _e === void 0 ? void 0 : _e.alignItems, "data-mobile-wrap": ((_f = config.mobile) === null || _f === void 0 ? void 0 : _f.wrap) ? "true" : undefined, "data-gap": config.gap, className: "responsive-row", children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", Object.assign({ style: backgroundTdStyle }, (config.height && { height: config.height }), { children: jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: paddingTdStyle, children: jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+        } }, (config.height && { height: config.height }), { children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", Object.assign({ style: backgroundTdStyle }, (config.height && { height: config.height }), { children: jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: paddingTdStyle, children: jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
                                                 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 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: {
+                                            }, 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", "data-mobile-justify": (_e = config.mobile) === null || _e === void 0 ? void 0 : _e.justifyContent, "data-mobile-align": (_f = config.mobile) === null || _f === void 0 ? void 0 : _f.alignItems, "data-mobile-wrap": ((_g = config.mobile) === null || _g === void 0 ? void 0 : _g.wrap) ? "true" : undefined, "data-gap": config.gap, 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",
                                                                                     margin: "0",
                                                                                 }, className: "child-cell", children: child }), index < numChildren - 1 &&
                                                                                 config.gap && (jsx("td", { width: config.gap, style: gapTdStyle, className: "row-gap-td", children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) })) }) }) }) }) }) }) }) }) })) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] })));
+    // Wrap in anchor tag if innerLink is defined and NOT in dev mode
+    if (href && !devMode) {
+        return (jsx("a", Object.assign({ href: href }, (target && { target }), { style: {
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+            }, children: content })));
+    }
+    return content;
 }
 var Row_default = memo(Row, arePropsEqual);
 
-function getBorderStyle(border) {
+function getBorderStyle$1(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
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
     if (border.top) {
         style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
     }
@@ -2380,7 +2718,7 @@ function getBorderStyle(border) {
 const Section = ({ config, children, devNode, }) => {
     var _a, _b, _c;
     const { sectionType, padding } = config;
-    return (jsxs("table", { "aria-label": `Section |Table | ${sectionType}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: Object.assign(Object.assign({ position: "relative", width: "100%", backgroundColor: config.backgroundColor }, getBorderStyle(config.border)), { backgroundImage: config.backgroundImage
+    return (jsxs("table", { "aria-label": `Section |Table | ${sectionType}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: Object.assign(Object.assign({ position: "relative", width: "100%", backgroundColor: config.backgroundColor }, getBorderStyle$1(config.border)), { backgroundImage: config.backgroundImage
                 ? `url(${config.backgroundImage.src})`
                 : undefined, backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat, backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size, backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position }), children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: {
                             padding: padding,
@@ -2397,7 +2735,7 @@ const Section = ({ config, children, devNode, }) => {
 var Section_default = memo(Section, arePropsEqual);
 
 function Spacer({ config, devNode }) {
-    const { height } = config;
+    const { height, hideOnMobile } = config;
     // 1. Spacer Table Style
     const spacerTableStyle = {
         // Crucial for compatibility: Ensures no background or border interference
@@ -2405,7 +2743,6 @@ function Spacer({ config, devNode }) {
         borderCollapse: "collapse",
         border: "0",
         width: "100%",
-        // ✅ FIX: Use string literal indexing for MSO properties
         // Note the CSS standard dash convention: 'mso-table-lspace'
         // ["mso-table-lspace" as string]: "0pt",
         ["msoTableLspace"]: "0pt",
@@ -2426,14 +2763,14 @@ function Spacer({ config, devNode }) {
     // Outer table ensures the spacer spans the full width of its container
     jsxs("table", Object.assign({ "aria-label": "Vertical Spacer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: Object.assign({ 
             // --- Start dev
-            position: "relative" }, spacerTableStyle) }, { height: spacerHeightAttribute }, { children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: spacerTdStyle, 
+            position: "relative" }, spacerTableStyle) }, { height: spacerHeightAttribute }, { className: hideOnMobile ? "hide-on-mobile" : undefined, children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: spacerTdStyle, 
                         // Explicit height attribute
                         height: spacerHeightAttribute, children: "\u00A0" }) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] })));
 }
 var Spacer_default = 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, } = 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,
@@ -2445,6 +2782,7 @@ function Text({ config, devMode, children }) {
     const contentStyle = {
         color: color,
         textAlign: textAlign,
+        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -2456,9 +2794,9 @@ function Text({ config, devMode, children }) {
         verticalAlign: verticalAlign,
         opacity: opacity,
         whiteSpace: whiteSpace,
+        wordBreak: wordBreak,
         margin: "0",
         padding: "0",
-        fontFamily: "Arial, Helvetica, sans-serif",
     };
     // Determine content to render
     const content = text !== null && text !== void 0 ? text : children;
@@ -2476,18 +2814,96 @@ const justifyMap = {
     center: "center",
     end: "right",
 };
+function getBorderStyle(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
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
+    if (border.top) {
+        style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
+    }
+    if (border.right) {
+        style.borderRight = `${border.right.width} ${border.right.style} ${border.right.color}`;
+    }
+    if (border.bottom) {
+        style.borderBottom = `${border.bottom.width} ${border.bottom.style} ${border.bottom.color}`;
+    }
+    if (border.left) {
+        style.borderLeft = `${border.left.width} ${border.left.style} ${border.left.color}`;
+    }
+    return style;
+}
+function getBorderStyleString(border) {
+    if (!border)
+        return "";
+    const styles = [];
+    // If a full border is specified, apply it
+    if (border.width && border.style && border.color) {
+        styles.push(`border: ${border.width} ${border.style} ${border.color};`);
+    }
+    else {
+        // If only individual borders are specified
+        const hasIndividualBorders = border.top || border.right || border.bottom || border.left;
+        if (hasIndividualBorders) {
+            // Default all borders to none
+            styles.push("border-top: none;");
+            styles.push("border-right: none;");
+            styles.push("border-bottom: none;");
+            styles.push("border-left: none;");
+        }
+    }
+    // Override with specific borders if provided
+    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(" ");
+}
 // Helper to build Iconify API URL
 function buildIconifyUrl(config) {
     const { iconIdentifier, height = 24, color = "000000", rotate = 0, rotateOrientation = "cw", } = config;
     if (!iconIdentifier)
         return null;
+    // Parse height to extract numeric value
+    const parseHeight = (h) => {
+        if (typeof h === "number")
+            return h;
+        // Extract numeric value from string (e.g., "24px" -> 24)
+        const match = String(h).match(/^(-?\d*\.?\d+)/);
+        return match ? parseFloat(match[1]) : 24;
+    };
+    const numericHeight = parseHeight(height);
     // Remove # from color if present
     const cleanColor = color.replace("#", "");
     // Build URL from template
     const template = process.env.ICONIFY_API_IMAGE_URI ||
         "https://iconify.pagenflow.com/api/image/{{height}}/{{color}}/{{rotate}}-{{rotate-orientation}}/{{icon-full-name}}.png";
     return template
-        .replace("{{height}}", String(Number(height) * Number(2)))
+        .replace("{{height}}", String(numericHeight * 2))
         .replace("{{color}}", cleanColor)
         .replace("{{rotate}}", String(rotate))
         .replace("{{rotate-orientation}}", rotateOrientation)
@@ -2517,12 +2933,15 @@ function buildLinkHref(innerLink) {
 function Icon({ config, devNode, devMode, children }) {
     const { 
     // base64Source,
-    width, height, backgroundColor, padding = "0", borderRadius = "0", innerLink, justifyContent = "center", } = config;
+    width, height, backgroundColor, padding = "0", borderRadius = "0", border, innerLink, justifyContent = "center", } = config;
     // Determine icon source
     const iconSrc = buildIconifyUrl(config);
     const href = buildLinkHref(innerLink);
     const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_self";
     const align = justifyMap[justifyContent];
+    // Get border styles
+    const borderStyle = getBorderStyle(border);
+    const borderStyleString = getBorderStyleString(border);
     // Convert width/height to string with px if number
     const widthStr = typeof width === "number" ? `${width}px` : width;
     const heightStr = typeof height === "number" ? `${height}px` : height;
@@ -2543,6 +2962,7 @@ function Icon({ config, devNode, devMode, children }) {
         border: 0, // No default border
         width: widthStr || "auto",
         height: heightStr || "auto",
+        objectFit: "contain",
     };
     // 2. Link Style: No underline or color changes
     const linkStyle = {
@@ -2551,14 +2971,21 @@ function Icon({ config, devNode, devMode, children }) {
         border: 0,
         outline: "none",
     };
-    // 3. TD Style: Padding and background
-    const tdStyle = {
-        padding: padding,
+    // 3. Outer TD Style: Background and border-radius wrapper with border
+    const outerTdStyle = {
         backgroundColor: backgroundColor,
-        fontSize: "0", // CRITICAL: Collapses extra space
-        lineHeight: "0", // CRITICAL: Collapses extra space7
         borderRadius: borderRadius,
         overflow: "hidden",
+        fontSize: "0",
+        lineHeight: "0",
+    };
+    // 4. Inner Table Style: Apply border here with border-collapse: separate
+    const innerTableStyle = Object.assign({ width: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: borderRadius }, borderStyle);
+    // 5. Inner TD Style: Padding
+    const innerTdStyle = {
+        padding: padding,
+        fontSize: "0", // CRITICAL: Collapses extra space
+        lineHeight: "0", // CRITICAL: Collapses extra space
     };
     // --- VML Calculation for Outlook Compatibility ---
     const numericPadding = parseInt(padding.split(" ")[0] || "0", 10);
@@ -2575,15 +3002,19 @@ function Icon({ config, devNode, devMode, children }) {
     const arcsize = numericBorderRadius > 0
         ? Math.min((numericBorderRadius / Math.min(vmlWidth, vmlHeight)) * 100, 100)
         : 0;
+    // VML stroke color for border
+    const vmlStrokeColor = (border === null || border === void 0 ? void 0 : border.color) || vmlFillColor;
+    const vmlStrokeWeight = (border === null || border === void 0 ? void 0 : border.width) ? parseInt(border.width, 10) : 0;
+    const hasVmlStroke = vmlStrokeWeight > 0;
     // Build VML code for Outlook
     const vmlIcon = backgroundColor && numericBorderRadius > 0
         ? `
     <!--[if mso]>
-    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" ${href && !devMode ? `href="${href}"` : ""} style="height:${vmlHeight}px;width:${vmlWidth}px;v-text-anchor:middle;" arcsize="${arcsize}%" stroke="false" fillcolor="${vmlFillColor}">
+    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" ${href && !devMode ? `href="${href}"` : ""} style="height:${vmlHeight}px;width:${vmlWidth}px;v-text-anchor:middle;" arcsize="${arcsize}%" ${hasVmlStroke ? `strokecolor="${vmlStrokeColor}" strokeweight="${vmlStrokeWeight}px"` : 'stroke="false"'} fillcolor="${vmlFillColor}">
       <w:anchorlock/>
       <v:textbox inset="0,0,0,0" style="text-align: center;">
         <center style="padding:${padding};">
-          <img src="${iconSrc || ""}" alt="" width="${widthNum || 24}" height="${heightNum || 24}" border="0" style="display:block;border:0;" />
+          <img src="${iconSrc || ""}" alt="" width="${widthNum || 24}" height="${heightNum || 24}" border="0" style="display:block;border:0;object-fit:contain;" />
         </center>
       </v:textbox>
     </v:roundrect>
@@ -2595,8 +3026,7 @@ function Icon({ config, devNode, devMode, children }) {
         return null;
     }
     // Icon image element
-    const iconElement = devMode && !!children ? (children) : iconSrc ? (jsx("img", { draggable: false, src: iconSrc, alt: "" // Icons are decorative, empty alt is appropriate
-        , style: imgStyle, width: widthNum, height: heightNum, border: 0 })) : (jsx(Fragment$1, {}));
+    const iconElement = devMode && !!children ? (children) : iconSrc ? (jsx("img", { draggable: false, src: iconSrc, alt: "", style: imgStyle, width: widthNum, height: heightNum, border: 0 })) : (jsx(Fragment$1, {}));
     // Wrap in link if href exists and not in dev mode
     const content = href && !devMode ? (jsx("a", Object.assign({ href: href, target: target, style: linkStyle }, (target === "_blank" ? { rel: "noopener noreferrer" } : {}), { children: iconElement }))) : (iconElement);
     // Build the HTML content with VML support (only when NOT in dev mode)
@@ -2608,12 +3038,20 @@ function Icon({ config, devNode, devMode, children }) {
     <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
       <tbody>
         <tr>
-          <td style="background-color: ${backgroundColor}; border-radius: ${borderRadius}; padding: ${padding}; font-size: 0; line-height: 0; overflow: hidden;">
-            ${href
+          <td style="background-color: ${backgroundColor}; border-radius: ${borderRadius}; overflow: hidden; font-size: 0; line-height: 0;">
+            <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; border-spacing: 0; border-radius: ${borderRadius}; width: 100%; ${borderStyleString}">
+              <tbody>
+                <tr>
+                  <td style="padding: ${padding}; font-size: 0; line-height: 0;">
+                    ${href
             ? `<a href="${href}" target="${target}" style="display:block;text-decoration:none;border:0;outline:none;" ${target === "_blank" ? 'rel="noopener noreferrer"' : ""}>
-                   <img draggable="false" src="${iconSrc}" alt="" width="${widthNum || 24}" height="${heightNum || 24}" border="0" style="display:block;border:0;width:${widthStr || "auto"};height:${heightStr || "auto"};" />
-                 </a>`
-            : `<img draggable="false" src="${iconSrc}" alt="" width="${widthNum || 24}" height="${heightNum || 24}" border="0" style="display:block;border:0;width:${widthStr || "auto"};height:${heightStr || "auto"};" />`}
+                           <img draggable="false" src="${iconSrc}" alt="" width="${widthNum || 24}" height="${heightNum || 24}" border="0" style="display:block;border:0;width:${widthStr || "auto"};height:${heightStr || "auto"};object-fit:contain;" />
+                         </a>`
+            : `<img draggable="false" src="${iconSrc}" alt="" width="${widthNum || 24}" height="${heightNum || 24}" border="0" style="display:block;border:0;width:${widthStr || "auto"};height:${heightStr || "auto"};object-fit:contain;" />`}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </td>
         </tr>
       </tbody>
@@ -2625,7 +3063,7 @@ function Icon({ config, devNode, devMode, children }) {
             // --- Start dev
             position: "relative",
             // --- End dev
-            width: widthStr || "auto",
+            width: "auto",
             borderCollapse: "collapse",
             // base
             boxSizing: "border-box",
@@ -2634,9 +3072,9 @@ function Icon({ config, devNode, devMode, children }) {
             padding: 0,
         }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: [jsx("tbody", { children: jsx("tr", { children: useVML ? (jsx("td", { dangerouslySetInnerHTML: {
                             __html: htmlContent !== null && htmlContent !== void 0 ? htmlContent : "",
-                        } })) : (jsx("td", { style: tdStyle, align: align, children: content })) }) }), devMode && !!devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }));
+                        } })) : (jsx("td", { style: outerTdStyle, align: align, children: jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: innerTdStyle, align: align, children: content }) }) }) }) })) }) }), devMode && !!devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] }));
 }
 var Icon_default = memo(Icon, arePropsEqual);
 
-export { Body, Button_default as Button, Column_default as Column, Container_default as Container, Divider_default as Divider, Head, Heading_default as Heading, Html, Icon_default as Icon, Image_default as Image, Row_default as Row, Section_default as Section, Spacer_default as Spacer, Text_default as Text };
+export { Body, Button_default as Button, Column_default as Column, Container_default as Container, Divider_default as Divider, Font, Head, Heading_default as Heading, Html, Icon_default as Icon, Image_default as Image, MsoOnly, NonMso, Row_default as Row, Section_default as Section, Spacer_default as Spacer, Text_default as Text };
 //# sourceMappingURL=index.esm.js.map