npm - @pagenflow/email - Versions diffs - 1.4.4 → 1.4.6 - Mend

@pagenflow/email 1.4.4 → 1.4.6

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 (39) hide show

package/dist/components/Button.d.ts +4 -0
package/dist/components/Column.d.ts +1 -1
package/dist/components/Container.d.ts +1 -1
package/dist/components/Image.d.ts +8 -0
package/dist/components/Row.d.ts +1 -1
package/dist/components/Section.d.ts +1 -1
package/dist/components/Text.d.ts +2 -1
package/dist/components/utils/MiniDomParser.d.ts +23 -0
package/dist/components/utils/injectLinkStyles.d.ts +1 -0
package/dist/index.cjs.js +177 -132
package/dist/index.cjs.js.map +1 -1
package/dist/index.esm.js +177 -132
package/dist/index.esm.js.map +1 -1
package/dist/types/IInnerLink.d.ts +17 -0
package/package.json +1 -1
package/dist/components/Body.js +0 -57
package/dist/components/BodyDev.js +0 -57
package/dist/components/Button.js +0 -327
package/dist/components/Column.js +0 -127
package/dist/components/Container.js +0 -179
package/dist/components/Divider.js +0 -41
package/dist/components/Font.js +0 -44
package/dist/components/Head.js +0 -134
package/dist/components/HeadDev.js +0 -311
package/dist/components/Heading.js +0 -46
package/dist/components/Html.js +0 -20
package/dist/components/Icon.js +0 -276
package/dist/components/Image.js +0 -119
package/dist/components/MsoConditional.js +0 -19
package/dist/components/Row.js +0 -157
package/dist/components/Section.js +0 -65
package/dist/components/Spacer.js +0 -40
package/dist/components/Text.js +0 -42
package/dist/index.js +0 -17
package/dist/types/IInnerLink.js +0 -1
package/dist/types/ResolvedFont.js +0 -1
package/dist/types/index.js +0 -1
package/dist/utils/isEqual.js +0 -1439
package/dist/utils/memoUtils.js +0 -55

package/dist/types/IInnerLink.d.ts CHANGED Viewed

@@ -1,3 +1,13 @@
+export type CalendarProvider = "google" | "outlook" | "office365" | "yahoo" | "ics";
+export interface ICalendarLink {
+    calendarProvider?: CalendarProvider;
+    calendarTitle?: string;
+    calendarStart?: string;
+    calendarEnd?: string;
+    calendarAllDay?: boolean;
+    calendarDescription?: string;
+    calendarLocation?: string;
+}
 export type InnerLinkType = "none" | "anchor" | "url" | "email" | "phone" | "page_top" | "page_bottom";
 export default interface IInnerLink {
     type: InnerLinkType;
@@ -6,4 +16,11 @@ export default interface IInnerLink {
     url?: string;
     anchor?: string;
     target?: "_blank" | "_self" | "_parent" | "_top";
+    calendarProvider?: CalendarProvider;
+    calendarTitle?: string;
+    calendarStart?: string;
+    calendarEnd?: string;
+    calendarAllDay?: boolean;
+    calendarDescription?: string;
+    calendarLocation?: string;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pagenflow/email",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Free Email Compatible Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/dist/components/Body.js DELETED Viewed

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Body({ children, config = {} }) {
-    var _a, _b, _c, _d;
-    // Extract config values with fallbacks
-    const globalColor = config.color || "#000000";
-    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 = {
-        backgroundColor: globalBackgroundColor,
-        color: globalColor,
-        fontSize: globalFontSize,
-        lineHeight: globalLineHeight,
-        padding: "0",
-        margin: "0",
-        WebkitTextSizeAdjust: "100%",
-        overflowX: "hidden",
-        ["msTextSizeAdjust"]: "100%",
-        ["msoLineHeightRule"]: "exactly",
-        fontFamily: globalFontFamily,
-        // Background image support (if provided)
-        ...(bgImage && {
-            backgroundImage: `url(${bgImage})`,
-            backgroundRepeat: bgRepeat,
-            backgroundSize: bgSize,
-            backgroundPosition: bgPosition,
-        }),
-    };
-    // 2. Style for the top-level <table> wrapper
-    const outerTableStyle = {
-        width: "100%",
-        ["msoLineHeightRule"]: "exactly",
-        borderCollapse: "collapse",
-    };
-    return (_jsxs("body", { style: bodyStyle, children: [_jsx("center", { style: {
-                    width: "100%",
-                    background: globalBackgroundColor,
-                    ...(bgImage && {
-                        backgroundImage: `url(${bgImage})`,
-                        backgroundRepeat: bgRepeat,
-                        backgroundSize: bgSize,
-                        backgroundPosition: bgPosition,
-                    }),
-                }, children: _jsx("table", { role: "presentation", border: 0, cellPadding: 0, cellSpacing: 0, align: "center", width: "100%", style: outerTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { align: "center", style: { padding: "0", margin: "0" }, children: children }) }) }) }) }), _jsx("div", { style: {
-                    display: "none",
-                    whiteSpace: "nowrap",
-                    font: "15px courier",
-                    lineHeight: "0",
-                }, children: "\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0" })] }));
-}

package/dist/components/BodyDev.js DELETED Viewed

@@ -1,57 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function BodyDev({ children, config = {} }) {
-    var _a, _b, _c, _d;
-    // Extract config values with fallbacks
-    const globalColor = config.color || "#000000";
-    const globalFontSize = config.fontSize || "16px";
-    const globalBackgroundColor = config.backgroundColor || "#ffffff";
-    const globalLineHeight = config.lineHeight || "1.4";
-    // 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";
-    // Main container style (simulates body behavior in dev mode)
-    const bodyDevStyle = {
-        backgroundColor: globalBackgroundColor,
-        color: globalColor,
-        fontSize: globalFontSize,
-        lineHeight: globalLineHeight,
-        padding: "0",
-        margin: "0",
-        fontFamily: "Arial, Helvetica, sans-serif",
-        overflowX: "hidden",
-        // Background image support (if provided)
-        ...(bgImage && {
-            backgroundImage: `url(${bgImage})`,
-            backgroundRepeat: bgRepeat,
-            backgroundSize: bgSize,
-            backgroundPosition: bgPosition,
-        }),
-    };
-    //   // Center wrapper style
-    //   const centerStyle: CSSProperties = {
-    //     width: '100%',
-    //     minHeight: '100vh',
-    //     display: 'flex',
-    //     justifyContent: 'center',
-    //     alignItems: 'flex-start',
-    //     background: globalBackgroundColor,
-    //     ...(bgImage && {
-    //       backgroundImage: `url(${bgImage})`,
-    //       backgroundRepeat: bgRepeat,
-    //       backgroundSize: bgSize,
-    //       backgroundPosition: bgPosition,
-    //     }),
-    //   };
-    //   // Table wrapper style
-    //   const tableWrapperStyle: CSSProperties = {
-    //     width: '100%',
-    //     maxWidth: '100%',
-    //   };
-    return (_jsx("div", { className: "builder-canvas body-dev", style: {
-            ...bodyDevStyle,
-            containerName: "builder-canvas",
-            containerType: "inline-size",
-        }, children: children }));
-}

package/dist/components/Button.js DELETED Viewed

@@ -1,327 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-// Map alignment to HTML 'align' attribute
-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 getBorderStyleString(border) {
-    if (!border)
-        return "";
-    const styles = [];
-    // If a full border is specified, apply it
-    if (border.width && border.style && border.color) {
-        styles.push(`border: ${border.width} ${border.style} ${border.color};`);
-    }
-    else {
-        // If only individual borders are specified
-        const hasIndividualBorders = border.top || border.right || border.bottom || border.left;
-        if (hasIndividualBorders) {
-            // Default all borders to none
-            styles.push("border-top: none;");
-            styles.push("border-right: none;");
-            styles.push("border-bottom: none;");
-            styles.push("border-left: none;");
-        }
-    }
-    // Override with specific borders if provided
-    if (border.top) {
-        styles.push(`border-top: ${border.top.width} ${border.top.style} ${border.top.color};`);
-    }
-    if (border.right) {
-        styles.push(`border-right: ${border.right.width} ${border.right.style} ${border.right.color};`);
-    }
-    if (border.bottom) {
-        styles.push(`border-bottom: ${border.bottom.width} ${border.bottom.style} ${border.bottom.color};`);
-    }
-    if (border.left) {
-        styles.push(`border-left: ${border.left.width} ${border.left.style} ${border.left.color};`);
-    }
-    return styles.join(" ");
-}
-function Button({ config, devMode }) {
-    const { href, children, backgroundColor = "#007bff", // Default blue
-    color = "#ffffff", padding = "12px 24px", borderRadius = "3px", border, width, maxWidth, justifyContent = "center", textAlign = "center", fontSize = "16px", fontWeight = "500", fontStyle, fontFamily = "Arial, sans-serif", lineHeight = "1.2", letterSpacing, textTransform, textDecoration = "none", direction, verticalAlign, opacity, whiteSpace = "normal", wordBreak = "break-word", } = config;
-    // Sanitize fontFamily early so safeFontFamily is available for all paths below.
-    const safeFontFamily = fontFamily
-        ? fontFamily.replace(/['"]/g, "")
-        : fontFamily;
-    // 1. Link (A) Tag Styles (Fallback for Webmail/Mobile)
-    const linkStyle = {
-        color: color,
-        textDecoration: textDecoration,
-        display: "block",
-        padding: padding,
-        wordBreak: wordBreak,
-        fontFamily: fontFamily,
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontStyle: fontStyle,
-        lineHeight: lineHeight,
-        letterSpacing: letterSpacing,
-        textTransform: textTransform,
-        textAlign: textAlign,
-        direction: direction,
-        verticalAlign: verticalAlign,
-        opacity: opacity,
-        whiteSpace: whiteSpace,
-    };
-    // 2. Outer TD Style for Background and Border Radius (no border)
-    const backgroundTdStyle = {
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        width: width || "auto",
-        ...(maxWidth && { maxWidth: maxWidth }),
-        // Overflow hidden to clip background to border-radius
-        ...(borderRadius && { overflow: "hidden" }),
-    };
-    // 3. Border styles
-    const borderStyle = getBorderStyle(border);
-    const borderStyleString = getBorderStyleString(border);
-    // --- Determine Button Approach Based on Width ---
-    // Check if width is percentage-based or not defined
-    const isPercentageWidth = !width || width.includes("%");
-    const useSimpleOutlookApproach = isPercentageWidth;
-    const align = justifyMap[justifyContent];
-    // --- VML Calculation and Code for Outlook Compatibility (Fixed Width Only) ---
-    let vmlButton = "";
-    if (!useSimpleOutlookApproach) {
-        // Parse maxWidth if provided (always in px)
-        const maxWidthPx = maxWidth ? parseInt(maxWidth, 10) : null;
-        // VML needs fixed pixel height. We estimate it based on padding and potential wrapping.
-        const numericPadding = parseInt(padding.split(" ")[0] || "12", 10);
-        const numericFontSize = parseInt(fontSize, 10);
-        const numericLineHeight = lineHeight.includes("px")
-            ? parseInt(lineHeight, 10)
-            : numericFontSize * parseFloat(lineHeight);
-        // Trust user's explicit pixel width - no calculation needed
-        const vmlWidth = parseInt(width, 10);
-        // Calculate VML height - trust user's padding and let text wrap naturally
-        // VML v:textbox will handle text wrapping automatically
-        const textContent = typeof children === "string" ? children : "";
-        // Estimate number of lines based on text length and button width
-        const horizontalPadding = padding.split(" ")[1]
-            ? parseInt(padding.split(" ")[1], 10) * 2
-            : numericPadding * 2;
-        const availableTextWidth = vmlWidth - horizontalPadding;
-        const charWidthMultiplier = fontWeight && parseInt(fontWeight) >= 500 ? 0.7 : 0.6;
-        const avgCharWidth = numericFontSize * charWidthMultiplier;
-        const charsPerLine = Math.max(Math.floor(availableTextWidth / avgCharWidth), 1);
-        const numberOfLines = Math.max(Math.ceil(textContent.length / charsPerLine), 1);
-        // Calculate height: vertical padding + (lines * line height) + extra buffer for VML
-        const textHeight = numberOfLines * numericLineHeight;
-        // Add extra 4px buffer to prevent bottom cropping in VML
-        const vmlHeight = Math.max(numericPadding * 2 + textHeight + 4, 40);
-        // VML colors must use the full hex format (e.g., #000000)
-        const vmlFillColor = backgroundColor.startsWith("#")
-            ? backgroundColor
-            : `#${backgroundColor}`;
-        // VML stroke color for border
-        const vmlStrokeColor = (border === null || border === void 0 ? void 0 : border.color) || vmlFillColor;
-        const vmlStrokeWeight = (border === null || border === void 0 ? void 0 : border.width) ? parseInt(border.width, 10) : 0;
-        const hasVmlStroke = vmlStrokeWeight > 0;
-        // Build VML font styles - consistent with other rendering paths
-        const vmlFontWeight = fontWeight || "500";
-        const vmlFontStyle = fontStyle === "italic" ? "font-style:italic;" : "";
-        const vmlLetterSpacing = letterSpacing
-            ? `letter-spacing:${letterSpacing};`
-            : "";
-        const vmlTextTransform = textTransform
-            ? `text-transform:${textTransform};`
-            : "";
-        const vmlTextDecoration = textDecoration && textDecoration !== "none"
-            ? `text-decoration:${textDecoration};`
-            : "";
-        const vmlWhiteSpace = whiteSpace !== "normal" ? `white-space:${whiteSpace};` : "";
-        const vmlDirection = direction ? `direction:${direction};` : "";
-        const vmlOpacity = opacity !== undefined ? `opacity:${opacity};` : "";
-        // VML code uses MSO conditional comments to render only in Outlook
-        // Use table with explicit MSO height for vertical centering
-        const horizontalPaddingValue = padding.split(" ")[1]
-            ? parseInt(padding.split(" ")[1], 10)
-            : numericPadding;
-        // For VML, we need to use a table inside to properly apply padding and centering
-        let vmlAlignAttr = "";
-        let vmlAlignStyle = "";
-        if (textAlign === "center") {
-            vmlAlignAttr = 'align="center"';
-        }
-        else {
-            vmlAlignStyle = `text-align:${textAlign};`;
-        }
-        // 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="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;">
-          <tr>
-            <td ${vmlAlignAttr} valign="middle" style="${vmlAlignStyle}color:${color};font-family:${safeFontFamily};font-size:${fontSize};font-weight:${vmlFontWeight};${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}${vmlDirection}${vmlOpacity}line-height:${lineHeight};mso-line-height-rule:exactly;">
-              ${typeof children === "string" ? children : ""}
-            </td>
-          </tr>
-        </table>
-      </v:textbox>
-    </v:roundrect>
-    <![endif]-->
-  `;
-    }
-    // --- Simple Outlook Approach for Percentage Widths ---
-    let simpleOutlookButton = "";
-    if (useSimpleOutlookApproach) {
-        // Build consistent inline styles for text properties
-        const textDecorationStyle = textDecoration && textDecoration !== "none"
-            ? `text-decoration: ${textDecoration};`
-            : "";
-        const fontStyleProp = fontStyle ? `font-style: ${fontStyle};` : "";
-        const letterSpacingProp = letterSpacing
-            ? `letter-spacing: ${letterSpacing};`
-            : "";
-        const textTransformProp = textTransform
-            ? `text-transform: ${textTransform};`
-            : "";
-        const whiteSpaceProp = whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : "";
-        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;">
-      <tr>
-        <td align="${align}" style="padding: 0;">
-          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${width || "auto"}" style="border-collapse: collapse;">
-            <tr>
-              <td bgcolor="${backgroundColor}" align="${textAlign}" style="padding: ${padding}; text-align: ${textAlign}; ${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>
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
-    <![endif]-->
-  `;
-    }
-    // Build shared inline style fragments for the non-MSO path.
-    // fontFamily uses the sanitized value so embedded quotes never break the
-    // style attribute string (which is always wrapped in double quotes).
-    const sharedTextStyles = [
-        `color: ${color};`,
-        safeFontFamily ? `font-family: ${safeFontFamily};` : "",
-        fontSize ? `font-size: ${fontSize};` : "",
-        fontWeight ? `font-weight: ${fontWeight};` : "",
-        fontStyle ? `font-style: ${fontStyle};` : "",
-        lineHeight ? `line-height: ${lineHeight};` : "",
-        letterSpacing ? `letter-spacing: ${letterSpacing};` : "",
-        textTransform ? `text-transform: ${textTransform};` : "",
-        textDecoration && textDecoration !== "none"
-            ? `text-decoration: ${textDecoration};`
-            : "",
-        direction ? `direction: ${direction};` : "",
-        opacity !== undefined ? `opacity: ${opacity};` : "",
-        whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : "",
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return (
-    // Wrapper table for alignment - maintains proper positioning for hover indicators
-    _jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            width: "100%",
-            borderCollapse: "collapse",
-            boxSizing: "border-box",
-            border: 0,
-            margin: 0,
-            padding: 0,
-        }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { align: align, style: {
-                        padding: 0,
-                    }, children: _jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-                            // --- Start dev
-                            position: "relative",
-                            // --- End dev
-                            width: width || "auto",
-                            ...(maxWidth && { maxWidth: maxWidth }),
-                            borderCollapse: "collapse",
-                            // base
-                            boxSizing: "border-box",
-                            border: 0,
-                            margin: 0,
-                            padding: 0,
-                        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { dangerouslySetInnerHTML: {
-                                        __html: `
-      ${devMode ? "" : useSimpleOutlookApproach ? simpleOutlookButton : vmlButton}
-      <!--[if !mso]><!-->
-      <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
-        <tbody>
-          <tr>
-            <td style="background-color: ${backgroundTdStyle.backgroundColor}; border-radius: ${backgroundTdStyle.borderRadius}; width: ${backgroundTdStyle.width}; ${maxWidth ? `max-width: ${maxWidth};` : ""} ${borderRadius ? "overflow: hidden;" : ""}">
-              <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; border-spacing: 0; border-radius: ${borderRadius}; width: 100%; ${borderStyleString}">
-                <tbody>
-                  <tr>
-                    <td style="padding: 0;">
-                      ${devMode
-                                            ? `<span style="${sharedTextStyles} display: block; text-align: ${textAlign}; word-break: ${wordBreak}; padding: ${padding};">
-                              ${typeof children === "string" ? children : ""}
-                            </span>`
-                                            : `<a href="${href}" target="_blank" rel="noopener noreferrer" style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; word-break: ${wordBreak}; text-align: ${textAlign}; padding: ${padding};">
-                              <span style="${sharedTextStyles}">
-                                ${typeof children === "string" ? children : ""}
-                              </span>
-                            </a>`}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <!--<![endif]-->
-    `,
-                                    } }) }) }) }) }) }) }) }));
-}
-export default memo(Button, arePropsEqual);

package/dist/components/Column.js DELETED Viewed

@@ -1,127 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, memo } from "react";
-import { arePropsEqual } from "../utils/memoUtils";
-// Helper for vertical alignment
-const vAlignMap = {
-    start: "top",
-    center: "middle",
-    end: "bottom",
-};
-// Helper for horizontal alignment
-const alignMap = {
-    start: "left",
-    center: "center",
-    end: "right",
-};
-// Helper to convert border config to CSS border shorthand
-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 Column({ children, config, devNode }) {
-    var _a, _b, _c;
-    // Process children array for gap support
-    const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
-    const numChildren = childrenArray.length;
-    // 1. Outer table style: Takes up the full width/height of its parent TD.
-    //    height here drives the *total* outer height of the column.
-    const outerTableStyle = {
-        width: "100%",
-        height: config.height,
-        borderCollapse: "collapse",
-    };
-    // 2. Outer TD style: Background and Border Radius (no border here).
-    //    height is set so the TD occupies the full declared height.
-    const outerTdStyle = {
-        width: config.width,
-        height: config.height,
-        backgroundColor: config.backgroundColor,
-        borderRadius: config.borderRadius,
-        // Background Image styles
-        backgroundImage: config.backgroundImage
-            ? `url(${config.backgroundImage.src})`
-            : undefined,
-        backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat,
-        backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size,
-        backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position,
-        // Overflow hidden to clip background to border-radius
-        ...(config.borderRadius && { overflow: "hidden" }),
-    };
-    // 2b. Inner table style: Border and Border Radius.
-    //     height: 100% so it stretches to fill the outer TD's declared height.
-    const innerTableStyle = {
-        width: "100%",
-        height: "100%", // fill the outer TD rather than re-declaring the pixel value
-        borderCollapse: "separate",
-        borderSpacing: 0,
-        borderRadius: config.borderRadius,
-        ...getBorderStyle(config.border),
-    };
-    // 3. Inner TD style: Padding and Vertical Alignment only.
-    //    *** No height here. ***
-    //    The outer TD/table owns the height; padding is purely inner spacing,
-    //    so the total rendered height = declared height (padding is inside).
-    const innerTdStyle = {
-        padding: config.padding,
-        // height intentionally omitted — setting it here would make browsers
-        // treat it as content-box height and add padding on top, causing the
-        // total to exceed the declared height in preview mode.
-        verticalAlign: config.alignItems ? alignMap[config.alignItems] : "top",
-    };
-    // 4. Gap spacer style (used between children)
-    const gapSpacerStyle = {
-        height: config.gap || "0",
-        lineHeight: "1px",
-        fontSize: "1px",
-        width: "100%",
-    };
-    // Main content rendering
-    const renderContent = () => (_jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap[config.alignItems] : "left", children: config.gap && numChildren > 1 ? (_jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-                            width: "100%",
-                            borderCollapse: "collapse",
-                        }, children: _jsx("tbody", { children: childrenArray.map((child, index) => (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { style: {
-                                                verticalAlign: config.alignItems
-                                                    ? alignMap[config.alignItems]
-                                                    : "top",
-                                            }, valign: config.justifyContent
-                                                ? vAlignMap[config.justifyContent]
-                                                : "top", align: config.alignItems
-                                                ? alignMap[config.alignItems]
-                                                : "left", children: child }) }), index < numChildren - 1 && (_jsx("tr", { children: _jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) }) }) }) }));
-    return (_jsxs("table", { "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            position: "relative",
-            ...outerTableStyle,
-        }, ...(config.height && { height: config.height }), children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: outerTdStyle, ...(config.width && { width: config.width }), ...(config.height && { height: config.height }), children: renderContent() }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }));
-}
-export default memo(Column, arePropsEqual);