[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

@@ -0,0 +1 @@
+SANDPACK_BARE_COMPONENTS=true 

beta/.env.production

@@ -1 +1,2 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+SANDPACK_BARE_COMPONENTS=true 

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')

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

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

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)
                   )}>

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'}

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

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

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}

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

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.
-}

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 {

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.

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"