From 26675f2b218bad27f904f92d130dc1e033100b84 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 18 May 2022 13:43:06 +0100
Subject: [PATCH 01/22] [Joy] Create a page for Sheet doc

---
 docs/data/joy/components/sheet/sheet.md | 18 ++++++++++++++++++
 docs/data/joy/pages.ts                  |  2 +-
 docs/pages/joy-ui/react-sheet.js        | 11 +++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/joy/components/sheet/sheet.md
 create mode 100644 docs/pages/joy-ui/react-sheet.js

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
new file mode 100644
index 00000000000000..ca9f99ca0b1b82
--- /dev/null
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -0,0 +1,18 @@
+---
+product: joy-ui
+title: React Sheet component
+githubLabel: 'component: sheet'
+unstyled: /base/react-sheet/
+---
+
+# Sheet
+
+<p class="description">Sheet generates a background element that can be used for various purposes.</p>
+
+{{"component": "modules/components/ComponentLinkHeader.js"}}
+
+{{"demo": "SheetUsage.js", "hideToolbar": true}}
+
+## Basic
+
+{{"demo": "SimpleSheet.js"}}
\ No newline at end of file
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index dc228f172e50bb..1875758257a596 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -48,7 +48,7 @@ const pages = [
       {
         pathname: '/joy-ui/components/surfaces',
         subheader: 'surfaces',
-        children: [{ pathname: '/joy-ui/react-card' }],
+        children: [{ pathname: '/joy-ui/react-card' }, { pathname: '/joy-ui/react-sheet' }],
       },
       {
         pathname: '/joy-ui/components/navigation',
diff --git a/docs/pages/joy-ui/react-sheet.js b/docs/pages/joy-ui/react-sheet.js
new file mode 100644
index 00000000000000..28cecde42dd4d1
--- /dev/null
+++ b/docs/pages/joy-ui/react-sheet.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/joy/components/sheet/sheet.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

From 587e05c84c858ea4263574c1d8da311dc85f1ada Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 18 May 2022 13:43:14 +0100
Subject: [PATCH 02/22] Add SheetUsage example

---
 docs/data/joy/components/sheet/SheetUsage.js | 301 +++++++++++++++++++
 1 file changed, 301 insertions(+)
 create mode 100644 docs/data/joy/components/sheet/SheetUsage.js

diff --git a/docs/data/joy/components/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js
new file mode 100644
index 00000000000000..7f07b43d0ffb01
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetUsage.js
@@ -0,0 +1,301 @@
+import * as React from 'react';
+import BrandingProvider from 'docs/src/BrandingProvider';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { styled } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import Chip from '@mui/joy/Chip';
+import Typography from '@mui/joy/Typography';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Radio from '@mui/joy/Radio';
+import Sheet from '@mui/joy/Sheet';
+import Check from '@mui/icons-material/Check';
+
+const Select = styled('select')(({ theme }) => ({
+  padding: '0.25rem',
+  border: 'none',
+  borderRadius: theme.radius.sm,
+  width: '100%',
+  minHeight: '2rem',
+  ...theme.typography.body2,
+  ...theme.variants.outlined.neutral,
+  [theme.focus.selector]: {
+    borderColor: theme.vars.palette.primary[500],
+    boxShadow: `inset 0 0 0 1px ${theme.vars.palette.primary[500]}`,
+    outline: 'none',
+  },
+}));
+
+const defaultProps = {
+  variant: 'plain',
+  color: 'neutral',
+  elevation: undefined,
+};
+
+function createCode(name, inProps) {
+  let code = `<${name}`;
+  const props = Object.entries(inProps).sort((a, b) => a[0] - b[0]);
+
+  if (!Object.keys(props).length) {
+    code = `${code} />`;
+  } else {
+    let children = '';
+    props.forEach((prop) => {
+      if (prop[0] !== 'children' && prop[1] !== undefined) {
+        if (props.length <= 2) {
+          code = `${code} ${prop[0]}=${
+            typeof prop[1] === 'number' ? `{${prop[1]}}` : `"${prop[1]}"`
+          }`;
+        } else {
+          code = `${code}\n  ${prop[0]}=${
+            typeof prop[1] === 'number' ? `{${prop[1]}}` : `"${prop[1]}"`
+          }`;
+        }
+      } else {
+        children = prop[1];
+      }
+    });
+    if (children) {
+      code = `${code}>\n  ${children}\n</${name}>`;
+    } else {
+      code = `${code}${props.length > 2 ? `\n/>` : ` />`}`;
+    }
+  }
+
+  return code;
+}
+
+export default function SheetUsage() {
+  const [props, setProps] = React.useState({});
+  const {
+    variant = defaultProps.variant,
+    color = defaultProps.color,
+    elevation = defaultProps.elevation,
+  } = props;
+  return (
+    <Box
+      sx={{
+        m: -1.5,
+        mt: 0.5,
+        flexGrow: 1,
+        maxWidth: 'calc(100% + 24px)',
+        display: 'flex',
+        gap: 1.5,
+        '& .markdown-body pre': {
+          margin: 0,
+          borderRadius: 'xs',
+        },
+      }}
+    >
+      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 999 }}>
+        <Box
+          sx={{
+            flexGrow: 1,
+            m: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            p: 2,
+          }}
+        >
+          <Sheet
+            {...props}
+            sx={{
+              width: 250,
+              height: 200,
+              m: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Typography sx={{ color: 'inherit' }} fontSize="md">
+              Sheet
+            </Typography>
+          </Sheet>
+        </Box>
+        <BrandingProvider mode="dark">
+          <HighlightedCode
+            code={createCode('Sheet', { ...props, children: '...' })}
+            language="jsx"
+            sx={{ display: { xs: 'none', md: 'block' } }}
+          />
+        </BrandingProvider>
+      </Box>
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 2,
+          p: 2,
+          bgcolor: 'background.level1',
+          borderRadius: 'xs',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            minWidth: '160px',
+          }}
+        >
+          <Box>
+            <Typography
+              component="label"
+              level="body2"
+              fontWeight="lg"
+              htmlFor="variant-select"
+              mb={0.5}
+            >
+              variant
+            </Typography>
+            <Select
+              id="variant-select"
+              value={variant}
+              onChange={(event) => {
+                return setProps((latestProps) => ({
+                  ...latestProps,
+                  variant: event.target.value,
+                }));
+              }}
+            >
+              <option value="plain">plain</option>
+              <option value="outlined">outlined</option>
+              <option value="soft">soft</option>
+              <option value="solid">solid</option>
+            </Select>
+          </Box>
+          <Box>
+            <Typography
+              id="badge-color-selector"
+              level="body2"
+              fontWeight="lg"
+              mb={1}
+            >
+              color
+            </Typography>
+            <RadioGroup
+              row
+              name="badge-color"
+              aria-labelledby="badge-color-selector"
+              value={color}
+              onChange={(event) => {
+                return setProps((latestProps) => ({
+                  ...latestProps,
+                  color: event.target.value,
+                }));
+              }}
+              sx={{ flexWrap: 'wrap', gap: 1 }}
+            >
+              {['neutral', 'primary', 'danger', 'info', 'success', 'warning'].map(
+                (value) => {
+                  const checked = color === value;
+                  return (
+                    <Sheet
+                      key={value}
+                      sx={{ width: 28, height: 28, bgcolor: 'unset' }}
+                    >
+                      <Radio
+                        variant="solid"
+                        color={value}
+                        label={value}
+                        value={value}
+                        disableIcon
+                        overlay
+                        sx={{
+                          '& .JoyRadio-action': { bgcolor: `${value}.500` },
+                          '& .JoyRadio-label': {
+                            fontSize: '10px',
+                            color: 'text.secondary',
+                            position: 'absolute',
+                            bottom: '-1rem',
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            opacity: 0,
+                            transition: '0.2s',
+                          },
+                          '&:hover, &.Joy-focusVisible': {
+                            '& .JoyRadio-label': {
+                              opacity: 1,
+                              bottom: '-1.25rem',
+                            },
+                          },
+                        }}
+                      />
+                      {checked && (
+                        <Check
+                          fontSize="md"
+                          sx={{
+                            color: '#fff',
+                            zIndex: 1,
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            pointerEvents: 'none',
+                          }}
+                        />
+                      )}
+                    </Sheet>
+                  );
+                },
+              )}
+            </RadioGroup>
+          </Box>
+          <Box>
+            <Typography
+              id="badge-elevation-selector"
+              level="body2"
+              fontWeight="lg"
+              mb={1}
+            >
+              elevation
+            </Typography>
+            <RadioGroup
+              row
+              name="badge-elevation"
+              aria-labelledby="badge-elevation-selector"
+              value={elevation}
+              onChange={(event) => {
+                return setProps((latestProps) => ({
+                  ...latestProps,
+                  elevation: event.target.value,
+                }));
+              }}
+              sx={{ flexWrap: 'wrap', gap: 1 }}
+            >
+              {['xs', 'sm', 'md', 'lg', 'xl'].map((value) => {
+                const checked = elevation === value;
+                return (
+                  <Chip
+                    key={value}
+                    variant="plain"
+                    color="neutral"
+                    size="sm"
+                    sx={{ bgcolor: 'background.body' }}
+                  >
+                    <Radio
+                      size="sm"
+                      variant="outlined"
+                      color="neutral"
+                      label={
+                        <Typography
+                          endDecorator={checked ? <Check fontSize="md" /> : null}
+                        >
+                          {value}
+                        </Typography>
+                      }
+                      value={value}
+                      disableIcon
+                      overlay
+                    />
+                  </Chip>
+                );
+              })}
+            </RadioGroup>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

From 684326d636b2b71d41b8bce224921ffd0764aaa0 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 18 May 2022 13:43:20 +0100
Subject: [PATCH 03/22] Add SimpleSheet example

---
 docs/data/joy/components/sheet/SimpleSheet.js | 23 +++++++++++++++++++
 .../data/joy/components/sheet/SimpleSheet.tsx | 23 +++++++++++++++++++
 .../components/sheet/SimpleSheet.tsx.preview  |  3 +++
 3 files changed, 49 insertions(+)
 create mode 100644 docs/data/joy/components/sheet/SimpleSheet.js
 create mode 100644 docs/data/joy/components/sheet/SimpleSheet.tsx
 create mode 100644 docs/data/joy/components/sheet/SimpleSheet.tsx.preview

diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SimpleSheet.js
new file mode 100644
index 00000000000000..94abd06e6ebc84
--- /dev/null
+++ b/docs/data/joy/components/sheet/SimpleSheet.js
@@ -0,0 +1,23 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SimpleSheet() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+        },
+      }}
+    >
+      <Sheet elevation="sm" />
+      <Sheet elevation="md" />
+      <Sheet elevation="lg" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SimpleSheet.tsx
new file mode 100644
index 00000000000000..94abd06e6ebc84
--- /dev/null
+++ b/docs/data/joy/components/sheet/SimpleSheet.tsx
@@ -0,0 +1,23 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SimpleSheet() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+        },
+      }}
+    >
+      <Sheet elevation="sm" />
+      <Sheet elevation="md" />
+      <Sheet elevation="lg" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
new file mode 100644
index 00000000000000..a054cf6ef25b41
--- /dev/null
+++ b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
@@ -0,0 +1,3 @@
+<Sheet elevation="sm" />
+<Sheet elevation="md" />
+<Sheet elevation="lg" />
\ No newline at end of file

From e2f78513859d5765d327102f3f2bd90b10554b0c Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 18 May 2022 13:43:28 +0100
Subject: [PATCH 04/22] Run prettier

---
 docs/data/joy/components/sheet/sheet.md | 2 +-
 docs/pages/joy-ui/react-sheet.js        | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index ca9f99ca0b1b82..7dc383fb68ff57 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -15,4 +15,4 @@ unstyled: /base/react-sheet/
 
 ## Basic
 
-{{"demo": "SimpleSheet.js"}}
\ No newline at end of file
+{{"demo": "SimpleSheet.js"}}
diff --git a/docs/pages/joy-ui/react-sheet.js b/docs/pages/joy-ui/react-sheet.js
index 28cecde42dd4d1..c93c07e7d6e346 100644
--- a/docs/pages/joy-ui/react-sheet.js
+++ b/docs/pages/joy-ui/react-sheet.js
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/joy/components/sheet/sheet.md?@mui/markdown';
+import { demos, docs, demoComponents } from 'docs/data/joy/components/sheet/sheet.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;

From 78b267feef7fdf9369c1e739ed5fe726d65340f4 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 19 May 2022 23:46:24 -0300
Subject: [PATCH 05/22] copywriting adjustments

---
 docs/data/joy/components/sheet/sheet.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index 7dc383fb68ff57..d1ebd0fe04a173 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,8 +11,15 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
+## Basic
+
+Use the `Sheet` component as a generic container for your components.
+You can play around with variants, color, and elevation to achieve the desired result.
+
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-## Basic
+## Elevation
+
+`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
 
 {{"demo": "SimpleSheet.js"}}

From 34f61e3b9ba418fbaf8f605899b6216f8b9e967e Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 18 May 2022 13:43:06 +0100
Subject: [PATCH 06/22] [Joy] Create a page for Sheet doc

---
 docs/data/joy/components/sheet/sheet.md | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index d1ebd0fe04a173..7dc383fb68ff57 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,15 +11,8 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic
-
-Use the `Sheet` component as a generic container for your components.
-You can play around with variants, color, and elevation to achieve the desired result.
-
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-## Elevation
-
-`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
+## Basic
 
 {{"demo": "SimpleSheet.js"}}

From 739988b385ac5347677007f0f9498a9b5d78d5f1 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 19 May 2022 23:46:24 -0300
Subject: [PATCH 07/22] copywriting adjustments

---
 docs/data/joy/components/sheet/sheet.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index 7dc383fb68ff57..d1ebd0fe04a173 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,8 +11,15 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
+## Basic
+
+Use the `Sheet` component as a generic container for your components.
+You can play around with variants, color, and elevation to achieve the desired result.
+
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-## Basic
+## Elevation
+
+`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
 
 {{"demo": "SimpleSheet.js"}}

From 0fe7b4c1edadbbdb0dbe5de7fefa83eb94d7951c Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 2 Jun 2022 11:40:07 +0100
Subject: [PATCH 08/22] Add more demos and improve

---
 docs/data/joy/components/sheet/SheetColors.js | 73 +++++++++++++++++++
 .../data/joy/components/sheet/SheetColors.tsx | 73 +++++++++++++++++++
 .../{SimpleSheet.js => SheetElevations.js}    |  3 +-
 ...et.tsx.preview => SheetElevations.preview} |  0
 .../{SimpleSheet.tsx => SheetElevations.tsx}  |  3 +-
 .../sheet/SheetElevations.tsx.preview         |  3 +
 .../joy/components/sheet/SheetVariants.js     | 28 +++++++
 .../joy/components/sheet/SheetVariants.tsx    | 28 +++++++
 .../sheet/SheetVariants.tsx.preview           |  4 +
 docs/data/joy/components/sheet/sheet.md       | 20 +++--
 10 files changed, 226 insertions(+), 9 deletions(-)
 create mode 100644 docs/data/joy/components/sheet/SheetColors.js
 create mode 100644 docs/data/joy/components/sheet/SheetColors.tsx
 rename docs/data/joy/components/sheet/{SimpleSheet.js => SheetElevations.js} (85%)
 rename docs/data/joy/components/sheet/{SimpleSheet.tsx.preview => SheetElevations.preview} (100%)
 rename docs/data/joy/components/sheet/{SimpleSheet.tsx => SheetElevations.tsx} (85%)
 create mode 100644 docs/data/joy/components/sheet/SheetElevations.tsx.preview
 create mode 100644 docs/data/joy/components/sheet/SheetVariants.js
 create mode 100644 docs/data/joy/components/sheet/SheetVariants.tsx
 create mode 100644 docs/data/joy/components/sheet/SheetVariants.tsx.preview

diff --git a/docs/data/joy/components/sheet/SheetColors.js b/docs/data/joy/components/sheet/SheetColors.js
new file mode 100644
index 00000000000000..6b1b42ea158b03
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetColors.js
@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+  const [variant, setVariant] = React.useState('plain');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        [`& > .${sheetClasses.root}`]: {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 2,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontWeight="lg" mr={2} id="variant-label">
+          Variant:
+        </Typography>
+        <RadioGroup
+          aria-labelledby="variant-label"
+          name="variant"
+          row
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Plain" value="plain" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Solid" value="solid" />
+        </RadioGroup>
+      </Box>
+      <Sheet variant={variant} color="primary">
+        Primary
+      </Sheet>
+      <Sheet variant={variant} color="neutral">
+        Neutral
+      </Sheet>
+      <Sheet variant={variant} color="danger">
+        Danger
+      </Sheet>
+      <Sheet variant={variant} color="info">
+        Info
+      </Sheet>
+      <Sheet variant={variant} color="success">
+        Success
+      </Sheet>
+      <Sheet variant={variant} color="warning">
+        Warning
+      </Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SheetColors.tsx b/docs/data/joy/components/sheet/SheetColors.tsx
new file mode 100644
index 00000000000000..ba434e793e1853
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetColors.tsx
@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+import { VariantProp } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('plain');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        [`& > .${sheetClasses.root}`]: {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 2,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontWeight="lg" mr={2} id="variant-label">
+          Variant:
+        </Typography>
+        <RadioGroup
+          aria-labelledby="variant-label"
+          name="variant"
+          row
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Plain" value="plain" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Solid" value="solid" />
+        </RadioGroup>
+      </Box>
+      <Sheet variant={variant} color="primary">
+        Primary
+      </Sheet>
+      <Sheet variant={variant} color="neutral">
+        Neutral
+      </Sheet>
+      <Sheet variant={variant} color="danger">
+        Danger
+      </Sheet>
+      <Sheet variant={variant} color="info">
+        Info
+      </Sheet>
+      <Sheet variant={variant} color="success">
+        Success
+      </Sheet>
+      <Sheet variant={variant} color="warning">
+        Warning
+      </Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SheetElevations.js
similarity index 85%
rename from docs/data/joy/components/sheet/SimpleSheet.js
rename to docs/data/joy/components/sheet/SheetElevations.js
index 94abd06e6ebc84..5fdecf91b3766c 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.js
+++ b/docs/data/joy/components/sheet/SheetElevations.js
@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 import * as React from 'react';
 
-export default function SimpleSheet() {
+export default function SheetElevations() {
   return (
     <Box
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
         '& > div': {
           m: 2,
           width: 128,
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.preview
similarity index 100%
rename from docs/data/joy/components/sheet/SimpleSheet.tsx.preview
rename to docs/data/joy/components/sheet/SheetElevations.preview
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SheetElevations.tsx
similarity index 85%
rename from docs/data/joy/components/sheet/SimpleSheet.tsx
rename to docs/data/joy/components/sheet/SheetElevations.tsx
index 94abd06e6ebc84..5fdecf91b3766c 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.tsx
+++ b/docs/data/joy/components/sheet/SheetElevations.tsx
@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 import * as React from 'react';
 
-export default function SimpleSheet() {
+export default function SheetElevations() {
   return (
     <Box
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
         '& > div': {
           m: 2,
           width: 128,
diff --git a/docs/data/joy/components/sheet/SheetElevations.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
new file mode 100644
index 00000000000000..a054cf6ef25b41
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
@@ -0,0 +1,3 @@
+<Sheet elevation="sm" />
+<Sheet elevation="md" />
+<Sheet elevation="lg" />
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/SheetVariants.js b/docs/data/joy/components/sheet/SheetVariants.js
new file mode 100644
index 00000000000000..48e5dbc5d2c159
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.js
@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Sheet variant="plain">Plain</Sheet>
+      <Sheet variant="solid">Solid</Sheet>
+      <Sheet variant="outlined">Outlined</Sheet>
+      <Sheet variant="soft">Soft</Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx b/docs/data/joy/components/sheet/SheetVariants.tsx
new file mode 100644
index 00000000000000..48e5dbc5d2c159
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.tsx
@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Sheet variant="plain">Plain</Sheet>
+      <Sheet variant="solid">Solid</Sheet>
+      <Sheet variant="outlined">Outlined</Sheet>
+      <Sheet variant="soft">Soft</Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx.preview b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
new file mode 100644
index 00000000000000..522138a0745fcc
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
@@ -0,0 +1,4 @@
+<Sheet variant="plain">Plain</Sheet>
+<Sheet variant="solid">Solid</Sheet>
+<Sheet variant="outlined">Outlined</Sheet>
+<Sheet variant="soft">Soft</Sheet>
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index d1ebd0fe04a173..0548cb9f644d3b 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,15 +11,25 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic
-
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-## Elevation
+## Variants
+
+The `Sheet` comes with four global variants: `plain` (default), `outlined`, `soft` and `solid`.
+
+{{"demo": "SheetVariants.js"}}
+
+## Colors
+
+All theme palettes are available via the `color` prop which can be combined with the `variant` prop.
+
+{{"demo": "SheetColors.js"}}
+
+## Elevations
 
-`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
+The `Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
 
-{{"demo": "SimpleSheet.js"}}
+{{"demo": "SheetElevations.js"}}

From ab8b77dd73ca6ae56c7990da77976351ebc5b600 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 2 Jun 2022 11:41:34 +0100
Subject: [PATCH 09/22] Add title "Basic"

---
 docs/data/joy/components/sheet/sheet.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index 0548cb9f644d3b..ee1d1896583c3e 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,6 +11,8 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
+## Basic
+
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 

From 5c5bc1eca09df00b4e9436edb539a81ffb088c79 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 3 Jun 2022 10:10:35 +0100
Subject: [PATCH 10/22] Address Jun's feedback

---
 docs/data/joy/components/sheet/SheetColors.js | 73 -------------------
 .../data/joy/components/sheet/SheetColors.tsx | 73 -------------------
 .../joy/components/sheet/SheetElevations.js   | 22 ------
 .../components/sheet/SheetElevations.preview  |  3 -
 .../joy/components/sheet/SheetElevations.tsx  | 22 ------
 .../sheet/SheetElevations.tsx.preview         |  3 -
 .../joy/components/sheet/SheetVariants.js     | 28 -------
 .../joy/components/sheet/SheetVariants.tsx    | 28 -------
 .../sheet/SheetVariants.tsx.preview           |  4 -
 docs/data/joy/components/sheet/sheet.md       | 22 +-----
 10 files changed, 1 insertion(+), 277 deletions(-)
 delete mode 100644 docs/data/joy/components/sheet/SheetColors.js
 delete mode 100644 docs/data/joy/components/sheet/SheetColors.tsx
 delete mode 100644 docs/data/joy/components/sheet/SheetElevations.js
 delete mode 100644 docs/data/joy/components/sheet/SheetElevations.preview
 delete mode 100644 docs/data/joy/components/sheet/SheetElevations.tsx
 delete mode 100644 docs/data/joy/components/sheet/SheetElevations.tsx.preview
 delete mode 100644 docs/data/joy/components/sheet/SheetVariants.js
 delete mode 100644 docs/data/joy/components/sheet/SheetVariants.tsx
 delete mode 100644 docs/data/joy/components/sheet/SheetVariants.tsx.preview

diff --git a/docs/data/joy/components/sheet/SheetColors.js b/docs/data/joy/components/sheet/SheetColors.js
deleted file mode 100644
index 6b1b42ea158b03..00000000000000
--- a/docs/data/joy/components/sheet/SheetColors.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Box from '@mui/joy/Box';
-import Radio from '@mui/joy/Radio';
-import RadioGroup from '@mui/joy/RadioGroup';
-import Sheet, { sheetClasses } from '@mui/joy/Sheet';
-
-import Typography from '@mui/joy/Typography';
-import * as React from 'react';
-
-export default function SheetColors() {
-  const [variant, setVariant] = React.useState('plain');
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        gap: 2,
-        justifyContent: 'center',
-        flexWrap: 'wrap',
-        [`& > .${sheetClasses.root}`]: {
-          m: 2,
-          width: 128,
-          height: 128,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      }}
-    >
-      <Box
-        sx={{
-          mb: 2,
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography fontWeight="lg" mr={2} id="variant-label">
-          Variant:
-        </Typography>
-        <RadioGroup
-          aria-labelledby="variant-label"
-          name="variant"
-          row
-          value={variant}
-          onChange={(event) => setVariant(event.target.value)}
-        >
-          <Radio label="Plain" value="plain" />
-          <Radio label="Outlined" value="outlined" />
-          <Radio label="Soft" value="soft" />
-          <Radio label="Solid" value="solid" />
-        </RadioGroup>
-      </Box>
-      <Sheet variant={variant} color="primary">
-        Primary
-      </Sheet>
-      <Sheet variant={variant} color="neutral">
-        Neutral
-      </Sheet>
-      <Sheet variant={variant} color="danger">
-        Danger
-      </Sheet>
-      <Sheet variant={variant} color="info">
-        Info
-      </Sheet>
-      <Sheet variant={variant} color="success">
-        Success
-      </Sheet>
-      <Sheet variant={variant} color="warning">
-        Warning
-      </Sheet>
-    </Box>
-  );
-}
diff --git a/docs/data/joy/components/sheet/SheetColors.tsx b/docs/data/joy/components/sheet/SheetColors.tsx
deleted file mode 100644
index ba434e793e1853..00000000000000
--- a/docs/data/joy/components/sheet/SheetColors.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Box from '@mui/joy/Box';
-import Radio from '@mui/joy/Radio';
-import RadioGroup from '@mui/joy/RadioGroup';
-import Sheet, { sheetClasses } from '@mui/joy/Sheet';
-import { VariantProp } from '@mui/joy/styles';
-import Typography from '@mui/joy/Typography';
-import * as React from 'react';
-
-export default function SheetColors() {
-  const [variant, setVariant] = React.useState<VariantProp>('plain');
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        gap: 2,
-        justifyContent: 'center',
-        flexWrap: 'wrap',
-        [`& > .${sheetClasses.root}`]: {
-          m: 2,
-          width: 128,
-          height: 128,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      }}
-    >
-      <Box
-        sx={{
-          mb: 2,
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography fontWeight="lg" mr={2} id="variant-label">
-          Variant:
-        </Typography>
-        <RadioGroup
-          aria-labelledby="variant-label"
-          name="variant"
-          row
-          value={variant}
-          onChange={(event) => setVariant(event.target.value as VariantProp)}
-        >
-          <Radio label="Plain" value="plain" />
-          <Radio label="Outlined" value="outlined" />
-          <Radio label="Soft" value="soft" />
-          <Radio label="Solid" value="solid" />
-        </RadioGroup>
-      </Box>
-      <Sheet variant={variant} color="primary">
-        Primary
-      </Sheet>
-      <Sheet variant={variant} color="neutral">
-        Neutral
-      </Sheet>
-      <Sheet variant={variant} color="danger">
-        Danger
-      </Sheet>
-      <Sheet variant={variant} color="info">
-        Info
-      </Sheet>
-      <Sheet variant={variant} color="success">
-        Success
-      </Sheet>
-      <Sheet variant={variant} color="warning">
-        Warning
-      </Sheet>
-    </Box>
-  );
-}
diff --git a/docs/data/joy/components/sheet/SheetElevations.js b/docs/data/joy/components/sheet/SheetElevations.js
deleted file mode 100644
index 5fdecf91b3766c..00000000000000
--- a/docs/data/joy/components/sheet/SheetElevations.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Box from '@mui/joy/Box';
-import Sheet from '@mui/joy/Sheet';
-import * as React from 'react';
-
-export default function SheetElevations() {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        '& > div': {
-          m: 2,
-          width: 128,
-          height: 128,
-        },
-      }}
-    >
-      <Sheet elevation="sm" />
-      <Sheet elevation="md" />
-      <Sheet elevation="lg" />
-    </Box>
-  );
-}
diff --git a/docs/data/joy/components/sheet/SheetElevations.preview b/docs/data/joy/components/sheet/SheetElevations.preview
deleted file mode 100644
index a054cf6ef25b41..00000000000000
--- a/docs/data/joy/components/sheet/SheetElevations.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-<Sheet elevation="sm" />
-<Sheet elevation="md" />
-<Sheet elevation="lg" />
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/SheetElevations.tsx b/docs/data/joy/components/sheet/SheetElevations.tsx
deleted file mode 100644
index 5fdecf91b3766c..00000000000000
--- a/docs/data/joy/components/sheet/SheetElevations.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Box from '@mui/joy/Box';
-import Sheet from '@mui/joy/Sheet';
-import * as React from 'react';
-
-export default function SheetElevations() {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        '& > div': {
-          m: 2,
-          width: 128,
-          height: 128,
-        },
-      }}
-    >
-      <Sheet elevation="sm" />
-      <Sheet elevation="md" />
-      <Sheet elevation="lg" />
-    </Box>
-  );
-}
diff --git a/docs/data/joy/components/sheet/SheetElevations.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
deleted file mode 100644
index a054cf6ef25b41..00000000000000
--- a/docs/data/joy/components/sheet/SheetElevations.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-<Sheet elevation="sm" />
-<Sheet elevation="md" />
-<Sheet elevation="lg" />
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/SheetVariants.js b/docs/data/joy/components/sheet/SheetVariants.js
deleted file mode 100644
index 48e5dbc5d2c159..00000000000000
--- a/docs/data/joy/components/sheet/SheetVariants.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Box from '@mui/joy/Box';
-import Sheet from '@mui/joy/Sheet';
-import * as React from 'react';
-
-export default function SheetElevations() {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        '& > div': {
-          m: 2,
-          width: 128,
-          height: 128,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      }}
-    >
-      <Sheet variant="plain">Plain</Sheet>
-      <Sheet variant="solid">Solid</Sheet>
-      <Sheet variant="outlined">Outlined</Sheet>
-      <Sheet variant="soft">Soft</Sheet>
-    </Box>
-  );
-}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx b/docs/data/joy/components/sheet/SheetVariants.tsx
deleted file mode 100644
index 48e5dbc5d2c159..00000000000000
--- a/docs/data/joy/components/sheet/SheetVariants.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Box from '@mui/joy/Box';
-import Sheet from '@mui/joy/Sheet';
-import * as React from 'react';
-
-export default function SheetElevations() {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        '& > div': {
-          m: 2,
-          width: 128,
-          height: 128,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      }}
-    >
-      <Sheet variant="plain">Plain</Sheet>
-      <Sheet variant="solid">Solid</Sheet>
-      <Sheet variant="outlined">Outlined</Sheet>
-      <Sheet variant="soft">Soft</Sheet>
-    </Box>
-  );
-}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx.preview b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
deleted file mode 100644
index 522138a0745fcc..00000000000000
--- a/docs/data/joy/components/sheet/SheetVariants.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<Sheet variant="plain">Plain</Sheet>
-<Sheet variant="solid">Solid</Sheet>
-<Sheet variant="outlined">Outlined</Sheet>
-<Sheet variant="soft">Soft</Sheet>
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index ee1d1896583c3e..dce0e29de5a3df 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -7,31 +7,11 @@ unstyled: /base/react-sheet/
 
 # Sheet
 
-<p class="description">Sheet generates a background element that can be used for various purposes.</p>
+<p class="description">Sheet is a useful surface component that implements the global variant feature.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic
-
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
-
-## Variants
-
-The `Sheet` comes with four global variants: `plain` (default), `outlined`, `soft` and `solid`.
-
-{{"demo": "SheetVariants.js"}}
-
-## Colors
-
-All theme palettes are available via the `color` prop which can be combined with the `variant` prop.
-
-{{"demo": "SheetColors.js"}}
-
-## Elevations
-
-The `Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
-
-{{"demo": "SheetElevations.js"}}

From 1f0c5e27ba5a540f6109e7b48dcf04377fde0660 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Sat, 4 Jun 2022 07:52:14 +0700
Subject: [PATCH 11/22] Apply suggestions from code review

---
 docs/data/joy/components/sheet/sheet.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index dce0e29de5a3df..7ebd97024b3638 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -1,8 +1,6 @@
 ---
 product: joy-ui
 title: React Sheet component
-githubLabel: 'component: sheet'
-unstyled: /base/react-sheet/
 ---
 
 # Sheet
@@ -14,4 +12,4 @@ unstyled: /base/react-sheet/
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 
-{{"demo": "SheetUsage.js", "hideToolbar": true}}
+{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": true}}

From 1b85fe4461d7de8128efc774bda23d55565d5fd7 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 15 Jun 2022 14:32:33 +0900
Subject: [PATCH 12/22] Remove elevation prop

---
 docs/data/joy/components/sheet/SheetUsage.js | 59 +-------------------
 packages/mui-joy/src/Sheet/Sheet.spec.tsx    |  7 ---
 packages/mui-joy/src/Sheet/Sheet.test.js     | 23 --------
 packages/mui-joy/src/Sheet/Sheet.tsx         | 24 +-------
 packages/mui-joy/src/Sheet/SheetProps.ts     |  7 +--
 packages/mui-joy/src/Sheet/sheetClasses.ts   | 15 -----
 6 files changed, 5 insertions(+), 130 deletions(-)

diff --git a/docs/data/joy/components/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js
index 7f07b43d0ffb01..8a46a675eb77c7 100644
--- a/docs/data/joy/components/sheet/SheetUsage.js
+++ b/docs/data/joy/components/sheet/SheetUsage.js
@@ -28,7 +28,6 @@ const Select = styled('select')(({ theme }) => ({
 const defaultProps = {
   variant: 'plain',
   color: 'neutral',
-  elevation: undefined,
 };
 
 function createCode(name, inProps) {
@@ -66,11 +65,7 @@ function createCode(name, inProps) {
 
 export default function SheetUsage() {
   const [props, setProps] = React.useState({});
-  const {
-    variant = defaultProps.variant,
-    color = defaultProps.color,
-    elevation = defaultProps.elevation,
-  } = props;
+  const { variant = defaultProps.variant, color = defaultProps.color } = props;
   return (
     <Box
       sx={{
@@ -242,58 +237,6 @@ export default function SheetUsage() {
               )}
             </RadioGroup>
           </Box>
-          <Box>
-            <Typography
-              id="badge-elevation-selector"
-              level="body2"
-              fontWeight="lg"
-              mb={1}
-            >
-              elevation
-            </Typography>
-            <RadioGroup
-              row
-              name="badge-elevation"
-              aria-labelledby="badge-elevation-selector"
-              value={elevation}
-              onChange={(event) => {
-                return setProps((latestProps) => ({
-                  ...latestProps,
-                  elevation: event.target.value,
-                }));
-              }}
-              sx={{ flexWrap: 'wrap', gap: 1 }}
-            >
-              {['xs', 'sm', 'md', 'lg', 'xl'].map((value) => {
-                const checked = elevation === value;
-                return (
-                  <Chip
-                    key={value}
-                    variant="plain"
-                    color="neutral"
-                    size="sm"
-                    sx={{ bgcolor: 'background.body' }}
-                  >
-                    <Radio
-                      size="sm"
-                      variant="outlined"
-                      color="neutral"
-                      label={
-                        <Typography
-                          endDecorator={checked ? <Check fontSize="md" /> : null}
-                        >
-                          {value}
-                        </Typography>
-                      }
-                      value={value}
-                      disableIcon
-                      overlay
-                    />
-                  </Chip>
-                );
-              })}
-            </RadioGroup>
-          </Box>
         </Box>
       </Box>
     </Box>
diff --git a/packages/mui-joy/src/Sheet/Sheet.spec.tsx b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
index 9191bd58531f69..27103fa23850c7 100644
--- a/packages/mui-joy/src/Sheet/Sheet.spec.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
@@ -19,13 +19,6 @@ import * as React from 'react';
 <Sheet color="warning" />;
 <Sheet color="neutral" />;
 
-// `elevation`
-<Sheet elevation="xs" />;
-<Sheet elevation="sm" />;
-<Sheet elevation="md" />;
-<Sheet elevation="lg" />;
-<Sheet elevation="xl" />;
-
 // @ts-expect-error there is no variant `filled`
 <Sheet variant="filled" />;
 
diff --git a/packages/mui-joy/src/Sheet/Sheet.test.js b/packages/mui-joy/src/Sheet/Sheet.test.js
index 187fa4eaf49f24..dac9eb34a6265d 100644
--- a/packages/mui-joy/src/Sheet/Sheet.test.js
+++ b/packages/mui-joy/src/Sheet/Sheet.test.js
@@ -59,27 +59,4 @@ describe('<Sheet />', () => {
       });
     });
   });
-
-  describe('prop: elevation', () => {
-    it('undefined by default', () => {
-      const { getByTestId } = render(<Sheet data-testid="root">Hello World</Sheet>);
-
-      expect(getByTestId('root')).not.to.have.class(classes.elevationXs);
-      expect(getByTestId('root')).not.to.have.class(classes.elevationSm);
-      expect(getByTestId('root')).not.to.have.class(classes.elevationMd);
-      expect(getByTestId('root')).not.to.have.class(classes.elevationLg);
-      expect(getByTestId('root')).not.to.have.class(classes.elevationXl);
-    });
-    ['xs', 'sm', 'md', 'lg', 'xl'].forEach((elevation) => {
-      it(`should render ${elevation}`, () => {
-        const { getByTestId } = render(
-          <Sheet data-testid="root" elevation={elevation}>
-            Hello World
-          </Sheet>,
-        );
-
-        expect(getByTestId('root')).to.have.class(classes[`elevation${capitalize(elevation)}`]);
-      });
-    });
-  });
 });
diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
index 6897817704629b..4bf85e258c184f 100644
--- a/packages/mui-joy/src/Sheet/Sheet.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -5,20 +5,19 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useThemeProps } from '../styles';
-import { resolveSxValue } from '../styles/styleUtils';
 import styled from '../styles/styled';
+import { resolveSxValue } from '../styles/styleUtils';
 import { getSheetUtilityClass } from './sheetClasses';
 import { SheetProps, SheetTypeMap } from './SheetProps';
 
 const useUtilityClasses = (ownerState: SheetProps) => {
-  const { elevation, variant, color } = ownerState;
+  const { variant, color } = ownerState;
 
   const slots = {
     root: [
       'root',
       variant && `variant${capitalize(variant)}`,
       color && `color${capitalize(color)}`,
-      elevation && `elevation${capitalize(elevation)}`,
     ],
   };
 
@@ -43,7 +42,6 @@ const SheetRoot = styled('div', {
       // TODO: discuss the theme transition.
       // This value is copied from mui-material Sheet.
       transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-      boxShadow: theme.vars.shadow[ownerState.elevation!],
       backgroundColor: theme.vars.palette.background.body,
       position: 'relative',
     },
@@ -57,20 +55,12 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
     name: 'JoySheet',
   });
 
-  const {
-    className,
-    color = 'neutral',
-    component = 'div',
-    variant = 'plain',
-    elevation,
-    ...other
-  } = props;
+  const { className, color = 'neutral', component = 'div', variant = 'plain', ...other } = props;
 
   const ownerState = {
     ...props,
     color,
     component,
-    elevation,
     variant,
   };
 
@@ -113,14 +103,6 @@ Sheet.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * Shadow depth, corresponds to the `theme.shadow` scale.
-   * It accepts theme values between 'xs' and 'xl'.
-   */
-  elevation: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']),
-    PropTypes.string,
-  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/mui-joy/src/Sheet/SheetProps.ts b/packages/mui-joy/src/Sheet/SheetProps.ts
index fcd5258f073e18..993305b7657764 100644
--- a/packages/mui-joy/src/Sheet/SheetProps.ts
+++ b/packages/mui-joy/src/Sheet/SheetProps.ts
@@ -1,6 +1,6 @@
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import * as React from 'react';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
 
 export type SheetSlot = 'root';
 
@@ -18,11 +18,6 @@ export interface SheetTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * @default 'neutral'
      */
     color?: OverridableStringUnion<ColorPaletteProp, SheetPropsColorOverrides>;
-    /**
-     * Shadow depth, corresponds to the `theme.shadow` scale.
-     * It accepts theme values between 'xs' and 'xl'.
-     */
-    elevation?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
diff --git a/packages/mui-joy/src/Sheet/sheetClasses.ts b/packages/mui-joy/src/Sheet/sheetClasses.ts
index a4f7d8cb2839f6..a6d78654abba3d 100644
--- a/packages/mui-joy/src/Sheet/sheetClasses.ts
+++ b/packages/mui-joy/src/Sheet/sheetClasses.ts
@@ -23,16 +23,6 @@ export interface SheetClasses {
   variantSoft: string;
   /** Styles applied to the root element if `variant="solid"`. */
   variantSolid: string;
-  /** Styles applied to the root element if `elevation="xs"`. */
-  elevationXs: string;
-  /** Styles applied to the root element if `elevation="sm"`. */
-  elevationSm: string;
-  /** Styles applied to the root element if `elevation="md"`. */
-  elevationMd: string;
-  /** Styles applied to the root element if `elevation="lg"`. */
-  elevationLg: string;
-  /** Styles applied to the root element if `elevation="xl"`. */
-  elevationXl: string;
 }
 
 export type SheetClassKey = keyof SheetClasses;
@@ -53,11 +43,6 @@ const sheetClasses: SheetClasses = generateUtilityClasses('JoySheet', [
   'variantOutlined',
   'variantSoft',
   'variantSolid',
-  'elevationXs',
-  'elevationSm',
-  'elevationMd',
-  'elevationLg',
-  'elevationXl',
 ]);
 
 export default sheetClasses;

From a5e723ef07197f84ca3e48591614bd164c814f5e Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 15 Jun 2022 14:52:21 +0900
Subject: [PATCH 13/22] Remove all uses of elevation prop in Sheet

---
 docs/pages/experiments/joy/sheet.tsx      | 8 ++------
 packages/mui-joy/src/Sheet/Sheet.spec.tsx | 5 +----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/docs/pages/experiments/joy/sheet.tsx b/docs/pages/experiments/joy/sheet.tsx
index e097cf5945fbde..10e991e6f3cebf 100644
--- a/docs/pages/experiments/joy/sheet.tsx
+++ b/docs/pages/experiments/joy/sheet.tsx
@@ -1,4 +1,5 @@
 import Moon from '@mui/icons-material/DarkMode';
+import Info from '@mui/icons-material/InfoOutlined';
 import Sun from '@mui/icons-material/LightMode';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
@@ -7,7 +8,6 @@ import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
 import { GlobalStyles } from '@mui/system';
 import * as React from 'react';
-import Info from '@mui/icons-material/InfoOutlined';
 
 const ColorSchemePicker = () => {
   const { mode, setMode } = useColorScheme();
@@ -40,7 +40,6 @@ export default function JoySheet() {
   const SheetProps = {
     variant: ['plain', 'outlined', 'soft', 'solid'],
     color: ['primary', 'neutral', 'danger', 'info', 'success', 'warning'],
-    elevation: ['xs', 'sm', 'md', 'lg', 'xl'],
   } as const;
 
   return (
@@ -52,10 +51,7 @@ export default function JoySheet() {
         <Box sx={{ px: 3, pb: 4 }}>
           <ColorSchemePicker />
         </Box>
-        <Sheet
-          elevation="sm"
-          sx={{ p: 2, display: 'flex', gap: 2, borderRadius: 'sm', alignItems: 'center' }}
-        >
+        <Sheet sx={{ p: 2, display: 'flex', gap: 2, borderRadius: 'sm', alignItems: 'center' }}>
           <Sheet variant="soft" color="primary" sx={{ p: 1, borderRadius: 'xs' }}>
             <Sheet
               variant="solid"
diff --git a/packages/mui-joy/src/Sheet/Sheet.spec.tsx b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
index 27103fa23850c7..f5c7650525eec5 100644
--- a/packages/mui-joy/src/Sheet/Sheet.spec.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
@@ -23,7 +23,4 @@ import * as React from 'react';
 <Sheet variant="filled" />;
 
 // @ts-expect-error there is no color `secondary`
-<Sheet color="secondary" />;
-
-// @ts-expect-error there is no elevation `xl2`
-<Sheet elevation="xl2" />;
+<Sheet color="secondary" />;
\ No newline at end of file

From c56ef3a858e8162fe61580a9ca356031eb6935a6 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 15 Jun 2022 14:52:55 +0900
Subject: [PATCH 14/22] Run prettier

---
 packages/mui-joy/src/Sheet/Sheet.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-joy/src/Sheet/Sheet.spec.tsx b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
index f5c7650525eec5..cd6a10f90b2e2e 100644
--- a/packages/mui-joy/src/Sheet/Sheet.spec.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
@@ -23,4 +23,4 @@ import * as React from 'react';
 <Sheet variant="filled" />;
 
 // @ts-expect-error there is no color `secondary`
-<Sheet color="secondary" />;
\ No newline at end of file
+<Sheet color="secondary" />;

From 74b270556b7af1e2c5f2f7fd11e1686724370e9c Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 15 Jun 2022 17:17:50 +0900
Subject: [PATCH 15/22] Remove unused import

---
 docs/data/joy/components/sheet/SheetUsage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js
index 8a46a675eb77c7..63c0a953f61034 100644
--- a/docs/data/joy/components/sheet/SheetUsage.js
+++ b/docs/data/joy/components/sheet/SheetUsage.js
@@ -3,7 +3,6 @@ import BrandingProvider from 'docs/src/BrandingProvider';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import { styled } from '@mui/joy/styles';
 import Box from '@mui/joy/Box';
-import Chip from '@mui/joy/Chip';
 import Typography from '@mui/joy/Typography';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';

From bf8ed0da75df91a0091fc4b4883d0fbc02f4cdb6 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 15 Jun 2022 23:51:55 -0300
Subject: [PATCH 16/22] copywriting and demo tweaks

---
 docs/data/joy/components/sheet/sheet.md | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index 7ebd97024b3638..7df2caae0984d1 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -7,9 +7,32 @@ title: React Sheet component
 
 <p class="description">Sheet is a useful surface component that implements the global variant feature.</p>
 
+## Introduction
+
+The `Sheet` container is a generic container.
+It's a sibling to the `Box` component with the difference being that it supports Joy UI's global variants out of the box.
+
+{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": true}}
+
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
+## Component
+
+After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+
+```jsx
+import Sheet from '@mui/joy/Sheet';
+
+export default function MyApp() {
+  return <Sheet>Holy sheet!</Sheet>;
+}
+```
+
+### Basic usage
+
+The `Sheet` also has access to the `color` prop, allowing you to access every palette of the theme.
+
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 
-{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": true}}
+{{"demo": "SimpleSheet.js"}}

From e5ce4e558a4e62839cea7830af21c1f867bc6da9 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 16 Jun 2022 00:10:18 -0300
Subject: [PATCH 17/22] fix copywriting

---
 docs/data/joy/components/sheet/sheet.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index 7df2caae0984d1..739ff379a29466 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -30,9 +30,6 @@ export default function MyApp() {
 
 ### Basic usage
 
-The `Sheet` also has access to the `color` prop, allowing you to access every palette of the theme.
-
-Use the `Sheet` component as a generic container for your components.
-You can play around with variants, color, and elevation to achieve the desired result.
+The `Sheet` component, in addition to the variants, also has access to the `color` prop, allowing you to use every palette of the theme.
 
 {{"demo": "SimpleSheet.js"}}

From 937e9412a57a1eb47eb3af139e2bf778b7a95a6c Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Mon, 20 Jun 2022 13:48:42 +0900
Subject: [PATCH 18/22] Use common component called JoyUsageDemo

---
 docs/data/joy/components/sheet/SheetUsage.js | 257 ++-----------------
 1 file changed, 27 insertions(+), 230 deletions(-)

diff --git a/docs/data/joy/components/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js
index 63c0a953f61034..70c796699aa0c9 100644
--- a/docs/data/joy/components/sheet/SheetUsage.js
+++ b/docs/data/joy/components/sheet/SheetUsage.js
@@ -1,243 +1,40 @@
 import * as React from 'react';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import { styled } from '@mui/joy/styles';
-import Box from '@mui/joy/Box';
-import Typography from '@mui/joy/Typography';
-import RadioGroup from '@mui/joy/RadioGroup';
-import Radio from '@mui/joy/Radio';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Sheet from '@mui/joy/Sheet';
-import Check from '@mui/icons-material/Check';
-
-const Select = styled('select')(({ theme }) => ({
-  padding: '0.25rem',
-  border: 'none',
-  borderRadius: theme.radius.sm,
-  width: '100%',
-  minHeight: '2rem',
-  ...theme.typography.body2,
-  ...theme.variants.outlined.neutral,
-  [theme.focus.selector]: {
-    borderColor: theme.vars.palette.primary[500],
-    boxShadow: `inset 0 0 0 1px ${theme.vars.palette.primary[500]}`,
-    outline: 'none',
-  },
-}));
-
-const defaultProps = {
-  variant: 'plain',
-  color: 'neutral',
-};
-
-function createCode(name, inProps) {
-  let code = `<${name}`;
-  const props = Object.entries(inProps).sort((a, b) => a[0] - b[0]);
-
-  if (!Object.keys(props).length) {
-    code = `${code} />`;
-  } else {
-    let children = '';
-    props.forEach((prop) => {
-      if (prop[0] !== 'children' && prop[1] !== undefined) {
-        if (props.length <= 2) {
-          code = `${code} ${prop[0]}=${
-            typeof prop[1] === 'number' ? `{${prop[1]}}` : `"${prop[1]}"`
-          }`;
-        } else {
-          code = `${code}\n  ${prop[0]}=${
-            typeof prop[1] === 'number' ? `{${prop[1]}}` : `"${prop[1]}"`
-          }`;
-        }
-      } else {
-        children = prop[1];
-      }
-    });
-    if (children) {
-      code = `${code}>\n  ${children}\n</${name}>`;
-    } else {
-      code = `${code}${props.length > 2 ? `\n/>` : ` />`}`;
-    }
-  }
-
-  return code;
-}
 
 export default function SheetUsage() {
-  const [props, setProps] = React.useState({});
-  const { variant = defaultProps.variant, color = defaultProps.color } = props;
   return (
-    <Box
-      sx={{
-        m: -1.5,
-        mt: 0.5,
-        flexGrow: 1,
-        maxWidth: 'calc(100% + 24px)',
-        display: 'flex',
-        gap: 1.5,
-        '& .markdown-body pre': {
-          margin: 0,
-          borderRadius: 'xs',
+    <JoyUsageDemo
+      componentName="Sheet"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'plain',
+          options: ['plain', 'outlined', 'soft', 'solid'],
         },
-      }}
-    >
-      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 999 }}>
-        <Box
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+          options: ['neutral', 'primary', 'danger', 'info', 'success', 'warning'],
+        },
+      ]}
+      renderDemo={(props) => (
+        <Sheet
+          {...props}
           sx={{
-            flexGrow: 1,
-            m: 'auto',
+            width: 250,
+            height: 200,
+            m: 1,
             display: 'flex',
             alignItems: 'center',
-            p: 2,
-          }}
-        >
-          <Sheet
-            {...props}
-            sx={{
-              width: 250,
-              height: 200,
-              m: 1,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Typography sx={{ color: 'inherit' }} fontSize="md">
-              Sheet
-            </Typography>
-          </Sheet>
-        </Box>
-        <BrandingProvider mode="dark">
-          <HighlightedCode
-            code={createCode('Sheet', { ...props, children: '...' })}
-            language="jsx"
-            sx={{ display: { xs: 'none', md: 'block' } }}
-          />
-        </BrandingProvider>
-      </Box>
-      <Box
-        sx={{
-          flexGrow: 1,
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: 2,
-          p: 2,
-          bgcolor: 'background.level1',
-          borderRadius: 'xs',
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            minWidth: '160px',
+            justifyContent: 'center',
           }}
         >
-          <Box>
-            <Typography
-              component="label"
-              level="body2"
-              fontWeight="lg"
-              htmlFor="variant-select"
-              mb={0.5}
-            >
-              variant
-            </Typography>
-            <Select
-              id="variant-select"
-              value={variant}
-              onChange={(event) => {
-                return setProps((latestProps) => ({
-                  ...latestProps,
-                  variant: event.target.value,
-                }));
-              }}
-            >
-              <option value="plain">plain</option>
-              <option value="outlined">outlined</option>
-              <option value="soft">soft</option>
-              <option value="solid">solid</option>
-            </Select>
-          </Box>
-          <Box>
-            <Typography
-              id="badge-color-selector"
-              level="body2"
-              fontWeight="lg"
-              mb={1}
-            >
-              color
-            </Typography>
-            <RadioGroup
-              row
-              name="badge-color"
-              aria-labelledby="badge-color-selector"
-              value={color}
-              onChange={(event) => {
-                return setProps((latestProps) => ({
-                  ...latestProps,
-                  color: event.target.value,
-                }));
-              }}
-              sx={{ flexWrap: 'wrap', gap: 1 }}
-            >
-              {['neutral', 'primary', 'danger', 'info', 'success', 'warning'].map(
-                (value) => {
-                  const checked = color === value;
-                  return (
-                    <Sheet
-                      key={value}
-                      sx={{ width: 28, height: 28, bgcolor: 'unset' }}
-                    >
-                      <Radio
-                        variant="solid"
-                        color={value}
-                        label={value}
-                        value={value}
-                        disableIcon
-                        overlay
-                        sx={{
-                          '& .JoyRadio-action': { bgcolor: `${value}.500` },
-                          '& .JoyRadio-label': {
-                            fontSize: '10px',
-                            color: 'text.secondary',
-                            position: 'absolute',
-                            bottom: '-1rem',
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            opacity: 0,
-                            transition: '0.2s',
-                          },
-                          '&:hover, &.Joy-focusVisible': {
-                            '& .JoyRadio-label': {
-                              opacity: 1,
-                              bottom: '-1.25rem',
-                            },
-                          },
-                        }}
-                      />
-                      {checked && (
-                        <Check
-                          fontSize="md"
-                          sx={{
-                            color: '#fff',
-                            zIndex: 1,
-                            position: 'absolute',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            pointerEvents: 'none',
-                          }}
-                        />
-                      )}
-                    </Sheet>
-                  );
-                },
-              )}
-            </RadioGroup>
-          </Box>
-        </Box>
-      </Box>
-    </Box>
+          Sheet
+        </Sheet>
+      )}
+    />
   );
 }

From 85884dcb2fc78ac8bfe69f3c0604a6801bc8a157 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Mon, 20 Jun 2022 13:48:49 +0900
Subject: [PATCH 19/22] Re-add Danilo's demo

---
 docs/data/joy/components/sheet/SimpleSheet.js          | 10 ++++++++++
 docs/data/joy/components/sheet/SimpleSheet.tsx         | 10 ++++++++++
 docs/data/joy/components/sheet/SimpleSheet.tsx.preview |  3 +++
 3 files changed, 23 insertions(+)
 create mode 100644 docs/data/joy/components/sheet/SimpleSheet.js
 create mode 100644 docs/data/joy/components/sheet/SimpleSheet.tsx
 create mode 100644 docs/data/joy/components/sheet/SimpleSheet.tsx.preview

diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SimpleSheet.js
new file mode 100644
index 00000000000000..db9a2bb24b5f0c
--- /dev/null
+++ b/docs/data/joy/components/sheet/SimpleSheet.js
@@ -0,0 +1,10 @@
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SimpleSheet() {
+  return (
+    <Sheet variant="outlined" sx={{ p: 4 }}>
+      Hello world!
+    </Sheet>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SimpleSheet.tsx
new file mode 100644
index 00000000000000..db9a2bb24b5f0c
--- /dev/null
+++ b/docs/data/joy/components/sheet/SimpleSheet.tsx
@@ -0,0 +1,10 @@
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SimpleSheet() {
+  return (
+    <Sheet variant="outlined" sx={{ p: 4 }}>
+      Hello world!
+    </Sheet>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
new file mode 100644
index 00000000000000..560b76bdfa8ad6
--- /dev/null
+++ b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
@@ -0,0 +1,3 @@
+<Sheet variant="outlined" sx={{ p: 4 }}>
+  Hello world!
+</Sheet>
\ No newline at end of file

From 77ed108cc474ac0985953717c7335b94dbf56d5d Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 22 Jun 2022 07:45:56 -0300
Subject: [PATCH 20/22] Jun's review

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
---
 docs/data/joy/components/sheet/SimpleSheet.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SimpleSheet.js
index db9a2bb24b5f0c..1cd5e7cc7fcf6e 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.js
+++ b/docs/data/joy/components/sheet/SimpleSheet.js
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 export default function SimpleSheet() {
   return (
-    <Sheet variant="outlined" sx={{ p: 4 }}>
+    <Sheet variant="outlined" color="neutral" sx={{ p: 4 }}>
       Hello world!
     </Sheet>
   );

From 75cfd0bec77cae9e9cfc66f0bf7757c1fd63bab9 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 22 Jun 2022 07:46:03 -0300
Subject: [PATCH 21/22] Jun's review

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
---
 docs/data/joy/components/sheet/SimpleSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SimpleSheet.tsx
index db9a2bb24b5f0c..1cd5e7cc7fcf6e 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.tsx
+++ b/docs/data/joy/components/sheet/SimpleSheet.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 export default function SimpleSheet() {
   return (
-    <Sheet variant="outlined" sx={{ p: 4 }}>
+    <Sheet variant="outlined" color="neutral" sx={{ p: 4 }}>
       Hello world!
     </Sheet>
   );

From 9ca3ca0cd02e13783a884f08c4e6cdf8a46e7536 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 22 Jun 2022 07:46:10 -0300
Subject: [PATCH 22/22] Jun's review

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
---
 docs/data/joy/components/sheet/SimpleSheet.tsx.preview | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
index 560b76bdfa8ad6..af5198b0005732 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
+++ b/docs/data/joy/components/sheet/SimpleSheet.tsx.preview
@@ -1,3 +1,3 @@
-<Sheet variant="outlined" sx={{ p: 4 }}>
+<Sheet variant="outlined" color="neutral" sx={{ p: 4 }}>
   Hello world!
 </Sheet>
\ No newline at end of file