@pagenflow/email 1.3.6 → 1.3.7

package/dist/index.esm.js

@@ -1529,80 +1529,235 @@ 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$1(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;
+    color = "#ffffff", padding = "12px 24px", borderRadius = "3px", border, width, maxWidth, justifyContent = "center", textAlign = "center", fontSize = "16px", fontWeight = "500", fontStyle, lineHeight = "1.2", letterSpacing, textTransform, textDecoration = "none", fontFamily = "Arial, sans-serif", whiteSpace = "normal", } = config;
     // 1. Link (A) Tag Styles (Fallback for Webmail/Mobile)
     const linkStyle = {
         display: "block",
         wordBreak: "break-word"};
     // 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$1(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};` : "";
+        // 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:${fontFamily};font-size:${fontSize};font-weight:${vmlFontWeight};${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}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};` : "";
+        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: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyleProp} line-height: ${lineHeight}; ${letterSpacingProp} ${textTransformProp} text-align: ${textAlign}; ${whiteSpaceProp} mso-line-height-rule: exactly;">
+                  ${typeof children === "string" ? children : ""}
+                </a>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+    <![endif]-->
+  `;
+    }
     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="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyle ? `font-style: ${fontStyle};` : ""} line-height: ${lineHeight}; ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ""} ${textTransform ? `text-transform: ${textTransform};` : ""} ${textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : ""} ${whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : ""} display: ${linkStyle.display}; text-align: ${textAlign}; word-break: ${linkStyle.wordBreak}; padding: ${padding};">
                               ${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="color: ${color}; ${textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : "text-decoration: none;"} display: ${linkStyle.display}; word-break: ${linkStyle.wordBreak}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyle ? `font-style: ${fontStyle};` : ""} line-height: ${lineHeight}; ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ""} ${textTransform ? `text-transform: ${textTransform};` : ""} text-align: ${textAlign}; ${whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : ""} padding: ${padding};">
+                              <span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; ${fontStyle ? `font-style: ${fontStyle};` : ""} line-height: ${lineHeight}; ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ""} ${textTransform ? `text-transform: ${textTransform};` : ""} ${textDecoration && textDecoration !== "none" ? `text-decoration: ${textDecoration};` : ""} ${whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : ""}">
                                 ${typeof children === "string" ? children : ""}
                               </span>
                             </a>`}
@@ -1616,7 +1771,7 @@ function Button({ config, devMode }) {
       </table>
       <!--<![endif]-->
     `,
-                    } }) }) }) }));
+                                    } }) }) }) }) }) }) }) }));
 }
 var Button_default = memo(Button, arePropsEqual);
 
@@ -1633,15 +1788,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 +1828,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 +1864,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 +1875,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 +1890,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 +1985,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,
@@ -1850,7 +2039,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 +2068,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,7 +2077,7 @@ function Divider({ config, devNode }) {
 }
 var Divider_default = memo(Divider, arePropsEqual);
 
-function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", }) {
+function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", rowGaps = [], }) {
     // Outlook (MSO) Styles and Reset
     const msoResetStyles = `
         /* Forces Outlook to render 100% width and prevents line-height issues */
@@ -1931,6 +2120,15 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
             }
         }
 
+        @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 (max-width: 768px) {
             .stack-td {
                 width: 100% !important;
@@ -1956,121 +2154,71 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
         }
 
         @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 {
+          /* 1. Handling Mobile Alignment (Justify) */
+          .row-content-table[data-mobile-justify="center"] {
             margin: 0 auto !important;
             float: none !important;
           }
-          .responsive-row[data-mobile-justify="start"] .content-table {
+          .row-content-table[data-mobile-justify="start"] {
             margin: 0 !important;
             float: left !important;
           }
-          .responsive-row[data-mobile-justify="end"] .content-table {
+          .row-content-table[data-mobile-justify="end"] {
             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 {
+          .row-content-table[data-mobile-align="center"] .child-cell {
             vertical-align: middle !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-align="start"] .child-cell {
+          .row-content-table[data-mobile-align="start"] .child-cell {
             vertical-align: top !important;
           }
-          .responsive-row[data-mobile-wrap="true"][data-mobile-align="end"] .child-cell {
+          .row-content-table[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 {
+          /* Force table to be full width */
+          .row-content-table[data-mobile-wrap="true"] {
             width: 100% !important;
             max-width: 100% !important;
           }
           
           /* Force table row to stack cells */
-          .responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr {
+          .row-content-table[data-mobile-wrap="true"] > 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-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 {
+          /* Hide horizontal gap cells */
+          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .row-gap-td {
             display: none !important;
             width: 0 !important;
             height: 0 !important;
           }
           
           /* Add vertical spacing between stacked cells using margin */
-          .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")}
         }
         
         /* ================================================= */
@@ -2150,7 +2298,7 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
 }
 
 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, 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";
@@ -2173,6 +2321,8 @@ 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",
@@ -2212,22 +2362,53 @@ function Html({ children, backgroundColor = "#ffffff", }) {
     );
 }
 
+function getBorderStyle$3(border) {
+    if (!border)
+        return {};
+    const style = {};
+    // If a full border is specified, apply it
+    if (border.width && border.style && border.color) {
+        style.border = `${border.width} ${border.style} ${border.color}`;
+    }
+    else {
+        // If only individual borders are specified, explicitly set others to 'none'
+        // to prevent Outlook Classic from showing black borders
+        const hasIndividualBorders = border.top || border.right || border.bottom || border.left;
+        if (hasIndividualBorders) {
+            // Default all borders to none
+            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 Image({ config, devNode, devMode }) {
-    const { src, alt, width, height, maxHeight, maxWidth, backgroundColor, padding, borderRadius, href, target, } = config;
+    const { src, alt, width, height, maxHeight, maxWidth, backgroundColor, padding, borderRadius, border, href, target, } = config;
+    // Get border styles
+    const borderStyle = getBorderStyle$3(border);
     // 1. Image Style: Critical for compatibility, especially display: block
-    const imgStyle = {
+    const imgStyle = Object.assign({ 
         // 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)
+        display: "block", objectFit: "cover", 
         // Dimensions (using CSS fallback)
-        width: width || "100%",
-        height: height || "auto",
-        maxWidth: maxWidth || "100%",
-        maxHeight: maxHeight,
+        width: width || "100%", height: height || "auto", maxWidth: maxWidth || "100%", maxHeight: maxHeight, 
         // Styling
-        border: "0", // Ensures no default browser/client border
-        borderRadius: borderRadius,
-    };
+        border: "0", borderRadius: borderRadius }, borderStyle);
     // 2. Link Style: Ensure no underline or color changes
     const linkStyle = {
         display: "block",
@@ -2279,13 +2460,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 +2495,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 +2559,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 +2626,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 +2643,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 +2651,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 +2671,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, 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,
@@ -2456,6 +2701,7 @@ function Text({ config, devMode, children }) {
         verticalAlign: verticalAlign,
         opacity: opacity,
         whiteSpace: whiteSpace,
+        wordBreak: wordBreak,
         margin: "0",
         padding: "0",
         fontFamily: "Arial, Helvetica, sans-serif",
@@ -2476,18 +2722,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 +2841,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 +2870,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 +2879,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 +2910,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 +2934,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 +2946,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 +2971,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,7 +2980,7 @@ 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);