react-email 3.0.3 → 3.0.5

package/dist/preview/.next/types/app/layout.ts

@@ -1,9 +1,13 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/primary/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/resend/react-email/packages/react-email/src/app/layout.tsx
 import * as entry from '../../../src/app/layout.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 
 type TEntry = typeof import('../../../src/app/layout.js')
 
+type SegmentParams<T extends Object = any> = T extends Record<string, any>
+  ? { [K in keyof T]: T[K] extends string ? string | string[] | undefined : never }
+  : T
+
 // Check that the entry is a valid entry
 checkFields<Diff<{
   default: Function
@@ -21,9 +25,11 @@ checkFields<Diff<{
   generateMetadata?: Function
   viewport?: any
   generateViewport?: Function
+  experimental_ppr?: boolean
   
 }, TEntry, ''>>()
 
+
 // Check the prop type of the entry function
 checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>()
 
@@ -41,19 +47,18 @@ if ('generateViewport' in entry) {
 
 // Check the arguments and return type of the generateStaticParams function
 if ('generateStaticParams' in entry) {
-  checkFields<Diff<{ params: PageParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
+  checkFields<Diff<{ params: SegmentParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
   checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
 }
 
-type PageParams = any
 export interface PageProps {
-  params?: any
-  searchParams?: any
+  params?: Promise<SegmentParams>
+  searchParams?: Promise<any>
 }
 export interface LayoutProps {
   children?: React.ReactNode
 
-  params?: any
+  params?: Promise<SegmentParams>
 }
 
 // =============

package/dist/preview/.next/types/app/preview/[...slug]/page.ts

@@ -1,9 +1,13 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/primary/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/resend/react-email/packages/react-email/src/app/preview/[...slug]/page.tsx
 import * as entry from '../../../../../src/app/preview/[...slug]/page.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 
 type TEntry = typeof import('../../../../../src/app/preview/[...slug]/page.js')
 
+type SegmentParams<T extends Object = any> = T extends Record<string, any>
+  ? { [K in keyof T]: T[K] extends string ? string | string[] | undefined : never }
+  : T
+
 // Check that the entry is a valid entry
 checkFields<Diff<{
   default: Function
@@ -21,9 +25,11 @@ checkFields<Diff<{
   generateMetadata?: Function
   viewport?: any
   generateViewport?: Function
+  experimental_ppr?: boolean
   
 }, TEntry, ''>>()
 
+
 // Check the prop type of the entry function
 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
 
@@ -41,19 +47,18 @@ if ('generateViewport' in entry) {
 
 // Check the arguments and return type of the generateStaticParams function
 if ('generateStaticParams' in entry) {
-  checkFields<Diff<{ params: PageParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
+  checkFields<Diff<{ params: SegmentParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
   checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
 }
 
-type PageParams = any
 export interface PageProps {
-  params?: any
-  searchParams?: any
+  params?: Promise<SegmentParams>
+  searchParams?: Promise<any>
 }
 export interface LayoutProps {
   children?: React.ReactNode
 
-  params?: any
+  params?: Promise<SegmentParams>
 }
 
 // =============

package/dist/preview/.next/types/cache-life.d.ts

@@ -0,0 +1,141 @@
+// Type definitions for Next.js cacheLife configs
+
+declare module 'next/cache' {
+  export { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache'
+  export {
+    revalidateTag,
+    revalidatePath,
+    unstable_expireTag,
+    unstable_expirePath,
+  } from 'next/dist/server/web/spec-extension/revalidate'
+  export { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'
+
+  
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"default"` profile.
+     * ```
+     *   stale:      300 seconds (5 minutes)
+     *   revalidate: 900 seconds (15 minutes)
+     *   expire:     never
+     * ```
+     * 
+     * This cache may be stale on clients for 5 minutes before checking with the server.
+     * If the server receives a new request after 15 minutes, start revalidating new values in the background.
+     * It lives for the maximum age of the server cache. If this entry has no traffic for a while, it may serve an old value the next request.
+     */
+    export function unstable_cacheLife(profile: "default"): void
+    
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"seconds"` profile.
+     * ```
+     *   stale:      0 seconds
+     *   revalidate: 1 seconds
+     *   expire:     60 seconds (1 minute)
+     * ```
+     * 
+     * This cache may be stale on clients for 0 seconds before checking with the server.
+     * If the server receives a new request after 1 seconds, start revalidating new values in the background.
+     * If this entry has no traffic for 1 minute it will expire. The next request will recompute it.
+     */
+    export function unstable_cacheLife(profile: "seconds"): void
+    
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"minutes"` profile.
+     * ```
+     *   stale:      300 seconds (5 minutes)
+     *   revalidate: 60 seconds (1 minute)
+     *   expire:     3600 seconds (1 hour)
+     * ```
+     * 
+     * This cache may be stale on clients for 5 minutes before checking with the server.
+     * If the server receives a new request after 1 minute, start revalidating new values in the background.
+     * If this entry has no traffic for 1 hour it will expire. The next request will recompute it.
+     */
+    export function unstable_cacheLife(profile: "minutes"): void
+    
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"hours"` profile.
+     * ```
+     *   stale:      300 seconds (5 minutes)
+     *   revalidate: 3600 seconds (1 hour)
+     *   expire:     86400 seconds (1 day)
+     * ```
+     * 
+     * This cache may be stale on clients for 5 minutes before checking with the server.
+     * If the server receives a new request after 1 hour, start revalidating new values in the background.
+     * If this entry has no traffic for 1 day it will expire. The next request will recompute it.
+     */
+    export function unstable_cacheLife(profile: "hours"): void
+    
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"days"` profile.
+     * ```
+     *   stale:      300 seconds (5 minutes)
+     *   revalidate: 86400 seconds (1 day)
+     *   expire:     604800 seconds (1 week)
+     * ```
+     * 
+     * This cache may be stale on clients for 5 minutes before checking with the server.
+     * If the server receives a new request after 1 day, start revalidating new values in the background.
+     * If this entry has no traffic for 1 week it will expire. The next request will recompute it.
+     */
+    export function unstable_cacheLife(profile: "days"): void
+    
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"weeks"` profile.
+     * ```
+     *   stale:      300 seconds (5 minutes)
+     *   revalidate: 604800 seconds (1 week)
+     *   expire:     2592000 seconds (30 days)
+     * ```
+     * 
+     * This cache may be stale on clients for 5 minutes before checking with the server.
+     * If the server receives a new request after 1 week, start revalidating new values in the background.
+     * If this entry has no traffic for 30 days it will expire. The next request will recompute it.
+     */
+    export function unstable_cacheLife(profile: "weeks"): void
+    
+    /**
+     * Cache this `"use cache"` for a timespan defined by the `"max"` profile.
+     * ```
+     *   stale:      300 seconds (5 minutes)
+     *   revalidate: 2592000 seconds (30 days)
+     *   expire:     never
+     * ```
+     * 
+     * This cache may be stale on clients for 5 minutes before checking with the server.
+     * If the server receives a new request after 30 days, start revalidating new values in the background.
+     * It lives for the maximum age of the server cache. If this entry has no traffic for a while, it may serve an old value the next request.
+     */
+    export function unstable_cacheLife(profile: "max"): void
+    
+    /**
+     * Cache this `"use cache"` using a custom timespan.
+     * ```
+     *   stale: ... // seconds 
+     *   revalidate: ... // seconds
+     *   expire: ... // seconds
+     * ```
+     * 
+     * This is similar to Cache-Control: max-age=`stale`,s-max-age=`revalidate`,stale-while-revalidate=`expire-revalidate`
+     * 
+     * If a value is left out, the lowest of other cacheLife() calls or the default, is used instead.
+     */
+    export function unstable_cacheLife(profile: {
+      /**
+       * This cache may be stale on clients for ... seconds before checking with the server.
+       */
+      stale?: number,
+      /**
+       * If the server receives a new request after ... seconds, start revalidating new values in the background.
+       */
+      revalidate?: number,
+      /**
+       * If this entry has no traffic for ... seconds it will expire. The next request will recompute it.
+       */
+      expire?: number
+    }): void
+  
+
+  export { cacheTag as unstable_cacheTag } from 'next/dist/server/use-cache/cache-tag'
+}

package/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -22,14 +22,14 @@
     "@babel/core": "7.24.5",
     "@babel/parser": "7.24.5",
     "chalk": "4.1.2",
-    "chokidar": "^4.0.1",
+    "chokidar": "4.0.3",
     "commander": "11.1.0",
     "debounce": "2.0.0",
     "esbuild": "0.19.11",
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "14.2.16",
+    "next": "15.1.2",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "socket.io": "4.8.0"
@@ -45,25 +45,25 @@
     "@types/babel__core": "7.20.5",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
-    "@types/node": "18.0.0",
+    "@types/node": "22.10.2",
     "@types/normalize-path": "3.0.2",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/webpack": "5.28.5",
     "@vercel/style-guide": "5.1.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "eslint": "8.50.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-turbo": "2.1.0",
-    "framer-motion": "12.0.0-alpha.0",
+    "framer-motion": "12.0.0-alpha.2",
     "postcss": "8.4.40",
     "prism-react-renderer": "2.1.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19",
+    "react-dom": "^19",
     "sharp": "0.33.3",
     "socket.io-client": "4.8.0",
-    "sonner": "1.3.1",
+    "sonner": "1.7.1",
     "source-map-js": "1.0.2",
     "stacktrace-parser": "0.1.10",
     "tailwind-merge": "2.2.0",
@@ -72,7 +72,7 @@
     "tsx": "4.9.0",
     "typescript": "5.1.6",
     "vitest": "1.1.3",
-    "@react-email/render": "1.0.3"
+    "@react-email/render": "1.0.4"
   },
   "scripts": {
     "build": "tsup-node && node build-preview-server.mjs",

package/src/actions/get-email-path-from-slug.ts

@@ -1,10 +1,11 @@
 'use server';
 import path from 'node:path';
 import fs from 'node:fs';
+import { cache } from 'react';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 
 // eslint-disable-next-line @typescript-eslint/require-await
-export const getEmailPathFromSlug = async (slug: string) => {
+export const getEmailPathFromSlug = cache(async (slug: string) => {
   if (['.tsx', '.jsx', '.ts', '.js'].includes(path.extname(slug)))
     return path.join(emailsDirectoryAbsolutePath, slug);
 
@@ -25,4 +26,4 @@ export const getEmailPathFromSlug = async (slug: string) => {
 
     This is most likely not an issue with the preview server. It most likely is that the email doesn't exist.`,
   );
-};
+});

package/src/actions/get-emails-directory-metadata.spec.ts

@@ -44,6 +44,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         relativePath: 'notifications',
         emailFilenames: [
           'github-access-token',
+          'papermark-year-in-review',
           'vercel-invite-user',
           'yelp-recent-login',
         ],

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

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import fs from 'node:fs';
 import path from 'node:path';
+import { cache } from 'react';
 
 const isFileAnEmail = (fullPath: string): boolean => {
   const stat = fs.statSync(fullPath);
@@ -57,64 +58,66 @@ const mergeDirectoriesWithSubDirectories = (
   return currentResultingMergedDirectory;
 };
 
-export const getEmailsDirectoryMetadata = async (
-  absolutePathToEmailsDirectory: string,
-  keepFileExtensions = false,
-  isSubDirectory = false,
-
-  baseDirectoryPath = absolutePathToEmailsDirectory,
-): Promise<EmailsDirectory | undefined> => {
-  if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
-
-  const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
-    withFileTypes: true,
-  });
-
-  const emailFilenames = dirents
-    .filter((dirent) =>
-      isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
-    )
-    .map((dirent) =>
-      keepFileExtensions
-        ? dirent.name
-        : dirent.name.replace(path.extname(dirent.name), ''),
-    );
+export const getEmailsDirectoryMetadata = cache(
+  async (
+    absolutePathToEmailsDirectory: string,
+    keepFileExtensions = false,
+    isSubDirectory = false,
+
+    baseDirectoryPath = absolutePathToEmailsDirectory,
+  ): Promise<EmailsDirectory | undefined> => {
+    if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
 
-  const subDirectories = await Promise.all(
-    dirents
-      .filter(
-        (dirent) =>
-          dirent.isDirectory() &&
-          !dirent.name.startsWith('_') &&
-          dirent.name !== 'static',
+    const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
+      withFileTypes: true,
+    });
+
+    const emailFilenames = dirents
+      .filter((dirent) =>
+        isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
       )
-      .map((dirent) => {
-        const direntAbsolutePath = path.join(
-          absolutePathToEmailsDirectory,
-          dirent.name,
-        );
-
-        return getEmailsDirectoryMetadata(
-          direntAbsolutePath,
-          keepFileExtensions,
-          true,
-          baseDirectoryPath,
-        ) as Promise<EmailsDirectory>;
-      }),
-  );
-
-  const emailsMetadata = {
-    absolutePath: absolutePathToEmailsDirectory,
-    relativePath: path.relative(
-      baseDirectoryPath,
-      absolutePathToEmailsDirectory,
-    ),
-    directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
-    emailFilenames,
-    subDirectories,
-  } satisfies EmailsDirectory;
-
-  return isSubDirectory
-    ? mergeDirectoriesWithSubDirectories(emailsMetadata)
-    : emailsMetadata;
-};
+      .map((dirent) =>
+        keepFileExtensions
+          ? dirent.name
+          : dirent.name.replace(path.extname(dirent.name), ''),
+      );
+
+    const subDirectories = await Promise.all(
+      dirents
+        .filter(
+          (dirent) =>
+            dirent.isDirectory() &&
+            !dirent.name.startsWith('_') &&
+            dirent.name !== 'static',
+        )
+        .map((dirent) => {
+          const direntAbsolutePath = path.join(
+            absolutePathToEmailsDirectory,
+            dirent.name,
+          );
+
+          return getEmailsDirectoryMetadata(
+            direntAbsolutePath,
+            keepFileExtensions,
+            true,
+            baseDirectoryPath,
+          ) as Promise<EmailsDirectory>;
+        }),
+    );
+
+    const emailsMetadata = {
+      absolutePath: absolutePathToEmailsDirectory,
+      relativePath: path.relative(
+        baseDirectoryPath,
+        absolutePathToEmailsDirectory,
+      ),
+      directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
+      emailFilenames,
+      subDirectories,
+    } satisfies EmailsDirectory;
+
+    return isSubDirectory
+      ? mergeDirectoriesWithSubDirectories(emailsMetadata)
+      : emailsMetadata;
+  },
+);

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

@@ -21,9 +21,16 @@ export type EmailRenderingResult =
       error: ErrorObject;
     };
 
+const cache = new Map<string, EmailRenderingResult>();
+
 export const renderEmailByPath = async (
   emailPath: string,
+  invalidatingCache = false,
 ): Promise<EmailRenderingResult> => {
+  if (invalidatingCache) cache.delete(emailPath);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (cache.has(emailPath)) return cache.get(emailPath)!;
+
   const timeBeforeEmailRendered = performance.now();
 
   const emailFilename = path.basename(emailPath);
@@ -36,14 +43,14 @@ export const renderEmailByPath = async (
     registerSpinnerAutostopping(spinner);
   }
 
-  const result = await getEmailComponent(emailPath);
+  const componentResult = await getEmailComponent(emailPath);
 
-  if ('error' in result) {
+  if ('error' in componentResult) {
     spinner?.stopAndPersist({
       symbol: logSymbols.error,
       text: `Failed while rendering ${emailFilename}`,
     });
-    return { error: result.error };
+    return { error: componentResult.error };
   }
 
   const {
@@ -51,7 +58,7 @@ export const renderEmailByPath = async (
     createElement,
     render,
     sourceMapToOriginalFile,
-  } = result;
+  } = componentResult;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
@@ -82,7 +89,7 @@ export const renderEmailByPath = async (
       text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
     });
 
-    return {
+    const renderingResult = {
       // This ensures that no null byte character ends up in the rendered
       // markup making users suspect of any issues. These null byte characters
       // only seem to happen with React 18, as it has no similar incident with React 19.
@@ -90,6 +97,10 @@ export const renderEmailByPath = async (
       plainText,
       reactMarkup,
     };
+
+    cache.set(emailPath, renderingResult);
+
+    return renderingResult;
   } catch (exception) {
     const error = exception as Error;
 

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

@@ -16,7 +16,12 @@ export interface PreviewParams {
   slug: string[];
 }
 
-const Page = async ({ params }: { params: PreviewParams }) => {
+const Page = async ({
+  params: paramsPromise,
+}: {
+  params: Promise<PreviewParams>;
+}) => {
+  const params = await paramsPromise;
   // will come in here as segments of a relative path to the email
   // ex: ['authentication', 'verify-password.tsx']
   const slug = decodeURIComponent(params.slug.join('/'));
@@ -43,14 +48,14 @@ This is most likely not an issue with the preview server. Maybe there was a typo
     throw exception;
   }
 
-  const emailRenderingResult = await renderEmailByPath(emailPath);
+  const serverEmailRenderingResult = await renderEmailByPath(emailPath);
 
   if (
-    'error' in emailRenderingResult &&
-    process.env.NEXT_PUBLIC_IS_BUILDING === 'true'
+    process.env.NEXT_PUBLIC_IS_BUILDING === 'true' &&
+    'error' in serverEmailRenderingResult
   ) {
-    throw new Error(emailRenderingResult.error.message, {
-      cause: emailRenderingResult.error,
+    throw new Error(serverEmailRenderingResult.error.message, {
+      cause: serverEmailRenderingResult.error,
     });
   }
 
@@ -62,15 +67,20 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       <Preview
         emailPath={emailPath}
         pathSeparator={path.sep}
-        renderingResult={emailRenderingResult}
+        serverRenderingResult={serverEmailRenderingResult}
         slug={slug}
       />
     </Suspense>
   );
 };
 
-export function generateMetadata({ params }: { params: PreviewParams }) {
-  return { title: `${path.basename(params.slug.join('/'))} — React Email` };
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<PreviewParams>;
+}) {
+  const { slug } = await params;
+  return { title: `${path.basename(slug.join('/'))} — React Email` };
 }
 
 export default Page;

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

@@ -8,22 +8,22 @@ import type { EmailRenderingResult } from '../../../actions/render-email-by-path
 import { CodeContainer } from '../../../components/code-container';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
-import { useEmails } from '../../../contexts/emails';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
+import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { RenderingError } from './rendering-error';
 
 interface PreviewProps {
   slug: string;
   emailPath: string;
   pathSeparator: string;
-  renderingResult: EmailRenderingResult;
+  serverRenderingResult: EmailRenderingResult;
 }
 
 const Preview = ({
   slug,
   emailPath,
   pathSeparator,
-  renderingResult: initialRenderingResult,
+  serverRenderingResult,
 }: PreviewProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -31,17 +31,16 @@ const Preview = ({
 
   const activeView = searchParams.get('view') ?? 'desktop';
   const activeLang = searchParams.get('lang') ?? 'jsx';
-  const { useEmailRenderingResult } = useEmails();
 
   const renderingResult = useEmailRenderingResult(
     emailPath,
-    initialRenderingResult,
+    serverRenderingResult,
   );
 
   const renderedEmailMetadata = useRenderingMetadata(
     emailPath,
     renderingResult,
-    initialRenderingResult,
+    serverRenderingResult,
   );
 
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
@@ -90,7 +89,6 @@ const Preview = ({
           <RenderingError error={renderingResult.error} />
         ) : null}
 
-        {/* If this is undefined means that the initial server render of the email had errors */}
         {hasNoErrors ? (
           <>
             {activeView === 'desktop' && (
@@ -135,6 +133,7 @@ const Preview = ({
             )}
           </>
         ) : null}
+
         <Toaster />
       </div>
     </Shell>