From f3420fdc56f6eb161bb78a763152c2607e92ed99 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 6 Oct 2022 21:18:23 +0100
Subject: [PATCH] [beta] Sandpack: provide bare components and move styles
 (#5124)

* Update 6 files

* Update _document.tsx

* Update _document.tsx

* Update _document.tsx

* Update .env.production

* Update package.json and yarn.lock

* editor style

* file tab

* loading

* loading

* tweaks

* tweak

* bump sandpack

* remove test page

* Remove stitches from the bundle

* apply ios fix only for playground

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 beta/.env.development                         |   1 +
 beta/.env.production                          |   3 +-
 beta/next.config.js                           |   7 +
 beta/package.json                             |   2 +-
 beta/src/components/MDX/ConsoleBlock.tsx      |   2 +-
 beta/src/components/MDX/Sandpack/Console.tsx  |   4 +-
 .../components/MDX/Sandpack/CustomPreset.tsx  |   2 +-
 .../components/MDX/Sandpack/NavigationBar.tsx |   2 +-
 .../MDX/Sandpack/OpenInCodeSandboxButton.tsx  |   2 +-
 .../components/MDX/Sandpack/SandpackRoot.tsx  |   2 +-
 beta/src/components/MDX/Sandpack/index.tsx    |   2 +-
 beta/src/pages/_app.tsx                       |  36 --
 beta/src/pages/_document.tsx                  | 118 -----
 beta/src/styles/sandpack.css                  | 403 +++++++++++-------
 beta/src/utils/emptyShim.js                   |   6 +
 beta/yarn.lock                                |  18 +-
 16 files changed, 281 insertions(+), 329 deletions(-)
 create mode 100644 beta/src/utils/emptyShim.js

diff --git a/beta/.env.development b/beta/.env.development
index e69de29b..a692f21c 100644
--- a/beta/.env.development
+++ b/beta/.env.development
@@ -0,0 +1 @@
+SANDPACK_BARE_COMPONENTS=true 
\ No newline at end of file
diff --git a/beta/.env.production b/beta/.env.production
index d25eb7dd..445c9c4d 100644
--- a/beta/.env.production
+++ b/beta/.env.production
@@ -1 +1,2 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+SANDPACK_BARE_COMPONENTS=true 
\ No newline at end of file
diff --git a/beta/next.config.js b/beta/next.config.js
index 5ac6773e..208895f9 100644
--- a/beta/next.config.js
+++ b/beta/next.config.js
@@ -16,6 +16,9 @@ const nextConfig = {
     legacyBrowsers: false,
     browsersListForSwc: true,
   },
+  env: {
+    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
+  },
   async redirects() {
     return redirects.redirects;
   },
@@ -47,6 +50,10 @@ const nextConfig = {
 
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
+      new NormalModuleReplacementPlugin(
+        /^@stitches\/core$/,
+        require.resolve('./src/utils/emptyShim.js')
+      ),
       new NormalModuleReplacementPlugin(
         /^raf$/,
         require.resolve('./src/utils/rafShim.js')
diff --git a/beta/package.json b/beta/package.json
index b728160c..995ad67b 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.11.0",
+    "@codesandbox/sandpack-react": "1.14.1",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
diff --git a/beta/src/components/MDX/ConsoleBlock.tsx b/beta/src/components/MDX/ConsoleBlock.tsx
index 8322468f..a5e68cea 100644
--- a/beta/src/components/MDX/ConsoleBlock.tsx
+++ b/beta/src/components/MDX/ConsoleBlock.tsx
@@ -38,7 +38,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4" translate="no">
+    <div className="mb-4 text-secondary" translate="no">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
         <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
           <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />
diff --git a/beta/src/components/MDX/Sandpack/Console.tsx b/beta/src/components/MDX/Sandpack/Console.tsx
index 04eaa89f..375a92f0 100644
--- a/beta/src/components/MDX/Sandpack/Console.tsx
+++ b/beta/src/components/MDX/Sandpack/Console.tsx
@@ -181,14 +181,14 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
         </button>
       </div>
       {isExpanded && (
-        <div className="w-full h-full border-y bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
+        <div className="w-full h-full border-t bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
           <div className="max-h-40 h-auto overflow-auto" ref={wrapperRef}>
             {logs.map(({data, id, method}) => {
               return (
                 <div
                   key={id}
                   className={cn(
-                    'last:border-none border-b dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
+                    'first:border-none border-t dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
                     `console-${getType(method)}`,
                     getColor(method)
                   )}>
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index 97951ccb..7ef53657 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -111,7 +111,7 @@ const SandboxShell = memo(function SandboxShell({
                   }
                 }
               }}>
-              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
+              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark leading-[20px]">
                 <IconChevron
                   className="inline mr-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}
diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
index acc972fb..eedf9fc3 100644
--- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -125,7 +125,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                   // space that's taken by the (invisible) tab list.
                   <button
                     className={cn(
-                      'absolute top-0 left-0',
+                      'absolute top-0 left-[2px]',
                       !showDropdown && 'invisible'
                     )}>
                     <span
diff --git a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index 8b08b230..42a2d274 100644
--- a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ml-1 mr-1 relative"
+        className="inline ml-1 mr-1 relative top-[1px]"
         width="1em"
         height="1em"
       />
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 163a33ec..27ea5915 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -78,7 +78,7 @@ function SandpackRoot(props: SandpackProps) {
   };
 
   return (
-    <div className="sandpack sandpack--playground sandbox my-8">
+    <div className="sandpack sandpack--playground my-8">
       <SandpackProvider
         template="react"
         files={files}
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index abcfe426..3591e058 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 = lazy(() => import('./SandpackRoot'));
 
 const SandpackGlimmer = ({code}: {code: string}) => (
-  <div className="sandpack sandpack--playground sandbox my-8">
+  <div className="sandpack sandpack--playground my-8">
     <div className="sp-wrapper">
       <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">
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx
index 6018c349..18bd9b2f 100644
--- a/beta/src/pages/_app.tsx
+++ b/beta/src/pages/_app.tsx
@@ -20,8 +20,6 @@ if (typeof window !== 'undefined') {
   window.addEventListener(terminationEvent, function () {
     ga('send', 'timing', 'JS Dependencies', 'unload');
   });
-
-  disableAllRuntimeStyleInjection();
 }
 
 export default function MyApp({Component, pageProps}: AppProps) {
@@ -55,37 +53,3 @@ export default function MyApp({Component, pageProps}: AppProps) {
 
   return <Component {...pageProps} />;
 }
-
-// HACK(css-in-js): We use Sandpack, which uses Stitches (css-in-js lib).
-// This causes style recalc during hydration which is bad for perf.
-// Instead, let's rely on the SSR'd <style> tag defined in _document.tsx.
-// This is obviously quite fragile but hopefully it'll be solved upstream.
-let didWarn = false;
-function disableAllRuntimeStyleInjection() {
-  // Prevent Stitches from finding the <style> tag from the server:
-  Object.defineProperty(document, 'styleSheets', {
-    get() {
-      return [];
-    },
-  });
-  // It will try to create a new <style> tag and insert stuff there...
-  const realInsertRule = CSSStyleSheet.prototype.insertRule;
-  CSSStyleSheet.prototype.insertRule = function () {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!didWarn) {
-        console.warn(
-          'Something is trying to inject runtime CSS-in-JS.\n' +
-            'All <style> insertions will be ignored.',
-          arguments
-        );
-      }
-      didWarn = true;
-    }
-    // ... but we'll prevent it from affecting the document:
-    this.disabled = true;
-    // @ts-ignore
-    return realInsertRule.apply(this, arguments);
-  };
-  // We're not supposed to use any other library that inserts <style> tags.
-  // In longer term, ideally, Sandpack should offer a zero-runtime option.
-}
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index faad29f7..9e37d6c6 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -10,7 +10,6 @@ const MyDocument = () => {
     <Html lang="en">
       <Head />
       <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
-        <style id="sandpack">{getSandpackCssText_PATCHED()}</style>
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -62,120 +61,3 @@ const MyDocument = () => {
 };
 
 export default MyDocument;
-
-const sandpackReactVersion =
-  require('@codesandbox/sandpack-react/package.json').version;
-if (sandpackReactVersion !== '1.11.0') {
-  throw Error('You need to manually regenerate getSandpackCssText_PATCHED.');
-}
-
-// HACK(css-in-js): We don't want to use runtime CSS-in-JS, so let's save whatever Stitches injected.
-// Unfortunately, Stitches' own CSS SSR output isn't reliable and doesn't include some necessary styles.
-// To update this:
-//   1. Comment out the disableAllRuntimeStyleInjection() call in _app.js
-//   2. Use the real getSandpackCssText instead of the patched version below
-//   3. Open a page that contains a sandbox
-//   4. Copy the output of running this in the console:
-//     copy(Array.from(document.getElementById('sandpack').sheet.cssRules).map(rule => rule.cssText || "").join("\n"))
-//   5. Replace the string below and undo the rest of your changes
-// In longer term, we should remove the Stitches dependency somehow.
-// import {getSandpackCssText} from '@codesandbox/sandpack-react';
-
-function getSandpackCssText_PATCHED() {
-  return `--sxs { --sxs:0 sp-121717251; }
-@media  {
-  .sp-121717251 { --sp-space-1:4px; --sp-space-2:8px; --sp-space-3:12px; --sp-space-4:16px; --sp-space-5:20px; --sp-space-6:24px; --sp-space-7:28px; --sp-space-8:32px; --sp-space-9:36px; --sp-space-10:40px; --sp-space-11:44px; --sp-border-radius:4px; --sp-layout-height:300px; --sp-layout-headerHeight:40px; --sp-transitions-default:150ms ease; --sp-zIndices-base:1; --sp-zIndices-overlay:2; --sp-zIndices-top:3; --sp-colors-surface1: inherit; --sp-colors-surface2: inherit; --sp-colors-surface3: inherit; --sp-colors-disabled: inherit; --sp-colors-base: inherit; --sp-colors-clickable: inherit; --sp-colors-hover: inherit; --sp-colors-accent: inherit; --sp-colors-error: inherit; --sp-colors-errorSurface: inherit; --sp-colors-warning: inherit; --sp-colors-warningSurface: inherit; --sp-font-body:Optimistic Display, -apple-system, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --sp-font-mono:Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --sp-font-size:calc(1em - 20%); --sp-font-lineHeight:24px; --sp-syntax-color-plain: inherit; --sp-syntax-color-comment: inherit; --sp-syntax-color-keyword: inherit; --sp-syntax-color-tag: inherit; --sp-syntax-color-punctuation: inherit; --sp-syntax-color-definition: inherit; --sp-syntax-color-property: inherit; --sp-syntax-color-static: inherit; --sp-syntax-color-string: inherit; }
-}
---sxs { --sxs:1 sp-k-cESbVh sp-k-iOHdLQ; }
-@media  {
-  @keyframes sp-k-cESbVh { 
-  0% { opacity: 0; transform: translateY(4px); }
-  100% { opacity: 1; transform: translateY(0px); }
-}
-  @keyframes sp-k-iOHdLQ { 
-  0% { transform: rotateX(-25.5deg) rotateY(45deg); }
-  100% { transform: rotateX(-25.5deg) rotateY(405deg); }
-}
-}
---sxs { --sxs:2 sp-c-gMfcns sp-c-hfoyCM sp-c-fWymNx sp-c-dRhJti sp-c-bpmgvy sp-c-kLppIp sp-c-PJLV sp-c-fVPbOs sp-c-dyHYiL sp-c-gGbYbQ sp-c-kuvqxy sp-c-ctabmA sp-c-bNbSGz sp-c-jOWzsE sp-c-jkvvao; }
-@media  {
-  .sp-c-gMfcns svg { margin: auto; }
-  .sp-c-hfoyCM { padding: 0 var(--sp-space-1) 0 var(--sp-space-1); border-radius: var(--sp-border-radius); margin-left: var(--sp-space-1); width: var(--sp-space-5); visibility: hidden; }
-  .sp-c-hfoyCM svg { width: var(--sp-space-3); height: var(--sp-space-3); display: block; position: relative; top: 1px; }
-  .sp-c-fWymNx { margin: 0px; display: block; font-family: var(--sp-font-mono); font-size: var(--sp-font-size); color: var(--sp-syntax-color-plain); line-height: var(--sp-font-lineHeight); }
-  .sp-c-dRhJti { appearance: none; border: 0px; outline: none; display: flex; align-items: center; font-size: inherit; font-family: inherit; background-color: transparent; transition: color var(--sp-transitions-default), background var(--sp-transitions-default); cursor: pointer; color: var(--sp-colors-clickable); }
-  .sp-c-dRhJti:disabled { color: var(--sp-colors-disabled); }
-  .sp-c-dRhJti svg { min-width: var(--sp-space-4); width: var(--sp-space-4); height: var(--sp-space-4); }
-  .sp-c-dRhJti.sp-c-gMfcns { padding: var(--sp-space-1); width: var(--sp-space-7); height: var(--sp-space-7); display: flex; }
-  .sp-c-bpmgvy { transform: translate(-4px, 9px) scale(0.13, 0.13); }
-  .sp-c-bpmgvy * { position: absolute; width: 96px; height: 96px; }
-  .sp-c-kLppIp { display: flex; flex-direction: column; width: 100%; position: relative; background-color: var(--sp-colors-surface1); transition: flex var(--sp-transitions-default); gap: 1px; }
-  .sp-c-kLppIp:has(.sp-stack) { background-color: var(--sp-colors-surface2); }
-  .sp-c-fVPbOs { color: initial; font-family: var(--sp-font-body); font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-palette: initial; font-size: var(--sp-font-size); font-stretch: initial; font-style: initial; font-synthesis: initial; font-variant: initial; font-variation-settings: initial; font-weight: initial; forced-color-adjust: initial; text-orientation: initial; text-rendering: optimizelegibility; -webkit-font-smoothing: subpixel-antialiased; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; accent-color: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; app-region: initial; appearance: initial; aspect-ratio: initial; backdrop-filter: initial; backface-visibility: initial; background: initial; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: initial; border-radius: initial; border-collapse: initial; border-end-end-radius: initial; border-end-start-radius: initial; border-inline: initial; border-start-end-radius: initial; border-start-start-radius: initial; inset: initial; box-shadow: initial; box-sizing: border-box; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-block-size: initial; contain-intrinsic-size: initial; contain-intrinsic-inline-size: initial; container: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: block; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: initial; hover-pop-up-delay: initial; hover-pop-up-hide-delay: initial; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; inset-block: initial; inset-inline: initial; isolation: initial; letter-spacing: initial; lighting-color: initial; line-break: initial; line-height: initial; line-height-step: initial; list-style: initial; margin-block: initial; margin: initial; margin-inline: initial; marker: initial; mask: initial; mask-type: initial; math-depth: initial; math-shift: initial; math-style: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: initial; mix-blend-mode: initial; object-fit: initial; object-position: initial; object-view-box: initial; offset: initial; opacity: initial; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-clip-margin: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block: initial; padding: initial; padding-inline: initial; page: initial; page-orientation: initial; page-transition-tag: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: initial; quotes: initial; r: initial; resize: initial; rotate: initial; ruby-position: initial; rx: initial; ry: initial; scale: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; scrollbar-gutter: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-emphasis: initial; text-emphasis-position: initial; text-indent: initial; text-justify: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-offset: initial; text-underline-position: initial; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; transition: initial; translate: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: initial; border-spacing: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: transparent; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: initial; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: initial; }
-  @media screen and (min-resolution: 2dppx) {
-  .sp-c-fVPbOs { -webkit-font-smoothing: antialiased; }
-}
-  .sp-c-fVPbOs * { box-sizing: border-box; }
-  .sp-c-fVPbOs .sp-wrapper:focus { outline: 0px; }
-  .sp-c-dyHYiL { border-bottom: 1px solid var(--sp-colors-surface2); background: var(--sp-colors-surface1); }
-  .sp-c-gGbYbQ { padding: 0 var(--sp-space-2); overflow: auto; display: flex; flex-wrap: nowrap; align-items: stretch; min-height: 40px; margin-bottom: -1px; }
-  .sp-c-kuvqxy { padding: 0 var(--sp-space-2); height: var(--sp-layout-headerHeight); white-space: nowrap; }
-  .sp-c-kuvqxy:focus { outline: none; }
-  .sp-c-ctabmA { border: 1px solid var(--sp-colors-surface2); display: flex; flex-wrap: wrap; align-items: stretch; border-radius: var(--sp-border-radius); overflow: hidden; position: relative; background-color: var(--sp-colors-surface2); gap: 1px; }
-  @media print {
-}
-  @media screen and (max-width: 768px) {
-}
-  .sp-c-bNbSGz { flex: 1 1 0%; position: relative; overflow: auto; background: var(--sp-colors-surface1); }
-  .sp-c-bNbSGz .cm-scroller { padding: var(--sp-space-4) 0; }
-  .sp-c-bNbSGz .sp-c-fWymNx { padding: var(--sp-space-4) 0; }
-  .sp-c-jOWzsE { margin: 0px; outline: none; height: 100%; }
-  .sp-c-jkvvao .sp-syntax-string { color: var(--sp-syntax-color-string); font-style: var(--sp-syntax-fontStyle-string); }
-  .sp-c-jkvvao .sp-syntax-plain { color: var(--sp-syntax-color-plain); font-style: var(--sp-syntax-fontStyle-plain); }
-  .sp-c-jkvvao .sp-syntax-comment { color: var(--sp-syntax-color-comment); font-style: var(--sp-syntax-fontStyle-comment); }
-  .sp-c-jkvvao .sp-syntax-keyword { color: var(--sp-syntax-color-keyword); font-style: var(--sp-syntax-fontStyle-keyword); }
-  .sp-c-jkvvao .sp-syntax-definition { color: var(--sp-syntax-color-definition); font-style: var(--sp-syntax-fontStyle-definition); }
-  .sp-c-jkvvao .sp-syntax-punctuation { color: var(--sp-syntax-color-punctuation); font-style: var(--sp-syntax-fontStyle-punctuation); }
-  .sp-c-jkvvao .sp-syntax-property { color: var(--sp-syntax-color-property); font-style: var(--sp-syntax-fontStyle-property); }
-  .sp-c-jkvvao .sp-syntax-tag { color: var(--sp-syntax-color-tag); font-style: var(--sp-syntax-fontStyle-tag); }
-  .sp-c-jkvvao .sp-syntax-static { color: var(--sp-syntax-color-static); font-style: var(--sp-syntax-fontStyle-static); }
-  .sp-c-kKzdnH { position: absolute; inset: 0px; margin: 0px; overflow: auto; height: 100%; z-index: var(--sp-zIndices-top); }
-  .sp-c-flHYPS { background-color: var(--sp-colors-surface1); }
-  .sp-c-laEVxU { position: absolute; right: var(--sp-space-2); bottom: var(--sp-space-2); z-index: var(--sp-zIndices-top); width: 32px; height: 32px; border-radius: var(--sp-border-radius); }
-  .sp-c-laEVxU .sp-c-bpmgvy { display: block; }
-  .sp-c-laEVxU .sp-c-dRhJti { display: none; }
-  .sp-c-laEVxU:hover .sp-c-dRhJti { display: block; }
-  .sp-c-laEVxU:hover .sp-c-bpmgvy { display: none; }
-  .sp-c-hPyEbM { animation: 1s linear 0s infinite normal forwards running sp-k-iOHdLQ; transform-style: preserve-3d; transform: rotateX(-25.5deg) rotateY(45deg); }
-  .sp-c-hPyEbM * { border: 10px solid var(--sp-colors-clickable); border-radius: 8px; background: var(--sp-colors-surface1); }
-  .sp-c-hPyEbM .top { transform: rotateX(90deg) translateZ(44px); transform-origin: 50% 50%; }
-  .sp-c-hPyEbM .bottom { transform: rotateX(-90deg) translateZ(44px); transform-origin: 50% 50%; }
-  .sp-c-hPyEbM .front { transform: rotateY(0deg) translateZ(44px); transform-origin: 50% 50%; }
-  .sp-c-hPyEbM .back { transform: rotateY(-180deg) translateZ(44px); transform-origin: 50% 50%; }
-  .sp-c-hPyEbM .left { transform: rotateY(-90deg) translateZ(44px); transform-origin: 50% 50%; }
-  .sp-c-hPyEbM .right { transform: rotateY(90deg) translateZ(44px); transform-origin: 50% 50%; }
-  .sp-c-eXsQzS { background-color: var(--sp-colors-surface2); border-radius: 99999px; }
-  .sp-c-eXsQzS[data-active="true"] { color: var(--sp-colors-surface1); background: var(--sp-colors-accent); }
-  .sp-c-eXsQzS:hover:not(:disabled, [data-active="true"]) { background-color: var(--sp-colors-surface3); }
-}
---sxs { --sxs:3 sp-c-PJLV-kCOVwI-status-pass sp-c-PJLV-kEzYsr-status-fail sp-c-PJLV-gHAhSA-status-skip sp-c-PJLV-jgnHyR-status-title sp-c-PJLV-iCgxLS-status-run sp-c-PJLV-bnDZSy-status-pass sp-c-PJLV-eYuGwt-status-fail sp-c-fVPbOs-LrWkf-variant-dark; }
-@media  {
-  .sp-c-PJLV-kCOVwI-status-pass { color: var(--test-pass); }
-  .sp-c-PJLV-kEzYsr-status-fail { color: var(--test-fail); }
-  .sp-c-PJLV-gHAhSA-status-skip { color: var(--test-skip); }
-  .sp-c-PJLV-jgnHyR-status-title { color: var(--test-title); }
-  .sp-c-PJLV-iCgxLS-status-run { background: var(--test-run); color: var(--sp-colors-surface1); }
-  .sp-c-PJLV-bnDZSy-status-pass { background: var(--test-pass); color: var(--sp-colors-surface1); }
-  .sp-c-PJLV-eYuGwt-status-fail { background: var(--test-fail); color: var(--sp-colors-surface1); }
-  .sp-c-fVPbOs-LrWkf-variant-dark { color-scheme: dark; }
-}
---sxs { --sxs:4; }
-@media  {
-}
---sxs { --sxs:5; }
-@media  {
-}
---sxs { --sxs:6; }
-@media  {
-}`;
-}
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index b4e1ea02..891dfbf4 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -2,13 +2,41 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-/** 
-  * Theme
-  */
-html .sp-wrapper {
+.sandpack {
   color-scheme: inherit;
   -webkit-font-smoothing: antialiased;
 
+  --sp-space-1: 4px;
+  --sp-space-2: 8px;
+  --sp-space-3: 12px;
+  --sp-space-4: 16px;
+  --sp-space-5: 20px;
+  --sp-space-6: 24px;
+  --sp-space-7: 28px;
+  --sp-space-8: 32px;
+  --sp-space-9: 36px;
+  --sp-space-10: 40px;
+  --sp-space-11: 44px;
+  --sp-border-radius: 4px;
+  --sp-layout-height: 300px;
+  --sp-layout-headerHeight: 40px;
+  --sp-transitions-default: 150ms ease;
+  --sp-zIndices-base: 1;
+  --sp-zIndices-overlay: 2;
+  --sp-zIndices-top: 3;
+
+  --sp-font-body: Optimistic Display, -apple-system, ui-sans-serif, system-ui,
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  --sp-font-mono: Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, Liberation Mono, Courier New, monospace;
+  --sp-font-size: calc(1em - 20%);
+  --sp-font-lineHeight: 24px;
+}
+
+/* Default theme */
+html .sandpack {
   --sp-colors-accent: #087ea4;
   --sp-colors-clickable: #959da5;
   --sp-colors-disabled: #24292e;
@@ -28,6 +56,7 @@ html .sp-wrapper {
   --sp-syntax-color-string: #032f62;
 }
 
+/* Dark theme */
 html.dark .sp-wrapper {
   --sp-colors-accent: #149eca;
   --sp-colors-clickable: #999;
@@ -51,27 +80,23 @@ html.dark .sp-wrapper {
 /**
  * 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 .sp-wrapper {
+  width: 100%;
 
-.sandpack--playground .cm-content {
-  caret-color: initial;
+  font-size: var(--sp-font-size);
+  font-family: var(--sp-font-body);
+  line-height: var(--sp-font-lineHeight);
 }
 
 /**
  * Layout
  */
-.sandpack .sp-wrapper {
-  width: 100%;
-}
-
 .sandpack .sp-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  background-color: var(--sp-colors-surface2);
+
   -webkit-mask-image: -webkit-radial-gradient(
     var(--sp-colors-surface1),
     var(--sp-colors-surface1)
@@ -80,30 +105,29 @@ html.dark .sp-wrapper {
   border-bottom-left-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   overflow: initial;
+
+  gap: 1px;
 }
+
+.sandpack .sp-stack {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
 @media screen and (max-width: 768px) {
-  .sp-layout > .sp-stack {
+  .sandpack .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
  */
@@ -127,8 +151,13 @@ html.dark .sp-wrapper {
 /**
  * Navigation
  */
-.sandpack--playground .sp-tabs-scrollable-container {
-  padding: 0;
+.sandpack .sp-tabs-scrollable-container {
+  overflow: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  min-height: 40px;
+  margin-bottom: -1px;
 }
 
 .sp-tabs .sp-tab-button {
@@ -160,7 +189,9 @@ html.dark .sp-wrapper {
   position: relative;
   overflow: auto;
   background: var(--sp-colors-surface1);
+  padding-left: var(--sp-space-2);
 }
+
 .sandpack .sp-code-editor .cm-content,
 .sandpack .sp-code-editor .cm-gutters,
 .sandpack .sp-code-editor .cm-gutterElement {
@@ -212,31 +243,180 @@ html.dark .sp-wrapper {
 }
 
 /**
- * Loading component
+ * Syntax highlight (code editor + code block)
  */
-.sandpack--playground .sp-cube-wrapper {
-  background-color: var(--sp-colors-surface1);
+.sandpack .sp-syntax-string {
+  color: var(--sp-syntax-color-string);
 }
 
-.sandpack--playground .sp-overlay {
-  @apply bg-card;
+.sandpack .sp-syntax-plain {
+  color: var(--sp-syntax-color-plain);
 }
 
-html.dark .sandpack--playground .sp-overlay {
-  @apply bg-wash-dark;
+.sandpack .sp-syntax-comment {
+  color: var(--sp-syntax-color-comment);
+}
+
+.sandpack .sp-syntax-keyword {
+  color: var(--sp-syntax-color-keyword);
+}
+
+.sandpack .sp-syntax-definition {
+  color: var(--sp-syntax-color-definition);
+}
+
+.sandpack .sp-syntax-punctuation {
+  color: var(--sp-syntax-color-punctuation);
+}
+
+.sandpack .sp-syntax-property {
+  color: var(--sp-syntax-color-property);
+}
+
+.sandpack .sp-syntax-tag {
+  color: var(--sp-syntax-color-tag);
+}
+
+.sandpack .sp-syntax-static {
+  color: var(--sp-syntax-color-static);
 }
 
 /**
- * CodeBlock
+ * Loading & error overlay component
  */
-.sandpack--codeblock .cm-content {
-  padding: 0;
+.sandpack .sp-cube-wrapper {
+  background-color: var(--sp-colors-surface1);
+  position: absolute;
+  right: var(--sp-space-2);
+  bottom: var(--sp-space-2);
+  z-index: var(--sp-zIndices-top);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sp-border-radius);
+}
+
+.sandpack .sp-button {
+  display: flex;
+  align-items: center;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.sandpack .sp-button svg {
+  min-width: var(--sp-space-5);
+  width: var(--sp-space-5);
+  height: var(--sp-space-5);
+  margin: auto;
+}
+
+.sandpack .sp-cube-wrapper .sp-cube {
+  display: flex;
+}
+
+.sandpack .sp-cube-wrapper .sp-button {
+  display: none;
+}
+
+.sandpack .sp-cube-wrapper:hover .sp-button {
+  display: block;
+}
+
+.sandpack .sp-cube-wrapper:hover .sp-cube {
+  display: none;
+}
+
+.sandpack .sp-cube {
+  transform: translate(-4px, 9px) scale(0.13, 0.13);
 }
 
-.sandpack--codeblock .cm-line {
-  margin-left: -20px;
-  padding-left: 20px;
-  padding-right: 20px;
+.sandpack .sp-cube * {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+}
+
+@keyframes cubeRotate {
+  0% {
+    transform: rotateX(-25.5deg) rotateY(45deg);
+  }
+
+  100% {
+    transform: rotateX(-25.5deg) rotateY(405deg);
+  }
+}
+
+.sandpack .sp-sides {
+  animation: cubeRotate 1s linear infinite;
+  animation-fill-mode: forwards;
+  transform-style: preserve-3d;
+  transform: rotateX(-25.5deg) rotateY(45deg);
+}
+
+.sandpack .sp-sides * {
+  border: 10px solid var(--sp-colors-clickable);
+  border-radius: 8px;
+  background: var(--sp-colors-surface1);
+}
+
+.sandpack .sp-sides .top {
+  transform: rotateX(90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .bottom {
+  transform: rotateX(-90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .front {
+  transform: rotateY(0deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .back {
+  transform: rotateY(-180deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .left {
+  transform: rotateY(-90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .right {
+  transform: rotateY(90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+
+.sandpack .sp-overlay {
+  @apply bg-card;
+  position: absolute;
+  inset: 0;
+  z-index: var(--sp-zIndices-top);
+}
+
+.sandpack .sp-error {
+  padding: var(--sp-space-4);
+  white-space: pre-wrap;
+  font-family: var(--sp-font-mono);
+  background-color: var(--sp-colors-error-surface);
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sandpack .sp-error-message {
+  animation: fadeIn 150ms ease;
+  color: var(--sp-colors-error);
+}
+
+html.dark .sandpack--playground .sp-overlay {
+  @apply bg-wash-dark;
 }
 
 /**
@@ -263,103 +443,14 @@ html.dark .sandpack--playground .sp-overlay {
   line-height: 24px !important;
 }
 
-/* We can't rely on Sandpack styles because our placeholders
-   no longer wait for Sandpack to load. */
-html {
-  --sp-space-1: 4px;
-  --sp-space-2: 8px;
-  --sp-space-3: 12px;
-  --sp-space-4: 16px;
-  --sp-space-5: 20px;
-  --sp-space-6: 24px;
-  --sp-space-7: 28px;
-  --sp-space-8: 32px;
-  --sp-space-9: 36px;
-  --sp-space-10: 40px;
-  --sp-space-11: 44px;
-  --sp-border-radius: 4px;
-  --sp-layout-height: 300px;
-  --sp-layout-headerHeight: 40px;
-  --sp-transitions-default: 150ms ease;
-  --sp-zIndices-base: 1;
-  --sp-zIndices-overlay: 2;
-  --sp-zIndices-top: 3;
-  --sp-colors-surface1: inherit;
-  --sp-colors-surface2: inherit;
-  --sp-colors-surface3: inherit;
-  --sp-colors-disabled: inherit;
-  --sp-colors-base: inherit;
-  --sp-colors-clickable: inherit;
-  --sp-colors-hover: inherit;
-  --sp-colors-accent: inherit;
-  --sp-colors-error: inherit;
-  --sp-colors-errorSurface: inherit;
-  --sp-colors-warning: inherit;
-  --sp-colors-warningSurface: inherit;
-  --sp-font-body: Optimistic Display, -apple-system, ui-sans-serif, system-ui,
-    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
-    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
-    Noto Color Emoji;
-  --sp-font-mono: Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco,
-    Consolas, Liberation Mono, Courier New, monospace;
-  --sp-font-size: calc(1em - 20%);
-  --sp-font-lineHeight: 24px;
-  --sp-syntax-color-plain: inherit;
-  --sp-syntax-color-comment: inherit;
-  --sp-syntax-color-keyword: inherit;
-  --sp-syntax-color-tag: inherit;
-  --sp-syntax-color-punctuation: inherit;
-  --sp-syntax-color-definition: inherit;
-  --sp-syntax-color-property: inherit;
-  --sp-syntax-color-static: inherit;
-  --sp-syntax-color-string: inherit;
-}
-.sp-pre-placeholder .sp-syntax-string {
-  color: var(--sp-syntax-color-string);
-  font-style: var(--sp-syntax-fontStyle-string);
-}
-.sp-pre-placeholder .sp-syntax-plain {
-  color: var(--sp-syntax-color-plain);
-  font-style: var(--sp-syntax-fontStyle-plain);
-}
-.sp-pre-placeholder .sp-syntax-comment {
-  color: var(--sp-syntax-color-comment);
-  font-style: var(--sp-syntax-fontStyle-comment);
-}
-.sp-pre-placeholder .sp-syntax-keyword {
-  color: var(--sp-syntax-color-keyword);
-  font-style: var(--sp-syntax-fontStyle-keyword);
-}
-.sp-pre-placeholder .sp-syntax-definition {
-  color: var(--sp-syntax-color-definition);
-  font-style: var(--sp-syntax-fontStyle-definition);
-}
-.sp-pre-placeholder .sp-syntax-punctuation {
-  color: var(--sp-syntax-color-punctuation);
-  font-style: var(--sp-syntax-fontStyle-punctuation);
-}
-.sp-pre-placeholder .sp-syntax-property {
-  color: var(--sp-syntax-color-property);
-  font-style: var(--sp-syntax-fontStyle-property);
-}
-.sp-pre-placeholder .sp-syntax-tag {
-  color: var(--sp-syntax-color-tag);
-  font-style: var(--sp-syntax-fontStyle-tag);
-}
-.sp-pre-placeholder .sp-syntax-static {
-  color: var(--sp-syntax-color-static);
-  font-style: var(--sp-syntax-fontStyle-static);
-}
-
 /**
  * Expand button
  */
-
-.sp-layout {
+.sandpack .sp-layout {
   min-height: 216px;
 }
 
-.sp-layout > .sp-stack:nth-child(1) {
+.sandpack .sp-layout > .sp-stack:nth-child(1) {
   /* Force vertical if there isn't enough space. */
   min-width: 431px;
   /* No min height on mobile because we know code in advance. */
@@ -367,7 +458,7 @@ html {
   max-height: 40vh;
 }
 
-.sp-layout > .sp-stack:nth-child(2) {
+.sandpack .sp-layout > .sp-stack:nth-child(2) {
   /* Force vertical if there isn't enough space. */
   min-width: 431px;
   /* Keep preview a fixed size on mobile to avoid jumps. */
@@ -375,40 +466,40 @@ html {
   min-height: 40vh;
   max-height: 40vh;
 }
-.sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+.sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
   /* Clicking "show more" lets mobile editor go full height. */
   max-height: unset;
   height: auto;
 }
 
-.sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+.sandpack .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) {
+  .sandpack .sp-layout > .sp-stack:nth-child(1) {
     /* On desktop, clamp height by pixels instead. */
     height: auto;
     min-height: unset;
     max-height: 406px;
   }
-  .sp-layout > .sp-stack:nth-child(2) {
+  .sandpack .sp-layout > .sp-stack:nth-child(2) {
     /* On desktop, clamp height by pixels instead. */
     height: auto;
     min-height: unset;
     max-height: 406px;
   }
-  .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+  .sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
     max-height: unset;
   }
-  .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+  .sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
     max-height: unset;
   }
 }
 
-.sandpack--playground .sp-layout .sandpack-expand {
+.sandpack .sp-layout .sandpack-expand {
   border-left: none;
   margin-left: 0;
 }
@@ -422,29 +513,29 @@ html {
 /**
  * Integrations: console
  */
-.console .sp-cm,
-.console .sp-cm .cm-scroller,
-.console .sp-cm .cm-line {
+.sandpack .console .sp-cm,
+.sandpack .console .sp-cm .cm-scroller,
+.sandpack .console .sp-cm .cm-line {
   padding: 0px !important;
 }
 
 /**
  * Integrations: eslint
  */
-.sp-code-editor .cm-diagnostic {
+.sandpack .sp-code-editor .cm-diagnostic {
   @apply text-secondary;
 }
 
 /**
  * Integrations: React devtools inline
  */
-.sp-devtools {
+.sandpack .sp-devtools {
   border-bottom-left-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   overflow: hidden;
 }
 
-.sp-wrapper .sp-layout-devtools {
+.sandpack .sp-wrapper .sp-layout-devtools {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -452,7 +543,7 @@ html {
 /**
  * Overwrite inline sty
  */
-.sp-devtools > div {
+.sandpack .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;
@@ -482,7 +573,7 @@ html.dark .sp-devtools > div {
   --color-modal-background: #16181de0 !important;
 }
 
-.sp-devtools table td {
+.sandpack .sp-devtools table td {
   border: 1px solid var(--sp-colors-surface2);
 }
 
@@ -504,8 +595,8 @@ html.dark .sp-devtools > div {
  */
 @media screen and (max-width: 768px) {
   @supports (-webkit-overflow-scrolling: touch) {
-    .sandbox .cm-content,
-    .sandbox .sp-code-editor .sp-pre-placeholder {
+    .sandpack--playground .cm-content,
+    .sandpack--playground .sp-code-editor .sp-pre-placeholder {
       font-size: initial;
     }
     .DocSearch-Input {
diff --git a/beta/src/utils/emptyShim.js b/beta/src/utils/emptyShim.js
new file mode 100644
index 00000000..294b03de
--- /dev/null
+++ b/beta/src/utils/emptyShim.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// We use this file to shim out dependencies that we don't need.
+// See next.config.js.
diff --git a/beta/yarn.lock b/beta/yarn.lock
index de9036bf..7ad6a5c7 100644
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -709,18 +709,18 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/sandpack-client@^1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.10.1.tgz#c1dfd59c853fb9b6532a3dfdfe14736df36e6f4b"
-  integrity sha512-BZAfseNTO2a3AFZfGH+zKkbg6nMMy2bjg43trgGVdZyuu6mC7X/VBEdHF3ULl3AsEM5CsrSmu3SbDCNitmUHQQ==
+"@codesandbox/sandpack-client@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.12.1.tgz#fa3b66ecb08547c47e1cdf6248f5004bf5be68fb"
+  integrity sha512-p79Sk41hrp5ojeHbgTU/JWNS3UcRJKewq+oRD6O6g3MzlhUnE+xO94ui79Td4aeU4fq0jGHeLHIHCW04WMK4Yg==
   dependencies:
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@codesandbox/sandpack-react@1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.11.0.tgz#ce58b754dd4105bfc568878ba23336479163ef73"
-  integrity sha512-0kzMFhO1MUFJv69kuuJmdTKq1xZVTdXVxFW7lEON+42lxIctQJuzo5ooCJnjWU6QhSvKRQQ7NLrtJrDXYLP2Kg==
+"@codesandbox/sandpack-react@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.14.1.tgz#271e8b39e8c178a30f3bdc3a960e9b9eb862552e"
+  integrity sha512-eiRxt5A7pGFSQcj8F95SQHS3JxQkuoZ7J/SDRjj2VMwsRa45jqlDgMTZ4KEMZ3XNF6ySZlcEXo+xQbmQXCfptg==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"
@@ -736,7 +736,7 @@
     "@codemirror/matchbrackets" "^0.19.3"
     "@codemirror/state" "^0.19.6"
     "@codemirror/view" "^0.19.32"
-    "@codesandbox/sandpack-client" "^1.10.1"
+    "@codesandbox/sandpack-client" "^1.12.1"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
     clean-set "^1.1.2"