@pagenflow/email 1.4.3 → 1.4.4

package/dist/components/Button.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from "react";
 import { BorderConfig } from "../types";
+import IInnerLink from "../types/IInnerLink";
 export interface ButtonConfig {
-    /** The destination URL for the button. Required. */
-    href: string;
+    /** Link configuration for the button destination. Required. */
+    innerLink?: IInnerLink;
     /** Button text. */
     children: ReactNode;
     /** Background color. Required for VML compatibility. */

package/dist/components/Divider.d.ts

@@ -1,14 +1,9 @@
 import { ReactNode } from "react";
 export interface DividerConfig {
-    /** Thickness of the line (e.g., "1px"). */
     height?: string;
-    /** Color of the line. */
     color?: string;
-    /** Width of the line (e.g., "100%" or "300px"). */
     width?: string;
-    /** Spacing above and below the divider (e.g., "20px 0"). */
     margin?: string;
-    /** Horizontal alignment of the divider. */
     align?: "left" | "center" | "right";
     hideOnMobile?: boolean;
 }

package/dist/components/Image.d.ts

@@ -1,5 +1,11 @@
 import { CSSProperties, ReactNode } from "react";
 import { BorderConfig } from "../types";
+import IInnerLink from "../types/IInnerLink";
+/**
+ * RULES NOT TO BE REMOVED
+ * -------------------
+ * - Image should not be draggable in dev mode as we don't want to disrupt the builder dnd behavior
+ */
 export interface ImageMobileConfig {
     width?: string;
     height?: string;
@@ -24,8 +30,7 @@ export interface ImageConfig {
     padding?: string;
     borderRadius?: string;
     border?: BorderConfig;
-    href?: string;
-    target?: string;
+    innerLink?: IInnerLink;
     objectFit?: CSSProperties["objectFit"];
     objectPosition?: string;
     mobile?: ImageMobileConfig;

package/dist/index.cjs.js

@@ -1539,6 +1539,27 @@ const justifyMap$3 = {
     center: "center",
     end: "right",
 };
+// Helper to build link href based on innerLink type (mirrors Icon component)
+function buildLinkHref$2(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return null;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url || null;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : null;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : null;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : null;
+        case "page_top":
+            return "#top";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return null;
+    }
+}
 function getBorderStyleString$2(border) {
     if (!border)
         return "";
@@ -1574,8 +1595,10 @@ function getBorderStyleString$2(border) {
     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;
+    const { innerLink, children, backgroundColor, color, padding, borderRadius, border, width, maxWidth, justifyContent, textAlign, fontSize, fontWeight, fontStyle, fontFamily, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, opacity, whiteSpace, wordBreak, } = config;
+    // Resolve href from innerLink
+    const href = buildLinkHref$2(innerLink);
+    const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     // Sanitize fontFamily early so safeFontFamily is available for all paths below.
     const safeFontFamily = fontFamily
         ? fontFamily.replace(/['"]/g, "")
@@ -1595,23 +1618,25 @@ function Button({ config, devMode }) {
     // Check if width is percentage-based or not defined
     const isPercentageWidth = !width || width.includes("%");
     const useSimpleOutlookApproach = isPercentageWidth;
-    const align = justifyMap$3[justifyContent];
+    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 = parseInt(padding.split(" ")[0] || "12", 10);
-        const numericFontSize = parseInt(fontSize, 10);
-        const numericLineHeight = lineHeight.includes("px")
-            ? parseInt(lineHeight, 10)
-            : numericFontSize * parseFloat(lineHeight);
+        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.split(" ")[1]
+        const horizontalPadding = (padding === null || padding === void 0 ? void 0 : padding.split(" ")[1])
             ? parseInt(padding.split(" ")[1], 10) * 2
             : numericPadding * 2;
         const availableTextWidth = vmlWidth - horizontalPadding;
@@ -1624,15 +1649,17 @@ function Button({ config, devMode }) {
         // 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}`;
+        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 || "500";
+        const vmlFontWeight = fontWeight;
         const vmlFontStyle = fontStyle === "italic" ? "font-style:italic;" : "";
         const vmlLetterSpacing = letterSpacing
             ? `letter-spacing:${letterSpacing};`
@@ -1643,12 +1670,12 @@ function Button({ config, devMode }) {
         const vmlTextDecoration = textDecoration && textDecoration !== "none"
             ? `text-decoration:${textDecoration};`
             : "";
-        const vmlWhiteSpace = whiteSpace !== "normal" ? `white-space:${whiteSpace};` : "";
+        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.split(" ")[1]
+        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
@@ -1657,7 +1684,7 @@ function Button({ config, devMode }) {
         if (textAlign === "center") {
             vmlAlignAttr = 'align="center"';
         }
-        else {
+        else if (textAlign) {
             vmlAlignStyle = `text-align:${textAlign};`;
         }
         // Border radius is intentionally omitted (arcsize="0%") for Outlook Classic.
@@ -1665,12 +1692,12 @@ function Button({ config, devMode }) {
         // 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}">
+    <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};font-family:${safeFontFamily};font-size:${fontSize};font-weight:${vmlFontWeight};${vmlFontStyle}${vmlLetterSpacing}${vmlTextTransform}${vmlTextDecoration}${vmlWhiteSpace}${vmlDirection}${vmlOpacity}line-height:${lineHeight};mso-line-height-rule:exactly;">
+            <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>
@@ -1694,10 +1721,10 @@ function Button({ config, devMode }) {
         const textTransformProp = textTransform
             ? `text-transform: ${textTransform};`
             : "";
-        const whiteSpaceProp = whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : "";
+        const whiteSpaceProp = whiteSpace ? `white-space: ${whiteSpace};` : "";
         const directionProp = direction ? `direction: ${direction};` : "";
         const opacityProp = opacity !== undefined ? `opacity: ${opacity};` : "";
-        const wordBreakProp = wordBreak !== "break-word" ? `word-break: ${wordBreak};` : "";
+        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.
@@ -1705,13 +1732,17 @@ function Button({ config, devMode }) {
     <!--[if mso]>
     <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse;">
       <tr>
-        <td align="${align}" style="padding: 0;">
+        <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 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 ${backgroundColor ? `bgcolor="${backgroundColor}"` : ""} ${textAlign ? `align="${textAlign}"` : ""} style="${padding ? `padding: ${padding};` : ""} ${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;">
+                        ${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;">
+                        ${typeof children === "string" ? children : ""}
+                      </span>`}
               </td>
             </tr>
           </table>
@@ -1725,7 +1756,7 @@ function Button({ config, devMode }) {
     // 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};`,
+        color ? `color: ${color};` : "",
         safeFontFamily ? `font-family: ${safeFontFamily};` : "",
         fontSize ? `font-size: ${fontSize};` : "",
         fontWeight ? `font-weight: ${fontWeight};` : "",
@@ -1738,7 +1769,7 @@ function Button({ config, devMode }) {
             : "",
         direction ? `direction: ${direction};` : "",
         opacity !== undefined ? `opacity: ${opacity};` : "",
-        whiteSpace !== "normal" ? `white-space: ${whiteSpace};` : "",
+        whiteSpace ? `white-space: ${whiteSpace};` : "",
     ]
         .filter(Boolean)
         .join(" ");
@@ -1772,20 +1803,24 @@ function Button({ config, devMode }) {
       <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}">
+            <td style="${backgroundTdStyle.backgroundColor ? `background-color: ${backgroundTdStyle.backgroundColor};` : ""} ${backgroundTdStyle.borderRadius ? `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; ${borderRadius ? `border-radius: ${borderRadius};` : ""} width: 100%; ${borderStyleString}">
                 <tbody>
                   <tr>
                     <td style="padding: 0;">
                       ${devMode
-                                            ? `<span style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; word-break: ${wordBreak}; text-align: ${textAlign}; padding: ${padding};">
+                                            ? `<span style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; ${wordBreak ? `word-break: ${wordBreak};` : ""} ${textAlign ? `text-align: ${textAlign};` : ""} ${padding ? `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>
+                                            : 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};` : ""}">
+                                <span>
+                                  ${typeof children === "string" ? children : ""}
+                                </span>
+                              </a>`
+                                                : `<span style="${sharedTextStyles} ${textDecoration && textDecoration !== "none" ? "" : "text-decoration: none;"} display: block; ${wordBreak ? `word-break: ${wordBreak};` : ""} ${textAlign ? `text-align: ${textAlign};` : ""} ${padding ? `padding: ${padding};` : ""}">
                                 ${typeof children === "string" ? children : ""}
-                              </span>
-                            </a>`}
+                              </span>`}
                     </td>
                   </tr>
                 </tbody>
@@ -2104,40 +2139,48 @@ var Container_default = React.memo(Container, arePropsEqual);
 
 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 (jsxRuntime.jsxs("table", { "aria-label": "Divider Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-            // --- Start dev
-            position: "relative",
-            // --- End dev
+    const heightPx = parseInt(height, 10) || 1;
+    // Parse margin into paddingTop / paddingBottom for the outer TD.
+    // Outlook ignores shorthand "20px 0" on TDs — must be explicit.
+    const [marginTopRaw = "0", marginRightRaw = "0", marginBottomRaw, marginLeftRaw] = margin.trim().split(/\s+/);
+    const marginTop = marginTopRaw;
+    const marginBottom = marginBottomRaw !== null && marginBottomRaw !== void 0 ? marginBottomRaw : marginTopRaw; // "20px 0" → top=20px, bottom=20px
+    // Outlook requires align on the outer TD to correctly position
+    // a fixed-width inner table (e.g. width="300px").
+    const alignAttr = align === "left" ? "left" : align === "right" ? "right" : "center";
+    return (jsxRuntime.jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            position: "relative", // dev overlay anchor
             width: "100%",
             borderCollapse: "collapse",
-        }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: outerTdStyle, align: align, children: jsxRuntime.jsx("table", { "aria-label": "Divider Line", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: dividerTableStyle, ...{ height: dividerHeightAttribute }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: {
+            border: "0",
+        }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: alignAttr, style: {
+                            paddingTop: marginTop,
+                            paddingBottom: marginBottom,
+                            paddingLeft: "0",
+                            paddingRight: "0",
+                            fontSize: "0",
+                            lineHeight: "0",
+                        }, children: jsxRuntime.jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: alignAttr, style: {
+                                width: width,
+                                borderCollapse: "collapse",
+                                border: "0",
+                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { ...{ height: heightPx }, ref: (el) => {
+                                            if (!el)
+                                                return;
+                                            el.setAttribute("style", `height:${height};` +
+                                                `line-height:${height};` +
+                                                `font-size:0;` +
+                                                `padding:0;` +
+                                                `background-color:${color};` +
+                                                `mso-line-height-rule:exactly;`);
+                                        }, style: {
+                                            // Fallback for non-Outlook clients (React-rendered style object).
                                             height: height,
+                                            lineHeight: height,
                                             fontSize: "0",
-                                            lineHeight: "0",
                                             padding: "0",
-                                        }, children: "\u00A0" }) }) }) }) }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
+                                            backgroundColor: color,
+                                        } }) }) }) }) }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
 }
 var Divider_default = React.memo(Divider, arePropsEqual);
 
@@ -2382,6 +2425,27 @@ function Html({ children, backgroundColor = "#ffffff", }) {
     );
 }
 
+// Helper to build link href based on innerLink type
+function buildLinkHref$1(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return null;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url || null;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : null;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : null;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : null;
+        case "page_top":
+            return "#top";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return null;
+    }
+}
 function getBorderStyle$3(border) {
     if (!border)
         return {};
@@ -2424,7 +2488,10 @@ function getBorderStyleString$1(border) {
 }
 function Image({ config, devNode, devMode }) {
     var _a, _b;
-    const { src, alt, href, target, mobile } = config;
+    const { src, alt, innerLink, mobile } = config;
+    // Resolve href and target from innerLink
+    const href = buildLinkHref$1(innerLink);
+    const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     const seed = src + (alt || "");
     const instanceId = seed
         .split("")
@@ -2454,32 +2521,56 @@ function Image({ config, devNode, devMode }) {
         ? parseInt(config.maxWidth, 10)
         : undefined;
     const imgWidthAttr = isPercent ? (maxWidthPx !== null && maxWidthPx !== void 0 ? maxWidthPx : undefined) : widthAttr;
-    // 2. Mobile Overrides (Every property used)
+    // 2. Mobile Overrides — only emit CSS properties that are explicitly set,
+    // so unspecified properties are left untouched (no forced defaults).
     let mobileCss = "";
     if (mobile) {
+        // .wrap-${imgClass} rules
+        const wrapRules = [
+            // Always reset min-width so the px lock from desktop can be overridden
+            "min-width: 0 !important;",
+        ];
+        if (mobile.width !== undefined)
+            wrapRules.push(`width: ${mobile.width} !important;`);
+        if (mobile.maxWidth !== undefined)
+            wrapRules.push(`max-width: ${mobile.maxWidth} !important;`);
+        // .td-${imgClass} rules
+        const tdRules = [];
+        if (mobile.padding !== undefined)
+            tdRules.push(`padding: ${mobile.padding} !important;`);
+        if (mobile.backgroundColor !== undefined)
+            tdRules.push(`background-color: ${mobile.backgroundColor} !important;`);
+        // .${imgClass} rules
+        const imgRules = [];
+        if (mobile.width !== undefined)
+            imgRules.push(`width: ${mobile.width} !important;`);
+        if (mobile.height !== undefined)
+            imgRules.push(`height: ${mobile.height} !important;`);
+        if (mobile.maxWidth !== undefined)
+            imgRules.push(`max-width: ${mobile.maxWidth} !important;`);
+        if (mobile.maxHeight !== undefined)
+            imgRules.push(`max-height: ${mobile.maxHeight} !important;`);
+        if (mobile.borderRadius !== undefined)
+            imgRules.push(`border-radius: ${mobile.borderRadius} !important;`);
+        if (mobile.hidden !== undefined)
+            imgRules.push(`display: ${mobile.hidden ? "none" : "block"} !important;`);
+        if (mobile.objectFit !== undefined)
+            imgRules.push(`object-fit: ${mobile.objectFit} !important;`);
+        if (mobile.objectPosition !== undefined)
+            imgRules.push(`object-position: ${mobile.objectPosition} !important;`);
+        if (mobile.border !== undefined)
+            imgRules.push(getBorderStyleString$1(mobile.border));
         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;
+          ${wrapRules.join("\n          ")}
         }
         .td-${imgClass} {
-          padding: ${mobile.padding || "0"} !important;
-          background-color: ${mobile.backgroundColor || "transparent"} !important;
-          width: 100% !important;
+          ${tdRules.join("\n          ")}
         }
         .${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$1(mobile.border)}
+          ${imgRules.join("\n          ")}
         }
       }
     `;
@@ -2497,7 +2588,7 @@ function Image({ config, devNode, devMode }) {
         objectFit: config.objectFit,
         objectPosition: config.objectPosition,
     };
-    const imageElement = (jsxRuntime.jsx("img", { src: src, alt: alt, width: imgWidthAttr, height: heightAttr !== "auto" ? heightAttr : undefined, className: imgClass, style: imgStyle }));
+    const imageElement = (jsxRuntime.jsx("img", { src: src, alt: alt, width: imgWidthAttr, height: heightAttr !== "auto" ? heightAttr : undefined, className: imgClass, style: imgStyle, draggable: !devMode }));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mobile && jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: mobileCss } }), jsxRuntime.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"
@@ -2510,7 +2601,9 @@ function Image({ config, devNode, devMode }) {
                                     fontSize: "0",
                                     lineHeight: "0",
                                     width: tableWidth, // Lock the cell as well
-                                }, children: href && !devMode ? (jsxRuntime.jsx("a", { href: href, target: target, style: { display: "block", width: "100%" }, children: imageElement })) : (imageElement) }) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })] }));
+                                }, children: href && !devMode ? (jsxRuntime.jsx("a", { href: href, target: target, ...(target === "_blank"
+                                        ? { rel: "noopener noreferrer" }
+                                        : {}), style: { display: "block", width: "100%" }, children: imageElement })) : (imageElement) }) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })] }));
 }
 var Image_default = React.memo(Image, arePropsEqual);
 
@@ -2584,7 +2677,7 @@ function Row({ children, config, devNode, devMode }) {
     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;
+    const target = ((_a = config.innerLink) === null || _a === void 0 ? void 0 : _a.target) || "_blank";
     // 1. Outer TD: Background, Border Radius, Width, Height.
     const backgroundTdStyle = {
         backgroundColor: config.backgroundColor,
@@ -2659,7 +2752,7 @@ function Row({ children, config, devNode, devMode }) {
                                                                                 }, className: "child-cell", children: child }), index < numChildren - 1 &&
                                                                                 config.gap && (jsxRuntime.jsx("td", { width: config.gap, style: gapTdStyle, className: "row-gap-td", children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) }) }) }) }) }) }) }) }) }) }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
     if (href && !devMode) {
-        return (jsxRuntime.jsx("a", { href: href, ...(target && { target }), style: {
+        return (jsxRuntime.jsx("a", { href: href, ...({ target }), style: {
                 textDecoration: "none",
                 color: "inherit",
                 display: "block",
@@ -2905,7 +2998,7 @@ function buildIconifyUrl(config) {
     const template = process.env.ICONIFY_API_IMAGE_URI ||
         "https://iconify.pagenflow.com/api/image/{{height}}/{{color}}/{{rotate}}-{{rotate-orientation}}/{{icon-full-name}}.png";
     return template
-        .replace("{{height}}", String(numericHeight * 2))
+        .replace("{{height}}", String(numericHeight * 4))
         .replace("{{color}}", cleanColor)
         .replace("{{rotate}}", String(rotate))
         .replace("{{rotate-orientation}}", rotateOrientation)
@@ -2939,7 +3032,7 @@ function Icon({ config, devNode, devMode, children }) {
     // Determine icon source
     const iconSrc = buildIconifyUrl(config);
     const href = buildLinkHref(innerLink);
-    const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_self";
+    const target = (innerLink === null || innerLink === void 0 ? void 0 : innerLink.target) || "_blank";
     const align = justifyMap[justifyContent];
     // Get border styles
     const borderStyle = getBorderStyle(border);