@pagenflow/email 1.4.5 → 1.4.7

package/dist/components/Container.js

@@ -1,179 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-const alignMap = {
-    start: "top",
-    center: "middle",
-    end: "bottom",
-};
-const justifyMap = {
-    start: "left",
-    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 Container({ children, config, devMode, devNode }) {
-    var _a, _b, _c;
-    const { widthType, childrenConstraints } = config;
-    const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
-    const numChildren = childrenArray.length;
-    const containerWidthPx = (() => {
-        if (widthType === "fixed" && config.width && config.width.endsWith("px")) {
-            return parseInt(config.width, 10);
-        }
-        return 600;
-    })();
-    const gapWidthPx = (() => {
-        if (config.gap && config.gap.endsWith("px")) {
-            return parseInt(config.gap, 10);
-        }
-        return 0;
-    })();
-    const getChildWidths = (() => {
-        const { widthDistributionType } = childrenConstraints;
-        const totalGapSpace = gapWidthPx * (numChildren > 1 ? numChildren - 1 : 0);
-        const remainingContentSpace = containerWidthPx - totalGapSpace;
-        switch (widthDistributionType) {
-            case "equals":
-                const equalContentWidth = remainingContentSpace / numChildren;
-                return Array(numChildren).fill(`${equalContentWidth}px`);
-            case "ratio": {
-                const { ratio } = childrenConstraints;
-                const { mainChildIndex, value: [numerator, denominator], } = ratio;
-                if (numChildren < 2 ||
-                    mainChildIndex < 0 ||
-                    mainChildIndex >= numChildren ||
-                    denominator === 0) {
-                    const equalFallbackWidth = remainingContentSpace / numChildren;
-                    return Array(numChildren).fill(`${equalFallbackWidth}px`);
-                }
-                const mainChildWidth = (remainingContentSpace * numerator) / denominator;
-                const remainingWidth = remainingContentSpace - mainChildWidth;
-                const numOtherChildren = numChildren - 1;
-                const otherChildWidth = numOtherChildren > 0 ? remainingWidth / numOtherChildren : 0;
-                const widths = Array(numChildren).fill(`${otherChildWidth}px`);
-                widths[mainChildIndex] = `${mainChildWidth}px`;
-                return widths;
-            }
-            case "manual": {
-                const { widths } = childrenConstraints;
-                return widths.length === numChildren ? widths : [];
-            }
-            default:
-                return [];
-        }
-    })();
-    const outerTableStyle = {
-        width: "100%",
-        borderCollapse: "collapse",
-    };
-    // 1. Background TD Style - Background color, border radius, background image
-    const backgroundTdStyle = {
-        backgroundColor: config.backgroundColor,
-        borderRadius: config.borderRadius,
-        maxWidth: widthType === "fixed" ? config.width || "600px" : undefined,
-        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,
-        // Overflow hidden to clip background to border-radius
-        ...(config.borderRadius && { overflow: "hidden" }),
-    };
-    // 2. Border Table Style - Border and border radius
-    const borderTableStyle = {
-        width: "100%",
-        borderCollapse: "separate",
-        borderSpacing: 0,
-        borderRadius: config.borderRadius,
-        ...getBorderStyle(config.border),
-    };
-    // 3. Padding TD Style
-    const innerTdStyle = {
-        padding: config.padding,
-        width: "100%",
-        verticalAlign: config.alignItems ? alignMap[config.alignItems] : "top",
-    };
-    const contentTableStyle = {
-        width: "100%",
-        height: config.height,
-        borderCollapse: "collapse",
-    };
-    const gapTdStyle = {
-        width: config.gap || "0",
-        lineHeight: "1px",
-        fontSize: "1px",
-    };
-    const justifyAlign = config.justifyContent
-        ? justifyMap[config.justifyContent]
-        : "center";
-    const containerWidthAttr = widthType === "fixed" ? containerWidthPx : undefined;
-    const isStacking = config.shouldWrap && numChildren > 1;
-    const msoFixedWrapper = "";
-    const msoFixedFooter = "";
-    const rowElements = childrenArray.map((child, index) => {
-        const childTdStyle = {
-            width: getChildWidths[index],
-            verticalAlign: config.alignItems ? alignMap[config.alignItems] : "top",
-            textAlign: "left",
-        };
-        if (config.gap && index < numChildren - 1) {
-            return (_jsxs(Fragment, { children: [_jsxs("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: [child, isStacking && (_jsx("div", { className: "mobile-gap-spacer", style: {
-                                    display: "none",
-                                    fontSize: "0",
-                                    lineHeight: "0",
-                                    height: config.gap,
-                                }, children: "\u00A0" }))] }, `child-${index}`), _jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
-        }
-        return (_jsx("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: child }, `child-${index}`));
-    });
-    return (_jsx("table", { "aria-label": `Container | Table Outer`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: {
-            position: "relative",
-            ...outerTableStyle,
-        }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsxs("td", { align: justifyAlign, children: [_jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedWrapper } }), _jsxs("table", { className: [
-                                widthType === "fixed" ? "container-fixed-width" : undefined,
-                                devMode ? "main-wrapper relative" : undefined,
-                            ]
-                                .filter(Boolean)
-                                .join(" "), "aria-label": `Container | Table Middle`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, align: justifyAlign, style: {
-                                width: "100%",
-                                maxWidth: widthType === "fixed" ? config.width || "600px" : undefined,
-                                borderCollapse: "collapse",
-                            }, width: containerWidthAttr, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: backgroundTdStyle, children: _jsx("table", { "aria-label": `Container | Border Wrapper`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: borderTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: innerTdStyle, children: _jsx("table", { "aria-label": `Container | Content Table`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: contentTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: rowElements }) }) }) }) }) }) }) }) }) }), !!devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }), _jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedFooter } })] }) }) }) }));
-}
-export default memo(Container, arePropsEqual);

package/dist/components/Divider.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-function Divider({ config, devNode }) {
-    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,
-        fontSize: "0",
-        lineHeight: "0",
-        width: "100%",
-    };
-    // 2. Divider Table Style: Applies the line properties
-    const dividerTableStyle = {
-        width: width,
-        height: height,
-        backgroundColor: color,
-        borderCollapse: "collapse",
-        border: "0",
-        // ✅ FIX 1: Use string literal indexing for MSO properties
-        // ["mso-table-lspace" as string]: "0pt",
-        ["msoTableLspace"]: "0pt",
-        // ["mso-table-rspace" as string]: "0pt",
-        ["msoTableRspace"]: "0pt",
-    };
-    // Parse height for the HTML attribute
-    const dividerHeightAttribute = parseInt(height, 10) || 1;
-    return (_jsxs("table", { "aria-label": "Divider Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            // --- Start dev
-            position: "relative",
-            // --- End dev
-            width: "100%",
-            borderCollapse: "collapse",
-        }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: outerTdStyle, align: align, children: _jsx("table", { "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",
-                                            padding: "0",
-                                        }, children: "\u00A0" }) }) }) }) }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }));
-}
-export default memo(Divider, arePropsEqual);

package/dist/components/Font.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// ── Helpers ───────────────────────────────────────────────────────────────────
-function normaliseFallbacks(fallbackFontFamily) {
-    if (!fallbackFontFamily)
-        return [];
-    return Array.isArray(fallbackFontFamily)
-        ? fallbackFontFamily
-        : [fallbackFontFamily];
-}
-/**
- * Build the CSS font-stack string from the primary family + fallbacks.
- * Wraps names that contain spaces in single quotes.
- */
-function buildFontStack(primary, fallbacks) {
-    const quote = (name) => (name.includes(" ") ? `'${name}'` : name);
-    return [primary, ...fallbacks].map(quote).join(", ");
-}
-// ── Component ─────────────────────────────────────────────────────────────────
-export default function Font({ fontFamily, fallbackFontFamily, webFont, fontWeight = 400, fontStyle = "normal", }) {
-    var _a;
-    const fallbacks = normaliseFallbacks(fallbackFontFamily);
-    const fontFaceCss = webFont
-        ? `
-@font-face {
-  font-family: '${fontFamily}';
-  font-style: ${fontStyle};
-  font-weight: ${fontWeight};
-  font-display: swap;
-  src: url('${webFont.url}') format('${webFont.format}');
-  mso-font-alt: '${(_a = fallbacks[0]) !== null && _a !== void 0 ? _a : "sans-serif"}';
-}`.trim()
-        : null;
-    const msoComment = fallbacks.length > 0
-        ? `<!--[if mso]>\n<style type="text/css">\n  .${cssClassName(fontFamily)} {\n    font-family: ${buildFontStack(fallbacks[0], fallbacks.slice(1))}, sans-serif !important;\n  }\n</style>\n<![endif]-->`
-        : null;
-    return (_jsxs(_Fragment, { children: [fontFaceCss && (_jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: fontFaceCss } })), msoComment && (_jsx("style", { type: "text/css", dangerouslySetInnerHTML: {
-                    __html: `</style>${msoComment}<style type="text/css">`,
-                } }))] }));
-}
-// ── Utility: generate a stable CSS class name from a font family name ─────────
-// Used in the MSO conditional comment to scope the fallback rule.
-export function cssClassName(fontFamily) {
-    return `font-${fontFamily.toLowerCase().replace(/\s+/g, "-")}`;
-}

package/dist/components/Head.js

@@ -1,134 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Font from "./Font";
-export default function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", rowGaps = [], fonts = [], }) {
-    const msoResetStyles = `
-        .ExternalClass { width: 100%; line-height: 100%; } 
-        .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
-        table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0; }
-        td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
-        img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
-        #MessageViewBody img { min-width: 100%; }
-        a[x-apple-data-detectors] { 
-            color: inherit !important; 
-            text-decoration: none !important; 
-            font-size: inherit !important; 
-            font-family: inherit !important; 
-            font-weight: inherit !important; 
-            line-height: inherit !important; 
-        }
-        body { background-color: ${backgroundColor} !important; }
-        p { margin: 0; }
-    `;
-    const globalStyles = `
-        @media screen and (max-width: 768px) {
-            .container-fixed-width {
-                width: 100% !important;
-                max-width: 100% !important;
-            }
-        }
-        @media screen and (max-width: 768px) {
-          .hide-on-mobile {
-            display: none !important;
-            max-height: 0 !important;
-            overflow: hidden !important;
-            mso-hide: all;
-          }
-        }
-        @media screen and (min-width: 769px) {
-          .hide-on-desktop {
-            display: none !important;
-            max-height: 0 !important;
-            overflow: hidden !important;
-            mso-hide: all;
-          }
-        }
-        @media screen and (max-width: 768px) {
-            .stack-td {
-                width: 100% !important;
-                display: block !important;
-                float: left;
-                clear: both;
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-            }
-            .desktop-gap-column { width: 0 !important; display: none !important; }
-            .mobile-gap-spacer {
-                display: block !important;
-                width: 100% !important;
-                font-size: 1px !important;
-                line-height: 1px !important;
-                mso-line-height-rule: exactly;
-            }
-        }
-        @media only screen and (max-width: 768px) {
-          .row-content-table[data-mobile-justify="center"] { margin: 0 auto !important; float: none !important; }
-          .row-content-table[data-mobile-justify="start"] { margin: 0 !important; float: left !important; }
-          .row-content-table[data-mobile-justify="end"] { margin: 0 0 0 auto !important; float: right !important; }
-          .row-content-table[data-mobile-align="center"] .child-cell { vertical-align: middle !important; }
-          .row-content-table[data-mobile-align="start"] .child-cell { vertical-align: top !important; }
-          .row-content-table[data-mobile-align="end"] .child-cell { vertical-align: bottom !important; }
-          .row-content-table[data-mobile-wrap="true"] { width: 100% !important; max-width: 100% !important; }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr { display: block !important; }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell {
-            display: block !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
-          }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .row-gap-td {
-            display: none !important;
-            width: 0 !important;
-            height: 0 !important;
-          }
-          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell:not(:last-child) {
-            margin-bottom: 20px !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")}
-        }
-        a { color: inherit; text-decoration: none; }
-        ol, ul { margin: 0px; padding: 0px; list-style: none; }
-        li {
-          list-style-type: none !important;
-          list-style: none !important;
-          position: relative;
-          padding-left: 0px;
-          margin: 0px;
-          display: block !important;
-        }
-        li::marker {
-          content: "" !important;
-          font-size: 0px !important;
-          line-height: 0px !important;
-          color: transparent !important;
-          width: 0px !important;
-        }
-        li[data-list="bullet"] {
-          list-style-type: disc !important;
-          list-style-position: inside !important;
-          padding-left: 1.5em;
-          display: list-item !important;
-        }
-        li[data-list="ordered"] {
-          list-style-type: decimal !important;
-          list-style-position: inside !important;
-          padding-left: 1.5em;
-          display: list-item !important;
-        }
-        li[data-list="bullet"]::marker,
-        li[data-list="ordered"]::marker {
-          content: normal !important;
-          font-size: inherit !important;
-          color: inherit !important;
-          width: auto !important;
-          padding: 0 !important;
-          margin: 0 !important;
-        }
-        h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: inherit; }
-    `;
-    return (_jsxs("head", { children: [_jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), _jsx("title", { children: title }), fonts.flatMap((resolved) => resolved.fontProps.map((props, i) => (_jsx(Font, { ...props }, `${resolved.family}-${props.fontWeight}-${props.fontStyle}-${i}`)))), children, _jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), _jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } })] }));
-}