@pagenflow/email 1.1.7 → 1.1.8

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>
@@ -17373,8 +17392,8 @@ 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: ${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>