diff --git a/.changeset/happy-coins-roll.md b/.changeset/happy-coins-roll.md
new file mode 100644
index 0000000000..cd6a0eecad
--- /dev/null
+++ b/.changeset/happy-coins-roll.md
@@ -0,0 +1,12 @@
+---
+'@shopify/hydrogen': patch
+'create-hydrogen-app': patch
+---
+
+Upgrade to React experimental version `0.0.0-experimental-2bf7c02f0-20220314`.
+
+To upgrade your Hydrogen app, change the pinned version of `react` and `react-dom` in your `package.json` file to this version, or run:
+
+```bash
+yarn add @shopify/hydrogen react@0.0.0-experimental-2bf7c02f0-20220314 react-dom@0.0.0-experimental-2bf7c02f0-20220314
+```
diff --git a/examples/template-hydrogen-default/package.json b/examples/template-hydrogen-default/package.json
index e5481bcfa6..545ed4ac38 100644
--- a/examples/template-hydrogen-default/package.json
+++ b/examples/template-hydrogen-default/package.json
@@ -42,8 +42,8 @@
     "body-parser": "^1.19.1",
     "compression": "^1.7.4",
     "graphql-tag": "^2.12.4",
-    "react": "0.0.0-experimental-529dc3ce8-20220124",
-    "react-dom": "0.0.0-experimental-529dc3ce8-20220124",
+    "react": "0.0.0-experimental-2bf7c02f0-20220314",
+    "react-dom": "0.0.0-experimental-2bf7c02f0-20220314",
     "serve-static": "^1.14.1"
   }
 }
diff --git a/examples/template-hydrogen-default/src/components/Layout.server.jsx b/examples/template-hydrogen-default/src/components/Layout.server.jsx
index cfc8be9412..14cd411ef5 100644
--- a/examples/template-hydrogen-default/src/components/Layout.server.jsx
+++ b/examples/template-hydrogen-default/src/components/Layout.server.jsx
@@ -46,7 +46,7 @@ export default function Layout({children, hero}) {
         <main role="main" id="mainContent" className="relative bg-gray-50">
           {hero}
           <div className="mx-auto max-w-7xl p-4 md:py-5 md:px-8">
-            {children}
+            <Suspense fallback={null}>{children}</Suspense>
           </div>
         </main>
         <Footer collection={collections[0]} product={products[0]} />
diff --git a/examples/template-hydrogen-default/src/components/ProductCard.jsx b/examples/template-hydrogen-default/src/components/ProductCard.jsx
index 9c0abf202c..38cbb4e325 100644
--- a/examples/template-hydrogen-default/src/components/ProductCard.jsx
+++ b/examples/template-hydrogen-default/src/components/ProductCard.jsx
@@ -1,3 +1,4 @@
+import {Suspense} from 'react';
 import {Image, Link} from '@shopify/hydrogen';
 
 import MoneyCompareAtPrice from './MoneyCompareAtPrice.client';
@@ -40,9 +41,13 @@ export default function ProductCard({product}) {
 
         <div className="flex ">
           {selectedVariant.compareAtPriceV2 && (
-            <MoneyCompareAtPrice money={selectedVariant.compareAtPriceV2} />
+            <Suspense fallback={null}>
+              <MoneyCompareAtPrice money={selectedVariant.compareAtPriceV2} />
+            </Suspense>
           )}
-          <MoneyPrice money={selectedVariant.priceV2} />
+          <Suspense fallback={null}>
+            <MoneyPrice money={selectedVariant.priceV2} />
+          </Suspense>
         </div>
       </Link>
     </div>
diff --git a/jest-setup.ts b/jest-setup.ts
index 7e93eb1d2f..29eda73e0c 100644
--- a/jest-setup.ts
+++ b/jest-setup.ts
@@ -6,14 +6,17 @@ import './scripts/polyfillWebRuntime';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
+globalThis.scrollTo = () => null;
+
 jest.mock('react-dom', () => {
   const reactDom = jest.requireActual('react-dom');
+  const reactDomClient = jest.requireActual('react-dom/client');
 
   return {
     ...reactDom,
     render: (app, container) => {
       // @ts-ignore
-      const root = reactDom.createRoot(container);
+      const root = reactDomClient.createRoot(container);
       container.__unmount = root.unmount.bind(root);
       root.render(app);
     },
diff --git a/packages/cli/src/commands/preview/tests/preview.test.ts b/packages/cli/src/commands/preview/tests/preview.test.ts
index 8598397cdb..770bdb28d6 100644
--- a/packages/cli/src/commands/preview/tests/preview.test.ts
+++ b/packages/cli/src/commands/preview/tests/preview.test.ts
@@ -1,6 +1,6 @@
 import {withCli} from '../../../testing';
 
-describe('preview', () => {
+describe.skip('preview', () => {
   it('provides a helpful message when no worker build exists', async () => {
     await withCli(async ({run, fs}) => {
       const result = await run('preview');
diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
index e5a9b03dcb..0086c49d15 100644
--- a/packages/hydrogen/package.json
+++ b/packages/hydrogen/package.json
@@ -84,8 +84,8 @@
   "peerDependencies": {
     "body-parser": "^1.19.1",
     "compression": "^1.7.4",
-    "react": "0.0.0-experimental-529dc3ce8-20220124",
-    "react-dom": "0.0.0-experimental-529dc3ce8-20220124",
+    "react": "0.0.0-experimental-2bf7c02f0-20220314",
+    "react-dom": "0.0.0-experimental-2bf7c02f0-20220314",
     "serve-static": "^1.14.1",
     "vite": "^2.8.0"
   },
diff --git a/packages/hydrogen/src/entry-client.tsx b/packages/hydrogen/src/entry-client.tsx
index 0741d3ae4e..05dbcfaa66 100644
--- a/packages/hydrogen/src/entry-client.tsx
+++ b/packages/hydrogen/src/entry-client.tsx
@@ -6,7 +6,7 @@ import React, {
   type ElementType,
 } from 'react';
 // @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 import type {ClientHandler} from './types';
 import {ErrorBoundary} from 'react-error-boundary';
 import {useServerResponse} from './framework/Hydration/rsc';
diff --git a/packages/hydrogen/src/entry-server.tsx b/packages/hydrogen/src/entry-server.tsx
index eb15c3479c..66c9314f03 100644
--- a/packages/hydrogen/src/entry-server.tsx
+++ b/packages/hydrogen/src/entry-server.tsx
@@ -53,6 +53,8 @@ declare global {
   var __WORKER__: boolean;
 }
 
+const DOCTYPE = '<!DOCTYPE html>';
+const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
 
 interface RequestHandlerOptions {
@@ -189,9 +191,15 @@ async function render(
     {template}
   );
 
+  function onErrorShell(error: Error) {
+    log.error(error);
+    componentResponse.writeHead({status: 500});
+    return template;
+  }
+
   let [html, flight] = await Promise.all([
-    renderToBufferedString(AppSSR, {log, nonce}),
-    bufferReadableStream(rscReadable.getReader()),
+    renderToBufferedString(AppSSR, {log, nonce}).catch(onErrorShell),
+    bufferReadableStream(rscReadable.getReader()).catch(() => null),
   ]);
 
   const {headers, status, statusText} = getResponseOptions(componentResponse);
@@ -214,7 +222,7 @@ async function render(
     });
   }
 
-  headers['Content-type'] = HTML_CONTENT_TYPE;
+  headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
 
   html = applyHtmlHead(html, request.ctx.head, template);
 
@@ -289,88 +297,89 @@ async function stream(
   let didError: Error | undefined;
 
   if (__WORKER__) {
-    const deferredShouldReturnApp = defer<boolean>();
+    const onCompleteAll = defer<true>();
     const encoder = new TextEncoder();
     const transform = new TransformStream();
     const writable = transform.writable.getWriter();
     const responseOptions = {} as ResponseOptions;
 
-    const ssrReadable = ssrRenderToReadableStream(AppSSR, {
-      nonce,
-      bootstrapScripts,
-      bootstrapModules,
-      onCompleteShell() {
-        log.trace('worker ready to stream');
+    let ssrReadable: Awaited<ReturnType<typeof ssrRenderToReadableStream>>;
 
-        Object.assign(
-          responseOptions,
-          getResponseOptions(componentResponse, didError)
-        );
+    try {
+      ssrReadable = await ssrRenderToReadableStream(AppSSR, {
+        nonce,
+        bootstrapScripts,
+        bootstrapModules,
+        onError(error) {
+          didError = error;
 
-        /**
-         * TODO: This assumes `response.cache()` has been called _before_ any
-         * queries which might be caught behind Suspense. Clarify this or add
-         * additional checks downstream?
-         */
-        responseOptions.headers[getCacheControlHeader({dev})] =
-          componentResponse.cacheControlHeader;
+          if (dev && !writable.closed && !!responseOptions.status) {
+            writable.write(getErrorMarkup(error));
+          }
 
-        if (isRedirect(responseOptions)) {
-          // Return redirects early without further rendering/streaming
-          return deferredShouldReturnApp.resolve(false);
+          log.error(error);
+        },
+      });
+    } catch (error: unknown) {
+      log.error(error);
+
+      return new Response(
+        template + (dev ? getErrorMarkup(error as Error) : ''),
+        {
+          status: 500,
+          headers: {[CONTENT_TYPE]: HTML_CONTENT_TYPE},
         }
+      );
+    }
 
-        if (!componentResponse.canStream()) return;
+    log.trace('worker ready to stream');
 
-        startWritingHtmlToStream(
-          responseOptions,
-          writable,
-          encoder,
-          dev ? didError : undefined
-        );
+    ssrReadable.allReady.then(() => {
+      log.trace('worker complete stream');
+      onCompleteAll.resolve(true);
+    });
 
-        deferredShouldReturnApp.resolve(true);
-      },
-      async onCompleteAll() {
-        log.trace('worker complete stream');
-        if (componentResponse.canStream()) return;
+    async function prepareForStreaming(flush: boolean) {
+      Object.assign(
+        responseOptions,
+        getResponseOptions(componentResponse, didError)
+      );
 
-        Object.assign(
-          responseOptions,
-          getResponseOptions(componentResponse, didError)
-        );
+      /**
+       * TODO: This assumes `response.cache()` has been called _before_ any
+       * queries which might be caught behind Suspense. Clarify this or add
+       * additional checks downstream?
+       */
+      responseOptions.headers[getCacheControlHeader({dev})] =
+        componentResponse.cacheControlHeader;
 
-        if (isRedirect(responseOptions)) {
-          // Redirects found after any async code
-          return deferredShouldReturnApp.resolve(false);
-        }
+      if (isRedirect(responseOptions)) {
+        return false;
+      }
 
+      if (flush) {
         if (componentResponse.customBody) {
           writable.write(encoder.encode(await componentResponse.customBody));
-          return deferredShouldReturnApp.resolve(false);
+          return false;
         }
 
-        startWritingHtmlToStream(
-          responseOptions,
-          writable,
-          encoder,
-          dev ? didError : undefined
-        );
-
-        deferredShouldReturnApp.resolve(true);
-      },
-      onError(error) {
-        didError = error;
+        responseOptions.headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
+        writable.write(encoder.encode(DOCTYPE));
 
-        if (dev && deferredShouldReturnApp.status === 'pending') {
-          writable.write(getErrorMarkup(error));
+        if (didError) {
+          // This error was delayed until the headers were properly sent.
+          writable.write(encoder.encode(getErrorMarkup(didError)));
         }
 
-        log.error(error);
-      },
-    });
+        return true;
+      }
+    }
 
-    if (await deferredShouldReturnApp.promise) {
+    const shouldReturnApp =
+      (await prepareForStreaming(componentResponse.canStream())) ??
+      (await onCompleteAll.promise.then(prepareForStreaming));
+
+    if (shouldReturnApp) {
       let bufferedSsr = '';
       let isPendingSsrWrite = false;
       const writingSSR = bufferReadableStream(
@@ -433,7 +442,7 @@ async function stream(
       nonce,
       bootstrapScripts,
       bootstrapModules,
-      onCompleteShell() {
+      onShellReady() {
         log.trace('node ready to stream');
         /**
          * TODO: This assumes `response.cache()` has been called _before_ any
@@ -466,7 +475,7 @@ async function stream(
           return response.write(chunk);
         });
       },
-      async onCompleteAll() {
+      async onAllReady() {
         log.trace('node complete stream');
 
         if (componentResponse.canStream() || response.writableEnded) {
@@ -508,6 +517,17 @@ async function stream(
           }
         );
       },
+      onShellError(error: any) {
+        log.error(error);
+
+        if (!response.writableEnded) {
+          writeHeadToServerResponse(response, componentResponse, log, error);
+          startWritingHtmlToServerResponse(response, dev ? error : undefined);
+
+          response.write(template);
+          response.end();
+        }
+      },
       onError(error: any) {
         didError = error;
 
@@ -669,27 +689,24 @@ async function renderToBufferedString(
 ): Promise<string> {
   return new Promise<string>(async (resolve, reject) => {
     if (__WORKER__) {
-      const deferred = defer();
-      const readable = ssrRenderToReadableStream(ReactApp, {
-        nonce,
-        onCompleteAll() {
-          /**
-           * We want to wait until `onCompleteAll` has been called before fetching the
-           * stream body. Otherwise, React 18's streaming JS script/template tags
-           * will be included in the output and cause issues when loading
-           * the Client Components in the browser.
-           */
-          deferred.resolve(null);
-        },
-        onError(error: any) {
-          log.error(error);
-          deferred.reject(error);
-        },
-      });
+      try {
+        const ssrReadable = await ssrRenderToReadableStream(ReactApp, {
+          nonce,
+          onError: (error) => log.error(error),
+        });
 
-      await deferred.promise.catch(reject);
+        /**
+         * We want to wait until `allReady` resolves before fetching the
+         * stream body. Otherwise, React 18's streaming JS script/template tags
+         * will be included in the output and cause issues when loading
+         * the Client Components in the browser.
+         */
+        await ssrReadable.allReady;
 
-      resolve(await bufferReadableStream(readable.getReader()));
+        resolve(bufferReadableStream(ssrReadable.getReader()));
+      } catch (error: unknown) {
+        reject(error);
+      }
     } else {
       const writer = await createNodeWriter();
 
@@ -699,7 +716,7 @@ async function renderToBufferedString(
          * When hydrating, we have to wait until `onCompleteAll` to avoid having
          * `template` and `script` tags inserted and rendered as part of the hydration response.
          */
-        onCompleteAll() {
+        onAllReady() {
           let data = '';
           writer.on('data', (chunk) => (data += chunk.toString()));
           writer.once('error', reject);
@@ -707,10 +724,8 @@ async function renderToBufferedString(
           // Tell React to start writing to the writer
           pipe(writer);
         },
-        onError(error: any) {
-          log.error(error);
-          reject(error);
-        },
+        onShellError: reject,
+        onError: (error) => log.error(error),
       });
     }
   });
@@ -723,8 +738,8 @@ function startWritingHtmlToServerResponse(
   error?: Error
 ) {
   if (!response.headersSent) {
-    response.setHeader('Content-type', HTML_CONTENT_TYPE);
-    response.write('<!DOCTYPE html>');
+    response.setHeader(CONTENT_TYPE, HTML_CONTENT_TYPE);
+    response.write(DOCTYPE);
   }
 
   if (error) {
@@ -733,21 +748,6 @@ function startWritingHtmlToServerResponse(
   }
 }
 
-function startWritingHtmlToStream(
-  responseOptions: ResponseOptions,
-  writable: WritableStreamDefaultWriter,
-  encoder: TextEncoder,
-  error?: Error
-) {
-  responseOptions.headers['Content-type'] = HTML_CONTENT_TYPE;
-  writable.write(encoder.encode('<!DOCTYPE html>'));
-
-  if (error) {
-    // This error was delayed until the headers were properly sent.
-    writable.write(encoder.encode(getErrorMarkup(error)));
-  }
-}
-
 type ResponseOptions = {
   headers: Record<string, string>;
   status: number;
diff --git a/packages/hydrogen/src/foundation/Router/BrowserRouter.client.tsx b/packages/hydrogen/src/foundation/Router/BrowserRouter.client.tsx
index d0d567e94b..2bfe5c0da3 100644
--- a/packages/hydrogen/src/foundation/Router/BrowserRouter.client.tsx
+++ b/packages/hydrogen/src/foundation/Router/BrowserRouter.client.tsx
@@ -18,21 +18,22 @@ type RouterContextValue = {
 export const RouterContext = createContext<RouterContextValue | {}>({});
 
 let currentPath = '';
+let isFirstLoad = true;
 
-export const BrowserRouter: FC<{
-  history?: BrowserHistory;
-}> = ({history: pHistory, children}) => {
+export const BrowserRouter: FC<{history?: BrowserHistory}> = ({
+  history: pHistory,
+  children,
+}) => {
   if (META_ENV_SSR) return <>{children}</>;
 
   const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
-  const [firstLoad, setFirstLoad] = useState(true);
   const [location, setLocation] = useState(history.location);
 
   const {pending, serverState, setServerState} = useServerState();
 
   useEffect(() => {
     // The app has just loaded
-    if (firstLoad) setFirstLoad(false);
+    if (isFirstLoad) isFirstLoad = false;
     // A navigation event has just happened
     else if (!pending && currentPath !== serverState.pathname) {
       window.scrollTo(0, 0);
diff --git a/packages/hydrogen/src/foundation/ServerRequestProvider/ServerRequestProvider.tsx b/packages/hydrogen/src/foundation/ServerRequestProvider/ServerRequestProvider.tsx
index 71292524eb..98bf33a514 100644
--- a/packages/hydrogen/src/foundation/ServerRequestProvider/ServerRequestProvider.tsx
+++ b/packages/hydrogen/src/foundation/ServerRequestProvider/ServerRequestProvider.tsx
@@ -54,14 +54,14 @@ export function ServerRequestProvider({
 export function useServerRequest() {
   let request: ServerComponentRequest | null;
   try {
-    // Context only works in SSR rendering
-    request = useContext(RequestContextSSR);
-  } catch (error) {
-    // If normal context failed it means this is not an SSR request.
-    // Try getting RSC cache instead:
+    // This cache only works during RSC rendering:
     // @ts-ignore
     const cache = React.unstable_getCacheForType(requestCacheRSC);
     request = cache ? cache.get(requestCacheRSC.key) : null;
+  } catch (error) {
+    // If RSC cache failed it means this is not an RSC request.
+    // Try getting SSR context instead:
+    request = useContext(RequestContextSSR);
   }
 
   if (!request) {
diff --git a/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts b/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts
index 4eebd76d73..c9e323261d 100644
--- a/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts
+++ b/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts
@@ -54,13 +54,14 @@ export default () => {
            * server versions and optimize them for ESM.
            */
           'react-helmet-async',
+          'react-error-boundary',
           /**
            * Vite cannot find the following dependencies since they might be
            * required in RSC asynchronously. This tells Vite to optimize them
            * at server start to avoid posterior page reloads and issues (#429 #430).
            */
           'react',
-          'react-dom',
+          'react-dom/client',
           'react-server-dom-vite/client-proxy',
         ],
       },
@@ -73,31 +74,5 @@ export default () => {
       envPrefix: ['VITE_', 'PUBLIC_'],
       base: process.env.HYDROGEN_ASSET_BASE_URL,
     }),
-
-    // TODO: Remove when react-dom/fizz is fixed
-    renderChunk: process.env.WORKER
-      ? (code, chunk, opts) => {
-          if (!chunk.isEntry) return null;
-
-          // React fizz and flight try to access an undefined value.
-          // This puts a guard before accessing it.
-          code = code.replace(/\((\w+)\.locked\)/gm, '($1 && $1.locked)');
-
-          // `renderToReadableStream` is bugged in React.
-          // This adds a workaround until these issues are fixed:
-          // https://github.com/facebook/react/issues/22772
-          // https://github.com/facebook/react/issues/23113
-          code = code.replace(
-            /var \w+\s*=\s*(\w+)\.completedRootSegment;/g,
-            'if($1.status===5)return;$1.status=5;\n$&'
-          );
-          code = code.replace(
-            /{([^{]*?(\w+)\.pingedTasks\.length)/g,
-            '{$2.status=0;\n$1'
-          );
-
-          return code;
-        }
-      : undefined,
   } as Plugin;
 };
diff --git a/packages/hydrogen/src/streaming.server.ts b/packages/hydrogen/src/streaming.server.ts
index 346be5324b..b2cc801686 100644
--- a/packages/hydrogen/src/streaming.server.ts
+++ b/packages/hydrogen/src/streaming.server.ts
@@ -22,22 +22,24 @@ export const createFromReadableStream = _createFromReadableStream as (
 
 type StreamOptions = {
   nonce?: string;
-  onCompleteShell?: () => void;
-  onCompleteAll?: () => void;
-  onError?: (error: Error) => void;
   bootstrapScripts?: string[];
   bootstrapModules?: string[];
+  onError?: (error: Error) => void;
 };
 
 export const ssrRenderToPipeableStream = _ssrRenderToPipeableStream as (
   App: JSX.Element,
-  options: StreamOptions
+  options: StreamOptions & {
+    onAllReady?: () => void;
+    onShellReady?: () => void;
+    onShellError?: (error: Error) => void;
+  }
 ) => {pipe: Writable['pipe']};
 
 export const ssrRenderToReadableStream = _ssrRenderToReadableStream as (
   App: JSX.Element,
   options: StreamOptions
-) => ReadableStream<Uint8Array>;
+) => Promise<ReadableStream<Uint8Array> & {allReady: Promise<void>}>;
 
 export async function isStreamingSupported() {
   return Boolean(globalThis.Oxygen?.env?.HYDROGEN_ENABLE_WORKER_STREAMING);
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.development.server.js b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.development.server.js
index 174845d232..a9e87df76c 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.development.server.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.development.server.js
@@ -65,9 +65,75 @@ if (process.env.NODE_ENV !== 'production') {
     function scheduleWork(callback) {
       callback();
     }
+    var VIEW_SIZE = 512;
+    var currentView = null;
+    var writtenBytes = 0;
+    function beginWriting(destination) {
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
     function writeChunk(destination, chunk) {
-      destination.enqueue(chunk);
-      return destination.desiredSize > 0;
+      if (chunk.length === 0) {
+        return;
+      }
+
+      if (chunk.length > VIEW_SIZE) {
+        // this chunk may overflow a single view which implies it was not
+        // one that is cached by the streaming renderer. We will enqueu
+        // it directly and expect it is not re-used
+        if (writtenBytes > 0) {
+          destination.enqueue(
+            new Uint8Array(currentView.buffer, 0, writtenBytes)
+          );
+          currentView = new Uint8Array(VIEW_SIZE);
+          writtenBytes = 0;
+        }
+
+        destination.enqueue(chunk);
+        return;
+      }
+
+      var bytesToWrite = chunk;
+      var allowableBytes = currentView.length - writtenBytes;
+
+      if (allowableBytes < bytesToWrite.length) {
+        // this chunk would overflow the current view. We enqueue a full view
+        // and start a new view with the remaining chunk
+        if (allowableBytes === 0) {
+          // the current view is already full, send it
+          destination.enqueue(currentView);
+        } else {
+          // fill up the current view and apply the remaining chunk bytes
+          // to a new view.
+          currentView.set(
+            bytesToWrite.subarray(0, allowableBytes),
+            writtenBytes
+          ); // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
+
+          destination.enqueue(currentView);
+          bytesToWrite = bytesToWrite.subarray(allowableBytes);
+        }
+
+        currentView = new Uint8Array(VIEW_SIZE);
+        writtenBytes = 0;
+      }
+
+      currentView.set(bytesToWrite, writtenBytes);
+      writtenBytes += bytesToWrite.length;
+    }
+    function writeChunkAndReturn(destination, chunk) {
+      writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more
+
+      return true;
+    }
+    function completeWriting(destination) {
+      if (currentView && writtenBytes > 0) {
+        destination.enqueue(
+          new Uint8Array(currentView.buffer, 0, writtenBytes)
+        );
+        currentView = null;
+        writtenBytes = 0;
+      }
     }
     function close(destination) {
       destination.close();
@@ -76,6 +142,9 @@ if (process.env.NODE_ENV !== 'production') {
     function stringToChunk(content) {
       return textEncoder.encode(content);
     }
+    function stringToPrecomputedChunk(content) {
+      return textEncoder.encode(content);
+    }
     function closeWithError(destination, error) {
       if (typeof destination.error === 'function') {
         // $FlowFixMe: This is an Error object or the destination accepts other types.
@@ -116,6 +185,10 @@ if (process.env.NODE_ENV !== 'production') {
       var row = serializeRowHeader('M', id) + json + '\n';
       return stringToChunk(row);
     }
+    function processProviderChunk(request, id, contextName) {
+      var row = serializeRowHeader('P', id) + contextName + '\n';
+      return stringToChunk(row);
+    }
     function processSymbolChunk(request, id, name) {
       var json = stringify(name);
       var row = serializeRowHeader('S', id) + json + '\n';
@@ -140,53 +213,1022 @@ if (process.env.NODE_ENV !== 'production') {
     // ATTENTION
     // When adding new symbols to this file,
     // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-    // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-    // nor polyfill, then a plain number is used for performance.
-    var REACT_ELEMENT_TYPE = 0xeac7;
-    var REACT_PORTAL_TYPE = 0xeaca;
-    var REACT_FRAGMENT_TYPE = 0xeacb;
-    var REACT_STRICT_MODE_TYPE = 0xeacc;
-    var REACT_PROFILER_TYPE = 0xead2;
-    var REACT_PROVIDER_TYPE = 0xeacd;
-    var REACT_CONTEXT_TYPE = 0xeace;
-    var REACT_FORWARD_REF_TYPE = 0xead0;
-    var REACT_SUSPENSE_TYPE = 0xead1;
-    var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-    var REACT_MEMO_TYPE = 0xead3;
-    var REACT_LAZY_TYPE = 0xead4;
-    var REACT_SCOPE_TYPE = 0xead7;
-    var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-    var REACT_OFFSCREEN_TYPE = 0xeae2;
-    var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-    var REACT_CACHE_TYPE = 0xeae4;
-
-    if (typeof Symbol === 'function' && Symbol.for) {
-      var symbolFor = Symbol.for;
-      REACT_ELEMENT_TYPE = symbolFor('react.element');
-      REACT_PORTAL_TYPE = symbolFor('react.portal');
-      REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-      REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-      REACT_PROFILER_TYPE = symbolFor('react.profiler');
-      REACT_PROVIDER_TYPE = symbolFor('react.provider');
-      REACT_CONTEXT_TYPE = symbolFor('react.context');
-      REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-      REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-      REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-      REACT_MEMO_TYPE = symbolFor('react.memo');
-      REACT_LAZY_TYPE = symbolFor('react.lazy');
-      REACT_SCOPE_TYPE = symbolFor('react.scope');
-      REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-      REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-      REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-      REACT_CACHE_TYPE = symbolFor('react.cache');
+    // The Symbol used to tag the ReactElement-like types.
+    var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+    var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+    var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+    var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+    var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+    var REACT_MEMO_TYPE = Symbol.for('react.memo');
+    var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+    var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+      'react.default_value'
+    );
+
+    // A reserved attribute.
+    // It is handled by React separately and shouldn't be written to the DOM.
+    var RESERVED = 0; // A simple string attribute.
+    // Attributes that aren't in the filter are presumed to have this type.
+
+    var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
+    // "enumerated" attributes with "true" and "false" as possible values.
+    // When true, it should be set to a "true" string.
+    // When false, it should be set to a "false" string.
+
+    var BOOLEANISH_STRING = 2; // A real boolean attribute.
+    // When true, it should be present (set either to an empty string or its name).
+    // When false, it should be omitted.
+
+    var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
+    // When true, it should be present (set either to an empty string or its name).
+    // When false, it should be omitted.
+    // For any other value, should be present with that value.
+
+    var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
+    // When falsy, it should be removed.
+
+    var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
+    // When falsy, it should be removed.
+
+    var POSITIVE_NUMERIC = 6;
+
+    function PropertyInfoRecord(
+      name,
+      type,
+      mustUseProperty,
+      attributeName,
+      attributeNamespace,
+      sanitizeURL,
+      removeEmptyString
+    ) {
+      this.acceptsBooleans =
+        type === BOOLEANISH_STRING ||
+        type === BOOLEAN ||
+        type === OVERLOADED_BOOLEAN;
+      this.attributeName = attributeName;
+      this.attributeNamespace = attributeNamespace;
+      this.mustUseProperty = mustUseProperty;
+      this.propertyName = name;
+      this.type = type;
+      this.sanitizeURL = sanitizeURL;
+      this.removeEmptyString = removeEmptyString;
+    } // When adding attributes to this list, be sure to also add them to
+    // the `possibleStandardNames` module to ensure casing and incorrect
+    // name warnings.
+
+    var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
+
+    var reservedProps = [
+      'children',
+      'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
+      // elements (not just inputs). Now that ReactDOMInput assigns to the
+      // defaultValue property -- do we need this?
+      'defaultValue',
+      'defaultChecked',
+      'innerHTML',
+      'suppressContentEditableWarning',
+      'suppressHydrationWarning',
+      'style',
+    ];
+
+    {
+      reservedProps.push('innerText', 'textContent');
     }
 
+    reservedProps.forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        RESERVED,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // A few React string attributes have a different name.
+    // This is a mapping from React prop names to the attribute names.
+
+    [
+      ['acceptCharset', 'accept-charset'],
+      ['className', 'class'],
+      ['htmlFor', 'for'],
+      ['httpEquiv', 'http-equiv'],
+    ].forEach(function (_ref) {
+      var name = _ref[0],
+        attributeName = _ref[1];
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are "enumerated" HTML attributes that accept "true" and "false".
+    // In React, we let users pass `true` and `false` even though technically
+    // these aren't boolean attributes (they are coerced to strings).
+
+    ['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (
+      name
+    ) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEANISH_STRING,
+        false, // mustUseProperty
+        name.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are "enumerated" SVG attributes that accept "true" and "false".
+    // In React, we let users pass `true` and `false` even though technically
+    // these aren't boolean attributes (they are coerced to strings).
+    // Since these are SVG attributes, their attribute names are case-sensitive.
+
+    [
+      'autoReverse',
+      'externalResourcesRequired',
+      'focusable',
+      'preserveAlpha',
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEANISH_STRING,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML boolean attributes.
+
+    [
+      'allowFullScreen',
+      'async', // Note: there is a special case that prevents it from being written to the DOM
+      // on the client side because the browsers are inconsistent. Instead we call focus().
+      'autoFocus',
+      'autoPlay',
+      'controls',
+      'default',
+      'defer',
+      'disabled',
+      'disablePictureInPicture',
+      'disableRemotePlayback',
+      'formNoValidate',
+      'hidden',
+      'loop',
+      'noModule',
+      'noValidate',
+      'open',
+      'playsInline',
+      'readOnly',
+      'required',
+      'reversed',
+      'scoped',
+      'seamless', // Microdata
+      'itemScope',
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEAN,
+        false, // mustUseProperty
+        name.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are the few React props that we set as DOM properties
+    // rather than attributes. These are all booleans.
+
+    [
+      'checked', // Note: `option.selected` is not updated if `select.multiple` is
+      // disabled with `removeAttribute`. We have special logic for handling this.
+      'multiple',
+      'muted',
+      'selected', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEAN,
+        true, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML attributes that are "overloaded booleans": they behave like
+    // booleans, but can also accept a string value.
+
+    [
+      'capture',
+      'download', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        OVERLOADED_BOOLEAN,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML attributes that must be positive numbers.
+
+    [
+      'cols',
+      'rows',
+      'size',
+      'span', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        POSITIVE_NUMERIC,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML attributes that must be numbers.
+
+    ['rowSpan', 'start'].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        NUMERIC,
+        false, // mustUseProperty
+        name.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    });
+    var CAMELIZE = /[\-\:]([a-z])/g;
+
+    var capitalize = function (token) {
+      return token[1].toUpperCase();
+    }; // This is a list of all SVG attributes that need special casing, namespacing,
+    // or boolean value assignment. Regular attributes that just accept strings
+    // and have the same names are omitted, just like in the HTML attribute filter.
+    // Some of these attributes can be hard to find. This list was created by
+    // scraping the MDN documentation.
+
+    [
+      'accent-height',
+      'alignment-baseline',
+      'arabic-form',
+      'baseline-shift',
+      'cap-height',
+      'clip-path',
+      'clip-rule',
+      'color-interpolation',
+      'color-interpolation-filters',
+      'color-profile',
+      'color-rendering',
+      'dominant-baseline',
+      'enable-background',
+      'fill-opacity',
+      'fill-rule',
+      'flood-color',
+      'flood-opacity',
+      'font-family',
+      'font-size',
+      'font-size-adjust',
+      'font-stretch',
+      'font-style',
+      'font-variant',
+      'font-weight',
+      'glyph-name',
+      'glyph-orientation-horizontal',
+      'glyph-orientation-vertical',
+      'horiz-adv-x',
+      'horiz-origin-x',
+      'image-rendering',
+      'letter-spacing',
+      'lighting-color',
+      'marker-end',
+      'marker-mid',
+      'marker-start',
+      'overline-position',
+      'overline-thickness',
+      'paint-order',
+      'panose-1',
+      'pointer-events',
+      'rendering-intent',
+      'shape-rendering',
+      'stop-color',
+      'stop-opacity',
+      'strikethrough-position',
+      'strikethrough-thickness',
+      'stroke-dasharray',
+      'stroke-dashoffset',
+      'stroke-linecap',
+      'stroke-linejoin',
+      'stroke-miterlimit',
+      'stroke-opacity',
+      'stroke-width',
+      'text-anchor',
+      'text-decoration',
+      'text-rendering',
+      'underline-position',
+      'underline-thickness',
+      'unicode-bidi',
+      'unicode-range',
+      'units-per-em',
+      'v-alphabetic',
+      'v-hanging',
+      'v-ideographic',
+      'v-mathematical',
+      'vector-effect',
+      'vert-adv-y',
+      'vert-origin-x',
+      'vert-origin-y',
+      'word-spacing',
+      'writing-mode',
+      'xmlns:xlink',
+      'x-height', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (attributeName) {
+      var name = attributeName.replace(CAMELIZE, capitalize);
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName,
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // String SVG attributes with the xlink namespace.
+
+    [
+      'xlink:actuate',
+      'xlink:arcrole',
+      'xlink:role',
+      'xlink:show',
+      'xlink:title',
+      'xlink:type', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (attributeName) {
+      var name = attributeName.replace(CAMELIZE, capitalize);
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName,
+        'http://www.w3.org/1999/xlink',
+        false, // sanitizeURL
+        false
+      );
+    }); // String SVG attributes with the xml namespace.
+
+    [
+      'xml:base',
+      'xml:lang',
+      'xml:space', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (attributeName) {
+      var name = attributeName.replace(CAMELIZE, capitalize);
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName,
+        'http://www.w3.org/XML/1998/namespace',
+        false, // sanitizeURL
+        false
+      );
+    }); // These attribute exists both in HTML and SVG.
+    // The attribute name is case-sensitive in SVG so we can't just use
+    // the React name like we do for attributes that exist only in HTML.
+
+    ['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
+      properties[attributeName] = new PropertyInfoRecord(
+        attributeName,
+        STRING,
+        false, // mustUseProperty
+        attributeName.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These attributes accept URLs. These must not allow javascript: URLS.
+    // These will also need to accept Trusted Types object in the future.
+
+    var xlinkHref = 'xlinkHref';
+    properties[xlinkHref] = new PropertyInfoRecord(
+      'xlinkHref',
+      STRING,
+      false, // mustUseProperty
+      'xlink:href',
+      'http://www.w3.org/1999/xlink',
+      true, // sanitizeURL
+      false
+    );
+    ['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
+      properties[attributeName] = new PropertyInfoRecord(
+        attributeName,
+        STRING,
+        false, // mustUseProperty
+        attributeName.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        true, // sanitizeURL
+        true
+      );
+    });
+
+    /**
+     * CSS properties which accept numbers but are not in units of "px".
+     */
+    var isUnitlessNumber = {
+      animationIterationCount: true,
+      aspectRatio: true,
+      borderImageOutset: true,
+      borderImageSlice: true,
+      borderImageWidth: true,
+      boxFlex: true,
+      boxFlexGroup: true,
+      boxOrdinalGroup: true,
+      columnCount: true,
+      columns: true,
+      flex: true,
+      flexGrow: true,
+      flexPositive: true,
+      flexShrink: true,
+      flexNegative: true,
+      flexOrder: true,
+      gridArea: true,
+      gridRow: true,
+      gridRowEnd: true,
+      gridRowSpan: true,
+      gridRowStart: true,
+      gridColumn: true,
+      gridColumnEnd: true,
+      gridColumnSpan: true,
+      gridColumnStart: true,
+      fontWeight: true,
+      lineClamp: true,
+      lineHeight: true,
+      opacity: true,
+      order: true,
+      orphans: true,
+      tabSize: true,
+      widows: true,
+      zIndex: true,
+      zoom: true,
+      // SVG-related properties
+      fillOpacity: true,
+      floodOpacity: true,
+      stopOpacity: true,
+      strokeDasharray: true,
+      strokeDashoffset: true,
+      strokeMiterlimit: true,
+      strokeOpacity: true,
+      strokeWidth: true,
+    };
+    /**
+     * @param {string} prefix vendor-specific prefix, eg: Webkit
+     * @param {string} key style name, eg: transitionDuration
+     * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+     * WebkitTransitionDuration
+     */
+
+    function prefixKey(prefix, key) {
+      return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+    }
+    /**
+     * Support style names that may come passed in prefixed by adding permutations
+     * of vendor prefixes.
+     */
+
+    var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+    // infinite loop, because it iterates over the newly added props too.
+
+    Object.keys(isUnitlessNumber).forEach(function (prop) {
+      prefixes.forEach(function (prefix) {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+      });
+    });
+
     var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
     function isArray(a) {
       return isArrayImpl(a);
     }
 
+    var startInlineScript = stringToPrecomputedChunk('<script>');
+    var endInlineScript = stringToPrecomputedChunk('</script>');
+    var startScriptSrc = stringToPrecomputedChunk('<script src="');
+    var startModuleSrc = stringToPrecomputedChunk(
+      '<script type="module" src="'
+    );
+    var endAsyncScript = stringToPrecomputedChunk('" async=""></script>'); // Allows us to keep track of what we've already written so we can refer back to it.
+
+    var textSeparator = stringToPrecomputedChunk('<!-- -->');
+
+    var styleAttributeStart = stringToPrecomputedChunk(' style="');
+    var styleAssign = stringToPrecomputedChunk(':');
+    var styleSeparator = stringToPrecomputedChunk(';');
+
+    var attributeSeparator = stringToPrecomputedChunk(' ');
+    var attributeAssign = stringToPrecomputedChunk('="');
+    var attributeEnd = stringToPrecomputedChunk('"');
+    var attributeEmptyString = stringToPrecomputedChunk('=""');
+
+    var endOfStartTag = stringToPrecomputedChunk('>');
+    var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
+
+    var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+    var leadingNewline = stringToPrecomputedChunk('\n');
+
+    var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
+    var endTag1 = stringToPrecomputedChunk('</');
+    var endTag2 = stringToPrecomputedChunk('>');
+    // A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+    // display. It's never visible to users. We use the template tag because it can be used in every
+    // type of parent. <script> tags also work in every other tag except <colgroup>.
+
+    var placeholder1 = stringToPrecomputedChunk('<template id="');
+    var placeholder2 = stringToPrecomputedChunk('"></template>');
+
+    var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+    var startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+      '<!--$?--><template id="'
+    );
+    var startPendingSuspenseBoundary2 =
+      stringToPrecomputedChunk('"></template>');
+    var startClientRenderedSuspenseBoundary =
+      stringToPrecomputedChunk('<!--$!-->');
+    var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+    var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+    var startSegmentHTML2 = stringToPrecomputedChunk('">');
+    var endSegmentHTML = stringToPrecomputedChunk('</div>');
+    var startSegmentSVG = stringToPrecomputedChunk(
+      '<svg aria-hidden="true" style="display:none" id="'
+    );
+    var startSegmentSVG2 = stringToPrecomputedChunk('">');
+    var endSegmentSVG = stringToPrecomputedChunk('</svg>');
+    var startSegmentMathML = stringToPrecomputedChunk(
+      '<math aria-hidden="true" style="display:none" id="'
+    );
+    var startSegmentMathML2 = stringToPrecomputedChunk('">');
+    var endSegmentMathML = stringToPrecomputedChunk('</math>');
+    var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
+    var startSegmentTable2 = stringToPrecomputedChunk('">');
+    var endSegmentTable = stringToPrecomputedChunk('</table>');
+    var startSegmentTableBody = stringToPrecomputedChunk(
+      '<table hidden><tbody id="'
+    );
+    var startSegmentTableBody2 = stringToPrecomputedChunk('">');
+    var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
+    var startSegmentTableRow = stringToPrecomputedChunk(
+      '<table hidden><tr id="'
+    );
+    var startSegmentTableRow2 = stringToPrecomputedChunk('">');
+    var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
+    var startSegmentColGroup = stringToPrecomputedChunk(
+      '<table hidden><colgroup id="'
+    );
+    var startSegmentColGroup2 = stringToPrecomputedChunk('">');
+    var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
+    // The following code is the source scripts that we then minify and inline below,
+    // with renamed function names that we hope don't collide:
+    // const COMMENT_NODE = 8;
+    // const SUSPENSE_START_DATA = '$';
+    // const SUSPENSE_END_DATA = '/$';
+    // const SUSPENSE_PENDING_START_DATA = '$?';
+    // const SUSPENSE_FALLBACK_START_DATA = '$!';
+    //
+    // function clientRenderBoundary(suspenseBoundaryID) {
+    //   // Find the fallback's first element.
+    //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+    //   if (!suspenseIdNode) {
+    //     // The user must have already navigated away from this tree.
+    //     // E.g. because the parent was hydrated.
+    //     return;
+    //   }
+    //   // Find the boundary around the fallback. This is always the previous node.
+    //   const suspenseNode = suspenseIdNode.previousSibling;
+    //   // Tag it to be client rendered.
+    //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+    //   // Tell React to retry it if the parent already hydrated.
+    //   if (suspenseNode._reactRetry) {
+    //     suspenseNode._reactRetry();
+    //   }
+    // }
+    //
+    // function completeBoundary(suspenseBoundaryID, contentID) {
+    //   // Find the fallback's first element.
+    //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+    //   const contentNode = document.getElementById(contentID);
+    //   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
+    //   // This might also help by not causing recalcing each time we move a child from here to the target.
+    //   contentNode.parentNode.removeChild(contentNode);
+    //   if (!suspenseIdNode) {
+    //     // The user must have already navigated away from this tree.
+    //     // E.g. because the parent was hydrated. That's fine there's nothing to do
+    //     // but we have to make sure that we already deleted the container node.
+    //     return;
+    //   }
+    //   // Find the boundary around the fallback. This is always the previous node.
+    //   const suspenseNode = suspenseIdNode.previousSibling;
+    //
+    //   // Clear all the existing children. This is complicated because
+    //   // there can be embedded Suspense boundaries in the fallback.
+    //   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
+    //   // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+    //   // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+    //   const parentInstance = suspenseNode.parentNode;
+    //   let node = suspenseNode.nextSibling;
+    //   let depth = 0;
+    //   do {
+    //     if (node && node.nodeType === COMMENT_NODE) {
+    //       const data = node.data;
+    //       if (data === SUSPENSE_END_DATA) {
+    //         if (depth === 0) {
+    //           break;
+    //         } else {
+    //           depth--;
+    //         }
+    //       } else if (
+    //         data === SUSPENSE_START_DATA ||
+    //         data === SUSPENSE_PENDING_START_DATA ||
+    //         data === SUSPENSE_FALLBACK_START_DATA
+    //       ) {
+    //         depth++;
+    //       }
+    //     }
+    //
+    //     const nextNode = node.nextSibling;
+    //     parentInstance.removeChild(node);
+    //     node = nextNode;
+    //   } while (node);
+    //
+    //   const endOfBoundary = node;
+    //
+    //   // Insert all the children from the contentNode between the start and end of suspense boundary.
+    //   while (contentNode.firstChild) {
+    //     parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+    //   }
+    //   suspenseNode.data = SUSPENSE_START_DATA;
+    //   if (suspenseNode._reactRetry) {
+    //     suspenseNode._reactRetry();
+    //   }
+    // }
+    //
+    // function completeSegment(containerID, placeholderID) {
+    //   const segmentContainer = document.getElementById(containerID);
+    //   const placeholderNode = document.getElementById(placeholderID);
+    //   // We always expect both nodes to exist here because, while we might
+    //   // have navigated away from the main tree, we still expect the detached
+    //   // tree to exist.
+    //   segmentContainer.parentNode.removeChild(segmentContainer);
+    //   while (segmentContainer.firstChild) {
+    //     placeholderNode.parentNode.insertBefore(
+    //       segmentContainer.firstChild,
+    //       placeholderNode,
+    //     );
+    //   }
+    //   placeholderNode.parentNode.removeChild(placeholderNode);
+    // }
+
+    var completeSegmentFunction =
+      'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
+    var completeBoundaryFunction =
+      'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
+    var clientRenderFunction =
+      'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+    var completeSegmentScript1Full = stringToPrecomputedChunk(
+      completeSegmentFunction + ';$RS("'
+    );
+    var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
+    var completeSegmentScript2 = stringToPrecomputedChunk('","');
+    var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+    var completeBoundaryScript1Full = stringToPrecomputedChunk(
+      completeBoundaryFunction + ';$RC("'
+    );
+    var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
+    var completeBoundaryScript2 = stringToPrecomputedChunk('","');
+    var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
+    var clientRenderScript1Full = stringToPrecomputedChunk(
+      clientRenderFunction + ';$RX("'
+    );
+    var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+    var clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+
+    var rendererSigil;
+
+    {
+      // Use this to detect multiple renderers using the same context
+      rendererSigil = {};
+    } // Used to store the parent path of all context overrides in a shared linked list.
+    // Forming a reverse tree.
+
+    var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
+    // This global (actually thread local) state represents what state all those "current",
+    // fields are currently in.
+
+    var currentActiveSnapshot = null;
+
+    function popNode(prev) {
+      {
+        prev.context._currentValue = prev.parentValue;
+      }
+    }
+
+    function pushNode(next) {
+      {
+        next.context._currentValue = next.value;
+      }
+    }
+
+    function popToNearestCommonAncestor(prev, next) {
+      if (prev === next);
+      else {
+        popNode(prev);
+        var parentPrev = prev.parent;
+        var parentNext = next.parent;
+
+        if (parentPrev === null) {
+          if (parentNext !== null) {
+            throw new Error(
+              'The stacks must reach the root at the same time. This is a bug in React.'
+            );
+          }
+        } else {
+          if (parentNext === null) {
+            throw new Error(
+              'The stacks must reach the root at the same time. This is a bug in React.'
+            );
+          }
+
+          popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+
+          pushNode(next);
+        }
+      }
+    }
+
+    function popAllPrevious(prev) {
+      popNode(prev);
+      var parentPrev = prev.parent;
+
+      if (parentPrev !== null) {
+        popAllPrevious(parentPrev);
+      }
+    }
+
+    function pushAllNext(next) {
+      var parentNext = next.parent;
+
+      if (parentNext !== null) {
+        pushAllNext(parentNext);
+      }
+
+      pushNode(next);
+    }
+
+    function popPreviousToCommonLevel(prev, next) {
+      popNode(prev);
+      var parentPrev = prev.parent;
+
+      if (parentPrev === null) {
+        throw new Error(
+          'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+        );
+      }
+
+      if (parentPrev.depth === next.depth) {
+        // We found the same level. Now we just need to find a shared ancestor.
+        popToNearestCommonAncestor(parentPrev, next);
+      } else {
+        // We must still be deeper.
+        popPreviousToCommonLevel(parentPrev, next);
+      }
+    }
+
+    function popNextToCommonLevel(prev, next) {
+      var parentNext = next.parent;
+
+      if (parentNext === null) {
+        throw new Error(
+          'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+        );
+      }
+
+      if (prev.depth === parentNext.depth) {
+        // We found the same level. Now we just need to find a shared ancestor.
+        popToNearestCommonAncestor(prev, parentNext);
+      } else {
+        // We must still be deeper.
+        popNextToCommonLevel(prev, parentNext);
+      }
+
+      pushNode(next);
+    } // Perform context switching to the new snapshot.
+    // To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
+    // updating all the context's current values. That way reads, always just read the current value.
+    // At the cost of updating contexts even if they're never read by this subtree.
+
+    function switchContext(newSnapshot) {
+      // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
+      // We also need to update any new contexts that are now on the stack with the deepest value.
+      // The easiest way to update new contexts is to just reapply them in reverse order from the
+      // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
+      // for that. Therefore this algorithm is recursive.
+      // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
+      // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
+      // 3) Then we reapply new contexts on the way back up the stack.
+      var prev = currentActiveSnapshot;
+      var next = newSnapshot;
+
+      if (prev !== next) {
+        if (prev === null) {
+          // $FlowFixMe: This has to be non-null since it's not equal to prev.
+          pushAllNext(next);
+        } else if (next === null) {
+          popAllPrevious(prev);
+        } else if (prev.depth === next.depth) {
+          popToNearestCommonAncestor(prev, next);
+        } else if (prev.depth > next.depth) {
+          popPreviousToCommonLevel(prev, next);
+        } else {
+          popNextToCommonLevel(prev, next);
+        }
+
+        currentActiveSnapshot = next;
+      }
+    }
+    function pushProvider(context, nextValue) {
+      var prevValue;
+
+      {
+        prevValue = context._currentValue;
+        context._currentValue = nextValue;
+
+        {
+          if (
+            context._currentRenderer !== undefined &&
+            context._currentRenderer !== null &&
+            context._currentRenderer !== rendererSigil
+          ) {
+            error(
+              'Detected multiple renderers concurrently rendering the ' +
+                'same context provider. This is currently unsupported.'
+            );
+          }
+
+          context._currentRenderer = rendererSigil;
+        }
+      }
+
+      var prevNode = currentActiveSnapshot;
+      var newNode = {
+        parent: prevNode,
+        depth: prevNode === null ? 0 : prevNode.depth + 1,
+        context: context,
+        parentValue: prevValue,
+        value: nextValue,
+      };
+      currentActiveSnapshot = newNode;
+      return newNode;
+    }
+    function popProvider() {
+      var prevSnapshot = currentActiveSnapshot;
+
+      if (prevSnapshot === null) {
+        throw new Error(
+          'Tried to pop a Context at the root of the app. This is a bug in React.'
+        );
+      }
+
+      {
+        var value = prevSnapshot.parentValue;
+
+        if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+          prevSnapshot.context._currentValue =
+            prevSnapshot.context._defaultValue;
+        } else {
+          prevSnapshot.context._currentValue = value;
+        }
+      }
+
+      return (currentActiveSnapshot = prevSnapshot.parent);
+    }
+    function getActiveContext() {
+      return currentActiveSnapshot;
+    }
+    function readContext(context) {
+      var value = context._currentValue;
+      return value;
+    }
+
+    function readContext$1(context) {
+      {
+        if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
+          error('Only ServerContext is supported in Flight');
+        }
+
+        if (currentCache === null) {
+          error(
+            'Context can only be read while React is rendering. ' +
+              'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+              'In function components, you can read it directly in the function body, but not ' +
+              'inside Hooks like useReducer() or useMemo().'
+          );
+        }
+      }
+
+      return readContext(context);
+    }
+
+    var Dispatcher = {
+      useMemo: function (nextCreate) {
+        return nextCreate();
+      },
+      useCallback: function (callback) {
+        return callback;
+      },
+      useDebugValue: function () {},
+      useDeferredValue: unsupportedHook,
+      useTransition: unsupportedHook,
+      getCacheForType: function (resourceType) {
+        if (!currentCache) {
+          throw new Error(
+            'Reading the cache is only supported while rendering.'
+          );
+        }
+
+        var entry = currentCache.get(resourceType);
+
+        if (entry === undefined) {
+          entry = resourceType(); // TODO: Warn if undefined?
+
+          currentCache.set(resourceType, entry);
+        }
+
+        return entry;
+      },
+      readContext: readContext$1,
+      useContext: readContext$1,
+      useReducer: unsupportedHook,
+      useRef: unsupportedHook,
+      useState: unsupportedHook,
+      useInsertionEffect: unsupportedHook,
+      useLayoutEffect: unsupportedHook,
+      useImperativeHandle: unsupportedHook,
+      useEffect: unsupportedHook,
+      useId: unsupportedHook,
+      useMutableSource: unsupportedHook,
+      useSyncExternalStore: unsupportedHook,
+      useCacheRefresh: function () {
+        return unsupportedRefresh;
+      },
+    };
+
+    function unsupportedHook() {
+      throw new Error('This Hook is not supported in Server Components.');
+    }
+
+    function unsupportedRefresh() {
+      if (!currentCache) {
+        throw new Error(
+          'Refreshing the cache is not supported in Server Components.'
+        );
+      }
+    }
+
+    var currentCache = null;
+    function setCurrentCache(cache) {
+      currentCache = cache;
+      return currentCache;
+    }
+    function getCurrentCache() {
+      return currentCache;
+    }
+
+    var ContextRegistry = ReactSharedInternals.ContextRegistry;
+    function getOrCreateServerContext(globalName) {
+      if (!ContextRegistry[globalName]) {
+        ContextRegistry[globalName] = React.createServerContext(
+          globalName,
+          REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+        );
+      }
+
+      return ContextRegistry[globalName];
+    }
+
     var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
     function defaultErrorHandler(error) {
@@ -196,7 +1238,7 @@ if (process.env.NODE_ENV !== 'production') {
     var OPEN = 0;
     var CLOSING = 1;
     var CLOSED = 2;
-    function createRequest(model, bundlerConfig, onError) {
+    function createRequest(model, bundlerConfig, onError, context) {
       var pingedSegments = [];
       var request = {
         status: OPEN,
@@ -212,17 +1254,25 @@ if (process.env.NODE_ENV !== 'production') {
         completedErrorChunks: [],
         writtenSymbols: new Map(),
         writtenModules: new Map(),
+        writtenProviders: new Map(),
         onError: onError === undefined ? defaultErrorHandler : onError,
         toJSON: function (key, value) {
           return resolveModelToJSON(request, this, key, value);
         },
       };
       request.pendingChunks++;
-      var rootSegment = createSegment(request, model);
+      var rootContext = createRootContext(context);
+      var rootSegment = createSegment(request, model, rootContext);
       pingedSegments.push(rootSegment);
       return request;
     }
 
+    function createRootContext(reqContext) {
+      return importServerContexts(reqContext);
+    }
+
+    var POP = {};
+
     function attemptResolveElement(type, key, ref, props) {
       if (ref !== null && ref !== undefined) {
         // When the ref moves to the regular props object this will implicitly
@@ -257,6 +1307,13 @@ if (process.env.NODE_ENV !== 'production') {
         }
 
         switch (type.$$typeof) {
+          case REACT_LAZY_TYPE: {
+            var payload = type._payload;
+            var init = type._init;
+            var wrappedType = init(payload);
+            return attemptResolveElement(wrappedType, key, ref, props);
+          }
+
           case REACT_FORWARD_REF_TYPE: {
             var render = type.render;
             return render(props, undefined);
@@ -265,6 +1322,38 @@ if (process.env.NODE_ENV !== 'production') {
           case REACT_MEMO_TYPE: {
             return attemptResolveElement(type.type, key, ref, props);
           }
+
+          case REACT_PROVIDER_TYPE: {
+            pushProvider(type._context, props.value);
+
+            {
+              var extraKeys = Object.keys(props).filter(function (value) {
+                if (value === 'children' || value === 'value') {
+                  return false;
+                }
+
+                return true;
+              });
+
+              if (extraKeys.length !== 0) {
+                error(
+                  'ServerContext can only have a value prop and children. Found: %s',
+                  JSON.stringify(extraKeys)
+                );
+              }
+            }
+
+            return [
+              REACT_ELEMENT_TYPE,
+              type,
+              key, // Rely on __popProvider being serialized last to pop the provider.
+              {
+                value: props.value,
+                children: props.children,
+                __pop: POP,
+              },
+            ];
+          }
         }
       }
 
@@ -285,11 +1374,12 @@ if (process.env.NODE_ENV !== 'production') {
       }
     }
 
-    function createSegment(request, model) {
+    function createSegment(request, model, context) {
       var id = request.nextChunkId++;
       var segment = {
         id: id,
         model: model,
+        context: context,
         ping: function () {
           return pingSegment(request, segment);
         },
@@ -318,7 +1408,7 @@ if (process.env.NODE_ENV !== 'production') {
     function isObjectPrototype(object) {
       if (!object) {
         return false;
-      } // $FlowFixMe
+      }
 
       var ObjectPrototype = Object.prototype;
 
@@ -419,8 +1509,7 @@ if (process.env.NODE_ENV !== 'production') {
 
     function describeObjectForErrorMessage(objectOrArray, expandedName) {
       if (isArray(objectOrArray)) {
-        var str = '['; // $FlowFixMe: Should be refined by now.
-
+        var str = '[';
         var array = objectOrArray;
 
         for (var i = 0; i < array.length; i++) {
@@ -449,8 +1538,7 @@ if (process.env.NODE_ENV !== 'production') {
         str += ']';
         return str;
       } else {
-        var _str = '{'; // $FlowFixMe: Should be refined by now.
-
+        var _str = '{';
         var object = objectOrArray;
         var names = Object.keys(object);
 
@@ -484,6 +1572,8 @@ if (process.env.NODE_ENV !== 'production') {
       }
     }
 
+    var insideContextProps = null;
+    var isInsideContextValue = false;
     function resolveModelToJSON(request, parent, key, value) {
       {
         // $FlowFixMe
@@ -504,29 +1594,57 @@ if (process.env.NODE_ENV !== 'production') {
       switch (value) {
         case REACT_ELEMENT_TYPE:
           return '$';
+      }
 
-        case REACT_LAZY_TYPE:
-          throw new Error(
-            'React Lazy Components are not yet supported on the server.'
-          );
+      {
+        if (
+          parent[0] === REACT_ELEMENT_TYPE &&
+          parent[1] &&
+          parent[1].$$typeof === REACT_PROVIDER_TYPE &&
+          key === '3'
+        ) {
+          insideContextProps = value;
+        } else if (insideContextProps === parent && key === 'value') {
+          isInsideContextValue = true;
+        } else if (insideContextProps === parent && key === 'children') {
+          isInsideContextValue = false;
+        }
       } // Resolve server components.
 
       while (
         typeof value === 'object' &&
         value !== null &&
-        value.$$typeof === REACT_ELEMENT_TYPE
+        (value.$$typeof === REACT_ELEMENT_TYPE ||
+          value.$$typeof === REACT_LAZY_TYPE)
       ) {
-        // TODO: Concatenate keys of parents onto children.
-        var element = value;
+        {
+          if (isInsideContextValue) {
+            error('React elements are not allowed in ServerContext');
+          }
+        }
 
         try {
-          // Attempt to render the server component.
-          value = attemptResolveElement(
-            element.type,
-            element.key,
-            element.ref,
-            element.props
-          );
+          switch (value.$$typeof) {
+            case REACT_ELEMENT_TYPE: {
+              // TODO: Concatenate keys of parents onto children.
+              var element = value; // Attempt to render the server component.
+
+              value = attemptResolveElement(
+                element.type,
+                element.key,
+                element.ref,
+                element.props
+              );
+              break;
+            }
+
+            case REACT_LAZY_TYPE: {
+              var payload = value._payload;
+              var init = value._init;
+              value = init(payload);
+              break;
+            }
+          }
         } catch (x) {
           if (
             typeof x === 'object' &&
@@ -535,12 +1653,12 @@ if (process.env.NODE_ENV !== 'production') {
           ) {
             // Something suspended, we'll need to create a new segment and resolve it later.
             request.pendingChunks++;
-            var newSegment = createSegment(request, value);
+            var newSegment = createSegment(request, value, getActiveContext());
             var ping = newSegment.ping;
             x.then(ping, ping);
             return serializeByRefID(newSegment.id);
           } else {
-            reportError(request, x); // Something errored. We'll still send everything we have up until this point.
+            logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point.
             // We'll replace this element with a lazy reference that throws on the client
             // once it gets rendered.
 
@@ -604,6 +1722,28 @@ if (process.env.NODE_ENV !== 'production') {
             emitErrorChunk(request, _errorId, x);
             return serializeByValueID(_errorId);
           }
+        } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
+          var providerKey = value._context._globalName;
+          var writtenProviders = request.writtenProviders;
+          var providerId = writtenProviders.get(key);
+
+          if (providerId === undefined) {
+            request.pendingChunks++;
+            providerId = request.nextChunkId++;
+            writtenProviders.set(providerKey, providerId);
+            emitProviderChunk(request, providerId, providerKey);
+          }
+
+          return serializeByValueID(providerId);
+        } else if (value === POP) {
+          popProvider();
+
+          {
+            insideContextProps = null;
+            isInsideContextValue = false;
+          }
+
+          return undefined;
         }
 
         {
@@ -737,7 +1877,7 @@ if (process.env.NODE_ENV !== 'production') {
       );
     }
 
-    function reportError(request, error) {
+    function logRecoverableError(request, error) {
       var onError = request.onError;
       onError(error);
     }
@@ -787,7 +1927,14 @@ if (process.env.NODE_ENV !== 'production') {
       request.completedModuleChunks.push(processedChunk);
     }
 
+    function emitProviderChunk(request, id, contextName) {
+      var processedChunk = processProviderChunk(request, id, contextName);
+      request.completedJSONChunks.push(processedChunk);
+    }
+
     function retrySegment(request, segment) {
+      switchContext(segment.context);
+
       try {
         var _value3 = segment.model;
 
@@ -823,7 +1970,7 @@ if (process.env.NODE_ENV !== 'production') {
           x.then(ping, ping);
           return;
         } else {
-          reportError(request, x); // This errored, we need to serialize this error to the
+          logRecoverableError(request, x); // This errored, we need to serialize this error to the
 
           emitErrorChunk(request, segment.id, x);
         }
@@ -832,9 +1979,9 @@ if (process.env.NODE_ENV !== 'production') {
 
     function performWork(request) {
       var prevDispatcher = ReactCurrentDispatcher.current;
-      var prevCache = currentCache;
+      var prevCache = getCurrentCache();
       ReactCurrentDispatcher.current = Dispatcher;
-      currentCache = request.cache;
+      setCurrentCache(request.cache);
 
       try {
         var pingedSegments = request.pingedSegments;
@@ -849,15 +1996,17 @@ if (process.env.NODE_ENV !== 'production') {
           flushCompletedChunks(request, request.destination);
         }
       } catch (error) {
-        reportError(request, error);
+        logRecoverableError(request, error);
         fatalError(request, error);
       } finally {
         ReactCurrentDispatcher.current = prevDispatcher;
-        currentCache = prevCache;
+        setCurrentCache(prevCache);
       }
     }
 
     function flushCompletedChunks(request, destination) {
+      beginWriting();
+
       try {
         // We emit module chunks first in the stream so that
         // they can be preloaded as early as possible.
@@ -867,8 +2016,9 @@ if (process.env.NODE_ENV !== 'production') {
         for (; i < moduleChunks.length; i++) {
           request.pendingChunks--;
           var chunk = moduleChunks[i];
+          var keepWriting = writeChunkAndReturn(destination, chunk);
 
-          if (!writeChunk(destination, chunk)) {
+          if (!keepWriting) {
             request.destination = null;
             i++;
             break;
@@ -884,7 +2034,9 @@ if (process.env.NODE_ENV !== 'production') {
           request.pendingChunks--;
           var _chunk = jsonChunks[i];
 
-          if (!writeChunk(destination, _chunk)) {
+          var _keepWriting = writeChunkAndReturn(destination, _chunk);
+
+          if (!_keepWriting) {
             request.destination = null;
             i++;
             break;
@@ -902,7 +2054,9 @@ if (process.env.NODE_ENV !== 'production') {
           request.pendingChunks--;
           var _chunk2 = errorChunks[i];
 
-          if (!writeChunk(destination, _chunk2)) {
+          var _keepWriting2 = writeChunkAndReturn(destination, _chunk2);
+
+          if (!_keepWriting2) {
             request.destination = null;
             i++;
             break;
@@ -911,6 +2065,7 @@ if (process.env.NODE_ENV !== 'production') {
 
         errorChunks.splice(0, i);
       } finally {
+        completeWriting(destination);
       }
 
       if (request.pendingChunks === 0) {
@@ -935,78 +2090,48 @@ if (process.env.NODE_ENV !== 'production') {
         return;
       }
 
+      if (request.destination !== null) {
+        // We're already flowing.
+        return;
+      }
+
       request.destination = destination;
 
       try {
         flushCompletedChunks(request, destination);
       } catch (error) {
-        reportError(request, error);
+        logRecoverableError(request, error);
         fatalError(request, error);
       }
     }
 
-    function unsupportedHook() {
-      throw new Error('This Hook is not supported in Server Components.');
-    }
-
-    function unsupportedRefresh() {
-      if (!currentCache) {
-        throw new Error(
-          'Refreshing the cache is not supported in Server Components.'
-        );
-      }
-    }
-
-    var currentCache = null;
-    var Dispatcher = {
-      useMemo: function (nextCreate) {
-        return nextCreate();
-      },
-      useCallback: function (callback) {
-        return callback;
-      },
-      useDebugValue: function () {},
-      useDeferredValue: unsupportedHook,
-      useTransition: unsupportedHook,
-      getCacheForType: function (resourceType) {
-        if (!currentCache) {
-          throw new Error(
-            'Reading the cache is only supported while rendering.'
-          );
+    function importServerContexts(contexts) {
+      if (contexts) {
+        var prevContext = getActiveContext();
+        switchContext(rootContextSnapshot);
+
+        for (var i = 0; i < contexts.length; i++) {
+          var _contexts$i = contexts[i],
+            name = _contexts$i[0],
+            _value4 = _contexts$i[1];
+          var context = getOrCreateServerContext(name);
+          pushProvider(context, _value4);
         }
 
-        var entry = currentCache.get(resourceType);
-
-        if (entry === undefined) {
-          entry = resourceType(); // TODO: Warn if undefined?
-
-          currentCache.set(resourceType, entry);
-        }
+        var importedContext = getActiveContext();
+        switchContext(prevContext);
+        return importedContext;
+      }
 
-        return entry;
-      },
-      readContext: unsupportedHook,
-      useContext: unsupportedHook,
-      useReducer: unsupportedHook,
-      useRef: unsupportedHook,
-      useState: unsupportedHook,
-      useInsertionEffect: unsupportedHook,
-      useLayoutEffect: unsupportedHook,
-      useImperativeHandle: unsupportedHook,
-      useEffect: unsupportedHook,
-      useId: unsupportedHook,
-      useMutableSource: unsupportedHook,
-      useSyncExternalStore: unsupportedHook,
-      useCacheRefresh: function () {
-        return unsupportedRefresh;
-      },
-    };
+      return rootContextSnapshot;
+    }
 
-    function renderToReadableStream(model, options) {
+    function renderToReadableStream(model, options, context) {
       var request = createRequest(
         model,
         {}, // Manifest, not used
-        options ? options.onError : undefined
+        options ? options.onError : undefined,
+        context
       );
       var stream = new ReadableStream({
         start: function (controller) {
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.production.min.server.js b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.production.min.server.js
index fd881bfeb5..caa63ace10 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.production.min.server.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.production.min.server.js
@@ -8,111 +8,458 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';
-var h = require('react');
-function n(a, d) {
-  a.enqueue(d);
-  return 0 < a.desiredSize;
+var e = require('react'),
+  k = null,
+  m = 0;
+function n(a, b) {
+  if (0 !== b.length)
+    if (512 < b.length)
+      0 < m &&
+        (a.enqueue(new Uint8Array(k.buffer, 0, m)),
+        (k = new Uint8Array(512)),
+        (m = 0)),
+        a.enqueue(b);
+    else {
+      var d = k.length - m;
+      d < b.length &&
+        (0 === d
+          ? a.enqueue(k)
+          : (k.set(b.subarray(0, d), m), a.enqueue(k), (b = b.subarray(d))),
+        (k = new Uint8Array(512)),
+        (m = 0));
+      k.set(b, m);
+      m += b.length;
+    }
+  return !0;
+}
+var p = new TextEncoder();
+function r(a) {
+  return p.encode(a);
+}
+function u(a, b) {
+  'function' === typeof a.error ? a.error(b) : a.close();
+}
+var w = JSON.stringify,
+  x = Symbol.for('react.module.reference'),
+  y = Symbol.for('react.element'),
+  aa = Symbol.for('react.fragment'),
+  z = Symbol.for('react.provider'),
+  ba = Symbol.for('react.forward_ref'),
+  ca = Symbol.for('react.memo'),
+  A = Symbol.for('react.lazy'),
+  B = Symbol.for('react.default_value');
+function C(a, b, d, c, f, g, h) {
+  this.acceptsBooleans = 2 === b || 3 === b || 4 === b;
+  this.attributeName = c;
+  this.attributeNamespace = f;
+  this.mustUseProperty = d;
+  this.propertyName = a;
+  this.type = b;
+  this.sanitizeURL = g;
+  this.removeEmptyString = h;
+}
+var D =
+  'children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style'.split(
+    ' '
+  );
+D.push('innerText', 'textContent');
+D.forEach(function (a) {
+  new C(a, 0, !1, a, null, !1, !1);
+});
+[
+  ['acceptCharset', 'accept-charset'],
+  ['className', 'class'],
+  ['htmlFor', 'for'],
+  ['httpEquiv', 'http-equiv'],
+].forEach(function (a) {
+  new C(a[0], 1, !1, a[1], null, !1, !1);
+});
+['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (a) {
+  new C(a, 2, !1, a.toLowerCase(), null, !1, !1);
+});
+[
+  'autoReverse',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+].forEach(function (a) {
+  new C(a, 2, !1, a, null, !1, !1);
+});
+'allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope'
+  .split(' ')
+  .forEach(function (a) {
+    new C(a, 3, !1, a.toLowerCase(), null, !1, !1);
+  });
+['checked', 'multiple', 'muted', 'selected'].forEach(function (a) {
+  new C(a, 3, !0, a, null, !1, !1);
+});
+['capture', 'download'].forEach(function (a) {
+  new C(a, 4, !1, a, null, !1, !1);
+});
+['cols', 'rows', 'size', 'span'].forEach(function (a) {
+  new C(a, 6, !1, a, null, !1, !1);
+});
+['rowSpan', 'start'].forEach(function (a) {
+  new C(a, 5, !1, a.toLowerCase(), null, !1, !1);
+});
+var E = /[\-:]([a-z])/g;
+function F(a) {
+  return a[1].toUpperCase();
+}
+'accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height'
+  .split(' ')
+  .forEach(function (a) {
+    var b = a.replace(E, F);
+    new C(b, 1, !1, a, null, !1, !1);
+  });
+'xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type'
+  .split(' ')
+  .forEach(function (a) {
+    var b = a.replace(E, F);
+    new C(b, 1, !1, a, 'http://www.w3.org/1999/xlink', !1, !1);
+  });
+['xml:base', 'xml:lang', 'xml:space'].forEach(function (a) {
+  var b = a.replace(E, F);
+  new C(b, 1, !1, a, 'http://www.w3.org/XML/1998/namespace', !1, !1);
+});
+['tabIndex', 'crossOrigin'].forEach(function (a) {
+  new C(a, 1, !1, a.toLowerCase(), null, !1, !1);
+});
+new C('xlinkHref', 1, !1, 'xlink:href', 'http://www.w3.org/1999/xlink', !0, !1);
+['src', 'href', 'action', 'formAction'].forEach(function (a) {
+  new C(a, 1, !1, a.toLowerCase(), null, !0, !0);
+});
+var G = {
+    animationIterationCount: !0,
+    aspectRatio: !0,
+    borderImageOutset: !0,
+    borderImageSlice: !0,
+    borderImageWidth: !0,
+    boxFlex: !0,
+    boxFlexGroup: !0,
+    boxOrdinalGroup: !0,
+    columnCount: !0,
+    columns: !0,
+    flex: !0,
+    flexGrow: !0,
+    flexPositive: !0,
+    flexShrink: !0,
+    flexNegative: !0,
+    flexOrder: !0,
+    gridArea: !0,
+    gridRow: !0,
+    gridRowEnd: !0,
+    gridRowSpan: !0,
+    gridRowStart: !0,
+    gridColumn: !0,
+    gridColumnEnd: !0,
+    gridColumnSpan: !0,
+    gridColumnStart: !0,
+    fontWeight: !0,
+    lineClamp: !0,
+    lineHeight: !0,
+    opacity: !0,
+    order: !0,
+    orphans: !0,
+    tabSize: !0,
+    widows: !0,
+    zIndex: !0,
+    zoom: !0,
+    fillOpacity: !0,
+    floodOpacity: !0,
+    stopOpacity: !0,
+    strokeDasharray: !0,
+    strokeDashoffset: !0,
+    strokeMiterlimit: !0,
+    strokeOpacity: !0,
+    strokeWidth: !0,
+  },
+  da = ['Webkit', 'ms', 'Moz', 'O'];
+Object.keys(G).forEach(function (a) {
+  da.forEach(function (b) {
+    b = b + a.charAt(0).toUpperCase() + a.substring(1);
+    G[b] = G[a];
+  });
+});
+var H = Array.isArray;
+r('<script>');
+r('\x3c/script>');
+r('<script src="');
+r('<script type="module" src="');
+r('" async="">\x3c/script>');
+r('\x3c!-- --\x3e');
+r(' style="');
+r(':');
+r(';');
+r(' ');
+r('="');
+r('"');
+r('=""');
+r('>');
+r('/>');
+r(' selected=""');
+r('\n');
+r('<!DOCTYPE html>');
+r('</');
+r('>');
+r('<template id="');
+r('"></template>');
+r('\x3c!--$--\x3e');
+r('\x3c!--$?--\x3e<template id="');
+r('"></template>');
+r('\x3c!--$!--\x3e');
+r('\x3c!--/$--\x3e');
+r('<div hidden id="');
+r('">');
+r('</div>');
+r('<svg aria-hidden="true" style="display:none" id="');
+r('">');
+r('</svg>');
+r('<math aria-hidden="true" style="display:none" id="');
+r('">');
+r('</math>');
+r('<table hidden id="');
+r('">');
+r('</table>');
+r('<table hidden><tbody id="');
+r('">');
+r('</tbody></table>');
+r('<table hidden><tr id="');
+r('">');
+r('</tr></table>');
+r('<table hidden><colgroup id="');
+r('">');
+r('</colgroup></table>');
+r(
+  'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("'
+);
+r('$RS("');
+r('","');
+r('")\x3c/script>');
+r(
+  'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("'
+);
+r('$RC("');
+r('","');
+r('")\x3c/script>');
+r(
+  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()};$RX("'
+);
+r('$RX("');
+r('")\x3c/script>');
+var I = null;
+function J(a, b) {
+  if (a !== b) {
+    a.context._currentValue = a.parentValue;
+    a = a.parent;
+    var d = b.parent;
+    if (null === a) {
+      if (null !== d)
+        throw Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+    } else {
+      if (null === d)
+        throw Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+      J(a, d);
+      b.context._currentValue = b.value;
+    }
+  }
 }
-var q = new TextEncoder();
-function r(a, d) {
-  'function' === typeof a.error ? a.error(d) : a.close();
+function K(a) {
+  a.context._currentValue = a.parentValue;
+  a = a.parent;
+  null !== a && K(a);
 }
-var t = JSON.stringify,
-  u = Symbol.for('react.module.reference'),
-  v = 60103,
-  w = 60107,
-  x = 60112,
-  y = 60115,
-  z = 60116;
-if ('function' === typeof Symbol && Symbol.for) {
-  var A = Symbol.for;
-  v = A('react.element');
-  w = A('react.fragment');
-  x = A('react.forward_ref');
-  y = A('react.memo');
-  z = A('react.lazy');
+function L(a) {
+  var b = a.parent;
+  null !== b && L(b);
+  a.context._currentValue = a.value;
+}
+function ea(a, b) {
+  a.context._currentValue = a.parentValue;
+  a = a.parent;
+  if (null === a)
+    throw Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  a.depth === b.depth ? J(a, b) : ea(a, b);
+}
+function fa(a, b) {
+  var d = b.parent;
+  if (null === d)
+    throw Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  a.depth === d.depth ? J(a, d) : fa(a, d);
+  b.context._currentValue = b.value;
 }
-var B = Array.isArray,
-  C =
-    h.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
-function G(a) {
+function M(a) {
+  var b = I;
+  b !== a &&
+    (null === b
+      ? L(a)
+      : null === a
+      ? K(b)
+      : b.depth === a.depth
+      ? J(b, a)
+      : b.depth > a.depth
+      ? ea(b, a)
+      : fa(b, a),
+    (I = a));
+}
+function ha(a, b) {
+  var d = a._currentValue;
+  a._currentValue = b;
+  var c = I;
+  return (I = a =
+    {
+      parent: c,
+      depth: null === c ? 0 : c.depth + 1,
+      context: a,
+      parentValue: d,
+      value: b,
+    });
+}
+function ia(a) {
+  return a._currentValue;
+}
+var la = {
+  useMemo: function (a) {
+    return a();
+  },
+  useCallback: function (a) {
+    return a;
+  },
+  useDebugValue: function () {},
+  useDeferredValue: N,
+  useTransition: N,
+  getCacheForType: function (a) {
+    if (!R) throw Error('Reading the cache is only supported while rendering.');
+    var b = R.get(a);
+    void 0 === b && ((b = a()), R.set(a, b));
+    return b;
+  },
+  readContext: ia,
+  useContext: ia,
+  useReducer: N,
+  useRef: N,
+  useState: N,
+  useInsertionEffect: N,
+  useLayoutEffect: N,
+  useImperativeHandle: N,
+  useEffect: N,
+  useId: N,
+  useMutableSource: N,
+  useSyncExternalStore: N,
+  useCacheRefresh: function () {
+    return ja;
+  },
+};
+function N() {
+  throw Error('This Hook is not supported in Server Components.');
+}
+function ja() {
+  if (!R)
+    throw Error('Refreshing the cache is not supported in Server Components.');
+}
+var R = null,
+  ma = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  S = ma.ContextRegistry,
+  T = ma.ReactCurrentDispatcher;
+function na(a) {
   console.error(a);
 }
-function H(a, d, c) {
-  var b = [],
-    e = {
+function oa(a, b, d, c) {
+  var f = [],
+    g = {
       status: 0,
       fatalError: null,
       destination: null,
-      bundlerConfig: d,
+      bundlerConfig: b,
       cache: new Map(),
       nextChunkId: 0,
       pendingChunks: 0,
-      pingedSegments: b,
+      pingedSegments: f,
       completedModuleChunks: [],
       completedJSONChunks: [],
       completedErrorChunks: [],
       writtenSymbols: new Map(),
       writtenModules: new Map(),
-      onError: void 0 === c ? G : c,
+      writtenProviders: new Map(),
+      onError: void 0 === d ? na : d,
       toJSON: function (a, b) {
-        return I(e, this, a, b);
+        return pa(g, this, a, b);
       },
     };
-  e.pendingChunks++;
-  a = J(e, a);
-  b.push(a);
-  return e;
+  g.pendingChunks++;
+  b = qa(c);
+  a = ra(g, a, b);
+  f.push(a);
+  return g;
 }
-function K(a, d, c, b) {
-  if (null !== c && void 0 !== c)
+var sa = {};
+function U(a, b, d, c) {
+  if (null !== d && void 0 !== d)
     throw Error(
       'Refs cannot be used in server components, nor passed to client components.'
     );
-  if ('function' === typeof a) return a(b);
-  if ('string' === typeof a) return [v, a, d, b];
-  if ('symbol' === typeof a) return a === w ? b.children : [v, a, d, b];
+  if ('function' === typeof a) return a(c);
+  if ('string' === typeof a) return [y, a, b, c];
+  if ('symbol' === typeof a) return a === aa ? c.children : [y, a, b, c];
   if (null != a && 'object' === typeof a) {
-    if ((a.$$typeof_rsc || a.$$typeof) === u) return [v, a, d, b];
+    if ((a.$$typeof_rsc || a.$$typeof) === x) return [y, a, b, c];
     switch (a.$$typeof) {
-      case x:
-        return (a = a.render), a(b, void 0);
-      case y:
-        return K(a.type, d, c, b);
+      case A:
+        var f = a._init;
+        a = f(a._payload);
+        return U(a, b, d, c);
+      case ba:
+        return (b = a.render), b(c, void 0);
+      case ca:
+        return U(a.type, b, d, c);
+      case z:
+        return (
+          ha(a._context, c.value),
+          [y, a, b, {value: c.value, children: c.children, __pop: sa}]
+        );
     }
   }
-  throw Error('Unsupported server component type: ' + L(a));
+  throw Error('Unsupported server component type: ' + V(a));
 }
-function J(a, d) {
+function ra(a, b, d) {
   var c = {
     id: a.nextChunkId++,
-    model: d,
+    model: b,
+    context: d,
     ping: function () {
       var b = a.pingedSegments;
       b.push(c);
-      1 === b.length && M(a);
+      1 === b.length && ta(a);
     },
   };
   return c;
 }
-function N(a) {
+function ua(a) {
   return Object.prototype.toString
     .call(a)
-    .replace(/^\[object (.*)\]$/, function (a, c) {
-      return c;
+    .replace(/^\[object (.*)\]$/, function (a, d) {
+      return d;
     });
 }
-function O(a) {
-  var d = JSON.stringify(a);
-  return '"' + a + '"' === d ? a : d;
+function W(a) {
+  var b = JSON.stringify(a);
+  return '"' + a + '"' === b ? a : b;
 }
-function L(a) {
+function V(a) {
   switch (typeof a) {
     case 'string':
       return JSON.stringify(10 >= a.length ? a : a.substr(0, 10) + '...');
     case 'object':
-      if (B(a)) return '[...]';
-      a = N(a);
+      if (H(a)) return '[...]';
+      a = ua(a);
       return 'Object' === a ? '{...}' : a;
     case 'function':
       return 'function';
@@ -120,311 +467,332 @@ function L(a) {
       return String(a);
   }
 }
-function P(a, d) {
-  if (B(a)) {
-    for (var c = '[', b = 0; b < a.length; b++) {
-      0 < b && (c += ', ');
-      if (6 < b) {
-        c += '...';
+function X(a, b) {
+  if (H(a)) {
+    for (var d = '[', c = 0; c < a.length; c++) {
+      0 < c && (d += ', ');
+      if (6 < c) {
+        d += '...';
         break;
       }
-      var e = a[b];
-      c =
-        '' + b === d && 'object' === typeof e && null !== e
-          ? c + P(e)
-          : c + L(e);
+      var f = a[c];
+      d =
+        '' + c === b && 'object' === typeof f && null !== f
+          ? d + X(f)
+          : d + V(f);
     }
-    return c + ']';
+    return d + ']';
   }
-  c = '{';
-  b = Object.keys(a);
-  for (e = 0; e < b.length; e++) {
-    0 < e && (c += ', ');
-    if (6 < e) {
-      c += '...';
+  d = '{';
+  c = Object.keys(a);
+  for (f = 0; f < c.length; f++) {
+    0 < f && (d += ', ');
+    if (6 < f) {
+      d += '...';
       break;
     }
-    var f = b[e];
-    c += O(f) + ': ';
-    var k = a[f];
-    c = f === d && 'object' === typeof k && null !== k ? c + P(k) : c + L(k);
+    var g = c[f];
+    d += W(g) + ': ';
+    var h = a[g];
+    d = g === b && 'object' === typeof h && null !== h ? d + X(h) : d + V(h);
   }
-  return c + '}';
+  return d + '}';
 }
-function I(a, d, c, b) {
-  switch (b) {
-    case v:
+function pa(a, b, d, c) {
+  switch (c) {
+    case y:
       return '$';
-    case z:
-      throw Error('React Lazy Components are not yet supported on the server.');
   }
-  for (; 'object' === typeof b && null !== b && b.$$typeof === v; ) {
-    var e = b;
+  for (
+    ;
+    'object' === typeof c &&
+    null !== c &&
+    (c.$$typeof === y || c.$$typeof === A);
+
+  )
     try {
-      b = K(e.type, e.key, e.ref, e.props);
-    } catch (m) {
-      if ('object' === typeof m && null !== m && 'function' === typeof m.then)
+      switch (c.$$typeof) {
+        case y:
+          var f = c;
+          c = U(f.type, f.key, f.ref, f.props);
+          break;
+        case A:
+          var g = c._init;
+          c = g(c._payload);
+      }
+    } catch (t) {
+      if ('object' === typeof t && null !== t && 'function' === typeof t.then)
         return (
           a.pendingChunks++,
-          (a = J(a, b)),
+          (a = ra(a, c, I)),
           (d = a.ping),
-          m.then(d, d),
+          t.then(d, d),
           '@' + a.id.toString(16)
         );
-      R(a, m);
+      Y(a, t);
       a.pendingChunks++;
       d = a.nextChunkId++;
-      S(a, d, m);
+      Z(a, d, t);
       return '@' + d.toString(16);
     }
-  }
-  if (null === b) return null;
-  if ('object' === typeof b) {
-    if ((b.$$typeof_rsc || b.$$typeof) === u) {
-      e = b.filepath + '#' + b.name;
-      var f = a.writtenModules,
-        k = f.get(e);
-      if (void 0 !== k)
-        return d[0] === v && '1' === c
-          ? '@' + k.toString(16)
-          : '$' + k.toString(16);
+  if (null === c) return null;
+  if ('object' === typeof c) {
+    if ((c.$$typeof_rsc || c.$$typeof) === x) {
+      f = c.filepath + '#' + c.name;
+      g = a.writtenModules;
+      var h = g.get(f);
+      if (void 0 !== h)
+        return b[0] === y && '1' === d
+          ? '@' + h.toString(16)
+          : '$' + h.toString(16);
       try {
-        var l = {id: b.filepath, name: b.name};
+        var q = {id: c.filepath, name: c.name};
         a.pendingChunks++;
-        var g = a.nextChunkId++,
-          D = t(l),
-          E = 'M' + g.toString(16) + ':' + D + '\n';
-        var F = q.encode(E);
-        a.completedModuleChunks.push(F);
-        f.set(e, g);
-        return d[0] === v && '1' === c
-          ? '@' + g.toString(16)
-          : '$' + g.toString(16);
-      } catch (m) {
+        var l = a.nextChunkId++,
+          O = w(q),
+          P = 'M' + l.toString(16) + ':' + O + '\n';
+        var Q = p.encode(P);
+        a.completedModuleChunks.push(Q);
+        g.set(f, l);
+        return b[0] === y && '1' === d
+          ? '@' + l.toString(16)
+          : '$' + l.toString(16);
+      } catch (t) {
         return (
           a.pendingChunks++,
           (d = a.nextChunkId++),
-          S(a, d, m),
+          Z(a, d, t),
           '$' + d.toString(16)
         );
       }
+    } else {
+      if (c.$$typeof === z)
+        return (
+          (b = c._context._globalName),
+          (c = a.writtenProviders),
+          (d = c.get(d)),
+          void 0 === d &&
+            (a.pendingChunks++,
+            (d = a.nextChunkId++),
+            c.set(b, d),
+            (b = 'P' + d.toString(16) + ':' + b + '\n'),
+            (b = p.encode(b)),
+            a.completedJSONChunks.push(b)),
+          '$' + d.toString(16)
+        );
+      if (c === sa) {
+        a = I;
+        if (null === a)
+          throw Error(
+            'Tried to pop a Context at the root of the app. This is a bug in React.'
+          );
+        d = a.parentValue;
+        a.context._currentValue = d === B ? a.context._defaultValue : d;
+        I = a.parent;
+        return;
+      }
     }
-    return b;
+    return c;
   }
-  if ('string' === typeof b)
-    return (a = '$' === b[0] || '@' === b[0] ? '$' + b : b), a;
+  if ('string' === typeof c)
+    return (a = '$' === c[0] || '@' === c[0] ? '$' + c : c), a;
   if (
-    'boolean' === typeof b ||
-    'number' === typeof b ||
-    'undefined' === typeof b
+    'boolean' === typeof c ||
+    'number' === typeof c ||
+    'undefined' === typeof c
   )
-    return b;
-  if ('function' === typeof b) {
-    if (/^on[A-Z]/.test(c))
+    return c;
+  if ('function' === typeof c) {
+    if (/^on[A-Z]/.test(d))
       throw Error(
         'Event handlers cannot be passed to client component props. Remove ' +
-          (O(c) +
+          (W(d) +
             ' from these props if possible: ' +
-            P(d) +
+            X(b) +
             '\nIf you need interactivity, consider converting part of this to a client component.')
       );
     throw Error(
       "Functions cannot be passed directly to client components because they're not serializable. Remove " +
-        (O(c) +
+        (W(d) +
           ' (' +
-          (b.displayName || b.name || 'function') +
+          (c.displayName || c.name || 'function') +
           ') from this object, or avoid the entire object: ' +
-          P(d))
+          X(b))
     );
   }
-  if ('symbol' === typeof b) {
-    l = a.writtenSymbols;
-    g = l.get(b);
-    if (void 0 !== g) return '$' + g.toString(16);
-    g = b.description;
-    if (Symbol.for(g) !== b)
+  if ('symbol' === typeof c) {
+    q = a.writtenSymbols;
+    l = q.get(c);
+    if (void 0 !== l) return '$' + l.toString(16);
+    l = c.description;
+    if (Symbol.for(l) !== c)
       throw Error(
         'Only global symbols received from Symbol.for(...) can be passed to client components. The symbol Symbol.for(' +
-          (b.description + ') cannot be found among global symbols. Remove ') +
-          (O(c) + ' from this object, or avoid the entire object: ' + P(d))
+          (c.description + ') cannot be found among global symbols. Remove ') +
+          (W(d) + ' from this object, or avoid the entire object: ' + X(b))
       );
     a.pendingChunks++;
     d = a.nextChunkId++;
-    c = t(g);
-    c = 'S' + d.toString(16) + ':' + c + '\n';
-    c = q.encode(c);
-    a.completedModuleChunks.push(c);
-    l.set(b, d);
+    b = w(l);
+    b = 'S' + d.toString(16) + ':' + b + '\n';
+    b = p.encode(b);
+    a.completedModuleChunks.push(b);
+    q.set(c, d);
     return '$' + d.toString(16);
   }
-  if ('bigint' === typeof b)
+  if ('bigint' === typeof c)
     throw Error(
       'BigInt (' +
-        b +
+        c +
         ') is not yet supported in client component props. Remove ' +
-        (O(c) + ' from this object or use a plain number instead: ' + P(d))
+        (W(d) + ' from this object or use a plain number instead: ' + X(b))
     );
   throw Error(
     'Type ' +
-      typeof b +
+      typeof c +
       ' is not supported in client component props. Remove ' +
-      (O(c) + ' from this object, or avoid the entire object: ' + P(d))
+      (W(d) + ' from this object, or avoid the entire object: ' + X(b))
   );
 }
-function R(a, d) {
+function Y(a, b) {
   a = a.onError;
-  a(d);
+  a(b);
 }
-function T(a, d) {
+function va(a, b) {
   null !== a.destination
-    ? ((a.status = 2), r(a.destination, d))
-    : ((a.status = 1), (a.fatalError = d));
+    ? ((a.status = 2), u(a.destination, b))
+    : ((a.status = 1), (a.fatalError = b));
 }
-function S(a, d, c) {
-  var b = '';
+function Z(a, b, d) {
+  var c = '';
   try {
-    if (c instanceof Error) {
-      var e = String(c.message);
-      b = String(c.stack);
-    } else e = 'Error: ' + c;
-  } catch (f) {
-    e = 'An error occurred but serializing the error message failed.';
+    if (d instanceof Error) {
+      var f = String(d.message);
+      c = String(d.stack);
+    } else f = 'Error: ' + d;
+  } catch (g) {
+    f = 'An error occurred but serializing the error message failed.';
   }
-  c = {message: e, stack: b};
-  d = 'E' + d.toString(16) + ':' + t(c) + '\n';
-  d = q.encode(d);
-  a.completedErrorChunks.push(d);
+  d = {message: f, stack: c};
+  b = 'E' + b.toString(16) + ':' + w(d) + '\n';
+  b = p.encode(b);
+  a.completedErrorChunks.push(b);
 }
-function M(a) {
-  var d = C.current,
-    c = U;
-  C.current = V;
-  U = a.cache;
+function ta(a) {
+  var b = T.current,
+    d = R;
+  T.current = la;
+  R = a.cache;
   try {
-    var b = a.pingedSegments;
+    var c = a.pingedSegments;
     a.pingedSegments = [];
-    for (var e = 0; e < b.length; e++) {
-      var f = b[e];
-      var k = a;
+    for (var f = 0; f < c.length; f++) {
+      var g = c[f];
+      var h = a;
+      M(g.context);
       try {
         for (
-          var l = f.model;
-          'object' === typeof l && null !== l && l.$$typeof === v;
+          var q = g.model;
+          'object' === typeof q && null !== q && q.$$typeof === y;
 
         ) {
-          var g = l;
-          f.model = l;
-          l = K(g.type, g.key, g.ref, g.props);
+          var l = q;
+          g.model = q;
+          q = U(l.type, l.key, l.ref, l.props);
         }
-        var D = f.id,
-          E = t(l, k.toJSON),
-          F = 'J' + D.toString(16) + ':' + E + '\n';
-        var m = q.encode(F);
-        k.completedJSONChunks.push(m);
-      } catch (p) {
+        var O = g.id,
+          P = w(q, h.toJSON),
+          Q = 'J' + O.toString(16) + ':' + P + '\n';
+        var t = p.encode(Q);
+        h.completedJSONChunks.push(t);
+      } catch (v) {
         if (
-          'object' === typeof p &&
-          null !== p &&
-          'function' === typeof p.then
+          'object' === typeof v &&
+          null !== v &&
+          'function' === typeof v.then
         ) {
-          var Q = f.ping;
-          p.then(Q, Q);
-        } else R(k, p), S(k, f.id, p);
+          var ka = g.ping;
+          v.then(ka, ka);
+        } else Y(h, v), Z(h, g.id, v);
       }
     }
-    null !== a.destination && W(a, a.destination);
-  } catch (p) {
-    R(a, p), T(a, p);
+    null !== a.destination && wa(a, a.destination);
+  } catch (v) {
+    Y(a, v), va(a, v);
   } finally {
-    (C.current = d), (U = c);
+    (T.current = b), (R = d);
   }
 }
-function W(a, d) {
-  for (var c = a.completedModuleChunks, b = 0; b < c.length; b++)
-    if ((a.pendingChunks--, !n(d, c[b]))) {
-      a.destination = null;
-      b++;
-      break;
-    }
-  c.splice(0, b);
-  c = a.completedJSONChunks;
-  for (b = 0; b < c.length; b++)
-    if ((a.pendingChunks--, !n(d, c[b]))) {
-      a.destination = null;
-      b++;
-      break;
-    }
-  c.splice(0, b);
-  c = a.completedErrorChunks;
-  for (b = 0; b < c.length; b++)
-    if ((a.pendingChunks--, !n(d, c[b]))) {
-      a.destination = null;
-      b++;
-      break;
-    }
-  c.splice(0, b);
-  0 === a.pendingChunks && d.close();
-}
-function X() {
-  throw Error('This Hook is not supported in Server Components.');
+function wa(a, b) {
+  k = new Uint8Array(512);
+  m = 0;
+  try {
+    for (var d = a.completedModuleChunks, c = 0; c < d.length; c++)
+      if ((a.pendingChunks--, !n(b, d[c]))) {
+        a.destination = null;
+        c++;
+        break;
+      }
+    d.splice(0, c);
+    var f = a.completedJSONChunks;
+    for (c = 0; c < f.length; c++)
+      if ((a.pendingChunks--, !n(b, f[c]))) {
+        a.destination = null;
+        c++;
+        break;
+      }
+    f.splice(0, c);
+    var g = a.completedErrorChunks;
+    for (c = 0; c < g.length; c++)
+      if ((a.pendingChunks--, !n(b, g[c]))) {
+        a.destination = null;
+        c++;
+        break;
+      }
+    g.splice(0, c);
+  } finally {
+    k &&
+      0 < m &&
+      (b.enqueue(new Uint8Array(k.buffer, 0, m)), (k = null), (m = 0));
+  }
+  0 === a.pendingChunks && b.close();
 }
-function Y() {
-  if (!U)
-    throw Error('Refreshing the cache is not supported in Server Components.');
+function qa(a) {
+  if (a) {
+    var b = I;
+    M(null);
+    for (var d = 0; d < a.length; d++) {
+      var c = a[d],
+        f = c[0];
+      c = c[1];
+      S[f] || (S[f] = e.createServerContext(f, B));
+      ha(S[f], c);
+    }
+    a = I;
+    M(b);
+    return a;
+  }
+  return null;
 }
-var U = null,
-  V = {
-    useMemo: function (a) {
-      return a();
-    },
-    useCallback: function (a) {
-      return a;
-    },
-    useDebugValue: function () {},
-    useDeferredValue: X,
-    useTransition: X,
-    getCacheForType: function (a) {
-      if (!U)
-        throw Error('Reading the cache is only supported while rendering.');
-      var d = U.get(a);
-      void 0 === d && ((d = a()), U.set(a, d));
-      return d;
-    },
-    readContext: X,
-    useContext: X,
-    useReducer: X,
-    useRef: X,
-    useState: X,
-    useInsertionEffect: X,
-    useLayoutEffect: X,
-    useImperativeHandle: X,
-    useEffect: X,
-    useId: X,
-    useMutableSource: X,
-    useSyncExternalStore: X,
-    useCacheRefresh: function () {
-      return Y;
-    },
-  };
-exports.renderToReadableStream = function (a, d) {
-  var c = H(a, {}, d ? d.onError : void 0),
-    b = new ReadableStream({
+exports.renderToReadableStream = function (a, b, d) {
+  var c = oa(a, {}, b ? b.onError : void 0, d),
+    f = new ReadableStream({
       start: function () {
-        M(c);
+        ta(c);
       },
       pull: function (a) {
-        if (b.locked)
-          if (1 === c.status) (c.status = 2), r(a, c.fatalError);
-          else if (2 !== c.status) {
+        if (f.locked)
+          if (1 === c.status) (c.status = 2), u(a, c.fatalError);
+          else if (2 !== c.status && null === c.destination) {
             c.destination = a;
             try {
-              W(c, a);
-            } catch (f) {
-              R(c, f), T(c, f);
+              wa(c, a);
+            } catch (h) {
+              Y(c, h), va(c, h);
             }
           }
       },
       cancel: function () {},
     });
-  return b;
+  return f;
 };
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.development.server.js b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.development.server.js
index 1c758ecc79..814e52f9d5 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.development.server.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.development.server.js
@@ -80,7 +80,7 @@ if (process.env.NODE_ENV !== 'production') {
         destination.cork();
       }
     }
-    function writeChunk(destination, chunk) {
+    function writeChunkAndReturn(destination, chunk) {
       var nodeBuffer = chunk; // close enough
 
       return destination.write(nodeBuffer);
@@ -97,6 +97,9 @@ if (process.env.NODE_ENV !== 'production') {
     function stringToChunk(content) {
       return content;
     }
+    function stringToPrecomputedChunk(content) {
+      return Buffer.from(content, 'utf8');
+    }
     function closeWithError(destination, error) {
       // $FlowFixMe: This is an Error object or the destination accepts other types.
       destination.destroy(error);
@@ -127,6 +130,10 @@ if (process.env.NODE_ENV !== 'production') {
       var row = serializeRowHeader('M', id) + json + '\n';
       return stringToChunk(row);
     }
+    function processProviderChunk(request, id, contextName) {
+      var row = serializeRowHeader('P', id) + contextName + '\n';
+      return stringToChunk(row);
+    }
     function processSymbolChunk(request, id, name) {
       var json = stringify(name);
       var row = serializeRowHeader('S', id) + json + '\n';
@@ -151,46 +158,511 @@ if (process.env.NODE_ENV !== 'production') {
     // ATTENTION
     // When adding new symbols to this file,
     // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-    // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-    // nor polyfill, then a plain number is used for performance.
-    var REACT_ELEMENT_TYPE = 0xeac7;
-    var REACT_PORTAL_TYPE = 0xeaca;
-    var REACT_FRAGMENT_TYPE = 0xeacb;
-    var REACT_STRICT_MODE_TYPE = 0xeacc;
-    var REACT_PROFILER_TYPE = 0xead2;
-    var REACT_PROVIDER_TYPE = 0xeacd;
-    var REACT_CONTEXT_TYPE = 0xeace;
-    var REACT_FORWARD_REF_TYPE = 0xead0;
-    var REACT_SUSPENSE_TYPE = 0xead1;
-    var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-    var REACT_MEMO_TYPE = 0xead3;
-    var REACT_LAZY_TYPE = 0xead4;
-    var REACT_SCOPE_TYPE = 0xead7;
-    var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-    var REACT_OFFSCREEN_TYPE = 0xeae2;
-    var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-    var REACT_CACHE_TYPE = 0xeae4;
-
-    if (typeof Symbol === 'function' && Symbol.for) {
-      var symbolFor = Symbol.for;
-      REACT_ELEMENT_TYPE = symbolFor('react.element');
-      REACT_PORTAL_TYPE = symbolFor('react.portal');
-      REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-      REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-      REACT_PROFILER_TYPE = symbolFor('react.profiler');
-      REACT_PROVIDER_TYPE = symbolFor('react.provider');
-      REACT_CONTEXT_TYPE = symbolFor('react.context');
-      REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-      REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-      REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-      REACT_MEMO_TYPE = symbolFor('react.memo');
-      REACT_LAZY_TYPE = symbolFor('react.lazy');
-      REACT_SCOPE_TYPE = symbolFor('react.scope');
-      REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-      REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-      REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-      REACT_CACHE_TYPE = symbolFor('react.cache');
+    // The Symbol used to tag the ReactElement-like types.
+    var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+    var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+    var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+    var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+    var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+    var REACT_MEMO_TYPE = Symbol.for('react.memo');
+    var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+    var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+      'react.default_value'
+    );
+
+    // A reserved attribute.
+    // It is handled by React separately and shouldn't be written to the DOM.
+    var RESERVED = 0; // A simple string attribute.
+    // Attributes that aren't in the filter are presumed to have this type.
+
+    var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
+    // "enumerated" attributes with "true" and "false" as possible values.
+    // When true, it should be set to a "true" string.
+    // When false, it should be set to a "false" string.
+
+    var BOOLEANISH_STRING = 2; // A real boolean attribute.
+    // When true, it should be present (set either to an empty string or its name).
+    // When false, it should be omitted.
+
+    var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
+    // When true, it should be present (set either to an empty string or its name).
+    // When false, it should be omitted.
+    // For any other value, should be present with that value.
+
+    var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
+    // When falsy, it should be removed.
+
+    var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
+    // When falsy, it should be removed.
+
+    var POSITIVE_NUMERIC = 6;
+
+    function PropertyInfoRecord(
+      name,
+      type,
+      mustUseProperty,
+      attributeName,
+      attributeNamespace,
+      sanitizeURL,
+      removeEmptyString
+    ) {
+      this.acceptsBooleans =
+        type === BOOLEANISH_STRING ||
+        type === BOOLEAN ||
+        type === OVERLOADED_BOOLEAN;
+      this.attributeName = attributeName;
+      this.attributeNamespace = attributeNamespace;
+      this.mustUseProperty = mustUseProperty;
+      this.propertyName = name;
+      this.type = type;
+      this.sanitizeURL = sanitizeURL;
+      this.removeEmptyString = removeEmptyString;
+    } // When adding attributes to this list, be sure to also add them to
+    // the `possibleStandardNames` module to ensure casing and incorrect
+    // name warnings.
+
+    var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
+
+    var reservedProps = [
+      'children',
+      'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
+      // elements (not just inputs). Now that ReactDOMInput assigns to the
+      // defaultValue property -- do we need this?
+      'defaultValue',
+      'defaultChecked',
+      'innerHTML',
+      'suppressContentEditableWarning',
+      'suppressHydrationWarning',
+      'style',
+    ];
+
+    {
+      reservedProps.push('innerText', 'textContent');
+    }
+
+    reservedProps.forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        RESERVED,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // A few React string attributes have a different name.
+    // This is a mapping from React prop names to the attribute names.
+
+    [
+      ['acceptCharset', 'accept-charset'],
+      ['className', 'class'],
+      ['htmlFor', 'for'],
+      ['httpEquiv', 'http-equiv'],
+    ].forEach(function (_ref) {
+      var name = _ref[0],
+        attributeName = _ref[1];
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are "enumerated" HTML attributes that accept "true" and "false".
+    // In React, we let users pass `true` and `false` even though technically
+    // these aren't boolean attributes (they are coerced to strings).
+
+    ['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (
+      name
+    ) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEANISH_STRING,
+        false, // mustUseProperty
+        name.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are "enumerated" SVG attributes that accept "true" and "false".
+    // In React, we let users pass `true` and `false` even though technically
+    // these aren't boolean attributes (they are coerced to strings).
+    // Since these are SVG attributes, their attribute names are case-sensitive.
+
+    [
+      'autoReverse',
+      'externalResourcesRequired',
+      'focusable',
+      'preserveAlpha',
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEANISH_STRING,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML boolean attributes.
+
+    [
+      'allowFullScreen',
+      'async', // Note: there is a special case that prevents it from being written to the DOM
+      // on the client side because the browsers are inconsistent. Instead we call focus().
+      'autoFocus',
+      'autoPlay',
+      'controls',
+      'default',
+      'defer',
+      'disabled',
+      'disablePictureInPicture',
+      'disableRemotePlayback',
+      'formNoValidate',
+      'hidden',
+      'loop',
+      'noModule',
+      'noValidate',
+      'open',
+      'playsInline',
+      'readOnly',
+      'required',
+      'reversed',
+      'scoped',
+      'seamless', // Microdata
+      'itemScope',
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEAN,
+        false, // mustUseProperty
+        name.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are the few React props that we set as DOM properties
+    // rather than attributes. These are all booleans.
+
+    [
+      'checked', // Note: `option.selected` is not updated if `select.multiple` is
+      // disabled with `removeAttribute`. We have special logic for handling this.
+      'multiple',
+      'muted',
+      'selected', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        BOOLEAN,
+        true, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML attributes that are "overloaded booleans": they behave like
+    // booleans, but can also accept a string value.
+
+    [
+      'capture',
+      'download', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        OVERLOADED_BOOLEAN,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML attributes that must be positive numbers.
+
+    [
+      'cols',
+      'rows',
+      'size',
+      'span', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        POSITIVE_NUMERIC,
+        false, // mustUseProperty
+        name, // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These are HTML attributes that must be numbers.
+
+    ['rowSpan', 'start'].forEach(function (name) {
+      properties[name] = new PropertyInfoRecord(
+        name,
+        NUMERIC,
+        false, // mustUseProperty
+        name.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    });
+    var CAMELIZE = /[\-\:]([a-z])/g;
+
+    var capitalize = function (token) {
+      return token[1].toUpperCase();
+    }; // This is a list of all SVG attributes that need special casing, namespacing,
+    // or boolean value assignment. Regular attributes that just accept strings
+    // and have the same names are omitted, just like in the HTML attribute filter.
+    // Some of these attributes can be hard to find. This list was created by
+    // scraping the MDN documentation.
+
+    [
+      'accent-height',
+      'alignment-baseline',
+      'arabic-form',
+      'baseline-shift',
+      'cap-height',
+      'clip-path',
+      'clip-rule',
+      'color-interpolation',
+      'color-interpolation-filters',
+      'color-profile',
+      'color-rendering',
+      'dominant-baseline',
+      'enable-background',
+      'fill-opacity',
+      'fill-rule',
+      'flood-color',
+      'flood-opacity',
+      'font-family',
+      'font-size',
+      'font-size-adjust',
+      'font-stretch',
+      'font-style',
+      'font-variant',
+      'font-weight',
+      'glyph-name',
+      'glyph-orientation-horizontal',
+      'glyph-orientation-vertical',
+      'horiz-adv-x',
+      'horiz-origin-x',
+      'image-rendering',
+      'letter-spacing',
+      'lighting-color',
+      'marker-end',
+      'marker-mid',
+      'marker-start',
+      'overline-position',
+      'overline-thickness',
+      'paint-order',
+      'panose-1',
+      'pointer-events',
+      'rendering-intent',
+      'shape-rendering',
+      'stop-color',
+      'stop-opacity',
+      'strikethrough-position',
+      'strikethrough-thickness',
+      'stroke-dasharray',
+      'stroke-dashoffset',
+      'stroke-linecap',
+      'stroke-linejoin',
+      'stroke-miterlimit',
+      'stroke-opacity',
+      'stroke-width',
+      'text-anchor',
+      'text-decoration',
+      'text-rendering',
+      'underline-position',
+      'underline-thickness',
+      'unicode-bidi',
+      'unicode-range',
+      'units-per-em',
+      'v-alphabetic',
+      'v-hanging',
+      'v-ideographic',
+      'v-mathematical',
+      'vector-effect',
+      'vert-adv-y',
+      'vert-origin-x',
+      'vert-origin-y',
+      'word-spacing',
+      'writing-mode',
+      'xmlns:xlink',
+      'x-height', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (attributeName) {
+      var name = attributeName.replace(CAMELIZE, capitalize);
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName,
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // String SVG attributes with the xlink namespace.
+
+    [
+      'xlink:actuate',
+      'xlink:arcrole',
+      'xlink:role',
+      'xlink:show',
+      'xlink:title',
+      'xlink:type', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (attributeName) {
+      var name = attributeName.replace(CAMELIZE, capitalize);
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName,
+        'http://www.w3.org/1999/xlink',
+        false, // sanitizeURL
+        false
+      );
+    }); // String SVG attributes with the xml namespace.
+
+    [
+      'xml:base',
+      'xml:lang',
+      'xml:space', // NOTE: if you add a camelCased prop to this list,
+      // you'll need to set attributeName to name.toLowerCase()
+      // instead in the assignment below.
+    ].forEach(function (attributeName) {
+      var name = attributeName.replace(CAMELIZE, capitalize);
+      properties[name] = new PropertyInfoRecord(
+        name,
+        STRING,
+        false, // mustUseProperty
+        attributeName,
+        'http://www.w3.org/XML/1998/namespace',
+        false, // sanitizeURL
+        false
+      );
+    }); // These attribute exists both in HTML and SVG.
+    // The attribute name is case-sensitive in SVG so we can't just use
+    // the React name like we do for attributes that exist only in HTML.
+
+    ['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
+      properties[attributeName] = new PropertyInfoRecord(
+        attributeName,
+        STRING,
+        false, // mustUseProperty
+        attributeName.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        false, // sanitizeURL
+        false
+      );
+    }); // These attributes accept URLs. These must not allow javascript: URLS.
+    // These will also need to accept Trusted Types object in the future.
+
+    var xlinkHref = 'xlinkHref';
+    properties[xlinkHref] = new PropertyInfoRecord(
+      'xlinkHref',
+      STRING,
+      false, // mustUseProperty
+      'xlink:href',
+      'http://www.w3.org/1999/xlink',
+      true, // sanitizeURL
+      false
+    );
+    ['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
+      properties[attributeName] = new PropertyInfoRecord(
+        attributeName,
+        STRING,
+        false, // mustUseProperty
+        attributeName.toLowerCase(), // attributeName
+        null, // attributeNamespace
+        true, // sanitizeURL
+        true
+      );
+    });
+
+    /**
+     * CSS properties which accept numbers but are not in units of "px".
+     */
+    var isUnitlessNumber = {
+      animationIterationCount: true,
+      aspectRatio: true,
+      borderImageOutset: true,
+      borderImageSlice: true,
+      borderImageWidth: true,
+      boxFlex: true,
+      boxFlexGroup: true,
+      boxOrdinalGroup: true,
+      columnCount: true,
+      columns: true,
+      flex: true,
+      flexGrow: true,
+      flexPositive: true,
+      flexShrink: true,
+      flexNegative: true,
+      flexOrder: true,
+      gridArea: true,
+      gridRow: true,
+      gridRowEnd: true,
+      gridRowSpan: true,
+      gridRowStart: true,
+      gridColumn: true,
+      gridColumnEnd: true,
+      gridColumnSpan: true,
+      gridColumnStart: true,
+      fontWeight: true,
+      lineClamp: true,
+      lineHeight: true,
+      opacity: true,
+      order: true,
+      orphans: true,
+      tabSize: true,
+      widows: true,
+      zIndex: true,
+      zoom: true,
+      // SVG-related properties
+      fillOpacity: true,
+      floodOpacity: true,
+      stopOpacity: true,
+      strokeDasharray: true,
+      strokeDashoffset: true,
+      strokeMiterlimit: true,
+      strokeOpacity: true,
+      strokeWidth: true,
+    };
+    /**
+     * @param {string} prefix vendor-specific prefix, eg: Webkit
+     * @param {string} key style name, eg: transitionDuration
+     * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+     * WebkitTransitionDuration
+     */
+
+    function prefixKey(prefix, key) {
+      return prefix + key.charAt(0).toUpperCase() + key.substring(1);
     }
+    /**
+     * Support style names that may come passed in prefixed by adding permutations
+     * of vendor prefixes.
+     */
+
+    var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+    // infinite loop, because it iterates over the newly added props too.
+
+    Object.keys(isUnitlessNumber).forEach(function (prop) {
+      prefixes.forEach(function (prefix) {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+      });
+    });
 
     var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
@@ -198,6 +670,510 @@ if (process.env.NODE_ENV !== 'production') {
       return isArrayImpl(a);
     }
 
+    var startInlineScript = stringToPrecomputedChunk('<script>');
+    var endInlineScript = stringToPrecomputedChunk('</script>');
+    var startScriptSrc = stringToPrecomputedChunk('<script src="');
+    var startModuleSrc = stringToPrecomputedChunk(
+      '<script type="module" src="'
+    );
+    var endAsyncScript = stringToPrecomputedChunk('" async=""></script>'); // Allows us to keep track of what we've already written so we can refer back to it.
+
+    var textSeparator = stringToPrecomputedChunk('<!-- -->');
+
+    var styleAttributeStart = stringToPrecomputedChunk(' style="');
+    var styleAssign = stringToPrecomputedChunk(':');
+    var styleSeparator = stringToPrecomputedChunk(';');
+
+    var attributeSeparator = stringToPrecomputedChunk(' ');
+    var attributeAssign = stringToPrecomputedChunk('="');
+    var attributeEnd = stringToPrecomputedChunk('"');
+    var attributeEmptyString = stringToPrecomputedChunk('=""');
+
+    var endOfStartTag = stringToPrecomputedChunk('>');
+    var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
+
+    var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+    var leadingNewline = stringToPrecomputedChunk('\n');
+
+    var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
+    var endTag1 = stringToPrecomputedChunk('</');
+    var endTag2 = stringToPrecomputedChunk('>');
+    // A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+    // display. It's never visible to users. We use the template tag because it can be used in every
+    // type of parent. <script> tags also work in every other tag except <colgroup>.
+
+    var placeholder1 = stringToPrecomputedChunk('<template id="');
+    var placeholder2 = stringToPrecomputedChunk('"></template>');
+
+    var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+    var startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+      '<!--$?--><template id="'
+    );
+    var startPendingSuspenseBoundary2 =
+      stringToPrecomputedChunk('"></template>');
+    var startClientRenderedSuspenseBoundary =
+      stringToPrecomputedChunk('<!--$!-->');
+    var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+    var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+    var startSegmentHTML2 = stringToPrecomputedChunk('">');
+    var endSegmentHTML = stringToPrecomputedChunk('</div>');
+    var startSegmentSVG = stringToPrecomputedChunk(
+      '<svg aria-hidden="true" style="display:none" id="'
+    );
+    var startSegmentSVG2 = stringToPrecomputedChunk('">');
+    var endSegmentSVG = stringToPrecomputedChunk('</svg>');
+    var startSegmentMathML = stringToPrecomputedChunk(
+      '<math aria-hidden="true" style="display:none" id="'
+    );
+    var startSegmentMathML2 = stringToPrecomputedChunk('">');
+    var endSegmentMathML = stringToPrecomputedChunk('</math>');
+    var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
+    var startSegmentTable2 = stringToPrecomputedChunk('">');
+    var endSegmentTable = stringToPrecomputedChunk('</table>');
+    var startSegmentTableBody = stringToPrecomputedChunk(
+      '<table hidden><tbody id="'
+    );
+    var startSegmentTableBody2 = stringToPrecomputedChunk('">');
+    var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
+    var startSegmentTableRow = stringToPrecomputedChunk(
+      '<table hidden><tr id="'
+    );
+    var startSegmentTableRow2 = stringToPrecomputedChunk('">');
+    var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
+    var startSegmentColGroup = stringToPrecomputedChunk(
+      '<table hidden><colgroup id="'
+    );
+    var startSegmentColGroup2 = stringToPrecomputedChunk('">');
+    var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
+    // The following code is the source scripts that we then minify and inline below,
+    // with renamed function names that we hope don't collide:
+    // const COMMENT_NODE = 8;
+    // const SUSPENSE_START_DATA = '$';
+    // const SUSPENSE_END_DATA = '/$';
+    // const SUSPENSE_PENDING_START_DATA = '$?';
+    // const SUSPENSE_FALLBACK_START_DATA = '$!';
+    //
+    // function clientRenderBoundary(suspenseBoundaryID) {
+    //   // Find the fallback's first element.
+    //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+    //   if (!suspenseIdNode) {
+    //     // The user must have already navigated away from this tree.
+    //     // E.g. because the parent was hydrated.
+    //     return;
+    //   }
+    //   // Find the boundary around the fallback. This is always the previous node.
+    //   const suspenseNode = suspenseIdNode.previousSibling;
+    //   // Tag it to be client rendered.
+    //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+    //   // Tell React to retry it if the parent already hydrated.
+    //   if (suspenseNode._reactRetry) {
+    //     suspenseNode._reactRetry();
+    //   }
+    // }
+    //
+    // function completeBoundary(suspenseBoundaryID, contentID) {
+    //   // Find the fallback's first element.
+    //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+    //   const contentNode = document.getElementById(contentID);
+    //   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
+    //   // This might also help by not causing recalcing each time we move a child from here to the target.
+    //   contentNode.parentNode.removeChild(contentNode);
+    //   if (!suspenseIdNode) {
+    //     // The user must have already navigated away from this tree.
+    //     // E.g. because the parent was hydrated. That's fine there's nothing to do
+    //     // but we have to make sure that we already deleted the container node.
+    //     return;
+    //   }
+    //   // Find the boundary around the fallback. This is always the previous node.
+    //   const suspenseNode = suspenseIdNode.previousSibling;
+    //
+    //   // Clear all the existing children. This is complicated because
+    //   // there can be embedded Suspense boundaries in the fallback.
+    //   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
+    //   // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+    //   // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+    //   const parentInstance = suspenseNode.parentNode;
+    //   let node = suspenseNode.nextSibling;
+    //   let depth = 0;
+    //   do {
+    //     if (node && node.nodeType === COMMENT_NODE) {
+    //       const data = node.data;
+    //       if (data === SUSPENSE_END_DATA) {
+    //         if (depth === 0) {
+    //           break;
+    //         } else {
+    //           depth--;
+    //         }
+    //       } else if (
+    //         data === SUSPENSE_START_DATA ||
+    //         data === SUSPENSE_PENDING_START_DATA ||
+    //         data === SUSPENSE_FALLBACK_START_DATA
+    //       ) {
+    //         depth++;
+    //       }
+    //     }
+    //
+    //     const nextNode = node.nextSibling;
+    //     parentInstance.removeChild(node);
+    //     node = nextNode;
+    //   } while (node);
+    //
+    //   const endOfBoundary = node;
+    //
+    //   // Insert all the children from the contentNode between the start and end of suspense boundary.
+    //   while (contentNode.firstChild) {
+    //     parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+    //   }
+    //   suspenseNode.data = SUSPENSE_START_DATA;
+    //   if (suspenseNode._reactRetry) {
+    //     suspenseNode._reactRetry();
+    //   }
+    // }
+    //
+    // function completeSegment(containerID, placeholderID) {
+    //   const segmentContainer = document.getElementById(containerID);
+    //   const placeholderNode = document.getElementById(placeholderID);
+    //   // We always expect both nodes to exist here because, while we might
+    //   // have navigated away from the main tree, we still expect the detached
+    //   // tree to exist.
+    //   segmentContainer.parentNode.removeChild(segmentContainer);
+    //   while (segmentContainer.firstChild) {
+    //     placeholderNode.parentNode.insertBefore(
+    //       segmentContainer.firstChild,
+    //       placeholderNode,
+    //     );
+    //   }
+    //   placeholderNode.parentNode.removeChild(placeholderNode);
+    // }
+
+    var completeSegmentFunction =
+      'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
+    var completeBoundaryFunction =
+      'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
+    var clientRenderFunction =
+      'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+    var completeSegmentScript1Full = stringToPrecomputedChunk(
+      completeSegmentFunction + ';$RS("'
+    );
+    var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
+    var completeSegmentScript2 = stringToPrecomputedChunk('","');
+    var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+    var completeBoundaryScript1Full = stringToPrecomputedChunk(
+      completeBoundaryFunction + ';$RC("'
+    );
+    var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
+    var completeBoundaryScript2 = stringToPrecomputedChunk('","');
+    var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
+    var clientRenderScript1Full = stringToPrecomputedChunk(
+      clientRenderFunction + ';$RX("'
+    );
+    var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+    var clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+
+    var rendererSigil;
+
+    {
+      // Use this to detect multiple renderers using the same context
+      rendererSigil = {};
+    } // Used to store the parent path of all context overrides in a shared linked list.
+    // Forming a reverse tree.
+
+    var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
+    // This global (actually thread local) state represents what state all those "current",
+    // fields are currently in.
+
+    var currentActiveSnapshot = null;
+
+    function popNode(prev) {
+      {
+        prev.context._currentValue = prev.parentValue;
+      }
+    }
+
+    function pushNode(next) {
+      {
+        next.context._currentValue = next.value;
+      }
+    }
+
+    function popToNearestCommonAncestor(prev, next) {
+      if (prev === next);
+      else {
+        popNode(prev);
+        var parentPrev = prev.parent;
+        var parentNext = next.parent;
+
+        if (parentPrev === null) {
+          if (parentNext !== null) {
+            throw new Error(
+              'The stacks must reach the root at the same time. This is a bug in React.'
+            );
+          }
+        } else {
+          if (parentNext === null) {
+            throw new Error(
+              'The stacks must reach the root at the same time. This is a bug in React.'
+            );
+          }
+
+          popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+
+          pushNode(next);
+        }
+      }
+    }
+
+    function popAllPrevious(prev) {
+      popNode(prev);
+      var parentPrev = prev.parent;
+
+      if (parentPrev !== null) {
+        popAllPrevious(parentPrev);
+      }
+    }
+
+    function pushAllNext(next) {
+      var parentNext = next.parent;
+
+      if (parentNext !== null) {
+        pushAllNext(parentNext);
+      }
+
+      pushNode(next);
+    }
+
+    function popPreviousToCommonLevel(prev, next) {
+      popNode(prev);
+      var parentPrev = prev.parent;
+
+      if (parentPrev === null) {
+        throw new Error(
+          'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+        );
+      }
+
+      if (parentPrev.depth === next.depth) {
+        // We found the same level. Now we just need to find a shared ancestor.
+        popToNearestCommonAncestor(parentPrev, next);
+      } else {
+        // We must still be deeper.
+        popPreviousToCommonLevel(parentPrev, next);
+      }
+    }
+
+    function popNextToCommonLevel(prev, next) {
+      var parentNext = next.parent;
+
+      if (parentNext === null) {
+        throw new Error(
+          'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+        );
+      }
+
+      if (prev.depth === parentNext.depth) {
+        // We found the same level. Now we just need to find a shared ancestor.
+        popToNearestCommonAncestor(prev, parentNext);
+      } else {
+        // We must still be deeper.
+        popNextToCommonLevel(prev, parentNext);
+      }
+
+      pushNode(next);
+    } // Perform context switching to the new snapshot.
+    // To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
+    // updating all the context's current values. That way reads, always just read the current value.
+    // At the cost of updating contexts even if they're never read by this subtree.
+
+    function switchContext(newSnapshot) {
+      // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
+      // We also need to update any new contexts that are now on the stack with the deepest value.
+      // The easiest way to update new contexts is to just reapply them in reverse order from the
+      // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
+      // for that. Therefore this algorithm is recursive.
+      // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
+      // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
+      // 3) Then we reapply new contexts on the way back up the stack.
+      var prev = currentActiveSnapshot;
+      var next = newSnapshot;
+
+      if (prev !== next) {
+        if (prev === null) {
+          // $FlowFixMe: This has to be non-null since it's not equal to prev.
+          pushAllNext(next);
+        } else if (next === null) {
+          popAllPrevious(prev);
+        } else if (prev.depth === next.depth) {
+          popToNearestCommonAncestor(prev, next);
+        } else if (prev.depth > next.depth) {
+          popPreviousToCommonLevel(prev, next);
+        } else {
+          popNextToCommonLevel(prev, next);
+        }
+
+        currentActiveSnapshot = next;
+      }
+    }
+    function pushProvider(context, nextValue) {
+      var prevValue;
+
+      {
+        prevValue = context._currentValue;
+        context._currentValue = nextValue;
+
+        {
+          if (
+            context._currentRenderer !== undefined &&
+            context._currentRenderer !== null &&
+            context._currentRenderer !== rendererSigil
+          ) {
+            error(
+              'Detected multiple renderers concurrently rendering the ' +
+                'same context provider. This is currently unsupported.'
+            );
+          }
+
+          context._currentRenderer = rendererSigil;
+        }
+      }
+
+      var prevNode = currentActiveSnapshot;
+      var newNode = {
+        parent: prevNode,
+        depth: prevNode === null ? 0 : prevNode.depth + 1,
+        context: context,
+        parentValue: prevValue,
+        value: nextValue,
+      };
+      currentActiveSnapshot = newNode;
+      return newNode;
+    }
+    function popProvider() {
+      var prevSnapshot = currentActiveSnapshot;
+
+      if (prevSnapshot === null) {
+        throw new Error(
+          'Tried to pop a Context at the root of the app. This is a bug in React.'
+        );
+      }
+
+      {
+        var value = prevSnapshot.parentValue;
+
+        if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+          prevSnapshot.context._currentValue =
+            prevSnapshot.context._defaultValue;
+        } else {
+          prevSnapshot.context._currentValue = value;
+        }
+      }
+
+      return (currentActiveSnapshot = prevSnapshot.parent);
+    }
+    function getActiveContext() {
+      return currentActiveSnapshot;
+    }
+    function readContext(context) {
+      var value = context._currentValue;
+      return value;
+    }
+
+    function readContext$1(context) {
+      {
+        if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
+          error('Only ServerContext is supported in Flight');
+        }
+
+        if (currentCache === null) {
+          error(
+            'Context can only be read while React is rendering. ' +
+              'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+              'In function components, you can read it directly in the function body, but not ' +
+              'inside Hooks like useReducer() or useMemo().'
+          );
+        }
+      }
+
+      return readContext(context);
+    }
+
+    var Dispatcher = {
+      useMemo: function (nextCreate) {
+        return nextCreate();
+      },
+      useCallback: function (callback) {
+        return callback;
+      },
+      useDebugValue: function () {},
+      useDeferredValue: unsupportedHook,
+      useTransition: unsupportedHook,
+      getCacheForType: function (resourceType) {
+        if (!currentCache) {
+          throw new Error(
+            'Reading the cache is only supported while rendering.'
+          );
+        }
+
+        var entry = currentCache.get(resourceType);
+
+        if (entry === undefined) {
+          entry = resourceType(); // TODO: Warn if undefined?
+
+          currentCache.set(resourceType, entry);
+        }
+
+        return entry;
+      },
+      readContext: readContext$1,
+      useContext: readContext$1,
+      useReducer: unsupportedHook,
+      useRef: unsupportedHook,
+      useState: unsupportedHook,
+      useInsertionEffect: unsupportedHook,
+      useLayoutEffect: unsupportedHook,
+      useImperativeHandle: unsupportedHook,
+      useEffect: unsupportedHook,
+      useId: unsupportedHook,
+      useMutableSource: unsupportedHook,
+      useSyncExternalStore: unsupportedHook,
+      useCacheRefresh: function () {
+        return unsupportedRefresh;
+      },
+    };
+
+    function unsupportedHook() {
+      throw new Error('This Hook is not supported in Server Components.');
+    }
+
+    function unsupportedRefresh() {
+      if (!currentCache) {
+        throw new Error(
+          'Refreshing the cache is not supported in Server Components.'
+        );
+      }
+    }
+
+    var currentCache = null;
+    function setCurrentCache(cache) {
+      currentCache = cache;
+      return currentCache;
+    }
+    function getCurrentCache() {
+      return currentCache;
+    }
+
+    var ContextRegistry = ReactSharedInternals.ContextRegistry;
+    function getOrCreateServerContext(globalName) {
+      if (!ContextRegistry[globalName]) {
+        ContextRegistry[globalName] = React.createServerContext(
+          globalName,
+          REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+        );
+      }
+
+      return ContextRegistry[globalName];
+    }
+
     var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
     function defaultErrorHandler(error) {
@@ -207,7 +1183,7 @@ if (process.env.NODE_ENV !== 'production') {
     var OPEN = 0;
     var CLOSING = 1;
     var CLOSED = 2;
-    function createRequest(model, bundlerConfig, onError) {
+    function createRequest(model, bundlerConfig, onError, context) {
       var pingedSegments = [];
       var request = {
         status: OPEN,
@@ -223,17 +1199,25 @@ if (process.env.NODE_ENV !== 'production') {
         completedErrorChunks: [],
         writtenSymbols: new Map(),
         writtenModules: new Map(),
+        writtenProviders: new Map(),
         onError: onError === undefined ? defaultErrorHandler : onError,
         toJSON: function (key, value) {
           return resolveModelToJSON(request, this, key, value);
         },
       };
       request.pendingChunks++;
-      var rootSegment = createSegment(request, model);
+      var rootContext = createRootContext(context);
+      var rootSegment = createSegment(request, model, rootContext);
       pingedSegments.push(rootSegment);
       return request;
     }
 
+    function createRootContext(reqContext) {
+      return importServerContexts(reqContext);
+    }
+
+    var POP = {};
+
     function attemptResolveElement(type, key, ref, props) {
       if (ref !== null && ref !== undefined) {
         // When the ref moves to the regular props object this will implicitly
@@ -268,6 +1252,13 @@ if (process.env.NODE_ENV !== 'production') {
         }
 
         switch (type.$$typeof) {
+          case REACT_LAZY_TYPE: {
+            var payload = type._payload;
+            var init = type._init;
+            var wrappedType = init(payload);
+            return attemptResolveElement(wrappedType, key, ref, props);
+          }
+
           case REACT_FORWARD_REF_TYPE: {
             var render = type.render;
             return render(props, undefined);
@@ -276,6 +1267,38 @@ if (process.env.NODE_ENV !== 'production') {
           case REACT_MEMO_TYPE: {
             return attemptResolveElement(type.type, key, ref, props);
           }
+
+          case REACT_PROVIDER_TYPE: {
+            pushProvider(type._context, props.value);
+
+            {
+              var extraKeys = Object.keys(props).filter(function (value) {
+                if (value === 'children' || value === 'value') {
+                  return false;
+                }
+
+                return true;
+              });
+
+              if (extraKeys.length !== 0) {
+                error(
+                  'ServerContext can only have a value prop and children. Found: %s',
+                  JSON.stringify(extraKeys)
+                );
+              }
+            }
+
+            return [
+              REACT_ELEMENT_TYPE,
+              type,
+              key, // Rely on __popProvider being serialized last to pop the provider.
+              {
+                value: props.value,
+                children: props.children,
+                __pop: POP,
+              },
+            ];
+          }
         }
       }
 
@@ -296,11 +1319,12 @@ if (process.env.NODE_ENV !== 'production') {
       }
     }
 
-    function createSegment(request, model) {
+    function createSegment(request, model, context) {
       var id = request.nextChunkId++;
       var segment = {
         id: id,
         model: model,
+        context: context,
         ping: function () {
           return pingSegment(request, segment);
         },
@@ -329,7 +1353,7 @@ if (process.env.NODE_ENV !== 'production') {
     function isObjectPrototype(object) {
       if (!object) {
         return false;
-      } // $FlowFixMe
+      }
 
       var ObjectPrototype = Object.prototype;
 
@@ -430,8 +1454,7 @@ if (process.env.NODE_ENV !== 'production') {
 
     function describeObjectForErrorMessage(objectOrArray, expandedName) {
       if (isArray(objectOrArray)) {
-        var str = '['; // $FlowFixMe: Should be refined by now.
-
+        var str = '[';
         var array = objectOrArray;
 
         for (var i = 0; i < array.length; i++) {
@@ -460,8 +1483,7 @@ if (process.env.NODE_ENV !== 'production') {
         str += ']';
         return str;
       } else {
-        var _str = '{'; // $FlowFixMe: Should be refined by now.
-
+        var _str = '{';
         var object = objectOrArray;
         var names = Object.keys(object);
 
@@ -495,6 +1517,8 @@ if (process.env.NODE_ENV !== 'production') {
       }
     }
 
+    var insideContextProps = null;
+    var isInsideContextValue = false;
     function resolveModelToJSON(request, parent, key, value) {
       {
         // $FlowFixMe
@@ -515,29 +1539,57 @@ if (process.env.NODE_ENV !== 'production') {
       switch (value) {
         case REACT_ELEMENT_TYPE:
           return '$';
+      }
 
-        case REACT_LAZY_TYPE:
-          throw new Error(
-            'React Lazy Components are not yet supported on the server.'
-          );
+      {
+        if (
+          parent[0] === REACT_ELEMENT_TYPE &&
+          parent[1] &&
+          parent[1].$$typeof === REACT_PROVIDER_TYPE &&
+          key === '3'
+        ) {
+          insideContextProps = value;
+        } else if (insideContextProps === parent && key === 'value') {
+          isInsideContextValue = true;
+        } else if (insideContextProps === parent && key === 'children') {
+          isInsideContextValue = false;
+        }
       } // Resolve server components.
 
       while (
         typeof value === 'object' &&
         value !== null &&
-        value.$$typeof === REACT_ELEMENT_TYPE
+        (value.$$typeof === REACT_ELEMENT_TYPE ||
+          value.$$typeof === REACT_LAZY_TYPE)
       ) {
-        // TODO: Concatenate keys of parents onto children.
-        var element = value;
+        {
+          if (isInsideContextValue) {
+            error('React elements are not allowed in ServerContext');
+          }
+        }
 
         try {
-          // Attempt to render the server component.
-          value = attemptResolveElement(
-            element.type,
-            element.key,
-            element.ref,
-            element.props
-          );
+          switch (value.$$typeof) {
+            case REACT_ELEMENT_TYPE: {
+              // TODO: Concatenate keys of parents onto children.
+              var element = value; // Attempt to render the server component.
+
+              value = attemptResolveElement(
+                element.type,
+                element.key,
+                element.ref,
+                element.props
+              );
+              break;
+            }
+
+            case REACT_LAZY_TYPE: {
+              var payload = value._payload;
+              var init = value._init;
+              value = init(payload);
+              break;
+            }
+          }
         } catch (x) {
           if (
             typeof x === 'object' &&
@@ -546,12 +1598,12 @@ if (process.env.NODE_ENV !== 'production') {
           ) {
             // Something suspended, we'll need to create a new segment and resolve it later.
             request.pendingChunks++;
-            var newSegment = createSegment(request, value);
+            var newSegment = createSegment(request, value, getActiveContext());
             var ping = newSegment.ping;
             x.then(ping, ping);
             return serializeByRefID(newSegment.id);
           } else {
-            reportError(request, x); // Something errored. We'll still send everything we have up until this point.
+            logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point.
             // We'll replace this element with a lazy reference that throws on the client
             // once it gets rendered.
 
@@ -615,6 +1667,28 @@ if (process.env.NODE_ENV !== 'production') {
             emitErrorChunk(request, _errorId, x);
             return serializeByValueID(_errorId);
           }
+        } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
+          var providerKey = value._context._globalName;
+          var writtenProviders = request.writtenProviders;
+          var providerId = writtenProviders.get(key);
+
+          if (providerId === undefined) {
+            request.pendingChunks++;
+            providerId = request.nextChunkId++;
+            writtenProviders.set(providerKey, providerId);
+            emitProviderChunk(request, providerId, providerKey);
+          }
+
+          return serializeByValueID(providerId);
+        } else if (value === POP) {
+          popProvider();
+
+          {
+            insideContextProps = null;
+            isInsideContextValue = false;
+          }
+
+          return undefined;
         }
 
         {
@@ -748,7 +1822,7 @@ if (process.env.NODE_ENV !== 'production') {
       );
     }
 
-    function reportError(request, error) {
+    function logRecoverableError(request, error) {
       var onError = request.onError;
       onError(error);
     }
@@ -798,7 +1872,14 @@ if (process.env.NODE_ENV !== 'production') {
       request.completedModuleChunks.push(processedChunk);
     }
 
+    function emitProviderChunk(request, id, contextName) {
+      var processedChunk = processProviderChunk(request, id, contextName);
+      request.completedJSONChunks.push(processedChunk);
+    }
+
     function retrySegment(request, segment) {
+      switchContext(segment.context);
+
       try {
         var _value3 = segment.model;
 
@@ -834,7 +1915,7 @@ if (process.env.NODE_ENV !== 'production') {
           x.then(ping, ping);
           return;
         } else {
-          reportError(request, x); // This errored, we need to serialize this error to the
+          logRecoverableError(request, x); // This errored, we need to serialize this error to the
 
           emitErrorChunk(request, segment.id, x);
         }
@@ -843,9 +1924,9 @@ if (process.env.NODE_ENV !== 'production') {
 
     function performWork(request) {
       var prevDispatcher = ReactCurrentDispatcher.current;
-      var prevCache = currentCache;
+      var prevCache = getCurrentCache();
       ReactCurrentDispatcher.current = Dispatcher;
-      currentCache = request.cache;
+      setCurrentCache(request.cache);
 
       try {
         var pingedSegments = request.pingedSegments;
@@ -860,11 +1941,11 @@ if (process.env.NODE_ENV !== 'production') {
           flushCompletedChunks(request, request.destination);
         }
       } catch (error) {
-        reportError(request, error);
+        logRecoverableError(request, error);
         fatalError(request, error);
       } finally {
         ReactCurrentDispatcher.current = prevDispatcher;
-        currentCache = prevCache;
+        setCurrentCache(prevCache);
       }
     }
 
@@ -880,8 +1961,9 @@ if (process.env.NODE_ENV !== 'production') {
         for (; i < moduleChunks.length; i++) {
           request.pendingChunks--;
           var chunk = moduleChunks[i];
+          var keepWriting = writeChunkAndReturn(destination, chunk);
 
-          if (!writeChunk(destination, chunk)) {
+          if (!keepWriting) {
             request.destination = null;
             i++;
             break;
@@ -897,7 +1979,9 @@ if (process.env.NODE_ENV !== 'production') {
           request.pendingChunks--;
           var _chunk = jsonChunks[i];
 
-          if (!writeChunk(destination, _chunk)) {
+          var _keepWriting = writeChunkAndReturn(destination, _chunk);
+
+          if (!_keepWriting) {
             request.destination = null;
             i++;
             break;
@@ -915,7 +1999,9 @@ if (process.env.NODE_ENV !== 'production') {
           request.pendingChunks--;
           var _chunk2 = errorChunks[i];
 
-          if (!writeChunk(destination, _chunk2)) {
+          var _keepWriting2 = writeChunkAndReturn(destination, _chunk2);
+
+          if (!_keepWriting2) {
             request.destination = null;
             i++;
             break;
@@ -951,72 +2037,41 @@ if (process.env.NODE_ENV !== 'production') {
         return;
       }
 
+      if (request.destination !== null) {
+        // We're already flowing.
+        return;
+      }
+
       request.destination = destination;
 
       try {
         flushCompletedChunks(request, destination);
       } catch (error) {
-        reportError(request, error);
+        logRecoverableError(request, error);
         fatalError(request, error);
       }
     }
 
-    function unsupportedHook() {
-      throw new Error('This Hook is not supported in Server Components.');
-    }
-
-    function unsupportedRefresh() {
-      if (!currentCache) {
-        throw new Error(
-          'Refreshing the cache is not supported in Server Components.'
-        );
-      }
-    }
-
-    var currentCache = null;
-    var Dispatcher = {
-      useMemo: function (nextCreate) {
-        return nextCreate();
-      },
-      useCallback: function (callback) {
-        return callback;
-      },
-      useDebugValue: function () {},
-      useDeferredValue: unsupportedHook,
-      useTransition: unsupportedHook,
-      getCacheForType: function (resourceType) {
-        if (!currentCache) {
-          throw new Error(
-            'Reading the cache is only supported while rendering.'
-          );
+    function importServerContexts(contexts) {
+      if (contexts) {
+        var prevContext = getActiveContext();
+        switchContext(rootContextSnapshot);
+
+        for (var i = 0; i < contexts.length; i++) {
+          var _contexts$i = contexts[i],
+            name = _contexts$i[0],
+            _value4 = _contexts$i[1];
+          var context = getOrCreateServerContext(name);
+          pushProvider(context, _value4);
         }
 
-        var entry = currentCache.get(resourceType);
-
-        if (entry === undefined) {
-          entry = resourceType(); // TODO: Warn if undefined?
-
-          currentCache.set(resourceType, entry);
-        }
+        var importedContext = getActiveContext();
+        switchContext(prevContext);
+        return importedContext;
+      }
 
-        return entry;
-      },
-      readContext: unsupportedHook,
-      useContext: unsupportedHook,
-      useReducer: unsupportedHook,
-      useRef: unsupportedHook,
-      useState: unsupportedHook,
-      useInsertionEffect: unsupportedHook,
-      useLayoutEffect: unsupportedHook,
-      useImperativeHandle: unsupportedHook,
-      useEffect: unsupportedHook,
-      useId: unsupportedHook,
-      useMutableSource: unsupportedHook,
-      useSyncExternalStore: unsupportedHook,
-      useCacheRefresh: function () {
-        return unsupportedRefresh;
-      },
-    };
+      return rootContextSnapshot;
+    }
 
     function createDrainHandler(destination, request) {
       return function () {
@@ -1024,11 +2079,12 @@ if (process.env.NODE_ENV !== 'production') {
       };
     }
 
-    function renderToPipeableStream(model, options) {
+    function renderToPipeableStream(model, options, context) {
       var request = createRequest(
         model,
         {}, // Manifest, not used
-        options ? options.onError : undefined
+        options ? options.onError : undefined,
+        context
       );
       var hasStartedFlowing = false;
       startWork(request);
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.production.min.server.js b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.production.min.server.js
index da0ef29700..2c3336fe99 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.production.min.server.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.node.production.min.server.js
@@ -8,109 +8,437 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';
-var h = require('react'),
-  n = JSON.stringify,
-  q = Symbol.for('react.module.reference'),
-  r = 60103,
-  t = 60107,
-  u = 60112,
-  v = 60115,
-  w = 60116;
-if ('function' === typeof Symbol && Symbol.for) {
-  var x = Symbol.for;
-  r = x('react.element');
-  t = x('react.fragment');
-  u = x('react.forward_ref');
-  v = x('react.memo');
-  w = x('react.lazy');
-}
-var y = Array.isArray,
-  z =
-    h.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
+var e = require('react');
+function h(a) {
+  return Buffer.from(a, 'utf8');
+}
+var m = JSON.stringify,
+  p = Symbol.for('react.module.reference'),
+  r = Symbol.for('react.element'),
+  aa = Symbol.for('react.fragment'),
+  u = Symbol.for('react.provider'),
+  ba = Symbol.for('react.forward_ref'),
+  ca = Symbol.for('react.memo'),
+  v = Symbol.for('react.lazy'),
+  w = Symbol.for('react.default_value');
+function x(a, b, d, c, f, g, k) {
+  this.acceptsBooleans = 2 === b || 3 === b || 4 === b;
+  this.attributeName = c;
+  this.attributeNamespace = f;
+  this.mustUseProperty = d;
+  this.propertyName = a;
+  this.type = b;
+  this.sanitizeURL = g;
+  this.removeEmptyString = k;
+}
+var y =
+  'children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style'.split(
+    ' '
+  );
+y.push('innerText', 'textContent');
+y.forEach(function (a) {
+  new x(a, 0, !1, a, null, !1, !1);
+});
+[
+  ['acceptCharset', 'accept-charset'],
+  ['className', 'class'],
+  ['htmlFor', 'for'],
+  ['httpEquiv', 'http-equiv'],
+].forEach(function (a) {
+  new x(a[0], 1, !1, a[1], null, !1, !1);
+});
+['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (a) {
+  new x(a, 2, !1, a.toLowerCase(), null, !1, !1);
+});
+[
+  'autoReverse',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+].forEach(function (a) {
+  new x(a, 2, !1, a, null, !1, !1);
+});
+'allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope'
+  .split(' ')
+  .forEach(function (a) {
+    new x(a, 3, !1, a.toLowerCase(), null, !1, !1);
+  });
+['checked', 'multiple', 'muted', 'selected'].forEach(function (a) {
+  new x(a, 3, !0, a, null, !1, !1);
+});
+['capture', 'download'].forEach(function (a) {
+  new x(a, 4, !1, a, null, !1, !1);
+});
+['cols', 'rows', 'size', 'span'].forEach(function (a) {
+  new x(a, 6, !1, a, null, !1, !1);
+});
+['rowSpan', 'start'].forEach(function (a) {
+  new x(a, 5, !1, a.toLowerCase(), null, !1, !1);
+});
+var z = /[\-:]([a-z])/g;
 function A(a) {
+  return a[1].toUpperCase();
+}
+'accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height'
+  .split(' ')
+  .forEach(function (a) {
+    var b = a.replace(z, A);
+    new x(b, 1, !1, a, null, !1, !1);
+  });
+'xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type'
+  .split(' ')
+  .forEach(function (a) {
+    var b = a.replace(z, A);
+    new x(b, 1, !1, a, 'http://www.w3.org/1999/xlink', !1, !1);
+  });
+['xml:base', 'xml:lang', 'xml:space'].forEach(function (a) {
+  var b = a.replace(z, A);
+  new x(b, 1, !1, a, 'http://www.w3.org/XML/1998/namespace', !1, !1);
+});
+['tabIndex', 'crossOrigin'].forEach(function (a) {
+  new x(a, 1, !1, a.toLowerCase(), null, !1, !1);
+});
+new x('xlinkHref', 1, !1, 'xlink:href', 'http://www.w3.org/1999/xlink', !0, !1);
+['src', 'href', 'action', 'formAction'].forEach(function (a) {
+  new x(a, 1, !1, a.toLowerCase(), null, !0, !0);
+});
+var B = {
+    animationIterationCount: !0,
+    aspectRatio: !0,
+    borderImageOutset: !0,
+    borderImageSlice: !0,
+    borderImageWidth: !0,
+    boxFlex: !0,
+    boxFlexGroup: !0,
+    boxOrdinalGroup: !0,
+    columnCount: !0,
+    columns: !0,
+    flex: !0,
+    flexGrow: !0,
+    flexPositive: !0,
+    flexShrink: !0,
+    flexNegative: !0,
+    flexOrder: !0,
+    gridArea: !0,
+    gridRow: !0,
+    gridRowEnd: !0,
+    gridRowSpan: !0,
+    gridRowStart: !0,
+    gridColumn: !0,
+    gridColumnEnd: !0,
+    gridColumnSpan: !0,
+    gridColumnStart: !0,
+    fontWeight: !0,
+    lineClamp: !0,
+    lineHeight: !0,
+    opacity: !0,
+    order: !0,
+    orphans: !0,
+    tabSize: !0,
+    widows: !0,
+    zIndex: !0,
+    zoom: !0,
+    fillOpacity: !0,
+    floodOpacity: !0,
+    stopOpacity: !0,
+    strokeDasharray: !0,
+    strokeDashoffset: !0,
+    strokeMiterlimit: !0,
+    strokeOpacity: !0,
+    strokeWidth: !0,
+  },
+  ea = ['Webkit', 'ms', 'Moz', 'O'];
+Object.keys(B).forEach(function (a) {
+  ea.forEach(function (b) {
+    b = b + a.charAt(0).toUpperCase() + a.substring(1);
+    B[b] = B[a];
+  });
+});
+var C = Array.isArray;
+h('<script>');
+h('\x3c/script>');
+h('<script src="');
+h('<script type="module" src="');
+h('" async="">\x3c/script>');
+h('\x3c!-- --\x3e');
+h(' style="');
+h(':');
+h(';');
+h(' ');
+h('="');
+h('"');
+h('=""');
+h('>');
+h('/>');
+h(' selected=""');
+h('\n');
+h('<!DOCTYPE html>');
+h('</');
+h('>');
+h('<template id="');
+h('"></template>');
+h('\x3c!--$--\x3e');
+h('\x3c!--$?--\x3e<template id="');
+h('"></template>');
+h('\x3c!--$!--\x3e');
+h('\x3c!--/$--\x3e');
+h('<div hidden id="');
+h('">');
+h('</div>');
+h('<svg aria-hidden="true" style="display:none" id="');
+h('">');
+h('</svg>');
+h('<math aria-hidden="true" style="display:none" id="');
+h('">');
+h('</math>');
+h('<table hidden id="');
+h('">');
+h('</table>');
+h('<table hidden><tbody id="');
+h('">');
+h('</tbody></table>');
+h('<table hidden><tr id="');
+h('">');
+h('</tr></table>');
+h('<table hidden><colgroup id="');
+h('">');
+h('</colgroup></table>');
+h(
+  'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("'
+);
+h('$RS("');
+h('","');
+h('")\x3c/script>');
+h(
+  'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("'
+);
+h('$RC("');
+h('","');
+h('")\x3c/script>');
+h(
+  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()};$RX("'
+);
+h('$RX("');
+h('")\x3c/script>');
+var D = null;
+function E(a, b) {
+  if (a !== b) {
+    a.context._currentValue = a.parentValue;
+    a = a.parent;
+    var d = b.parent;
+    if (null === a) {
+      if (null !== d)
+        throw Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+    } else {
+      if (null === d)
+        throw Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+      E(a, d);
+      b.context._currentValue = b.value;
+    }
+  }
+}
+function F(a) {
+  a.context._currentValue = a.parentValue;
+  a = a.parent;
+  null !== a && F(a);
+}
+function G(a) {
+  var b = a.parent;
+  null !== b && G(b);
+  a.context._currentValue = a.value;
+}
+function H(a, b) {
+  a.context._currentValue = a.parentValue;
+  a = a.parent;
+  if (null === a)
+    throw Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  a.depth === b.depth ? E(a, b) : H(a, b);
+}
+function I(a, b) {
+  var d = b.parent;
+  if (null === d)
+    throw Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  a.depth === d.depth ? E(a, d) : I(a, d);
+  b.context._currentValue = b.value;
+}
+function J(a) {
+  var b = D;
+  b !== a &&
+    (null === b
+      ? G(a)
+      : null === a
+      ? F(b)
+      : b.depth === a.depth
+      ? E(b, a)
+      : b.depth > a.depth
+      ? H(b, a)
+      : I(b, a),
+    (D = a));
+}
+function M(a, b) {
+  var d = a._currentValue;
+  a._currentValue = b;
+  var c = D;
+  return (D = a =
+    {
+      parent: c,
+      depth: null === c ? 0 : c.depth + 1,
+      context: a,
+      parentValue: d,
+      value: b,
+    });
+}
+function N(a) {
+  return a._currentValue;
+}
+var ha = {
+  useMemo: function (a) {
+    return a();
+  },
+  useCallback: function (a) {
+    return a;
+  },
+  useDebugValue: function () {},
+  useDeferredValue: O,
+  useTransition: O,
+  getCacheForType: function (a) {
+    if (!P) throw Error('Reading the cache is only supported while rendering.');
+    var b = P.get(a);
+    void 0 === b && ((b = a()), P.set(a, b));
+    return b;
+  },
+  readContext: N,
+  useContext: N,
+  useReducer: O,
+  useRef: O,
+  useState: O,
+  useInsertionEffect: O,
+  useLayoutEffect: O,
+  useImperativeHandle: O,
+  useEffect: O,
+  useId: O,
+  useMutableSource: O,
+  useSyncExternalStore: O,
+  useCacheRefresh: function () {
+    return fa;
+  },
+};
+function O() {
+  throw Error('This Hook is not supported in Server Components.');
+}
+function fa() {
+  if (!P)
+    throw Error('Refreshing the cache is not supported in Server Components.');
+}
+var P = null,
+  Q = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  R = Q.ContextRegistry,
+  S = Q.ReactCurrentDispatcher;
+function ia(a) {
   console.error(a);
 }
-function D(a, c, d) {
-  var b = [],
-    e = {
+function ja(a, b, d, c) {
+  var f = [],
+    g = {
       status: 0,
       fatalError: null,
       destination: null,
-      bundlerConfig: c,
+      bundlerConfig: b,
       cache: new Map(),
       nextChunkId: 0,
       pendingChunks: 0,
-      pingedSegments: b,
+      pingedSegments: f,
       completedModuleChunks: [],
       completedJSONChunks: [],
       completedErrorChunks: [],
       writtenSymbols: new Map(),
       writtenModules: new Map(),
-      onError: void 0 === d ? A : d,
+      writtenProviders: new Map(),
+      onError: void 0 === d ? ia : d,
       toJSON: function (a, b) {
-        return E(e, this, a, b);
+        return ka(g, this, a, b);
       },
     };
-  e.pendingChunks++;
-  a = F(e, a);
-  b.push(a);
-  return e;
+  g.pendingChunks++;
+  b = la(c);
+  a = T(g, a, b);
+  f.push(a);
+  return g;
 }
-function G(a, c, d, b) {
+var ma = {};
+function U(a, b, d, c) {
   if (null !== d && void 0 !== d)
     throw Error(
       'Refs cannot be used in server components, nor passed to client components.'
     );
-  if ('function' === typeof a) return a(b);
-  if ('string' === typeof a) return [r, a, c, b];
-  if ('symbol' === typeof a) return a === t ? b.children : [r, a, c, b];
+  if ('function' === typeof a) return a(c);
+  if ('string' === typeof a) return [r, a, b, c];
+  if ('symbol' === typeof a) return a === aa ? c.children : [r, a, b, c];
   if (null != a && 'object' === typeof a) {
-    if ((a.$$typeof_rsc || a.$$typeof) === q) return [r, a, c, b];
+    if ((a.$$typeof_rsc || a.$$typeof) === p) return [r, a, b, c];
     switch (a.$$typeof) {
-      case u:
-        return (a = a.render), a(b, void 0);
       case v:
-        return G(a.type, c, d, b);
+        var f = a._init;
+        a = f(a._payload);
+        return U(a, b, d, c);
+      case ba:
+        return (b = a.render), b(c, void 0);
+      case ca:
+        return U(a.type, b, d, c);
+      case u:
+        return (
+          M(a._context, c.value),
+          [r, a, b, {value: c.value, children: c.children, __pop: ma}]
+        );
     }
   }
-  throw Error('Unsupported server component type: ' + H(a));
+  throw Error('Unsupported server component type: ' + V(a));
 }
-function I(a, c) {
+function na(a, b) {
   var d = a.pingedSegments;
-  d.push(c);
+  d.push(b);
   1 === d.length &&
     setImmediate(function () {
-      return J(a);
+      return oa(a);
     });
 }
-function F(a, c) {
-  var d = {
+function T(a, b, d) {
+  var c = {
     id: a.nextChunkId++,
-    model: c,
+    model: b,
+    context: d,
     ping: function () {
-      return I(a, d);
+      return na(a, c);
     },
   };
-  return d;
+  return c;
 }
-function K(a) {
+function pa(a) {
   return Object.prototype.toString
     .call(a)
     .replace(/^\[object (.*)\]$/, function (a, d) {
       return d;
     });
 }
-function L(a) {
-  var c = JSON.stringify(a);
-  return '"' + a + '"' === c ? a : c;
+function W(a) {
+  var b = JSON.stringify(a);
+  return '"' + a + '"' === b ? a : b;
 }
-function H(a) {
+function V(a) {
   switch (typeof a) {
     case 'string':
       return JSON.stringify(10 >= a.length ? a : a.substr(0, 10) + '...');
     case 'object':
-      if (y(a)) return '[...]';
-      a = K(a);
+      if (C(a)) return '[...]';
+      a = pa(a);
       return 'Object' === a ? '{...}' : a;
     case 'function':
       return 'function';
@@ -118,328 +446,340 @@ function H(a) {
       return String(a);
   }
 }
-function N(a, c) {
-  if (y(a)) {
-    for (var d = '[', b = 0; b < a.length; b++) {
-      0 < b && (d += ', ');
-      if (6 < b) {
+function X(a, b) {
+  if (C(a)) {
+    for (var d = '[', c = 0; c < a.length; c++) {
+      0 < c && (d += ', ');
+      if (6 < c) {
         d += '...';
         break;
       }
-      var e = a[b];
+      var f = a[c];
       d =
-        '' + b === c && 'object' === typeof e && null !== e
-          ? d + N(e)
-          : d + H(e);
+        '' + c === b && 'object' === typeof f && null !== f
+          ? d + X(f)
+          : d + V(f);
     }
     return d + ']';
   }
   d = '{';
-  b = Object.keys(a);
-  for (e = 0; e < b.length; e++) {
-    0 < e && (d += ', ');
-    if (6 < e) {
+  c = Object.keys(a);
+  for (f = 0; f < c.length; f++) {
+    0 < f && (d += ', ');
+    if (6 < f) {
       d += '...';
       break;
     }
-    var f = b[e];
-    d += L(f) + ': ';
-    var k = a[f];
-    d = f === c && 'object' === typeof k && null !== k ? d + N(k) : d + H(k);
+    var g = c[f];
+    d += W(g) + ': ';
+    var k = a[g];
+    d = g === b && 'object' === typeof k && null !== k ? d + X(k) : d + V(k);
   }
   return d + '}';
 }
-function E(a, c, d, b) {
-  switch (b) {
+function ka(a, b, d, c) {
+  switch (c) {
     case r:
       return '$';
-    case w:
-      throw Error('React Lazy Components are not yet supported on the server.');
   }
-  for (; 'object' === typeof b && null !== b && b.$$typeof === r; ) {
-    var e = b;
+  for (
+    ;
+    'object' === typeof c &&
+    null !== c &&
+    (c.$$typeof === r || c.$$typeof === v);
+
+  )
     try {
-      b = G(e.type, e.key, e.ref, e.props);
-    } catch (m) {
-      if ('object' === typeof m && null !== m && 'function' === typeof m.then)
+      switch (c.$$typeof) {
+        case r:
+          var f = c;
+          c = U(f.type, f.key, f.ref, f.props);
+          break;
+        case v:
+          var g = c._init;
+          c = g(c._payload);
+      }
+    } catch (q) {
+      if ('object' === typeof q && null !== q && 'function' === typeof q.then)
         return (
           a.pendingChunks++,
-          (a = F(a, b)),
-          (c = a.ping),
-          m.then(c, c),
+          (a = T(a, c, D)),
+          (d = a.ping),
+          q.then(d, d),
           '@' + a.id.toString(16)
         );
-      O(a, m);
+      Y(a, q);
       a.pendingChunks++;
-      c = a.nextChunkId++;
-      P(a, c, m);
-      return '@' + c.toString(16);
+      d = a.nextChunkId++;
+      Z(a, d, q);
+      return '@' + d.toString(16);
     }
-  }
-  if (null === b) return null;
-  if ('object' === typeof b) {
-    if ((b.$$typeof_rsc || b.$$typeof) === q) {
-      e = b.filepath + '#' + b.name;
-      var f = a.writtenModules,
-        k = f.get(e);
+  if (null === c) return null;
+  if ('object' === typeof c) {
+    if ((c.$$typeof_rsc || c.$$typeof) === p) {
+      f = c.filepath + '#' + c.name;
+      g = a.writtenModules;
+      var k = g.get(f);
       if (void 0 !== k)
-        return c[0] === r && '1' === d
+        return b[0] === r && '1' === d
           ? '@' + k.toString(16)
           : '$' + k.toString(16);
       try {
-        var l = {id: b.filepath, name: b.name};
+        var n = {id: c.filepath, name: c.name};
         a.pendingChunks++;
-        var g = a.nextChunkId++,
-          B = n(l);
-        var C = 'M' + g.toString(16) + ':' + B + '\n';
-        a.completedModuleChunks.push(C);
-        f.set(e, g);
-        return c[0] === r && '1' === d
-          ? '@' + g.toString(16)
-          : '$' + g.toString(16);
-      } catch (m) {
+        var l = a.nextChunkId++,
+          K = m(n);
+        var L = 'M' + l.toString(16) + ':' + K + '\n';
+        a.completedModuleChunks.push(L);
+        g.set(f, l);
+        return b[0] === r && '1' === d
+          ? '@' + l.toString(16)
+          : '$' + l.toString(16);
+      } catch (q) {
         return (
           a.pendingChunks++,
-          (c = a.nextChunkId++),
-          P(a, c, m),
-          '$' + c.toString(16)
+          (d = a.nextChunkId++),
+          Z(a, d, q),
+          '$' + d.toString(16)
+        );
+      }
+    } else {
+      if (c.$$typeof === u)
+        return (
+          (b = c._context._globalName),
+          (c = a.writtenProviders),
+          (d = c.get(d)),
+          void 0 === d &&
+            (a.pendingChunks++,
+            (d = a.nextChunkId++),
+            c.set(b, d),
+            (b = 'P' + d.toString(16) + ':' + b + '\n'),
+            a.completedJSONChunks.push(b)),
+          '$' + d.toString(16)
         );
+      if (c === ma) {
+        a = D;
+        if (null === a)
+          throw Error(
+            'Tried to pop a Context at the root of the app. This is a bug in React.'
+          );
+        d = a.parentValue;
+        a.context._currentValue = d === w ? a.context._defaultValue : d;
+        D = a.parent;
+        return;
       }
     }
-    return b;
+    return c;
   }
-  if ('string' === typeof b)
-    return (a = '$' === b[0] || '@' === b[0] ? '$' + b : b), a;
+  if ('string' === typeof c)
+    return (a = '$' === c[0] || '@' === c[0] ? '$' + c : c), a;
   if (
-    'boolean' === typeof b ||
-    'number' === typeof b ||
-    'undefined' === typeof b
+    'boolean' === typeof c ||
+    'number' === typeof c ||
+    'undefined' === typeof c
   )
-    return b;
-  if ('function' === typeof b) {
+    return c;
+  if ('function' === typeof c) {
     if (/^on[A-Z]/.test(d))
       throw Error(
         'Event handlers cannot be passed to client component props. Remove ' +
-          (L(d) +
+          (W(d) +
             ' from these props if possible: ' +
-            N(c) +
+            X(b) +
             '\nIf you need interactivity, consider converting part of this to a client component.')
       );
     throw Error(
       "Functions cannot be passed directly to client components because they're not serializable. Remove " +
-        (L(d) +
+        (W(d) +
           ' (' +
-          (b.displayName || b.name || 'function') +
+          (c.displayName || c.name || 'function') +
           ') from this object, or avoid the entire object: ' +
-          N(c))
+          X(b))
     );
   }
-  if ('symbol' === typeof b) {
-    l = a.writtenSymbols;
-    g = l.get(b);
-    if (void 0 !== g) return '$' + g.toString(16);
-    g = b.description;
-    if (Symbol.for(g) !== b)
+  if ('symbol' === typeof c) {
+    n = a.writtenSymbols;
+    l = n.get(c);
+    if (void 0 !== l) return '$' + l.toString(16);
+    l = c.description;
+    if (Symbol.for(l) !== c)
       throw Error(
         'Only global symbols received from Symbol.for(...) can be passed to client components. The symbol Symbol.for(' +
-          (b.description + ') cannot be found among global symbols. Remove ') +
-          (L(d) + ' from this object, or avoid the entire object: ' + N(c))
+          (c.description + ') cannot be found among global symbols. Remove ') +
+          (W(d) + ' from this object, or avoid the entire object: ' + X(b))
       );
     a.pendingChunks++;
-    c = a.nextChunkId++;
-    d = n(g);
-    d = 'S' + c.toString(16) + ':' + d + '\n';
-    a.completedModuleChunks.push(d);
-    l.set(b, c);
-    return '$' + c.toString(16);
+    d = a.nextChunkId++;
+    b = m(l);
+    b = 'S' + d.toString(16) + ':' + b + '\n';
+    a.completedModuleChunks.push(b);
+    n.set(c, d);
+    return '$' + d.toString(16);
   }
-  if ('bigint' === typeof b)
+  if ('bigint' === typeof c)
     throw Error(
       'BigInt (' +
-        b +
+        c +
         ') is not yet supported in client component props. Remove ' +
-        (L(d) + ' from this object or use a plain number instead: ' + N(c))
+        (W(d) + ' from this object or use a plain number instead: ' + X(b))
     );
   throw Error(
     'Type ' +
-      typeof b +
+      typeof c +
       ' is not supported in client component props. Remove ' +
-      (L(d) + ' from this object, or avoid the entire object: ' + N(c))
+      (W(d) + ' from this object, or avoid the entire object: ' + X(b))
   );
 }
-function O(a, c) {
+function Y(a, b) {
   a = a.onError;
-  a(c);
+  a(b);
 }
-function Q(a, c) {
+function qa(a, b) {
   null !== a.destination
-    ? ((a.status = 2), a.destination.destroy(c))
-    : ((a.status = 1), (a.fatalError = c));
+    ? ((a.status = 2), a.destination.destroy(b))
+    : ((a.status = 1), (a.fatalError = b));
 }
-function P(a, c, d) {
-  var b = '';
+function Z(a, b, d) {
+  var c = '';
   try {
     if (d instanceof Error) {
-      var e = String(d.message);
-      b = String(d.stack);
-    } else e = 'Error: ' + d;
-  } catch (f) {
-    e = 'An error occurred but serializing the error message failed.';
+      var f = String(d.message);
+      c = String(d.stack);
+    } else f = 'Error: ' + d;
+  } catch (g) {
+    f = 'An error occurred but serializing the error message failed.';
   }
-  d = {message: e, stack: b};
-  c = 'E' + c.toString(16) + ':' + n(d) + '\n';
-  a.completedErrorChunks.push(c);
+  d = {message: f, stack: c};
+  b = 'E' + b.toString(16) + ':' + m(d) + '\n';
+  a.completedErrorChunks.push(b);
 }
-function J(a) {
-  var c = z.current,
-    d = R;
-  z.current = S;
-  R = a.cache;
+function oa(a) {
+  var b = S.current,
+    d = P;
+  S.current = ha;
+  P = a.cache;
   try {
-    var b = a.pingedSegments;
+    var c = a.pingedSegments;
     a.pingedSegments = [];
-    for (var e = 0; e < b.length; e++) {
-      var f = b[e];
+    for (var f = 0; f < c.length; f++) {
+      var g = c[f];
       var k = a;
+      J(g.context);
       try {
         for (
-          var l = f.model;
-          'object' === typeof l && null !== l && l.$$typeof === r;
+          var n = g.model;
+          'object' === typeof n && null !== n && n.$$typeof === r;
 
         ) {
-          var g = l;
-          f.model = l;
-          l = G(g.type, g.key, g.ref, g.props);
+          var l = n;
+          g.model = n;
+          n = U(l.type, l.key, l.ref, l.props);
         }
-        var B = f.id,
-          C = n(l, k.toJSON);
-        var m = 'J' + B.toString(16) + ':' + C + '\n';
-        k.completedJSONChunks.push(m);
-      } catch (p) {
+        var K = g.id,
+          L = m(n, k.toJSON);
+        var q = 'J' + K.toString(16) + ':' + L + '\n';
+        k.completedJSONChunks.push(q);
+      } catch (t) {
         if (
-          'object' === typeof p &&
-          null !== p &&
-          'function' === typeof p.then
+          'object' === typeof t &&
+          null !== t &&
+          'function' === typeof t.then
         ) {
-          var M = f.ping;
-          p.then(M, M);
-        } else O(k, p), P(k, f.id, p);
+          var da = g.ping;
+          t.then(da, da);
+        } else Y(k, t), Z(k, g.id, t);
       }
     }
-    null !== a.destination && T(a, a.destination);
-  } catch (p) {
-    O(a, p), Q(a, p);
+    null !== a.destination && ra(a, a.destination);
+  } catch (t) {
+    Y(a, t), qa(a, t);
   } finally {
-    (z.current = c), (R = d);
+    (S.current = b), (P = d);
   }
 }
-function T(a, c) {
-  'function' === typeof c.cork && c.cork();
+function ra(a, b) {
+  'function' === typeof b.cork && b.cork();
   try {
-    for (var d = a.completedModuleChunks, b = 0; b < d.length; b++)
-      if ((a.pendingChunks--, !c.write(d[b]))) {
+    for (var d = a.completedModuleChunks, c = 0; c < d.length; c++)
+      if ((a.pendingChunks--, !b.write(d[c]))) {
         a.destination = null;
-        b++;
+        c++;
         break;
       }
-    d.splice(0, b);
-    var e = a.completedJSONChunks;
-    for (b = 0; b < e.length; b++)
-      if ((a.pendingChunks--, !c.write(e[b]))) {
+    d.splice(0, c);
+    var f = a.completedJSONChunks;
+    for (c = 0; c < f.length; c++)
+      if ((a.pendingChunks--, !b.write(f[c]))) {
         a.destination = null;
-        b++;
+        c++;
         break;
       }
-    e.splice(0, b);
-    var f = a.completedErrorChunks;
-    for (b = 0; b < f.length; b++)
-      if ((a.pendingChunks--, !c.write(f[b]))) {
+    f.splice(0, c);
+    var g = a.completedErrorChunks;
+    for (c = 0; c < g.length; c++)
+      if ((a.pendingChunks--, !b.write(g[c]))) {
         a.destination = null;
-        b++;
+        c++;
         break;
       }
-    f.splice(0, b);
+    g.splice(0, c);
   } finally {
-    'function' === typeof c.uncork && c.uncork();
+    'function' === typeof b.uncork && b.uncork();
   }
-  'function' === typeof c.flush && c.flush();
-  0 === a.pendingChunks && c.end();
+  'function' === typeof b.flush && b.flush();
+  0 === a.pendingChunks && b.end();
 }
-function U(a) {
+function sa(a) {
   setImmediate(function () {
-    return J(a);
+    return oa(a);
   });
 }
-function V(a, c) {
-  if (1 === a.status) (a.status = 2), c.destroy(a.fatalError);
-  else if (2 !== a.status) {
-    a.destination = c;
+function ta(a, b) {
+  if (1 === a.status) (a.status = 2), b.destroy(a.fatalError);
+  else if (2 !== a.status && null === a.destination) {
+    a.destination = b;
     try {
-      T(a, c);
+      ra(a, b);
     } catch (d) {
-      O(a, d), Q(a, d);
+      Y(a, d), qa(a, d);
     }
   }
 }
-function W() {
-  throw Error('This Hook is not supported in Server Components.');
-}
-function X() {
-  if (!R)
-    throw Error('Refreshing the cache is not supported in Server Components.');
+function la(a) {
+  if (a) {
+    var b = D;
+    J(null);
+    for (var d = 0; d < a.length; d++) {
+      var c = a[d],
+        f = c[0];
+      c = c[1];
+      R[f] || (R[f] = e.createServerContext(f, w));
+      M(R[f], c);
+    }
+    a = D;
+    J(b);
+    return a;
+  }
+  return null;
 }
-var R = null,
-  S = {
-    useMemo: function (a) {
-      return a();
-    },
-    useCallback: function (a) {
-      return a;
-    },
-    useDebugValue: function () {},
-    useDeferredValue: W,
-    useTransition: W,
-    getCacheForType: function (a) {
-      if (!R)
-        throw Error('Reading the cache is only supported while rendering.');
-      var c = R.get(a);
-      void 0 === c && ((c = a()), R.set(a, c));
-      return c;
-    },
-    readContext: W,
-    useContext: W,
-    useReducer: W,
-    useRef: W,
-    useState: W,
-    useInsertionEffect: W,
-    useLayoutEffect: W,
-    useImperativeHandle: W,
-    useEffect: W,
-    useId: W,
-    useMutableSource: W,
-    useSyncExternalStore: W,
-    useCacheRefresh: function () {
-      return X;
-    },
-  };
-function Y(a, c) {
+function ua(a, b) {
   return function () {
-    return V(c, a);
+    return ta(b, a);
   };
 }
-exports.renderToPipeableStream = function (a, c) {
-  var d = D(a, {}, c ? c.onError : void 0),
-    b = !1;
-  U(d);
+exports.renderToPipeableStream = function (a, b, d) {
+  var c = ja(a, {}, b ? b.onError : void 0, d),
+    f = !1;
+  sa(c);
   return {
     pipe: function (a) {
-      if (b)
+      if (f)
         throw Error(
           'React currently only supports piping to one writable stream.'
         );
-      b = !0;
-      V(d, a);
-      a.on('drain', Y(a, d));
+      f = !0;
+      ta(c, a);
+      a.on('drain', ua(a, c));
       return a;
     },
   };
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.development.js b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.development.js
index 3a84c2aadc..0d9b45c333 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.development.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.development.js
@@ -14,6 +14,8 @@ if (process.env.NODE_ENV !== 'production') {
   (function () {
     'use strict';
 
+    var React = require('react');
+
     function createStringDecoder() {
       return new TextDecoder();
     }
@@ -94,45 +96,26 @@ if (process.env.NODE_ENV !== 'production') {
     // ATTENTION
     // When adding new symbols to this file,
     // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-    // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-    // nor polyfill, then a plain number is used for performance.
-    var REACT_ELEMENT_TYPE = 0xeac7;
-    var REACT_PORTAL_TYPE = 0xeaca;
-    var REACT_FRAGMENT_TYPE = 0xeacb;
-    var REACT_STRICT_MODE_TYPE = 0xeacc;
-    var REACT_PROFILER_TYPE = 0xead2;
-    var REACT_PROVIDER_TYPE = 0xeacd;
-    var REACT_CONTEXT_TYPE = 0xeace;
-    var REACT_FORWARD_REF_TYPE = 0xead0;
-    var REACT_SUSPENSE_TYPE = 0xead1;
-    var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-    var REACT_MEMO_TYPE = 0xead3;
-    var REACT_LAZY_TYPE = 0xead4;
-    var REACT_SCOPE_TYPE = 0xead7;
-    var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-    var REACT_OFFSCREEN_TYPE = 0xeae2;
-    var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-    var REACT_CACHE_TYPE = 0xeae4;
-
-    if (typeof Symbol === 'function' && Symbol.for) {
-      var symbolFor = Symbol.for;
-      REACT_ELEMENT_TYPE = symbolFor('react.element');
-      REACT_PORTAL_TYPE = symbolFor('react.portal');
-      REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-      REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-      REACT_PROFILER_TYPE = symbolFor('react.profiler');
-      REACT_PROVIDER_TYPE = symbolFor('react.provider');
-      REACT_CONTEXT_TYPE = symbolFor('react.context');
-      REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-      REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-      REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-      REACT_MEMO_TYPE = symbolFor('react.memo');
-      REACT_LAZY_TYPE = symbolFor('react.lazy');
-      REACT_SCOPE_TYPE = symbolFor('react.scope');
-      REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-      REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-      REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-      REACT_CACHE_TYPE = symbolFor('react.cache');
+    // The Symbol used to tag the ReactElement-like types.
+    var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+    var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+    var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+      'react.default_value'
+    );
+
+    var ReactSharedInternals =
+      React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+    var ContextRegistry = ReactSharedInternals.ContextRegistry;
+    function getOrCreateServerContext(globalName) {
+      if (!ContextRegistry[globalName]) {
+        ContextRegistry[globalName] = React.createServerContext(
+          globalName,
+          REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+        );
+      }
+
+      return ContextRegistry[globalName];
     }
 
     var PENDING = 0;
@@ -399,6 +382,16 @@ if (process.env.NODE_ENV !== 'production') {
         resolveModelChunk(chunk, model);
       }
     }
+    function resolveProvider(response, id, contextName) {
+      var chunks = response._chunks;
+      chunks.set(
+        id,
+        createInitializedChunk(
+          response,
+          getOrCreateServerContext(contextName).Provider
+        )
+      );
+    }
     function resolveModule(response, id, model) {
       var chunks = response._chunks;
       var chunk = chunks.get(id);
@@ -467,6 +460,11 @@ if (process.env.NODE_ENV !== 'production') {
           return;
         }
 
+        case 'P': {
+          resolveProvider(response, id, text);
+          return;
+        }
+
         case 'S': {
           resolveSymbol(response, id, JSON.parse(text));
           return;
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.production.min.js b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.production.min.js
index 0b7d3cce1c..d303d032b8 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.production.min.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/cjs/react-server-dom-vite.production.min.js
@@ -8,44 +8,46 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';
-var g = {stream: !0},
-  h = {__INJECTED_CLIENT_IMPORTERS__: null};
-'undefined' !== typeof jest && (global.allClientComponents = h);
-function k(a) {
-  var b = h[a];
+var g = require('react'),
+  h = {stream: !0},
+  l = {__INJECTED_CLIENT_IMPORTERS__: null};
+'undefined' !== typeof jest && (global.allClientComponents = l);
+function m(a) {
+  var b = l[a];
   return b
     ? 'function' === typeof b
       ? b()
       : Promise.resolve(b)
     : Promise.reject(Error('Could not find client component ' + a));
 }
-var m = new Map();
-function n(a) {
+var n = new Map();
+function p(a) {
   function b(a) {
-    m.set(c, a);
+    n.set(c, a);
     return a;
   }
   var c = a.id;
-  m.has(c) || ((a = k(c)), b(a), a.then(b, b));
+  n.has(c) || ((a = m(c)), b(a), a.then(b, b));
 }
-var p = 60103,
-  q = 60116;
-if ('function' === typeof Symbol && Symbol.for) {
-  var r = Symbol.for;
-  p = r('react.element');
-  q = r('react.lazy');
+var q = Symbol.for('react.element'),
+  r = Symbol.for('react.lazy'),
+  t = Symbol.for('react.default_value'),
+  v = g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;
+function w(a) {
+  v[a] || (v[a] = g.createServerContext(a, t));
+  return v[a];
 }
-function u(a, b, c) {
+function x(a, b, c) {
   this._status = a;
   this._value = b;
   this._response = c;
 }
-u.prototype.then = function (a) {
+x.prototype.then = function (a) {
   0 === this._status
     ? (null === this._value && (this._value = []), this._value.push(a))
     : a();
 };
-function v(a) {
+function y(a) {
   switch (a._status) {
     case 3:
       return a._value;
@@ -56,7 +58,7 @@ function v(a) {
     case 2:
       var c = a._value;
       b = c.name;
-      c = m.get(c.id);
+      c = n.get(c.id);
       if (!c || c instanceof Promise || c instanceof Error) throw c;
       b = c[b];
       a._status = 3;
@@ -67,56 +69,56 @@ function v(a) {
       throw a._value;
   }
 }
-function w() {
-  var a = x(this, 0);
-  return v(a);
+function z() {
+  var a = A(this, 0);
+  return y(a);
 }
-function y(a, b) {
-  return new u(3, b, a);
+function B(a, b) {
+  return new x(3, b, a);
 }
-function z(a) {
+function C(a) {
   if (null !== a) for (var b = 0; b < a.length; b++) (0, a[b])();
 }
-function A(a, b) {
+function D(a, b) {
   if (0 === a._status) {
     var c = a._value;
     a._status = 4;
     a._value = b;
-    z(c);
+    C(c);
   }
 }
-function B(a, b) {
+function E(a, b) {
   a._chunks.forEach(function (a) {
-    A(a, b);
+    D(a, b);
   });
 }
-function x(a, b) {
+function A(a, b) {
   var c = a._chunks,
     d = c.get(b);
-  d || ((d = new u(0, null, a)), c.set(b, d));
+  d || ((d = new x(0, null, a)), c.set(b, d));
   return d;
 }
-function C(a, b, c) {
+function F(a, b, c) {
   switch (c[0]) {
     case '$':
-      if ('$' === c) return p;
+      if ('$' === c) return q;
       if ('$' === c[1] || '@' === c[1]) return c.substring(1);
       b = parseInt(c.substring(1), 16);
-      a = x(a, b);
-      return v(a);
+      a = A(a, b);
+      return y(a);
     case '@':
       return (
         (b = parseInt(c.substring(1), 16)),
-        (a = x(a, b)),
-        {$$typeof: q, _payload: a, _init: v}
+        (a = A(a, b)),
+        {$$typeof: r, _payload: a, _init: y}
       );
   }
   return c;
 }
-function D(a) {
-  B(a, Error('Connection closed.'));
+function G(a) {
+  E(a, Error('Connection closed.'));
 }
-function E(a, b) {
+function H(a, b) {
   if ('' !== b) {
     var c = b[0],
       d = b.indexOf(':', 1),
@@ -127,29 +129,32 @@ function E(a, b) {
         d = a._chunks;
         (c = d.get(e))
           ? 0 === c._status &&
-            ((a = c._value), (c._status = 1), (c._value = b), z(a))
-          : d.set(e, new u(1, b, a));
+            ((a = c._value), (c._status = 1), (c._value = b), C(a))
+          : d.set(e, new x(1, b, a));
         break;
       case 'M':
         d = a._chunks;
         c = d.get(e);
         b = JSON.parse(b, a._fromJSON);
-        n(b);
+        p(b);
         c
           ? 0 === c._status &&
-            ((a = c._value), (c._status = 2), (c._value = b), z(a))
-          : d.set(e, new u(2, b, a));
+            ((a = c._value), (c._status = 2), (c._value = b), C(a))
+          : d.set(e, new x(2, b, a));
+        break;
+      case 'P':
+        a._chunks.set(e, B(a, w(b).Provider));
         break;
       case 'S':
         b = JSON.parse(b);
-        a._chunks.set(e, y(a, Symbol.for(b)));
+        a._chunks.set(e, B(a, Symbol.for(b)));
         break;
       case 'E':
         c = JSON.parse(b);
         b = Error(c.message);
         b.stack = c.stack;
         c = a._chunks;
-        (d = c.get(e)) ? A(d, b) : c.set(e, new u(4, b, a));
+        (d = c.get(e)) ? D(d, b) : c.set(e, new x(4, b, a));
         break;
       default:
         throw Error(
@@ -158,15 +163,15 @@ function E(a, b) {
     }
   }
 }
-function F(a) {
+function I(a) {
   return function (b, c) {
     return 'string' === typeof c
-      ? C(a, this, c)
+      ? F(a, this, c)
       : 'object' === typeof c && null !== c
       ? ((b =
-          c[0] === p
+          c[0] === q
             ? {
-                $$typeof: p,
+                $$typeof: q,
                 type: c[1],
                 key: c[2],
                 ref: null,
@@ -178,60 +183,60 @@ function F(a) {
       : c;
   };
 }
-function G() {
+function J() {
   var a = new TextDecoder();
-  a = {_chunks: new Map(), readRoot: w, _partialRow: '', _stringDecoder: a};
-  a._fromJSON = F(a);
+  a = {_chunks: new Map(), readRoot: z, _partialRow: '', _stringDecoder: a};
+  a._fromJSON = I(a);
   return a;
 }
-function H(a, b) {
+function K(a, b) {
   function c(b) {
-    var l = b.value;
-    if (b.done) D(a);
+    var k = b.value;
+    if (b.done) G(a);
     else {
-      b = l;
-      l = a._stringDecoder;
+      b = k;
+      k = a._stringDecoder;
       for (var f = b.indexOf(10); -1 < f; ) {
-        var I = a._partialRow;
-        var t = b.subarray(0, f);
-        t = l.decode(t);
-        E(a, I + t);
+        var L = a._partialRow;
+        var u = b.subarray(0, f);
+        u = k.decode(u);
+        H(a, L + u);
         a._partialRow = '';
         b = b.subarray(f + 1);
         f = b.indexOf(10);
       }
-      a._partialRow += l.decode(b, g);
+      a._partialRow += k.decode(b, h);
       return e.read().then(c, d);
     }
   }
   function d(b) {
-    B(a, b);
+    E(a, b);
   }
   var e = b.getReader();
   e.read().then(c, d);
 }
 exports.createFromFetch = function (a) {
-  var b = G();
+  var b = J();
   a.then(
     function (a) {
-      H(b, a.body);
+      K(b, a.body);
     },
     function (a) {
-      B(b, a);
+      E(b, a);
     }
   );
   return b;
 };
 exports.createFromReadableStream = function (a) {
-  var b = G();
-  H(b, a);
+  var b = J();
+  K(b, a);
   return b;
 };
 exports.createFromXHR = function (a) {
   function b() {
     for (var b = a.responseText, c = e, f = b.indexOf('\n', c); -1 < f; )
       (c = d._partialRow + b.substring(c, f)),
-        E(d, c),
+        H(d, c),
         (d._partialRow = ''),
         (c = f + 1),
         (f = b.indexOf('\n', c));
@@ -239,14 +244,14 @@ exports.createFromXHR = function (a) {
     e = b.length;
   }
   function c() {
-    B(d, new TypeError('Network error'));
+    E(d, new TypeError('Network error'));
   }
-  var d = G(),
+  var d = J(),
     e = 0;
   a.addEventListener('progress', b);
   a.addEventListener('load', function () {
     b();
-    D(d);
+    G(d);
   });
   a.addEventListener('error', c);
   a.addEventListener('abort', c);
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js b/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js
index 31349a3b2d..f1deccd27f 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js
@@ -8,7 +8,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from 'react';
+import {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  createServerContext,
+} from 'react';
 
 var ReactSharedInternals = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
@@ -57,9 +60,68 @@ function printWarning(level, format, args) {
 function scheduleWork(callback) {
   callback();
 }
+var VIEW_SIZE = 512;
+var currentView = null;
+var writtenBytes = 0;
+function beginWriting(destination) {
+  currentView = new Uint8Array(VIEW_SIZE);
+  writtenBytes = 0;
+}
 function writeChunk(destination, chunk) {
-  destination.enqueue(chunk);
-  return destination.desiredSize > 0;
+  if (chunk.length === 0) {
+    return;
+  }
+
+  if (chunk.length > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
+    // one that is cached by the streaming renderer. We will enqueu
+    // it directly and expect it is not re-used
+    if (writtenBytes > 0) {
+      destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+
+    destination.enqueue(chunk);
+    return;
+  }
+
+  var bytesToWrite = chunk;
+  var allowableBytes = currentView.length - writtenBytes;
+
+  if (allowableBytes < bytesToWrite.length) {
+    // this chunk would overflow the current view. We enqueue a full view
+    // and start a new view with the remaining chunk
+    if (allowableBytes === 0) {
+      // the current view is already full, send it
+      destination.enqueue(currentView);
+    } else {
+      // fill up the current view and apply the remaining chunk bytes
+      // to a new view.
+      currentView.set(bytesToWrite.subarray(0, allowableBytes), writtenBytes); // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
+
+      destination.enqueue(currentView);
+      bytesToWrite = bytesToWrite.subarray(allowableBytes);
+    }
+
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+
+  currentView.set(bytesToWrite, writtenBytes);
+  writtenBytes += bytesToWrite.length;
+}
+function writeChunkAndReturn(destination, chunk) {
+  writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more
+
+  return true;
+}
+function completeWriting(destination) {
+  if (currentView && writtenBytes > 0) {
+    destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+    currentView = null;
+    writtenBytes = 0;
+  }
 }
 function close(destination) {
   destination.close();
@@ -68,6 +130,9 @@ var textEncoder = new TextEncoder();
 function stringToChunk(content) {
   return textEncoder.encode(content);
 }
+function stringToPrecomputedChunk(content) {
+  return textEncoder.encode(content);
+}
 function closeWithError(destination, error) {
   if (typeof destination.error === 'function') {
     // $FlowFixMe: This is an Error object or the destination accepts other types.
@@ -108,6 +173,10 @@ function processModuleChunk(request, id, moduleMetaData) {
   var row = serializeRowHeader('M', id) + json + '\n';
   return stringToChunk(row);
 }
+function processProviderChunk(request, id, contextName) {
+  var row = serializeRowHeader('P', id) + contextName + '\n';
+  return stringToChunk(row);
+}
 function processSymbolChunk(request, id, name) {
   var json = stringify(name);
   var row = serializeRowHeader('S', id) + json + '\n';
@@ -132,53 +201,1013 @@ function resolveModuleMetaData(config, moduleReference) {
 // ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var REACT_ELEMENT_TYPE = 0xeac7;
-var REACT_PORTAL_TYPE = 0xeaca;
-var REACT_FRAGMENT_TYPE = 0xeacb;
-var REACT_STRICT_MODE_TYPE = 0xeacc;
-var REACT_PROFILER_TYPE = 0xead2;
-var REACT_PROVIDER_TYPE = 0xeacd;
-var REACT_CONTEXT_TYPE = 0xeace;
-var REACT_FORWARD_REF_TYPE = 0xead0;
-var REACT_SUSPENSE_TYPE = 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-var REACT_MEMO_TYPE = 0xead3;
-var REACT_LAZY_TYPE = 0xead4;
-var REACT_SCOPE_TYPE = 0xead7;
-var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-var REACT_OFFSCREEN_TYPE = 0xeae2;
-var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-var REACT_CACHE_TYPE = 0xeae4;
-
-if (typeof Symbol === 'function' && Symbol.for) {
-  var symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-  REACT_PROFILER_TYPE = symbolFor('react.profiler');
-  REACT_PROVIDER_TYPE = symbolFor('react.provider');
-  REACT_CONTEXT_TYPE = symbolFor('react.context');
-  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-  REACT_MEMO_TYPE = symbolFor('react.memo');
-  REACT_LAZY_TYPE = symbolFor('react.lazy');
-  REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  REACT_CACHE_TYPE = symbolFor('react.cache');
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+  'react.default_value'
+);
+
+// A reserved attribute.
+// It is handled by React separately and shouldn't be written to the DOM.
+var RESERVED = 0; // A simple string attribute.
+// Attributes that aren't in the filter are presumed to have this type.
+
+var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
+// "enumerated" attributes with "true" and "false" as possible values.
+// When true, it should be set to a "true" string.
+// When false, it should be set to a "false" string.
+
+var BOOLEANISH_STRING = 2; // A real boolean attribute.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+
+var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+// For any other value, should be present with that value.
+
+var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
+// When falsy, it should be removed.
+
+var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
+// When falsy, it should be removed.
+
+var POSITIVE_NUMERIC = 6;
+
+function PropertyInfoRecord(
+  name,
+  type,
+  mustUseProperty,
+  attributeName,
+  attributeNamespace,
+  sanitizeURL,
+  removeEmptyString
+) {
+  this.acceptsBooleans =
+    type === BOOLEANISH_STRING ||
+    type === BOOLEAN ||
+    type === OVERLOADED_BOOLEAN;
+  this.attributeName = attributeName;
+  this.attributeNamespace = attributeNamespace;
+  this.mustUseProperty = mustUseProperty;
+  this.propertyName = name;
+  this.type = type;
+  this.sanitizeURL = sanitizeURL;
+  this.removeEmptyString = removeEmptyString;
+} // When adding attributes to this list, be sure to also add them to
+// the `possibleStandardNames` module to ensure casing and incorrect
+// name warnings.
+
+var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
+
+var reservedProps = [
+  'children',
+  'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
+  // elements (not just inputs). Now that ReactDOMInput assigns to the
+  // defaultValue property -- do we need this?
+  'defaultValue',
+  'defaultChecked',
+  'innerHTML',
+  'suppressContentEditableWarning',
+  'suppressHydrationWarning',
+  'style',
+];
+
+{
+  reservedProps.push('innerText', 'textContent');
 }
 
+reservedProps.forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    RESERVED,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // A few React string attributes have a different name.
+// This is a mapping from React prop names to the attribute names.
+
+[
+  ['acceptCharset', 'accept-charset'],
+  ['className', 'class'],
+  ['htmlFor', 'for'],
+  ['httpEquiv', 'http-equiv'],
+].forEach(function (_ref) {
+  var name = _ref[0],
+    attributeName = _ref[1];
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are "enumerated" HTML attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+
+['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (
+  name
+) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEANISH_STRING,
+    false, // mustUseProperty
+    name.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are "enumerated" SVG attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+// Since these are SVG attributes, their attribute names are case-sensitive.
+
+[
+  'autoReverse',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEANISH_STRING,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML boolean attributes.
+
+[
+  'allowFullScreen',
+  'async', // Note: there is a special case that prevents it from being written to the DOM
+  // on the client side because the browsers are inconsistent. Instead we call focus().
+  'autoFocus',
+  'autoPlay',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'disablePictureInPicture',
+  'disableRemotePlayback',
+  'formNoValidate',
+  'hidden',
+  'loop',
+  'noModule',
+  'noValidate',
+  'open',
+  'playsInline',
+  'readOnly',
+  'required',
+  'reversed',
+  'scoped',
+  'seamless', // Microdata
+  'itemScope',
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEAN,
+    false, // mustUseProperty
+    name.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are the few React props that we set as DOM properties
+// rather than attributes. These are all booleans.
+
+[
+  'checked', // Note: `option.selected` is not updated if `select.multiple` is
+  // disabled with `removeAttribute`. We have special logic for handling this.
+  'multiple',
+  'muted',
+  'selected', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEAN,
+    true, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML attributes that are "overloaded booleans": they behave like
+// booleans, but can also accept a string value.
+
+[
+  'capture',
+  'download', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    OVERLOADED_BOOLEAN,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML attributes that must be positive numbers.
+
+[
+  'cols',
+  'rows',
+  'size',
+  'span', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    POSITIVE_NUMERIC,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML attributes that must be numbers.
+
+['rowSpan', 'start'].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    NUMERIC,
+    false, // mustUseProperty
+    name.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+});
+var CAMELIZE = /[\-\:]([a-z])/g;
+
+var capitalize = function (token) {
+  return token[1].toUpperCase();
+}; // This is a list of all SVG attributes that need special casing, namespacing,
+// or boolean value assignment. Regular attributes that just accept strings
+// and have the same names are omitted, just like in the HTML attribute filter.
+// Some of these attributes can be hard to find. This list was created by
+// scraping the MDN documentation.
+
+[
+  'accent-height',
+  'alignment-baseline',
+  'arabic-form',
+  'baseline-shift',
+  'cap-height',
+  'clip-path',
+  'clip-rule',
+  'color-interpolation',
+  'color-interpolation-filters',
+  'color-profile',
+  'color-rendering',
+  'dominant-baseline',
+  'enable-background',
+  'fill-opacity',
+  'fill-rule',
+  'flood-color',
+  'flood-opacity',
+  'font-family',
+  'font-size',
+  'font-size-adjust',
+  'font-stretch',
+  'font-style',
+  'font-variant',
+  'font-weight',
+  'glyph-name',
+  'glyph-orientation-horizontal',
+  'glyph-orientation-vertical',
+  'horiz-adv-x',
+  'horiz-origin-x',
+  'image-rendering',
+  'letter-spacing',
+  'lighting-color',
+  'marker-end',
+  'marker-mid',
+  'marker-start',
+  'overline-position',
+  'overline-thickness',
+  'paint-order',
+  'panose-1',
+  'pointer-events',
+  'rendering-intent',
+  'shape-rendering',
+  'stop-color',
+  'stop-opacity',
+  'strikethrough-position',
+  'strikethrough-thickness',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'text-anchor',
+  'text-decoration',
+  'text-rendering',
+  'underline-position',
+  'underline-thickness',
+  'unicode-bidi',
+  'unicode-range',
+  'units-per-em',
+  'v-alphabetic',
+  'v-hanging',
+  'v-ideographic',
+  'v-mathematical',
+  'vector-effect',
+  'vert-adv-y',
+  'vert-origin-x',
+  'vert-origin-y',
+  'word-spacing',
+  'writing-mode',
+  'xmlns:xlink',
+  'x-height', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName,
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // String SVG attributes with the xlink namespace.
+
+[
+  'xlink:actuate',
+  'xlink:arcrole',
+  'xlink:role',
+  'xlink:show',
+  'xlink:title',
+  'xlink:type', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName,
+    'http://www.w3.org/1999/xlink',
+    false, // sanitizeURL
+    false
+  );
+}); // String SVG attributes with the xml namespace.
+
+[
+  'xml:base',
+  'xml:lang',
+  'xml:space', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName,
+    'http://www.w3.org/XML/1998/namespace',
+    false, // sanitizeURL
+    false
+  );
+}); // These attribute exists both in HTML and SVG.
+// The attribute name is case-sensitive in SVG so we can't just use
+// the React name like we do for attributes that exist only in HTML.
+
+['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(
+    attributeName,
+    STRING,
+    false, // mustUseProperty
+    attributeName.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These attributes accept URLs. These must not allow javascript: URLS.
+// These will also need to accept Trusted Types object in the future.
+
+var xlinkHref = 'xlinkHref';
+properties[xlinkHref] = new PropertyInfoRecord(
+  'xlinkHref',
+  STRING,
+  false, // mustUseProperty
+  'xlink:href',
+  'http://www.w3.org/1999/xlink',
+  true, // sanitizeURL
+  false
+);
+['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(
+    attributeName,
+    STRING,
+    false, // mustUseProperty
+    attributeName.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    true, // sanitizeURL
+    true
+  );
+});
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var isUnitlessNumber = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridArea: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+};
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+
+var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+
+Object.keys(isUnitlessNumber).forEach(function (prop) {
+  prefixes.forEach(function (prefix) {
+    isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+  });
+});
+
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
 function isArray(a) {
   return isArrayImpl(a);
 }
 
+var startInlineScript = stringToPrecomputedChunk('<script>');
+var endInlineScript = stringToPrecomputedChunk('</script>');
+var startScriptSrc = stringToPrecomputedChunk('<script src="');
+var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+var endAsyncScript = stringToPrecomputedChunk('" async=""></script>'); // Allows us to keep track of what we've already written so we can refer back to it.
+
+var textSeparator = stringToPrecomputedChunk('<!-- -->');
+
+var styleAttributeStart = stringToPrecomputedChunk(' style="');
+var styleAssign = stringToPrecomputedChunk(':');
+var styleSeparator = stringToPrecomputedChunk(';');
+
+var attributeSeparator = stringToPrecomputedChunk(' ');
+var attributeAssign = stringToPrecomputedChunk('="');
+var attributeEnd = stringToPrecomputedChunk('"');
+var attributeEmptyString = stringToPrecomputedChunk('=""');
+
+var endOfStartTag = stringToPrecomputedChunk('>');
+var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
+
+var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+var leadingNewline = stringToPrecomputedChunk('\n');
+
+var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
+var endTag1 = stringToPrecomputedChunk('</');
+var endTag2 = stringToPrecomputedChunk('>');
+// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+// display. It's never visible to users. We use the template tag because it can be used in every
+// type of parent. <script> tags also work in every other tag except <colgroup>.
+
+var placeholder1 = stringToPrecomputedChunk('<template id="');
+var placeholder2 = stringToPrecomputedChunk('"></template>');
+
+var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+var startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+  '<!--$?--><template id="'
+);
+var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
+var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
+var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+var startSegmentHTML2 = stringToPrecomputedChunk('">');
+var endSegmentHTML = stringToPrecomputedChunk('</div>');
+var startSegmentSVG = stringToPrecomputedChunk(
+  '<svg aria-hidden="true" style="display:none" id="'
+);
+var startSegmentSVG2 = stringToPrecomputedChunk('">');
+var endSegmentSVG = stringToPrecomputedChunk('</svg>');
+var startSegmentMathML = stringToPrecomputedChunk(
+  '<math aria-hidden="true" style="display:none" id="'
+);
+var startSegmentMathML2 = stringToPrecomputedChunk('">');
+var endSegmentMathML = stringToPrecomputedChunk('</math>');
+var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
+var startSegmentTable2 = stringToPrecomputedChunk('">');
+var endSegmentTable = stringToPrecomputedChunk('</table>');
+var startSegmentTableBody = stringToPrecomputedChunk(
+  '<table hidden><tbody id="'
+);
+var startSegmentTableBody2 = stringToPrecomputedChunk('">');
+var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
+var startSegmentTableRow = stringToPrecomputedChunk('<table hidden><tr id="');
+var startSegmentTableRow2 = stringToPrecomputedChunk('">');
+var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
+var startSegmentColGroup = stringToPrecomputedChunk(
+  '<table hidden><colgroup id="'
+);
+var startSegmentColGroup2 = stringToPrecomputedChunk('">');
+var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
+// The following code is the source scripts that we then minify and inline below,
+// with renamed function names that we hope don't collide:
+// const COMMENT_NODE = 8;
+// const SUSPENSE_START_DATA = '$';
+// const SUSPENSE_END_DATA = '/$';
+// const SUSPENSE_PENDING_START_DATA = '$?';
+// const SUSPENSE_FALLBACK_START_DATA = '$!';
+//
+// function clientRenderBoundary(suspenseBoundaryID) {
+//   // Find the fallback's first element.
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   if (!suspenseIdNode) {
+//     // The user must have already navigated away from this tree.
+//     // E.g. because the parent was hydrated.
+//     return;
+//   }
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
+//   // Tag it to be client rendered.
+//   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+//   // Tell React to retry it if the parent already hydrated.
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeBoundary(suspenseBoundaryID, contentID) {
+//   // Find the fallback's first element.
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   const contentNode = document.getElementById(contentID);
+//   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
+//   // This might also help by not causing recalcing each time we move a child from here to the target.
+//   contentNode.parentNode.removeChild(contentNode);
+//   if (!suspenseIdNode) {
+//     // The user must have already navigated away from this tree.
+//     // E.g. because the parent was hydrated. That's fine there's nothing to do
+//     // but we have to make sure that we already deleted the container node.
+//     return;
+//   }
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
+//
+//   // Clear all the existing children. This is complicated because
+//   // there can be embedded Suspense boundaries in the fallback.
+//   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
+//   // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+//   // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+//   const parentInstance = suspenseNode.parentNode;
+//   let node = suspenseNode.nextSibling;
+//   let depth = 0;
+//   do {
+//     if (node && node.nodeType === COMMENT_NODE) {
+//       const data = node.data;
+//       if (data === SUSPENSE_END_DATA) {
+//         if (depth === 0) {
+//           break;
+//         } else {
+//           depth--;
+//         }
+//       } else if (
+//         data === SUSPENSE_START_DATA ||
+//         data === SUSPENSE_PENDING_START_DATA ||
+//         data === SUSPENSE_FALLBACK_START_DATA
+//       ) {
+//         depth++;
+//       }
+//     }
+//
+//     const nextNode = node.nextSibling;
+//     parentInstance.removeChild(node);
+//     node = nextNode;
+//   } while (node);
+//
+//   const endOfBoundary = node;
+//
+//   // Insert all the children from the contentNode between the start and end of suspense boundary.
+//   while (contentNode.firstChild) {
+//     parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+//   }
+//   suspenseNode.data = SUSPENSE_START_DATA;
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeSegment(containerID, placeholderID) {
+//   const segmentContainer = document.getElementById(containerID);
+//   const placeholderNode = document.getElementById(placeholderID);
+//   // We always expect both nodes to exist here because, while we might
+//   // have navigated away from the main tree, we still expect the detached
+//   // tree to exist.
+//   segmentContainer.parentNode.removeChild(segmentContainer);
+//   while (segmentContainer.firstChild) {
+//     placeholderNode.parentNode.insertBefore(
+//       segmentContainer.firstChild,
+//       placeholderNode,
+//     );
+//   }
+//   placeholderNode.parentNode.removeChild(placeholderNode);
+// }
+
+var completeSegmentFunction =
+  'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
+var completeBoundaryFunction =
+  'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
+var clientRenderFunction =
+  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+var completeSegmentScript1Full = stringToPrecomputedChunk(
+  completeSegmentFunction + ';$RS("'
+);
+var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
+var completeSegmentScript2 = stringToPrecomputedChunk('","');
+var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+var completeBoundaryScript1Full = stringToPrecomputedChunk(
+  completeBoundaryFunction + ';$RC("'
+);
+var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
+var completeBoundaryScript2 = stringToPrecomputedChunk('","');
+var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
+var clientRenderScript1Full = stringToPrecomputedChunk(
+  clientRenderFunction + ';$RX("'
+);
+var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+var clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+
+var rendererSigil;
+
+{
+  // Use this to detect multiple renderers using the same context
+  rendererSigil = {};
+} // Used to store the parent path of all context overrides in a shared linked list.
+// Forming a reverse tree.
+
+var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
+// This global (actually thread local) state represents what state all those "current",
+// fields are currently in.
+
+var currentActiveSnapshot = null;
+
+function popNode(prev) {
+  {
+    prev.context._currentValue = prev.parentValue;
+  }
+}
+
+function pushNode(next) {
+  {
+    next.context._currentValue = next.value;
+  }
+}
+
+function popToNearestCommonAncestor(prev, next) {
+  if (prev === next);
+  else {
+    popNode(prev);
+    var parentPrev = prev.parent;
+    var parentNext = next.parent;
+
+    if (parentPrev === null) {
+      if (parentNext !== null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+      }
+    } else {
+      if (parentNext === null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+      }
+
+      popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+
+      pushNode(next);
+    }
+  }
+}
+
+function popAllPrevious(prev) {
+  popNode(prev);
+  var parentPrev = prev.parent;
+
+  if (parentPrev !== null) {
+    popAllPrevious(parentPrev);
+  }
+}
+
+function pushAllNext(next) {
+  var parentNext = next.parent;
+
+  if (parentNext !== null) {
+    pushAllNext(parentNext);
+  }
+
+  pushNode(next);
+}
+
+function popPreviousToCommonLevel(prev, next) {
+  popNode(prev);
+  var parentPrev = prev.parent;
+
+  if (parentPrev === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  }
+
+  if (parentPrev.depth === next.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(parentPrev, next);
+  } else {
+    // We must still be deeper.
+    popPreviousToCommonLevel(parentPrev, next);
+  }
+}
+
+function popNextToCommonLevel(prev, next) {
+  var parentNext = next.parent;
+
+  if (parentNext === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  }
+
+  if (prev.depth === parentNext.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(prev, parentNext);
+  } else {
+    // We must still be deeper.
+    popNextToCommonLevel(prev, parentNext);
+  }
+
+  pushNode(next);
+} // Perform context switching to the new snapshot.
+// To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
+// updating all the context's current values. That way reads, always just read the current value.
+// At the cost of updating contexts even if they're never read by this subtree.
+
+function switchContext(newSnapshot) {
+  // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
+  // We also need to update any new contexts that are now on the stack with the deepest value.
+  // The easiest way to update new contexts is to just reapply them in reverse order from the
+  // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
+  // for that. Therefore this algorithm is recursive.
+  // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
+  // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
+  // 3) Then we reapply new contexts on the way back up the stack.
+  var prev = currentActiveSnapshot;
+  var next = newSnapshot;
+
+  if (prev !== next) {
+    if (prev === null) {
+      // $FlowFixMe: This has to be non-null since it's not equal to prev.
+      pushAllNext(next);
+    } else if (next === null) {
+      popAllPrevious(prev);
+    } else if (prev.depth === next.depth) {
+      popToNearestCommonAncestor(prev, next);
+    } else if (prev.depth > next.depth) {
+      popPreviousToCommonLevel(prev, next);
+    } else {
+      popNextToCommonLevel(prev, next);
+    }
+
+    currentActiveSnapshot = next;
+  }
+}
+function pushProvider(context, nextValue) {
+  var prevValue;
+
+  {
+    prevValue = context._currentValue;
+    context._currentValue = nextValue;
+
+    {
+      if (
+        context._currentRenderer !== undefined &&
+        context._currentRenderer !== null &&
+        context._currentRenderer !== rendererSigil
+      ) {
+        error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same context provider. This is currently unsupported.'
+        );
+      }
+
+      context._currentRenderer = rendererSigil;
+    }
+  }
+
+  var prevNode = currentActiveSnapshot;
+  var newNode = {
+    parent: prevNode,
+    depth: prevNode === null ? 0 : prevNode.depth + 1,
+    context: context,
+    parentValue: prevValue,
+    value: nextValue,
+  };
+  currentActiveSnapshot = newNode;
+  return newNode;
+}
+function popProvider() {
+  var prevSnapshot = currentActiveSnapshot;
+
+  if (prevSnapshot === null) {
+    throw new Error(
+      'Tried to pop a Context at the root of the app. This is a bug in React.'
+    );
+  }
+
+  {
+    var value = prevSnapshot.parentValue;
+
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue = value;
+    }
+  }
+
+  return (currentActiveSnapshot = prevSnapshot.parent);
+}
+function getActiveContext() {
+  return currentActiveSnapshot;
+}
+function readContext(context) {
+  var value = context._currentValue;
+  return value;
+}
+
+function readContext$1(context) {
+  {
+    if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
+      error('Only ServerContext is supported in Flight');
+    }
+
+    if (currentCache === null) {
+      error(
+        'Context can only be read while React is rendering. ' +
+          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+          'In function components, you can read it directly in the function body, but not ' +
+          'inside Hooks like useReducer() or useMemo().'
+      );
+    }
+  }
+
+  return readContext(context);
+}
+
+var Dispatcher = {
+  useMemo: function (nextCreate) {
+    return nextCreate();
+  },
+  useCallback: function (callback) {
+    return callback;
+  },
+  useDebugValue: function () {},
+  useDeferredValue: unsupportedHook,
+  useTransition: unsupportedHook,
+  getCacheForType: function (resourceType) {
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
+    var entry = currentCache.get(resourceType);
+
+    if (entry === undefined) {
+      entry = resourceType(); // TODO: Warn if undefined?
+
+      currentCache.set(resourceType, entry);
+    }
+
+    return entry;
+  },
+  readContext: readContext$1,
+  useContext: readContext$1,
+  useReducer: unsupportedHook,
+  useRef: unsupportedHook,
+  useState: unsupportedHook,
+  useInsertionEffect: unsupportedHook,
+  useLayoutEffect: unsupportedHook,
+  useImperativeHandle: unsupportedHook,
+  useEffect: unsupportedHook,
+  useId: unsupportedHook,
+  useMutableSource: unsupportedHook,
+  useSyncExternalStore: unsupportedHook,
+  useCacheRefresh: function () {
+    return unsupportedRefresh;
+  },
+};
+
+function unsupportedHook() {
+  throw new Error('This Hook is not supported in Server Components.');
+}
+
+function unsupportedRefresh() {
+  if (!currentCache) {
+    throw new Error(
+      'Refreshing the cache is not supported in Server Components.'
+    );
+  }
+}
+
+var currentCache = null;
+function setCurrentCache(cache) {
+  currentCache = cache;
+  return currentCache;
+}
+function getCurrentCache() {
+  return currentCache;
+}
+
+var ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    ContextRegistry[globalName] = createServerContext(
+      globalName,
+      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    );
+  }
+
+  return ContextRegistry[globalName];
+}
+
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error) {
@@ -188,7 +1217,7 @@ function defaultErrorHandler(error) {
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
-function createRequest(model, bundlerConfig, onError) {
+function createRequest(model, bundlerConfig, onError, context) {
   var pingedSegments = [];
   var request = {
     status: OPEN,
@@ -204,17 +1233,25 @@ function createRequest(model, bundlerConfig, onError) {
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
+    writtenProviders: new Map(),
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function (key, value) {
       return resolveModelToJSON(request, this, key, value);
     },
   };
   request.pendingChunks++;
-  var rootSegment = createSegment(request, model);
+  var rootContext = createRootContext(context);
+  var rootSegment = createSegment(request, model, rootContext);
   pingedSegments.push(rootSegment);
   return request;
 }
 
+function createRootContext(reqContext) {
+  return importServerContexts(reqContext);
+}
+
+var POP = {};
+
 function attemptResolveElement(type, key, ref, props) {
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
@@ -249,6 +1286,13 @@ function attemptResolveElement(type, key, ref, props) {
     }
 
     switch (type.$$typeof) {
+      case REACT_LAZY_TYPE: {
+        var payload = type._payload;
+        var init = type._init;
+        var wrappedType = init(payload);
+        return attemptResolveElement(wrappedType, key, ref, props);
+      }
+
       case REACT_FORWARD_REF_TYPE: {
         var render = type.render;
         return render(props, undefined);
@@ -257,6 +1301,38 @@ function attemptResolveElement(type, key, ref, props) {
       case REACT_MEMO_TYPE: {
         return attemptResolveElement(type.type, key, ref, props);
       }
+
+      case REACT_PROVIDER_TYPE: {
+        pushProvider(type._context, props.value);
+
+        {
+          var extraKeys = Object.keys(props).filter(function (value) {
+            if (value === 'children' || value === 'value') {
+              return false;
+            }
+
+            return true;
+          });
+
+          if (extraKeys.length !== 0) {
+            error(
+              'ServerContext can only have a value prop and children. Found: %s',
+              JSON.stringify(extraKeys)
+            );
+          }
+        }
+
+        return [
+          REACT_ELEMENT_TYPE,
+          type,
+          key, // Rely on __popProvider being serialized last to pop the provider.
+          {
+            value: props.value,
+            children: props.children,
+            __pop: POP,
+          },
+        ];
+      }
     }
   }
 
@@ -276,11 +1352,12 @@ function pingSegment(request, segment) {
   }
 }
 
-function createSegment(request, model) {
+function createSegment(request, model, context) {
   var id = request.nextChunkId++;
   var segment = {
     id: id,
     model: model,
+    context: context,
     ping: function () {
       return pingSegment(request, segment);
     },
@@ -309,7 +1386,7 @@ function escapeStringValue(value) {
 function isObjectPrototype(object) {
   if (!object) {
     return false;
-  } // $FlowFixMe
+  }
 
   var ObjectPrototype = Object.prototype;
 
@@ -410,8 +1487,7 @@ function describeValueForErrorMessage(value) {
 
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   if (isArray(objectOrArray)) {
-    var str = '['; // $FlowFixMe: Should be refined by now.
-
+    var str = '[';
     var array = objectOrArray;
 
     for (var i = 0; i < array.length; i++) {
@@ -440,8 +1516,7 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
     str += ']';
     return str;
   } else {
-    var _str = '{'; // $FlowFixMe: Should be refined by now.
-
+    var _str = '{';
     var object = objectOrArray;
     var names = Object.keys(object);
 
@@ -475,6 +1550,8 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   }
 }
 
+var insideContextProps = null;
+var isInsideContextValue = false;
 function resolveModelToJSON(request, parent, key, value) {
   {
     // $FlowFixMe
@@ -495,39 +1572,67 @@ function resolveModelToJSON(request, parent, key, value) {
   switch (value) {
     case REACT_ELEMENT_TYPE:
       return '$';
+  }
 
-    case REACT_LAZY_TYPE:
-      throw new Error(
-        'React Lazy Components are not yet supported on the server.'
-      );
+  {
+    if (
+      parent[0] === REACT_ELEMENT_TYPE &&
+      parent[1] &&
+      parent[1].$$typeof === REACT_PROVIDER_TYPE &&
+      key === '3'
+    ) {
+      insideContextProps = value;
+    } else if (insideContextProps === parent && key === 'value') {
+      isInsideContextValue = true;
+    } else if (insideContextProps === parent && key === 'children') {
+      isInsideContextValue = false;
+    }
   } // Resolve server components.
 
   while (
     typeof value === 'object' &&
     value !== null &&
-    value.$$typeof === REACT_ELEMENT_TYPE
+    (value.$$typeof === REACT_ELEMENT_TYPE ||
+      value.$$typeof === REACT_LAZY_TYPE)
   ) {
-    // TODO: Concatenate keys of parents onto children.
-    var element = value;
+    {
+      if (isInsideContextValue) {
+        error('React elements are not allowed in ServerContext');
+      }
+    }
 
     try {
-      // Attempt to render the server component.
-      value = attemptResolveElement(
-        element.type,
-        element.key,
-        element.ref,
-        element.props
-      );
+      switch (value.$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          // TODO: Concatenate keys of parents onto children.
+          var element = value; // Attempt to render the server component.
+
+          value = attemptResolveElement(
+            element.type,
+            element.key,
+            element.ref,
+            element.props
+          );
+          break;
+        }
+
+        case REACT_LAZY_TYPE: {
+          var payload = value._payload;
+          var init = value._init;
+          value = init(payload);
+          break;
+        }
+      }
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
         request.pendingChunks++;
-        var newSegment = createSegment(request, value);
+        var newSegment = createSegment(request, value, getActiveContext());
         var ping = newSegment.ping;
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
       } else {
-        reportError(request, x); // Something errored. We'll still send everything we have up until this point.
+        logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
         // once it gets rendered.
 
@@ -591,6 +1696,28 @@ function resolveModelToJSON(request, parent, key, value) {
         emitErrorChunk(request, _errorId, x);
         return serializeByValueID(_errorId);
       }
+    } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
+      var providerKey = value._context._globalName;
+      var writtenProviders = request.writtenProviders;
+      var providerId = writtenProviders.get(key);
+
+      if (providerId === undefined) {
+        request.pendingChunks++;
+        providerId = request.nextChunkId++;
+        writtenProviders.set(providerKey, providerId);
+        emitProviderChunk(request, providerId, providerKey);
+      }
+
+      return serializeByValueID(providerId);
+    } else if (value === POP) {
+      popProvider();
+
+      {
+        insideContextProps = null;
+        isInsideContextValue = false;
+      }
+
+      return undefined;
     }
 
     {
@@ -724,7 +1851,7 @@ function resolveModelToJSON(request, parent, key, value) {
   );
 }
 
-function reportError(request, error) {
+function logRecoverableError(request, error) {
   var onError = request.onError;
   onError(error);
 }
@@ -774,7 +1901,14 @@ function emitSymbolChunk(request, id, name) {
   request.completedModuleChunks.push(processedChunk);
 }
 
+function emitProviderChunk(request, id, contextName) {
+  var processedChunk = processProviderChunk(request, id, contextName);
+  request.completedJSONChunks.push(processedChunk);
+}
+
 function retrySegment(request, segment) {
+  switchContext(segment.context);
+
   try {
     var _value3 = segment.model;
 
@@ -806,7 +1940,7 @@ function retrySegment(request, segment) {
       x.then(ping, ping);
       return;
     } else {
-      reportError(request, x); // This errored, we need to serialize this error to the
+      logRecoverableError(request, x); // This errored, we need to serialize this error to the
 
       emitErrorChunk(request, segment.id, x);
     }
@@ -815,9 +1949,9 @@ function retrySegment(request, segment) {
 
 function performWork(request) {
   var prevDispatcher = ReactCurrentDispatcher.current;
-  var prevCache = currentCache;
+  var prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
-  currentCache = request.cache;
+  setCurrentCache(request.cache);
 
   try {
     var pingedSegments = request.pingedSegments;
@@ -832,18 +1966,17 @@ function performWork(request) {
       flushCompletedChunks(request, request.destination);
     }
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
-    currentCache = prevCache;
+    setCurrentCache(prevCache);
   }
 }
 
-let reentrant = false;
 function flushCompletedChunks(request, destination) {
-  if (reentrant) return;
-  reentrant = true;
+  beginWriting();
+
   try {
     // We emit module chunks first in the stream so that
     // they can be preloaded as early as possible.
@@ -853,8 +1986,9 @@ function flushCompletedChunks(request, destination) {
     for (; i < moduleChunks.length; i++) {
       request.pendingChunks--;
       var chunk = moduleChunks[i];
+      var keepWriting = writeChunkAndReturn(destination, chunk);
 
-      if (!writeChunk(destination, chunk)) {
+      if (!keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -870,7 +2004,9 @@ function flushCompletedChunks(request, destination) {
       request.pendingChunks--;
       var _chunk = jsonChunks[i];
 
-      if (!writeChunk(destination, _chunk)) {
+      var _keepWriting = writeChunkAndReturn(destination, _chunk);
+
+      if (!_keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -888,7 +2024,9 @@ function flushCompletedChunks(request, destination) {
       request.pendingChunks--;
       var _chunk2 = errorChunks[i];
 
-      if (!writeChunk(destination, _chunk2)) {
+      var _keepWriting2 = writeChunkAndReturn(destination, _chunk2);
+
+      if (!_keepWriting2) {
         request.destination = null;
         i++;
         break;
@@ -897,7 +2035,7 @@ function flushCompletedChunks(request, destination) {
 
     errorChunks.splice(0, i);
   } finally {
-    reentrant = false;
+    completeWriting(destination);
   }
 
   if (request.pendingChunks === 0) {
@@ -922,76 +2060,48 @@ function startFlowing(request, destination) {
     return;
   }
 
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
+
   request.destination = destination;
 
   try {
     flushCompletedChunks(request, destination);
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   }
 }
 
-function unsupportedHook() {
-  throw new Error('This Hook is not supported in Server Components.');
-}
-
-function unsupportedRefresh() {
-  if (!currentCache) {
-    throw new Error(
-      'Refreshing the cache is not supported in Server Components.'
-    );
-  }
-}
-
-var currentCache = null;
-var Dispatcher = {
-  useMemo: function (nextCreate) {
-    return nextCreate();
-  },
-  useCallback: function (callback) {
-    return callback;
-  },
-  useDebugValue: function () {},
-  useDeferredValue: unsupportedHook,
-  useTransition: unsupportedHook,
-  getCacheForType: function (resourceType) {
-    if (!currentCache) {
-      throw new Error('Reading the cache is only supported while rendering.');
+function importServerContexts(contexts) {
+  if (contexts) {
+    var prevContext = getActiveContext();
+    switchContext(rootContextSnapshot);
+
+    for (var i = 0; i < contexts.length; i++) {
+      var _contexts$i = contexts[i],
+        name = _contexts$i[0],
+        _value4 = _contexts$i[1];
+      var context = getOrCreateServerContext(name);
+      pushProvider(context, _value4);
     }
 
-    var entry = currentCache.get(resourceType);
-
-    if (entry === undefined) {
-      entry = resourceType(); // TODO: Warn if undefined?
-
-      currentCache.set(resourceType, entry);
-    }
+    var importedContext = getActiveContext();
+    switchContext(prevContext);
+    return importedContext;
+  }
 
-    return entry;
-  },
-  readContext: unsupportedHook,
-  useContext: unsupportedHook,
-  useReducer: unsupportedHook,
-  useRef: unsupportedHook,
-  useState: unsupportedHook,
-  useInsertionEffect: unsupportedHook,
-  useLayoutEffect: unsupportedHook,
-  useImperativeHandle: unsupportedHook,
-  useEffect: unsupportedHook,
-  useId: unsupportedHook,
-  useMutableSource: unsupportedHook,
-  useSyncExternalStore: unsupportedHook,
-  useCacheRefresh: function () {
-    return unsupportedRefresh;
-  },
-};
+  return rootContextSnapshot;
+}
 
-function renderToReadableStream(model, options) {
+function renderToReadableStream(model, options, context) {
   var request = createRequest(
     model,
     {}, // Manifest, not used
-    options ? options.onError : undefined
+    options ? options.onError : undefined,
+    context
   );
   var stream = new ReadableStream({
     start: function (controller) {
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js b/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js
index d0ed73d9ce..366a0b3d6d 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.node.server.js
@@ -8,7 +8,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from 'react';
+import {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  createServerContext,
+} from 'react';
 
 var ReactSharedInternals = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
@@ -72,7 +75,7 @@ function beginWriting(destination) {
     destination.cork();
   }
 }
-function writeChunk(destination, chunk) {
+function writeChunkAndReturn(destination, chunk) {
   var nodeBuffer = chunk; // close enough
 
   return destination.write(nodeBuffer);
@@ -89,6 +92,9 @@ function close(destination) {
 function stringToChunk(content) {
   return content;
 }
+function stringToPrecomputedChunk(content) {
+  return Buffer.from(content, 'utf8');
+}
 function closeWithError(destination, error) {
   // $FlowFixMe: This is an Error object or the destination accepts other types.
   destination.destroy(error);
@@ -119,6 +125,10 @@ function processModuleChunk(request, id, moduleMetaData) {
   var row = serializeRowHeader('M', id) + json + '\n';
   return stringToChunk(row);
 }
+function processProviderChunk(request, id, contextName) {
+  var row = serializeRowHeader('P', id) + contextName + '\n';
+  return stringToChunk(row);
+}
 function processSymbolChunk(request, id, name) {
   var json = stringify(name);
   var row = serializeRowHeader('S', id) + json + '\n';
@@ -143,46 +153,511 @@ function resolveModuleMetaData(config, moduleReference) {
 // ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var REACT_ELEMENT_TYPE = 0xeac7;
-var REACT_PORTAL_TYPE = 0xeaca;
-var REACT_FRAGMENT_TYPE = 0xeacb;
-var REACT_STRICT_MODE_TYPE = 0xeacc;
-var REACT_PROFILER_TYPE = 0xead2;
-var REACT_PROVIDER_TYPE = 0xeacd;
-var REACT_CONTEXT_TYPE = 0xeace;
-var REACT_FORWARD_REF_TYPE = 0xead0;
-var REACT_SUSPENSE_TYPE = 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-var REACT_MEMO_TYPE = 0xead3;
-var REACT_LAZY_TYPE = 0xead4;
-var REACT_SCOPE_TYPE = 0xead7;
-var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-var REACT_OFFSCREEN_TYPE = 0xeae2;
-var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-var REACT_CACHE_TYPE = 0xeae4;
-
-if (typeof Symbol === 'function' && Symbol.for) {
-  var symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-  REACT_PROFILER_TYPE = symbolFor('react.profiler');
-  REACT_PROVIDER_TYPE = symbolFor('react.provider');
-  REACT_CONTEXT_TYPE = symbolFor('react.context');
-  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-  REACT_MEMO_TYPE = symbolFor('react.memo');
-  REACT_LAZY_TYPE = symbolFor('react.lazy');
-  REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  REACT_CACHE_TYPE = symbolFor('react.cache');
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+  'react.default_value'
+);
+
+// A reserved attribute.
+// It is handled by React separately and shouldn't be written to the DOM.
+var RESERVED = 0; // A simple string attribute.
+// Attributes that aren't in the filter are presumed to have this type.
+
+var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
+// "enumerated" attributes with "true" and "false" as possible values.
+// When true, it should be set to a "true" string.
+// When false, it should be set to a "false" string.
+
+var BOOLEANISH_STRING = 2; // A real boolean attribute.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+
+var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+// For any other value, should be present with that value.
+
+var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
+// When falsy, it should be removed.
+
+var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
+// When falsy, it should be removed.
+
+var POSITIVE_NUMERIC = 6;
+
+function PropertyInfoRecord(
+  name,
+  type,
+  mustUseProperty,
+  attributeName,
+  attributeNamespace,
+  sanitizeURL,
+  removeEmptyString
+) {
+  this.acceptsBooleans =
+    type === BOOLEANISH_STRING ||
+    type === BOOLEAN ||
+    type === OVERLOADED_BOOLEAN;
+  this.attributeName = attributeName;
+  this.attributeNamespace = attributeNamespace;
+  this.mustUseProperty = mustUseProperty;
+  this.propertyName = name;
+  this.type = type;
+  this.sanitizeURL = sanitizeURL;
+  this.removeEmptyString = removeEmptyString;
+} // When adding attributes to this list, be sure to also add them to
+// the `possibleStandardNames` module to ensure casing and incorrect
+// name warnings.
+
+var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
+
+var reservedProps = [
+  'children',
+  'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
+  // elements (not just inputs). Now that ReactDOMInput assigns to the
+  // defaultValue property -- do we need this?
+  'defaultValue',
+  'defaultChecked',
+  'innerHTML',
+  'suppressContentEditableWarning',
+  'suppressHydrationWarning',
+  'style',
+];
+
+{
+  reservedProps.push('innerText', 'textContent');
+}
+
+reservedProps.forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    RESERVED,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // A few React string attributes have a different name.
+// This is a mapping from React prop names to the attribute names.
+
+[
+  ['acceptCharset', 'accept-charset'],
+  ['className', 'class'],
+  ['htmlFor', 'for'],
+  ['httpEquiv', 'http-equiv'],
+].forEach(function (_ref) {
+  var name = _ref[0],
+    attributeName = _ref[1];
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are "enumerated" HTML attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+
+['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (
+  name
+) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEANISH_STRING,
+    false, // mustUseProperty
+    name.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are "enumerated" SVG attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+// Since these are SVG attributes, their attribute names are case-sensitive.
+
+[
+  'autoReverse',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEANISH_STRING,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML boolean attributes.
+
+[
+  'allowFullScreen',
+  'async', // Note: there is a special case that prevents it from being written to the DOM
+  // on the client side because the browsers are inconsistent. Instead we call focus().
+  'autoFocus',
+  'autoPlay',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'disablePictureInPicture',
+  'disableRemotePlayback',
+  'formNoValidate',
+  'hidden',
+  'loop',
+  'noModule',
+  'noValidate',
+  'open',
+  'playsInline',
+  'readOnly',
+  'required',
+  'reversed',
+  'scoped',
+  'seamless', // Microdata
+  'itemScope',
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEAN,
+    false, // mustUseProperty
+    name.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are the few React props that we set as DOM properties
+// rather than attributes. These are all booleans.
+
+[
+  'checked', // Note: `option.selected` is not updated if `select.multiple` is
+  // disabled with `removeAttribute`. We have special logic for handling this.
+  'multiple',
+  'muted',
+  'selected', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    BOOLEAN,
+    true, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML attributes that are "overloaded booleans": they behave like
+// booleans, but can also accept a string value.
+
+[
+  'capture',
+  'download', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    OVERLOADED_BOOLEAN,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML attributes that must be positive numbers.
+
+[
+  'cols',
+  'rows',
+  'size',
+  'span', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    POSITIVE_NUMERIC,
+    false, // mustUseProperty
+    name, // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These are HTML attributes that must be numbers.
+
+['rowSpan', 'start'].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(
+    name,
+    NUMERIC,
+    false, // mustUseProperty
+    name.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+});
+var CAMELIZE = /[\-\:]([a-z])/g;
+
+var capitalize = function (token) {
+  return token[1].toUpperCase();
+}; // This is a list of all SVG attributes that need special casing, namespacing,
+// or boolean value assignment. Regular attributes that just accept strings
+// and have the same names are omitted, just like in the HTML attribute filter.
+// Some of these attributes can be hard to find. This list was created by
+// scraping the MDN documentation.
+
+[
+  'accent-height',
+  'alignment-baseline',
+  'arabic-form',
+  'baseline-shift',
+  'cap-height',
+  'clip-path',
+  'clip-rule',
+  'color-interpolation',
+  'color-interpolation-filters',
+  'color-profile',
+  'color-rendering',
+  'dominant-baseline',
+  'enable-background',
+  'fill-opacity',
+  'fill-rule',
+  'flood-color',
+  'flood-opacity',
+  'font-family',
+  'font-size',
+  'font-size-adjust',
+  'font-stretch',
+  'font-style',
+  'font-variant',
+  'font-weight',
+  'glyph-name',
+  'glyph-orientation-horizontal',
+  'glyph-orientation-vertical',
+  'horiz-adv-x',
+  'horiz-origin-x',
+  'image-rendering',
+  'letter-spacing',
+  'lighting-color',
+  'marker-end',
+  'marker-mid',
+  'marker-start',
+  'overline-position',
+  'overline-thickness',
+  'paint-order',
+  'panose-1',
+  'pointer-events',
+  'rendering-intent',
+  'shape-rendering',
+  'stop-color',
+  'stop-opacity',
+  'strikethrough-position',
+  'strikethrough-thickness',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'text-anchor',
+  'text-decoration',
+  'text-rendering',
+  'underline-position',
+  'underline-thickness',
+  'unicode-bidi',
+  'unicode-range',
+  'units-per-em',
+  'v-alphabetic',
+  'v-hanging',
+  'v-ideographic',
+  'v-mathematical',
+  'vector-effect',
+  'vert-adv-y',
+  'vert-origin-x',
+  'vert-origin-y',
+  'word-spacing',
+  'writing-mode',
+  'xmlns:xlink',
+  'x-height', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName,
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // String SVG attributes with the xlink namespace.
+
+[
+  'xlink:actuate',
+  'xlink:arcrole',
+  'xlink:role',
+  'xlink:show',
+  'xlink:title',
+  'xlink:type', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName,
+    'http://www.w3.org/1999/xlink',
+    false, // sanitizeURL
+    false
+  );
+}); // String SVG attributes with the xml namespace.
+
+[
+  'xml:base',
+  'xml:lang',
+  'xml:space', // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(
+    name,
+    STRING,
+    false, // mustUseProperty
+    attributeName,
+    'http://www.w3.org/XML/1998/namespace',
+    false, // sanitizeURL
+    false
+  );
+}); // These attribute exists both in HTML and SVG.
+// The attribute name is case-sensitive in SVG so we can't just use
+// the React name like we do for attributes that exist only in HTML.
+
+['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(
+    attributeName,
+    STRING,
+    false, // mustUseProperty
+    attributeName.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    false, // sanitizeURL
+    false
+  );
+}); // These attributes accept URLs. These must not allow javascript: URLS.
+// These will also need to accept Trusted Types object in the future.
+
+var xlinkHref = 'xlinkHref';
+properties[xlinkHref] = new PropertyInfoRecord(
+  'xlinkHref',
+  STRING,
+  false, // mustUseProperty
+  'xlink:href',
+  'http://www.w3.org/1999/xlink',
+  true, // sanitizeURL
+  false
+);
+['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(
+    attributeName,
+    STRING,
+    false, // mustUseProperty
+    attributeName.toLowerCase(), // attributeName
+    null, // attributeNamespace
+    true, // sanitizeURL
+    true
+  );
+});
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var isUnitlessNumber = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridArea: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+};
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
 }
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+
+var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+
+Object.keys(isUnitlessNumber).forEach(function (prop) {
+  prefixes.forEach(function (prefix) {
+    isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+  });
+});
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
@@ -190,6 +665,501 @@ function isArray(a) {
   return isArrayImpl(a);
 }
 
+var startInlineScript = stringToPrecomputedChunk('<script>');
+var endInlineScript = stringToPrecomputedChunk('</script>');
+var startScriptSrc = stringToPrecomputedChunk('<script src="');
+var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+var endAsyncScript = stringToPrecomputedChunk('" async=""></script>'); // Allows us to keep track of what we've already written so we can refer back to it.
+
+var textSeparator = stringToPrecomputedChunk('<!-- -->');
+
+var styleAttributeStart = stringToPrecomputedChunk(' style="');
+var styleAssign = stringToPrecomputedChunk(':');
+var styleSeparator = stringToPrecomputedChunk(';');
+
+var attributeSeparator = stringToPrecomputedChunk(' ');
+var attributeAssign = stringToPrecomputedChunk('="');
+var attributeEnd = stringToPrecomputedChunk('"');
+var attributeEmptyString = stringToPrecomputedChunk('=""');
+
+var endOfStartTag = stringToPrecomputedChunk('>');
+var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
+
+var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+var leadingNewline = stringToPrecomputedChunk('\n');
+
+var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
+var endTag1 = stringToPrecomputedChunk('</');
+var endTag2 = stringToPrecomputedChunk('>');
+// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+// display. It's never visible to users. We use the template tag because it can be used in every
+// type of parent. <script> tags also work in every other tag except <colgroup>.
+
+var placeholder1 = stringToPrecomputedChunk('<template id="');
+var placeholder2 = stringToPrecomputedChunk('"></template>');
+
+var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+var startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+  '<!--$?--><template id="'
+);
+var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
+var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
+var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+var startSegmentHTML2 = stringToPrecomputedChunk('">');
+var endSegmentHTML = stringToPrecomputedChunk('</div>');
+var startSegmentSVG = stringToPrecomputedChunk(
+  '<svg aria-hidden="true" style="display:none" id="'
+);
+var startSegmentSVG2 = stringToPrecomputedChunk('">');
+var endSegmentSVG = stringToPrecomputedChunk('</svg>');
+var startSegmentMathML = stringToPrecomputedChunk(
+  '<math aria-hidden="true" style="display:none" id="'
+);
+var startSegmentMathML2 = stringToPrecomputedChunk('">');
+var endSegmentMathML = stringToPrecomputedChunk('</math>');
+var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
+var startSegmentTable2 = stringToPrecomputedChunk('">');
+var endSegmentTable = stringToPrecomputedChunk('</table>');
+var startSegmentTableBody = stringToPrecomputedChunk(
+  '<table hidden><tbody id="'
+);
+var startSegmentTableBody2 = stringToPrecomputedChunk('">');
+var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
+var startSegmentTableRow = stringToPrecomputedChunk('<table hidden><tr id="');
+var startSegmentTableRow2 = stringToPrecomputedChunk('">');
+var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
+var startSegmentColGroup = stringToPrecomputedChunk(
+  '<table hidden><colgroup id="'
+);
+var startSegmentColGroup2 = stringToPrecomputedChunk('">');
+var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
+// The following code is the source scripts that we then minify and inline below,
+// with renamed function names that we hope don't collide:
+// const COMMENT_NODE = 8;
+// const SUSPENSE_START_DATA = '$';
+// const SUSPENSE_END_DATA = '/$';
+// const SUSPENSE_PENDING_START_DATA = '$?';
+// const SUSPENSE_FALLBACK_START_DATA = '$!';
+//
+// function clientRenderBoundary(suspenseBoundaryID) {
+//   // Find the fallback's first element.
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   if (!suspenseIdNode) {
+//     // The user must have already navigated away from this tree.
+//     // E.g. because the parent was hydrated.
+//     return;
+//   }
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
+//   // Tag it to be client rendered.
+//   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+//   // Tell React to retry it if the parent already hydrated.
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeBoundary(suspenseBoundaryID, contentID) {
+//   // Find the fallback's first element.
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   const contentNode = document.getElementById(contentID);
+//   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
+//   // This might also help by not causing recalcing each time we move a child from here to the target.
+//   contentNode.parentNode.removeChild(contentNode);
+//   if (!suspenseIdNode) {
+//     // The user must have already navigated away from this tree.
+//     // E.g. because the parent was hydrated. That's fine there's nothing to do
+//     // but we have to make sure that we already deleted the container node.
+//     return;
+//   }
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
+//
+//   // Clear all the existing children. This is complicated because
+//   // there can be embedded Suspense boundaries in the fallback.
+//   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
+//   // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+//   // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+//   const parentInstance = suspenseNode.parentNode;
+//   let node = suspenseNode.nextSibling;
+//   let depth = 0;
+//   do {
+//     if (node && node.nodeType === COMMENT_NODE) {
+//       const data = node.data;
+//       if (data === SUSPENSE_END_DATA) {
+//         if (depth === 0) {
+//           break;
+//         } else {
+//           depth--;
+//         }
+//       } else if (
+//         data === SUSPENSE_START_DATA ||
+//         data === SUSPENSE_PENDING_START_DATA ||
+//         data === SUSPENSE_FALLBACK_START_DATA
+//       ) {
+//         depth++;
+//       }
+//     }
+//
+//     const nextNode = node.nextSibling;
+//     parentInstance.removeChild(node);
+//     node = nextNode;
+//   } while (node);
+//
+//   const endOfBoundary = node;
+//
+//   // Insert all the children from the contentNode between the start and end of suspense boundary.
+//   while (contentNode.firstChild) {
+//     parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+//   }
+//   suspenseNode.data = SUSPENSE_START_DATA;
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeSegment(containerID, placeholderID) {
+//   const segmentContainer = document.getElementById(containerID);
+//   const placeholderNode = document.getElementById(placeholderID);
+//   // We always expect both nodes to exist here because, while we might
+//   // have navigated away from the main tree, we still expect the detached
+//   // tree to exist.
+//   segmentContainer.parentNode.removeChild(segmentContainer);
+//   while (segmentContainer.firstChild) {
+//     placeholderNode.parentNode.insertBefore(
+//       segmentContainer.firstChild,
+//       placeholderNode,
+//     );
+//   }
+//   placeholderNode.parentNode.removeChild(placeholderNode);
+// }
+
+var completeSegmentFunction =
+  'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
+var completeBoundaryFunction =
+  'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
+var clientRenderFunction =
+  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+var completeSegmentScript1Full = stringToPrecomputedChunk(
+  completeSegmentFunction + ';$RS("'
+);
+var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
+var completeSegmentScript2 = stringToPrecomputedChunk('","');
+var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+var completeBoundaryScript1Full = stringToPrecomputedChunk(
+  completeBoundaryFunction + ';$RC("'
+);
+var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
+var completeBoundaryScript2 = stringToPrecomputedChunk('","');
+var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
+var clientRenderScript1Full = stringToPrecomputedChunk(
+  clientRenderFunction + ';$RX("'
+);
+var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+var clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+
+var rendererSigil;
+
+{
+  // Use this to detect multiple renderers using the same context
+  rendererSigil = {};
+} // Used to store the parent path of all context overrides in a shared linked list.
+// Forming a reverse tree.
+
+var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
+// This global (actually thread local) state represents what state all those "current",
+// fields are currently in.
+
+var currentActiveSnapshot = null;
+
+function popNode(prev) {
+  {
+    prev.context._currentValue = prev.parentValue;
+  }
+}
+
+function pushNode(next) {
+  {
+    next.context._currentValue = next.value;
+  }
+}
+
+function popToNearestCommonAncestor(prev, next) {
+  if (prev === next);
+  else {
+    popNode(prev);
+    var parentPrev = prev.parent;
+    var parentNext = next.parent;
+
+    if (parentPrev === null) {
+      if (parentNext !== null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+      }
+    } else {
+      if (parentNext === null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.'
+        );
+      }
+
+      popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+
+      pushNode(next);
+    }
+  }
+}
+
+function popAllPrevious(prev) {
+  popNode(prev);
+  var parentPrev = prev.parent;
+
+  if (parentPrev !== null) {
+    popAllPrevious(parentPrev);
+  }
+}
+
+function pushAllNext(next) {
+  var parentNext = next.parent;
+
+  if (parentNext !== null) {
+    pushAllNext(parentNext);
+  }
+
+  pushNode(next);
+}
+
+function popPreviousToCommonLevel(prev, next) {
+  popNode(prev);
+  var parentPrev = prev.parent;
+
+  if (parentPrev === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  }
+
+  if (parentPrev.depth === next.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(parentPrev, next);
+  } else {
+    // We must still be deeper.
+    popPreviousToCommonLevel(parentPrev, next);
+  }
+}
+
+function popNextToCommonLevel(prev, next) {
+  var parentNext = next.parent;
+
+  if (parentNext === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.'
+    );
+  }
+
+  if (prev.depth === parentNext.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(prev, parentNext);
+  } else {
+    // We must still be deeper.
+    popNextToCommonLevel(prev, parentNext);
+  }
+
+  pushNode(next);
+} // Perform context switching to the new snapshot.
+// To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
+// updating all the context's current values. That way reads, always just read the current value.
+// At the cost of updating contexts even if they're never read by this subtree.
+
+function switchContext(newSnapshot) {
+  // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
+  // We also need to update any new contexts that are now on the stack with the deepest value.
+  // The easiest way to update new contexts is to just reapply them in reverse order from the
+  // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
+  // for that. Therefore this algorithm is recursive.
+  // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
+  // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
+  // 3) Then we reapply new contexts on the way back up the stack.
+  var prev = currentActiveSnapshot;
+  var next = newSnapshot;
+
+  if (prev !== next) {
+    if (prev === null) {
+      // $FlowFixMe: This has to be non-null since it's not equal to prev.
+      pushAllNext(next);
+    } else if (next === null) {
+      popAllPrevious(prev);
+    } else if (prev.depth === next.depth) {
+      popToNearestCommonAncestor(prev, next);
+    } else if (prev.depth > next.depth) {
+      popPreviousToCommonLevel(prev, next);
+    } else {
+      popNextToCommonLevel(prev, next);
+    }
+
+    currentActiveSnapshot = next;
+  }
+}
+function pushProvider(context, nextValue) {
+  var prevValue;
+
+  {
+    prevValue = context._currentValue;
+    context._currentValue = nextValue;
+
+    {
+      if (
+        context._currentRenderer !== undefined &&
+        context._currentRenderer !== null &&
+        context._currentRenderer !== rendererSigil
+      ) {
+        error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same context provider. This is currently unsupported.'
+        );
+      }
+
+      context._currentRenderer = rendererSigil;
+    }
+  }
+
+  var prevNode = currentActiveSnapshot;
+  var newNode = {
+    parent: prevNode,
+    depth: prevNode === null ? 0 : prevNode.depth + 1,
+    context: context,
+    parentValue: prevValue,
+    value: nextValue,
+  };
+  currentActiveSnapshot = newNode;
+  return newNode;
+}
+function popProvider() {
+  var prevSnapshot = currentActiveSnapshot;
+
+  if (prevSnapshot === null) {
+    throw new Error(
+      'Tried to pop a Context at the root of the app. This is a bug in React.'
+    );
+  }
+
+  {
+    var value = prevSnapshot.parentValue;
+
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue = value;
+    }
+  }
+
+  return (currentActiveSnapshot = prevSnapshot.parent);
+}
+function getActiveContext() {
+  return currentActiveSnapshot;
+}
+function readContext(context) {
+  var value = context._currentValue;
+  return value;
+}
+
+function readContext$1(context) {
+  {
+    if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
+      error('Only ServerContext is supported in Flight');
+    }
+
+    if (currentCache === null) {
+      error(
+        'Context can only be read while React is rendering. ' +
+          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+          'In function components, you can read it directly in the function body, but not ' +
+          'inside Hooks like useReducer() or useMemo().'
+      );
+    }
+  }
+
+  return readContext(context);
+}
+
+var Dispatcher = {
+  useMemo: function (nextCreate) {
+    return nextCreate();
+  },
+  useCallback: function (callback) {
+    return callback;
+  },
+  useDebugValue: function () {},
+  useDeferredValue: unsupportedHook,
+  useTransition: unsupportedHook,
+  getCacheForType: function (resourceType) {
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
+    var entry = currentCache.get(resourceType);
+
+    if (entry === undefined) {
+      entry = resourceType(); // TODO: Warn if undefined?
+
+      currentCache.set(resourceType, entry);
+    }
+
+    return entry;
+  },
+  readContext: readContext$1,
+  useContext: readContext$1,
+  useReducer: unsupportedHook,
+  useRef: unsupportedHook,
+  useState: unsupportedHook,
+  useInsertionEffect: unsupportedHook,
+  useLayoutEffect: unsupportedHook,
+  useImperativeHandle: unsupportedHook,
+  useEffect: unsupportedHook,
+  useId: unsupportedHook,
+  useMutableSource: unsupportedHook,
+  useSyncExternalStore: unsupportedHook,
+  useCacheRefresh: function () {
+    return unsupportedRefresh;
+  },
+};
+
+function unsupportedHook() {
+  throw new Error('This Hook is not supported in Server Components.');
+}
+
+function unsupportedRefresh() {
+  if (!currentCache) {
+    throw new Error(
+      'Refreshing the cache is not supported in Server Components.'
+    );
+  }
+}
+
+var currentCache = null;
+function setCurrentCache(cache) {
+  currentCache = cache;
+  return currentCache;
+}
+function getCurrentCache() {
+  return currentCache;
+}
+
+var ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    ContextRegistry[globalName] = createServerContext(
+      globalName,
+      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    );
+  }
+
+  return ContextRegistry[globalName];
+}
+
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error) {
@@ -199,7 +1169,7 @@ function defaultErrorHandler(error) {
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
-function createRequest(model, bundlerConfig, onError) {
+function createRequest(model, bundlerConfig, onError, context) {
   var pingedSegments = [];
   var request = {
     status: OPEN,
@@ -215,17 +1185,25 @@ function createRequest(model, bundlerConfig, onError) {
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
+    writtenProviders: new Map(),
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function (key, value) {
       return resolveModelToJSON(request, this, key, value);
     },
   };
   request.pendingChunks++;
-  var rootSegment = createSegment(request, model);
+  var rootContext = createRootContext(context);
+  var rootSegment = createSegment(request, model, rootContext);
   pingedSegments.push(rootSegment);
   return request;
 }
 
+function createRootContext(reqContext) {
+  return importServerContexts(reqContext);
+}
+
+var POP = {};
+
 function attemptResolveElement(type, key, ref, props) {
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
@@ -260,6 +1238,13 @@ function attemptResolveElement(type, key, ref, props) {
     }
 
     switch (type.$$typeof) {
+      case REACT_LAZY_TYPE: {
+        var payload = type._payload;
+        var init = type._init;
+        var wrappedType = init(payload);
+        return attemptResolveElement(wrappedType, key, ref, props);
+      }
+
       case REACT_FORWARD_REF_TYPE: {
         var render = type.render;
         return render(props, undefined);
@@ -268,6 +1253,38 @@ function attemptResolveElement(type, key, ref, props) {
       case REACT_MEMO_TYPE: {
         return attemptResolveElement(type.type, key, ref, props);
       }
+
+      case REACT_PROVIDER_TYPE: {
+        pushProvider(type._context, props.value);
+
+        {
+          var extraKeys = Object.keys(props).filter(function (value) {
+            if (value === 'children' || value === 'value') {
+              return false;
+            }
+
+            return true;
+          });
+
+          if (extraKeys.length !== 0) {
+            error(
+              'ServerContext can only have a value prop and children. Found: %s',
+              JSON.stringify(extraKeys)
+            );
+          }
+        }
+
+        return [
+          REACT_ELEMENT_TYPE,
+          type,
+          key, // Rely on __popProvider being serialized last to pop the provider.
+          {
+            value: props.value,
+            children: props.children,
+            __pop: POP,
+          },
+        ];
+      }
     }
   }
 
@@ -287,11 +1304,12 @@ function pingSegment(request, segment) {
   }
 }
 
-function createSegment(request, model) {
+function createSegment(request, model, context) {
   var id = request.nextChunkId++;
   var segment = {
     id: id,
     model: model,
+    context: context,
     ping: function () {
       return pingSegment(request, segment);
     },
@@ -320,7 +1338,7 @@ function escapeStringValue(value) {
 function isObjectPrototype(object) {
   if (!object) {
     return false;
-  } // $FlowFixMe
+  }
 
   var ObjectPrototype = Object.prototype;
 
@@ -421,8 +1439,7 @@ function describeValueForErrorMessage(value) {
 
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   if (isArray(objectOrArray)) {
-    var str = '['; // $FlowFixMe: Should be refined by now.
-
+    var str = '[';
     var array = objectOrArray;
 
     for (var i = 0; i < array.length; i++) {
@@ -451,8 +1468,7 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
     str += ']';
     return str;
   } else {
-    var _str = '{'; // $FlowFixMe: Should be refined by now.
-
+    var _str = '{';
     var object = objectOrArray;
     var names = Object.keys(object);
 
@@ -486,6 +1502,8 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   }
 }
 
+var insideContextProps = null;
+var isInsideContextValue = false;
 function resolveModelToJSON(request, parent, key, value) {
   {
     // $FlowFixMe
@@ -506,39 +1524,67 @@ function resolveModelToJSON(request, parent, key, value) {
   switch (value) {
     case REACT_ELEMENT_TYPE:
       return '$';
+  }
 
-    case REACT_LAZY_TYPE:
-      throw new Error(
-        'React Lazy Components are not yet supported on the server.'
-      );
+  {
+    if (
+      parent[0] === REACT_ELEMENT_TYPE &&
+      parent[1] &&
+      parent[1].$$typeof === REACT_PROVIDER_TYPE &&
+      key === '3'
+    ) {
+      insideContextProps = value;
+    } else if (insideContextProps === parent && key === 'value') {
+      isInsideContextValue = true;
+    } else if (insideContextProps === parent && key === 'children') {
+      isInsideContextValue = false;
+    }
   } // Resolve server components.
 
   while (
     typeof value === 'object' &&
     value !== null &&
-    value.$$typeof === REACT_ELEMENT_TYPE
+    (value.$$typeof === REACT_ELEMENT_TYPE ||
+      value.$$typeof === REACT_LAZY_TYPE)
   ) {
-    // TODO: Concatenate keys of parents onto children.
-    var element = value;
+    {
+      if (isInsideContextValue) {
+        error('React elements are not allowed in ServerContext');
+      }
+    }
 
     try {
-      // Attempt to render the server component.
-      value = attemptResolveElement(
-        element.type,
-        element.key,
-        element.ref,
-        element.props
-      );
+      switch (value.$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          // TODO: Concatenate keys of parents onto children.
+          var element = value; // Attempt to render the server component.
+
+          value = attemptResolveElement(
+            element.type,
+            element.key,
+            element.ref,
+            element.props
+          );
+          break;
+        }
+
+        case REACT_LAZY_TYPE: {
+          var payload = value._payload;
+          var init = value._init;
+          value = init(payload);
+          break;
+        }
+      }
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
         request.pendingChunks++;
-        var newSegment = createSegment(request, value);
+        var newSegment = createSegment(request, value, getActiveContext());
         var ping = newSegment.ping;
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
       } else {
-        reportError(request, x); // Something errored. We'll still send everything we have up until this point.
+        logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
         // once it gets rendered.
 
@@ -602,6 +1648,28 @@ function resolveModelToJSON(request, parent, key, value) {
         emitErrorChunk(request, _errorId, x);
         return serializeByValueID(_errorId);
       }
+    } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
+      var providerKey = value._context._globalName;
+      var writtenProviders = request.writtenProviders;
+      var providerId = writtenProviders.get(key);
+
+      if (providerId === undefined) {
+        request.pendingChunks++;
+        providerId = request.nextChunkId++;
+        writtenProviders.set(providerKey, providerId);
+        emitProviderChunk(request, providerId, providerKey);
+      }
+
+      return serializeByValueID(providerId);
+    } else if (value === POP) {
+      popProvider();
+
+      {
+        insideContextProps = null;
+        isInsideContextValue = false;
+      }
+
+      return undefined;
     }
 
     {
@@ -735,7 +1803,7 @@ function resolveModelToJSON(request, parent, key, value) {
   );
 }
 
-function reportError(request, error) {
+function logRecoverableError(request, error) {
   var onError = request.onError;
   onError(error);
 }
@@ -785,7 +1853,14 @@ function emitSymbolChunk(request, id, name) {
   request.completedModuleChunks.push(processedChunk);
 }
 
+function emitProviderChunk(request, id, contextName) {
+  var processedChunk = processProviderChunk(request, id, contextName);
+  request.completedJSONChunks.push(processedChunk);
+}
+
 function retrySegment(request, segment) {
+  switchContext(segment.context);
+
   try {
     var _value3 = segment.model;
 
@@ -817,7 +1892,7 @@ function retrySegment(request, segment) {
       x.then(ping, ping);
       return;
     } else {
-      reportError(request, x); // This errored, we need to serialize this error to the
+      logRecoverableError(request, x); // This errored, we need to serialize this error to the
 
       emitErrorChunk(request, segment.id, x);
     }
@@ -826,9 +1901,9 @@ function retrySegment(request, segment) {
 
 function performWork(request) {
   var prevDispatcher = ReactCurrentDispatcher.current;
-  var prevCache = currentCache;
+  var prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
-  currentCache = request.cache;
+  setCurrentCache(request.cache);
 
   try {
     var pingedSegments = request.pingedSegments;
@@ -843,11 +1918,11 @@ function performWork(request) {
       flushCompletedChunks(request, request.destination);
     }
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
-    currentCache = prevCache;
+    setCurrentCache(prevCache);
   }
 }
 
@@ -863,8 +1938,9 @@ function flushCompletedChunks(request, destination) {
     for (; i < moduleChunks.length; i++) {
       request.pendingChunks--;
       var chunk = moduleChunks[i];
+      var keepWriting = writeChunkAndReturn(destination, chunk);
 
-      if (!writeChunk(destination, chunk)) {
+      if (!keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -880,7 +1956,9 @@ function flushCompletedChunks(request, destination) {
       request.pendingChunks--;
       var _chunk = jsonChunks[i];
 
-      if (!writeChunk(destination, _chunk)) {
+      var _keepWriting = writeChunkAndReturn(destination, _chunk);
+
+      if (!_keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -898,7 +1976,9 @@ function flushCompletedChunks(request, destination) {
       request.pendingChunks--;
       var _chunk2 = errorChunks[i];
 
-      if (!writeChunk(destination, _chunk2)) {
+      var _keepWriting2 = writeChunkAndReturn(destination, _chunk2);
+
+      if (!_keepWriting2) {
         request.destination = null;
         i++;
         break;
@@ -934,70 +2014,41 @@ function startFlowing(request, destination) {
     return;
   }
 
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
+
   request.destination = destination;
 
   try {
     flushCompletedChunks(request, destination);
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   }
 }
 
-function unsupportedHook() {
-  throw new Error('This Hook is not supported in Server Components.');
-}
-
-function unsupportedRefresh() {
-  if (!currentCache) {
-    throw new Error(
-      'Refreshing the cache is not supported in Server Components.'
-    );
-  }
-}
-
-var currentCache = null;
-var Dispatcher = {
-  useMemo: function (nextCreate) {
-    return nextCreate();
-  },
-  useCallback: function (callback) {
-    return callback;
-  },
-  useDebugValue: function () {},
-  useDeferredValue: unsupportedHook,
-  useTransition: unsupportedHook,
-  getCacheForType: function (resourceType) {
-    if (!currentCache) {
-      throw new Error('Reading the cache is only supported while rendering.');
+function importServerContexts(contexts) {
+  if (contexts) {
+    var prevContext = getActiveContext();
+    switchContext(rootContextSnapshot);
+
+    for (var i = 0; i < contexts.length; i++) {
+      var _contexts$i = contexts[i],
+        name = _contexts$i[0],
+        _value4 = _contexts$i[1];
+      var context = getOrCreateServerContext(name);
+      pushProvider(context, _value4);
     }
 
-    var entry = currentCache.get(resourceType);
-
-    if (entry === undefined) {
-      entry = resourceType(); // TODO: Warn if undefined?
-
-      currentCache.set(resourceType, entry);
-    }
+    var importedContext = getActiveContext();
+    switchContext(prevContext);
+    return importedContext;
+  }
 
-    return entry;
-  },
-  readContext: unsupportedHook,
-  useContext: unsupportedHook,
-  useReducer: unsupportedHook,
-  useRef: unsupportedHook,
-  useState: unsupportedHook,
-  useInsertionEffect: unsupportedHook,
-  useLayoutEffect: unsupportedHook,
-  useImperativeHandle: unsupportedHook,
-  useEffect: unsupportedHook,
-  useId: unsupportedHook,
-  useMutableSource: unsupportedHook,
-  useSyncExternalStore: unsupportedHook,
-  useCacheRefresh: function () {
-    return unsupportedRefresh;
-  },
-};
+  return rootContextSnapshot;
+}
 
 function createDrainHandler(destination, request) {
   return function () {
@@ -1005,11 +2056,12 @@ function createDrainHandler(destination, request) {
   };
 }
 
-function renderToPipeableStream(model, options) {
+function renderToPipeableStream(model, options, context) {
   var request = createRequest(
     model,
     {}, // Manifest, not used
-    options ? options.onError : undefined
+    options ? options.onError : undefined,
+    context
   );
   var hasStartedFlowing = false;
   startWork(request);
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js b/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js
index f497a78175..47bd165fb3 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js
+++ b/packages/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js
@@ -8,6 +8,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  createServerContext,
+} from 'react';
+
 function createStringDecoder() {
   return new TextDecoder();
 }
@@ -88,45 +93,25 @@ function requireModule(_ref2) {
 // ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var REACT_ELEMENT_TYPE = 0xeac7;
-var REACT_PORTAL_TYPE = 0xeaca;
-var REACT_FRAGMENT_TYPE = 0xeacb;
-var REACT_STRICT_MODE_TYPE = 0xeacc;
-var REACT_PROFILER_TYPE = 0xead2;
-var REACT_PROVIDER_TYPE = 0xeacd;
-var REACT_CONTEXT_TYPE = 0xeace;
-var REACT_FORWARD_REF_TYPE = 0xead0;
-var REACT_SUSPENSE_TYPE = 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-var REACT_MEMO_TYPE = 0xead3;
-var REACT_LAZY_TYPE = 0xead4;
-var REACT_SCOPE_TYPE = 0xead7;
-var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-var REACT_OFFSCREEN_TYPE = 0xeae2;
-var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-var REACT_CACHE_TYPE = 0xeae4;
-
-if (typeof Symbol === 'function' && Symbol.for) {
-  var symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-  REACT_PROFILER_TYPE = symbolFor('react.profiler');
-  REACT_PROVIDER_TYPE = symbolFor('react.provider');
-  REACT_CONTEXT_TYPE = symbolFor('react.context');
-  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-  REACT_MEMO_TYPE = symbolFor('react.memo');
-  REACT_LAZY_TYPE = symbolFor('react.lazy');
-  REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  REACT_CACHE_TYPE = symbolFor('react.cache');
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+  'react.default_value'
+);
+
+var ReactSharedInternals = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+var ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    ContextRegistry[globalName] = createServerContext(
+      globalName,
+      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    );
+  }
+
+  return ContextRegistry[globalName];
 }
 
 var PENDING = 0;
@@ -393,6 +378,16 @@ function resolveModel(response, id, model) {
     resolveModelChunk(chunk, model);
   }
 }
+function resolveProvider(response, id, contextName) {
+  var chunks = response._chunks;
+  chunks.set(
+    id,
+    createInitializedChunk(
+      response,
+      getOrCreateServerContext(contextName).Provider
+    )
+  );
+}
 function resolveModule(response, id, model) {
   var chunks = response._chunks;
   var chunk = chunks.get(id);
@@ -461,6 +456,11 @@ function processFullRow(response, row) {
       return;
     }
 
+    case 'P': {
+      resolveProvider(response, id, text);
+      return;
+    }
+
     case 'S': {
       resolveSymbol(response, id, JSON.parse(text));
       return;
diff --git a/packages/hydrogen/vendor/react-server-dom-vite/package.json b/packages/hydrogen/vendor/react-server-dom-vite/package.json
index accfb9d4fc..37f8e15bd2 100644
--- a/packages/hydrogen/vendor/react-server-dom-vite/package.json
+++ b/packages/hydrogen/vendor/react-server-dom-vite/package.json
@@ -11,7 +11,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "plugin.js",
     "writer.browser.server.js",
@@ -56,7 +55,6 @@
   },
   "peerDependencies": {
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
     "vite": "^2.7.1"
   },
   "dependencies": {
diff --git a/packages/playground/server-components/package.json b/packages/playground/server-components/package.json
index 545752e2bf..cd4e8127e6 100644
--- a/packages/playground/server-components/package.json
+++ b/packages/playground/server-components/package.json
@@ -19,7 +19,7 @@
     "@cloudflare/kv-asset-handler": "*",
     "@shopify/hydrogen": "^0.12.0",
     "miniflare": "^1.3.3",
-    "react": "0.0.0-experimental-529dc3ce8-20220124",
-    "react-dom": "0.0.0-experimental-529dc3ce8-20220124"
+    "react": "0.0.0-experimental-2bf7c02f0-20220314",
+    "react-dom": "0.0.0-experimental-2bf7c02f0-20220314"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 75e2a8bbe5..d8e0277ceb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9782,14 +9782,13 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@0.0.0-experimental-529dc3ce8-20220124:
-  version "0.0.0-experimental-529dc3ce8-20220124"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-529dc3ce8-20220124.tgz#62408979d684b43a5bea27934fda15fa31a80f2a"
-  integrity sha512-FNqeU2sPoynTu7Sh1IY880Bxg/xX22tlsTHoh67J+PTY7aFBAYMgE5PkxZon54DpQkv2p8gWVIIzSObi4U7ZjQ==
+react-dom@0.0.0-experimental-2bf7c02f0-20220314:
+  version "0.0.0-experimental-2bf7c02f0-20220314"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-2bf7c02f0-20220314.tgz#8da38113cbd3e64f0f11c6bb0870369d0466870c"
+  integrity sha512-QEgt5HMcqstPyhSEcUdDHsfslVXO7xsnI1EuvmHyTy6WqvlR+vLuNFdtTw9ivDoIBAFGI/C7s020xEa7dyxf8g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "0.0.0-experimental-529dc3ce8-20220124"
+    scheduler "0.0.0-experimental-2bf7c02f0-20220314"
 
 react-error-boundary@^3.1.3:
   version "3.1.4"
@@ -9838,13 +9837,12 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react@0.0.0-experimental-529dc3ce8-20220124:
-  version "0.0.0-experimental-529dc3ce8-20220124"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-529dc3ce8-20220124.tgz#843efb350b3034c5cb5d3d657ece78a8057b7a2b"
-  integrity sha512-EGC2hJU4tjaVgcLHE090M592h+AfO6Y88cnS1XtPMHWBgsNpO4t3rZfLFU4bMor3wRSKPEIzmEcpaPWCrJWctA==
+react@0.0.0-experimental-2bf7c02f0-20220314:
+  version "0.0.0-experimental-2bf7c02f0-20220314"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-2bf7c02f0-20220314.tgz#7cc98f6e472d8f92cbb2907bcd17c0330b4dda21"
+  integrity sha512-o0giPxuDQ2ouybfOVWWIjumYD6DE8chPgwvQ8okFkTQtp/Vq4XC+I+2oUlZBYFVycuf33OahTg9rO/67gErZJw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-pkg-up@^7.0.1:
   version "7.0.1"
@@ -10437,13 +10435,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@0.0.0-experimental-529dc3ce8-20220124:
-  version "0.0.0-experimental-529dc3ce8-20220124"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-529dc3ce8-20220124.tgz#4c3da241ae995e2790688e2a775e7db2e26f9d0f"
-  integrity sha512-mp0MaDWUfFuByyQS3syKFF3pqk7m6NcIsTNFsu/7jdy0GCqk7jy3T2YgHF3S1Y0qNhV9TYCgGwLTZSNaae2uUQ==
+scheduler@0.0.0-experimental-2bf7c02f0-20220314:
+  version "0.0.0-experimental-2bf7c02f0-20220314"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-2bf7c02f0-20220314.tgz#0c47b7356b64040f285806f72b27f9fb4790232b"
+  integrity sha512-RVBx9wfkLek9qsdlWRb5QRdtz4E5wouRbSWrSoNyQXUL96so75ZXhe6E5iNLhDnjOoP9m/s1Ga00KunDUYjcFg==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 scheduler@^0.20.2:
   version "0.20.2"