react-email 4.0.0-alpha.4 → 4.0.0-alpha.6

package/src/components/toolbar.tsx

@@ -0,0 +1,197 @@
+'use client';
+import * as Tabs from '@radix-ui/react-tabs';
+import { LayoutGroup } from 'framer-motion';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { use, useEffect } from 'react';
+import { isBuilding } from '../app/env';
+import { PreviewContext } from '../contexts/preview';
+import { cn } from '../utils';
+import { IconArrowDown } from './icons/icon-arrow-down';
+import { IconReload } from './icons/icon-reload';
+import { IconScanner } from './icons/icon-scanner';
+import { IconScissors } from './icons/icon-scissors';
+import { Linter, type LintingRow, useLinter } from './toolbar/linter';
+import {
+  SpamAssassin,
+  type SpamCheckingResult,
+  useSpamAssassin,
+} from './toolbar/spam-assassin';
+import { ToolbarButton } from './toolbar/toolbar-button';
+import { useCachedState } from './toolbar/use-cached-state';
+
+export type ToolbarTabValue = 'linter' | 'spam-assassin';
+
+const ToolbarInner = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+
+  markup,
+  reactMarkup,
+  plainText,
+  emailPath,
+  emailSlug,
+}: ToolbarProps & {
+  markup: string;
+  reactMarkup: string;
+  plainText: string;
+  emailSlug: string;
+  emailPath: string;
+}) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
+    | undefined;
+
+  const toggled = activeTab !== undefined;
+
+  const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
+    const params = new URLSearchParams(searchParams);
+    if (newValue === undefined) {
+      params.delete('toolbar-panel');
+    } else {
+      params.set('toolbar-panel', newValue);
+    }
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =
+    useCachedState<SpamCheckingResult>(
+      `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
+    markup,
+    plainText,
+
+    initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
+  });
+
+  const [cachedLintingRows, setCachedLintingRows] = useCachedState<
+    LintingRow[]
+  >(`linter-${emailSlug.replaceAll('/', '-')}`);
+  const [lintingRows, { load: loadLinting }] = useLinter({
+    reactMarkup,
+    emailPath,
+    markup,
+
+    initialRows: serverLintingRows ?? cachedLintingRows,
+  });
+
+  if (!isBuilding) {
+    useEffect(() => {
+      (async () => {
+        const lintingRows = await loadLinting();
+        setCachedLintingRows(lintingRows);
+
+        const spamCheckingResult = await loadSpamChecking();
+        setCachedSpamCheckingResult(spamCheckingResult);
+      })();
+    }, []);
+  }
+
+  return (
+    <div
+      data-toggled={toggled}
+      className={cn(
+        'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
+        'data-[toggled=false]:h-8',
+      )}
+    >
+      <Tabs.Root
+        value={activeTab}
+        onValueChange={(newValue) => {
+          setActivePanelValue(newValue as ToolbarTabValue);
+        }}
+        asChild
+      >
+        <div className="flex flex-col h-full">
+          <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-7 w-full">
+            <LayoutGroup id="toolbar">
+              <Tabs.Trigger asChild value="spam-assassin">
+                <ToolbarButton active={activeTab === 'spam-assassin'}>
+                  <IconScissors />
+                  Spam Assassin
+                </ToolbarButton>
+              </Tabs.Trigger>
+              <Tabs.Trigger asChild value="linter">
+                <ToolbarButton active={activeTab === 'linter'}>
+                  <IconScanner />
+                  Linter
+                </ToolbarButton>
+              </Tabs.Trigger>
+            </LayoutGroup>
+            <div className="flex gap-1 ml-auto">
+              {isBuilding ? null : (
+                <ToolbarButton
+                  tooltip="Reload"
+                  onClick={async () => {
+                    if (activeTab === undefined) {
+                      setActivePanelValue('linter');
+                    }
+                    if (activeTab === 'spam-assassin') {
+                      await loadSpamChecking();
+                    } else {
+                      await loadLinting();
+                    }
+                  }}
+                >
+                  <IconReload />
+                </ToolbarButton>
+              )}
+              <ToolbarButton
+                tooltip="Toggle toolbar"
+                onClick={() => {
+                  if (activeTab === undefined) {
+                    setActivePanelValue('linter');
+                  } else {
+                    setActivePanelValue(undefined);
+                  }
+                }}
+              >
+                <IconArrowDown className="transition-transform group-data-[toggled=false]/toolbar:rotate-180" />
+              </ToolbarButton>
+            </div>
+          </Tabs.List>
+
+          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2">
+            <Tabs.Content value="linter">
+              <Linter rows={lintingRows} />
+            </Tabs.Content>
+            <Tabs.Content value="spam-assassin">
+              <SpamAssassin result={spamCheckingResult} />
+            </Tabs.Content>
+          </div>
+        </div>
+      </Tabs.Root>
+    </div>
+  );
+};
+
+interface ToolbarProps {
+  serverSpamCheckingResult: SpamCheckingResult | undefined;
+  serverLintingRows: LintingRow[] | undefined;
+}
+
+export const Toolbar = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+}: ToolbarProps) => {
+  const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
+
+  if (renderedEmailMetadata === undefined) return null;
+  const { markup, plainText, reactMarkup } = renderedEmailMetadata;
+
+  return (
+    <ToolbarInner
+      emailPath={emailPath}
+      emailSlug={emailSlug}
+      markup={markup}
+      reactMarkup={reactMarkup}
+      plainText={plainText}
+      serverLintingRows={serverLintingRows}
+      serverSpamCheckingResult={serverSpamCheckingResult}
+    />
+  );
+};

package/src/components/tooltip-content.tsx

@@ -1,6 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
-import { inter } from '../app/inter';
 import { cn } from '../utils';
 
 type ContentElement = React.ComponentRef<typeof TooltipPrimitive.Content>;
@@ -19,7 +18,7 @@ export const TooltipContent = React.forwardRef<
       {...props}
       className={cn(
         'z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs',
-        `${inter.variable} font-sans`,
+        'font-sans',
       )}
       ref={forwardedRef}
       sideOffset={sideOffset}

package/src/components/topbar/view-size-controls.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { motion } from 'framer-motion';
 import * as React from 'react';

package/src/components/topbar.tsx

@@ -1,37 +1,19 @@
 'use client';
 
+import { use } from 'react';
 import { Heading } from './heading';
 import { IconHideSidebar } from './icons/icon-hide-sidebar';
-import { Send } from './send';
+import { ShellContext } from './shell';
 import { Tooltip } from './tooltip';
-import { ActiveViewToggleGroup } from './topbar/active-view-toggle-group';
-import { ViewSizeControls } from './topbar/view-size-controls';
 
 interface TopbarProps {
-  currentEmailOpenSlug: string;
-  pathSeparator: string;
-  markup?: string;
-  onToggleSidebar?: () => void;
-  activeView?: string;
-  setActiveView?: (view: string) => void;
-  viewWidth?: number;
-  setViewWidth?: (width: number) => void;
-  viewHeight?: number;
-  setViewHeight?: (height: number) => void;
+  emailTitle: string;
+  children: React.ReactNode;
 }
 
-export const Topbar = ({
-  currentEmailOpenSlug,
-  pathSeparator,
-  markup,
-  activeView,
-  setActiveView,
-  viewWidth,
-  setViewWidth,
-  viewHeight,
-  setViewHeight,
-  onToggleSidebar,
-}: TopbarProps) => {
+export const Topbar = ({ emailTitle, children }: TopbarProps) => {
+  const { toggleSidebar } = use(ShellContext)!;
+
   return (
     <Tooltip.Provider>
       <header className="relative flex h-[3.3125rem] items-center justify-between gap-3 border-slate-6 border-b px-3">
@@ -41,9 +23,7 @@ export const Topbar = ({
               <button
                 className="relative hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
                 onClick={() => {
-                  if (onToggleSidebar) {
-                    onToggleSidebar();
-                  }
+                  toggleSidebar();
                 }}
                 type="button"
               >
@@ -54,30 +34,31 @@ export const Topbar = ({
           </Tooltip>
           <div className="hidden items-center overflow-hidden text-center lg:flex">
             <Heading as="h2" className="truncate" size="2" weight="medium">
-              {currentEmailOpenSlug.split(pathSeparator).pop()}
+              {emailTitle}
             </Heading>
           </div>
         </div>
         <div className="flex w-full items-center justify-between gap-3 lg:w-fit lg:justify-start">
-          {setViewWidth && setViewHeight && viewWidth && viewHeight ? (
-            <ViewSizeControls
-              setViewHeight={setViewHeight}
-              setViewWidth={setViewWidth}
-              viewHeight={viewHeight}
-              viewWidth={viewWidth}
-            />
-          ) : null}
-          {activeView && setActiveView ? (
-            <ActiveViewToggleGroup
-              activeView={activeView}
-              setActiveView={setActiveView}
-            />
-          ) : null}
-          {markup ? (
-            <div className="flex justify-end">
-              <Send markup={markup} />
-            </div>
-          ) : null}
+          {children}
+          {/* {setViewWidth && setViewHeight && viewWidth && viewHeight ? ( */}
+          {/*   <ViewSizeControls */}
+          {/*     setViewHeight={setViewHeight} */}
+          {/*     setViewWidth={setViewWidth} */}
+          {/*     viewHeight={viewHeight} */}
+          {/*     viewWidth={viewWidth} */}
+          {/*   /> */}
+          {/* ) : null} */}
+          {/* {activeView && setActiveView ? ( */}
+          {/*   <ActiveViewToggleGroup */}
+          {/*     activeView={activeView} */}
+          {/*     setActiveView={setActiveView} */}
+          {/*   /> */}
+          {/* ) : null} */}
+          {/* {markup ? ( */}
+          {/*   <div className="flex justify-end"> */}
+          {/*     <Send markup={markup} /> */}
+          {/*   </div> */}
+          {/* ) : null} */}
         </div>
       </header>
     </Tooltip.Provider>

package/src/contexts/emails.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { createContext, useContext, useState } from 'react';
 import { getEmailsDirectoryMetadataAction } from '../actions/get-emails-directory-metadata-action';
+import { isBuilding } from '../app/env';
 import { useHotreload } from '../hooks/use-hot-reload';
 import type { EmailsDirectory } from '../utils/get-emails-directory-metadata';
 
@@ -30,7 +31,7 @@ export const EmailsProvider = (props: {
   const [emailsDirectoryMetadata, setEmailsDirectoryMetadata] =
     useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
 
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+  if (!isBuilding) {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/contexts/preview.tsx

@@ -0,0 +1,81 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { createContext } from 'react';
+import type {
+  EmailRenderingResult,
+  RenderedEmailMetadata,
+} from '../actions/render-email-by-path';
+import { isBuilding } from '../app/env';
+import { useEmailRenderingResult } from '../hooks/use-email-rendering-result';
+import { useHotreload } from '../hooks/use-hot-reload';
+import { useRenderingMetadata } from '../hooks/use-rendering-metadata';
+
+export const PreviewContext = createContext<
+  | {
+      renderedEmailMetadata: RenderedEmailMetadata | undefined;
+      renderingResult: EmailRenderingResult;
+
+      emailSlug: string;
+      emailPath: string;
+    }
+  | undefined
+>(undefined);
+
+interface PreviewProvider {
+  emailSlug: string;
+  emailPath: string;
+
+  serverRenderingResult: EmailRenderingResult;
+
+  children: React.ReactNode;
+}
+
+export const PreviewProvider = ({
+  emailSlug,
+  emailPath,
+  serverRenderingResult,
+  children,
+}: PreviewProvider) => {
+  const router = useRouter();
+
+  const renderingResult = useEmailRenderingResult(
+    emailPath,
+    serverRenderingResult,
+  );
+
+  const renderedEmailMetadata = useRenderingMetadata(
+    emailPath,
+    renderingResult,
+    serverRenderingResult,
+  );
+
+  if (!isBuilding) {
+    // this will not change on runtime so it doesn't violate
+    // the rules of hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHotreload((changes) => {
+      const changeForThisEmail = changes.find((change) =>
+        change.filename.includes(emailSlug),
+      );
+
+      if (typeof changeForThisEmail !== 'undefined') {
+        if (changeForThisEmail.event === 'unlink') {
+          router.push('/');
+        }
+      }
+    });
+  }
+
+  return (
+    <PreviewContext.Provider
+      value={{
+        emailPath,
+        emailSlug,
+        renderedEmailMetadata,
+        renderingResult,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
+  );
+};

package/src/hooks/use-email-rendering-result.ts

@@ -4,6 +4,7 @@ import {
   type EmailRenderingResult,
   renderEmailByPath,
 } from '../actions/render-email-by-path';
+import { isBuilding } from '../app/env';
 import { useHotreload } from './use-hot-reload';
 
 export const useEmailRenderingResult = (
@@ -14,7 +15,7 @@ export const useEmailRenderingResult = (
     serverEmailRenderedResult,
   );
 
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+  if (!isBuilding) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useHotreload(async (changes) => {
       for await (const change of changes) {

package/src/utils/__snapshots__/get-email-component.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`getEmailComponent() > with a demo email template 1`] = `"<!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/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" 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">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;
+exports[`getEmailComponent() > with a demo email template 1`] = `"<!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/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" 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">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-bottom:16px;margin-top:16px">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;