From 5d4a324331472e6d7f5e93c687b2b208dbdc4842 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 7 Apr 2023 14:35:06 +0000
Subject: [PATCH] Update 4 files

---
 website/landing/components/Hero/Hero.tsx      |  8 +++-
 .../Hero/HeroDesktop/HeroDesktop.tsx          | 43 +++++++------------
 website/landing/components/Intro/Examples.tsx | 25 +++++------
 .../components/Intro/Sections/Layout.tsx      | 22 ++++------
 4 files changed, 42 insertions(+), 56 deletions(-)

diff --git a/website/landing/components/Hero/Hero.tsx b/website/landing/components/Hero/Hero.tsx
index fff393dc8..b395dd657 100644
--- a/website/landing/components/Hero/Hero.tsx
+++ b/website/landing/components/Hero/Hero.tsx
@@ -1,4 +1,5 @@
 import { SandpackProvider } from "@codesandbox/sandpack-react";
+import { sandpackDark } from "@codesandbox/sandpack-themes";
 
 import { useBreakpoint } from "../common/useBreakpoint";
 
@@ -6,6 +7,10 @@ import { HeroDesktop } from "./HeroDesktop";
 import { files } from "./HeroDesktop/heroSandpackFiles";
 import { HeroMobile } from "./HeroMobile";
 
+const CUSTOM_CLASSES_MAP = {
+  "sp-stack": "custom-stack__hero",
+};
+
 export const Hero: React.FC = () => {
   const isDesktop = useBreakpoint("bp2");
 
@@ -16,8 +21,9 @@ export const Hero: React.FC = () => {
         entry: "/index.js",
       }}
       files={files}
-      options={{ initMode: "immediate" }}
+      options={{ initMode: "immediate", classes: CUSTOM_CLASSES_MAP }}
       template="react"
+      theme={sandpackDark}
     >
       <HeroDesktop />{" "}
     </SandpackProvider>
diff --git a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
index abe683622..8149ab0e4 100644
--- a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
+++ b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
@@ -1,12 +1,9 @@
 import type { CodeEditorRef } from "@codesandbox/sandpack-react";
 import {
-  ClasserProvider,
   SandpackCodeEditor,
   SandpackPreview,
-  SandpackThemeProvider,
   useSandpack,
 } from "@codesandbox/sandpack-react";
-import { sandpackDark } from "@codesandbox/sandpack-themes";
 import { useTransform, useViewportScroll } from "framer-motion";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
@@ -14,10 +11,6 @@ import { AnimatedBox, Box, Clipboard, Resources, Text } from "../../common";
 
 import { SandpackTitle } from "./SandpackTitle";
 
-const CUSTOM_CLASSES_MAP = {
-  "sp-stack": "custom-stack__hero",
-};
-
 export const HeroDesktop: React.FC = () => {
   const { scrollY } = useViewportScroll();
   const { sandpack } = useSandpack();
@@ -268,26 +261,22 @@ export const HeroDesktop: React.FC = () => {
             },
           }}
         >
-          <SandpackThemeProvider theme={sandpackDark}>
-            <ClasserProvider classes={CUSTOM_CLASSES_MAP}>
-              <SandpackCodeEditor ref={editorRef} />
-              <Box
-                css={{
-                  opacity: "$sandpack-preview-opacity",
-                  position: "absolute",
-                  top: 0,
-                  transform: "translateX(100%)",
-                  transition: "opacity 300ms",
-
-                  ".custom-stack__hero": {
-                    border: "none !important",
-                  },
-                }}
-              >
-                <SandpackPreview />
-              </Box>
-            </ClasserProvider>
-          </SandpackThemeProvider>
+          <SandpackCodeEditor ref={editorRef} />
+          <Box
+            css={{
+              opacity: "$sandpack-preview-opacity",
+              position: "absolute",
+              top: 0,
+              transform: "translateX(100%)",
+              transition: "opacity 300ms",
+
+              ".custom-stack__hero": {
+                border: "none !important",
+              },
+            }}
+          >
+            <SandpackPreview />
+          </Box>
         </Box>
 
         <Box
diff --git a/website/landing/components/Intro/Examples.tsx b/website/landing/components/Intro/Examples.tsx
index e0cd3b74b..68e289af4 100644
--- a/website/landing/components/Intro/Examples.tsx
+++ b/website/landing/components/Intro/Examples.tsx
@@ -1,9 +1,7 @@
 import {
-  ClasserProvider,
   SandpackLayout,
   SandpackPreview,
   SandpackProvider,
-  SandpackThemeProvider,
 } from "@codesandbox/sandpack-react";
 import { styled } from "@stitches/react";
 import { motion, useTransform, useViewportScroll } from "framer-motion";
@@ -114,22 +112,19 @@ export const Examples: React.FC = () => {
                     dependencies: { "@codesandbox/sandpack-react": "latest" },
                   }}
                   files={layoutFiles}
-                  options={{ initMode: "user-visible" }}
-                  template="react"
-                >
-                  <ClasserProvider
-                    classes={{
+                  options={{
+                    initMode: "user-visible",
+                    classes: {
                       "sp-layout": "custom-layout",
                       "sp-stack": "custom-stack",
                       "sp-wrapper": "custom-wrapper",
-                    }}
-                  >
-                    <SandpackThemeProvider>
-                      <SandpackLayout>
-                        <SandpackPreview />
-                      </SandpackLayout>
-                    </SandpackThemeProvider>
-                  </ClasserProvider>
+                    },
+                  }}
+                  template="react"
+                >
+                  <SandpackLayout>
+                    <SandpackPreview />
+                  </SandpackLayout>
                 </SandpackProvider>
               </motion.div>
             </SandpackContainer>
diff --git a/website/landing/components/Intro/Sections/Layout.tsx b/website/landing/components/Intro/Sections/Layout.tsx
index 6352b46fb..869017ed9 100644
--- a/website/landing/components/Intro/Sections/Layout.tsx
+++ b/website/landing/components/Intro/Sections/Layout.tsx
@@ -4,7 +4,6 @@ import {
   SandpackThemeProvider,
   useActiveCode,
   SandpackProvider,
-  ClasserProvider,
   SandpackPreview,
   SandpackLayout,
   useSandpack,
@@ -107,21 +106,18 @@ export const LayoutExample: React.FC = () => {
               dependencies: { "@codesandbox/sandpack-react": "latest" },
             }}
             files={layoutFiles}
-            template="react"
-          >
-            <ClasserProvider
-              classes={{
+            options={{
+              classes: {
                 "sp-layout": "custom-layout",
                 "sp-stack": "custom-stack",
                 "sp-wrapper": "custom-wrapper",
-              }}
-            >
-              <SandpackThemeProvider>
-                <SandpackLayout>
-                  <SandpackPreview />
-                </SandpackLayout>
-              </SandpackThemeProvider>
-            </ClasserProvider>
+              },
+            }}
+            template="react"
+          >
+            <SandpackLayout>
+              <SandpackPreview />
+            </SandpackLayout>
           </SandpackProvider>
         </SandpackContainerMobile>