@pagenflow/email 1.1.5 → 1.1.7

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { memo, createElement, Fragment, useEffect } from 'react';
+import React, { memo, Fragment, useEffect } from 'react';
 
 function Body({ children, config = {} }) {
     var _a, _b, _c, _d;
@@ -17330,26 +17330,6 @@ 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 = {
-        color: color,
-        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);
@@ -17384,16 +17364,24 @@ function Button({ config, devMode }) {
             border: "0 solid",
             margin: 0,
             padding: 0,
-        }, children: jsx("tbody", { children: jsx("tr", { children: jsxs("td", { children: [jsx("div", { dangerouslySetInnerHTML: { __html: vmlButton } }), jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
-                                borderCollapse: "collapse",
-                                width: "100%",
-                            }, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { style: buttonTdStyle, children: createElement(devMode ? "button" : "a", Object.assign(Object.assign({}, (devMode
-                                            ? {}
-                                            : {
-                                                href,
-                                                target: "_blank",
-                                                rel: "noopener noreferrer",
-                                            })), { style: linkStyle, draggable: false }), children) }) }) }) })] }) }) }) }));
+        }, children: jsx("tbody", { children: jsx("tr", { children: 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;">
+                ${typeof children === "string" ? children : ""}
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <!--<![endif]-->
+    `,
+                    } }) }) }) }));
 }
 var Button_default = memo(Button, arePropsEqual);