diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index 546d1e24fc3de8..10027a57d3bffb 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 KeepMountedModal() {
+  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..bebb7a212475b5 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 KeepMountedModal() {
+  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..01af4585a2046b 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -5,6 +5,68 @@ import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
+export default function NestedModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-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.
+          </p>
+          <ChildModal />
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
+function ChildModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleOpen}>Open Child Modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="child-modal-title"
+        aria-describedby="child-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.
+          </p>
+          <Button onClick={handleClose}>Close Child Modal</Button>
+        </Box>
+      </Modal>
+    </React.Fragment>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef((props, ref) => {
   const { open, className, ...other } = props;
   return (
@@ -54,65 +116,3 @@ const style = (theme) => ({
   border: '2px solid currentColor',
   padding: '16px 32px 24px 32px',
 });
-
-function ChildModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="child-modal-title"
-        aria-describedby="child-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.
-          </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
-        </Box>
-      </Modal>
-    </React.Fragment>
-  );
-}
-
-export default function NestedModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="parent-modal-title"
-        aria-describedby="parent-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.
-          </p>
-          <ChildModal />
-        </Box>
-      </Modal>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index 244ef3ac6bd126..ca0d2901fcaf9f 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -4,6 +4,68 @@ import { styled, Box, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
+export default function NestedModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-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.
+          </p>
+          <ChildModal />
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
+function ChildModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleOpen}>Open Child Modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="child-modal-title"
+        aria-describedby="child-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.
+          </p>
+          <Button onClick={handleClose}>Close Child Modal</Button>
+        </Box>
+      </Modal>
+    </React.Fragment>
+  );
+}
+
 const BackdropUnstyled = React.forwardRef<
   HTMLDivElement,
   { open?: boolean; className: string }
@@ -51,65 +113,3 @@ const style = (theme: Theme) => ({
   border: '2px solid currentColor',
   padding: '16px 32px 24px 32px',
 });
-
-function ChildModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="child-modal-title"
-        aria-describedby="child-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.
-          </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
-        </Box>
-      </Modal>
-    </React.Fragment>
-  );
-}
-
-export default function NestedModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="parent-modal-title"
-        aria-describedby="parent-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.
-          </p>
-          <ChildModal />
-        </Box>
-      </Modal>
-    </div>
-  );
-}
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>
-  );
-}