@pagenflow/email 1.4.5 → 1.4.6

package/dist/components/Image.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-function getBorderStyle(border) {
-    if (!border)
-        return {};
-    const style = {};
-    if (border.width && border.style && border.color) {
-        style.border = `${border.width} ${border.style} ${border.color}`;
-    }
-    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 = [];
-    // Standard shorthand
-    if (border.width && border.style && border.color) {
-        styles.push(`border:${border.width} ${border.style} ${border.color} !important;`);
-    }
-    else {
-        // 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} !important;`);
-    if (border.right)
-        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} !important;`);
-    if (border.left)
-        styles.push(`border-left:${border.left.width} ${border.left.style} ${border.left.color} !important;`);
-    return styles.join(" ");
-}
-function Image({ config, devNode, devMode }) {
-    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(mobile.border)}
-        }
-      }
-    `;
-    }
-    const imgStyle = {
-        display: "block",
-        width: isPercent ? "100%" : desktopWidth,
-        height: config.height || "auto",
-        maxWidth: config.maxWidth || "100%",
-        maxHeight: config.maxHeight || "none",
-        borderRadius: config.borderRadius || "0",
-        ...getBorderStyle(config.border),
-        outline: "none",
-        textDecoration: "none",
-        objectFit: config.objectFit,
-        objectPosition: config.objectPosition,
-    };
-    const imageElement = (_jsx("img", { src: src, alt: alt, width: !isPercent ? widthAttr : undefined, height: heightAttr !== "auto" ? heightAttr : undefined, className: imgClass, style: imgStyle }));
-    return (_jsxs(_Fragment, { children: [mobile && _jsx("style", { dangerouslySetInnerHTML: { __html: mobileCss } }), _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: [_jsx("tbody", { children: _jsx("tr", { children: _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 ? (_jsx("a", { href: href, target: target, style: { display: "block", width: "100%" }, children: imageElement })) : (imageElement) }) }) }), devMode && !!devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] })] }));
-}
-export default memo(Image, arePropsEqual);

package/dist/components/MsoConditional.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Content rendered by Outlook Classic only.
- * Outputs: <!--[if mso]> ... <![endif]-->
- */
-export function MsoOnly({ html }) {
-    return (_jsx("td", { dangerouslySetInnerHTML: {
-            __html: `<!--[if mso]>${html}<![endif]-->`,
-        } }));
-}
-/**
- * Content hidden from Outlook Classic, visible in all other clients.
- * Outputs: <!--[if !mso]><!--> ... <!--<![endif]-->
- */
-export function NonMso({ html }) {
-    return (_jsx("td", { dangerouslySetInnerHTML: {
-            __html: `<!--[if !mso]><!-->${html}<!--<![endif]-->`,
-        } }));
-}

package/dist/components/Row.js

@@ -1,157 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-const justifyMap = {
-    start: "left",
-    center: "center",
-    end: "right",
-};
-const alignMap = {
-    start: "top",
-    center: "middle",
-    end: "bottom",
-};
-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 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;
-    const href = getHrefFromInnerLink(config.innerLink);
-    const target = (_a = config.innerLink) === null || _a === void 0 ? void 0 : _a.target;
-    // 1. Outer TD: Background, Border Radius, Width, Height.
-    const backgroundTdStyle = {
-        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: Border and Border Radius.
-    const borderTableStyle = {
-        width: "100%",
-        height: "100%",
-        borderCollapse: "separate",
-        borderSpacing: 0,
-        borderRadius: config.borderRadius,
-        ...getBorderStyle(config.border),
-    };
-    // 3. Padding TD.
-    const paddingTdStyle = {
-        padding: config.padding,
-        width: "100%",
-        verticalAlign: "top",
-    };
-    // 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 = {
-        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",
-        fontSize: "1px",
-    };
-    const tdAlign = config.justifyContent
-        ? justifyMap[config.justifyContent]
-        : "left";
-    const tdValign = config.alignItems ? alignMap[config.alignItems] : "top";
-    const content = (_jsxs("table", { "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 }), children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { 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, width: "100%", style: { width: "100%" }, children: _jsx("table", { "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 }) }) }))] }));
-    if (href && !devMode) {
-        return (_jsx("a", { href: href, ...(target && { target }), style: {
-                textDecoration: "none",
-                color: "inherit",
-                display: "block",
-            }, children: content }));
-    }
-    return content;
-}
-export default memo(Row, arePropsEqual);

package/dist/components/Section.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-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;
-}
-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: {
-            position: "relative",
-            width: "100%",
-            backgroundColor: config.backgroundColor,
-            ...getBorderStyle(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,
-                        }, children: children }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { children: [_jsxs("span", { style: {
-                                    backgroundColor: "black",
-                                    color: "white",
-                                    padding: "4px",
-                                    fontSize: "14px",
-                                    position: "absolute",
-                                    left: 0,
-                                    top: 0,
-                                }, children: ["Section | ", sectionType] }), children] }) }) }))] }));
-};
-export default memo(Section, arePropsEqual);

package/dist/components/Spacer.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-function Spacer({ config, devNode }) {
-    const { height, hideOnMobile } = config;
-    // 1. Spacer Table Style
-    const spacerTableStyle = {
-        // Crucial for compatibility: Ensures no background or border interference
-        backgroundColor: "transparent",
-        borderCollapse: "collapse",
-        border: "0",
-        width: "100%",
-        // Note the CSS standard dash convention: 'mso-table-lspace'
-        // ["mso-table-lspace" as string]: "0pt",
-        ["msoTableLspace"]: "0pt",
-        // ["mso-table-rspace" as string]: "0pt",
-        ["msoTableRspace"]: "0pt",
-    };
-    // 2. Spacer TD Style: The element that creates the actual vertical space
-    const spacerTdStyle = {
-        height: height,
-        // Critical: Suppress any vertical height created by text/font
-        fontSize: "0",
-        lineHeight: "0",
-        padding: "0",
-    };
-    // Parse height for the HTML attribute
-    const spacerHeightAttribute = parseInt(height, 10) || 1;
-    return (
-    // Outer table ensures the spacer spans the full width of its container
-    _jsxs("table", { "aria-label": "Vertical Spacer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            // --- Start dev
-            position: "relative",
-            // --- End dev
-            ...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 }) }) }))] }));
-}
-export default memo(Spacer, arePropsEqual);

package/dist/components/Text.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-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", maxWidth } = config;
-    // 1. TD Style: Where padding and background are reliably applied.
-    const tdStyle = {
-        padding: padding,
-        backgroundColor: backgroundColor,
-        width: "100%",
-        verticalAlign: "top",
-    };
-    // 2. Content Style: Applied directly to a wrapper element
-    const contentStyle = {
-        color: color,
-        textAlign: textAlign,
-        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontStyle: fontStyle,
-        lineHeight: lineHeight,
-        letterSpacing: letterSpacing,
-        textTransform: textTransform,
-        textDecoration: textDecoration,
-        direction: direction,
-        verticalAlign: verticalAlign,
-        opacity: opacity,
-        whiteSpace: whiteSpace,
-        wordBreak: wordBreak,
-        margin: "0",
-        padding: "0",
-        maxWidth
-    };
-    // Determine content to render
-    const content = text !== null && text !== void 0 ? text : children;
-    const isString = typeof content === "string";
-    return (_jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            width: "100%",
-            borderCollapse: "collapse",
-        }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: tdStyle, align: textAlign, children: isString ? (_jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: content } })) : (_jsx("div", { style: contentStyle, children: content })) }) }) }) }));
-}
-export default memo(Text, arePropsEqual);

package/dist/index.js

@@ -1,17 +0,0 @@
-export { default as Body } from './components/Body';
-export { default as Button } from './components/Button';
-export { default as Column } from './components/Column';
-export { default as Container } from './components/Container';
-export { default as Divider } from './components/Divider';
-export { default as Head } from './components/Head';
-export { default as Heading } from './components/Heading';
-export { default as Html } from './components/Html';
-export { default as Image } from './components/Image';
-export { default as Row } from './components/Row';
-export { default as Section } from './components/Section';
-export { default as Spacer } from './components/Spacer';
-export { default as Text } from './components/Text';
-export { default as Icon } from './components/Icon';
-export { default as Font } from "./components/Font";
-export { MsoOnly, NonMso } from "./components/MsoConditional";
-export * from "./types";

package/dist/types/IInnerLink.js

@@ -1 +0,0 @@
-export {};

package/dist/types/ResolvedFont.js

@@ -1 +0,0 @@
-export {};

package/dist/types/index.js

@@ -1 +0,0 @@
-export {};