react-email 4.0.7 → 4.0.9

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-email",
-  "version": "4.0.7",
+  "version": "4.0.9",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
-    "email": "./dist/cli/index.js"
+    "email": "./dist/cli/index.mjs"
   },
   "license": "MIT",
   "repository": {
@@ -19,70 +19,68 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@babel/parser": "7.24.5",
-    "@babel/traverse": "7.25.6",
-    "chalk": "4.1.2",
-    "chokidar": "4.0.3",
-    "commander": "11.1.0",
-    "debounce": "2.0.0",
-    "esbuild": "0.25.0",
-    "glob": "10.3.4",
-    "log-symbols": "4.1.0",
-    "mime-types": "2.1.35",
-    "next": "15.2.4",
-    "normalize-path": "3.0.0",
-    "ora": "5.4.1",
-    "socket.io": "4.8.1"
+    "@babel/parser": "^7.27.0",
+    "@babel/traverse": "^7.27.0",
+    "chalk": "^5.0.0",
+    "chokidar": "^4.0.3",
+    "commander": "^13.0.0",
+    "debounce": "^2.0.0",
+    "esbuild": "^0.25.0",
+    "glob": "^11.0.0",
+    "log-symbols": "^7.0.0",
+    "mime-types": "^3.0.0",
+    "next": "^15.2.4",
+    "normalize-path": "^3.0.0",
+    "ora": "^8.0.0",
+    "socket.io": "^4.8.1"
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
-    "@lottiefiles/dotlottie-react": "0.12.3",
-    "@radix-ui/colors": "1.0.1",
-    "@radix-ui/react-collapsible": "1.1.0",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-popover": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.2",
-    "@swc/core": "1.4.15",
+    "@lottiefiles/dotlottie-react": "0.13.3",
+    "@radix-ui/colors": "3.0.0",
+    "@radix-ui/react-collapsible": "1.1.7",
+    "@radix-ui/react-dropdown-menu": "2.1.10",
+    "@radix-ui/react-popover": "1.1.10",
+    "@radix-ui/react-slot": "1.2.0",
+    "@radix-ui/react-tabs": "1.1.7",
+    "@radix-ui/react-toggle-group": "1.1.6",
+    "@radix-ui/react-tooltip": "1.2.3",
+    "@swc/core": "1.11.21",
     "@types/babel__core": "7.20.5",
-    "@types/babel__traverse": "*",
+    "@types/babel__traverse": "7.20.7",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
-    "@types/node": "22.10.2",
+    "@types/node": "22.14.1",
     "@types/normalize-path": "3.0.2",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@types/webpack": "5.28.5",
-    "@vercel/style-guide": "5.1.0",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
-    "framer-motion": "12.0.0-alpha.2",
+    "framer-motion": "12.7.5",
     "jiti": "2.4.2",
     "json5": "2.2.3",
     "module-punycode": "npm:punycode@2.3.1",
-    "node-html-parser": "6.1.13",
-    "postcss": "8.4.40",
-    "prettier-plugin-tailwindcss": "0.6.6",
+    "node-html-parser": "7.0.1",
+    "postcss": "8.5.3",
     "pretty-bytes": "6.1.1",
-    "prism-react-renderer": "2.1.0",
+    "prism-react-renderer": "2.4.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "sharp": "0.33.3",
-    "socket.io-client": "4.8.0",
-    "sonner": "1.7.1",
-    "source-map-js": "1.0.2",
+    "sharp": "0.34.1",
+    "socket.io-client": "4.8.1",
+    "sonner": "2.0.3",
+    "source-map-js": "1.2.1",
     "spamc": "0.0.5",
-    "stacktrace-parser": "0.1.10",
-    "tailwind-merge": "2.2.0",
+    "stacktrace-parser": "0.1.11",
+    "tailwind-merge": "3.2.0",
     "tailwindcss": "3.4.0",
-    "tsup": "7.2.0",
-    "tsx": "4.9.0",
-    "typescript": "5.8.2",
+    "tsup": "8.4.0",
+    "tsx": "4.19.3",
+    "typescript": "5.8.3",
     "use-debounce": "10.0.4",
-    "zod": "3.24.2",
-    "@react-email/components": "0.0.36"
+    "zod": "3.24.3",
+    "@react-email/components": "0.0.37"
   },
   "scripts": {
     "build": "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",

package/src/actions/email-validation/check-compatibility.ts

@@ -2,9 +2,9 @@
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
 import {
-  type SourceLocation,
   convertLocationIntoObject,
   getObjectVariables,
+  type SourceLocation,
 } from '../../utils/caniemail/ast/get-object-variables';
 import type { StylePropertyUsage } from '../../utils/caniemail/ast/get-used-style-properties';
 import {

package/src/actions/email-validation/check-images.spec.tsx

@@ -1,4 +1,4 @@
-import { type ImageCheckingResult, checkImages } from './check-images';
+import { checkImages, type ImageCheckingResult } from './check-images';
 
 test('checkImages()', async () => {
   const results: ImageCheckingResult[] = [];

package/src/actions/email-validation/check-links.spec.tsx

@@ -1,4 +1,4 @@
-import { type LinkCheckingResult, checkLinks } from './check-links';
+import { checkLinks, type LinkCheckingResult } from './check-links';
 
 test('checkLinks()', async () => {
   const results: LinkCheckingResult[] = [];

package/src/actions/email-validation/quick-fetch.ts

@@ -1,5 +1,5 @@
-import type { IncomingMessage } from 'node:http';
 import http from 'node:http';
+import type { IncomingMessage } from 'node:http';
 import https from 'node:https';
 
 export const quickFetch = (url: URL) => {

package/src/actions/render-email-by-path.tsx

@@ -3,7 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
-import ora from 'ora';
+import ora, { type Ora } from 'ora';
 import { isBuilding, isPreviewDevelopment } from '../app/env';
 import { getEmailComponent } from '../utils/get-email-component';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
@@ -35,7 +35,7 @@ export const renderEmailByPath = async (
   const timeBeforeEmailRendered = performance.now();
 
   const emailFilename = path.basename(emailPath);
-  let spinner: ora.Ora | undefined;
+  let spinner: Ora | undefined;
   if (!isBuilding && !isPreviewDevelopment) {
     spinner = ora({
       text: `Rendering email template ${emailFilename}\n`,
@@ -76,11 +76,11 @@ export const renderEmailByPath = async (
 
     const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
 
-    const milisecondsToRendered = performance.now() - timeBeforeEmailRendered;
-    let timeForConsole = `${milisecondsToRendered.toFixed(0)}ms`;
-    if (milisecondsToRendered <= 450) {
+    const millisecondsToRendered = performance.now() - timeBeforeEmailRendered;
+    let timeForConsole = `${millisecondsToRendered.toFixed(0)}ms`;
+    if (millisecondsToRendered <= 450) {
       timeForConsole = chalk.green(timeForConsole);
-    } else if (milisecondsToRendered <= 1000) {
+    } else if (millisecondsToRendered <= 1000) {
       timeForConsole = chalk.yellow(timeForConsole);
     } else {
       timeForConsole = chalk.red(timeForConsole);

package/src/app/preview/[...slug]/preview.tsx

@@ -8,8 +8,8 @@ import { useDebouncedCallback } from 'use-debounce';
 import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
-  ResizableWrapper,
   makeIframeDocumentBubbleEvents,
+  ResizableWrapper,
 } from '../../../components/resizable-wrapper';
 import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';

package/src/commands/testing/out/magic-links/aws-verify-email.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html dir="ltr" lang="en">
+  <head>
+    <link rel="preload" as="image" href="/static/aws-logo.png" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <!--$-->
+  </head>
+  <body style="background-color:#fff;color:#212121">
+    <div
+      style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
+      AWS Email Verification
+      <div>
+         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
+      </div>
+    </div>
+    <table
+      align="center"
+      width="100%"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      role="presentation"
+      style="max-width:37.5em;padding:20px;margin:0 auto;background-color:#eee">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <table
+              align="center"
+              width="100%"
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              role="presentation"
+              style="background-color:#fff">
+              <tbody>
+                <tr>
+                  <td>
+                    <table
+                      align="center"
+                      width="100%"
+                      border="0"
+                      cellpadding="0"
+                      cellspacing="0"
+                      role="presentation"
+                      style="background-color:#252f3d;display:flex;padding:20px 0;align-items:center;justify-content:center">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <img
+                              alt="AWS&#x27;s Logo"
+                              height="45"
+                              src="/static/aws-logo.png"
+                              style="display:block;outline:none;border:none;text-decoration:none"
+                              width="75" />
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <table
+                      align="center"
+                      width="100%"
+                      border="0"
+                      cellpadding="0"
+                      cellspacing="0"
+                      role="presentation"
+                      style="padding:25px 35px">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <h1
+                              style="color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:20px;font-weight:bold;margin-bottom:15px">
+                              Verify your email address
+                            </h1>
+                            <p
+                              style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;margin-bottom:14px;margin-top:16px;margin-right:0;margin-left:0">
+                              Thanks for starting the new AWS account creation
+                              process. We want to make sure it&#x27;s really
+                              you. Please enter the following verification code
+                              when prompted. If you don&#x27;t want to create an
+                              account, you can ignore this message.
+                            </p>
+                            <table
+                              align="center"
+                              width="100%"
+                              border="0"
+                              cellpadding="0"
+                              cellspacing="0"
+                              role="presentation"
+                              style="display:flex;align-items:center;justify-content:center">
+                              <tbody>
+                                <tr>
+                                  <td>
+                                    <p
+                                      style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0;font-weight:bold;text-align:center;margin-top:16px;margin-bottom:16px;margin-left:0;margin-right:0">
+                                      Verification code
+                                    </p>
+                                    <p
+                                      style="font-size:36px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:10px 0;font-weight:bold;text-align:center;margin-top:16px;margin-right:0;margin-bottom:16px;margin-left:0"></p>
+                                    <p
+                                      style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0px;text-align:center;margin-top:16px;margin-bottom:16px;margin-left:0px;margin-right:0px">
+                                      (This code is valid for 10 minutes)
+                                    </p>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <hr
+                      style="width:100%;border:none;border-top:1px solid #eaeaea" />
+                    <table
+                      align="center"
+                      width="100%"
+                      border="0"
+                      cellpadding="0"
+                      cellspacing="0"
+                      role="presentation"
+                      style="padding:25px 35px">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <p
+                              style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0px;margin-top:16px;margin-bottom:16px;margin-left:0px;margin-right:0px">
+                              Amazon Web Services will never email you and ask
+                              you to disclose or verify your password, credit
+                              card, or banking account number.
+                            </p>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p
+              style="font-size:12px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;padding:0 20px;margin-top:16px;margin-right:0;margin-bottom:16px;margin-left:0">
+              This message was produced and distributed by Amazon Web Services,
+              Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
+              Services, Inc.. All rights reserved. AWS is a registered trademark
+              of<!-- -->
+              <a
+                href="https://amazon.com"
+                style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
+                target="_blank"
+                >Amazon.com</a
+              >, Inc. View our<!-- -->
+              <a
+                href="https://amazon.com"
+                style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
+                target="_blank"
+                >privacy policy</a
+              >.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!--/$-->
+  </body>
+</html>

package/src/commands/testing/out/magic-links/linear-login-code.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html dir="ltr" lang="en">
+  <head>
+    <link rel="preload" as="image" href="/static/linear-logo.png" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <!--$-->
+  </head>
+  <body
+    style='background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif'>
+    <div
+      style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
+      Your login code for Linear
+      <div>
+         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
+      </div>
+    </div>
+    <table
+      align="center"
+      width="100%"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      role="presentation"
+      style="max-width:560px;margin:0 auto;padding:20px 0 48px">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <img
+              alt="Linear"
+              height="42"
+              src="/static/linear-logo.png"
+              style="display:block;outline:none;border:none;text-decoration:none;border-radius:21px;width:42px;height:42px"
+              width="42" />
+            <h1
+              style="font-size:24px;letter-spacing:-0.5px;line-height:1.3;font-weight:400;color:#484848;padding:17px 0 0">
+              Your login code for Linear
+            </h1>
+            <table
+              align="center"
+              width="100%"
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              role="presentation"
+              style="padding:27px 0 27px">
+              <tbody>
+                <tr>
+                  <td>
+                    <a
+                      href="https://linear.app"
+                      style="line-height:100%;text-decoration:none;display:block;max-width:100%;mso-padding-alt:0px;background-color:#5e6ad2;border-radius:3px;font-weight:600;color:#fff;font-size:15px;text-align:center;padding:11px 23px 11px 23px"
+                      target="_blank"
+                      ><span
+                        ><!--[if mso]><i style="mso-font-width:383.33333333333337%;mso-text-raise:16.5" hidden>&#8202;&#8202;&#8202;</i><![endif]--></span
+                      ><span
+                        style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:8.25px"
+                        >Login to Linear</span
+                      ><span
+                        ><!--[if mso]><i style="mso-font-width:383.33333333333337%" hidden>&#8202;&#8202;&#8202;&#8203;</i><![endif]--></span
+                      ></a
+                    >
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p
+              style="font-size:15px;line-height:1.4;margin:0 0 15px;color:#3c4149;margin-top:16px;margin-right:0;margin-bottom:16px;margin-left:0">
+              This link and code will only be valid for the next 5 minutes. If
+              the link does not work, you can use the login verification code
+              directly:
+            </p>
+            <code
+              style="font-family:monospace;font-weight:700;padding:1px 4px;background-color:#dfe1e4;letter-spacing:-0.3px;font-size:21px;border-radius:4px;color:#3c4149"></code>
+            <hr
+              style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#dfe1e4;margin:42px 0 26px" />
+            <a
+              href="https://linear.app"
+              style="color:#b4becc;text-decoration-line:none;font-size:14px"
+              target="_blank"
+              >Linear</a
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!--/$-->
+  </body>
+</html>

package/src/commands/testing/out/magic-links/notion-magic-link.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html dir="ltr" lang="en">
+  <head>
+    <link rel="preload" as="image" href="/static/notion-logo.png" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <!--$-->
+  </head>
+  <body style="background-color:#ffffff">
+    <div
+      style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
+      Log in with this magic link
+      <div>
+         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
+      </div>
+    </div>
+    <table
+      align="center"
+      width="100%"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      role="presentation"
+      style="max-width:37.5em;padding-left:12px;padding-right:12px;margin:0 auto">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <h1
+              style="color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:24px;font-weight:bold;margin:40px 0;padding:0">
+              Login
+            </h1>
+            <a
+              href="https://notion.so"
+              style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline;display:block;margin-bottom:16px"
+              target="_blank"
+              >Click here to log in with this magic link</a
+            >
+            <p
+              style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;margin-bottom:14px;margin-top:16px;margin-right:0;margin-left:0">
+              Or, copy and paste this temporary login code:
+            </p>
+            <code
+              style="display:inline-block;padding:16px 4.5%;width:90.5%;background-color:#f4f4f4;border-radius:5px;border:1px solid #eee;color:#333"></code>
+            <p
+              style="font-size:14px;line-height:24px;color:#ababab;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;margin-top:14px;margin-bottom:16px;margin-right:0;margin-left:0">
+              If you didn&#x27;t try to login, you can safely ignore this email.
+            </p>
+            <p
+              style="font-size:14px;line-height:24px;color:#ababab;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;margin-top:12px;margin-bottom:38px;margin-right:0;margin-left:0">
+              Hint: You can set a permanent password in Settings &amp; members →
+              My account.
+            </p>
+            <img
+              alt="Notion&#x27;s Logo"
+              height="32"
+              src="/static/notion-logo.png"
+              style="display:block;outline:none;border:none;text-decoration:none"
+              width="32" />
+            <p
+              style="font-size:12px;line-height:22px;color:#898989;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin-top:12px;margin-bottom:24px">
+              <a
+                href="https://notion.so"
+                style="color:#898989;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
+                target="_blank"
+                >Notion.so</a
+              >, the all-in-one-workspace<br />for your notes, tasks, wikis, and
+              databases.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!--/$-->
+  </body>
+</html>

package/src/commands/testing/out/magic-links/plaid-verify-identity.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html dir="ltr" lang="en">
+  <head>
+    <link rel="preload" as="image" href="/static/plaid-logo.png" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <!--$-->
+  </head>
+  <body
+    style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif">
+    <table
+      align="center"
+      width="100%"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      role="presentation"
+      style="max-width:360px;background-color:#ffffff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;margin:0 auto;padding:68px 0 130px">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <img
+              alt="Plaid"
+              height="88"
+              src="/static/plaid-logo.png"
+              style="display:block;outline:none;border:none;text-decoration:none;margin:0 auto"
+              width="212" />
+            <p
+              style="font-size:11px;line-height:16px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;margin:16px 8px 8px 8px;text-transform:uppercase;text-align:center;margin-top:16px;margin-right:8px;margin-bottom:16px;margin-left:8px">
+              Verify Your Identity
+            </p>
+            <h1
+              style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">
+              Enter the following code to finish linking Venmo.
+            </h1>
+            <table
+              align="center"
+              width="100%"
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              role="presentation"
+              style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px">
+              <tbody>
+                <tr>
+                  <td>
+                    <p
+                      style="font-size:32px;line-height:40px;color:#000;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;margin:0 auto;display:block;text-align:center;margin-top:16px;margin-right:auto;margin-bottom:16px;margin-left:auto"></p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p
+              style="font-size:15px;line-height:23px;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;margin:0;text-align:center;margin-top:16px;margin-bottom:16px;margin-left:0;margin-right:0">
+              Not expecting this email?
+            </p>
+            <p
+              style="font-size:15px;line-height:23px;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;margin:0;text-align:center;margin-top:16px;margin-bottom:16px;margin-left:0;margin-right:0">
+              Contact<!-- -->
+              <a
+                href="mailto:login@plaid.com"
+                style="color:#444;text-decoration-line:none;text-decoration:underline"
+                target="_blank"
+                >login@plaid.com</a
+              >
+              <!-- -->if you did not request this code.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p
+      style="font-size:12px;line-height:23px;color:#000;font-weight:800;letter-spacing:0;margin:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase;margin-bottom:16px;margin-left:0;margin-right:0">
+      Securely powered by Plaid.
+    </p>
+    <!--/$-->
+  </body>
+</html>