[docs] Move codesandbox to MUI org (#33122)

README.md

@@ -134,15 +134,10 @@ Here is an example of a basic app using Material UI's `Button` component:
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import Button from '@mui/material/Button';
 
 function App() {
-  return (
-    <Button variant="contained" color="primary">
-      Hello World
-    </Button>
-  );
+  return <Button variant="contained">Hello World</Button>;
 }
 ```
 

docs/data/base/getting-started/usage/Usage.js

@@ -4,7 +4,7 @@ export default function Usage() {
   return (
     <iframe
       title="codesandbox"
-      src="https://codesandbox.io/embed/base-usage-7km2h7?hidenavigation=1&fontsize=14&view=preview"
+      src="https://codesandbox.io/embed/7km2h7?hidenavigation=1&fontsize=14&view=preview"
       style={{
         width: '100%',
         height: 350,

docs/data/base/getting-started/usage/usage.md

@@ -8,7 +8,6 @@ The following code snippet demonstrates a simple app that uses the MUI Base [`Bu
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
 
 function App() {

docs/data/material/customization/theming/theming.md

@@ -247,7 +247,6 @@ It should preferably be used at **the root of your component tree**.
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import { red } from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 

docs/data/material/getting-started/learn/learn.md

@@ -8,15 +8,10 @@ The following code snippet demonstrates a basic Material UI app that features a
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import Button from '@mui/material/Button';
 
 function App() {
-  return (
-    <Button variant="contained" color="primary">
-      Hello World
-    </Button>
-  );
+  return <Button variant="contained">Hello World</Button>;
 }
 ```
 

docs/data/material/getting-started/usage/Usage.js

@@ -4,7 +4,7 @@ export default function Usage() {
   return (
     <iframe
       title="codesandbox"
-      src="https://codesandbox.io/embed/4j7m47vlm4?hidenavigation=1&fontsize=14&view=preview"
+      src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
       style={{
         width: '100%',
         height: 350,

docs/data/material/getting-started/usage/usage.md

@@ -15,7 +15,6 @@ Here's a quick example to get you started, **it's literally all you need**:
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import Button from '@mui/material/Button';
 
 function App() {

docs/data/material/guides/shadow-dom/ShadowDOMDemo.js

@@ -4,7 +4,7 @@ export default function ShadowDOMDemo() {
   return (
     <iframe
       title="codesandbox"
-      src="https://codesandbox.io/embed/basicselect-demo-material-ui-forked-rki9k5?hidenavigation=1&fontsize=14&view=preview&hidedevtools=1"
+      src="https://codesandbox.io/embed/rki9k5?hidenavigation=1&fontsize=14&view=preview"
       style={{
         width: '100%',
         height: 350,

docs/data/material/guides/shadow-dom/shadow-dom.md

@@ -65,4 +65,4 @@ const theme = createTheme({
 
 In the example below you can see that the component outside of the shadow DOM is affected by global styles, while the component inside of the shadow DOM is not:
 
-{{"demo": "ShadowDOMDemo.js", "defaultCodeOpen": false}}
+{{"demo": "ShadowDOMDemo.js", "hideToolbar": true, "bg": true}}

docs/data/styles/api/api.md

@@ -241,7 +241,6 @@ It should preferably be used at **the root of your component tree**.
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import { StylesProvider } from '@mui/styles';
 
 function App() {
@@ -265,7 +264,6 @@ It should preferably be used at **the root of your component tree**.
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import { ThemeProvider } from '@mui/material/styles';
 
 const theme = {};