@react-email/preview-server 4.2.11 → 4.3.0

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

@@ -1,5 +1,4 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { motion } from 'framer-motion';
+import * as Popover from '@radix-ui/react-popover';
 import * as React from 'react';
 import { cn } from '../../utils';
 import { IconArrowDown } from '../icons/icon-arrow-down';
@@ -11,208 +10,103 @@ interface ViewDimensions {
 }
 
 interface ViewSizeControlsProps {
+  minWidth: number;
+  minHeight: number;
   viewWidth: number;
   setViewWidth: (width: number) => void;
   viewHeight: number;
   setViewHeight: (height: number) => void;
 }
 
-interface DimensionInputProps {
-  icon: React.ReactNode;
-  isActive: boolean;
-  label: string;
-  onBlur: () => void;
-  onChange: (value: number) => void;
-  setIsActive: (active: boolean) => void;
-  value: number;
-  hasBorder?: boolean;
-}
-
 interface PresetOption {
   name: string;
   dimensions: ViewDimensions;
+  icon: React.ReactNode;
 }
 
-interface PresetMenuItemProps {
-  name: string;
-  dimensions: ViewDimensions;
-  onSelect: (dimensions: ViewDimensions) => void;
-}
-
-const VIEW_PRESETS: PresetOption[] = [
-  { name: 'Desktop', dimensions: { width: 600, height: 1024 } },
-  { name: 'Mobile', dimensions: { width: 375, height: 812 } },
-];
-
-const inputVariant = {
-  active: {
-    width: '3.5rem',
-    padding: '0 0 0 0.5rem',
+export const VIEW_PRESETS: PresetOption[] = [
+  {
+    name: 'Desktop',
+    dimensions: { width: 1024, height: 600 },
+    icon: (
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M1 3.25C1 3.11193 1.11193 3 1.25 3H13.75C13.8881 3 14 3.11193 14 3.25V10.75C14 10.8881 13.8881 11 13.75 11H1.25C1.11193 11 1 10.8881 1 10.75V3.25ZM1.25 2C0.559643 2 0 2.55964 0 3.25V10.75C0 11.4404 0.559644 12 1.25 12H5.07341L4.82991 13.2986C4.76645 13.6371 5.02612 13.95 5.37049 13.95H9.62951C9.97389 13.95 10.2336 13.6371 10.1701 13.2986L9.92659 12H13.75C14.4404 12 15 11.4404 15 10.75V3.25C15 2.55964 14.4404 2 13.75 2H1.25ZM9.01091 12H5.98909L5.79222 13.05H9.20778L9.01091 12Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
   },
-  inactive: {
-    width: '0',
+  {
+    name: 'Mobile',
+    dimensions: { width: 375, height: 667 },
+    icon: (
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M4 2.5C4 2.22386 4.22386 2 4.5 2H10.5C10.7761 2 11 2.22386 11 2.5V12.5C11 12.7761 10.7761 13 10.5 13H4.5C4.22386 13 4 12.7761 4 12.5V2.5ZM4.5 1C3.67157 1 3 1.67157 3 2.5V12.5C3 13.3284 3.67157 14 4.5 14H10.5C11.3284 14 12 13.3284 12 12.5V2.5C12 1.67157 11.3284 1 10.5 1H4.5ZM6 11.65C5.8067 11.65 5.65 11.8067 5.65 12C5.65 12.1933 5.8067 12.35 6 12.35H9C9.1933 12.35 9.35 12.1933 9.35 12C9.35 11.8067 9.1933 11.65 9 11.65H6Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
   },
-};
-
-const DimensionInput = ({
-  icon,
-  isActive,
-  label,
-  onBlur,
-  onChange,
-  setIsActive,
-  value,
-  hasBorder,
-}: DimensionInputProps) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  React.useEffect(() => {
-    if (isActive && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isActive]);
-
-  const handleButtonClick = () => {
-    if (isActive) {
-      setIsActive(false);
-    } else {
-      setIsActive(true);
-    }
-  };
-
-  return (
-    <Tooltip.Provider>
-      <Tooltip>
-        <Tooltip.Trigger asChild>
-          <motion.button
-            onClick={handleButtonClick}
-            className={cn('relative flex items-center justify-center p-2', {
-              'border-slate-6 border-r': hasBorder,
-            })}
-          >
-            {icon}
-            <motion.input
-              ref={inputRef}
-              initial={false}
-              animate={isActive ? 'active' : 'inactive'}
-              className="arrow-hide relative flex h-8 items-center justify-center bg-black text-sm outline-none"
-              onChange={(e) => onChange(Number.parseInt(e.currentTarget.value))}
-              onBlur={onBlur}
-              type="number"
-              value={value}
-              variants={inputVariant}
-            />
-          </motion.button>
-        </Tooltip.Trigger>
-        <Tooltip.Content>
-          <span>{label}: </span>
-          <span className="font-mono">{value}px</span>
-        </Tooltip.Content>
-      </Tooltip>
-    </Tooltip.Provider>
-  );
-};
-
-const PresetMenuItem = ({
-  name,
-  dimensions,
-  onSelect,
-}: PresetMenuItemProps) => (
-  <DropdownMenu.Item
-    className="group flex w-full cursor-pointer select-none items-center justify-between rounded-md py-1.5 pr-1 pl-2 text-sm outline-none transition-colors data-[highlighted]:bg-slate-5"
-    onClick={() => onSelect(dimensions)}
-  >
-    {name}
-    <span className="flex h-fit items-center rounded-full bg-slate-6 px-2 py-1 font-medium text-slate-11 text-xs">
-      {dimensions.width}x{dimensions.height}
-    </span>
-  </DropdownMenu.Item>
-);
+];
 
 export const ViewSizeControls = ({
+  minWidth,
+  minHeight,
   viewWidth,
   viewHeight,
   setViewWidth,
   setViewHeight,
 }: ViewSizeControlsProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [activeInput, setActiveInput] = React.useState<
-    'width' | 'height' | null
-  >(null);
+  const [internalWidth, setInternalWidth] = React.useState(viewWidth);
+  const [internalHeight, setInternalHeight] = React.useState(viewHeight);
 
   const handlePresetSelect = (dimensions: ViewDimensions) => {
     setViewWidth(dimensions.width);
     setViewHeight(dimensions.height);
   };
 
-  const handleBlur = () => {
-    setActiveInput(null);
-  };
+  React.useEffect(() => {
+    setInternalWidth(viewWidth);
+    setInternalHeight(viewHeight);
+  }, [viewWidth, viewHeight]);
 
   return (
-    <div className="relative flex h-9 w-fit overflow-hidden rounded-lg border border-slate-6 text-sm transition-colors duration-300 ease-in-out focus-within:border-slate-8 hover:border-slate-8">
-      <DimensionInput
-        icon={
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" />
-            <path d="M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" />
-            <path d="M4 12H2" />
-            <path d="M10 12H8" />
-            <path d="M16 12h-2" />
-            <path d="M22 12h-2" />
-          </svg>
-        }
-        value={viewWidth}
-        onChange={setViewWidth}
-        isActive={activeInput === 'width'}
-        setIsActive={(active) => setActiveInput(active ? 'width' : null)}
-        onBlur={handleBlur}
-        label="Width"
-        hasBorder
-      />
-      <DimensionInput
-        icon={
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" />
-            <path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" />
-            <path d="M12 20v2" />
-            <path d="M12 14v2" />
-            <path d="M12 8v2" />
-            <path d="M12 2v2" />
-          </svg>
-        }
-        value={viewHeight}
-        onChange={setViewHeight}
-        isActive={activeInput === 'height'}
-        setIsActive={(active) => setActiveInput(active ? 'height' : null)}
-        onBlur={handleBlur}
-        label="Height"
-      />
-      <DropdownMenu.Root open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
-        <DropdownMenu.Trigger asChild>
+    <div className="relative flex h-9 w-fit overflow-hidden rounded-lg border border-slate-6 text-sm transition-colors duration-300 ease-in-out">
+      {VIEW_PRESETS.map((preset) => (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <button
+              key={preset.name}
+              onClick={() => handlePresetSelect(preset.dimensions)}
+              className={cn(
+                'relative flex items-center justify-center w-9 transition-colors hover:text-slate-12',
+                {
+                  'bg-slate-4':
+                    viewWidth === preset.dimensions.width &&
+                    viewHeight === preset.dimensions.height,
+                },
+              )}
+              type="button"
+            >
+              {preset.icon}
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{preset.name}</Tooltip.Content>
+        </Tooltip>
+      ))}
+
+      <Popover.Root open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+        <Popover.Trigger asChild>
           <button
             type="button"
-            className="relative flex items-center justify-center overflow-hidden bg-slate-5 p-2 text-slate-11 text-sm leading-none outline-none transition-colors ease-linear focus-within:text-slate-12 hover:text-slate-12 focus:text-slate-12"
+            className="relative flex items-center justify-center overflow-hidden w-9 text-slate-11 text-sm leading-none outline-none transition-colors ease-linear focus-within:text-slate-12 hover:text-slate-12 focus:text-slate-12"
           >
             <span className="sr-only">View presets</span>
             <IconArrowDown
@@ -224,24 +118,51 @@ export const ViewSizeControls = ({
               )}
             />
           </button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
             align="end"
             className="flex min-w-[12rem] flex-col gap-2 rounded-md border border-slate-8 border-solid bg-black px-2 py-2 text-white"
             sideOffset={5}
           >
-            {VIEW_PRESETS.map((preset) => (
-              <PresetMenuItem
-                key={preset.name}
-                name={preset.name}
-                dimensions={preset.dimensions}
-                onSelect={handlePresetSelect}
+            <div className="flex w-full items-center justify-between text-sm gap-2">
+              <span className="font-medium text-slate-11 text-xs">Width</span>
+              <input
+                type="number"
+                value={internalWidth}
+                onChange={(e) => {
+                  const value = Number(e.target.value);
+
+                  setInternalWidth(value);
+
+                  if (value >= minWidth) {
+                    setViewWidth(value);
+                  }
+                }}
+                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              />
+            </div>
+
+            <div className="flex w-full items-center justify-between text-sm gap-2">
+              <span className="font-medium text-slate-11 text-xs">Height</span>
+              <input
+                type="number"
+                value={internalHeight}
+                onChange={(e) => {
+                  const value = Number(e.target.value);
+
+                  setInternalHeight(value);
+
+                  if (value >= minHeight) {
+                    setViewHeight(value);
+                  }
+                }}
+                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               />
-            ))}
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
+            </div>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
     </div>
   );
 };

package/src/contexts/emails.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { createContext, useContext, useState } from 'react';
 import { getEmailsDirectoryMetadataAction } from '../actions/get-emails-directory-metadata-action';
 import { isBuilding, isPreviewDevelopment } from '../app/env';
@@ -17,7 +18,7 @@ export const useEmails = () => {
 
   if (typeof providerValue === 'undefined') {
     throw new Error(
-      'Cannot call `useEmail()` outside of an EmailsContext provider!',
+      'Cannot call `useEmails` outside of an `EmailsContext` provider.',
     );
   }
 
@@ -48,11 +49,7 @@ export const EmailsProvider = (props: {
   }
 
   return (
-    <EmailsContext.Provider
-      value={{
-        emailsDirectoryMetadata,
-      }}
-    >
+    <EmailsContext.Provider value={{ emailsDirectoryMetadata }}>
       {props.children}
     </EmailsContext.Provider>
   );

package/src/contexts/preview.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 import type {
   EmailRenderingResult,
   RenderedEmailMetadata,
@@ -77,3 +77,15 @@ export const PreviewProvider = ({
     </PreviewContext.Provider>
   );
 };
+
+export const usePreviewContext = () => {
+  const previewContext = useContext(PreviewContext);
+
+  if (typeof previewContext === 'undefined') {
+    throw new Error(
+      'Cannot call `usePreviewContext` outside of an `PreviewContext` provider.',
+    );
+  }
+
+  return previewContext;
+};

package/src/hooks/use-hot-reload.ts

@@ -1,4 +1,5 @@
 'use client';
+
 import { useEffect, useRef } from 'react';
 import { io, type Socket } from 'socket.io-client';
 import type { HotReloadChange } from '../utils/types/hot-reload-change';
@@ -8,8 +9,7 @@ import type { HotReloadChange } from '../utils/types/hot-reload-change';
  * and calls the received parameter callback
  */
 export const useHotreload = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onShouldReload: (changes: HotReloadChange[]) => any,
+  onShouldReload: (changes: HotReloadChange[]) => void,
 ) => {
   const socketRef = useRef<Socket | null>(null);
 

package/src/utils/caniemail/get-compatibility-stats-for-entry.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type {
   EmailClient,
   Platform,

package/src/utils/caniemail/tailwind/get-tailwind-config.spec.ts

@@ -5,7 +5,7 @@ import { pixelBasedPreset } from '@react-email/components';
 import { getTailwindConfig } from './get-tailwind-config';
 
 describe('getTailwindConfig()', () => {
-  it("should work on the demo's Vercel Invite template", async () => {
+  it("works on the demo's Vercel Invite template", async () => {
     const sourcePath = path.resolve(
       __dirname,
       '../../../../../../apps/demo/emails/notifications/vercel-invite-user.tsx',
@@ -23,7 +23,7 @@ describe('getTailwindConfig()', () => {
     });
   });
 
-  it('should work with email templates that import the tailwind config', async () => {
+  it('works with email templates that import the tailwind config', async () => {
     const sourcePath = path.resolve(
       __dirname,
       './tests/dummy-email-template.tsx',

package/src/utils/contains-email-template.spec.ts

@@ -5,19 +5,19 @@ import {
 import type { EmailsDirectory } from './get-emails-directory-metadata';
 
 describe('removeFilenameExtension()', () => {
-  it('should work with a single .', () => {
+  it('works with a single .', () => {
     expect(removeFilenameExtension('email-template.tsx')).toBe(
       'email-template',
     );
   });
 
-  it('should work with an example test file', () => {
+  it('works with an example test file', () => {
     expect(removeFilenameExtension('email-template.spec.tsx')).toBe(
       'email-template.spec',
     );
   });
 
-  it('should do nothing when there is no extension', () => {
+  it('does nothing when there is no extension', () => {
     expect(removeFilenameExtension('email-template')).toBe('email-template');
   });
 });
@@ -112,11 +112,11 @@ describe('containsEmailTemplate()', () => {
     ],
   };
 
-  it('should work with collapsed email directory', () => {
+  it('works with collapsed email directory', () => {
     expect(containsEmailTemplate('first/second/email', directory)).toBe(true);
   });
 
-  it('should work with email inside a single sub directory', () => {
+  it('works with email inside a single sub directory', () => {
     expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(
       true,
     );
@@ -125,7 +125,7 @@ describe('containsEmailTemplate()', () => {
     );
   });
 
-  it('should work with email inside a second sub directory', () => {
+  it('works with email inside a second sub directory', () => {
     expect(
       containsEmailTemplate('magic-links/resend/verify-email', directory),
     ).toBe(true);

package/src/utils/convert-stack-with-sourcemap.ts

@@ -47,7 +47,6 @@ export const convertStackWithSourceMap = (
             getStackLineFromMethodNameAndSource(
               stackFrame.methodName,
               // This can actually be null
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
               positionWithError.source ?? stackFrame.file,
               positionWithError.line,
               positionWithError.column,

package/src/utils/get-emails-directory-metadata.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import fs from 'node:fs';
 import path from 'node:path';
 

package/src/utils/js-email-detection.spec.ts

@@ -5,19 +5,19 @@ describe('JavaScript Email Detection', async () => {
   const testingDir = path.resolve(__dirname, 'testing');
   const emailsMetadata = await getEmailsDirectoryMetadata(testingDir, true);
 
-  it('should detect JavaScript files with ES6 export default syntax', async () => {
+  it('detects JavaScript files with ES6 export default syntax', async () => {
     expect(emailsMetadata).toBeDefined();
     expect(emailsMetadata?.emailFilenames).toContain(
       'js-email-export-default.js',
     );
   });
 
-  it('should detect JavaScript files with CommonJS module.exports', async () => {
+  it('detects JavaScript files with CommonJS module.exports', async () => {
     expect(emailsMetadata).toBeDefined();
     expect(emailsMetadata?.emailFilenames).toContain('js-email-test.js');
   });
 
-  it('should detect MDX-style JavaScript files with named exports', async () => {
+  it('detects MDX-style JavaScript files with named exports', async () => {
     expect(emailsMetadata).toBeDefined();
     expect(emailsMetadata?.emailFilenames).toContain('mdx-email-test.js');
   });

package/src/utils/run-bundled-code.ts

@@ -35,13 +35,11 @@ export const createContext = (filename: string): vm.Context => {
       }
 
       if (m in staticNodeModulesForVM) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return staticNodeModulesForVM[m];
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-useless-template-literals
       return require(`${specifiedModule}`) as unknown;
-      // this stupid string templating was necessary to not have
+      // this string templating was necessary to not have
       // webpack warnings like:
       //
       // Import trace for requested module:

package/src/utils/testing/request-response-email.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 const _req = new Request('https://react.email');
 const _res = new Response('{}');
 

package/tailwind-internals.d.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 declare module "tailwindcss/lib/lib/evaluateTailwindFunctions" {
   import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
   import type { Root } from "postcss";

package/.next/server/chunks/420.js

@@ -1 +0,0 @@
-exports.id=420,exports.ids=[420],exports.modules={8332:(a,b,c)=>{"use strict";c.r(b),c.d(b,{getEmailsDirectoryMetadata:()=>i});var d=c(73024),e=c.n(d),f=c(76760),g=c.n(f);let h=async a=>{let b;try{b=await e().promises.open(a,"r")}catch(a){return console.warn(a),!1}if((await b.stat()).isDirectory())return await b.close(),!1;let{ext:c}=g().parse(a);if(![".js",".tsx",".jsx"].includes(c))return await b.close(),!1;let d=await b.readFile("utf8");await b.close();let f=/\bexport\s+default\b/gm.test(d),h=/\bmodule\.exports\s*=/gm.test(d),i=/\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(d);return f||h||i},i=async(a,b=!1,c=!1,d=a)=>{if(!e().existsSync(a))return;let f=await e().promises.readdir(a,{withFileTypes:!0}),j=await Promise.all(f.map(b=>h(g().join(a,b.name)))),k=f.filter((a,b)=>j[b]).map(a=>b?a.name:a.name.replace(g().extname(a.name),"")),l=await Promise.all(f.filter(a=>a.isDirectory()&&!a.name.startsWith("_")&&"static"!==a.name).map(c=>i(g().join(a,c.name),b,!0,d))),m={absolutePath:a,relativePath:g().relative(d,a),directoryName:a.split(g().sep).pop(),emailFilenames:k,subDirectories:l};return c?(a=>{let b=a;for(;0===b.emailFilenames.length&&1===b.subDirectories.length;){let a=b.subDirectories[0];b={...a,directoryName:g().join(b.directoryName,a.directoryName)}}return b})(m):m}},15482:(a,b,c)=>{"use strict";c.d(b,{EmailsProvider:()=>l,J:()=>k});var d=c(6362),e=c(2179),f=c(14298);let g=(0,f.createServerReference)("7f009fd45016bdb4200c108baf47a913fb024a9adb",f.callServer,void 0,f.findSourceMapURL,"getEmailsDirectoryMetadataAction");var h=c(70985),i=c(39520);let j=(0,e.createContext)(void 0),k=()=>{let a=(0,e.useContext)(j);if(void 0===a)throw Error("Cannot call `useEmail()` outside of an EmailsContext provider!");return a},l=a=>{let[b,c]=(0,e.useState)(a.initialEmailsDirectoryMetadata);return h.Hf||h.m4||(0,i.a)(async()=>{let b=await g(a.initialEmailsDirectoryMetadata.absolutePath);if(b)c(b);else throw Error("Hot reloading: unable to find the emails directory to update the sidebar")}),(0,d.jsx)(j.Provider,{value:{emailsDirectoryMetadata:b},children:a.children})}},25880:(a,b,c)=>{Promise.resolve().then(c.t.bind(c,36100,23)),Promise.resolve().then(c.t.bind(c,99455,23)),Promise.resolve().then(c.t.bind(c,26835,23)),Promise.resolve().then(c.t.bind(c,36726,23)),Promise.resolve().then(c.t.bind(c,33666,23)),Promise.resolve().then(c.t.bind(c,23670,23)),Promise.resolve().then(c.t.bind(c,30006,23)),Promise.resolve().then(c.t.bind(c,41971,23)),Promise.resolve().then(c.t.bind(c,40614,23))},27378:(a,b,c)=>{Promise.resolve().then(c.bind(c,90948))},35191:()=>{},35608:(a,b,c)=>{Promise.resolve().then(c.t.bind(c,5058,23)),Promise.resolve().then(c.t.bind(c,35621,23)),Promise.resolve().then(c.t.bind(c,44325,23)),Promise.resolve().then(c.t.bind(c,20908,23)),Promise.resolve().then(c.t.bind(c,83572,23)),Promise.resolve().then(c.t.bind(c,25928,23)),Promise.resolve().then(c.t.bind(c,57920,23)),Promise.resolve().then(c.t.bind(c,2761,23)),Promise.resolve().then(c.bind(c,98400))},39520:(a,b,c)=>{"use strict";c.d(b,{a:()=>f});var d=c(2179),e=c(80095);let f=a=>{let b=(0,d.useRef)(null);(0,d.useEffect)(()=>{b.current||(b.current=(0,e.io)());let c=b.current;return c.on("reload",b=>{console.debug("Reloading..."),a(b)}),()=>{c.off()}},[a])}},50938:(a,b,c)=>{Promise.resolve().then(c.bind(c,15482))},54208:(a,b,c)=>{"use strict";c.r(b),c.d(b,{default:()=>n,dynamic:()=>m,metadata:()=>l});var d=c(51064);c(35191);var e=c(90948),f=c(8332),g=c(88155),h=c(84858),i=c.n(h),j=c(54629),k=c.n(j);let l={title:"React Email"},m="force-dynamic",n=async({children:a})=>{let b=await (0,f.getEmailsDirectoryMetadata)(g.Z8);if(void 0===b)throw Error(`Could not find the emails directory specified under ${g.Z8}!`);return(0,d.jsx)("html",{className:`${i().variable} ${k().variable} font-sans`,lang:"en",children:(0,d.jsx)("body",{className:"relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12",children:(0,d.jsx)("div",{className:"bg-gradient-to-t from-slate-3 flex flex-col",children:(0,d.jsx)(e.EmailsProvider,{initialEmailsDirectoryMetadata:b,children:a})})})})}},70985:(a,b,c)=>{"use strict";c.d(b,{Hf:()=>d,m4:()=>e}),process.env.EMAILS_DIR_RELATIVE_PATH,process.env.USER_PROJECT_LOCATION,process.env.PREVIEW_SERVER_LOCATION,process.env.EMAILS_DIR_ABSOLUTE_PATH;let d="true"===process.env.NEXT_PUBLIC_IS_BUILDING,e="true"===process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT},72112:()=>{},86944:(a,b,c)=>{"use strict";c.r(b),c.d(b,{default:()=>e});var d=c(89993);let e=async a=>[{type:"image/x-icon",sizes:"16x16",url:(0,d.fillMetadataSegment)(".",await a.params,"favicon.ico")+""}]},88155:(a,b,c)=>{"use strict";c.d(b,{Hf:()=>g,Z8:()=>f,m4:()=>h,n_:()=>e,w5:()=>d}),process.env.EMAILS_DIR_RELATIVE_PATH;let d=process.env.USER_PROJECT_LOCATION,e=process.env.PREVIEW_SERVER_LOCATION,f=process.env.EMAILS_DIR_ABSOLUTE_PATH,g="true"===process.env.NEXT_PUBLIC_IS_BUILDING,h="true"===process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT},88167:(a,b,c)=>{"use strict";c.r(b),c.d(b,{"7f009fd45016bdb4200c108baf47a913fb024a9adb":()=>l});var d=c(90466);c(69300);var e=c(73024),f=c.n(e),g=c(76760),h=c.n(g);let i=async a=>{let b;try{b=await f().promises.open(a,"r")}catch(a){return console.warn(a),!1}if((await b.stat()).isDirectory())return await b.close(),!1;let{ext:c}=h().parse(a);if(![".js",".tsx",".jsx"].includes(c))return await b.close(),!1;let d=await b.readFile("utf8");await b.close();let e=/\bexport\s+default\b/gm.test(d),g=/\bmodule\.exports\s*=/gm.test(d),i=/\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(d);return e||g||i},j=async(a,b=!1,c=!1,d=a)=>{if(!f().existsSync(a))return;let e=await f().promises.readdir(a,{withFileTypes:!0}),g=await Promise.all(e.map(b=>i(h().join(a,b.name)))),k=e.filter((a,b)=>g[b]).map(a=>b?a.name:a.name.replace(h().extname(a.name),"")),l=await Promise.all(e.filter(a=>a.isDirectory()&&!a.name.startsWith("_")&&"static"!==a.name).map(c=>j(h().join(a,c.name),b,!0,d))),m={absolutePath:a,relativePath:h().relative(d,a),directoryName:a.split(h().sep).pop(),emailFilenames:k,subDirectories:l};return c?(a=>{let b=a;for(;0===b.emailFilenames.length&&1===b.subDirectories.length;){let a=b.subDirectories[0];b={...a,directoryName:h().join(b.directoryName,a.directoryName)}}return b})(m):m};var k=c(18012);let l=async(a,b=!1,c=!1,d=a)=>j(a,b,c,d);(0,k.D)([l]),(0,d.A)(l,"7f009fd45016bdb4200c108baf47a913fb024a9adb",null)},90948:(a,b,c)=>{"use strict";c.d(b,{EmailsProvider:()=>e});var d=c(9756);(0,d.registerClientReference)(function(){throw Error("Attempted to call useEmails() from the server but useEmails is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/actions-runner/_work/react-email/react-email/packages/preview-server/src/contexts/emails.tsx","useEmails");let e=(0,d.registerClientReference)(function(){throw Error("Attempted to call EmailsProvider() from the server but EmailsProvider is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/actions-runner/_work/react-email/react-email/packages/preview-server/src/contexts/emails.tsx","EmailsProvider")},92665:()=>{}};