diff --git a/beta/package.json b/beta/package.json
index cca603d6a..f6996879d 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.3.3",
+    "@codesandbox/sandpack-react": "v0.19.8-experimental.7",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
diff --git a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
new file mode 100644
index 000000000..2298cbd1a
--- /dev/null
+++ b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
@@ -0,0 +1,37 @@
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+index ced9bd3..7e5e366 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+@@ -566,17 +566,16 @@ var REACT_TEMPLATE = {
+     },
+     "/index.js": {
+       code: `import React, { StrictMode } from "react";
+-import ReactDOM from "react-dom";
++import { createRoot } from "react-dom/client";
+ import "./styles.css";
+ 
+ import App from "./App";
+ 
+-const rootElement = document.getElementById("root");
+-ReactDOM.render(
++const root = createRoot(document.getElementById("root"));
++root.render(
+   <StrictMode>
+     <App />
+-  </StrictMode>,
+-  rootElement
++  </StrictMode>
+ );`
+     },
+     "/styles.css": {
+@@ -611,8 +610,8 @@ h1 {
+     }
+   },
+   dependencies: {
+-    react: "^17.0.0",
+-    "react-dom": "^17.0.0",
++    react: "^18.0.0",
++    "react-dom": "^18.0.0",
+     "react-scripts": "^4.0.0"
+   },
+   entry: "/index.js",
diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
index 24696e0ad..965bc816a 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -6,6 +6,7 @@ import cn from 'classnames';
 import {
   SandpackCodeViewer,
   SandpackProvider,
+  SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
@@ -67,29 +68,27 @@ const CodeBlock = function CodeBlock({
   const decorators = getDecoratedLineInfo();
   return (
     <div
+      translate="no"
       className={cn(
-        'sandpack sandpack--codeblock',
         'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
         !noMargin && 'my-8'
       )}>
       <SandpackProvider
-        files={{
-          [filename]: {
-            code: children.trimEnd(),
-          },
-        }}
         customSetup={{
           entry: filename,
-        }}
-        options={{
-          initMode: 'immediate',
-        }}
-        theme={CustomTheme}>
-        <SandpackCodeViewer
-          key={children.trimEnd()}
-          showLineNumbers={false}
-          decorators={decorators}
-        />
+          files: {
+            [filename]: {
+              code: children.trimEnd(),
+            },
+          },
+        }}>
+        <SandpackThemeProvider theme={CustomTheme}>
+          <SandpackCodeViewer
+            key={children.trimEnd()}
+            showLineNumbers={false}
+            decorators={decorators}
+          />
+        </SandpackThemeProvider>
       </SandpackProvider>
     </div>
   );
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index e5d44671f..bb0f1c671 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -8,8 +8,8 @@ import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
-  // SandpackReactDevTools,
-  SandpackLayout,
+  SandpackThemeProvider,
+  SandpackReactDevTools,
 } from '@codesandbox/sandpack-react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import cn from 'classnames';
@@ -17,9 +17,12 @@ import cn from 'classnames';
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
 import {Preview} from './Preview';
-
+import {CustomTheme} from './Themes';
 import {useSandpackLint} from './useSandpackLint';
 
+// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
+const emptyArray: Array<any> = [];
+
 export function CustomPreset({
   isSingleFile,
   showDevTools,
@@ -38,11 +41,11 @@ export function CustomPreset({
   const {code} = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const {activeFile} = sandpack;
-  if (!lineCountRef.current[activeFile]) {
-    lineCountRef.current[activeFile] = code.split('\n').length;
+  const {activePath} = sandpack;
+  if (!lineCountRef.current[activePath]) {
+    lineCountRef.current[activePath] = code.split('\n').length;
   }
-  const lineCount = lineCountRef.current[activeFile];
+  const lineCount = lineCountRef.current[activePath];
   const isExpandable = lineCount > 16 || isExpanded;
 
   return (
@@ -51,57 +54,59 @@ export function CustomPreset({
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
         <NavigationBar showDownload={isSingleFile} />
-
-        <SandpackLayout
-          className={cn(
-            showDevTools && devToolsLoaded && 'sp-layout-devtools',
-            !isExpandable && 'rounded-b-lg overflow-hidden',
-            isExpanded && 'sp-layout-expanded'
-          )}>
-          <SandpackCodeEditor
-            showLineNumbers
-            showInlineErrors
-            showTabs={false}
-            showRunButton={false}
-            extensions={lintExtensions}
-          />
-          <Preview
-            className="order-last xl:order-2"
-            isExpanded={isExpanded}
-            lintErrors={lintErrors}
-          />
-          {isExpandable && (
-            <button
-              translate="yes"
-              className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
-              onClick={() => {
-                const nextIsExpanded = !isExpanded;
-                flushSync(() => {
-                  setIsExpanded(nextIsExpanded);
-                });
-                if (!nextIsExpanded && containerRef.current !== null) {
-                  scrollIntoView(containerRef.current, {
-                    scrollMode: 'if-needed',
-                    block: 'nearest',
-                    inline: 'nearest',
+        <SandpackThemeProvider theme={CustomTheme}>
+          <div
+            ref={sandpack.lazyAnchorRef}
+            className={cn(
+              'sp-layout sp-custom-layout',
+              showDevTools && devToolsLoaded && 'sp-layout-devtools',
+              isExpanded && 'sp-layout-expanded'
+            )}>
+            <SandpackCodeEditor
+              showLineNumbers
+              showInlineErrors
+              showTabs={false}
+              showRunButton={false}
+              extensions={lintExtensions}
+              extensionsKeymap={emptyArray}
+            />
+            <Preview
+              className="order-last xl:order-2"
+              isExpanded={isExpanded}
+              lintErrors={lintErrors}
+            />
+            {isExpandable && (
+              <button
+                translate="yes"
+                className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
+                onClick={() => {
+                  const nextIsExpanded = !isExpanded;
+                  flushSync(() => {
+                    setIsExpanded(nextIsExpanded);
                   });
-                }
-              }}>
-              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
-                <IconChevron
-                  className="inline mr-1.5 text-xl"
-                  displayDirection={isExpanded ? 'up' : 'down'}
-                />
-                {isExpanded ? 'Show less' : 'Show more'}
-              </span>
-            </button>
-          )}
-        </SandpackLayout>
+                  if (!nextIsExpanded && containerRef.current !== null) {
+                    scrollIntoView(containerRef.current, {
+                      scrollMode: 'if-needed',
+                      block: 'nearest',
+                      inline: 'nearest',
+                    });
+                  }
+                }}>
+                <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
+                  <IconChevron
+                    className="inline mr-1.5 text-xl"
+                    displayDirection={isExpanded ? 'up' : 'down'}
+                  />
+                  {isExpanded ? 'Show less' : 'Show more'}
+                </span>
+              </button>
+            )}
+          </div>
 
-        {/* {showDevTools && (
-          // @ts-ignore TODO(@danilowoz): support devtools
-          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
-        )} */}
+          {showDevTools && (
+            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+          )}
+        </SandpackThemeProvider>
       </div>
     </>
   );
diff --git a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx b/beta/src/components/MDX/Sandpack/FilesDropdown.tsx
index 2c47de712..68d068ad7 100644
--- a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx
+++ b/beta/src/components/MDX/Sandpack/FilesDropdown.tsx
@@ -15,9 +15,9 @@ const getFileName = (filePath: string): string => {
 
 export function FilesDropdown() {
   const {sandpack} = useSandpack();
-  const {visibleFiles, setActiveFile, activeFile} = sandpack;
+  const {openPaths, setActiveFile, activePath} = sandpack;
   return (
-    <Listbox value={activeFile} onChange={setActiveFile}>
+    <Listbox value={activePath} onChange={setActiveFile}>
       <Listbox.Button>
         {({open}) => (
           <span
@@ -25,7 +25,7 @@ export function FilesDropdown() {
               'h-full py-2 px-1 mt-px -mb-px flex border-b-2 text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate'
             )}
             style={{maxWidth: '160px'}}>
-            {getFileName(activeFile)}
+            {getFileName(activePath)}
             <span className="ml-2">
               <IconChevron displayDirection={open ? 'up' : 'down'} />
             </span>
@@ -33,13 +33,13 @@ export function FilesDropdown() {
         )}
       </Listbox.Button>
       <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
-        {visibleFiles.map((filePath: string) => (
+        {openPaths.map((filePath: string) => (
           <Listbox.Option
             key={filePath}
             value={filePath}
             className={cn(
               'text-md mx-2 my-4 cursor-pointer',
-              filePath === activeFile && 'text-link dark:text-link-dark'
+              filePath === activePath && 'text-link dark:text-link-dark'
             )}>
             {getFileName(filePath)}
           </Listbox.Option>
diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
index 0d3eb921f..6114ef673 100644
--- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -16,7 +16,7 @@ import {FilesDropdown} from './FilesDropdown';
 export function NavigationBar({showDownload}: {showDownload: boolean}) {
   const {sandpack} = useSandpack();
   const [dropdownActive, setDropdownActive] = React.useState(false);
-  const {visibleFiles, clients} = sandpack;
+  const {openPaths, clients} = sandpack;
   const clientId = Object.keys(clients)[0];
   const {refresh} = useSandpackNavigation(clientId);
 
@@ -31,7 +31,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
   }, [dropdownActive]);
 
   React.useEffect(() => {
-    if (visibleFiles.length > 1) {
+    if (openPaths.length > 1) {
       resizeHandler();
       window.addEventListener('resize', resizeHandler);
       return () => {
@@ -39,7 +39,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
       };
     }
     return;
-  }, [visibleFiles.length, resizeHandler]);
+  }, [openPaths.length, resizeHandler]);
 
   const handleReset = () => {
     sandpack.resetAllFiles();
@@ -47,7 +47,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
   };
 
   return (
-    <div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg text-lg">
+    <div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
       <div className="px-4 lg:px-6">
         {dropdownActive ? <FilesDropdown /> : <FileTabs />}
       </div>
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 8df69e8e6..cf1a595bc 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -4,19 +4,12 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {
-  useSandpack,
-  LoadingOverlay,
-  SandpackStack,
-} from '@codesandbox/sandpack-react';
+import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react';
 import cn from 'classnames';
 import {Error} from './Error';
 import {SandpackConsole} from './Console';
 import type {LintDiagnostic} from './useSandpackLint';
 
-/**
- * TODO: can we use React.useId?
- */
 const generateRandomId = (): string =>
   Math.floor(Math.random() * 10000).toString();
 
@@ -156,8 +149,8 @@ export function Preview({
   // The best way to test it is to actually go through some challenges.
 
   return (
-    <SandpackStack
-      className={className}
+    <div
+      className={cn('sp-stack', className)}
       style={{
         // TODO: clean up this mess.
         ...customStyle,
@@ -165,7 +158,7 @@ export function Preview({
       }}>
       <div
         className={cn(
-          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
+          'p-0 sm:p-2 md:p-4 lg:p-8 md:bg-card md:dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
           // Allow content to be scrolled if it's too high to fit.
           // Note we don't want this in the expanded state
           // because it breaks position: sticky (and isn't needed anyway).
@@ -179,7 +172,7 @@ export function Preview({
               : isExpanded
               ? 'sticky'
               : undefined,
-            top: isExpanded ? '4rem' : undefined,
+            top: isExpanded ? '2rem' : undefined,
           }}>
           <iframe
             ref={iframeRef}
@@ -213,12 +206,11 @@ export function Preview({
           </div>
         )}
         <LoadingOverlay
-          showOpenInCodeSandbox
           clientId={clientId.current}
           loading={!isReady && iframeComputedHeight === null}
         />
       </div>
       {!error && <SandpackConsole />}
-    </SandpackStack>
+    </div>
   );
 }
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 75e00973c..8a609b509 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -7,7 +7,7 @@ import {SandpackProvider} from '@codesandbox/sandpack-react';
 import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
-import {CustomTheme} from './Themes';
+
 import type {SandpackSetup} from '@codesandbox/sandpack-react';
 
 type SandpackProps = {
@@ -77,19 +77,15 @@ function SandpackRoot(props: SandpackProps) {
   };
 
   return (
-    <div className="sandpack sandpack--playground sandbox my-8">
+    <div className="sandpack-container my-8" translate="no">
       <SandpackProvider
         template="react"
-        files={files}
-        customSetup={setup}
-        theme={CustomTheme}
-        options={{
-          autorun,
-          initMode: 'user-visible',
-          initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://6b760a26.sandpack-bundler.pages.dev',
-          logLevel: SandpackLogLevel.None,
-        }}>
+        customSetup={{...setup, files: files}}
+        autorun={autorun}
+        initMode="user-visible"
+        initModeObserverOptions={{rootMargin: '1400px 0px'}}
+        bundlerURL="https://6b760a26.sandpack-bundler.pages.dev"
+        logLevel={SandpackLogLevel.None}>
         <CustomPreset
           isSingleFile={isSingleFile}
           showDevTools={showDevTools}
diff --git a/beta/src/components/MDX/Sandpack/Themes.tsx b/beta/src/components/MDX/Sandpack/Themes.tsx
index 98c4b00eb..74cb47bb8 100644
--- a/beta/src/components/MDX/Sandpack/Themes.tsx
+++ b/beta/src/components/MDX/Sandpack/Themes.tsx
@@ -5,39 +5,32 @@
 import tailwindConfig from '../../../../tailwind.config';
 
 export const CustomTheme = {
-  colors: {
+  palette: {
+    activeText: 'inherit',
+    defaultText: 'inherit',
+    inactiveText: 'inherit',
+    activeBackground: 'inherit',
+    defaultBackground: 'inherit',
+    inputBackground: 'inherit',
     accent: 'inherit',
-    base: 'inherit',
-    clickable: 'inherit',
-    disabled: 'inherit',
-    error: 'inherit',
-    errorSurface: 'inherit',
-    hover: 'inherit',
-    surface1: 'inherit',
-    surface2: 'inherit',
-    surface3: 'inherit',
-    warning: 'inherit',
-    warningSurface: 'inherit',
+    errorBackground: 'inherit',
+    errorForeground: 'inherit',
   },
   syntax: {
-    plain: 'inherit',
-    comment: 'inherit',
-    keyword: 'inherit',
-    tag: 'inherit',
-    punctuation: 'inherit',
-    definition: 'inherit',
-    property: 'inherit',
-    static: 'inherit',
-    string: 'inherit',
+    plain: 'var(--theme-plain)',
+    comment: 'var(--theme-comment)',
+    keyword: 'var(--theme-keyword)',
+    tag: 'var(--theme-tag)',
+    punctuation: 'var(--theme-punctuation)',
+    definition: 'var(--theme-definition)',
+    property: 'var(--theme-property)',
+    static: 'var(--theme-static)',
+    string: 'var(--theme-string)',
   },
-  font: {
-    body: tailwindConfig.theme.extend.fontFamily.sans
-      .join(', ')
-      .replace(/"/gm, ''),
-    mono: tailwindConfig.theme.extend.fontFamily.mono
-      .join(', ')
-      .replace(/"/gm, ''),
-    size: tailwindConfig.theme.extend.fontSize.code,
+  typography: {
+    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
+    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
+    fontSize: tailwindConfig.theme.extend.fontSize.code,
     lineHeight: '24px',
   },
 };
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index 5a2795eaa..845510ea0 100644
--- a/beta/src/components/MDX/Sandpack/index.tsx
+++ b/beta/src/components/MDX/Sandpack/index.tsx
@@ -8,7 +8,7 @@ import {createFileMap} from './createFileMap';
 const SandpackRoot = React.lazy(() => import('./SandpackRoot'));
 
 const SandpackGlimmer = ({code}: {code: string}) => (
-  <div className="sandpack my-8">
+  <div className="sandpack-container my-8">
     <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
       <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
         <div className="px-4 lg:px-6">
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx
index effc63947..fa99018fe 100644
--- a/beta/src/pages/_app.tsx
+++ b/beta/src/pages/_app.tsx
@@ -10,6 +10,7 @@ import '@docsearch/css';
 import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
+import '@codesandbox/sandpack-react/dist/index.css';
 
 const EmptyAppShell = ({children}: {children: React.ReactNode}) => (
   <>{children}</>
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index b7b5bd45f..0c46ff5f2 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -4,7 +4,6 @@
 
 import * as React from 'react';
 import {Html, Head, Main, NextScript} from 'next/document';
-import {getSandpackCssText} from '@codesandbox/sandpack-react';
 
 const MyDocument = () => {
   //  @todo specify language in HTML?
@@ -12,7 +11,6 @@ const MyDocument = () => {
     <Html lang="en">
       <Head />
       <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
-        <style id="sandpack">{getSandpackCssText()}</style>
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 5340e15e9..300a80df2 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -304,7 +304,7 @@ Often, you'll want your component to "remember" some information and display it.
 
 First, import [`useState`](/apis/react/useState) from React:
 
-```js
+```js {1,4}
 import { useState } from 'react';
 ```
 
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index cea683960..1867704ba 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -2,258 +2,282 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-/** 
-  * Theme
-  */
 html .sp-wrapper {
   color-scheme: inherit;
-  -webkit-font-smoothing: antialiased;
 
-  --sp-colors-accent: #087ea4;
-  --sp-colors-clickable: #959da5;
-  --sp-colors-disabled: #24292e;
-  --sp-colors-error: #811e18;
-  --sp-colors-error-surface: #ffcdca;
-  --sp-colors-surface1: #fff;
-  --sp-colors-surface2: #e4e7eb;
-
-  --sp-syntax-color-plain: #24292e;
-  --sp-syntax-color-comment: #6a737d;
-  --sp-syntax-color-keyword: #d73a49;
-  --sp-syntax-color-tag: #22863a;
-  --sp-syntax-color-punctuation: #24292e;
-  --sp-syntax-color-definition: #6f42c1;
-  --sp-syntax-color-property: #005cc5;
-  --sp-syntax-color-static: #032f62;
-  --sp-syntax-color-string: #032f62;
+  /* palette */
+  --sp-colors-fg-active: #24292e !important;
+  --sp-colors-fg-default: #959da5 !important;
+  --sp-colors-fg-inactive: #e4e7eb !important;
+  --sp-colors-bg-active: #e4e7eb !important;
+  --sp-colors-bg-default: #ffffff !important;
+  --sp-colors-bg-default-overlay: #ffffff !important;
+  --sp-colors-bg-input: #ffffff !important;
+  --sp-colors-accent: #c8c8fa !important;
+  --sp-colors-bg-error: #ffcdca !important;
+  --sp-colors-fg-error: #811e18 !important;
+  /* syntax */
+  --theme-plain: #24292e;
+  --theme-comment: #6a737d;
+  --theme-keyword: #d73a49;
+  --theme-tag: #22863a;
+  --theme-punctuation: #24292e;
+  --theme-definition: #6f42c1;
+  --theme-property: #005cc5;
+  --theme-static: #032f62;
+  --theme-string: #032f62;
 }
-
 html.dark .sp-wrapper {
-  --sp-colors-accent: #149eca;
-  --sp-colors-clickable: #999;
-  --sp-colors-disabled: #fff;
-  --sp-colors-error: #811e18;
-  --sp-colors-error-surface: #ffcdca;
-  --sp-colors-surface1: #16181d;
-  --sp-colors-surface2: #343a46;
-
-  --sp-syntax-color-plain: #ffffff;
-  --sp-syntax-color-comment: #757575;
-  --sp-syntax-color-keyword: #77b7d7;
-  --sp-syntax-color-tag: #dfab5c;
-  --sp-syntax-color-punctuation: #ffffff;
-  --sp-syntax-color-definition: #86d9ca;
-  --sp-syntax-color-property: #77b7d7;
-  --sp-syntax-color-static: #c64640;
-  --sp-syntax-color-string: #977cdc;
-}
-
-/**
- * Reset
- */
-.sandpack--playground .sp-layout,
-.sandpack--playground .sp-tabs,
-.sandpack--playground .cm-activeLine,
-.sandpack .cm-editor,
-.sandpack--playground .cm-editor .cm-matchingBracket {
-  border: none;
-  background-color: transparent;
-}
-
-.sandpack--playground .cm-content {
-  caret-color: initial;
-}
-
-/**
- * Layout
- */
-.sandpack .sp-wrapper {
-  width: 100%;
-}
-.sandpack .sp-layout {
-  overflow: visible;
-  -webkit-mask-image: -webkit-radial-gradient(
-    var(--sp-colors-surface1),
-    var(--sp-colors-surface1)
-  ); /* safest way to make all corner rounded */
-
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
-.sandpack .sp-layout > .sp-stack {
-  flex: 1 1 0px;
-  height: var(--sp-layout-height);
-}
-
-.sandpack .sp-layout > :not(:first-child) {
-  border-left: 1px solid var(--sp-colors-surface2);
-  border-top: 1px solid var(--sp-colors-surface2);
-  margin-left: -1px;
-  margin-top: -1px;
-  position: relative;
-}
-
-.sandpack .sp-cm {
-  padding-left: 8px;
-}
-
-/**
- * Focus ring
- */
-.sandpack--playground .sp-tab-button {
-  transition: none;
-}
-
-.sandpack--playground .sp-tab-button:focus {
-  outline: revert;
-}
-
-.sandpack--playground .sp-tab-button:focus-visible {
-  box-shadow: none;
-}
-
-.sandpack .sp-cm:focus-visible {
-  box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4);
-}
-
-/**
- * Navigation
- */
-.sandpack--playground .sp-tabs-scrollable-container {
-  padding: 0;
+  --sp-colors-fg-active: #ffffff !important;
+  --sp-colors-fg-default: #999999 !important;
+  --sp-colors-fg-inactive: #343434 !important;
+  --sp-colors-bg-active: #343434 !important;
+  --sp-colors-bg-default: #16181d !important;
+  --sp-colors-bg-default-overlay: #16181d !important;
+  --sp-colors-bg-input: #242424 !important;
+  --sp-colors-accent: #6caedd !important;
+  --sp-colors-bg-error: #ffcdca !important;
+  --sp-colors-fg-error: #811e18 !important;
+  /* syntax */
+  --theme-plain: #ffffff;
+  --theme-comment: #757575;
+  --theme-keyword: #77b7d7;
+  --theme-tag: #dfab5c;
+  --theme-punctuation: #ffffff;
+  --theme-definition: #86d9ca;
+  --theme-property: #77b7d7;
+  --theme-static: #c64640;
+  --theme-string: #977cdc;
+}
+
+.sp-tabs,
+.sp-tab-button:hover {
+  background: none !important;
 }
 
 .sp-tabs .sp-tab-button {
+  color: #087ea4;
   padding: 0 4px;
   border-bottom: 2px solid transparent;
 }
 
-@media (min-width: 768px) {
-  .sp-tabs .sp-tab-button {
-    margin: 0 12px 0 0;
-  }
+html.dark .sp-tabs .sp-tab-button {
+  color: #149eca;
 }
 
-.sp-tabs .sp-tab-button,
-.sp-tabs .sp-tab-button:hover:not(:disabled, [data-active='true']),
-.sp-tabs .sp-tab-button[data-active='true'] {
-  color: var(--sp-colors-accent);
+.sp-tabs .sp-tab-button:hover {
+  color: #087ea4;
 }
 
-.sp-tabs .sp-tab-button[data-active='true'] {
-  border-bottom: 2px solid var(--sp-colors-accent);
+html.dark .sp-tabs .sp-tab-button:hover {
+  color: #149eca;
 }
 
-/**
- * Editor
- */
-.sandpack .sp-code-editor .cm-content,
-.sandpack .sp-code-editor .cm-gutters,
-.sandpack .sp-code-editor .cm-gutterElement {
-  padding: 0;
-  -webkit-font-smoothing: auto; /* Improve the legibility */
+.sp-tabs .sp-tab-button[data-active='true'] {
+  color: #087ea4;
+  border-bottom: 2px solid #087ea4;
 }
 
-.sandpack--playground .sp-code-editor .cm-line {
-  padding: 0 var(--sp-space-3);
+html.dark .sp-tabs .sp-tab-button[data-active='true'] {
+  color: #149eca;
+  border-bottom: 2px solid #149eca;
 }
 
-.sandpack--playground .sp-code-editor .cm-lineNumbers {
-  padding-left: var(--sp-space-1);
-  padding-right: var(--sp-space-1);
-  font-size: 13.6px;
+.sp-stack .sp-code-editor,
+.sp-tabs .sp-tabs-scrollable-container {
+  overflow: hidden;
 }
 
-.sandpack--playground .sp-code-editor .cm-line.cm-errorLine {
-  @apply bg-red-400;
-  --tw-bg-opacity: 0.1; /* Background tweak: base color + opacity */
+.sp-code-editor .cm-errorLine {
+  background-color: rgba(255, 107, 99, 0.1);
   position: relative;
-  padding-right: 2em;
+  padding-right: 2em !important;
   display: inline-block;
   min-width: 100%;
 }
 
 .sp-code-editor .cm-errorLine:after {
-  @apply text-red-500;
   position: absolute;
   right: 8px;
   top: 0;
   content: '\26A0';
   font-size: 22px;
   line-height: 20px;
+  color: #ff3d3d;
 }
-
 .sp-code-editor .cm-tooltip {
   border: 0;
   max-width: 200px;
 }
-
+html.dark .sp-code-editor .cm-diagnostic {
+  color: var(--sp-colors-bg-default);
+}
 .sp-code-editor .cm-diagnostic-error {
   @apply border-red-40;
 }
-
-.sp-code-editor .sp-cm .cm-scroller {
-  overflow: auto;
-  padding: 18px 0;
+.sp-code-editor .cm-diagnostic-warning {
+  border-left: 5px solid orange;
 }
 
-/**
- * Loading component
+/*
+ * These are manually adjusted to match the final
+ * rendered version without any layout shifts.
+ * Note this affects both sandboxes and code blocks.
+ *
+ * There are probably more maintainable ways to do this.
+ * However, as long as there are kind people paying close
+ * attention to these subtler details, I shall sleep in peace.
+ *
+ * If you know a better way to keep them from diverging, send a PR.
  */
-.sandpack--playground .sp-cube-wrapper {
-  background-color: var(--sp-colors-surface1);
+.sp-cm {
+  -webkit-text-size-adjust: none !important;
+  padding: 0 !important;
+}
+.cm-wrap {
+  background: transparent !important;
+}
+.sp-pre-placeholder {
+  display: block !important;
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+  padding: 18px var(--sp-space-3) !important;
+  @apply font-mono !important;
+  font-size: 13.6px !important;
+  line-height: 24px !important;
+  height: 100%;
 }
-
-.sandpack--playground .sp-overlay {
-  @apply bg-card;
+.text-xl .sp-pre-placeholder {
+  font-size: 16px !important;
+  line-height: 24px !important;
+}
+.sp-cm .cm-scroller {
+  overflow: auto !important;
+  padding: 18px 0 !important;
 }
 
-html.dark .sandpack--playground .sp-overlay {
-  @apply bg-wash-dark;
+.console .sp-cm,
+.console .sp-cm .cm-scroller,
+.console .sp-cm .cm-line {
+  padding: 0px !important;
 }
 
-/**
- * CodeBlock
- */
-.sandpack--codeblock .cm-content {
-  padding: 0;
+.sp-cm .cm-gutters {
+  background-color: var(--sp-colors-bg-default);
+  z-index: 1;
+}
+.sp-wrapper {
+  width: 100% !important;
+}
+.sp-wrapper .sp-custom-layout {
+  overflow: initial;
+  border: 0px solid transparent;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+.sp-wrapper .sp-layout-devtools {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+html.dark .sp-layout > :not(:first-child) {
+  border-color: #343a46;
+}
+html.dark .sp-layout {
+  background-color: #343a46;
+}
+html .sp-loading {
+  background-color: transparent;
+}
+html.dark .sp-loading {
+  background-color: #23272f;
 }
 
-.sandpack--codeblock .cm-content.cm-readonly .cm-line {
-  padding: 0 var(--sp-space-3);
+@media (min-width: 768px) {
+  .sp-tabs .sp-tab-button {
+    margin: 0 12px 0 0;
+  }
 }
 
-/**
- * Placeholder
- */
-.sandpack .sp-code-editor .sp-pre-placeholder {
-  @apply font-mono;
-  font-size: 13.6px;
-  line-height: 24px;
-  padding: 18px 0;
+/* Devtools */
+.sp-devtools {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  overflow: hidden;
 }
+.sp-devtools > div {
+  --color-background: var(--sp-colors-bg-default) !important;
+  --color-background-inactive: var(--sp-colors-fg-inactive) !important;
+  --color-background-selected: #087ea4 !important;
+  --color-background-hover: transparent !important;
+  --color-modal-background: #ffffffd2 !important;
 
-.sandpack--codeblock .sp-code-editor .sp-pre-placeholder {
-  margin-left: var(--sp-space-3) !important; /* override inline style */
+  --color-tab-selected-border: #087ea4 !important;
+
+  --color-component-name: var(--theme-definition) !important;
+  --color-attribute-name: var(--theme-property) !important;
+  --color-attribute-value: var(--theme-string) !important;
+  --color-attribute-editable-value: var(--theme-property) !important;
+  --color-attribute-name-not-editable: var(--sp-colors-fg-default) !important;
+  --color-button-background-focus: var(--sp-colors-fg-inactive) !important;
+
+  --color-button-active: #087ea4 !important;
+  --color-button-background: transparent !important;
+  --color-button: var(--sp-colors-fg-default) !important;
+  --color-button-hover: var(--sp-colors-fg-active) !important;
+
+  --color-border: var(--sp-colors-fg-inactive) !important;
+  --color-text: rgb(35, 39, 47) !important;
+}
+html.dark .sp-devtools > div {
+  --color-text: var(--sp-colors-fg-default) !important;
+  --color-modal-background: #16181de0 !important;
 }
 
-.sandpack--playground .sp-code-editor .sp-pre-placeholder {
-  margin-left: var(--sp-space-10) !important; /* override inline style */
+.sp-devtools table td {
+  border: 1px solid var(--sp-colors-fg-inactive);
 }
 
-.text-xl .sp-pre-placeholder {
-  font-size: 16px !important;
-  line-height: 24px !important;
+/* Make focus rings work */
+.sp-tab-button {
+  transition: none !important;
+}
+.sp-tab-button:focus {
+  outline: revert !important;
+}
+.sp-tab-button:focus-visible {
+  box-shadow: none !important;
+}
+.sp-cm:focus-visible {
+  box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4) !important;
+}
+.cm-line {
+  padding: 0 var(--sp-space-3) !important;
+}
+.cm-lineNumbers {
+  padding-left: var(--sp-space-1) !important;
+  padding-right: var(--sp-space-1) !important;
 }
 
-/**
- * Expand button
- */
+/* For iOS: prevent browser zoom when clicking on sandbox. */
+@media screen and (max-width: 768px) {
+  @supports (-webkit-overflow-scrolling: touch) {
+    .cm-content {
+      font-size: initial;
+    }
+    .DocSearch-Input {
+      font-size: initial;
+    }
+  }
+}
 
+.sp-cm {
+  padding-left: 8px !important;
+}
 .sp-layout {
   min-height: 216px;
 }
-
 .sp-layout > .sp-stack:nth-child(1) {
   /* Force vertical if there isn't enough space. */
   min-width: 431px;
@@ -261,7 +285,6 @@ html.dark .sandpack--playground .sp-overlay {
   /* Max height is needed to avoid too long files. */
   max-height: 40vh;
 }
-
 .sp-layout > .sp-stack:nth-child(2) {
   /* Force vertical if there isn't enough space. */
   min-width: 431px;
@@ -275,13 +298,11 @@ html.dark .sandpack--playground .sp-overlay {
   max-height: unset;
   height: auto;
 }
-
 .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
   /* Clicking "show more" lets mobile preview go full height. */
   max-height: unset;
   height: auto;
 }
-
 @media (min-width: 1280px) {
   .sp-layout > .sp-stack:nth-child(1) {
     /* On desktop, clamp height by pixels instead. */
@@ -303,106 +324,8 @@ html.dark .sandpack--playground .sp-overlay {
   }
 }
 
-.sandpack--playground .sp-layout .sandpack-expand {
-  border-left: none;
-  margin-left: 0;
-}
-
 .expandable-callout .sp-stack:nth-child(2) {
   min-width: 431px;
   min-height: 40vh;
   max-height: 40vh;
 }
-
-/**
- * Integrations: console
- */
-.console .sp-cm,
-.console .sp-cm .cm-scroller,
-.console .sp-cm .cm-line {
-  padding: 0px !important;
-}
-
-/**
- * Integrations: eslint
- */
-.sp-code-editor .cm-diagnostic {
-  @apply text-secondary;
-}
-
-/**
- * Integrations: React devtools inline
- */
-.sp-devtools {
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.sp-wrapper .sp-layout-devtools {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/**
- * Overwrite inline sty
- */
-.sp-devtools > div {
-  --color-background: var(--sp-colors-surface1) !important;
-  --color-background-inactive: var(--sp-colors-surface2) !important;
-  --color-background-selected: var(--sp-colors-accent) !important;
-  --color-background-hover: transparent !important;
-  --color-modal-background: #ffffffd2 !important;
-
-  --color-tab-selected-border: #087ea4 !important;
-
-  --color-component-name: var(--sp-syntax-color-definition) !important;
-  --color-attribute-name: var(--sp-syntax-color-property) !important;
-  --color-attribute-value: var(--sp-syntax-color-string) !important;
-  --color-attribute-editable-value: var(--sp-syntax-color-property) !important;
-  --color-attribute-name-not-editable: var(--sp-colors-clickable) !important;
-  --color-button-background-focus: var(--sp-colors-surface2) !important;
-
-  --color-button-active: var(--sp-colors-accent) !important;
-  --color-button-background: transparent !important;
-  --color-button: var(--sp-colors-clickable) !important;
-  --color-button-hover: var(--sp-colors-disabled) !important;
-
-  --color-border: var(--sp-colors-surface2) !important;
-  --color-text: rgb(35, 39, 47) !important;
-}
-
-html.dark .sp-devtools > div {
-  --color-text: var(--sp-colors-clickable) !important;
-  --color-modal-background: #16181de0 !important;
-}
-
-.sp-devtools table td {
-  border: 1px solid var(--sp-colors-surface2);
-}
-
-/**
- * Hard fixes
- */
-
-/**
-  * The text-size-adjust CSS property controls the text inflation
-  * algorithm used on some smartphones and tablets
-  */
-.sandpack .sp-cm {
-  -webkit-text-size-adjust: none;
-}
-
-/** 
- * For iOS: prevent browser zoom when clicking on sandbox
- */
-@media screen and (max-width: 768px) {
-  @supports (-webkit-overflow-scrolling: touch) {
-    .cm-content {
-      font-size: initial;
-    }
-    .DocSearch-Input {
-      font-size: initial;
-    }
-  }
-}
diff --git a/beta/yarn.lock b/beta/yarn.lock
index 17cedebc2..235a7c230 100644
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -409,18 +409,6 @@
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.23"
 
-"@codemirror/highlight@^0.19.0":
-  version "0.19.8"
-  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.8.tgz#a95aee8ae4389b01f820aa79c48f7b4388087d92"
-  integrity sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==
-  dependencies:
-    "@codemirror/language" "^0.19.0"
-    "@codemirror/rangeset" "^0.19.0"
-    "@codemirror/state" "^0.19.3"
-    "@codemirror/view" "^0.19.39"
-    "@lezer/common" "^0.15.0"
-    style-mod "^4.0.0"
-
 "@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
   version "0.19.7"
   resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.7.tgz#91a0c9994c759f5f153861e3aae74ff9e7c7c35b"
@@ -452,7 +440,7 @@
     "@codemirror/state" "^0.19.0"
     "@lezer/css" "^0.15.2"
 
-"@codemirror/lang-html@^0.19.0", "@codemirror/lang-html@^0.19.4":
+"@codemirror/lang-html@^0.19.4":
   version "0.19.4"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-0.19.4.tgz#e6eec28462f18842a0e108732a214a7416b5e333"
   integrity sha512-GpiEikNuCBeFnS+/TJSeanwqaOfNm8Kkp9WpVNEPZCLyW1mAMCuFJu/3xlWYeWc778Hc3vJqGn3bn+cLNubgCA==
@@ -479,19 +467,6 @@
     "@codemirror/view" "^0.19.0"
     "@lezer/javascript" "^0.15.1"
 
-"@codemirror/lang-markdown@^0.19.3":
-  version "0.19.6"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-markdown/-/lang-markdown-0.19.6.tgz#761301d276fcfbdf88440f0333785efd71c2a4f5"
-  integrity sha512-ojoHeLgv1Rfu0GNGsU0bCtXAIp5dy4VKjndHScITQdlCkS/+SAIfuoeowEx+nMAQwTxI+/9fQZ3xdZVznGFYug==
-  dependencies:
-    "@codemirror/highlight" "^0.19.0"
-    "@codemirror/lang-html" "^0.19.0"
-    "@codemirror/language" "^0.19.0"
-    "@codemirror/state" "^0.19.3"
-    "@codemirror/view" "^0.19.0"
-    "@lezer/common" "^0.15.0"
-    "@lezer/markdown" "^0.15.0"
-
 "@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7":
   version "0.19.7"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.7.tgz#9eef8e827692d93a701b18db9d46a42be34ecca6"
@@ -572,29 +547,18 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codemirror/view@^0.19.39":
-  version "0.19.48"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.48.tgz#1c657e2b0f8ed896ac6448d6e2215ab115e2a0fc"
-  integrity sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==
-  dependencies:
-    "@codemirror/rangeset" "^0.19.5"
-    "@codemirror/state" "^0.19.3"
-    "@codemirror/text" "^0.19.0"
-    style-mod "^4.0.0"
-    w3c-keyname "^2.2.4"
-
-"@codesandbox/sandpack-client@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.3.2.tgz#e9328a2fe1508a034e72686c3d234dfc95238b7d"
-  integrity sha512-EQj3jxW3ispcScE5Yw6lWZgn94RfIBgb+KTCe49gZt4DIUmcDXVhnRh3ArcfBcTNqr7TeuLgHYwJ9nHP/T1V8w==
+"@codesandbox/sandpack-client@^0.19.8-experimental.2":
+  version "0.19.9"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-0.19.9.tgz#29fded94a3087de155035634d596651268e27797"
+  integrity sha512-/PPFqAJ8NSlP1jpWjQtwvmVS5o1xLRVqdbzXF7Num7zVUdYLZAbpzT7KijneZSmdcJHOvCCAYGLKJg+TcgmLjw==
   dependencies:
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@codesandbox/sandpack-react@1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.3.3.tgz#c293c9e6f1f32db77e7d9b1acce3eea50e52bf71"
-  integrity sha512-jXI0zCCIk6+vKUxgblTj1Z//PpKIzikFeK1tnO5UwI73ZbCWlUtZZgKrQ/F0D5iHwNUp30Y/wcfUcskYBeNUsQ==
+"@codesandbox/sandpack-react@v0.19.8-experimental.7":
+  version "0.19.8-experimental.7"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.7.tgz#44724fc0cce5d470eae9d6bc757ae237b699c019"
+  integrity sha512-+zT07s7LYxWq4bQYEStZszpfQAbbqP7PukF0TlJxYbjDVDXDhikdBkxuD1hXvVA6FOPdgLuF2fdnDR5NViktwA==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"
@@ -606,18 +570,16 @@
     "@codemirror/lang-css" "^0.19.3"
     "@codemirror/lang-html" "^0.19.4"
     "@codemirror/lang-javascript" "^0.19.3"
-    "@codemirror/lang-markdown" "^0.19.3"
     "@codemirror/language" "^0.19.7"
     "@codemirror/matchbrackets" "^0.19.3"
     "@codemirror/state" "^0.19.6"
     "@codemirror/view" "^0.19.32"
-    "@codesandbox/sandpack-client" "^1.3.2"
+    "@codesandbox/sandpack-client" "^0.19.8-experimental.2"
     "@react-hook/intersection-observer" "^3.1.1"
-    "@stitches/core" "^1.2.6"
     codesandbox-import-util-types "^2.2.3"
     lodash.isequal "^4.5.0"
     lz-string "^1.4.4"
-    react-devtools-inline "4.4.0"
+    react-devtools-inline "4.22.1"
     react-is "^17.0.2"
 
 "@csstools/convert-colors@^1.4.0":
@@ -707,13 +669,6 @@
   dependencies:
     "@lezer/common" "^0.15.0"
 
-"@lezer/markdown@^0.15.0":
-  version "0.15.6"
-  resolved "https://registry.yarnpkg.com/@lezer/markdown/-/markdown-0.15.6.tgz#2a826a507399b32176efdc35554397f05227d2aa"
-  integrity sha512-1XXLa4q0ZthryUEfO47ipvZHxNb+sCKoQIMM9dKs5vXZOBbgF2Vah/GL3g26BFIAEc2uCv4VQnI+lSrv58BT3g==
-  dependencies:
-    "@lezer/common" "^0.15.0"
-
 "@mdx-js/loader@^1.6.16":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -879,11 +834,6 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
   integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
 
-"@stitches/core@^1.2.6":
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
-  integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
-
 "@types/body-scroll-lock@^2.6.1":
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-2.6.2.tgz#ce56d17e1bf8383c08a074733c4e9e536a59ae61"
@@ -1728,14 +1678,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
 
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
 damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1920,32 +1862,6 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.61"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.61.tgz#311de37949ef86b6b0dcea894d1ffedb909d3269"
-  integrity sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==
-  dependencies:
-    es6-iterator "^2.0.3"
-    es6-symbol "^3.1.3"
-    next-tick "^1.1.0"
-
-es6-iterator@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
-  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -2213,13 +2129,6 @@ execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-ext@^1.1.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.6.0.tgz#3871d50641e874cc172e2b53f919842d19db4c52"
-  integrity sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==
-  dependencies:
-    type "^2.5.0"
-
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -3340,11 +3249,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-next-tick@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
-  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
-
 next@12.1.7-canary.11:
   version "12.1.7-canary.11"
   resolved "https://registry.yarnpkg.com/next/-/next-12.1.7-canary.11.tgz#5b732cc630801db651a0a81199fe94d215e3da1c"
@@ -4122,12 +4026,13 @@ react-collapsed@3.1.0:
     raf "^3.4.1"
     tiny-warning "^1.0.3"
 
-react-devtools-inline@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68"
-  integrity sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==
+react-devtools-inline@4.22.1:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.22.1.tgz#339ef44279317de10ebafcf12e3e48b9f0c24481"
+  integrity sha512-nYLfc5ZwXZN8ooQ2PNxS2LdLjQeRYYhJoDs6dMVQ8vsNx1m3qjaKBp4baLr4Cv+uv7LWSv2on7Rd2QpkYMLOeQ==
   dependencies:
-    es6-symbol "^3"
+    source-map-js "^0.6.2"
+    sourcemap-codec "^1.4.8"
 
 react-dom@0.0.0-experimental-82c64e1a4-20220520:
   version "0.0.0-experimental-82c64e1a4-20220520"
@@ -4570,6 +4475,11 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
 source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -4585,6 +4495,11 @@ source-map@^0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 space-separated-tokens@^1.0.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
@@ -4918,16 +4833,6 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
-
-type@^2.5.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.6.0.tgz#3ca6099af5981d36ca86b78442973694278a219f"
-  integrity sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==
-
 typescript@^4.0.2:
   version "4.5.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"