@pagenflow/email 1.1.7 → 1.1.9

package/dist/index.cjs.js

@@ -17332,6 +17332,25 @@ const justifyMap$2 = {
 function Button({ config, devMode }) {
     const { href, children, backgroundColor = "#007bff", // Default blue
     color = "#ffffff", padding = "12px 24px", borderRadius = "3px", width, justifyContent = "center", } = config;
+    // 1. Link (A) Tag Styles (Fallback for Webmail/Mobile)
+    const linkStyle = {
+        textDecoration: "none",
+        display: "block",
+        // Apply padding here for simplicity, though the TD is more reliable
+        padding: padding,
+        wordBreak: "break-word",
+        fontFamily: "Arial, sans-serif",
+        fontSize: "16px",
+        fontWeight: "bold",
+        lineHeight: "1.2",
+    };
+    // 2. Button Wrapper TD Style
+    const buttonTdStyle = {
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        padding: "0",
+        width: width || "auto",
+    };
     // --- VML Calculation and Code for Outlook Compatibility ---
     // VML needs fixed pixel height. We estimate it based on padding.
     const numericPadding = parseInt(padding.split(" ")[0] || "12", 10);
@@ -17347,7 +17366,7 @@ function Button({ config, devMode }) {
     <!--[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;v-text-anchor:middle;width:${vmlWidth}px;" arcsize="${(parseInt(borderRadius) / vmlHeight) * 100}%" strokecolor="${vmlFillColor}" fillcolor="${vmlFillColor}">
       <w:anchorlock/>
-      <center style="color:${color};font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
+      <center style="color:${color};font-family:${linkStyle.fontFamily};font-size:${linkStyle.fontSize};font-weight:${linkStyle.fontWeight};">
         ${typeof children === "string" ? children : ""}
       </center>
     </v:roundrect>
@@ -17366,15 +17385,15 @@ function Button({ config, devMode }) {
             border: "0 solid",
             margin: 0,
             padding: 0,
-        }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
+        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
                         __html: `
       ${vmlButton}
       <!--[if !mso]><!-->
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
         <tbody>
           <tr>
-            <td style="background-color: ${backgroundColor}; border-radius: ${borderRadius}; padding: 0; width: ${width || "auto"};">
-              <a href="${href}" target="_blank" rel="noopener noreferrer" style="color: ${color}; text-decoration: none; display: block; padding: ${padding}; word-break: break-word; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 1.2;">
+            <td style="background-color: ${buttonTdStyle.backgroundColor}; border-radius: ${buttonTdStyle.borderRadius}; padding: ${buttonTdStyle.padding}; width: ${buttonTdStyle.width};">
+              <a href="${href}" target="_blank" rel="noopener noreferrer" style="color: ${color}; text-decoration: ${linkStyle.textDecoration}; display: ${linkStyle.display}; padding: ${linkStyle.padding}; word-break: ${linkStyle.wordBreak}; font-family: ${linkStyle.fontFamily}; font-size: ${linkStyle.fontSize}; font-weight: ${linkStyle.fontWeight}; line-height: ${linkStyle.lineHeight};">
                 ${typeof children === "string" ? children : ""}
               </a>
             </td>
@@ -18020,7 +18039,7 @@ function Image({ config, devNode, devMode }) {
             // --- End dev
             width: width || "100%",
             borderCollapse: "collapse",
-        }, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: "center", children: content }) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
+        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: "center", children: content }) }) }), devMode && !!devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] }));
 }
 var Image_default = React.memo(Image, arePropsEqual);
 
@@ -18219,7 +18238,7 @@ function Text({ config, devMode, children }) {
     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: jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: (_a = text !== null && text !== void 0 ? text : children) !== null && _a !== void 0 ? _a : "" } }) }) }) }) }));
+        }, onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: tdStyle, align: textAlign, children: jsxRuntime.jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: (_a = text !== null && text !== void 0 ? text : children) !== null && _a !== void 0 ? _a : "" } }) }) }) }) }));
 }
 var Text_default = React.memo(Text, arePropsEqual);