From 48812ad21a9947cee38b3ff5b8bd066110106109 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Mon, 20 Mar 2023 08:48:08 +0000
Subject: [PATCH 1/5] feat: [docs][base][Modal] Move styles to the bottom of
 demos code

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../base/components/modal/KeepMountedModal.js |  54 +++++-----
 .../components/modal/KeepMountedModal.tsx     |  54 +++++-----
 .../base/components/modal/ModalUnstyled.js    |  52 ++++-----
 .../base/components/modal/ModalUnstyled.tsx   |  52 ++++-----
 .../data/base/components/modal/NestedModal.js | 100 +++++++++---------
 .../base/components/modal/NestedModal.tsx     |  96 ++++++++---------
 .../data/base/components/modal/ServerModal.js |  42 ++++----
 .../base/components/modal/ServerModal.tsx     |  42 ++++----
 .../data/base/components/modal/SpringModal.js |  58 +++++-----
 .../base/components/modal/SpringModal.tsx     |  58 +++++-----
 .../base/components/modal/TransitionsModal.js |  58 +++++-----
 .../components/modal/TransitionsModal.tsx     |  58 +++++-----
 12 files changed, 362 insertions(+), 362 deletions(-)

diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index 546d1e24fc3de8..5e2ca2d0c492a0 100644
--- a/docs/data/base/components/modal/KeepMountedModal.js
+++ b/docs/data/base/components/modal/KeepMountedModal.js
@@ -4,6 +4,33 @@ import clsx from 'clsx';
 import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 
+export default function ModalUnstyledDemo() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Open modal
+      </button>
+      <Modal
+        aria-labelledby="keep-mounted-modal-title"
+        aria-describedby="keep-mounted-modal-description"
+        open={open}
+        onClose={handleClose}
+        slots={{ backdrop: Backdrop }}
+        keepMounted
+      >
+        <Box sx={style}>
+          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
+          <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef((props, ref) => {
   const { open, className, ...other } = props;
   return (
@@ -52,30 +79,3 @@ const style = (theme) => ({
   border: '2px solid currentColor',
   padding: '16px 32px 24px 32px',
 });
-
-export default function ModalUnstyledDemo() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <button type="button" onClick={handleOpen}>
-        Open modal
-      </button>
-      <Modal
-        aria-labelledby="keep-mounted-modal-title"
-        aria-describedby="keep-mounted-modal-description"
-        open={open}
-        onClose={handleClose}
-        slots={{ backdrop: Backdrop }}
-        keepMounted
-      >
-        <Box sx={style}>
-          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
-          <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
index 95bea81f5546f3..a0bb6c68ebf33c 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -3,6 +3,33 @@ import clsx from 'clsx';
 import { styled, Box, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 
+export default function ModalUnstyledDemo() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Open modal
+      </button>
+      <Modal
+        aria-labelledby="keep-mounted-modal-title"
+        aria-describedby="keep-mounted-modal-description"
+        open={open}
+        onClose={handleClose}
+        slots={{ backdrop: Backdrop }}
+        keepMounted
+      >
+        <Box sx={style}>
+          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
+          <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef<
   HTMLDivElement,
   { open?: boolean; className: string }
@@ -49,30 +76,3 @@ const style = (theme: Theme) => ({
   border: '2px solid currentColor',
   padding: '16px 32px 24px 32px',
 });
-
-export default function ModalUnstyledDemo() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <button type="button" onClick={handleOpen}>
-        Open modal
-      </button>
-      <Modal
-        aria-labelledby="keep-mounted-modal-title"
-        aria-describedby="keep-mounted-modal-description"
-        open={open}
-        onClose={handleClose}
-        slots={{ backdrop: Backdrop }}
-        keepMounted
-      >
-        <Box sx={style}>
-          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
-          <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
index 196507ec5245b3..09bd287b61e86b 100644
--- a/docs/data/base/components/modal/ModalUnstyled.js
+++ b/docs/data/base/components/modal/ModalUnstyled.js
@@ -4,6 +4,32 @@ import clsx from 'clsx';
 import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 
+export default function ModalUnstyledDemo() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Open modal
+      </button>
+      <Modal
+        aria-labelledby="unstyled-modal-title"
+        aria-describedby="unstyled-modal-description"
+        open={open}
+        onClose={handleClose}
+        slots={{ backdrop: Backdrop }}
+      >
+        <Box sx={style}>
+          <h2 id="unstyled-modal-title">Text in a modal</h2>
+          <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef((props, ref) => {
   const { open, className, ...other } = props;
   return (
@@ -49,29 +75,3 @@ const style = (theme) => ({
   border: '2px solid currentColor',
   padding: '16px 32px 24px 32px',
 });
-
-export default function ModalUnstyledDemo() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <button type="button" onClick={handleOpen}>
-        Open modal
-      </button>
-      <Modal
-        aria-labelledby="unstyled-modal-title"
-        aria-describedby="unstyled-modal-description"
-        open={open}
-        onClose={handleClose}
-        slots={{ backdrop: Backdrop }}
-      >
-        <Box sx={style}>
-          <h2 id="unstyled-modal-title">Text in a modal</h2>
-          <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
index 8bb0cd53ec23b1..28cc191a4d7c97 100644
--- a/docs/data/base/components/modal/ModalUnstyled.tsx
+++ b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -3,6 +3,32 @@ import clsx from 'clsx';
 import { styled, Box, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 
+export default function ModalUnstyledDemo() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Open modal
+      </button>
+      <Modal
+        aria-labelledby="unstyled-modal-title"
+        aria-describedby="unstyled-modal-description"
+        open={open}
+        onClose={handleClose}
+        slots={{ backdrop: Backdrop }}
+      >
+        <Box sx={style}>
+          <h2 id="unstyled-modal-title">Text in a modal</h2>
+          <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef<
   HTMLDivElement,
   { open?: boolean; className: string }
@@ -46,29 +72,3 @@ const style = (theme: Theme) => ({
   border: '2px solid currentColor',
   padding: '16px 32px 24px 32px',
 });
-
-export default function ModalUnstyledDemo() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <button type="button" onClick={handleOpen}>
-        Open modal
-      </button>
-      <Modal
-        aria-labelledby="unstyled-modal-title"
-        aria-describedby="unstyled-modal-description"
-        open={open}
-        onClose={handleClose}
-        slots={{ backdrop: Backdrop }}
-      >
-        <Box sx={style}>
-          <h2 id="unstyled-modal-title">Text in a modal</h2>
-          <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index 9a392e3974b153..88a3c43c47eab0 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -5,56 +5,6 @@ import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
-const BackdropUnstyled = React.forwardRef((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
-});
-
-BackdropUnstyled.propTypes = {
-  className: PropTypes.string.isRequired,
-  open: PropTypes.bool,
-};
-
-const Modal = styled(ModalUnstyled)`
-  position: fixed;
-  z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Backdrop = styled(BackdropUnstyled)`
-  z-index: -1;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-tap-highlight-color: transparent;
-`;
-
-const style = (theme) => ({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
-  padding: '16px 32px 24px 32px',
-});
-
 function ChildModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
@@ -116,3 +66,53 @@ export default function NestedModal() {
     </div>
   );
 }
+
+const BackdropUnstyled = React.forwardRef((props, ref) => {
+  const { open, className, ...other } = props;
+  return (
+    <div
+      className={clsx({ 'MuiBackdrop-open': open }, className)}
+      ref={ref}
+      {...other}
+    />
+  );
+});
+
+BackdropUnstyled.propTypes = {
+  className: PropTypes.string.isRequired,
+  open: PropTypes.bool,
+};
+
+const Modal = styled(ModalUnstyled)`
+  position: fixed;
+  z-index: 1300;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Backdrop = styled(BackdropUnstyled)`
+  z-index: -1;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-tap-highlight-color: transparent;
+`;
+
+const style = (theme) => ({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  border: '2px solid currentColor',
+  padding: '16px 32px 24px 32px',
+});
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index 244ef3ac6bd126..78b0a84f4414d2 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -4,54 +4,6 @@ import { styled, Box, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
-const BackdropUnstyled = React.forwardRef<
-  HTMLDivElement,
-  { open?: boolean; className: string }
->((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
-});
-
-const Modal = styled(ModalUnstyled)`
-  position: fixed;
-  z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Backdrop = styled(BackdropUnstyled)`
-  z-index: -1;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-tap-highlight-color: transparent;
-`;
-
-const style = (theme: Theme) => ({
-  position: 'absolute' as 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
-  padding: '16px 32px 24px 32px',
-});
-
 function ChildModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
@@ -113,3 +65,51 @@ export default function NestedModal() {
     </div>
   );
 }
+
+const BackdropUnstyled = React.forwardRef<
+  HTMLDivElement,
+  { open?: boolean; className: string }
+>((props, ref) => {
+  const { open, className, ...other } = props;
+  return (
+    <div
+      className={clsx({ 'MuiBackdrop-open': open }, className)}
+      ref={ref}
+      {...other}
+    />
+  );
+});
+
+const Modal = styled(ModalUnstyled)`
+  position: fixed;
+  z-index: 1300;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Backdrop = styled(BackdropUnstyled)`
+  z-index: -1;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-tap-highlight-color: transparent;
+`;
+
+const style = (theme: Theme) => ({
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  border: '2px solid currentColor',
+  padding: '16px 32px 24px 32px',
+});
diff --git a/docs/data/base/components/modal/ServerModal.js b/docs/data/base/components/modal/ServerModal.js
index ee000bb5536248..34fa4ea311fe53 100644
--- a/docs/data/base/components/modal/ServerModal.js
+++ b/docs/data/base/components/modal/ServerModal.js
@@ -2,27 +2,6 @@ import * as React from 'react';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import { Box, styled } from '@mui/system';
 
-const StyledModal = styled(ModalUnstyled)`
-  position: fixed;
-  z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  background: inherit;
-`;
-
-const style = {
-  position: 'relative',
-  width: 400,
-  border: '2px solid currentColor',
-  padding: '16px 32px 24px 32px',
-};
-
 export default function ServerModal() {
   const rootRef = React.useRef(null);
 
@@ -60,3 +39,24 @@ export default function ServerModal() {
     </Box>
   );
 }
+
+const StyledModal = styled(ModalUnstyled)`
+  position: fixed;
+  z-index: 1300;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  background: inherit;
+`;
+
+const style = {
+  position: 'relative',
+  width: 400,
+  border: '2px solid currentColor',
+  padding: '16px 32px 24px 32px',
+};
diff --git a/docs/data/base/components/modal/ServerModal.tsx b/docs/data/base/components/modal/ServerModal.tsx
index 18383f1bc7a35f..2ee764dbf0d4d4 100644
--- a/docs/data/base/components/modal/ServerModal.tsx
+++ b/docs/data/base/components/modal/ServerModal.tsx
@@ -2,27 +2,6 @@ import * as React from 'react';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import { Box, styled } from '@mui/system';
 
-const StyledModal = styled(ModalUnstyled)`
-  position: fixed;
-  z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  background: inherit;
-`;
-
-const style = {
-  position: 'relative',
-  width: 400,
-  border: '2px solid currentColor',
-  padding: '16px 32px 24px 32px',
-};
-
 export default function ServerModal() {
   const rootRef = React.useRef<HTMLDivElement>(null);
 
@@ -60,3 +39,24 @@ export default function ServerModal() {
     </Box>
   );
 }
+
+const StyledModal = styled(ModalUnstyled)`
+  position: fixed;
+  z-index: 1300;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  background: inherit;
+`;
+
+const style = {
+  position: 'relative',
+  width: 400,
+  border: '2px solid currentColor',
+  padding: '16px 32px 24px 32px',
+};
diff --git a/docs/data/base/components/modal/SpringModal.js b/docs/data/base/components/modal/SpringModal.js
index f52fa91f991376..7265414faecc29 100644
--- a/docs/data/base/components/modal/SpringModal.js
+++ b/docs/data/base/components/modal/SpringModal.js
@@ -5,6 +5,35 @@ import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 import { useSpring, animated } from '@react-spring/web';
 
+export default function SpringModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        aria-labelledby="spring-modal-title"
+        aria-describedby="spring-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <h2 id="spring-modal-title">Text in a modal</h2>
+            <span id="spring-modal-description" style={{ marginTop: 16 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </span>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef((props, ref) => {
   const { open, ...other } = props;
   return <Fade ref={ref} in={open} {...other} />;
@@ -79,32 +108,3 @@ const style = (theme) => ({
   boxShadow: 24,
   padding: '16px 32px 24px 32px',
 });
-
-export default function SpringModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        aria-labelledby="spring-modal-title"
-        aria-describedby="spring-modal-description"
-        open={open}
-        onClose={handleClose}
-        closeAfterTransition
-        slots={{ backdrop: Backdrop }}
-      >
-        <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: 16 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </span>
-          </Box>
-        </Fade>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
index 5d84459dd26e3f..853b423a43abac 100644
--- a/docs/data/base/components/modal/SpringModal.tsx
+++ b/docs/data/base/components/modal/SpringModal.tsx
@@ -4,6 +4,35 @@ import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 import { useSpring, animated } from '@react-spring/web';
 
+export default function SpringModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        aria-labelledby="spring-modal-title"
+        aria-describedby="spring-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <h2 id="spring-modal-title">Text in a modal</h2>
+            <span id="spring-modal-description" style={{ marginTop: 16 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </span>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef<
   HTMLDivElement,
   { children: React.ReactElement; open: boolean }
@@ -78,32 +107,3 @@ const style = (theme: Theme) => ({
   boxShadow: 24,
   padding: '16px 32px 24px 32px',
 });
-
-export default function SpringModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        aria-labelledby="spring-modal-title"
-        aria-describedby="spring-modal-description"
-        open={open}
-        onClose={handleClose}
-        closeAfterTransition
-        slots={{ backdrop: Backdrop }}
-      >
-        <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: 16 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </span>
-          </Box>
-        </Fade>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/TransitionsModal.js b/docs/data/base/components/modal/TransitionsModal.js
index 4d579afa004460..c5893ba3039744 100644
--- a/docs/data/base/components/modal/TransitionsModal.js
+++ b/docs/data/base/components/modal/TransitionsModal.js
@@ -5,6 +5,35 @@ import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 import Button from '@mui/base/ButtonUnstyled';
 
+export default function TransitionsModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <h2 id="transition-modal-title">Text in a modal</h2>
+            <span id="transition-modal-description" style={{ marginTop: 16 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </span>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef((props, ref) => {
   const { open, ...other } = props;
   return (
@@ -52,32 +81,3 @@ const style = (theme) => ({
   boxShadow: 24,
   padding: '16px 32px 24px 32px',
 });
-
-export default function TransitionsModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        aria-labelledby="transition-modal-title"
-        aria-describedby="transition-modal-description"
-        open={open}
-        onClose={handleClose}
-        closeAfterTransition
-        slots={{ backdrop: Backdrop }}
-      >
-        <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: 16 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </span>
-          </Box>
-        </Fade>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
index 35b7ab07d2602e..581258ae3d4cc5 100644
--- a/docs/data/base/components/modal/TransitionsModal.tsx
+++ b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -4,6 +4,35 @@ import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 import Button from '@mui/base/ButtonUnstyled';
 
+export default function TransitionsModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <h2 id="transition-modal-title">Text in a modal</h2>
+            <span id="transition-modal-description" style={{ marginTop: 16 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </span>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef<HTMLDivElement, { open?: boolean }>(
   (props, ref) => {
     const { open, ...other } = props;
@@ -49,32 +78,3 @@ const style = (theme: Theme) => ({
   boxShadow: 24,
   padding: '16px 32px 24px 32px',
 });
-
-export default function TransitionsModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        aria-labelledby="transition-modal-title"
-        aria-describedby="transition-modal-description"
-        open={open}
-        onClose={handleClose}
-        closeAfterTransition
-        slots={{ backdrop: Backdrop }}
-      >
-        <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: 16 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </span>
-          </Box>
-        </Fade>
-      </Modal>
-    </div>
-  );
-}

From c572b3181f02421d707a2f686d8856abfdc1e3d7 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 3 Apr 2023 16:53:43 +0530
Subject: [PATCH 2/5] Update
 docs/data/base/components/modal/KeepMountedModal.tsx

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 docs/data/base/components/modal/KeepMountedModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
index a0bb6c68ebf33c..bebb7a212475b5 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { styled, Box, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 
-export default function ModalUnstyledDemo() {
+export default function KeepMountedModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);

From f107bb9bff3821db181b9f72008c1fa884bbabda Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 3 Apr 2023 16:54:23 +0530
Subject: [PATCH 3/5] Update
 docs/data/base/components/modal/KeepMountedModal.js

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 docs/data/base/components/modal/KeepMountedModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index 5e2ca2d0c492a0..10027a57d3bffb 100644
--- a/docs/data/base/components/modal/KeepMountedModal.js
+++ b/docs/data/base/components/modal/KeepMountedModal.js
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 
-export default function ModalUnstyledDemo() {
+export default function KeepMountedModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);

From 4991a3bbea7ea7467fe1e1f1952fb43f0611d62d Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 12 Apr 2023 09:54:44 +0200
Subject: [PATCH 4/5] Update NestedModal.tsx

Signed-off-by: Marija Najdova <mnajdova@gmail.com>
---
 .../base/components/modal/NestedModal.tsx     | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index 78b0a84f4414d2..ca0d2901fcaf9f 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -4,7 +4,7 @@ import { styled, Box, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
-function ChildModal() {
+export default function NestedModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
     setOpen(true);
@@ -14,28 +14,28 @@ function ChildModal() {
   };
 
   return (
-    <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
-        aria-labelledby="child-modal-title"
-        aria-describedby="child-modal-description"
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-modal-description"
         slots={{ backdrop: Backdrop }}
       >
-        <Box sx={[style, { width: '200px' }]}>
-          <h2 id="child-modal-title">Text in a child modal</h2>
-          <p id="child-modal-description">
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        <Box sx={style}>
+          <h2 id="parent-modal-title">Text in a modal</h2>
+          <p id="parent-modal-description">
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
+          <ChildModal />
         </Box>
       </Modal>
-    </React.Fragment>
+    </div>
   );
 }
 
-export default function NestedModal() {
+function ChildModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
     setOpen(true);
@@ -45,24 +45,24 @@ export default function NestedModal() {
   };
 
   return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+    <React.Fragment>
+      <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
-        aria-labelledby="parent-modal-title"
-        aria-describedby="parent-modal-description"
+        aria-labelledby="child-modal-title"
+        aria-describedby="child-modal-description"
         slots={{ backdrop: Backdrop }}
       >
-        <Box sx={style}>
-          <h2 id="parent-modal-title">Text in a modal</h2>
-          <p id="parent-modal-description">
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+        <Box sx={[style, { width: '200px' }]}>
+          <h2 id="child-modal-title">Text in a child modal</h2>
+          <p id="child-modal-description">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
-          <ChildModal />
+          <Button onClick={handleClose}>Close Child Modal</Button>
         </Box>
       </Modal>
-    </div>
+    </React.Fragment>
   );
 }
 

From 60796e0c8a1032475f1e61ca8a37861b6b48ac93 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 12 Apr 2023 09:55:01 +0200
Subject: [PATCH 5/5] Update NestedModal.js

Signed-off-by: Marija Najdova <mnajdova@gmail.com>
---
 .../data/base/components/modal/NestedModal.js | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index 88a3c43c47eab0..01af4585a2046b 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -5,7 +5,7 @@ import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
-function ChildModal() {
+export default function NestedModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
     setOpen(true);
@@ -15,28 +15,28 @@ function ChildModal() {
   };
 
   return (
-    <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
-        aria-labelledby="child-modal-title"
-        aria-describedby="child-modal-description"
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-modal-description"
         slots={{ backdrop: Backdrop }}
       >
-        <Box sx={[style, { width: '200px' }]}>
-          <h2 id="child-modal-title">Text in a child modal</h2>
-          <p id="child-modal-description">
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        <Box sx={style}>
+          <h2 id="parent-modal-title">Text in a modal</h2>
+          <p id="parent-modal-description">
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
+          <ChildModal />
         </Box>
       </Modal>
-    </React.Fragment>
+    </div>
   );
 }
 
-export default function NestedModal() {
+function ChildModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
     setOpen(true);
@@ -46,24 +46,24 @@ export default function NestedModal() {
   };
 
   return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+    <React.Fragment>
+      <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
-        aria-labelledby="parent-modal-title"
-        aria-describedby="parent-modal-description"
+        aria-labelledby="child-modal-title"
+        aria-describedby="child-modal-description"
         slots={{ backdrop: Backdrop }}
       >
-        <Box sx={style}>
-          <h2 id="parent-modal-title">Text in a modal</h2>
-          <p id="parent-modal-description">
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+        <Box sx={[style, { width: '200px' }]}>
+          <h2 id="child-modal-title">Text in a child modal</h2>
+          <p id="child-modal-description">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
-          <ChildModal />
+          <Button onClick={handleClose}>Close Child Modal</Button>
         </Box>
       </Modal>
-    </div>
+    </React.Fragment>
   );
 }