From 537e0a354d50bb1167de0f5c4b1865a067257f44 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 31 Aug 2022 23:35:37 +0100
Subject: [PATCH] [beta] upgrade sandpack and refactor sandpack.css (#4843)

* upgrade sandpack and address breaking changes

* remove unnecessaries fixes

* use Sandpack components instead reimplementing them

* refactor: sandpack.css

* fixes

* fix: sticky and syntax-highlight

Co-authored-by: dan <dan.abramov@gmail.com>
---
 beta/package.json                             |   2 +-
 ...sandpack-react+0.19.8-experimental.4.patch |  37 --
 .../components/MDX/CodeBlock/CodeBlock.tsx    |  31 +-
 .../components/MDX/Sandpack/CustomPreset.tsx  | 117 ++---
 .../components/MDX/Sandpack/FilesDropdown.tsx |  10 +-
 .../components/MDX/Sandpack/NavigationBar.tsx |   8 +-
 beta/src/components/MDX/Sandpack/Preview.tsx  |  20 +-
 .../components/MDX/Sandpack/SandpackRoot.tsx  |  20 +-
 beta/src/components/MDX/Sandpack/Themes.tsx   |  51 +-
 beta/src/components/MDX/Sandpack/index.tsx    |   2 +-
 beta/src/pages/_app.tsx                       |   1 -
 beta/src/pages/_document.tsx                  |   2 +
 beta/src/pages/learn/index.md                 |   2 +-
 beta/src/styles/sandpack.css                  | 493 ++++++++++--------
 beta/yarn.lock                                | 149 +++++-
 15 files changed, 548 insertions(+), 397 deletions(-)
 delete mode 100644 beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch

diff --git a/beta/package.json b/beta/package.json
index f6996879..cca603d6 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": "v0.19.8-experimental.7",
+    "@codesandbox/sandpack-react": "1.3.3",
     "@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
deleted file mode 100644
index 2298cbd1..00000000
--- a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
+++ /dev/null
@@ -1,37 +0,0 @@
-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 965bc816..24696e0a 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -6,7 +6,6 @@ import cn from 'classnames';
 import {
   SandpackCodeViewer,
   SandpackProvider,
-  SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
@@ -68,27 +67,29 @@ 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,
-          files: {
-            [filename]: {
-              code: children.trimEnd(),
-            },
-          },
-        }}>
-        <SandpackThemeProvider theme={CustomTheme}>
-          <SandpackCodeViewer
-            key={children.trimEnd()}
-            showLineNumbers={false}
-            decorators={decorators}
-          />
-        </SandpackThemeProvider>
+        }}
+        options={{
+          initMode: 'immediate',
+        }}
+        theme={CustomTheme}>
+        <SandpackCodeViewer
+          key={children.trimEnd()}
+          showLineNumbers={false}
+          decorators={decorators}
+        />
       </SandpackProvider>
     </div>
   );
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index bb0f1c67..e5d44671 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,
-  SandpackThemeProvider,
-  SandpackReactDevTools,
+  // SandpackReactDevTools,
+  SandpackLayout,
 } from '@codesandbox/sandpack-react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import cn from 'classnames';
@@ -17,11 +17,8 @@ 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> = [];
+import {useSandpackLint} from './useSandpackLint';
 
 export function CustomPreset({
   isSingleFile,
@@ -41,11 +38,11 @@ export function CustomPreset({
   const {code} = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const {activePath} = sandpack;
-  if (!lineCountRef.current[activePath]) {
-    lineCountRef.current[activePath] = code.split('\n').length;
+  const {activeFile} = sandpack;
+  if (!lineCountRef.current[activeFile]) {
+    lineCountRef.current[activeFile] = code.split('\n').length;
   }
-  const lineCount = lineCountRef.current[activePath];
+  const lineCount = lineCountRef.current[activeFile];
   const isExpandable = lineCount > 16 || isExpanded;
 
   return (
@@ -54,59 +51,57 @@ export function CustomPreset({
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
         <NavigationBar showDownload={isSingleFile} />
-        <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);
-                  });
-                  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 && (
-            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+        <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',
+                  });
+                }
+              }}>
+              <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>
           )}
-        </SandpackThemeProvider>
+        </SandpackLayout>
+
+        {/* {showDevTools && (
+          // @ts-ignore TODO(@danilowoz): support devtools
+          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+        )} */}
       </div>
     </>
   );
diff --git a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx b/beta/src/components/MDX/Sandpack/FilesDropdown.tsx
index 68d068ad..2c47de71 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 {openPaths, setActiveFile, activePath} = sandpack;
+  const {visibleFiles, setActiveFile, activeFile} = sandpack;
   return (
-    <Listbox value={activePath} onChange={setActiveFile}>
+    <Listbox value={activeFile} 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(activePath)}
+            {getFileName(activeFile)}
             <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">
-        {openPaths.map((filePath: string) => (
+        {visibleFiles.map((filePath: string) => (
           <Listbox.Option
             key={filePath}
             value={filePath}
             className={cn(
               'text-md mx-2 my-4 cursor-pointer',
-              filePath === activePath && 'text-link dark:text-link-dark'
+              filePath === activeFile && '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 6114ef67..0d3eb921 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 {openPaths, clients} = sandpack;
+  const {visibleFiles, 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 (openPaths.length > 1) {
+    if (visibleFiles.length > 1) {
       resizeHandler();
       window.addEventListener('resize', resizeHandler);
       return () => {
@@ -39,7 +39,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
       };
     }
     return;
-  }, [openPaths.length, resizeHandler]);
+  }, [visibleFiles.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 rounded-b-none">
+    <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="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 cf1a595b..8df69e8e 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -4,12 +4,19 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react';
+import {
+  useSandpack,
+  LoadingOverlay,
+  SandpackStack,
+} 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();
 
@@ -149,8 +156,8 @@ export function Preview({
   // The best way to test it is to actually go through some challenges.
 
   return (
-    <div
-      className={cn('sp-stack', className)}
+    <SandpackStack
+      className={className}
       style={{
         // TODO: clean up this mess.
         ...customStyle,
@@ -158,7 +165,7 @@ export function Preview({
       }}>
       <div
         className={cn(
-          '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',
+          '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',
           // 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).
@@ -172,7 +179,7 @@ export function Preview({
               : isExpanded
               ? 'sticky'
               : undefined,
-            top: isExpanded ? '2rem' : undefined,
+            top: isExpanded ? '4rem' : undefined,
           }}>
           <iframe
             ref={iframeRef}
@@ -206,11 +213,12 @@ export function Preview({
           </div>
         )}
         <LoadingOverlay
+          showOpenInCodeSandbox
           clientId={clientId.current}
           loading={!isReady && iframeComputedHeight === null}
         />
       </div>
       {!error && <SandpackConsole />}
-    </div>
+    </SandpackStack>
   );
 }
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 8a609b50..75e00973 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,15 +77,19 @@ function SandpackRoot(props: SandpackProps) {
   };
 
   return (
-    <div className="sandpack-container my-8" translate="no">
+    <div className="sandpack sandpack--playground sandbox my-8">
       <SandpackProvider
         template="react"
-        customSetup={{...setup, files: files}}
-        autorun={autorun}
-        initMode="user-visible"
-        initModeObserverOptions={{rootMargin: '1400px 0px'}}
-        bundlerURL="https://6b760a26.sandpack-bundler.pages.dev"
-        logLevel={SandpackLogLevel.None}>
+        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,
+        }}>
         <CustomPreset
           isSingleFile={isSingleFile}
           showDevTools={showDevTools}
diff --git a/beta/src/components/MDX/Sandpack/Themes.tsx b/beta/src/components/MDX/Sandpack/Themes.tsx
index 74cb47bb..98c4b00e 100644
--- a/beta/src/components/MDX/Sandpack/Themes.tsx
+++ b/beta/src/components/MDX/Sandpack/Themes.tsx
@@ -5,32 +5,39 @@
 import tailwindConfig from '../../../../tailwind.config';
 
 export const CustomTheme = {
-  palette: {
-    activeText: 'inherit',
-    defaultText: 'inherit',
-    inactiveText: 'inherit',
-    activeBackground: 'inherit',
-    defaultBackground: 'inherit',
-    inputBackground: 'inherit',
+  colors: {
     accent: 'inherit',
-    errorBackground: 'inherit',
-    errorForeground: 'inherit',
+    base: 'inherit',
+    clickable: 'inherit',
+    disabled: 'inherit',
+    error: 'inherit',
+    errorSurface: 'inherit',
+    hover: 'inherit',
+    surface1: 'inherit',
+    surface2: 'inherit',
+    surface3: 'inherit',
+    warning: 'inherit',
+    warningSurface: 'inherit',
   },
   syntax: {
-    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)',
+    plain: 'inherit',
+    comment: 'inherit',
+    keyword: 'inherit',
+    tag: 'inherit',
+    punctuation: 'inherit',
+    definition: 'inherit',
+    property: 'inherit',
+    static: 'inherit',
+    string: 'inherit',
   },
-  typography: {
-    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
-    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
-    fontSize: tailwindConfig.theme.extend.fontSize.code,
+  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,
     lineHeight: '24px',
   },
 };
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index 845510ea..5a2795ea 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-container my-8">
+  <div className="sandpack 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 fa99018f..effc6394 100644
--- a/beta/src/pages/_app.tsx
+++ b/beta/src/pages/_app.tsx
@@ -10,7 +10,6 @@ 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 0c46ff5f..b7b5bd45 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -4,6 +4,7 @@
 
 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?
@@ -11,6 +12,7 @@ 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 300a80df..5340e15e 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 {1,4}
+```js
 import { useState } from 'react';
 ```
 
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index 1867704b..cea68396 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -2,282 +2,258 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+/** 
+  * Theme
+  */
 html .sp-wrapper {
   color-scheme: inherit;
+  -webkit-font-smoothing: antialiased;
 
-  /* 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;
+  --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;
 }
+
 html.dark .sp-wrapper {
-  --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-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-tabs .sp-tab-button {
-  color: #087ea4;
   padding: 0 4px;
   border-bottom: 2px solid transparent;
 }
 
-html.dark .sp-tabs .sp-tab-button {
-  color: #149eca;
+@media (min-width: 768px) {
+  .sp-tabs .sp-tab-button {
+    margin: 0 12px 0 0;
+  }
 }
 
-.sp-tabs .sp-tab-button:hover {
-  color: #087ea4;
+.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);
 }
 
-html.dark .sp-tabs .sp-tab-button:hover {
-  color: #149eca;
+.sp-tabs .sp-tab-button[data-active='true'] {
+  border-bottom: 2px solid var(--sp-colors-accent);
 }
 
-.sp-tabs .sp-tab-button[data-active='true'] {
-  color: #087ea4;
-  border-bottom: 2px solid #087ea4;
+/**
+ * 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 */
 }
 
-html.dark .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #149eca;
-  border-bottom: 2px solid #149eca;
+.sandpack--playground .sp-code-editor .cm-line {
+  padding: 0 var(--sp-space-3);
 }
 
-.sp-stack .sp-code-editor,
-.sp-tabs .sp-tabs-scrollable-container {
-  overflow: hidden;
+.sandpack--playground .sp-code-editor .cm-lineNumbers {
+  padding-left: var(--sp-space-1);
+  padding-right: var(--sp-space-1);
+  font-size: 13.6px;
 }
 
-.sp-code-editor .cm-errorLine {
-  background-color: rgba(255, 107, 99, 0.1);
+.sandpack--playground .sp-code-editor .cm-line.cm-errorLine {
+  @apply bg-red-400;
+  --tw-bg-opacity: 0.1; /* Background tweak: base color + opacity */
   position: relative;
-  padding-right: 2em !important;
+  padding-right: 2em;
   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 .cm-diagnostic-warning {
-  border-left: 5px solid orange;
+
+.sp-code-editor .sp-cm .cm-scroller {
+  overflow: auto;
+  padding: 18px 0;
 }
 
-/*
- * 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.
+/**
+ * Loading component
  */
-.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%;
-}
-.text-xl .sp-pre-placeholder {
-  font-size: 16px !important;
-  line-height: 24px !important;
-}
-.sp-cm .cm-scroller {
-  overflow: auto !important;
-  padding: 18px 0 !important;
+.sandpack--playground .sp-cube-wrapper {
+  background-color: var(--sp-colors-surface1);
 }
 
-.console .sp-cm,
-.console .sp-cm .cm-scroller,
-.console .sp-cm .cm-line {
-  padding: 0px !important;
+.sandpack--playground .sp-overlay {
+  @apply bg-card;
 }
 
-.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;
+html.dark .sandpack--playground .sp-overlay {
+  @apply bg-wash-dark;
 }
 
-@media (min-width: 768px) {
-  .sp-tabs .sp-tab-button {
-    margin: 0 12px 0 0;
-  }
+/**
+ * CodeBlock
+ */
+.sandpack--codeblock .cm-content {
+  padding: 0;
 }
 
-/* Devtools */
-.sp-devtools {
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-  overflow: hidden;
+.sandpack--codeblock .cm-content.cm-readonly .cm-line {
+  padding: 0 var(--sp-space-3);
 }
-.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;
-
-  --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;
+/**
+ * Placeholder
+ */
+.sandpack .sp-code-editor .sp-pre-placeholder {
+  @apply font-mono;
+  font-size: 13.6px;
+  line-height: 24px;
+  padding: 18px 0;
 }
 
-.sp-devtools table td {
-  border: 1px solid var(--sp-colors-fg-inactive);
+.sandpack--codeblock .sp-code-editor .sp-pre-placeholder {
+  margin-left: var(--sp-space-3) !important; /* override inline style */
 }
 
-/* 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;
+.sandpack--playground .sp-code-editor .sp-pre-placeholder {
+  margin-left: var(--sp-space-10) !important; /* override inline style */
 }
 
-/* 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;
-    }
-  }
+.text-xl .sp-pre-placeholder {
+  font-size: 16px !important;
+  line-height: 24px !important;
 }
 
-.sp-cm {
-  padding-left: 8px !important;
-}
+/**
+ * Expand button
+ */
+
 .sp-layout {
   min-height: 216px;
 }
+
 .sp-layout > .sp-stack:nth-child(1) {
   /* Force vertical if there isn't enough space. */
   min-width: 431px;
@@ -285,6 +261,7 @@ html.dark .sp-devtools > div {
   /* 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;
@@ -298,11 +275,13 @@ html.dark .sp-devtools > div {
   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. */
@@ -324,8 +303,106 @@ html.dark .sp-devtools > div {
   }
 }
 
+.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 235a7c23..17cedebc 100644
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -409,6 +409,18 @@
     "@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"
@@ -440,7 +452,7 @@
     "@codemirror/state" "^0.19.0"
     "@lezer/css" "^0.15.2"
 
-"@codemirror/lang-html@^0.19.4":
+"@codemirror/lang-html@^0.19.0", "@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==
@@ -467,6 +479,19 @@
     "@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"
@@ -547,18 +572,29 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@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==
+"@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==
   dependencies:
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@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==
+"@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==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"
@@ -570,16 +606,18 @@
     "@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" "^0.19.8-experimental.2"
+    "@codesandbox/sandpack-client" "^1.3.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.22.1"
+    react-devtools-inline "4.4.0"
     react-is "^17.0.2"
 
 "@csstools/convert-colors@^1.4.0":
@@ -669,6 +707,13 @@
   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"
@@ -834,6 +879,11 @@
   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"
@@ -1678,6 +1728,14 @@ 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"
@@ -1862,6 +1920,32 @@ 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"
@@ -2129,6 +2213,13 @@ 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"
@@ -3249,6 +3340,11 @@ 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"
@@ -4026,13 +4122,12 @@ react-collapsed@3.1.0:
     raf "^3.4.1"
     tiny-warning "^1.0.3"
 
-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==
+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==
   dependencies:
-    source-map-js "^0.6.2"
-    sourcemap-codec "^1.4.8"
+    es6-symbol "^3"
 
 react-dom@0.0.0-experimental-82c64e1a4-20220520:
   version "0.0.0-experimental-82c64e1a4-20220520"
@@ -4475,11 +4570,6 @@ 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"
@@ -4495,11 +4585,6 @@ 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"
@@ -4833,6 +4918,16 @@ 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"