From a492fce763c59d83b7c0f5dbf7d995f9adbfdebd Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:27:42 +0200
Subject: [PATCH] dewtt

---
 docs/data/toolpad/core/introduction/Tutorial1.js  |  6 +++---
 docs/data/toolpad/core/introduction/Tutorial1.tsx |  6 +++---
 docs/data/toolpad/core/introduction/Tutorial2.js  |  6 +++---
 docs/data/toolpad/core/introduction/Tutorial2.tsx |  6 +++---
 docs/data/toolpad/core/introduction/tutorial.md   | 10 +++++-----
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/data/toolpad/core/introduction/Tutorial1.js b/docs/data/toolpad/core/introduction/Tutorial1.js
index 6d701309682..47e5fde07ef 100644
--- a/docs/data/toolpad/core/introduction/Tutorial1.js
+++ b/docs/data/toolpad/core/introduction/Tutorial1.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
   async getMany() {
@@ -22,8 +22,8 @@ const npmData = createDataProvider({
 
 export default function Tutorial1() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Stack sx={{ width: '100%' }} spacing={2}>
       <DataGrid height={300} dataProvider={npmData} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/toolpad/core/introduction/Tutorial1.tsx b/docs/data/toolpad/core/introduction/Tutorial1.tsx
index 6d701309682..47e5fde07ef 100644
--- a/docs/data/toolpad/core/introduction/Tutorial1.tsx
+++ b/docs/data/toolpad/core/introduction/Tutorial1.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
   async getMany() {
@@ -22,8 +22,8 @@ const npmData = createDataProvider({
 
 export default function Tutorial1() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Stack sx={{ width: '100%' }} spacing={2}>
       <DataGrid height={300} dataProvider={npmData} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.js b/docs/data/toolpad/core/introduction/Tutorial2.js
index d32a8f86628..45a2f12cef3 100644
--- a/docs/data/toolpad/core/introduction/Tutorial2.js
+++ b/docs/data/toolpad/core/introduction/Tutorial2.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
 import { LineChart } from '@toolpad/core/LineChart';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
   async getMany() {
@@ -23,7 +23,7 @@ const npmData = createDataProvider({
 
 export default function Tutorial2() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Stack sx={{ width: '100%' }} spacing={2}>
       <DataGrid height={300} dataProvider={npmData} />
       <LineChart
         height={300}
@@ -31,6 +31,6 @@ export default function Tutorial2() {
         xAxis={[{ dataKey: 'day' }]}
         series={[{ dataKey: 'downloads' }]}
       />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.tsx b/docs/data/toolpad/core/introduction/Tutorial2.tsx
index d32a8f86628..45a2f12cef3 100644
--- a/docs/data/toolpad/core/introduction/Tutorial2.tsx
+++ b/docs/data/toolpad/core/introduction/Tutorial2.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
 import { LineChart } from '@toolpad/core/LineChart';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
   async getMany() {
@@ -23,7 +23,7 @@ const npmData = createDataProvider({
 
 export default function Tutorial2() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Stack sx={{ width: '100%' }} spacing={2}>
       <DataGrid height={300} dataProvider={npmData} />
       <LineChart
         height={300}
@@ -31,6 +31,6 @@ export default function Tutorial2() {
         xAxis={[{ dataKey: 'day' }]}
         series={[{ dataKey: 'downloads' }]}
       />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
index 89ac98e25b5..497b059f760 100644
--- a/docs/data/toolpad/core/introduction/tutorial.md
+++ b/docs/data/toolpad/core/introduction/tutorial.md
@@ -137,15 +137,15 @@ This data provider calls the npm API and returns the downloads collection. It de
 
 ```js
 import { DataGrid } from '@toolpad/core';
-import { Box } from '@mui/material';
+import { Stack } from '@mui/material';
 
 // ...
 
 export default function App() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Stack sx={{ width: '100%' }} spacing={2}>
       <DataGrid height={300} dataProvider={npmData} />
-    </Box>
+    </Stack>
   );
 }
 ```
@@ -168,7 +168,7 @@ import { DataGrid, LineChart } from '@toolpad/core';
 
 export default function App() {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Stack sx={{ width: '100%' }} spacing={2}>
       <DataGrid height={300} dataProvider={npmData} />
       <LineChart
         height={300}
@@ -176,7 +176,7 @@ export default function App() {
         xAxis={[{ dataKey: 'day' }]}
         series={[{ dataKey: 'downloads' }]}
       />
-    </Box>
+    </Stack>
   );
 }
 ```