@depup/react-email 5.2.10-depup.1 → 6.9.0-depup.1

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "@depup/react-email",
-  "version": "5.2.10-depup.1",
+  "version": "6.9.0-depup.1",
   "description": "A live preview of your emails right in your browser. (with updated dependencies)",
   "bin": {
-    "email": "./dist/index.mjs"
+    "email": "./dist/cli/index.mjs"
   },
   "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.mts",
   "license": "MIT",
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "require": {
+      "types": "./dist/index.d.cts",
+      "default": "./dist/index.cjs"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/resend/react-email.git",
@@ -25,54 +37,70 @@
   "engines": {
     "node": ">=20.0.0"
   },
+  "peerDependencies": {
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
+  },
   "dependencies": {
-    "@babel/parser": "^7.29.2",
-    "@babel/traverse": "^7.29.0",
+    "@babel/parser": "^8.0.4",
+    "@babel/traverse": "^8.0.4",
+    "@react-email/render": ">=2.1.0",
     "chokidar": "^5.0.0",
-    "commander": "^14.0.3",
+    "commander": "^15.0.0",
     "conf": "^15.1.0",
+    "css-tree": "3.2.1",
     "debounce": "^3.0.0",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.1",
     "glob": "^13.0.6",
-    "jiti": "^2.6.1",
+    "jiti": "^2.7.0",
     "log-symbols": "^7.0.1",
+    "marked": "^18.0.7",
     "mime-types": "^3.0.2",
     "normalize-path": "^3.0.0",
-    "nypm": "^0.6.5",
-    "ora": "^9.3.0",
+    "nypm": "^0.6.8",
+    "picospinner": "^3.0.0",
+    "prismjs": "^1.30.0",
     "prompts": "2.4.2",
     "socket.io": "^4.8.3",
+    "tailwindcss": "^4.3.3",
     "tsconfig-paths": "4.2.0"
   },
   "devDependencies": {
+    "@responsive-email/react-email": "0.0.4",
     "@types/babel__core": "7.20.5",
     "@types/babel__traverse": "7.20.7",
+    "@types/css-tree": "2.3.11",
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
-    "next": "16.1.7",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "@types/shelljs": "0.10.0",
+    "next": "16.2.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "shelljs": "0.10.0",
     "shlex": "3.0.0",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
-    "@react-email/components": "1.0.10"
+    "yalc": "1.0.0-pre.53",
+    "@react-email/render": "2.1.0"
   },
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch src",
     "clean": "rm -rf dist",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
   },
   "depup": {
     "changes": {
       "@babel/parser": {
-        "from": "7.27.0",
-        "to": "^7.29.2"
+        "from": "7.29.2",
+        "to": "^8.0.4"
       },
       "@babel/traverse": {
-        "from": "7.27.0",
-        "to": "^7.29.0"
+        "from": "7.29.0",
+        "to": "^8.0.4"
       },
       "chokidar": {
         "from": "^4.0.3",
@@ -80,7 +108,7 @@
       },
       "commander": {
         "from": "^13.0.0",
-        "to": "^14.0.3"
+        "to": "^15.0.0"
       },
       "conf": {
         "from": "^15.0.2",
@@ -91,38 +119,42 @@
         "to": "^3.0.0"
       },
       "esbuild": {
-        "from": "0.27.3",
-        "to": "^0.28.0"
+        "from": "^0.28.0",
+        "to": "^0.28.1"
       },
       "jiti": {
-        "from": "2.4.2",
-        "to": "^2.6.1"
+        "from": "2.6.1",
+        "to": "^2.7.0"
       },
       "log-symbols": {
         "from": "^7.0.0",
         "to": "^7.0.1"
       },
+      "marked": {
+        "from": "^15.0.12",
+        "to": "^18.0.7"
+      },
       "mime-types": {
         "from": "^3.0.0",
         "to": "^3.0.2"
       },
       "nypm": {
-        "from": "0.6.2",
-        "to": "^0.6.5"
-      },
-      "ora": {
-        "from": "^8.0.0",
-        "to": "^9.3.0"
+        "from": "0.6.6",
+        "to": "^0.6.8"
       },
       "socket.io": {
         "from": "^4.8.1",
         "to": "^4.8.3"
+      },
+      "tailwindcss": {
+        "from": "^4.1.18",
+        "to": "^4.3.3"
       }
     },
-    "depsUpdated": 13,
+    "depsUpdated": 14,
     "originalPackage": "react-email",
-    "originalVersion": "5.2.10",
-    "processedAt": "2026-04-03T00:45:49.488Z",
+    "originalVersion": "6.9.0",
+    "processedAt": "2026-07-21T17:30:39.869Z",
     "smokeTest": "failed"
   }
 }

package/src/components/body/__snapshots__/body.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Body> component > margin resetting behavior > should reset the margin property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginBlock property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-block:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-block:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginBlockEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-block-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-block-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginBlockStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-block-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-block-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginBottom property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-bottom:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-bottom:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginInline property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-inline:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-inline:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginInlineEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-inline-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-inline-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginInlineStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-inline-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-inline-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginLeft property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-left:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-left:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginRight property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-right:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-right:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+
+exports[`<Body> component > margin resetting behavior > should reset the marginTop property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-top:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-top:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;

package/src/components/body/body.spec.tsx

@@ -0,0 +1,78 @@
+import { render } from '@react-email/render';
+import { Body } from './index.js';
+import { marginProperties, paddingProperties } from './margin-properties.js';
+
+describe('<Body> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Body>{testMessage}</Body>);
+    expect(html).toContain(testMessage);
+  });
+
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Body data-testid="body-test" style={style}>
+        Test
+      </Body>,
+    );
+    expect(html).toContain('style="background-color:red"');
+    expect(html).toContain('data-testid="body-test"');
+  });
+
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Body>Lorem ipsum</Body>);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en">Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`,
+    );
+  });
+
+  describe('margin resetting behavior', () => {
+    for (const property of marginProperties) {
+      it(`should reset the ${property} property when it comes from props`, async () => {
+        const actualOutput = await render(
+          <Body style={{ [property]: 10 }}>Random text</Body>,
+        );
+        expect(actualOutput).toMatchSnapshot();
+      });
+    }
+  });
+
+  it('resets body padding to override client default', async () => {
+    const actualOutput = await render(
+      <Body style={{ padding: '20px', backgroundColor: 'pink' }}>
+        Random text
+      </Body>,
+    );
+
+    const bodyStyle =
+      actualOutput.match(/<body[^>]*style="([^"]*)"/)?.[1] ?? '';
+    const tdStyle = actualOutput.match(/<td[^>]*style="([^"]*)"/)?.[1] ?? '';
+
+    expect(bodyStyle).toContain('padding:0');
+    expect(bodyStyle).toContain('background-color:pink');
+    expect(bodyStyle).not.toContain('padding:20px');
+    expect(tdStyle).toContain('padding:20px');
+  });
+
+  describe('padding resetting behavior', () => {
+    for (const property of paddingProperties) {
+      it(`resets the ${property} property on body when it comes from props`, async () => {
+        const actualOutput = await render(
+          <Body style={{ [property]: '10px' }}>Random text</Body>,
+        );
+        const kebabProperty = property.replace(
+          /[A-Z]/g,
+          (match) => `-${match.toLowerCase()}`,
+        );
+        const bodyStyle =
+          actualOutput.match(/<body[^>]*style="([^"]*)"/)?.[1] ?? '';
+        const tdStyle =
+          actualOutput.match(/<td[^>]*style="([^"]*)"/)?.[1] ?? '';
+
+        expect(bodyStyle).toContain(`${kebabProperty}:0`);
+        expect(tdStyle).toContain(`${kebabProperty}:10px`);
+      });
+    }
+  });
+});

package/src/components/body/body.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+import { marginProperties, paddingProperties } from './margin-properties.js';
+
+export type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
+
+export const Body = React.forwardRef<HTMLBodyElement, BodyProps>(
+  ({ children, style, ...props }, ref) => {
+    const bodyStyle: Record<string, string | number | undefined> = {
+      background: style?.background,
+      backgroundColor: style?.backgroundColor,
+    };
+    if (style) {
+      for (const property of [...marginProperties, ...paddingProperties]) {
+        // We reset the margin if the user sets it, this mimics the
+        // same behavior that would happen if this was only using the body.
+        // This avoids the incoming margin summing up with the margin
+        // defined by the email client on the body, or by the browser itself
+        bodyStyle[property] = style[property] !== undefined ? 0 : undefined;
+      }
+    }
+    return (
+      <body
+        {...props}
+        dir={props.dir ?? 'ltr'}
+        lang={props.lang ?? 'en'}
+        style={bodyStyle}
+        ref={ref}
+      >
+        <table
+          border={0}
+          width="100%"
+          cellPadding="0"
+          cellSpacing="0"
+          role="presentation"
+          align="center"
+        >
+          <tbody>
+            <tr>
+              {/*
+                Yahoo and AOL remove all styles of the body element while converting it to a div,
+                so we need to apply them to to an inner cell.
+
+                See https://github.com/resend/react-email/issues/662.
+              */}
+              <td
+                dir={props.dir ?? 'ltr'}
+                lang={props.lang ?? 'en'}
+                style={style}
+              >
+                {children}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </body>
+    );
+  },
+);
+
+Body.displayName = 'Body';
+markAsElement(Body);

package/src/components/body/index.ts

@@ -0,0 +1 @@
+export * from './body.js';

package/src/components/body/margin-properties.ts

@@ -0,0 +1,27 @@
+export const marginProperties: (keyof React.CSSProperties)[] = [
+  'margin',
+  'marginTop',
+  'marginBottom',
+  'marginRight',
+  'marginLeft',
+  'marginInline',
+  'marginBlock',
+  'marginBlockStart',
+  'marginBlockEnd',
+  'marginInlineStart',
+  'marginInlineEnd',
+];
+
+export const paddingProperties: (keyof React.CSSProperties)[] = [
+  'padding',
+  'paddingTop',
+  'paddingBottom',
+  'paddingRight',
+  'paddingLeft',
+  'paddingInline',
+  'paddingBlock',
+  'paddingBlockStart',
+  'paddingBlockEnd',
+  'paddingInlineStart',
+  'paddingInlineEnd',
+];

package/src/components/button/button.spec.tsx

@@ -0,0 +1,53 @@
+import { render } from '@react-email/render';
+import { Button } from './index.js';
+
+describe('<Button> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Button>{testMessage}</Button>);
+    expect(html).toContain(testMessage);
+  });
+
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Button data-testid="button-test" style={style}>
+        Test
+      </Button>,
+    );
+    expect(html).toContain('background-color:red');
+    expect(html).toContain('data-testid="button-test"');
+  });
+
+  it('renders correctly  with padding values from style prop', async () => {
+    const actualOutput = await render(
+      <Button href="https://example.com" style={{ padding: '12px 20px' }} />,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px;padding-top:12px;padding-right:20px;padding-bottom:12px;padding-left:20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18px" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"></span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a><!--/$-->"`,
+    );
+  });
+
+  it('renders the <Button> component with no padding value', async () => {
+    const actualOutput = await render(<Button href="https://example.com" />);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0px" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`,
+    );
+  });
+
+  it('allows users to overwrite style props', async () => {
+    const actualOutput = await render(
+      <Button
+        style={{
+          lineHeight: '150%',
+          display: 'block',
+          textDecoration: 'underline red',
+          maxWidth: '50%',
+        }}
+      />,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0px" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`,
+    );
+  });
+});

package/src/components/button/button.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+import { parsePadding } from './utils/parse-padding.js';
+import { pxToPt } from './utils/px-to-pt.js';
+
+export type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
+
+const maxFontWidth = 5;
+
+/**
+ * Computes a msoFontWidth \<= 5 and a count of space characters that,
+ * when applied, end up being as close to `expectedWidth` as possible.
+ */
+function computeFontWidthAndSpaceCount(expectedWidth: number) {
+  if (expectedWidth === 0) return [0, 0] as const;
+
+  let smallestSpaceCount = 0;
+
+  const computeRequiredFontWidth = () => {
+    if (smallestSpaceCount > 0) {
+      return expectedWidth / smallestSpaceCount / 2;
+    }
+
+    return Number.POSITIVE_INFINITY;
+  };
+
+  while (computeRequiredFontWidth() > maxFontWidth) {
+    smallestSpaceCount++;
+  }
+
+  return [computeRequiredFontWidth(), smallestSpaceCount] as const;
+}
+
+declare module 'react' {
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
+}
+
+export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
+  ({ children, style, target = '_blank', ...props }, ref) => {
+    const { paddingTop, paddingRight, paddingBottom, paddingLeft } =
+      parsePadding(style ?? {});
+
+    const y = (paddingTop ?? 0) + (paddingBottom ?? 0);
+    const textRaise = pxToPt(y);
+
+    const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(
+      paddingLeft ?? 0,
+    );
+    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(
+      paddingRight ?? 0,
+    );
+
+    return (
+      <a
+        {...props}
+        ref={ref}
+        style={{
+          lineHeight: '100%',
+          textDecoration: 'none',
+          display: 'inline-block',
+          maxWidth: '100%',
+          msoPaddingAlt: '0px',
+          ...style,
+          paddingTop,
+          paddingRight,
+          paddingBottom,
+          paddingLeft,
+        }}
+        target={target}
+      >
+        <span
+          dangerouslySetInnerHTML={{
+            // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
+            // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
+            // >= 500% so we need to add extra spaces accordingly.
+            //
+            // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
+            __html: `<!--[if mso]><i style="mso-font-width:${
+              plFontWidth * 100
+            }%;mso-text-raise:${textRaise}px" hidden>${'&#8202;'.repeat(
+              plSpaceCount,
+            )}</i><![endif]-->`,
+          }}
+        />
+        <span
+          style={{
+            maxWidth: '100%',
+            display: 'inline-block',
+            lineHeight: '120%',
+            msoPaddingAlt: '0px',
+            msoTextRaise: pxToPt(paddingBottom),
+          }}
+        >
+          {children}
+        </span>
+        <span
+          dangerouslySetInnerHTML={{
+            __html: `<!--[if mso]><i style="mso-font-width:${
+              prFontWidth * 100
+            }%" hidden>${'&#8202;'.repeat(
+              prSpaceCount,
+            )}&#8203;</i><![endif]-->`,
+          }}
+        />
+      </a>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+markAsElement(Button);

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.js';