[Beta] Upgrade Sandpack (#5033)

* Revert "Revert "[beta] upgrade sandpack and refactor sandpack.css (#4843)" (#4959)"

This reverts commit da6a06e54b.

* Fix tabbing

* Fixes

* More bump

* Bump bundler

* Fix overflows

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.7.2",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",

beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch

@@ -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",

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,34 @@ const CodeBlock = function CodeBlock({
   const decorators = getDecoratedLineInfo();
   return (
     <div
-      translate="no"
+      key={
+        // HACK: There seems to be a bug where the rendered result
+        // "lags behind" the edits to it. For now, force it to reset.
+        process.env.NODE_ENV === 'development' ? children : ''
+      }
       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]: {
+        options={{
-              code: children.trimEnd(),
+          initMode: 'immediate',
-            },
+        }}
-          },
+        theme={CustomTheme}>
-        }}>
+        <SandpackCodeViewer
-        <SandpackThemeProvider theme={CustomTheme}>
+          key={children.trimEnd()}
-          <SandpackCodeViewer
+          showLineNumbers={false}
-            key={children.trimEnd()}
+          decorators={decorators}
-            showLineNumbers={false}
+        />
-            decorators={decorators}
-          />
-        </SandpackThemeProvider>
       </SandpackProvider>
     </div>
   );

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -7,19 +7,16 @@ import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
-  SandpackThemeProvider,
+  // SandpackReactDevTools,
-  SandpackReactDevTools,
+  SandpackLayout,
 } from '@codesandbox/sandpack-react';
 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.
+import {useSandpackLint} from './useSandpackLint';
-const emptyArray: Array<any> = [];
 
 export function CustomPreset({
   showDevTools,
@@ -39,11 +36,11 @@ export function CustomPreset({
   const {code} = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const {activePath} = sandpack;
+  const {activeFile} = sandpack;
-  if (!lineCountRef.current[activePath]) {
+  if (!lineCountRef.current[activeFile]) {
-    lineCountRef.current[activePath] = code.split('\n').length;
+    lineCountRef.current[activeFile] = code.split('\n').length;
   }
-  const lineCount = lineCountRef.current[activePath];
+  const lineCount = lineCountRef.current[activeFile];
   const isExpandable = lineCount > 16 || isExpanded;
 
   return (
@@ -52,64 +49,61 @@ export function CustomPreset({
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
         <NavigationBar providedFiles={providedFiles} />
-        <SandpackThemeProvider theme={CustomTheme}>
+        <SandpackLayout
-          <div
+          className={cn(
-            ref={sandpack.lazyAnchorRef}
+            showDevTools && devToolsLoaded && 'sp-layout-devtools',
-            className={cn(
+            !isExpandable && 'rounded-b-lg overflow-hidden',
-              'sp-layout sp-custom-layout',
+            isExpanded && 'sp-layout-expanded'
-              showDevTools && devToolsLoaded && 'sp-layout-devtools',
+          )}>
-              isExpanded && 'sp-layout-expanded'
+          <SandpackCodeEditor
-            )}>
+            showLineNumbers
-            <SandpackCodeEditor
+            showInlineErrors
-              showLineNumbers
+            showTabs={false}
-              showInlineErrors
+            showRunButton={false}
-              showTabs={false}
+            extensions={lintExtensions}
-              showRunButton={false}
+          />
-              extensions={lintExtensions}
+          <Preview
-              extensionsKeymap={emptyArray}
+            className="order-last xl:order-2"
-            />
+            isExpanded={isExpanded}
-            <Preview
+            lintErrors={lintErrors}
-              className="order-last xl:order-2"
+          />
-              isExpanded={isExpanded}
+          {isExpandable && (
-              lintErrors={lintErrors}
+            <button
-            />
+              translate="yes"
-            {isExpandable && (
+              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"
-              <button
+              onClick={() => {
-                translate="yes"
+                const nextIsExpanded = !isExpanded;
-                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"
+                flushSync(() => {
-                onClick={() => {
+                  setIsExpanded(nextIsExpanded);
-                  const nextIsExpanded = !isExpanded;
+                });
-                  flushSync(() => {
+                if (!nextIsExpanded && containerRef.current !== null) {
-                    setIsExpanded(nextIsExpanded);
+                  // @ts-ignore
-                  });
+                  if (containerRef.current.scrollIntoViewIfNeeded) {
-                  if (!nextIsExpanded && containerRef.current !== null) {
                     // @ts-ignore
-                    if (containerRef.current.scrollIntoViewIfNeeded) {
+                    containerRef.current.scrollIntoViewIfNeeded();
-                      // @ts-ignore
+                  } else {
-                      containerRef.current.scrollIntoViewIfNeeded();
+                    containerRef.current.scrollIntoView({
-                    } else {
+                      block: 'nearest',
-                      containerRef.current.scrollIntoView({
+                      inline: 'nearest',
-                        block: 'nearest',
+                    });
-                        inline: 'nearest',
-                      });
-                    }
                   }
-                }}>
+                }
-                <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
+              }}>
-                  <IconChevron
+              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
-                    className="inline mr-1.5 text-xl"
+                <IconChevron
-                    displayDirection={isExpanded ? 'up' : 'down'}
+                  className="inline mr-1.5 text-xl"
-                  />
+                  displayDirection={isExpanded ? 'up' : 'down'}
-                  {isExpanded ? 'Show less' : 'Show more'}
+                />
-                </span>
+                {isExpanded ? 'Show less' : 'Show more'}
-              </button>
+              </span>
-            )}
+            </button>
-          </div>
-
-          {showDevTools && (
-            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
           )}
-        </SandpackThemeProvider>
+        </SandpackLayout>
+
+        {/* {showDevTools && (
+          // @ts-ignore TODO(@danilowoz): support devtools
+          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+        )} */}
       </div>
     </>
   );

beta/src/components/MDX/Sandpack/NavigationBar.tsx

@@ -40,10 +40,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   // By default, show the dropdown because all tabs may not fit.
   // We don't know whether they'll fit or not until after hydration:
   const [showDropdown, setShowDropdown] = React.useState(true);
-  const {openPaths, clients, setActiveFile, activePath} = sandpack;
+  const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;
   const clientId = Object.keys(clients)[0];
   const {refresh} = useSandpackNavigation(clientId);
-  const isMultiFile = openPaths.length > 1;
+  const isMultiFile = visibleFiles.length > 1;
   const hasJustToggledDropdown = React.useRef(false);
 
   // Keep track of whether we can show all tabs or just the dropdown.
@@ -88,9 +88,9 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   };
 
   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="flex-1 grow min-w-0 px-4 lg:px-6">
-        <Listbox value={activePath} onChange={setActiveFile}>
+        <Listbox value={activeFile} onChange={setActiveFile}>
           <div ref={containerRef}>
             <div className="relative overflow-hidden">
               <div
@@ -105,12 +105,12 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                 )}>
                 <FileTabs />
               </div>
-              <Listbox.Button className="contents">
+              <Listbox.Button as={React.Fragment}>
                 {({open}) => (
                   // If tabs don't fit, display the dropdown instead.
                   // The dropdown is absolutely positioned inside the
                   // space that's taken by the (invisible) tab list.
-                  <div
+                  <button
                     className={cn(
                       'absolute top-0 left-0',
                       !showDropdown && 'invisible'
@@ -120,7 +120,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                         'h-full py-2 px-1 mt-px -mb-px flex border-b 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)}
                       {isMultiFile && (
                         <span className="ml-2">
                           <IconChevron
@@ -129,22 +129,27 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                         </span>
                       )}
                     </span>
-                  </div>
+                  </button>
                 )}
               </Listbox.Button>
             </div>
           </div>
           {isMultiFile && showDropdown && (
             <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(
+                  as={React.Fragment}>
-                    'text-md mx-2 my-4 cursor-pointer',
+                  {({active}) => (
-                    filePath === activePath && 'text-link dark:text-link-dark'
+                    <li
-                  )}>
+                      className={cn(
-                  {getFileName(filePath)}
+                        'text-md mx-2 my-4 cursor-pointer',
+                        active && 'text-link dark:text-link-dark'
+                      )}>
+                      {getFileName(filePath)}
+                    </li>
+                  )}
                 </Listbox.Option>
               ))}
             </Listbox.Options>

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
+    <SandpackStack
-      className={cn('sp-stack', className)}
+      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>
   );
 }

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 = {
@@ -75,15 +75,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}}
+        files={files}
-        autorun={autorun}
+        customSetup={setup}
-        initMode="user-visible"
+        theme={CustomTheme}
-        initModeObserverOptions={{rootMargin: '1400px 0px'}}
+        options={{
-        bundlerURL="https://6b760a26.sandpack-bundler.pages.dev"
+          autorun,
-        logLevel={SandpackLogLevel.None}>
+          initMode: 'user-visible',
+          initModeObserverOptions: {rootMargin: '1400px 0px'},
+          bundlerURL: 'https://ac83f2d6.sandpack-bundler.pages.dev',
+          logLevel: SandpackLogLevel.None,
+        }}>
         <CustomPreset
           showDevTools={showDevTools}
           onDevToolsLoad={() => setDevToolsLoaded(true)}

beta/src/components/MDX/Sandpack/Themes.tsx

@@ -5,32 +5,39 @@
 import tailwindConfig from '../../../../tailwind.config';
 
 export const CustomTheme = {
-  palette: {
+  colors: {
-    activeText: 'inherit',
-    defaultText: 'inherit',
-    inactiveText: 'inherit',
-    activeBackground: 'inherit',
-    defaultBackground: 'inherit',
-    inputBackground: 'inherit',
     accent: 'inherit',
-    errorBackground: 'inherit',
+    base: 'inherit',
-    errorForeground: '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)',
+    plain: 'inherit',
-    comment: 'var(--theme-comment)',
+    comment: 'inherit',
-    keyword: 'var(--theme-keyword)',
+    keyword: 'inherit',
-    tag: 'var(--theme-tag)',
+    tag: 'inherit',
-    punctuation: 'var(--theme-punctuation)',
+    punctuation: 'inherit',
-    definition: 'var(--theme-definition)',
+    definition: 'inherit',
-    property: 'var(--theme-property)',
+    property: 'inherit',
-    static: 'var(--theme-static)',
+    static: 'inherit',
-    string: 'var(--theme-string)',
+    string: 'inherit',
   },
-  typography: {
+  font: {
-    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
+    body: tailwindConfig.theme.extend.fontFamily.sans
-    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
+      .join(', ')
-    fontSize: tailwindConfig.theme.extend.fontSize.code,
+      .replace(/"/gm, ''),
+    mono: tailwindConfig.theme.extend.fontFamily.mono
+      .join(', ')
+      .replace(/"/gm, ''),
+    size: tailwindConfig.theme.extend.fontSize.code,
     lineHeight: '24px',
   },
 };

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">

beta/src/pages/_app.tsx

@@ -11,7 +11,6 @@ import '@docsearch/css';
 import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
-import '@codesandbox/sandpack-react/dist/index.css';
 
 if (typeof window !== 'undefined') {
   if (process.env.NODE_ENV === 'production') {

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: `

beta/src/styles/sandpack.css

@@ -2,282 +2,265 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+/** 
+  * Theme
+  */
 html .sp-wrapper {
   color-scheme: inherit;
+  -webkit-font-smoothing: antialiased;
 
-  /* palette */
+  --sp-colors-accent: #087ea4;
-  --sp-colors-fg-active: #24292e !important;
+  --sp-colors-clickable: #959da5;
-  --sp-colors-fg-default: #959da5 !important;
+  --sp-colors-disabled: #24292e;
-  --sp-colors-fg-inactive: #e4e7eb !important;
+  --sp-colors-error: #811e18;
-  --sp-colors-bg-active: #e4e7eb !important;
+  --sp-colors-error-surface: #ffcdca;
-  --sp-colors-bg-default: #ffffff !important;
+  --sp-colors-surface1: #fff;
-  --sp-colors-bg-default-overlay: #ffffff !important;
+  --sp-colors-surface2: #e4e7eb;
-  --sp-colors-bg-input: #ffffff !important;
+
-  --sp-colors-accent: #c8c8fa !important;
+  --sp-syntax-color-plain: #24292e;
-  --sp-colors-bg-error: #ffcdca !important;
+  --sp-syntax-color-comment: #6a737d;
-  --sp-colors-fg-error: #811e18 !important;
+  --sp-syntax-color-keyword: #d73a49;
-  /* syntax */
+  --sp-syntax-color-tag: #22863a;
-  --theme-plain: #24292e;
+  --sp-syntax-color-punctuation: #24292e;
-  --theme-comment: #6a737d;
+  --sp-syntax-color-definition: #6f42c1;
-  --theme-keyword: #d73a49;
+  --sp-syntax-color-property: #005cc5;
-  --theme-tag: #22863a;
+  --sp-syntax-color-static: #032f62;
-  --theme-punctuation: #24292e;
+  --sp-syntax-color-string: #032f62;
-  --theme-definition: #6f42c1;
-  --theme-property: #005cc5;
-  --theme-static: #032f62;
-  --theme-string: #032f62;
 }
+
 html.dark .sp-wrapper {
-  --sp-colors-fg-active: #ffffff !important;
+  --sp-colors-accent: #149eca;
-  --sp-colors-fg-default: #999999 !important;
+  --sp-colors-clickable: #999;
-  --sp-colors-fg-inactive: #343434 !important;
+  --sp-colors-disabled: #fff;
-  --sp-colors-bg-active: #343434 !important;
+  --sp-colors-error: #811e18;
-  --sp-colors-bg-default: #16181d !important;
+  --sp-colors-error-surface: #ffcdca;
-  --sp-colors-bg-default-overlay: #16181d !important;
+  --sp-colors-surface1: #16181d;
-  --sp-colors-bg-input: #242424 !important;
+  --sp-colors-surface2: #343a46;
-  --sp-colors-accent: #6caedd !important;
+
-  --sp-colors-bg-error: #ffcdca !important;
+  --sp-syntax-color-plain: #ffffff;
-  --sp-colors-fg-error: #811e18 !important;
+  --sp-syntax-color-comment: #757575;
-  /* syntax */
+  --sp-syntax-color-keyword: #77b7d7;
-  --theme-plain: #ffffff;
+  --sp-syntax-color-tag: #dfab5c;
-  --theme-comment: #757575;
+  --sp-syntax-color-punctuation: #ffffff;
-  --theme-keyword: #77b7d7;
+  --sp-syntax-color-definition: #86d9ca;
-  --theme-tag: #dfab5c;
+  --sp-syntax-color-property: #77b7d7;
-  --theme-punctuation: #ffffff;
+  --sp-syntax-color-static: #c64640;
-  --theme-definition: #86d9ca;
+  --sp-syntax-color-string: #977cdc;
-  --theme-property: #77b7d7;
+}
-  --theme-static: #c64640;
+
-  --theme-string: #977cdc;
+/**
-}
+ * Reset
-
+ */
-.sp-tabs,
+.sandpack--playground .sp-layout,
-.sp-tab-button:hover {
+.sandpack--playground .sp-tabs,
-  background: none !important;
+.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 {
+  -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;
+}
+@media screen and (max-width: 768px) {
+  .sp-layout > .sp-stack {
+    height: auto;
+    min-width: 100% !important;
+  }
+}
+.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);
+  padding-left: 12px;
+}
+
+/**
+ * Navigation
+ */
+.sandpack--playground .sp-tabs-scrollable-container {
+  padding: 0;
 }
 
 .sp-tabs .sp-tab-button {
-  color: #087ea4;
   padding: 0 6px;
   border-bottom: 2px solid transparent;
 }
 
-html.dark .sp-tabs .sp-tab-button {
+@media (min-width: 768px) {
-  color: #149eca;
+  .sp-tabs .sp-tab-button {
+    margin: 0 12px 0 0;
+  }
 }
 
-.sp-tabs .sp-tab-button:hover {
+.sp-tabs .sp-tab-button,
-  color: #087ea4;
+.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 {
+.sp-tabs .sp-tab-button[data-active='true'] {
-  color: #149eca;
+  border-bottom: 2px solid var(--sp-colors-accent);
 }
 
-.sp-tabs .sp-tab-button[data-active='true'] {
+/**
-  color: #087ea4;
+ * Editor
-  border-bottom: 2px solid #087ea4;
+ */
+.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'] {
+.sandpack--playground .sp-code-editor .cm-line {
-  color: #149eca;
+  padding: 0 var(--sp-space-3);
-  border-bottom: 2px solid #149eca;
 }
 
-.sp-stack .sp-code-editor,
+.sandpack--playground .sp-code-editor .cm-lineNumbers {
-.sp-tabs .sp-tabs-scrollable-container {
+  padding-left: var(--sp-space-1);
-  overflow: hidden;
+  padding-right: var(--sp-space-1);
+  font-size: 13.6px;
 }
 
-.sp-code-editor .cm-errorLine {
+.sandpack--playground .sp-code-editor .cm-line.cm-errorLine {
-  background-color: rgba(255, 107, 99, 0.1);
+  @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
+ * Loading component
- * 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.
  */
-.sp-cm {
+.sandpack--playground .sp-cube-wrapper {
-  -webkit-text-size-adjust: none !important;
+  background-color: var(--sp-colors-surface1);
-  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;
 }
 
-.console .sp-cm,
+.sandpack--playground .sp-overlay {
-.console .sp-cm .cm-scroller,
+  @apply bg-card;
-.console .sp-cm .cm-line {
-  padding: 0px !important;
 }
 
-.sp-cm .cm-gutters {
+html.dark .sandpack--playground .sp-overlay {
-  background-color: var(--sp-colors-bg-default);
+  @apply bg-wash-dark;
-  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;
 }
 
-@media (min-width: 768px) {
+/**
-  .sp-tabs .sp-tab-button {
+ * CodeBlock
-    margin: 0 12px 0 0;
+ */
-  }
+.sandpack--codeblock .cm-content {
+  padding: 0;
 }
 
-/* Devtools */
+.sandpack--codeblock .cm-content.cm-readonly .cm-line {
-.sp-devtools {
+  padding: 0 var(--sp-space-3);
-  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;
-
-  --color-tab-selected-border: #087ea4 !important;
 
-  --color-component-name: var(--theme-definition) !important;
+/**
-  --color-attribute-name: var(--theme-property) !important;
+ * Placeholder
-  --color-attribute-value: var(--theme-string) !important;
+ */
-  --color-attribute-editable-value: var(--theme-property) !important;
+.sandpack .sp-code-editor .sp-pre-placeholder {
-  --color-attribute-name-not-editable: var(--sp-colors-fg-default) !important;
+  @apply font-mono;
-  --color-button-background-focus: var(--sp-colors-fg-inactive) !important;
+  font-size: 13.6px;
-
+  line-height: 24px;
-  --color-button-active: #087ea4 !important;
+  padding: 18px 0;
-  --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;
 }
 
-.sp-devtools table td {
+.sandpack--codeblock .sp-code-editor .sp-pre-placeholder {
-  border: 1px solid var(--sp-colors-fg-inactive);
+  margin-left: var(--sp-space-3) !important; /* override inline style */
 }
 
-/* Make focus rings work */
+.sandpack--playground .sp-code-editor .sp-pre-placeholder {
-.sp-tab-button {
+  margin-left: var(--sp-space-10) !important; /* override inline style */
-  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;
 }
 
-/* For iOS: prevent browser zoom when clicking on sandbox. */
+.text-xl .sp-pre-placeholder {
-@media screen and (max-width: 768px) {
+  font-size: 16px !important;
-  @supports (-webkit-overflow-scrolling: touch) {
+  line-height: 24px !important;
-    .cm-content {
-      font-size: initial;
-    }
-    .DocSearch-Input {
-      font-size: initial;
-    }
-  }
 }
 
-.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 +268,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 +282,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 +310,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;
+    }
+  }
+}

beta/yarn.lock

@@ -670,6 +670,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"
@@ -701,7 +713,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==
@@ -728,6 +740,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"
@@ -808,18 +833,29 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/sandpack-client@^0.19.8-experimental.2":
+"@codemirror/view@^0.19.39":
-  version "0.19.9"
+  version "0.19.48"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-0.19.9.tgz#29fded94a3087de155035634d596651268e27797"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.48.tgz#1c657e2b0f8ed896ac6448d6e2215ab115e2a0fc"
-  integrity sha512-/PPFqAJ8NSlP1jpWjQtwvmVS5o1xLRVqdbzXF7Num7zVUdYLZAbpzT7KijneZSmdcJHOvCCAYGLKJg+TcgmLjw==
+  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.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.7.0.tgz#cae07db91da3ef2893f20c0d11d58641e7af2a33"
+  integrity sha512-13nL7+OX7iefVXeO+cvEntZD/hBuXLPjv72e5tiCjwuq/oor8jR2NGxzJ0pozUfZmJhvDIAxw5isJvhiIdgcWA==
   dependencies:
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@codesandbox/sandpack-react@v0.19.8-experimental.7":
+"@codesandbox/sandpack-react@1.7.2":
-  version "0.19.8-experimental.7"
+  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.7.tgz#44724fc0cce5d470eae9d6bc757ae237b699c019"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.7.2.tgz#5559797f2d405a7fb59577d92097c88628f79d20"
-  integrity sha512-+zT07s7LYxWq4bQYEStZszpfQAbbqP7PukF0TlJxYbjDVDXDhikdBkxuD1hXvVA6FOPdgLuF2fdnDR5NViktwA==
+  integrity sha512-oOaGzzqcFcDgoHMZ1cuQKYGTdQPgtmMHNgingSbzxcxTCIsA0hkwm+2ilVH1d1AZSgbIPoLqbYVjrdtsO4lJJg==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"
@@ -831,16 +867,19 @@
     "@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.7.0"
     "@react-hook/intersection-observer" "^3.1.1"
+    "@stitches/core" "^1.2.6"
+    clean-set "^1.1.2"
     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":
@@ -970,6 +1009,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/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -1121,6 +1167,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"
@@ -1855,6 +1906,11 @@ classnames@*, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+clean-set@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+  integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2078,6 +2134,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"
@@ -2297,6 +2361,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.62"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
+  integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
+  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"
@@ -2623,6 +2713,13 @@ express@^4.17.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext@^1.1.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
+  integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
+  dependencies:
+    type "^2.7.2"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -3873,6 +3970,11 @@ next-remote-watch@^1.0.0:
     commander "^5.0.0"
     express "^4.17.1"
 
+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"
@@ -4712,13 +4814,12 @@ raw-body@2.5.1:
     raf "^3.4.1"
     tiny-warning "^1.0.3"
 
-react-devtools-inline@4.22.1:
+react-devtools-inline@4.4.0:
-  version "4.22.1"
+  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.22.1.tgz#339ef44279317de10ebafcf12e3e48b9f0c24481"
+  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68"
-  integrity sha512-nYLfc5ZwXZN8ooQ2PNxS2LdLjQeRYYhJoDs6dMVQ8vsNx1m3qjaKBp4baLr4Cv+uv7LWSv2on7Rd2QpkYMLOeQ==
+  integrity sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==
   dependencies:
-    source-map-js "^0.6.2"
+    es6-symbol "^3"
-    sourcemap-codec "^1.4.8"
 
 react-dom@0.0.0-experimental-82c64e1a4-20220520:
   version "0.0.0-experimental-82c64e1a4-20220520"
@@ -5205,11 +5306,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"
@@ -5225,11 +5321,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"
@@ -5581,6 +5672,16 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+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.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
+  integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
+
 typescript@^4.0.2:
   version "4.5.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"