@pagenflow/email 1.3.3 → 1.3.4

package/dist/components/Row.d.ts

@@ -20,6 +20,7 @@ export interface RowConfig {
     mobile?: {
         justifyContent?: JustifyContent;
         alignItems?: AlignItems;
+        wrap?: boolean;
     };
 }
 export type RowProps = {

package/dist/index.cjs.js

@@ -1526,7 +1526,7 @@ function arePropsEqual(prevProps, nextProps) {
 }
 
 // Map alignment to HTML 'align' attribute
-const justifyMap$2 = {
+const justifyMap$3 = {
     start: "left",
     center: "center",
     end: "right",
@@ -1549,7 +1549,7 @@ function Button({ config, devMode }) {
     const vmlFillColor = backgroundColor.startsWith("#")
         ? backgroundColor
         : `#${backgroundColor}`;
-    const align = justifyMap$2[justifyContent];
+    const align = justifyMap$3[justifyContent];
     // Build VML font styles
     const vmlFontWeight = fontWeight || "bold";
     const vmlFontStyle = fontStyle === "italic" ? "font-style:italic;" : "";
@@ -1712,7 +1712,7 @@ const alignMap$1 = {
     center: "middle",
     end: "bottom",
 };
-const justifyMap$1 = {
+const justifyMap$2 = {
     start: "left",
     center: "center",
     end: "right",
@@ -1816,7 +1816,7 @@ function Container({ children, config, devMode, devNode }) {
         fontSize: "1px",
     };
     const justifyAlign = config.justifyContent
-        ? justifyMap$1[config.justifyContent]
+        ? justifyMap$2[config.justifyContent]
         : "center";
     const containerWidthAttr = widthType === "fixed" ? containerWidthPx : undefined;
     const isStacking = config.shouldWrap && numChildren > 1;
@@ -1926,14 +1926,14 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
         }
     `;
     const globalStyles = `
-        @media screen and (max-width: 600px) {
+        @media screen and (max-width: 768px) {
             .container-fixed-width {
                 width: 100% !important;
                 max-width: 100% !important;
             }
         }
 
-        @media screen and (max-width: 600px) {
+        @media screen and (max-width: 768px) {
             .stack-td {
                 width: 100% !important;
                 display: block !important;
@@ -1957,8 +1957,8 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
             }
         }
 
-        @media only screen and (max-width: 600px) {
-          /* 1. Handling Mobile Alignment (Justify) */
+        @media only screen and (max-width: 768px) {
+          /* 1. Handling Mobile Alignment (Justify) - Works for both wrapped and non-wrapped */
           /* We target the inner table alignment */
           .responsive-row[data-mobile-justify="center"] .content-table {
             margin: 0 auto !important;
@@ -1973,17 +1973,104 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
             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) */
-          /* We target the child cells if they are still side-by-side */
-          .responsive-row[data-mobile-align="center"] .child-cell {
+          /* For non-wrapped rows - controls vertical alignment when cells are side-by-side */
+          .responsive-row[data-mobile-align="center"]:not([data-mobile-wrap="true"]) .child-cell {
+            vertical-align: middle !important;
+          }
+          .responsive-row[data-mobile-align="start"]:not([data-mobile-wrap="true"]) .child-cell {
+            vertical-align: top !important;
+          }
+          .responsive-row[data-mobile-align="end"]:not([data-mobile-wrap="true"]) .child-cell {
+            vertical-align: bottom !important;
+          }
+
+          /* For wrapped rows - alignItems controls vertical alignment of content within each child cell */
+          .responsive-row[data-mobile-wrap="true"][data-mobile-align="center"] .child-cell {
             vertical-align: middle !important;
           }
-          .responsive-row[data-mobile-align="start"] .child-cell {
+          .responsive-row[data-mobile-wrap="true"][data-mobile-align="start"] .child-cell {
             vertical-align: top !important;
           }
-          .responsive-row[data-mobile-align="end"] .child-cell {
+          .responsive-row[data-mobile-wrap="true"][data-mobile-align="end"] .child-cell {
             vertical-align: bottom !important;
           }
+
+          /* 3. Handling Mobile Wrap - Pure CSS Solution */
+          /* Force table to act like block container */
+          .responsive-row[data-mobile-wrap="true"] .content-table {
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+          
+          /* Force table row to stack cells */
+          .responsive-row[data-mobile-wrap="true"] .content-tr {
+            display: block !important;
+          }
+          
+          /* Force each child cell to be full width block */
+          .responsive-row[data-mobile-wrap="true"] .child-cell {
+            display: block !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+          }
+          
+          /* Hide horizontal gap cells and create vertical spacing with padding */
+          .responsive-row[data-mobile-wrap="true"] .row-gap-td {
+            display: none !important;
+            width: 0 !important;
+            height: 0 !important;
+          }
+          
+          /* Add vertical spacing between stacked cells using margin */
+          .responsive-row[data-mobile-wrap="true"] .child-cell:not(:last-child) {
+            margin-bottom: 20px !important;
+          }
+          
+          /* Dynamic gap support - common values */
+          .responsive-row[data-mobile-wrap="true"][data-gap="10px"] .child-cell:not(:last-child) {
+            margin-bottom: 10px !important;
+          }
+          .responsive-row[data-mobile-wrap="true"][data-gap="15px"] .child-cell:not(:last-child) {
+            margin-bottom: 15px !important;
+          }
+          .responsive-row[data-mobile-wrap="true"][data-gap="20px"] .child-cell:not(:last-child) {
+            margin-bottom: 20px !important;
+          }
+          .responsive-row[data-mobile-wrap="true"][data-gap="24px"] .child-cell:not(:last-child) {
+            margin-bottom: 24px !important;
+          }
+          .responsive-row[data-mobile-wrap="true"][data-gap="30px"] .child-cell:not(:last-child) {
+            margin-bottom: 30px !important;
+          }
+          .responsive-row[data-mobile-wrap="true"][data-gap="40px"] .child-cell:not(:last-child) {
+            margin-bottom: 40px !important;
+          }
         }
         
         /* ================================================= */
@@ -2181,7 +2268,7 @@ function Image({ config, devNode, devMode }) {
 }
 var Image_default = React.memo(Image, arePropsEqual);
 
-const justifyMap = {
+const justifyMap$1 = {
     start: "left",
     center: "center",
     end: "right",
@@ -2213,7 +2300,7 @@ function getBorderStyle$1(border) {
     return style;
 }
 function Row({ children, config, devNode }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     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)
@@ -2246,7 +2333,7 @@ function Row({ children, config, devNode }) {
         fontSize: "1px",
     };
     const tdAlign = config.justifyContent
-        ? justifyMap[config.justifyContent]
+        ? justifyMap$1[config.justifyContent]
         : "left";
     const tdValign = config.alignItems ? alignMap[config.alignItems] : "top";
     return (jsxRuntime.jsxs("table", Object.assign({ "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
@@ -2254,7 +2341,7 @@ function Row({ children, config, devNode }) {
             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, className: "responsive-row", children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", Object.assign({ style: backgroundTdStyle }, (config.height && { height: config.height }), { children: jsxRuntime.jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: paddingTdStyle, children: jsxRuntime.jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+        } }, (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: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", Object.assign({ style: backgroundTdStyle }, (config.height && { height: config.height }), { children: jsxRuntime.jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: paddingTdStyle, children: jsxRuntime.jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
@@ -2264,7 +2351,7 @@ function Row({ children, config, devNode }) {
                                                                                     padding: "0",
                                                                                     margin: "0",
                                                                                 }, className: "child-cell", children: child }), index < numChildren - 1 &&
-                                                                                config.gap && (jsxRuntime.jsx("td", { width: config.gap, style: gapTdStyle, children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) })) }) }) }) }) }) }) }) }) })) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })));
+                                                                                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 }) }) }))] })));
 }
 var Row_default = React.memo(Row, arePropsEqual);
 
@@ -2345,7 +2432,6 @@ function Spacer({ config, devNode }) {
 var Spacer_default = React.memo(Spacer, arePropsEqual);
 
 function Text({ config, devMode, children }) {
-    var _a;
     const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, } = config;
     // 1. TD Style: Where padding and background are reliably applied.
     const tdStyle = {
@@ -2354,9 +2440,7 @@ function Text({ config, devMode, children }) {
         width: "100%",
         verticalAlign: "top",
     };
-    // 2. Content Style: Applied directly to a wrapper element (like a <div> or <p>)
-    // or inherited by the children. For max compatibility, we apply core styles
-    // directly to the TD or a wrapper <p> (if children is just a string).
+    // 2. Content Style: Applied directly to a wrapper element
     const contentStyle = {
         color: color,
         textAlign: textAlign,
@@ -2371,19 +2455,188 @@ function Text({ config, devMode, children }) {
         verticalAlign: verticalAlign,
         opacity: opacity,
         whiteSpace: whiteSpace,
-        margin: "0", // Crucial: Remove default margin from <p> tags
+        margin: "0",
         padding: "0",
-        fontFamily: "Arial, Helvetica, sans-serif", // Use a widely supported font stack
+        fontFamily: "Arial, Helvetica, sans-serif",
     };
-    return (
-    // Wrap the text content in a table for padding/background/width management.
-    jsxRuntime.jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+    // Determine content to render
+    const content = text !== null && text !== void 0 ? text : children;
+    const isString = typeof content === "string";
+    return (jsxRuntime.jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
             width: "100%",
             borderCollapse: "collapse",
-        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: (_a = text !== null && text !== void 0 ? text : children) !== null && _a !== void 0 ? _a : "" } }) }) }) }) }));
+        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: isString ? (jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: content } })) : (jsxRuntime.jsx("div", { style: contentStyle, children: content })) }) }) }) }));
 }
 var Text_default = React.memo(Text, arePropsEqual);
 
+// Map alignment to HTML 'align' attribute
+const justifyMap = {
+    start: "left",
+    center: "center",
+    end: "right",
+};
+// Helper to build Iconify API URL
+function buildIconifyUrl(config) {
+    const { iconIdentifier, height = 24, color = "000000", rotate = 0, rotateOrientation = "cw", } = config;
+    if (!iconIdentifier)
+        return null;
+    // 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("{{color}}", cleanColor)
+        .replace("{{rotate}}", String(rotate))
+        .replace("{{rotate-orientation}}", rotateOrientation)
+        .replace("{{icon-full-name}}", iconIdentifier);
+}
+// Helper to build link href based on innerLink type
+function buildLinkHref(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return null;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url || null;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : null;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : null;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : null;
+        case "page_top":
+            return "#top";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return null;
+    }
+}
+function Icon({ config, devNode, devMode, children }) {
+    const { 
+    // base64Source,
+    width, height, backgroundColor, padding = "0", borderRadius = "0", 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];
+    // 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;
+    // Parse numeric values for HTML attributes
+    const widthNum = typeof width === "number"
+        ? width
+        : typeof width === "string" && width.endsWith("px")
+            ? parseInt(width, 10)
+            : undefined;
+    const heightNum = typeof height === "number"
+        ? height
+        : typeof height === "string" && height.endsWith("px")
+            ? parseInt(height, 10)
+            : undefined;
+    // 1. Image Style: Critical for compatibility
+    const imgStyle = {
+        display: "block", // Prevents extra vertical space
+        border: 0, // No default border
+        width: widthStr || "auto",
+        height: heightStr || "auto",
+    };
+    // 2. Link Style: No underline or color changes
+    const linkStyle = {
+        display: "block",
+        textDecoration: "none",
+        border: 0,
+        outline: "none",
+    };
+    // 3. TD Style: Padding and background
+    const tdStyle = {
+        padding: padding,
+        backgroundColor: backgroundColor,
+        fontSize: "0", // CRITICAL: Collapses extra space
+        lineHeight: "0", // CRITICAL: Collapses extra space7
+        borderRadius: borderRadius,
+        overflow: "hidden",
+    };
+    // --- VML Calculation for Outlook Compatibility ---
+    const numericPadding = parseInt(padding.split(" ")[0] || "0", 10);
+    const vmlWidth = (widthNum || 24) + numericPadding * 2;
+    const vmlHeight = (heightNum || 24) + numericPadding * 2;
+    // VML colors must use full hex format
+    const vmlFillColor = (backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.startsWith("#"))
+        ? backgroundColor
+        : backgroundColor
+            ? `#${backgroundColor}`
+            : "#ffffff";
+    // Calculate arcsize percentage for VML
+    const numericBorderRadius = parseInt(borderRadius || "0", 10);
+    const arcsize = numericBorderRadius > 0
+        ? Math.min((numericBorderRadius / Math.min(vmlWidth, vmlHeight)) * 100, 100)
+        : 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}">
+      <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;" />
+        </center>
+      </v:textbox>
+    </v:roundrect>
+    <![endif]-->
+  `
+        : "";
+    // If no icon source, return empty
+    if (!iconSrc && !devMode) {
+        return null;
+    }
+    // Icon image element
+    const iconElement = devMode && !!children ? (children) : iconSrc ? (jsxRuntime.jsx("img", { draggable: false, src: iconSrc, alt: "" // Icons are decorative, empty alt is appropriate
+        , style: imgStyle, width: widthNum, height: heightNum, border: 0 })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+    // Wrap in link if href exists and not in dev mode
+    const content = href && !devMode ? (jsxRuntime.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)
+    const useVML = !devMode && backgroundColor && numericBorderRadius > 0;
+    const htmlContent = useVML
+        ? `
+    ${vmlIcon}
+    <!--[if !mso]><!-->
+    <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
+            ? `<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"};" />`}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!--<![endif]-->
+  `
+        : null;
+    return (jsxRuntime.jsxs("table", { "aria-label": "Icon", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: {
+            // --- Start dev
+            position: "relative",
+            // --- End dev
+            width: widthStr || "auto",
+            borderCollapse: "collapse",
+            // base
+            boxSizing: "border-box",
+            border: 0,
+            margin: 0,
+            padding: 0,
+        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: useVML ? (jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
+                            __html: htmlContent !== null && htmlContent !== void 0 ? htmlContent : "",
+                        } })) : (jsxRuntime.jsx("td", { style: tdStyle, align: align, children: content })) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
+}
+var Icon_default = React.memo(Icon, arePropsEqual);
+
 exports.Body = Body;
 exports.Button = Button_default;
 exports.Column = Column_default;
@@ -2392,6 +2645,7 @@ exports.Divider = Divider_default;
 exports.Head = Head;
 exports.Heading = Heading_default;
 exports.Html = Html;
+exports.Icon = Icon_default;
 exports.Image = Image_default;
 exports.Row = Row_default;
 exports.Section = Section_default;