@pagenflow/email 1.4.4 → 1.4.6

package/dist/components/Button.d.ts

@@ -4,6 +4,10 @@ import IInnerLink from "../types/IInnerLink";
 export interface ButtonConfig {
     /** Link configuration for the button destination. Required. */
     innerLink?: IInnerLink;
+    /**
+     * @deprecated Use innerLink property instead
+     */
+    href?: string;
     /** Button text. */
     children: ReactNode;
     /** Background color. Required for VML compatibility. */

package/dist/components/Column.d.ts

@@ -19,7 +19,7 @@ export type ColumnConfig = {
     gap?: string;
 };
 export type ColumnProps = {
-    children: ReactNode;
+    children?: ReactNode;
     config: ColumnConfig;
     devNode?: ReactNode;
 };

package/dist/components/Container.d.ts

@@ -37,7 +37,7 @@ export interface ContainerConfig {
 }
 export type ContainerProps = {
     config: ContainerConfig;
-    children: ReactNode;
+    children?: ReactNode;
     devMode?: boolean;
     devNode?: ReactNode;
 };

package/dist/components/Image.d.ts

@@ -31,6 +31,14 @@ export interface ImageConfig {
     borderRadius?: string;
     border?: BorderConfig;
     innerLink?: IInnerLink;
+    /**
+     * @deprecated Use innerLink property instead
+     */
+    href?: string;
+    /**
+     * @deprecated Use innerLink property instead
+     */
+    target?: string;
     objectFit?: CSSProperties["objectFit"];
     objectPosition?: string;
     mobile?: ImageMobileConfig;

package/dist/components/Row.d.ts

@@ -36,7 +36,7 @@ export interface RowConfig {
     };
 }
 export type RowProps = {
-    children: ReactNode;
+    children?: ReactNode;
     config: RowConfig;
     devNode?: ReactNode;
     devMode?: boolean;

package/dist/components/Section.d.ts

@@ -15,7 +15,7 @@ export type SectionConfig = {
 };
 export interface SectionProps {
     config: SectionConfig;
-    children: ReactNode;
+    children?: ReactNode;
     devNode?: ReactNode;
 }
 declare const _default: React.NamedExoticComponent<SectionProps>;

package/dist/components/Text.d.ts

@@ -17,7 +17,7 @@ export interface TextConfig {
     /** Font style (e.g., 'italic'). */
     fontStyle?: string;
     /** Line height (e.g., '1.5' or '24px'). */
-    lineHeight?: string;
+    lineHeight?: string | number;
     /** Letter spacing (e.g., '0.5px', '1px'). */
     letterSpacing?: string;
     /** Text transform (e.g., 'uppercase', 'lowercase', 'capitalize'). */
@@ -37,6 +37,7 @@ export interface TextConfig {
     /** Word break behavior (e.g., 'break-all', 'break-word', 'keep-all', 'normal'). */
     wordBreak?: string;
     maxWidth?: string;
+    listStyle?: string;
 }
 export type TextProps = {
     config: TextConfig;

package/dist/components/utils/MiniDomParser.d.ts

@@ -0,0 +1,23 @@
+interface StyleMap {
+    [property: string]: string;
+}
+export interface DomNode {
+    tagName: string;
+    attributes: Record<string, string>;
+    style: StyleMap;
+    children: DomNode[];
+    parent: DomNode | null;
+    rawHtml: string;
+}
+export default class MiniDomParser {
+    private html;
+    root: DomNode;
+    constructor(html: string);
+    private makeNode;
+    parseStyle(styleStr: string): StyleMap;
+    private parseAttributes;
+    private parse;
+    private collectByTag;
+    querySelectorAllByTag(tag: string): DomNode[];
+}
+export {};

package/dist/components/utils/injectLinkStyles.d.ts

@@ -0,0 +1 @@
+export default function injectLinkStyles(html: string, fallback?: Record<string, string>): string;

package/dist/index.cjs.js

@@ -6,16 +6,16 @@ var React = require('react');
 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";
+    const globalColor = config.color || "";
+    const globalFontSize = config.fontSize || "";
+    const globalBackgroundColor = config.backgroundColor || "";
+    const globalLineHeight = config.lineHeight || "";
+    const globalFontFamily = config.fontFamily || "";
     // 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";
+    const bgRepeat = ((_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.repeat) || "";
+    const bgSize = ((_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.size) || "";
+    const bgPosition = ((_d = config.backgroundImage) === null || _d === void 0 ? void 0 : _d.position) || "";
     // 1. Style for the <body> tag inline
     const bodyStyle = {
         backgroundColor: globalBackgroundColor,
@@ -1614,133 +1614,40 @@ function Button({ config, devMode }) {
     };
     // Border styles
     const borderStyleString = getBorderStyleString$2(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 = justifyContent ? justifyMap$3[justifyContent] : undefined;
-    // --- VML Calculation and Code for Outlook Compatibility (Fixed Width Only) ---
-    let vmlButton = "";
-    if (!useSimpleOutlookApproach) {
-        // VML needs fixed pixel height. We estimate it based on padding and potential wrapping.
-        const numericPadding = padding ? parseInt(padding.split(" ")[0] || "12", 10) : 12;
-        const numericFontSize = fontSize ? parseInt(fontSize, 10) : 0;
-        const numericLineHeight = lineHeight
-            ? lineHeight.includes("px")
-                ? parseInt(lineHeight, 10)
-                : numericFontSize * parseFloat(lineHeight)
-            : numericFontSize;
-        // 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 === null || padding === void 0 ? void 0 : 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
-            ? backgroundColor.startsWith("#")
-                ? backgroundColor
-                : `#${backgroundColor}`
-            : undefined;
-        // 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;
-        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 ? `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 === null || padding === void 0 ? void 0 : 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 if (textAlign) {
-            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="${href}"` : ""} style="height:${vmlHeight}px;width:${vmlWidth}px;" arcsize="0%" ${vmlStrokeColor ? `strokecolor="${vmlStrokeColor}"` : ""} ${hasVmlStroke ? `strokeweight="${vmlStrokeWeight}px"` : 'stroke="f"'} ${vmlFillColor ? `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:${color};` : ""}${safeFontFamily ? `font-family:${safeFontFamily};` : ""}${fontSize ? `font-size:${fontSize};` : ""}${vmlFontWeight ? `font-weight:${vmlFontWeight};` : ""}${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}${vmlDirection}${vmlOpacity}${lineHeight ? `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 ? `white-space: ${whiteSpace};` : "";
-        const directionProp = direction ? `direction: ${direction};` : "";
-        const opacityProp = opacity !== undefined ? `opacity: ${opacity};` : "";
-        const wordBreakProp = wordBreak ? `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 = `
+    // 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 ? `white-space: ${whiteSpace};` : "";
+    const directionProp = direction ? `direction: ${direction};` : "";
+    const opacityProp = opacity !== undefined ? `opacity: ${opacity};` : "";
+    const wordBreakProp = wordBreak ? `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="${align}"` : ""} style="padding: 0;">
           <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${width || "auto"}" style="border-collapse: collapse;">
             <tr>
-              <td ${backgroundColor ? `bgcolor="${backgroundColor}"` : ""} ${textAlign ? `align="${textAlign}"` : ""} style="${padding ? `padding: ${padding};` : ""} ${textAlign ? `text-align: ${textAlign};` : ""} ${borderStyleString}">
+              <td ${backgroundColor ? `bgcolor="${backgroundColor}"` : ""} ${textAlign ? `align="${textAlign}"` : ""} style="${padding ? `padding: ${padding};` : ""} ${href ? "cursor: pointer;" : ""} ${textAlign ? `text-align: ${textAlign};` : ""} ${borderStyleString}">
                 ${href
-            ? `<a href="${href}" target="${target}" rel="noopener noreferrer" style="${color ? `color: ${color};` : ""} ${textDecorationStyle} display: block; ${safeFontFamily ? `font-family: ${safeFontFamily};` : ""} ${fontSize ? `font-size: ${fontSize};` : ""} ${fontWeight ? `font-weight: ${fontWeight};` : ""} ${fontStyleProp} ${lineHeight ? `line-height: ${lineHeight};` : ""} ${letterSpacingProp} ${textTransformProp} ${textAlign ? `text-align: ${textAlign};` : ""} ${whiteSpaceProp} ${directionProp} ${opacityProp} ${wordBreakProp} mso-line-height-rule: exactly;">
+        ? `<a href="${href}" target="${target}" rel="noopener noreferrer" style="${color ? `color: ${color};` : ""} ${textDecorationStyle} display: block; ${safeFontFamily ? `font-family: ${safeFontFamily};` : ""} ${fontSize ? `font-size: ${fontSize};` : ""} ${fontWeight ? `font-weight: ${fontWeight};` : ""} ${fontStyleProp} ${lineHeight ? `line-height: ${lineHeight};` : ""} ${letterSpacingProp} ${textTransformProp} ${textAlign ? `text-align: ${textAlign};` : ""} ${whiteSpaceProp} ${directionProp} ${opacityProp} ${wordBreakProp} mso-line-height-rule: exactly;">
                         ${typeof children === "string" ? children : ""}
                       </a>`
-            : `<span style="${color ? `color: ${color};` : ""} ${textDecorationStyle} display: block; ${safeFontFamily ? `font-family: ${safeFontFamily};` : ""} ${fontSize ? `font-size: ${fontSize};` : ""} ${fontWeight ? `font-weight: ${fontWeight};` : ""} ${fontStyleProp} ${lineHeight ? `line-height: ${lineHeight};` : ""} ${letterSpacingProp} ${textTransformProp} ${textAlign ? `text-align: ${textAlign};` : ""} ${whiteSpaceProp} ${directionProp} ${opacityProp} ${wordBreakProp} mso-line-height-rule: exactly;">
+        : `<span style="${color ? `color: ${color};` : ""} ${textDecorationStyle} display: block; ${safeFontFamily ? `font-family: ${safeFontFamily};` : ""} ${fontSize ? `font-size: ${fontSize};` : ""} ${fontWeight ? `font-weight: ${fontWeight};` : ""} ${fontStyleProp} ${lineHeight ? `line-height: ${lineHeight};` : ""} ${letterSpacingProp} ${textTransformProp} ${textAlign ? `text-align: ${textAlign};` : ""} ${whiteSpaceProp} ${directionProp} ${opacityProp} ${wordBreakProp} mso-line-height-rule: exactly;">
                         ${typeof children === "string" ? children : ""}
                       </span>`}
               </td>
@@ -1751,7 +1658,6 @@ function Button({ config, devMode }) {
     </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).
@@ -1798,7 +1704,7 @@ function Button({ config, devMode }) {
                             padding: 0,
                         }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
                                         __html: `
-      ${useSimpleOutlookApproach ? simpleOutlookButton : vmlButton}
+      ${simpleOutlookButton}
       <!--[if !mso]><!-->
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
         <tbody>
@@ -1813,7 +1719,7 @@ function Button({ config, devMode }) {
                               ${typeof children === "string" ? children : ""}
                             </span>`
                                             : href
-                                                ? `<a href="${href}" target="${target}" rel="noopener noreferrer" style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; ${wordBreak ? `word-break: ${wordBreak};` : ""} ${textAlign ? `text-align: ${textAlign};` : ""} ${padding ? `padding: ${padding};` : ""}">
+                                                ? `<a href="${href}" target="${target}" rel="noopener noreferrer" style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; cursor: pointer; ${wordBreak ? `word-break: ${wordBreak};` : ""} ${textAlign ? `text-align: ${textAlign};` : ""} ${padding ? `padding: ${padding};` : ""}">
                                 <span>
                                   ${typeof children === "string" ? children : ""}
                                 </span>
@@ -2361,6 +2267,139 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
     return (jsxRuntime.jsxs("head", { children: [jsxRuntime.jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), jsxRuntime.jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), jsxRuntime.jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), jsxRuntime.jsx("title", { children: title }), fonts.flatMap((resolved) => resolved.fontProps.map((props, i) => (jsxRuntime.jsx(Font, { ...props }, `${resolved.family}-${props.fontWeight}-${props.fontStyle}-${i}`)))), children, jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } })] }));
 }
 
+class MiniDomParser {
+    constructor(html) {
+        this.html = html;
+        this.root = this.makeNode("root", {}, null);
+        this.parse();
+    }
+    makeNode(tagName, attributes, parent) {
+        var _a;
+        return {
+            tagName,
+            attributes,
+            style: this.parseStyle((_a = attributes["style"]) !== null && _a !== void 0 ? _a : ""),
+            children: [],
+            parent,
+            rawHtml: "",
+        };
+    }
+    parseStyle(styleStr) {
+        const map = {};
+        for (const declaration of styleStr.split(";")) {
+            const [prop, ...rest] = declaration.split(":");
+            if (!prop || !rest.length)
+                continue;
+            const key = prop.trim().toLowerCase();
+            const val = rest.join(":").trim();
+            if (key && val)
+                map[key] = val;
+        }
+        return map;
+    }
+    parseAttributes(attrStr) {
+        var _a, _b, _c;
+        const attrs = {};
+        const pattern = /(\w[\w-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
+        let m;
+        while ((m = pattern.exec(attrStr)) !== null) {
+            const key = m[1].toLowerCase();
+            const val = (_c = (_b = (_a = m[2]) !== null && _a !== void 0 ? _a : m[3]) !== null && _b !== void 0 ? _b : m[4]) !== null && _c !== void 0 ? _c : "";
+            attrs[key] = val;
+        }
+        return attrs;
+    }
+    parse() {
+        const tokenPattern = /(<\/[\w]+\s*>|<[\w][^>]*>|[^<]+)/gi;
+        const stack = [this.root];
+        let m;
+        while ((m = tokenPattern.exec(this.html)) !== null) {
+            const token = m[0];
+            if (token.startsWith("</")) {
+                if (stack.length > 1)
+                    stack.pop();
+                continue;
+            }
+            if (token.startsWith("<")) {
+                const tagMatch = token.match(/^<([\w]+)([\s\S]*)>$/i);
+                if (!tagMatch)
+                    continue;
+                const tagName = tagMatch[1].toLowerCase();
+                const attrStr = tagMatch[2].trim();
+                const attrs = this.parseAttributes(attrStr);
+                const current = stack[stack.length - 1];
+                const node = this.makeNode(tagName, attrs, current);
+                node.rawHtml = token;
+                current.children.push(node);
+                const selfClosing = /\/$/.test(attrStr) ||
+                    ["br", "hr", "img", "input", "meta", "link"].includes(tagName);
+                if (!selfClosing)
+                    stack.push(node);
+            }
+        }
+    }
+    collectByTag(node, tag, results) {
+        if (node.tagName === tag)
+            results.push(node);
+        for (const child of node.children) {
+            this.collectByTag(child, tag, results);
+        }
+    }
+    querySelectorAllByTag(tag) {
+        const results = [];
+        this.collectByTag(this.root, tag.toLowerCase(), results);
+        return results;
+    }
+}
+
+function resolveInheritedStyle(node, prop) {
+    let el = node.parent;
+    while (el && el.tagName !== "root") {
+        const val = el.style[prop];
+        if (val && val !== "inherit")
+            return val;
+        el = el.parent;
+    }
+    return undefined;
+}
+const BROWSER_LINK_DEFAULTS = ["color", "text-decoration"];
+function resolveAnchorStyles(anchor, fallback) {
+    const resolved = { ...anchor.style };
+    for (const prop of BROWSER_LINK_DEFAULTS) {
+        if (resolved[prop] && resolved[prop] !== "inherit")
+            continue;
+        const inherited = resolveInheritedStyle(anchor, prop);
+        if (inherited) {
+            resolved[prop] = inherited;
+        }
+        else if (fallback === null || fallback === void 0 ? void 0 : fallback[prop]) {
+            resolved[prop] = fallback[prop];
+        }
+        // if neither — leave it out entirely, don't force inherit
+    }
+    return Object.entries(resolved)
+        .map(([k, v]) => `${k}:${v}`)
+        .join(";");
+}
+function injectLinkStyles(html, fallback) {
+    if (!html || (!html.includes("<a ") && !html.includes("<a>")))
+        return html;
+    const parser = new MiniDomParser(html);
+    const anchors = parser.querySelectorAllByTag("a");
+    let result = html;
+    for (const anchor of anchors) {
+        const resolvedStyle = resolveAnchorStyles(anchor, fallback !== null && fallback !== void 0 ? fallback : {});
+        const cleanAttrs = anchor.rawHtml
+            .replace(/^<a\s*/i, "")
+            .replace(/>$/, "")
+            .replace(/style\s*=\s*(?:"[^"]*"|'[^']*')/gi, "")
+            .trim();
+        const newTag = `<a ${cleanAttrs} style="${resolvedStyle}">`.replace(/\s+/g, " ");
+        result = result.replace(anchor.rawHtml, newTag);
+    }
+    return result;
+}
+
 function Heading({ config, devMode, children }) {
     const { text, level = "h1", padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, wordBreak, whiteSpace, } = config;
     // Determine the content to render
@@ -2377,7 +2416,7 @@ function Heading({ config, devMode, children }) {
     const headingStyle = {
         color: color,
         textAlign: textAlign,
-        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
+        fontFamily: fontFamily,
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -2394,6 +2433,9 @@ function Heading({ config, devMode, children }) {
         // Outlook specific fixes (using string indexing)
         ["msoLineHeightRule"]: "exactly",
     };
+    const processedHtml = isString
+        ? injectLinkStyles(content, headingStyle)
+        : "";
     // Dynamically create the Heading element
     const HeadingTag = level;
     return (
@@ -2401,7 +2443,7 @@ function Heading({ config, devMode, children }) {
     jsxRuntime.jsx("table", { "aria-label": "Heading 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: isString ? (jsxRuntime.jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: content } })) : (jsxRuntime.jsx(HeadingTag, { style: headingStyle, children: content })) }) }) }) }));
+        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: isString ? (jsxRuntime.jsx(HeadingTag, { style: headingStyle, dangerouslySetInnerHTML: { __html: processedHtml } })) : (jsxRuntime.jsx(HeadingTag, { style: headingStyle, children: content })) }) }) }) }));
 }
 var Heading_default = React.memo(Heading, arePropsEqual);
 
@@ -2864,7 +2906,7 @@ function Spacer({ config, devNode }) {
 var Spacer_default = React.memo(Spacer, arePropsEqual);
 
 function Text({ config, devMode, children }) {
-    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", maxWidth } = config;
+    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", maxWidth, } = config;
     // 1. TD Style: Where padding and background are reliably applied.
     const tdStyle = {
         padding: padding,
@@ -2876,7 +2918,7 @@ function Text({ config, devMode, children }) {
     const contentStyle = {
         color: color,
         textAlign: textAlign,
-        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
+        fontFamily: fontFamily,
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -2891,15 +2933,18 @@ function Text({ config, devMode, children }) {
         wordBreak: wordBreak,
         margin: "0",
         padding: "0",
-        maxWidth
+        maxWidth,
     };
     // Determine content to render
     const content = text !== null && text !== void 0 ? text : children;
     const isString = typeof content === "string";
+    const processedHtml = isString
+        ? injectLinkStyles(content, contentStyle)
+        : "";
     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: isString ? (jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: content } })) : (jsxRuntime.jsx("div", { style: contentStyle, children: content })) }) }) }) }));
+        }, 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: processedHtml } })) : (jsxRuntime.jsx("div", { style: contentStyle, children: content })) }) }) }) }));
 }
 var Text_default = React.memo(Text, arePropsEqual);