npm - @pagenflow/email - Versions diffs - 1.4.0 → 1.4.2 - Mend

@pagenflow/email 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/components/Body.d.ts +1 -0
package/dist/components/Head.d.ts +2 -2
package/dist/components/HeadDev.d.ts +1 -1
package/dist/components/Image.d.ts +6 -8
package/dist/components/Row.d.ts +10 -0
package/dist/components/Text.d.ts +1 -0
package/dist/index.cjs.js +120 -197
package/dist/index.cjs.js.map +1 -1
package/dist/index.esm.js +120 -197
package/dist/index.esm.js.map +1 -1
package/dist/types/ResolvedFont.d.ts +7 -0
package/package.json +1 -1

package/dist/components/Body.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export interface GlobalConfig {
     fontSize?: string;
     backgroundColor?: string;
     lineHeight?: string;
+    fontFamily?: string;
     backgroundImage?: {
         src?: string;
         repeat?: string;

package/dist/components/Head.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import type { ResolvedFont } from "@/lib/email-fonts/loadEmailFonts";
+import ResolvedFont from "../types/ResolvedFont";
 export interface HeadProps {
     /** Additional elements like custom <style> blocks, <title>, etc. */
     children?: ReactNode;
@@ -16,7 +16,7 @@ export interface HeadProps {
      *
      * Example:
      *   const { resolved } = await loadEmailFonts(
-     *     extractFontFamilies(tree)
+     *     extractFontFamilies(doc)
      *   );
      *   <Head fonts={resolved} ... />
      */

package/dist/components/HeadDev.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ResolvedFont } from "@/lib/email-fonts/loadEmailFonts";
 import { ReactNode } from "react";
+import ResolvedFont from "../types/ResolvedFont";
 export interface HeadDevProps {
     /** Additional elements like custom <style> blocks, <title>, etc. */
     children?: ReactNode;

package/dist/components/Image.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { BorderConfig } from "../types";
-/** Style-only mobile overrides. Content props (src, alt, href, target) are excluded. */
 export interface ImageMobileConfig {
     width?: string;
     height?: string;
@@ -10,7 +9,8 @@ export interface ImageMobileConfig {
     padding?: string;
     borderRadius?: string;
     border?: BorderConfig;
-    /** When true, the mobile version of the image is not rendered at all. */
+    objectFit?: CSSProperties["objectFit"];
+    objectPosition?: string;
     hidden?: boolean;
 }
 export interface ImageConfig {
@@ -26,17 +26,15 @@ export interface ImageConfig {
     border?: BorderConfig;
     href?: string;
     target?: string;
-    /**
-     * Mobile-specific style overrides.
-     * Only explicitly set properties override the desktop value on mobile.
-     * Unset properties fall back to the desktop value.
-     */
+    objectFit?: CSSProperties["objectFit"];
+    objectPosition?: string;
     mobile?: ImageMobileConfig;
 }
 export type ImageProps = {
     config: ImageConfig;
     devNode?: ReactNode;
     devMode?: boolean;
+    previewMode?: boolean;
 };
 declare function Image({ config, devNode, devMode }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Image>;

package/dist/components/Row.d.ts CHANGED Viewed

@@ -13,6 +13,16 @@ export interface RowConfig {
     alignItems?: AlignItems;
     width?: string;
     height?: string;
+    /**
+     * When true, the content table uses width:100% so Outlook Classic has a
+     * hard boundary and text children can wrap correctly.
+     * Use this for rows that contain text blocks alongside images.
+     *
+     * When false/undefined (default), the content table uses width:auto so
+     * children shrink-wrap to their natural sizes — preserving the original
+     * behavior. Use this for icon rows, button rows, social link rows.
+     */
+    fillWidth?: boolean;
     padding?: string;
     backgroundColor?: string;
     backgroundImage?: BackgroundImageType;

package/dist/components/Text.d.ts CHANGED Viewed

@@ -36,6 +36,7 @@ export interface TextConfig {
     whiteSpace?: string;
     /** Word break behavior (e.g., 'break-all', 'break-word', 'keep-all', 'normal'). */
     wordBreak?: string;
+    maxWidth?: string;
 }
 export type TextProps = {
     config: TextConfig;

package/dist/index.cjs.js CHANGED Viewed

@@ -10,20 +10,14 @@ function Body({ children, config = {} }) {
     const globalFontSize = config.fontSize || "16px";
     const globalBackgroundColor = config.backgroundColor || "#ffffff";
     const globalLineHeight = config.lineHeight || "1.4";
+    const globalFontFamily = config.fontFamily || "Arial, Helvetica, sans-serif";
     // Background image properties
     const bgImage = ((_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.src) || "";
     const bgRepeat = ((_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.repeat) || "no-repeat";
     const bgSize = ((_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.size) || "cover";
     const bgPosition = ((_d = config.backgroundImage) === null || _d === void 0 ? void 0 : _d.position) || "center";
     // 1. Style for the <body> tag inline
-    const bodyStyle = Object.assign({ backgroundColor: globalBackgroundColor, color: globalColor, fontSize: globalFontSize, lineHeight: globalLineHeight, padding: "0", margin: "0", WebkitTextSizeAdjust: "100%", overflowX: "hidden",
-        // ✅ FIX 1: Use string indexing for MSO property
-        // ['ms-text-size-adjust' as string]: '100%',
-        ["msTextSizeAdjust"]: "100%",
-        // ["mso-line-height-rule" as string]: "exactly",
-        ["msoLineHeightRule"]: "exactly",
-        // Base font for body
-        fontFamily: "Arial, Helvetica, sans-serif" }, (bgImage && {
+    const bodyStyle = Object.assign({ backgroundColor: globalBackgroundColor, color: globalColor, fontSize: globalFontSize, lineHeight: globalLineHeight, padding: "0", margin: "0", WebkitTextSizeAdjust: "100%", overflowX: "hidden", ["msTextSizeAdjust"]: "100%", ["msoLineHeightRule"]: "exactly", fontFamily: globalFontFamily }, (bgImage && {
         backgroundImage: `url(${bgImage})`,
         backgroundRepeat: bgRepeat,
         backgroundSize: bgSize,
@@ -32,14 +26,10 @@ function Body({ children, config = {} }) {
     // 2. Style for the top-level <table> wrapper
     const outerTableStyle = {
         width: "100%",
-        // ✅ FIX 1 (on table): Use string indexing for MSO property
         ["msoLineHeightRule"]: "exactly",
-        // ['mso-line-height-rule' as string]: 'exactly',
         borderCollapse: "collapse",
     };
-    return (
-    // The <body> tag with inline styles
-    jsxRuntime.jsxs("body", { style: bodyStyle, children: [jsxRuntime.jsx("center", { style: Object.assign({ width: "100%", background: globalBackgroundColor }, (bgImage && {
+    return (jsxRuntime.jsxs("body", { style: bodyStyle, children: [jsxRuntime.jsx("center", { style: Object.assign({ width: "100%", background: globalBackgroundColor }, (bgImage && {
                     backgroundImage: `url(${bgImage})`,
                     backgroundRepeat: bgRepeat,
                     backgroundSize: bgSize,
@@ -1681,9 +1671,12 @@ function Button({ config, devMode }) {
         else {
             vmlAlignStyle = `text-align:${textAlign};`;
         }
+        // Border radius is intentionally omitted (arcsize="0%") for Outlook Classic.
+        // Outlook Classic does not reliably support rounded corners and the result
+        // is inconsistent, so we render sharp corners there instead.
         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;width:${vmlWidth}px;" arcsize="${Math.min((parseInt(borderRadius) / vmlHeight) * 100, 50)}%" strokecolor="${vmlStrokeColor}" ${hasVmlStroke ? `strokeweight="${vmlStrokeWeight}px"` : 'stroke="f"'} 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="0%" strokecolor="${vmlStrokeColor}" ${hasVmlStroke ? `strokeweight="${vmlStrokeWeight}px"` : 'stroke="f"'} fillcolor="${vmlFillColor}">
       <w:anchorlock/>
       <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;">
@@ -1716,6 +1709,9 @@ function Button({ config, devMode }) {
         const directionProp = direction ? `direction: ${direction};` : "";
         const opacityProp = opacity !== undefined ? `opacity: ${opacity};` : "";
         const wordBreakProp = wordBreak !== "break-word" ? `word-break: ${wordBreak};` : "";
+        // Border radius is intentionally omitted from the Outlook Classic table cell.
+        // Outlook Classic ignores border-radius on table cells anyway, and including it
+        // can cause unexpected rendering artifacts, so we explicitly leave it out.
         simpleOutlookButton = `
     <!--[if mso]>
     <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse;">
@@ -1723,7 +1719,7 @@ function Button({ config, devMode }) {
         <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}">
+              <td bgcolor="${backgroundColor}" align="${textAlign}" style="padding: ${padding}; text-align: ${textAlign}; ${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>
@@ -2352,28 +2348,6 @@ function Html({ children, backgroundColor = "#ffffff", }) {
     );
 }
-/**
- * Content rendered by Outlook Classic only.
- * Outputs: <!--[if mso]> ... <![endif]-->
- */
-function MsoOnly({ html }) {
-    return (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
-            __html: `<!--[if mso]>${html}<![endif]-->`,
-        } }));
-}
-/**
- * Content hidden from Outlook Classic, visible in all other clients.
- * Outputs: <!--[if !mso]><!--> ... <!--<![endif]-->
- */
-function NonMso({ html }) {
-    return (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
-            __html: `<!--[if !mso]><!-->${html}<!--<![endif]-->`,
-        } }));
-}
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
 function getBorderStyle$3(border) {
     if (!border)
         return {};
@@ -2381,15 +2355,6 @@ function getBorderStyle$3(border) {
     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)
@@ -2404,143 +2369,87 @@ function getBorderStyleString$1(border) {
     if (!border)
         return "";
     const styles = [];
+    // Standard shorthand
     if (border.width && border.style && border.color) {
-        styles.push(`border:${border.width} ${border.style} ${border.color};`);
+        styles.push(`border:${border.width} ${border.style} ${border.color} !important;`);
     }
     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 desktop had a border and mobile wants "none", we must explicitly kill it
+        styles.push(`border: none !important;`);
     }
+    // Individual sides
     if (border.top)
-        styles.push(`border-top:${border.top.width} ${border.top.style} ${border.top.color};`);
+        styles.push(`border-top:${border.top.width} ${border.top.style} ${border.top.color} !important;`);
     if (border.right)
-        styles.push(`border-right:${border.right.width} ${border.right.style} ${border.right.color};`);
+        styles.push(`border-right:${border.right.width} ${border.right.style} ${border.right.color} !important;`);
     if (border.bottom)
-        styles.push(`border-bottom:${border.bottom.width} ${border.bottom.style} ${border.bottom.color};`);
+        styles.push(`border-bottom:${border.bottom.width} ${border.bottom.style} ${border.bottom.color} !important;`);
     if (border.left)
-        styles.push(`border-left:${border.left.width} ${border.left.style} ${border.left.color};`);
+        styles.push(`border-left:${border.left.width} ${border.left.style} ${border.left.color} !important;`);
     return styles.join(" ");
 }
-// ---------------------------------------------------------------------------
-// Merged styles helper — applies mobile overrides on top of desktop values
-// ---------------------------------------------------------------------------
-function mergeConfig(config, overrides) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return {
-        width: (_a = overrides === null || overrides === void 0 ? void 0 : overrides.width) !== null && _a !== void 0 ? _a : config.width,
-        height: (_b = overrides === null || overrides === void 0 ? void 0 : overrides.height) !== null && _b !== void 0 ? _b : config.height,
-        maxWidth: (_c = overrides === null || overrides === void 0 ? void 0 : overrides.maxWidth) !== null && _c !== void 0 ? _c : config.maxWidth,
-        maxHeight: (_d = overrides === null || overrides === void 0 ? void 0 : overrides.maxHeight) !== null && _d !== void 0 ? _d : config.maxHeight,
-        backgroundColor: (_e = overrides === null || overrides === void 0 ? void 0 : overrides.backgroundColor) !== null && _e !== void 0 ? _e : config.backgroundColor,
-        padding: (_f = overrides === null || overrides === void 0 ? void 0 : overrides.padding) !== null && _f !== void 0 ? _f : config.padding,
-        borderRadius: (_g = overrides === null || overrides === void 0 ? void 0 : overrides.borderRadius) !== null && _g !== void 0 ? _g : config.borderRadius,
-        border: (_h = overrides === null || overrides === void 0 ? void 0 : overrides.border) !== null && _h !== void 0 ? _h : config.border,
-    };
-}
-// ---------------------------------------------------------------------------
-// Desktop table — JSX (same as original)
-// ---------------------------------------------------------------------------
-function renderDesktopTable({ config, className, devNode, devMode, }) {
-    const { src, alt, href, target } = config;
-    const { width, height, maxWidth, maxHeight, backgroundColor, padding, borderRadius, border, } = mergeConfig(config);
-    const borderStyle = getBorderStyle$3(border);
-    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",
-    };
-    const tdStyle = {
-        padding: padding,
-        backgroundColor: backgroundColor,
-        fontSize: "0",
-        lineHeight: "0",
-    };
-    const widthNum = (width === null || width === void 0 ? void 0 : width.endsWith("px")) ? parseInt(width, 10) : undefined;
-    const maxWidthNum = (maxWidth === null || maxWidth === void 0 ? void 0 : maxWidth.endsWith("px"))
-        ? parseInt(maxWidth, 10)
-        : undefined;
-    const heightNum = (height === null || height === void 0 ? void 0 : height.endsWith("px")) ? parseInt(height, 10) : undefined;
-    const imageElement = (jsxRuntime.jsx("img", { draggable: false, src: src, alt: alt, style: imgStyle, width: widthNum && maxWidthNum
-            ? Math.min(widthNum, maxWidthNum)
-            : widthNum || maxWidthNum, height: heightNum, border: 0 }));
-    const content = href && !devMode ? (jsxRuntime.jsx("a", Object.assign({ href: href, target: target, style: linkStyle }, (target === "_blank" ? { rel: "noopener noreferrer" } : {}), { children: imageElement }))) : (imageElement);
-    return (jsxRuntime.jsxs("table", { "aria-label": `Image Wrapper for: ${alt}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, className: className, style: {
-            position: "relative",
-            width: width || "100%",
-            borderCollapse: "collapse",
-        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: "center", children: content }) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
-}
-// ---------------------------------------------------------------------------
-// Mobile table — HTML string (injected via NonMso, same pattern as Icon VML)
-// ---------------------------------------------------------------------------
-function buildMobileTableHTML({ config, overrides, className, }) {
-    const { src, alt, href, target } = config;
-    const { width, height, maxWidth, maxHeight, backgroundColor, padding, borderRadius, border, } = mergeConfig(config, overrides);
-    const borderStyleStr = getBorderStyleString$1(border);
-    const widthNum = (width === null || width === void 0 ? void 0 : width.endsWith("px")) ? parseInt(width, 10) : undefined;
-    const maxWidthNum = (maxWidth === null || maxWidth === void 0 ? void 0 : maxWidth.endsWith("px"))
-        ? parseInt(maxWidth, 10)
-        : undefined;
-    const heightNum = (height === null || height === void 0 ? void 0 : height.endsWith("px")) ? parseInt(height, 10) : undefined;
-    const resolvedWidth = widthNum && maxWidthNum
-        ? Math.min(widthNum, maxWidthNum)
-        : widthNum || maxWidthNum;
-    const imgTag = `<img
-    draggable="false"
-    src="${src}"
-    alt="${alt}"
-    ${resolvedWidth ? `width="${resolvedWidth}"` : ""}
-    ${heightNum ? `height="${heightNum}"` : ""}
-    border="0"
-    style="display:block;object-fit:cover;width:${width || "100%"};height:${height || "auto"};max-width:${maxWidth || "100%"};${maxHeight ? `max-height:${maxHeight};` : ""}border:0;${borderRadius ? `border-radius:${borderRadius};` : ""}${borderStyleStr}"
-  />`;
-    const content = href
-        ? `<a href="${href}" target="${target || "_self"}" style="display:block;text-decoration:none;border:0;outline:none;"${target === "_blank" ? ' rel="noopener noreferrer"' : ""}>${imgTag}</a>`
-        : imgTag;
-    return `
-    <table
-      aria-label="Image Wrapper for: ${alt}"
-      role="presentation"
-      cellpadding="0"
-      cellspacing="0"
-      border="0"
-      class="${className}"
-      style="position:relative;width:${width || "100%"};border-collapse:collapse;"
-    >
-      <tbody>
-        <tr>
-          <td
-            align="center"
-            style="padding:${padding || ""};background-color:${backgroundColor || ""};font-size:0;line-height:0;"
-          >
-            ${content}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `;
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
 function Image({ config, devNode, devMode }) {
-    const { mobile } = config;
-    const hasMobileOverrides = !!mobile && !mobile.hidden;
-    const isHiddenOnMobile = !!(mobile === null || mobile === void 0 ? void 0 : mobile.hidden);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderDesktopTable({
-                config,
-                className: hasMobileOverrides || isHiddenOnMobile ? "hide-on-mobile" : undefined,
-                devNode,
-                devMode,
-            }), hasMobileOverrides && !devMode && (jsxRuntime.jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: { width: "100%", borderCollapse: "collapse" }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx(NonMso, { html: buildMobileTableHTML({
-                                config,
-                                overrides: mobile,
-                                className: "hide-on-desktop",
-                            }) }) }) }) }))] }));
+    var _a;
+    const { src, alt, href, target, mobile } = config;
+    const seed = src + (alt || "");
+    const instanceId = seed
+        .split("")
+        .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+        .toString(36);
+    const imgClass = `img-${instanceId}`;
+    // 1. Desktop Dimensional Logic
+    const desktopWidth = config.width || "100%";
+    const isPercent = desktopWidth.includes("%");
+    const widthAttr = desktopWidth.replace("px", "");
+    const heightAttr = (_a = config.height) === null || _a === void 0 ? void 0 : _a.replace("px", "");
+    // Determine the table's "initial" width.
+    // If it's 300px, the table should be 300px, not 100%.
+    const tableWidth = isPercent ? desktopWidth : `${widthAttr}px`;
+    // 2. Mobile Overrides (Every property used)
+    let mobileCss = "";
+    if (mobile) {
+        mobileCss = `
+      @media screen and (max-width: 768px) {
+        .wrap-${imgClass} {
+          /* This breaks the px lock from desktop and makes it fluid */
+          width: ${mobile.width || "100%"} !important;
+          max-width: ${mobile.maxWidth || "100%"} !important;
+          min-width: 0 !important;
+        }
+        .td-${imgClass} {
+          padding: ${mobile.padding || "0"} !important;
+          background-color: ${mobile.backgroundColor || "transparent"} !important;
+          width: 100% !important;
+        }
+        .${imgClass} {
+          width: ${mobile.width || "100%"} !important;
+          height: ${mobile.height || "auto"} !important;
+          max-width: ${mobile.maxWidth || "100%"} !important;
+          max-height: ${mobile.maxHeight || "none"} !important;
+          border-radius: ${mobile.borderRadius || "0"} !important;
+          display: ${mobile.hidden ? "none" : "block"} !important;
+          object-fit: ${mobile.objectFit || "fill"} !important;
+          object-position: ${mobile.objectPosition || "center"} !important;
+          ${getBorderStyleString$1(mobile.border)}
+        }
+      }
+    `;
+    }
+    const imgStyle = Object.assign(Object.assign({ display: "block", width: isPercent ? "100%" : desktopWidth, height: config.height || "auto", maxWidth: config.maxWidth || "100%", maxHeight: config.maxHeight || "none", borderRadius: config.borderRadius || "0" }, getBorderStyle$3(config.border)), { outline: "none", textDecoration: "none", objectFit: config.objectFit, objectPosition: config.objectPosition });
+    const imageElement = (jsxRuntime.jsx("img", { src: src, alt: alt, width: !isPercent ? widthAttr : undefined, height: heightAttr !== "auto" ? heightAttr : undefined, className: imgClass, style: imgStyle }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mobile && jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: mobileCss } }), jsxRuntime.jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, className: `wrap-${imgClass}`, align: "center" // Ensures a 300px image stays centered in its parent
+                , style: {
+                    width: tableWidth, // Fixed px here prevents the 100% "ghost space"
+                    maxWidth: "100%",
+                    borderCollapse: "collapse",
+                    margin: "0 auto",
+                }, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: `td-${imgClass}`, align: "center", style: {
+                                    padding: config.padding,
+                                    backgroundColor: config.backgroundColor,
+                                    fontSize: "0",
+                                    lineHeight: "0",
+                                    width: tableWidth, // Lock the cell as well
+                                }, children: href && !devMode ? (jsxRuntime.jsx("a", { href: href, target: target, style: { display: "block", width: "100%" }, children: imageElement })) : (imageElement) }) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })] }));
 }
 var Image_default = React.memo(Image, arePropsEqual);
@@ -2615,35 +2524,31 @@ function Row({ children, config, devNode, devMode }) {
     const numChildren = childrenArray.length;
     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
+    // 1. Outer TD: Background, Border Radius, Width, Height.
+    const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height, backgroundImage: config.backgroundImage
             ? `url(${config.backgroundImage.src})`
             : 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.
+    // 2. Inner Table: Border and Border Radius.
     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.
+    // 3. Padding TD.
     const paddingTdStyle = {
         padding: config.padding,
         width: "100%",
-        // height intentionally omitted — padding must be inner, not additive
         verticalAlign: "top",
     };
-    // 4. Content Table - horizontal layout
-    const contentTableStyle = {
-        width: "auto",
-        height: "100%",
-        borderCollapse: "collapse",
-        minWidth: "1px",
-        maxWidth: config.width || "100%",
-    };
-    // 5. Gap styles for horizontal spacing between children
+    // 4. Content Table.
+    //
+    //    fillWidth: false/undefined (default) → width: "auto"
+    //      Original behavior. Children shrink-wrap to their natural sizes.
+    //      Use for icon rows, button rows, social link rows.
+    //      Centering works via the Justification Wrapper TD (align + width="100%").
+    //
+    //    fillWidth: true → width: "100%"
+    //      Content table fills available space, giving Outlook Classic a hard
+    //      boundary so text children get a constrained box and line wrapping
+    //      triggers correctly. Use for rows containing text + image layouts.
+    const contentTableStyle = Object.assign({ width: config.fillWidth ? "100%" : "auto", height: "100%", borderCollapse: "collapse", minWidth: "1px" }, (!config.fillWidth && { maxWidth: config.width || "100%" }));
+    // 5. Gap TD.
     const gapTdStyle = {
         width: config.gap || "0",
         lineHeight: "1px",
@@ -2653,7 +2558,6 @@ function Row({ children, config, devNode, devMode }) {
         ? justifyMap$1[config.justifyContent]
         : "left";
     const tdValign = config.alignItems ? alignMap[config.alignItems] : "top";
-    // Content to render - wrapped in anchor if innerLink is defined
     const content = (jsxRuntime.jsxs("table", Object.assign({ "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             position: "relative",
             width: config.width || "100%",
@@ -2663,14 +2567,13 @@ function Row({ children, config, devNode, devMode }) {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
-                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table 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: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
+                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, width: "100%", style: { width: "100%" }, children: jsxRuntime.jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table row-content-table", "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: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
                                                                                     verticalAlign: tdValign,
                                                                                     textAlign: "left",
                                                                                     padding: "0",
                                                                                     margin: "0",
                                                                                 }, className: "child-cell", children: child }), index < numChildren - 1 &&
                                                                                 config.gap && (jsxRuntime.jsx("td", { width: config.gap, style: gapTdStyle, className: "row-gap-td", children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) })) }) }) }) }) }) }) }) }) })) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })));
-    // Wrap in anchor tag if innerLink is defined and NOT in dev mode
     if (href && !devMode) {
         return (jsxRuntime.jsx("a", Object.assign({ href: href }, (target && { target }), { style: {
                 textDecoration: "none",
@@ -2772,7 +2675,7 @@ function Spacer({ config, devNode }) {
 var Spacer_default = React.memo(Spacer, arePropsEqual);
 function Text({ config, devMode, children }) {
-    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", } = config;
+    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", maxWidth } = config;
     // 1. TD Style: Where padding and background are reliably applied.
     const tdStyle = {
         padding: padding,
@@ -2799,6 +2702,7 @@ function Text({ config, devMode, children }) {
         wordBreak: wordBreak,
         margin: "0",
         padding: "0",
+        maxWidth
     };
     // Determine content to render
     const content = text !== null && text !== void 0 ? text : children;
@@ -3078,6 +2982,25 @@ function Icon({ config, devNode, devMode, children }) {
 }
 var Icon_default = React.memo(Icon, arePropsEqual);
+/**
+ * Content rendered by Outlook Classic only.
+ * Outputs: <!--[if mso]> ... <![endif]-->
+ */
+function MsoOnly({ html }) {
+    return (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]>${html}<![endif]-->`,
+        } }));
+}
+/**
+ * Content hidden from Outlook Classic, visible in all other clients.
+ * Outputs: <!--[if !mso]><!--> ... <!--<![endif]-->
+ */
+function NonMso({ html }) {
+    return (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if !mso]><!-->${html}<!--<![endif]-->`,
+        } }));
+}
 exports.Body = Body;
 exports.Button = Button_default;
 exports.Column = Column_default;