diff --git a/plugins/docusaurus/package.json b/plugins/docusaurus/package.json
index 32b23ecbc..8ffac5512 100644
--- a/plugins/docusaurus/package.json
+++ b/plugins/docusaurus/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codesandbox/sandpack-docusaurus",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "",
   "main": "src/index.js",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "build": "echo 1"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.6.0",
+    "@codesandbox/sandpack-react": "^0.7.1",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9"
   },
diff --git a/sandpack-react/src/components/TranspiledCode/index.tsx b/sandpack-react/src/components/TranspiledCode/index.tsx
index f28625d5d..4a815ce8e 100644
--- a/sandpack-react/src/components/TranspiledCode/index.tsx
+++ b/sandpack-react/src/components/TranspiledCode/index.tsx
@@ -5,9 +5,10 @@ import { ErrorOverlay } from "../../common/ErrorOverlay";
 import { LoadingOverlay } from "../../common/LoadingOverlay";
 import { useSandpack } from "../../hooks/useSandpack";
 import { useTranspiledCode } from "../../hooks/useTranspiledCode";
+import type { CodeViewerProps } from "../CodeViewer";
 import { SandpackCodeViewer } from "../CodeViewer";
 
-export const SandpackTranspiledCode: React.FC = () => {
+export const SandpackTranspiledCode: React.FC<CodeViewerProps> = (props) => {
   const { sandpack } = useSandpack();
   const transpiledCode = useTranspiledCode();
   const c = useClasser("sp");
@@ -23,7 +24,9 @@ export const SandpackTranspiledCode: React.FC = () => {
 
   return (
     <div className={c("transpiled-code")}>
-      {transpiledCode ? <SandpackCodeViewer code={transpiledCode} /> : null}
+      {transpiledCode && (
+        <SandpackCodeViewer code={transpiledCode} {...props} />
+      )}
       <iframe ref={hiddenIframeRef} style={{ display: "none" }} />
       <ErrorOverlay />
       <LoadingOverlay clientId="hidden" />
diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css
index 27420a86c..5b5466ebe 100644
--- a/sandpack-react/src/styles/index.css
+++ b/sandpack-react/src/styles/index.css
@@ -113,7 +113,7 @@
   font-family: var(--sp-font-mono);
   font-size: var(--sp-font-size);
   color: var(--sp-colors-fg-active);
-  line-height: 1.4;
+  line-height: var(--sp-line-height);
 }
 
 .sp-code-editor {
@@ -149,6 +149,34 @@
   outline: 0;
 }
 
+.sp-cm .cm-scroller::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-track {
+  background-color: var(--sp-colors-bg-default);
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+/* Handle */
+.sp-cm .cm-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--sp-colors-fg-default);
+  border-radius: 9999px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-track {
+  border-left: 1px solid var(--sp-colors-fg-inactive);
+}
+
 .sp-transpiled-code {
   display: flex;
   flex-direction: column;
diff --git a/sandpack-react/src/themes/index.ts b/sandpack-react/src/themes/index.ts
index 509e8261f..95e0377e2 100644
--- a/sandpack-react/src/themes/index.ts
+++ b/sandpack-react/src/themes/index.ts
@@ -79,7 +79,7 @@ export const sandpackDark: SandpackTheme = {
     defaultText: "#5a5a5a",
     inactiveText: "#1a1a1a",
     activeBackground: "#272727",
-    defaultBackground: "#131313",
+    defaultBackground: "#151515",
     inputBackground: "#2e2e2e",
     accent: "#90e86f",
     errorBackground: "#dac1fb",
diff --git a/website/docs/package.json b/website/docs/package.json
index a234d9433..0646efc2b 100644
--- a/website/docs/package.json
+++ b/website/docs/package.json
@@ -16,8 +16,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-docusaurus": "^0.6.0",
-    "@codesandbox/sandpack-react": "^0.6.0",
+    "@codesandbox/sandpack-docusaurus": "^0.7.1",
+    "@codesandbox/sandpack-react": "^0.7.1",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/plugin-sitemap": "^2.0.0-beta.9",
     "@docusaurus/preset-classic": "2.0.0-beta.9",
diff --git a/website/docs/src/scss/_code.scss b/website/docs/src/scss/_code.scss
index 005734450..e58b19fa2 100644
--- a/website/docs/src/scss/_code.scss
+++ b/website/docs/src/scss/_code.scss
@@ -1,6 +1,6 @@
 pre {
   font: inherit;
-  background: #131313;
+  background: #151515;
 }
 
 code {
diff --git a/website/docs/src/scss/_general.scss b/website/docs/src/scss/_general.scss
index 2e75ceeb1..1c826e643 100644
--- a/website/docs/src/scss/_general.scss
+++ b/website/docs/src/scss/_general.scss
@@ -47,7 +47,3 @@ main {
 aside {
   border: 0 !important;
 }
-
-.sp-wrapper .sp-layout {
-  border: 1px solid var(--sandpack-border-color) !important;
-}
diff --git a/website/docs/src/scss/_variables.scss b/website/docs/src/scss/_variables.scss
index 0ba83d204..9487dbf41 100644
--- a/website/docs/src/scss/_variables.scss
+++ b/website/docs/src/scss/_variables.scss
@@ -66,9 +66,10 @@ html[data-theme="dark"] {
   --sandpack-text-color: #ffffff;
   --sandpack-text-secondary-color: #979993;
 
-  --sandpack-background-color: #111111;
+  --sandpack-background-color: #090909;
   --sandpack-surface-color: #1a1a1a;
   --sandpack-border-color: #242424;
+  --ifm-code-background: #1d1d1d;
 
   --ifm-menu-color-background-active: rgba(111, 236, 91, 0.05);
   --ifm-hover-overlay: rgba(111, 236, 91, 0.05);
diff --git a/website/landing/components/Features/Features.tsx b/website/landing/components/Features/Features.tsx
index 6a65f5c60..d638ff675 100644
--- a/website/landing/components/Features/Features.tsx
+++ b/website/landing/components/Features/Features.tsx
@@ -97,7 +97,7 @@ export const Features: React.FC = () => {
             transition: "opacity .5s cubic-bezier(0.770, 0.000, 0.175, 1.000)",
 
             "@bp1": {
-              gap: "100px",
+              gap: "80px",
             },
 
             "@bp2": {
diff --git a/website/landing/components/Intro/Examples.tsx b/website/landing/components/Intro/Examples.tsx
index 9f9df724d..a1dbcf10f 100644
--- a/website/landing/components/Intro/Examples.tsx
+++ b/website/landing/components/Intro/Examples.tsx
@@ -69,7 +69,12 @@ export const Examples: React.FC = () => {
       <div ref={sandpackRefSectionTop} />
       <motion.div
         ref={sandpackRefSectionHeight}
-        style={{ x, position: "sticky", top: "calc(50vh - 25%)" }}
+        style={{
+          x,
+          position: "sticky",
+          top: "calc(50vh - 25%)",
+          marginBottom: "calc(50vh - 15%)",
+        }}
       >
         <Box
           css={{
@@ -89,7 +94,7 @@ export const Examples: React.FC = () => {
           <motion.div
             animate={{ opacity: visibility ? 0 : 1 }}
             initial={{ opacity: 0 }}
-            style={{ position: "relative", zIndex: 1 }}
+            style={{ position: "relative", zIndex: visibility ? -1 : 1 }}
           >
             <SandpackExample />
           </motion.div>
diff --git a/website/landing/components/Intro/Sections/Custom.tsx b/website/landing/components/Intro/Sections/Custom.tsx
index e302d69e8..2398c3013 100644
--- a/website/landing/components/Intro/Sections/Custom.tsx
+++ b/website/landing/components/Intro/Sections/Custom.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const ORIGINAL_CODE = `<Sandpack
@@ -91,7 +92,10 @@ export const CustomExample: React.FC = () => {
     <FadeAnimation>
       <Row ref={ref}>
         <Content>
-          <CardTitle>Easily customise the project to run</CardTitle>
+          <CardTitle>
+            Easily customise <br />
+            the project to run
+          </CardTitle>
           <CardDescription>
             Use the{" "}
             <a
@@ -105,6 +109,7 @@ export const CustomExample: React.FC = () => {
           </CardDescription>
 
           <CodeWrapper>
+            <Caption>Code snippet</Caption>
             <SandpackThemeProvider theme="sandpack-dark">
               <SandpackCodeEditor ref={codeEditorRef} showTabs={false} />
 
@@ -132,6 +137,7 @@ export const CustomExample: React.FC = () => {
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview
             options={{ customSetup: parseFromSandpackToJson(code) }}
           />
diff --git a/website/landing/components/Intro/Sections/Editor.tsx b/website/landing/components/Intro/Sections/Editor.tsx
index 7433d0fa4..3eecfacca 100644
--- a/website/landing/components/Intro/Sections/Editor.tsx
+++ b/website/landing/components/Intro/Sections/Editor.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const ORIGINAL_CODE = `<Sandpack 
@@ -112,6 +113,7 @@ export const EditorExample: React.FC = () => {
           </CardDescription>
 
           <CodeWrapper>
+            <Caption>Code snippet</Caption>
             <SandpackThemeProvider theme="sandpack-dark">
               <SandpackCodeEditor ref={codeEditorRef} showTabs={false} />
 
@@ -140,6 +142,7 @@ export const EditorExample: React.FC = () => {
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview options={{ options: custom }} />
         </SandpackContainerMobile>
 
diff --git a/website/landing/components/Intro/Sections/Layout.tsx b/website/landing/components/Intro/Sections/Layout.tsx
index 4dbe0da01..0215b11ca 100644
--- a/website/landing/components/Intro/Sections/Layout.tsx
+++ b/website/landing/components/Intro/Sections/Layout.tsx
@@ -23,6 +23,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 export const LayoutExample: React.FC = () => {
@@ -78,10 +79,10 @@ export const LayoutExample: React.FC = () => {
                 borderRadius: 0,
                 borderBottomLeftRadius: "16px",
                 borderBottomRightRadius: "16px",
-                padding: "0 15px",
               },
             }}
           >
+            <Caption>Code snippet</Caption>
             <SandpackThemeProvider theme="sandpack-dark">
               <SandpackCodeEditor />
             </SandpackThemeProvider>
@@ -91,6 +92,7 @@ export const LayoutExample: React.FC = () => {
         <SandpackContainerPlaceholder />
 
         <SandpackContainerMobile css={{ ".custom-layout": { height: "50vh" } }}>
+          <Caption>Sandpack preview</Caption>
           <SandpackProvider
             customSetup={{
               files: layoutFiles,
diff --git a/website/landing/components/Intro/Sections/LayoutContext.tsx b/website/landing/components/Intro/Sections/LayoutContext.tsx
index 72eb20214..ec25dfa7c 100644
--- a/website/landing/components/Intro/Sections/LayoutContext.tsx
+++ b/website/landing/components/Intro/Sections/LayoutContext.tsx
@@ -32,8 +32,8 @@ import "@codesandbox/sandpack-react/dist/index.css";
 export default () => (
   <SandpackProvider template="vanilla">
     <SandpackThemeProvider>
-      <SandpackCodeEditor />
-      <SandpackTranspiledCode />
+      <SandpackCodeEditor showTabs={false} />
+      <SandpackTranspiledCode showTabs={false} />
     </SandpackThemeProvider>
   </SandpackProvider>
 );
diff --git a/website/landing/components/Intro/Sections/Template.tsx b/website/landing/components/Intro/Sections/Template.tsx
index b354083ac..9ebabda7a 100644
--- a/website/landing/components/Intro/Sections/Template.tsx
+++ b/website/landing/components/Intro/Sections/Template.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const frameworkOptions: SandpackPredefinedTemplate[] = [
@@ -83,6 +84,7 @@ export const TemplateExample: React.FC = () => {
             </a>{" "}
             prop to get started with Sandpack in a few lines of code.
           </CardDescription>
+
           <SnippetButton
             ref={boxRef}
             onClick={shuffleTemplate}
@@ -111,7 +113,7 @@ export const TemplateExample: React.FC = () => {
                     y: mousePosition.y,
                   }}
                 >
-                  click to change
+                  Click to change
                 </ToolTip>
               </AnimatePresence>
             )}
@@ -119,6 +121,7 @@ export const TemplateExample: React.FC = () => {
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview options={{ template }} />
         </SandpackContainerMobile>
 
diff --git a/website/landing/components/Intro/Sections/Theme.tsx b/website/landing/components/Intro/Sections/Theme.tsx
index 6414b3410..04883aff7 100644
--- a/website/landing/components/Intro/Sections/Theme.tsx
+++ b/website/landing/components/Intro/Sections/Theme.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const themeOptions: SandpackPredefinedTheme[] = [
@@ -73,18 +74,23 @@ export const ThemeExample: React.FC = () => {
     <FadeAnimation>
       <Row ref={ref}>
         <Content>
-          <CardTitle>Set a theme, or create your own</CardTitle>
+          <CardTitle>
+            Set a theme, or
+            <br /> create your own
+          </CardTitle>
           <CardDescription>
-            You can style Sandpack however you&apos;d like by applying a{" "}
+            You can style Sandpack however you&apos;d like! Use one of our
+            predefined{" "}
             <a
               href="https://sandpack.codesandbox.io/docs/getting-started/custom-ui#theming"
               rel="noreferrer"
               target="_blank"
             >
               <code>theme</code>
-            </a>
-            !
+            </a>{" "}
+            or apply your own.
           </CardDescription>
+
           <SnippetButton
             ref={boxRef}
             onClick={shuffleTheme}
@@ -113,7 +119,7 @@ export const ThemeExample: React.FC = () => {
                     y: mousePosition.y,
                   }}
                 >
-                  click to change
+                  Click to change
                 </ToolTip>
               </AnimatePresence>
             )}
@@ -121,6 +127,7 @@ export const ThemeExample: React.FC = () => {
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview options={{ theme }} />
         </SandpackContainerMobile>
 
diff --git a/website/landing/components/Intro/Sections/common.tsx b/website/landing/components/Intro/Sections/common.tsx
index 5de4279cf..ac7f38651 100644
--- a/website/landing/components/Intro/Sections/common.tsx
+++ b/website/landing/components/Intro/Sections/common.tsx
@@ -50,11 +50,10 @@ export const Content = styled("div", {
   alignItems: "center",
   display: "flex",
   flexDirection: "column",
-  gap: "20px",
+  gap: "10px",
   width: "100%",
 
   "@bp1": {
-    gap: "20px",
     width: "384px",
   },
 
@@ -201,11 +200,17 @@ export const FadeAnimation: React.FC = ({ children }) => {
 export const CodeWrapper = styled("div", {
   position: "relative",
   width: "100%",
+  marginTop: "30px",
 
   pre: { padding: 0 },
 
   ".sp-code-editor": {
     borderRadius: "16px",
-    padding: "0 15px",
+  },
+});
+
+export const Caption = styled("p", {
+  "@bp1": {
+    display: "none",
   },
 });
diff --git a/website/landing/components/Users/Users.tsx b/website/landing/components/Users/Users.tsx
index 62a827ba7..72c4bb44a 100644
--- a/website/landing/components/Users/Users.tsx
+++ b/website/landing/components/Users/Users.tsx
@@ -89,7 +89,7 @@ export const Users: React.FC = () => {
             const { url, height, width } = user.logo;
 
             return (
-              <ListItem key={user.name}>
+              <ListItem key={user.name} css={{ flex: "none" }}>
                 <UserLink
                   css={{
                     transitionDelay: inView
diff --git a/website/landing/components/common/Card.tsx b/website/landing/components/common/Card.tsx
index 11ca01997..060a34fff 100644
--- a/website/landing/components/common/Card.tsx
+++ b/website/landing/components/common/Card.tsx
@@ -25,15 +25,7 @@ export const Card = styled("div", {
     size: {
       small: {
         gap: "10px",
-        width: "256px",
-
-        "@bp2": {
-          width: "240px",
-        },
-
-        "@bp3": {
-          width: "320px",
-        },
+        width: "100%",
       },
     },
   },
@@ -83,10 +75,11 @@ export const CardDescription = styled("p", {
 
   ".external-link": {
     color: "$$codeBlockForeground",
-    textDecoration: "underline",
+    textDecoration: "none",
 
     "&:hover": {
-      textDecoration: "none",
+      textDecoration: "underline",
+      color: "$primary",
     },
   },
 
@@ -112,6 +105,14 @@ export const CardDescription = styled("p", {
       background: "$$codeBlockBackground",
       color: "$$codeBlockForeground",
       transition: "all .2s ease",
+
+      "&:after": {
+        content: "↗",
+        display: "inline-block",
+        marginLeft: "8px",
+        position: "relative",
+        top: 1,
+      },
     },
   },
 
diff --git a/website/landing/components/common/CodeBlock.tsx b/website/landing/components/common/CodeBlock.tsx
index 4d110786a..ff3f9b214 100644
--- a/website/landing/components/common/CodeBlock.tsx
+++ b/website/landing/components/common/CodeBlock.tsx
@@ -17,11 +17,12 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
     <Box
       css={{
         width: "100%",
+        marginTop: "30px",
         pre: { padding: 0 },
 
         ".cm-editor": {
           borderRadius: oneLiner ? "78px" : "16px",
-          padding: "15px",
+          padding: "10px 5px",
         },
       }}
     >
diff --git a/website/landing/components/common/List.tsx b/website/landing/components/common/List.tsx
index ba7fd5f9d..51c578379 100644
--- a/website/landing/components/common/List.tsx
+++ b/website/landing/components/common/List.tsx
@@ -6,4 +6,4 @@ export const List = styled("ul", {
   padding: 0,
 });
 
-export const ListItem = styled("li", {});
+export const ListItem = styled("li", { flex: 1 });
diff --git a/website/landing/components/common/Section.tsx b/website/landing/components/common/Section.tsx
index b27d62d29..462eac451 100644
--- a/website/landing/components/common/Section.tsx
+++ b/website/landing/components/common/Section.tsx
@@ -8,7 +8,7 @@ export const SectionWrapper = styled("div", {
   $$backgroundColor: palette.darkBackground,
   $$primaryTextColor: palette.darkTextPrimary,
   $$secondaryTextColor: palette.darkTextSecondary,
-  $$codeBlockBackground: palette.lightTextSecondary,
+  $$codeBlockBackground: "#1d1d1d",
   $$codeBlockForeground: palette.lightBackground,
 
   background: "$$backgroundColor",
diff --git a/website/landing/package.json b/website/landing/package.json
index f0cac4c69..f60e0998d 100644
--- a/website/landing/package.json
+++ b/website/landing/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.7.0",
+    "@codesandbox/sandpack-react": "^0.7.1",
     "@stitches/react": "^1.2.5",
     "framer-motion": "^5.3.2",
     "next": "12.0.2",
diff --git a/website/landing/pages/index.tsx b/website/landing/pages/index.tsx
index 0aac203b9..fa135d338 100644
--- a/website/landing/pages/index.tsx
+++ b/website/landing/pages/index.tsx
@@ -58,8 +58,8 @@ const Home: NextPage<HomeProps> = () => {
 
       <Main>
         <Hero />
-        <Intro />
         <Features />
+        <Intro />
         <AdvancedUsage />
         {/* <Showcase />*/}
         <Users />
diff --git a/website/landing/styles/globalStyles.ts b/website/landing/styles/globalStyles.ts
index 02c93dbf7..9bb3f07a4 100644
--- a/website/landing/styles/globalStyles.ts
+++ b/website/landing/styles/globalStyles.ts
@@ -27,40 +27,6 @@ export const globalStyles = globalCss({
     boxSizing: "border-box",
   },
 
-  // Remove when we replace scrollbar styling in the sandpack library
-  "::-webkit-scrollbar": {
-    width: 10,
-    height: 10,
-  },
-
-  "::-webkit-scrollbar-track": {
-    backgroundColor: "#131313",
-  },
-
-  "::-webkit-scrollbar-corner": {
-    backgroundColor: "transparent",
-  },
-
-  /* Handle */
-  "::-webkit-scrollbar-thumb": {
-    backgroundColor: "rgba(255,255,255,0.2)",
-    borderRadius: 9999,
-  },
-
-  /* Handle on hover */
-  "::-webkit-scrollbar-thumb:hover": {
-    backgroundColor: "rgba(255,255,255,0.4)",
-  },
-
-  "body::-webkit-scrollbar": {
-    width: 12,
-    height: 12,
-  },
-
-  "body::-webkit-scrollbar-track": {
-    borderLeft: "1px solid rgba(255,255,255,0.1)",
-  },
-
   body: {
     backgroundColor: "$darkBackground",
     color: "$darkTextPrimary",
diff --git a/yarn.lock b/yarn.lock
index 512332fff..b0f9f45c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1476,37 +1476,6 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/sandpack-client@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-0.6.0.tgz#15c227b0a6d96676a271e29a6c0bed8ab399bb70"
-  integrity sha512-Li6aGnWzC67nGvWg9iQEx933K0n5EVD+cBiPfVCy2judQpggA/+9aAVC3AnFJthZgAloi18RxCH++3m7ITVk1w==
-  dependencies:
-    codesandbox-import-utils "^1.2.3"
-    lodash.isequal "^4.5.0"
-
-"@codesandbox/sandpack-react@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.6.0.tgz#3d4e08c759a04f73dcd580b597d0e86bfc3d424b"
-  integrity sha512-77RrK7qkT9rVQyoV32Hez2G0mNIx3JBHP4BRNuC9friqtLYlarIOf8lI0oKMsaDr1kR1aSnlNQrupWhY2gRNXA==
-  dependencies:
-    "@code-hike/classer" "^0.0.0-aa6efee"
-    "@codemirror/closebrackets" "^0.19.0"
-    "@codemirror/commands" "^0.19.5"
-    "@codemirror/comment" "^0.19.0"
-    "@codemirror/gutter" "^0.19.5"
-    "@codemirror/highlight" "^0.19.6"
-    "@codemirror/history" "^0.19.0"
-    "@codemirror/lang-css" "^0.19.3"
-    "@codemirror/lang-html" "^0.19.3"
-    "@codemirror/lang-javascript" "^0.19.3"
-    "@codemirror/language" "^0.19.4"
-    "@codemirror/matchbrackets" "^0.19.3"
-    "@codemirror/state" "^0.19.5"
-    "@codemirror/view" "^0.19.16"
-    "@codesandbox/sandpack-client" "^0.6.0"
-    codesandbox-import-util-types "^2.2.3"
-    codesandbox-import-utils "^2.2.3"
-
 "@discoveryjs/json-ext@^0.5.3":
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"