From bf91e75da449ad2f3867e68be096376f17fd85a7 Mon Sep 17 00:00:00 2001 From: dav-is Date: Fri, 20 Feb 2026 16:52:43 -0500 Subject: [PATCH 001/140] First demo loaded into page --- .../components/buttons/BasicButtons.demo.ts | 4 + .../components/buttons/BasicButtons.js | 12 - .../components/buttons/BasicButtons.tsx | 4 + .../buttons/BasicButtons.tsx.preview | 3 - .../data/material/components/buttons/Test.tsx | 3 + .../material/components/buttons/buttons.md | 2 +- docs/next.config.ts | 7 + docs/package.json | 1 + docs/src/modules/components/DemoContent.tsx | 356 ++++++++++++++ docs/src/modules/utils/createDemo.ts | 28 ++ pnpm-lock.yaml | 444 +++++++++++++++++- 11 files changed, 827 insertions(+), 37 deletions(-) create mode 100644 docs/data/material/components/buttons/BasicButtons.demo.ts delete mode 100644 docs/data/material/components/buttons/BasicButtons.js delete mode 100644 docs/data/material/components/buttons/BasicButtons.tsx.preview create mode 100644 docs/data/material/components/buttons/Test.tsx create mode 100644 docs/src/modules/components/DemoContent.tsx create mode 100644 docs/src/modules/utils/createDemo.ts diff --git a/docs/data/material/components/buttons/BasicButtons.demo.ts b/docs/data/material/components/buttons/BasicButtons.demo.ts new file mode 100644 index 00000000000000..81dfeaac0827f7 --- /dev/null +++ b/docs/data/material/components/buttons/BasicButtons.demo.ts @@ -0,0 +1,4 @@ +import { createDemo } from 'docs/src/modules/utils/createDemo'; +import BasicButtons from './BasicButtons'; + +export default createDemo(import.meta.url, BasicButtons); diff --git a/docs/data/material/components/buttons/BasicButtons.js b/docs/data/material/components/buttons/BasicButtons.js deleted file mode 100644 index 956f6ef3b896a6..00000000000000 --- a/docs/data/material/components/buttons/BasicButtons.js +++ /dev/null @@ -1,12 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -export default function BasicButtons() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/buttons/BasicButtons.tsx b/docs/data/material/components/buttons/BasicButtons.tsx index 956f6ef3b896a6..d34e3f80a9e8ed 100644 --- a/docs/data/material/components/buttons/BasicButtons.tsx +++ b/docs/data/material/components/buttons/BasicButtons.tsx @@ -1,12 +1,16 @@ import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; +import Test from './Test'; export default function BasicButtons() { return ( + {/* @highlight-start */} + + {/* @highlight-end */} ); } diff --git a/docs/data/material/components/buttons/BasicButtons.tsx.preview b/docs/data/material/components/buttons/BasicButtons.tsx.preview deleted file mode 100644 index 000b68430942cb..00000000000000 --- a/docs/data/material/components/buttons/BasicButtons.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/Test.tsx b/docs/data/material/components/buttons/Test.tsx new file mode 100644 index 00000000000000..bc65ca63cf302a --- /dev/null +++ b/docs/data/material/components/buttons/Test.tsx @@ -0,0 +1,3 @@ +export default function Test() { + return
Test
; +} diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index f6f2d5b4d12b96..4c542af265ff56 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -25,7 +25,7 @@ Buttons communicate actions that users can take. They are typically placed throu The `Button` comes with three variants: text (default), contained, and outlined. -{{"demo": "BasicButtons.js"}} +{{"component": "../data/material/components/buttons/BasicButtons.demo.ts"}} ### Text button diff --git a/docs/next.config.ts b/docs/next.config.ts index eb0621d6dc3840..f72f5ad631524d 100644 --- a/docs/next.config.ts +++ b/docs/next.config.ts @@ -166,6 +166,13 @@ export default withDocsInfra({ }, ], }, + { + test: /\.demo\.ts$/, + use: [ + options.defaultLoaders.babel, + '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter', + ], + }, // required to transpile ../packages/ { test: /\.(js|mjs|tsx|ts)$/, diff --git a/docs/package.json b/docs/package.json index 400baecc41cf96..3e4ccdd118b932 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,6 +31,7 @@ "@mui/base": "5.0.0-beta.70", "@mui/docs": "workspace:*", "@mui/icons-material": "workspace:*", + "@mui/internal-docs-infra": "0.4.1-canary.9", "@mui/internal-markdown": "workspace:^", "@mui/joy": "workspace:*", "@mui/lab": "workspace:*", diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx new file mode 100644 index 00000000000000..fecd50c43ba1f2 --- /dev/null +++ b/docs/src/modules/components/DemoContent.tsx @@ -0,0 +1,356 @@ +import * as React from 'react'; +import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types'; +import { useDemo } from '@mui/internal-docs-infra/useDemo'; +import Box from '@mui/material/Box'; +import Collapse from '@mui/material/Collapse'; +import IconButton from '@mui/material/IconButton'; +import MDButton from '@mui/material/Button'; +import MDToggleButton from '@mui/material/ToggleButton'; +import MDToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import Tooltip from '@mui/material/Tooltip'; +import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'; +import { alpha, styled } from '@mui/material/styles'; +import { useTranslate } from '@mui/docs/i18n'; + +import '@wooorm/starry-night/style/light'; + +// --------------------------------------------------------------------------- +// Styled components — ported from Demo.js, DemoToolbarRoot.ts, DemoToolbar.js +// --------------------------------------------------------------------------- + +const Root = styled('div')(({ theme }) => ({ + marginBottom: 24, + marginLeft: theme.spacing(-2), + marginRight: theme.spacing(-2), + [theme.breakpoints.up('sm')]: { + marginLeft: 0, + marginRight: 0, + }, +})); + +const DemoPreview = styled('div')(({ theme }) => ({ + position: 'relative', + margin: 'auto', + display: 'flex', + justifyContent: 'center', + padding: theme.spacing(3), + backgroundColor: (theme.vars || theme).palette.background.paper, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + borderLeftWidth: 0, + borderRightWidth: 0, + [theme.breakpoints.up('sm')]: { + borderRadius: '12px 12px 0 0', + borderLeftWidth: 1, + borderRightWidth: 1, + }, + ...theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.primaryDark[700], 0.1), + }), +})); + +// Matches DemoToolbarRoot.ts — the action-button bar between preview and code. +const ToolbarRoot = styled('div', { + shouldForwardProp: (prop) => prop !== 'codeOpen', +})<{ codeOpen?: boolean }>(({ theme }) => [ + { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + maxHeight: 50, + marginTop: -1, + padding: theme.spacing('2px', 1), + border: `1px solid ${(theme.vars || theme).palette.divider}`, + borderTopWidth: 0, + backgroundColor: alpha(theme.palette.grey[50], 0.2), + borderRadius: '0 0 12px 12px', + transition: theme.transitions.create('border-radius'), + }, + // Icon buttons inside the toolbar + '& .MuiIconButton-root': { + '&:hover': { + backgroundColor: (theme.vars || theme).palette.grey[100], + }, + }, + '& .MuiSvgIcon-root': { + fontSize: 16, + color: (theme.vars || theme).palette.grey[900], + }, + variants: [ + { + props: { codeOpen: true }, + style: { + [theme.breakpoints.up('sm')]: { + borderRadius: 0, + }, + }, + }, + ], + }, + theme.applyDarkStyles({ + [theme.breakpoints.up('sm')]: { + backgroundColor: alpha(theme.palette.primaryDark[800], 0.2), + }, + '& .MuiIconButton-root': { + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + }, + '& .MuiSvgIcon-root': { + color: (theme.vars || theme).palette.grey[400], + }, + }), +]); + +// File tab bar — shown between toolbar and code when there are multiple files. +const FileTabBar = styled('div')(({ theme }) => ({ + display: 'flex', + gap: theme.spacing(0.5), + overflow: 'auto', + marginTop: -1, + padding: theme.spacing(0.5, 1), + border: `1px solid ${(theme.vars || theme).palette.divider}`, + borderTopWidth: 0, + backgroundColor: (theme.vars || theme).palette.background.paper, + [theme.breakpoints.up('sm')]: { + borderLeftWidth: 1, + borderRightWidth: 1, + }, + ...theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), + }), +})); + +const FileTab = styled('button')<{ selected?: boolean }>(({ theme }) => ({ + ...theme.typography.body2, + fontFamily: theme.typography.fontFamilyCode, + fontSize: theme.typography.pxToRem(13), + padding: theme.spacing(0.5, 1), + border: '1px solid transparent', + borderRadius: theme.shape.borderRadius, + cursor: 'pointer', + backgroundColor: 'transparent', + color: (theme.vars || theme).palette.text.secondary, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.action.hover, + }, + variants: [ + { + props: { selected: true }, + style: { + color: (theme.vars || theme).palette.primary[700], + backgroundColor: (theme.vars || theme).palette.primary[50], + borderColor: (theme.vars || theme).palette.primary[200], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[200], + backgroundColor: alpha(theme.palette.primary[900], 0.4), + borderColor: (theme.vars || theme).palette.primary[800], + }), + }, + }, + ], +})); + +// Wraps the already-highlighted code from useDemo — mirrors DemoCodeViewer in Demo.js. +const CodeViewer = styled('div')({ + '& pre': { + margin: 0, + marginTop: -1, + maxHeight: 'min(68vh, 1000px)', + maxWidth: 'initial', + borderRadius: 0, + borderBottomLeftRadius: 12, + borderBottomRightRadius: 12, + }, +}); + +const AnchorLink = styled('div')({ + marginTop: -64, // height of toolbar + position: 'absolute', +}); + +const InitialFocus = styled(IconButton)(({ theme }) => ({ + position: 'absolute', + top: 0, + left: 0, + width: theme.spacing(4), + height: theme.spacing(4), + pointerEvents: 'none', +})); + +// --------------------------------------------------------------------------- +// Toolbar control styling — ported from DemoToolbar.js +// --------------------------------------------------------------------------- + +const ToggleButtonGroup = styled(MDToggleButtonGroup)(({ theme }) => [ + theme.unstable_sx({ + [`& .${toggleButtonGroupClasses.grouped}`]: { + '&:not(:first-of-type)': { pr: '2px' }, + '&:not(:last-of-type)': { pl: '2px' }, + }, + }), +]); + +const ToggleButton = styled(MDToggleButton)(({ theme }) => [ + theme.unstable_sx({ + height: 26, + width: 38, + p: 0, + fontSize: theme.typography.pxToRem(13), + borderRadius: '999px', + '&.Mui-disabled': { + opacity: 0.8, + cursor: 'not-allowed', + }, + }), +]); + +const ToolbarButton = styled(MDButton)(({ theme }) => ({ + height: 26, + padding: '7px 8px 8px 8px', + flexShrink: 0, + borderRadius: 999, + border: '1px solid', + borderColor: alpha(theme.palette.grey[200], 0.8), + fontSize: theme.typography.pxToRem(13), + fontWeight: theme.typography.fontWeightMedium, + color: theme.palette.primary[600], + '& .MuiSvgIcon-root': { + color: theme.palette.primary.main, + }, + '&:hover': { + backgroundColor: theme.palette.primary[50], + borderColor: theme.palette.primary[200], + '@media (hover: none)': { backgroundColor: 'transparent' }, + }, + ...theme.applyDarkStyles({ + color: theme.palette.primary[300], + borderColor: alpha(theme.palette.primary[300], 0.2), + '& .MuiSvgIcon-root': { color: theme.palette.primary[300] }, + '&:hover': { + borderColor: alpha(theme.palette.primary[300], 0.5), + backgroundColor: alpha(theme.palette.primary[500], 0.2), + '@media (hover: none)': { backgroundColor: 'transparent' }, + }, + }), +})); + +function DemoTooltip(props: React.ComponentProps) { + return ( + theme.zIndex.appBar - 1 }, + }, + }} + {...props} + /> + ); +} + +// --------------------------------------------------------------------------- +// Component +// --------------------------------------------------------------------------- + +export default function DemoContent(props: ContentProps) { + const demo = useDemo(props); + const t = useTranslate(); + const [codeOpen, setCodeOpen] = React.useState(Boolean(demo.expanded)); + + const hasJsTransform = demo.availableTransforms.includes('js'); + const isJsSelected = demo.selectedTransform === 'js'; + + const handleLanguageClick = React.useCallback( + (_event: React.MouseEvent, value: string | null) => { + if (value !== null) { + demo.selectTransform(value === 'js' ? 'js' : null); + } + }, + [demo], + ); + + const showCodeLabel = codeOpen ? t('hideSource') : t('showSource'); + + return ( + + {demo.slug && } + + {/* Component Preview */} + + + {demo.component} + + + {/* Toolbar — hidden on mobile, matches DemoToolbarRoot */} + + {/* Left side: JS/TS toggle (only visible when code is open) */} + {codeOpen && hasJsTransform ? ( + + + JS + + + TS + + + ) : ( +
+ )} + + {/* Right side: action buttons */} + + {/* Variant selector */} + {demo.variants.length > 1 && ( + { + const idx = demo.variants.indexOf(demo.selectedVariant); + demo.selectVariant(demo.variants[(idx + 1) % demo.variants.length]); + }} + > + {demo.selectedVariant} + + )} + + {/* Show / hide code */} + setCodeOpen((prev) => !prev)}> + {showCodeLabel} + + + {/* Copy */} + + + + + + + + + {/* File tabs — only when multiple files and code is visible */} + {demo.files.length > 1 && codeOpen ? ( + + {demo.files.map((file) => ( + demo.selectFileName(file.name)} + > + {file.name} + + ))} + + ) : null} + + {/* Code — animated open/close */} + + {demo.selectedFile} + + + ); +} diff --git a/docs/src/modules/utils/createDemo.ts b/docs/src/modules/utils/createDemo.ts new file mode 100644 index 00000000000000..ef81c265ff198c --- /dev/null +++ b/docs/src/modules/utils/createDemo.ts @@ -0,0 +1,28 @@ +import { + createDemoFactory, + createDemoWithVariantsFactory, +} from '@mui/internal-docs-infra/abstractCreateDemo'; + +// eslint-disable-next-line import/extensions +import DemoContent from '../components/DemoContent'; + +/** + * Creates a demo component for displaying code examples with syntax highlighting. + * @param url Depends on `import.meta.url` to determine the source file location. + * @param component The component to be rendered in the demo. + * @param meta Additional meta for the demo. + */ +export const createDemo = createDemoFactory({ + DemoContent, +}); + +/** + * Creates a demo component for displaying code examples with syntax highlighting. + * A variant is a different implementation style of the same component. + * @param url Depends on `import.meta.url` to determine the source file location. + * @param variants The variants of the component to be rendered in the demo. + * @param meta Additional meta for the demo. + */ +export const createDemoWithVariants = createDemoWithVariantsFactory({ + DemoContent, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f806cd7d676e00..5a18bd3f7eaaf2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -243,7 +243,7 @@ importers: version: 0.10.1(@vitest/utils@4.0.15)(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13) webpack: specifier: 5.105.2 - version: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + version: 5.105.2(webpack-cli@6.0.1) webpack-cli: specifier: 6.0.1 version: 6.0.1(webpack@5.105.2) @@ -295,6 +295,9 @@ importers: '@mui/icons-material': specifier: workspace:* version: link:../packages/mui-icons-material/build + '@mui/internal-docs-infra': + specifier: 0.4.1-canary.9 + version: 0.4.1-canary.9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4) '@mui/internal-markdown': specifier: workspace:^ version: link:../packages/markdown @@ -1627,7 +1630,7 @@ importers: version: 3.3.3 html-webpack-plugin: specifier: 5.6.6 - version: 5.6.6(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))) + version: 5.6.6(webpack@5.105.2(webpack-cli@6.0.1)) prop-types: specifier: 15.8.1 version: 15.8.1 @@ -1660,7 +1663,7 @@ importers: version: 1.6.28 webpack: specifier: 5.105.2 - version: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + version: 5.105.2(webpack-cli@6.0.1) yargs: specifier: 17.7.2 version: 17.7.2 @@ -2610,6 +2613,10 @@ packages: resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==} engines: {node: '>=6.9.0'} + '@babel/standalone@7.29.1': + resolution: {integrity: sha512-z42abD0C6fiHfgLyCWw8PYv6FCJ0IGVtSCxXk/NPykWO5LNIEGfdLDJ3HdYqlPcAhwtQ3oKH1PvNj2JGpTxQKg==} + engines: {node: '>=6.9.0'} + '@babel/template@7.28.6': resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==} engines: {node: '>=6.9.0'} @@ -2747,6 +2754,9 @@ packages: resolution: {integrity: sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==} engines: {node: '>=14.17.0'} + '@dmsnell/diff-match-patch@1.1.0': + resolution: {integrity: sha512-yejLPmM5pjsGvxS9gXablUSbInW7H976c/FJ4iQxWIm7/38xBySRemTPDe34lhg1gVLbJntX0+sH0jYfU+PN9A==} + '@docsearch/css@3.9.0': resolution: {integrity: sha512-cQbnVbq0rrBwNAKegIac/t6a8nWoUAn8frnkLFW6YARaRmAQr5/Eoe6Ln2fqkUCZ40KpdrKbpSAmgrkviOxuWA==} @@ -3706,6 +3716,23 @@ packages: typescript: optional: true + '@mui/internal-docs-infra@0.4.1-canary.9': + resolution: {integrity: sha512-B761GiFwpMNsE0FifRACFrFblnY3TZyKyCfRln7YfEChAsykPZchhqImyhYNKaSw/PwUyivEDLQqWfNDc9KdUg==} + engines: {node: '>=22.12.0'} + hasBin: true + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + next: ^15.0.0 || ^16.0.0 + prettier: ^3.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + next: + optional: true + prettier: + optional: true + '@mui/internal-netlify-cache@0.0.3-canary.0': resolution: {integrity: sha512-5QPmAEpzgMTNe6djyApxiczzDUDy71iRk19w0EFfzknDo3hzz4DmFvaSFXUrEDk2KUDlVwdZ7qhODMbHB88hcw==} @@ -4710,6 +4737,21 @@ packages: resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==} engines: {node: '>=8.0.0'} + '@orama/orama@3.1.18': + resolution: {integrity: sha512-a61ljmRVVyG5MC/698C8/FfFDw5a8LOIvyOLW5fztgUXqUpc1jOfQzOitSCbge657OgXXThmY3Tk8fpiDb4UcA==} + engines: {node: '>= 20.0.0'} + + '@orama/plugin-qps@3.1.18': + resolution: {integrity: sha512-q19pFGF1jRk+dGR4j/4MscCACtZo6DKO8ZjnM3AWJICzjWVYJYBvlGuD2+Jt079iUW04cGh4EpMw5WxaTpZQCw==} + + '@orama/stemmers@3.1.18': + resolution: {integrity: sha512-xXs5fpiUvBs4jJZtnayJmUSomdxxiwwwvTbAzPHSyI6geLM7bxXHgpVlYz4JeMBycHX8bHF7j9m7F35BxhuZ8g==} + engines: {node: '>= 20.0.0'} + + '@orama/stopwords@3.1.18': + resolution: {integrity: sha512-W8V7m7RnCme+99OmKl/xs5rf6OUhFpr0aPGVmPrXzTLSg4ZqSbRY2euS2S/lgjjYi/0NhEWqwoq8nDY6Ihx4EA==} + engines: {node: '>= 20.0.0'} + '@pigment-css/react@0.0.30': resolution: {integrity: sha512-aNvpOgbv+M9+YV2wKk3CIyiiiF+8S6KJJKDKGzhFWOVWeQFZBgTOjBHhL/0SyAnCOVjDg2sSXOEElIdEQywXKQ==} engines: {node: '>=14.0.0'} @@ -5408,6 +5450,9 @@ packages: '@types/eslint@8.56.12': resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==} + '@types/estree-jsx@1.0.5': + resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} + '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} @@ -5908,6 +5953,9 @@ packages: webpack-dev-server: optional: true + '@wooorm/starry-night@3.9.0': + resolution: {integrity: sha512-LXVGKfYhTuFhoRuPAHz2XolS/J45L4lI/lCSIBugDpklXYDUPrJyA8tk17u7G32fcFaGODJXH/YDwQDfUXdPRw==} + '@wyw-in-js/processor-utils@0.5.5': resolution: {integrity: sha512-L3IcAfoowhM0fw9Cnv2CNzfjWNLKpYl2CFqam6NvwpiXNR1kXz/GpO0AOiKvCs5h4Ps5kWxE2e8knXLpk8q/2g==} engines: {node: '>=16.0.0'} @@ -7598,6 +7646,12 @@ packages: resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==} engines: {node: '>=8.3.0'} + estree-util-is-identifier-name@3.0.0: + resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==} + + estree-util-visit@2.0.0: + resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} + estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} @@ -8144,12 +8198,21 @@ packages: hast-util-heading-rank@3.0.0: resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + hast-util-is-element@3.0.0: + resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + hast-util-to-html@9.0.5: resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} + hast-util-to-jsx-runtime@2.3.6: + resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==} + hast-util-to-string@3.0.1: resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} + hast-util-to-text@4.0.2: + resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} + hast-util-whitespace@3.0.0: resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} @@ -8357,6 +8420,9 @@ packages: resolution: {integrity: sha512-pXVMn67Jdw2hPKLCuJZj62NC9B2OIDd1R3JwZXTHXuEnfN3Uq5kJbKOSld6YEU+KOGfMD82EzxFTYz5o0SSJoA==} engines: {node: ^20.17.0 || >=22.9.0} + inline-style-parser@0.2.7: + resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==} + inquirer@12.9.6: resolution: {integrity: sha512-603xXOgyfxhuis4nfnWaZrMaotNT0Km9XwwBNWUKbIDqeCY89jGr2F9YPEMiNhU6XjIP4VoWISMBFfcc5NgrTw==} engines: {node: '>=18'} @@ -8835,6 +8901,11 @@ packages: jsonc-parser@3.3.1: resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==} + jsondiffpatch@0.7.3: + resolution: {integrity: sha512-zd4dqFiXSYyant2WgSXAZ9+yYqilNVvragVNkNRn2IFZKgjyULNrKRznqN4Zon0MkLueCg+3QaPVCnDAVP20OQ==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} @@ -8909,6 +8980,9 @@ packages: resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==} hasBin: true + kebab-case@2.0.2: + resolution: {integrity: sha512-NhIP7vecGtqJfNZ85ct0yRQfx//gCJHapJCBZP6/BBcBw/U218Jw7YX7rO6TI5/cCp5dJvlIjN3vbcRTqq7nWA==} + keycode@2.2.1: resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==} @@ -9293,6 +9367,18 @@ packages: mdast-util-gfm@3.1.0: resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + mdast-util-mdx-expression@2.0.1: + resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} + + mdast-util-mdx-jsx@3.2.0: + resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==} + + mdast-util-mdx@3.0.0: + resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==} + + mdast-util-mdxjs-esm@2.0.1: + resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==} + mdast-util-phrasing@4.1.0: resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} @@ -9381,12 +9467,30 @@ packages: micromark-extension-math@3.1.0: resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==} + micromark-extension-mdx-expression@3.0.1: + resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==} + + micromark-extension-mdx-jsx@3.0.2: + resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==} + + micromark-extension-mdx-md@2.0.0: + resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==} + + micromark-extension-mdxjs-esm@3.0.0: + resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==} + + micromark-extension-mdxjs@3.0.0: + resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} + micromark-factory-destination@2.0.0: resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==} micromark-factory-label@2.0.0: resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==} + micromark-factory-mdx-expression@2.0.3: + resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==} + micromark-factory-space@2.0.0: resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==} @@ -9417,6 +9521,9 @@ packages: micromark-util-encode@2.0.0: resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==} + micromark-util-events-to-acorn@2.0.3: + resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==} + micromark-util-html-tag-name@2.0.0: resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==} @@ -10142,6 +10249,9 @@ packages: resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==} engines: {node: '>=12'} + path-module@0.1.2: + resolution: {integrity: sha512-cTjW9/Abi9N7X4RMIgtXv6QWulZ2CpBg8LbgnlfkgrtxDtamAEYkWQajWyIKVMa239om2+Wmw9Uzba8YaJxy+w==} + path-parse@1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} @@ -10408,6 +10518,9 @@ packages: prop-types@15.8.1: resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + proper-lockfile@4.1.2: + resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==} + property-information@7.1.0: resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} @@ -10736,6 +10849,9 @@ packages: remark-gfm@4.0.1: resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + remark-mdx@3.1.1: + resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==} + remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} @@ -11286,6 +11402,12 @@ packages: stubborn-fs@1.2.5: resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==} + style-to-js@1.1.21: + resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==} + + style-to-object@1.0.14: + resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==} + styled-components@6.3.9: resolution: {integrity: sha512-J72R4ltw0UBVUlEjTzI0gg2STOqlI9JBhQOL4Dxt7aJOnnSesy0qJDn4PYfMCafk9cWOaVg129Pesl5o+DIh0Q==} engines: {node: '>= 16'} @@ -11705,6 +11827,9 @@ packages: engines: {node: '>=0.8.0'} hasBin: true + uint8-to-base64@0.2.1: + resolution: {integrity: sha512-uO/84GaoDUfiAxpa8EksjVLE77A9Kc7ZTziN4zRpq4de9yLaLcZn3jx1/sVjyupsywcVX6RKWbqLe7gUNyzH+Q==} + unbox-primitive@1.1.0: resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==} engines: {node: '>= 0.4'} @@ -11751,9 +11876,15 @@ packages: resolution: {integrity: sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==} engines: {node: ^18.17.0 || >=20.5.0} + unist-util-find-after@5.0.0: + resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==} + unist-util-is@6.0.0: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + unist-util-position-from-estree@2.0.0: + resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} @@ -11961,6 +12092,12 @@ packages: jsdom: optional: true + vscode-oniguruma@2.0.1: + resolution: {integrity: sha512-poJU8iHIWnC3vgphJnrLZyI3YdqRlR27xzqDmpPXYzA93R4Gk8z7T6oqDzDoHjoikA2aS82crdXFkjELCdJsjQ==} + + vscode-textmate@9.3.2: + resolution: {integrity: sha512-n2uGbUcrjhUEBH16uGA0TvUfhWwliFZ1e3+pTjrkim1Mt7ydB41lV08aUvsi70OlzDWp6X7Bx3w/x3fAXIsN0Q==} + w3c-xmlserializer@5.0.0: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} @@ -13821,6 +13958,8 @@ snapshots: '@babel/runtime@7.28.6': {} + '@babel/standalone@7.29.1': {} + '@babel/template@7.28.6': dependencies: '@babel/code-frame': 7.28.6 @@ -13956,6 +14095,8 @@ snapshots: '@discoveryjs/json-ext@0.6.3': {} + '@dmsnell/diff-match-patch@1.1.0': {} + '@docsearch/css@3.9.0': {} '@docsearch/react@3.9.0(@algolia/client-search@5.18.0)(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(search-insights@2.13.0)': @@ -15011,6 +15152,40 @@ snapshots: - supports-color - vitest + '@mui/internal-docs-infra@0.4.1-canary.9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)': + dependencies: + '@babel/runtime': 7.28.6 + '@babel/standalone': 7.29.1 + '@orama/orama': 3.1.18 + '@orama/plugin-qps': 3.1.18 + '@orama/stemmers': 3.1.18 + '@orama/stopwords': 3.1.18 + '@wooorm/starry-night': 3.9.0 + chalk: 5.6.2 + clipboard-copy: 4.0.1 + fflate: 0.8.2 + hast-util-to-jsx-runtime: 2.3.6 + hast-util-to-text: 4.0.2 + jsondiffpatch: 0.7.3 + kebab-case: 2.0.2 + lz-string: 1.5.0 + path-module: 0.1.2 + proper-lockfile: 4.1.2 + react: 19.2.4 + remark-mdx: 3.1.1 + remark-parse: 11.0.0 + uint8-to-base64: 0.2.1 + unified: 11.0.5 + unist-util-visit: 5.1.0 + vscode-oniguruma: 2.0.1 + yargs: 18.0.0 + optionalDependencies: + '@types/react': 19.2.14 + next: 15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + prettier: 3.8.1 + transitivePeerDependencies: + - supports-color + '@mui/internal-netlify-cache@0.0.3-canary.0': {} '@mui/internal-test-utils@2.0.18-canary.8(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.15)(chai@6.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13)': @@ -16038,6 +16213,16 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true + '@orama/orama@3.1.18': {} + + '@orama/plugin-qps@3.1.18': + dependencies: + '@orama/orama': 3.1.18 + + '@orama/stemmers@3.1.18': {} + + '@orama/stopwords@3.1.18': {} + '@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.4)(typescript@5.9.3)': dependencies: '@babel/core': 7.28.6 @@ -16857,6 +17042,10 @@ snapshots: '@types/estree': 1.0.8 '@types/json-schema': 7.0.15 + '@types/estree-jsx@1.0.5': + dependencies: + '@types/estree': 1.0.8 + '@types/estree@1.0.8': {} '@types/express-serve-static-core@5.1.1': @@ -17411,21 +17600,28 @@ snapshots: '@webassemblyjs/ast': 1.14.1 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)': + '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)': dependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-cli: 6.0.1(webpack@5.105.2) - '@webpack-cli/info@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)': + '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)': dependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-cli: 6.0.1(webpack@5.105.2) - '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)': + '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)': dependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-cli: 6.0.1(webpack@5.105.2) + '@wooorm/starry-night@3.9.0': + dependencies: + '@types/hast': 3.0.4 + import-meta-resolve: 4.2.0 + vscode-oniguruma: 2.0.1 + vscode-textmate: 9.3.2 + '@wyw-in-js/processor-utils@0.5.5': dependencies: '@babel/generator': 7.28.6 @@ -17800,7 +17996,7 @@ snapshots: dependencies: '@babel/core': 7.28.6 find-up: 5.0.0 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) babel-merge@3.0.0(@babel/core@7.28.6): dependencies: @@ -19173,7 +19369,7 @@ snapshots: lodash: 4.17.21 resolve: 2.0.0-next.5 semver: 5.7.2 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) transitivePeerDependencies: - supports-color @@ -19397,6 +19593,13 @@ snapshots: transitivePeerDependencies: - supports-color + estree-util-is-identifier-name@3.0.0: {} + + estree-util-visit@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/unist': 3.0.2 + estree-walker@3.0.3: dependencies: '@types/estree': 1.0.8 @@ -20028,6 +20231,10 @@ snapshots: dependencies: '@types/hast': 3.0.4 + hast-util-is-element@3.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-to-html@9.0.5: dependencies: '@types/hast': 3.0.4 @@ -20042,10 +20249,37 @@ snapshots: stringify-entities: 4.0.4 zwitch: 2.0.4 + hast-util-to-jsx-runtime@2.3.6: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.21 + unist-util-position: 5.0.0 + vfile-message: 4.0.2 + transitivePeerDependencies: + - supports-color + hast-util-to-string@3.0.1: dependencies: '@types/hast': 3.0.4 + hast-util-to-text@4.0.2: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + hast-util-is-element: 3.0.0 + unist-util-find-after: 5.0.0 + hast-util-whitespace@3.0.0: dependencies: '@types/hast': 3.0.4 @@ -20121,7 +20355,7 @@ snapshots: html-void-elements@3.0.0: {} - html-webpack-plugin@5.6.6(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))): + html-webpack-plugin@5.6.6(webpack@5.105.2(webpack-cli@6.0.1)): dependencies: '@types/html-minifier-terser': 6.1.0 html-minifier-terser: 6.1.0 @@ -20129,7 +20363,7 @@ snapshots: pretty-error: 4.0.0 tapable: 2.3.0 optionalDependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) htmlparser2@6.1.0: dependencies: @@ -20256,6 +20490,8 @@ snapshots: validate-npm-package-license: 3.0.4 validate-npm-package-name: 6.0.2 + inline-style-parser@0.2.7: {} + inquirer@12.9.6(@types/node@20.19.33): dependencies: '@inquirer/ansi': 1.0.2 @@ -20733,6 +20969,10 @@ snapshots: jsonc-parser@3.3.1: {} + jsondiffpatch@0.7.3: + dependencies: + '@dmsnell/diff-match-patch': 1.1.0 + jsonfile@6.1.0: dependencies: universalify: 2.0.0 @@ -20842,6 +21082,8 @@ snapshots: dependencies: commander: 8.3.0 + kebab-case@2.0.2: {} + keycode@2.2.1: {} keyv@4.5.4: @@ -21344,6 +21586,55 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-mdx-expression@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.1 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx-jsx@3.2.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@types/unist': 3.0.2 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.1 + mdast-util-to-markdown: 2.1.0 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx@3.0.0: + dependencies: + mdast-util-from-markdown: 2.0.1 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + + mdast-util-mdxjs-esm@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.1 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + mdast-util-phrasing@4.1.0: dependencies: '@types/mdast': 4.0.4 @@ -21513,6 +21804,57 @@ snapshots: micromark-util-symbol: 2.0.0 micromark-util-types: 2.0.2 + micromark-extension-mdx-expression@3.0.1: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.2 + + micromark-extension-mdx-jsx@3.0.2: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.2 + vfile-message: 4.0.2 + + micromark-extension-mdx-md@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-mdxjs-esm@3.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.2 + + micromark-extension-mdxjs@3.0.0: + dependencies: + acorn: 8.15.0 + acorn-jsx: 5.3.2(acorn@8.15.0) + micromark-extension-mdx-expression: 3.0.1 + micromark-extension-mdx-jsx: 3.0.2 + micromark-extension-mdx-md: 2.0.0 + micromark-extension-mdxjs-esm: 3.0.0 + micromark-util-combine-extensions: 2.0.0 + micromark-util-types: 2.0.2 + micromark-factory-destination@2.0.0: dependencies: micromark-util-character: 2.1.0 @@ -21526,6 +21868,18 @@ snapshots: micromark-util-symbol: 2.0.0 micromark-util-types: 2.0.2 + micromark-factory-mdx-expression@2.0.3: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.2 + micromark-factory-space@2.0.0: dependencies: micromark-util-character: 2.1.0 @@ -21578,6 +21932,16 @@ snapshots: micromark-util-encode@2.0.0: {} + micromark-util-events-to-acorn@2.0.3: + dependencies: + '@types/estree': 1.0.8 + '@types/unist': 3.0.2 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.2 + vfile-message: 4.0.2 + micromark-util-html-tag-name@2.0.0: {} micromark-util-normalize-identifier@2.0.0: @@ -22472,6 +22836,8 @@ snapshots: path-key@4.0.0: {} + path-module@0.1.2: {} + path-parse@1.0.7: {} path-scurry@1.11.1: @@ -22716,6 +23082,12 @@ snapshots: object-assign: 4.1.1 react-is: 16.13.1 + proper-lockfile@4.1.2: + dependencies: + graceful-fs: 4.2.11 + retry: 0.12.0 + signal-exit: 3.0.7 + property-information@7.1.0: {} protocols@2.0.1: {} @@ -23110,6 +23482,13 @@ snapshots: transitivePeerDependencies: - supports-color + remark-mdx@3.1.1: + dependencies: + mdast-util-mdx: 3.0.0 + micromark-extension-mdxjs: 3.0.0 + transitivePeerDependencies: + - supports-color + remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.4 @@ -23780,6 +24159,14 @@ snapshots: stubborn-fs@1.2.5: {} + style-to-js@1.1.21: + dependencies: + style-to-object: 1.0.14 + + style-to-object@1.0.14: + dependencies: + inline-style-parser: 0.2.7 + styled-components@6.3.9(patch_hash=383c648dfdb5dfc82fbe414d54027d8c982a01c6320370f0ecfdb387e753c09f)(react-dom@19.2.4(react@19.2.4))(react@19.2.4): dependencies: '@emotion/is-prop-valid': 1.4.0 @@ -23975,14 +24362,14 @@ snapshots: temp-dir@1.0.0: {} - terser-webpack-plugin@5.3.16(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))): + terser-webpack-plugin@5.3.16(webpack@5.105.2): dependencies: '@jridgewell/trace-mapping': 0.3.31 jest-worker: 27.5.1 schema-utils: 4.3.3 serialize-javascript: 6.0.2 terser: 5.39.0 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) terser@5.39.0: dependencies: @@ -24243,6 +24630,8 @@ snapshots: uglify-js@3.19.3: optional: true + uint8-to-base64@0.2.1: {} + unbox-primitive@1.1.0: dependencies: call-bound: 1.0.4 @@ -24287,10 +24676,19 @@ snapshots: dependencies: imurmurhash: 0.1.4 + unist-util-find-after@5.0.0: + dependencies: + '@types/unist': 3.0.2 + unist-util-is: 6.0.0 + unist-util-is@6.0.0: dependencies: '@types/unist': 3.0.2 + unist-util-position-from-estree@2.0.0: + dependencies: + '@types/unist': 3.0.2 + unist-util-position@5.0.0: dependencies: '@types/unist': 3.0.2 @@ -24513,6 +24911,10 @@ snapshots: - tsx - yaml + vscode-oniguruma@2.0.1: {} + + vscode-textmate@9.3.2: {} + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 @@ -24560,9 +24962,9 @@ snapshots: webpack-cli@6.0.1(webpack@5.105.2): dependencies: '@discoveryjs/json-ext': 0.6.3 - '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2) - '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2) - '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2) + '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2) + '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2) + '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2) colorette: 2.0.20 commander: 12.1.0 cross-spawn: 7.0.6 @@ -24571,7 +24973,7 @@ snapshots: import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-merge: 6.0.1 webpack-merge@6.0.1: @@ -24582,7 +24984,7 @@ snapshots: webpack-sources@3.3.3: {} - webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2)): + webpack@5.105.2(webpack-cli@6.0.1): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.8 @@ -24606,7 +25008,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 4.3.3 tapable: 2.3.0 - terser-webpack-plugin: 5.3.16(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))) + terser-webpack-plugin: 5.3.16(webpack@5.105.2) watchpack: 2.5.1 webpack-sources: 3.3.3 optionalDependencies: From 270ffcb136099aa6799050b34b2618d671695eb4 Mon Sep 17 00:00:00 2001 From: dav-is Date: Mon, 23 Feb 2026 21:54:06 -0500 Subject: [PATCH 002/140] Add syntax theme --- docs/public/static/styles/syntax.css | 289 +++++++++++++++++++ docs/src/modules/components/DemoContent.tsx | 16 +- docs/src/modules/components/ThemeContext.tsx | 1 + 3 files changed, 304 insertions(+), 2 deletions(-) create mode 100644 docs/public/static/styles/syntax.css diff --git a/docs/public/static/styles/syntax.css b/docs/public/static/styles/syntax.css new file mode 100644 index 00000000000000..2d2d920c30c0bb --- /dev/null +++ b/docs/public/static/styles/syntax.css @@ -0,0 +1,289 @@ +/* Syntax highlighting theme using prettylights classes. + * Color values from prism-okaidia (with AA contrast overrides). */ +:root { + /* Core syntax colors (from prism-okaidia) */ + --color-prettylights-syntax-comment: #b2b2b2; + --color-prettylights-syntax-constant: #e6db74; + --color-prettylights-syntax-constant-other-reference-link: #a6e22e; + --color-prettylights-syntax-entity: #a6e22e; + --color-prettylights-syntax-entity-name: #e6db74; + --color-prettylights-syntax-entity-tag: #fc929e; + --color-prettylights-syntax-keyword: #66d9ef; + --color-prettylights-syntax-string: #a6e22e; + --color-prettylights-syntax-string-regexp: #fd971f; + --color-prettylights-syntax-variable: #f8f8f2; + --color-prettylights-syntax-storage-modifier-import: #f8f8f2; + --color-prettylights-syntax-brackethighlighter-angle: #f8f8f2; + --color-prettylights-syntax-brackethighlighter-unmatched: #fc929e; + --color-prettylights-syntax-sublimelinter-gutter-mark: #b2b2b2; + + /* Invalid/error states */ + --color-prettylights-syntax-invalid-illegal-bg: #fc929e; + --color-prettylights-syntax-invalid-illegal-text: #f8f8f2; + --color-prettylights-syntax-carriage-return-bg: #fc929e; + --color-prettylights-syntax-carriage-return-text: #f8f8f2; + + /* Markup/markdown */ + --color-prettylights-syntax-markup-heading: #66d9ef; + --color-prettylights-syntax-markup-bold: #f8f8f2; + --color-prettylights-syntax-markup-italic: #f8f8f2; + --color-prettylights-syntax-markup-list: #fc929e; + --color-prettylights-syntax-markup-changed-bg: transparent; + --color-prettylights-syntax-markup-changed-text: #e6db74; + --color-prettylights-syntax-markup-deleted-bg: transparent; + --color-prettylights-syntax-markup-deleted-text: #fc929e; + --color-prettylights-syntax-markup-inserted-bg: transparent; + --color-prettylights-syntax-markup-inserted-text: #a6e22e; + --color-prettylights-syntax-markup-ignored-bg: transparent; + --color-prettylights-syntax-markup-ignored-text: #b2b2b2; + --color-prettylights-syntax-meta-diff-range: #b78eff; + + /* Docs-infra extensions */ + --color-docs-infra-syntax-nullish: #b2b2b2; + --color-docs-infra-syntax-other: #f8f8f2; + --color-docs-infra-syntax-number: #b78eff; + --color-docs-infra-syntax-boolean: #b78eff; + --color-docs-infra-syntax-attr-value: #e6db74; + --color-docs-infra-syntax-attr-equals: #f8f8f2; + --color-docs-infra-syntax-bracket-tag: #f8f8f2; + --color-docs-infra-syntax-bracket-curly: #f8f8f2; + --color-docs-infra-syntax-bracket-round: #f8f8f2; + --color-docs-infra-syntax-bracket-square: #f8f8f2; + --color-docs-infra-syntax-bracket-angle: #f8f8f2; + --color-docs-infra-syntax-bracket-quote: #f8f8f2; +} + +.pl-c { + color: var(--color-prettylights-syntax-comment); +} + +.pl-c1, +.pl-s .pl-v { + color: var(--color-prettylights-syntax-constant); +} + +.pl-e { + color: var(--color-prettylights-syntax-entity); +} + +.pl-en { + color: var(--color-prettylights-syntax-entity-name); +} + +.pl-smi, +.pl-s .pl-s1 { + color: var(--color-prettylights-syntax-storage-modifier-import); +} + +.pl-ent { + color: var(--color-prettylights-syntax-entity-tag); +} + +.pl-k { + color: var(--color-prettylights-syntax-keyword); +} + +.pl-s, +.pl-pds, +.pl-s .pl-pse .pl-s1, +.pl-sr, +.pl-sr .pl-cce, +.pl-sr .pl-sre, +.pl-sr .pl-sra { + color: var(--color-prettylights-syntax-string); +} + +.pl-v, +.pl-smw { + color: var(--color-prettylights-syntax-variable); +} + +.pl-bu { + color: var(--color-prettylights-syntax-brackethighlighter-unmatched); +} + +.pl-ii { + color: var(--color-prettylights-syntax-invalid-illegal-text); + background-color: var(--color-prettylights-syntax-invalid-illegal-bg); +} + +.pl-c2 { + color: var(--color-prettylights-syntax-carriage-return-text); + background-color: var(--color-prettylights-syntax-carriage-return-bg); +} + +.pl-sr .pl-cce { + font-weight: bold; + color: var(--color-prettylights-syntax-string-regexp); +} + +.pl-ml { + color: var(--color-prettylights-syntax-markup-list); +} + +.pl-mh, +.pl-mh .pl-en, +.pl-ms { + font-weight: bold; + color: var(--color-prettylights-syntax-markup-heading); +} + +.pl-mi { + font-style: italic; + color: var(--color-prettylights-syntax-markup-italic); +} + +.pl-mb { + font-weight: bold; + color: var(--color-prettylights-syntax-markup-bold); +} + +.pl-md { + color: var(--color-prettylights-syntax-markup-deleted-text); + background-color: var(--color-prettylights-syntax-markup-deleted-bg); +} + +.pl-mi1 { + color: var(--color-prettylights-syntax-markup-inserted-text); + background-color: var(--color-prettylights-syntax-markup-inserted-bg); +} + +.pl-mc { + color: var(--color-prettylights-syntax-markup-changed-text); + background-color: var(--color-prettylights-syntax-markup-changed-bg); +} + +.pl-mi2 { + color: var(--color-prettylights-syntax-markup-ignored-text); + background-color: var(--color-prettylights-syntax-markup-ignored-bg); +} + +.pl-mdr { + font-weight: bold; + color: var(--color-prettylights-syntax-meta-diff-range); +} + +.pl-ba { + color: var(--color-prettylights-syntax-brackethighlighter-angle); +} + +.pl-sg { + color: var(--color-prettylights-syntax-sublimelinter-gutter-mark); +} + +.pl-corl { + text-decoration: underline; + color: var(--color-prettylights-syntax-constant-other-reference-link); +} + +/* Docs-infra extensions (.di-* classes) */ + +/* Nullish values (null, undefined) */ +.di-n { + color: var(--color-docs-infra-syntax-nullish); +} + +/* Default text color */ +.di-d { + color: #f8f8f2; +} + +/* Parameter highlighting */ +.di-p { + color: var(--color-prettylights-syntax-storage-modifier-import); +} + +/* Misc/other markup styling */ +.di-o { + color: var(--color-docs-infra-syntax-other); +} + +/* Number literals */ +.di-nu { + color: var(--color-docs-infra-syntax-number); +} + +/* Boolean literals */ +.di-bo { + color: var(--color-docs-infra-syntax-boolean); +} + +/* Attribute values */ +.di-av { + color: var(--color-docs-infra-syntax-attr-value); +} + +/* Attribute equals sign */ +.di-ae { + color: var(--color-docs-infra-syntax-attr-equals); +} + +/* Bracket types */ +.di-bt { + color: var(--color-docs-infra-syntax-bracket-tag); +} + +.di-bc { + color: var(--color-docs-infra-syntax-bracket-curly); +} + +.di-br { + color: var(--color-docs-infra-syntax-bracket-round); +} + +.di-bs { + color: var(--color-docs-infra-syntax-bracket-square); +} + +.di-ba { + color: var(--color-docs-infra-syntax-bracket-angle); +} + +.di-bq { + color: var(--color-docs-infra-syntax-bracket-quote); +} + +/* Diff additions */ +.di-ins { + color: var(--color-prettylights-syntax-markup-inserted-text); + background-color: var(--color-prettylights-syntax-markup-inserted-bg); +} + +/* Diff deletions */ +.di-del { + color: var(--color-prettylights-syntax-markup-deleted-text); + background-color: var(--color-prettylights-syntax-markup-deleted-bg); +} + +/* Diff changes */ +.di-chg { + color: var(--color-prettylights-syntax-markup-changed-text); + background-color: var(--color-prettylights-syntax-markup-changed-bg); +} + +/* Diff ignored/untracked */ +.di-ign { + color: var(--color-prettylights-syntax-markup-ignored-text); + background-color: var(--color-prettylights-syntax-markup-ignored-bg); +} + +/* Diff range indicator */ +.di-rng { + font-weight: bold; + color: var(--color-prettylights-syntax-meta-diff-range); +} + +/* Line highlighting */ +pre [data-hl] { + background-color: var(--color-line-highlight); +} + +pre [data-hl='strong'] { + background-color: var(--color-line-highlight-strong); +} + +/* Character/word highlighting */ +pre [data-hlc] { + color: #b78eff; + background-color: var(--color-inline-highlight); +} diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx index fecd50c43ba1f2..9d90e40347da37 100644 --- a/docs/src/modules/components/DemoContent.tsx +++ b/docs/src/modules/components/DemoContent.tsx @@ -12,8 +12,6 @@ import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'; import { alpha, styled } from '@mui/material/styles'; import { useTranslate } from '@mui/docs/i18n'; -import '@wooorm/starry-night/style/light'; - // --------------------------------------------------------------------------- // Styled components — ported from Demo.js, DemoToolbarRoot.ts, DemoToolbar.js // --------------------------------------------------------------------------- @@ -162,6 +160,20 @@ const CodeViewer = styled('div')({ borderRadius: 0, borderBottomLeftRadius: 12, borderBottomRightRadius: 12, + overflow: 'auto', + backgroundColor: 'hsl(210, 25%, 9%)', + border: '1px solid transparent', + '-webkit-print-color-scheme': 'dark', + colorScheme: 'dark', + color: '#f8f8f2', + paddingTop: 'calc(2 * var(--muidocs-spacing))', + paddingRight: 'calc(2 * var(--muidocs-spacing))', + paddingBottom: 'calc(2 * var(--muidocs-spacing))', + paddingLeft: 'calc(2 * var(--muidocs-spacing))', + fontFamily: 'Menlo, Consolas, "Droid Sans Mono", monospace', + fontWeight: '400', + fontSize: '0.8125rem', + lineHeight: '1.5', }, }); diff --git a/docs/src/modules/components/ThemeContext.tsx b/docs/src/modules/components/ThemeContext.tsx index bb33bd743e4c04..abc59cfc48c4c8 100644 --- a/docs/src/modules/components/ThemeContext.tsx +++ b/docs/src/modules/components/ThemeContext.tsx @@ -134,6 +134,7 @@ export function ThemeProvider(props: React.PropsWithChildren) { const { direction, paletteMode } = themeOptions; useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs'); + useLazyCSS('/static/styles/syntax.css', '#syntax'); // TODO replace with useColorScheme once all pages support css vars const { mode, systemMode } = useColorSchemeShim(); From 290e1c3a2219e259feeacab83b96c32003d62b96 Mon Sep 17 00:00:00 2001 From: dav-is Date: Mon, 27 Apr 2026 13:07:45 -0400 Subject: [PATCH 003/140] Fix live editing --- .../components/buttons/BasicButtons.demo.ts | 4 - .../material/components/buttons/buttons.md | 2 +- .../{ => demos/basic}/BasicButtons.tsx | 6 +- .../components/buttons/demos/basic/client.ts | 4 + .../components/buttons/demos/basic/index.ts | 8 ++ docs/next.config.ts | 9 ++- docs/package.json | 2 +- docs/src/modules/components/AppLayoutDocs.js | 3 +- .../src/modules/components/DemoController.tsx | 61 +++++++++++++++ docs/src/modules/utils/createDemo.ts | 2 + docs/src/modules/utils/createDemoClient.ts | 12 +++ pnpm-lock.yaml | 75 ++++++++++++++++--- 12 files changed, 164 insertions(+), 24 deletions(-) delete mode 100644 docs/data/material/components/buttons/BasicButtons.demo.ts rename docs/data/material/components/buttons/{ => demos/basic}/BasicButtons.tsx (77%) create mode 100644 docs/data/material/components/buttons/demos/basic/client.ts create mode 100644 docs/data/material/components/buttons/demos/basic/index.ts create mode 100644 docs/src/modules/components/DemoController.tsx create mode 100644 docs/src/modules/utils/createDemoClient.ts diff --git a/docs/data/material/components/buttons/BasicButtons.demo.ts b/docs/data/material/components/buttons/BasicButtons.demo.ts deleted file mode 100644 index 81dfeaac0827f7..00000000000000 --- a/docs/data/material/components/buttons/BasicButtons.demo.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createDemo } from 'docs/src/modules/utils/createDemo'; -import BasicButtons from './BasicButtons'; - -export default createDemo(import.meta.url, BasicButtons); diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 4c542af265ff56..ddc4b869c43e40 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -25,7 +25,7 @@ Buttons communicate actions that users can take. They are typically placed throu The `Button` comes with three variants: text (default), contained, and outlined. -{{"component": "../data/material/components/buttons/BasicButtons.demo.ts"}} +{{"component": "../data/material/components/buttons/demos/basic/index.ts"}} ### Text button diff --git a/docs/data/material/components/buttons/BasicButtons.tsx b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx similarity index 77% rename from docs/data/material/components/buttons/BasicButtons.tsx rename to docs/data/material/components/buttons/demos/basic/BasicButtons.tsx index d34e3f80a9e8ed..c62d2a7aa9a5ff 100644 --- a/docs/data/material/components/buttons/BasicButtons.tsx +++ b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx @@ -1,16 +1,14 @@ import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Test from './Test'; export default function BasicButtons() { return ( - {/* @highlight-start */} + {/* @focus-start */} - - {/* @highlight-end */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/basic/client.ts b/docs/data/material/components/buttons/demos/basic/client.ts new file mode 100644 index 00000000000000..0d1c545e2f6718 --- /dev/null +++ b/docs/data/material/components/buttons/demos/basic/client.ts @@ -0,0 +1,4 @@ +'use client'; +import { createDemoClient } from 'docs/src/modules/utils/createDemoClient'; + +export default createDemoClient(import.meta.url); diff --git a/docs/data/material/components/buttons/demos/basic/index.ts b/docs/data/material/components/buttons/demos/basic/index.ts new file mode 100644 index 00000000000000..ea59e1aae8e038 --- /dev/null +++ b/docs/data/material/components/buttons/demos/basic/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from 'docs/src/modules/utils/createDemo'; +import ClientProvider from './client'; + +import BasicButtons from './BasicButtons'; + +export default createDemo(import.meta.url, BasicButtons, { + ClientProvider, +}); diff --git a/docs/next.config.ts b/docs/next.config.ts index a95bc9f9ca8a2e..6407f4a77d2712 100644 --- a/docs/next.config.ts +++ b/docs/next.config.ts @@ -170,12 +170,19 @@ export default withDocsInfra({ ], }, { - test: /\.demo\.ts$/, + test: /[/\\]demos[/\\][^/\\]+[/\\]index\.ts$/, use: [ options.defaultLoaders.babel, '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter', ], }, + { + test: /[/\\]demos[/\\][^/\\]+[/\\]client\.ts$/, + use: [ + options.defaultLoaders.babel, + '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighterClient', + ], + }, // required to transpile ../packages/ { test: /\.(js|mjs|tsx|ts)$/, diff --git a/docs/package.json b/docs/package.json index 39bb802feeb34c..ca5cb8323b1fae 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,7 +31,7 @@ "@mui/base": "5.0.0-beta.70", "@mui/docs": "workspace:*", "@mui/icons-material": "workspace:*", - "@mui/internal-docs-infra": "0.4.1-canary.9", + "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801", "@mui/internal-markdown": "workspace:^", "@mui/joy": "workspace:*", "@mui/lab": "workspace:*", diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 29a79b06248c69..2155359931ef2f 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -19,6 +19,7 @@ import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter import BackToTop from 'docs/src/modules/components/BackToTop'; import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl'; import { convertProductIdToName } from 'docs/src/modules/components/AppSearch'; +import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider'; const TOC_WIDTH = 242; @@ -167,7 +168,7 @@ export default function AppLayoutDocs(props) { See https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ for more details. */} - {children} + {children} {disableToc ? null : } diff --git a/docs/src/modules/components/DemoController.tsx b/docs/src/modules/components/DemoController.tsx new file mode 100644 index 00000000000000..e4a0948469022c --- /dev/null +++ b/docs/src/modules/components/DemoController.tsx @@ -0,0 +1,61 @@ +'use client'; + +import * as React from 'react'; +import { useRunner } from 'react-runner'; +import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext'; +import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter/types'; +import { useCodeExternals } from '@mui/internal-docs-infra/CodeExternalsContext'; + +function Runner({ code }: { code: string }) { + const externalsContext = useCodeExternals(); + const scope = React.useMemo(() => { + let externals = externalsContext?.externals; + if (!externals) { + externals = { imports: { react: React } }; + } + + return { import: { ...externals } }; + }, [externalsContext]); + + const { element, error } = useRunner({ code, scope }); + + if (error) { + return
{error}
; + } + + return element; +} + +function DemoController({ children }: { children: React.ReactNode }) { + const [code, setCode] = React.useState(undefined); + + const components = React.useMemo( + () => + code + ? Object.keys(code).reduce( + (acc, cur) => { + const source = code[cur]?.source; + if (!source) { + return acc; + } + + acc[cur] = ; + return acc; + }, + {} as Record, + ) + : undefined, + [code], + ); + + const contextValue = React.useMemo( + () => ({ code, setCode, components }), + [code, setCode, components], + ); + + return ( + {children} + ); +} + +export default DemoController; diff --git a/docs/src/modules/utils/createDemo.ts b/docs/src/modules/utils/createDemo.ts index ef81c265ff198c..3f29793c8f0c0f 100644 --- a/docs/src/modules/utils/createDemo.ts +++ b/docs/src/modules/utils/createDemo.ts @@ -14,6 +14,7 @@ import DemoContent from '../components/DemoContent'; */ export const createDemo = createDemoFactory({ DemoContent, + controlled: true, }); /** @@ -25,4 +26,5 @@ export const createDemo = createDemoFactory({ */ export const createDemoWithVariants = createDemoWithVariantsFactory({ DemoContent, + controlled: true, }); diff --git a/docs/src/modules/utils/createDemoClient.ts b/docs/src/modules/utils/createDemoClient.ts new file mode 100644 index 00000000000000..0d04a9a1670edb --- /dev/null +++ b/docs/src/modules/utils/createDemoClient.ts @@ -0,0 +1,12 @@ +import { createDemoClientFactory } from '@mui/internal-docs-infra/abstractCreateDemoClient'; +import DemoController from '../components/DemoController'; + +/** + * Creates a demo client provider for live editing with precomputed externals. + * @param url Depends on `import.meta.url` to determine the source file location. + * @param meta Additional meta and configuration for the demo client. + */ +// eslint-disable-next-line import/prefer-default-export +export const createDemoClient = createDemoClientFactory({ + DemoController, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a95ed5be917f7e..fe9decf057e712 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -296,8 +296,8 @@ importers: specifier: workspace:* version: link:../packages/mui-icons-material/build '@mui/internal-docs-infra': - specifier: 0.4.1-canary.9 - version: 0.4.1-canary.9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4) + specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801 + version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3) '@mui/internal-markdown': specifier: workspace:^ version: link:../packages/markdown @@ -2610,8 +2610,8 @@ packages: resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==} engines: {node: '>=6.9.0'} - '@babel/standalone@7.29.1': - resolution: {integrity: sha512-z42abD0C6fiHfgLyCWw8PYv6FCJ0IGVtSCxXk/NPykWO5LNIEGfdLDJ3HdYqlPcAhwtQ3oKH1PvNj2JGpTxQKg==} + '@babel/standalone@7.29.2': + resolution: {integrity: sha512-VSuvywmVRS8efooKrvJzs6BlVSxRvAdLeGrAKUrWoBx1fFBSeE/oBpUZCQ5BcprLyXy04W8skzz7JT8GqlNRJg==} engines: {node: '>=6.9.0'} '@babel/template@7.28.6': @@ -3621,7 +3621,7 @@ packages: '@mui/base@5.0.0-beta.30': resolution: {integrity: sha512-dc38W4W3K42atE9nSaOeoJ7/x9wGIfawdwC/UmMxMLlZ1iSsITQ8dQJaTATCbn98YvYPINK/EH541YA5enQIPQ==} engines: {node: '>=12.0.0'} - deprecated: This package has been replaced by @base-ui-components/react + deprecated: This package has been replaced by @base-ui/react peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 @@ -3645,7 +3645,7 @@ packages: '@mui/base@5.0.0-beta.70': resolution: {integrity: sha512-Tb/BIhJzb0pa5zv/wu7OdokY9ZKEDqcu1BDFnohyvGCoHuSXbEr90rPq1qeNW3XvTBIbNWHEF7gqge+xpUo6tQ==} engines: {node: '>=14.0.0'} - deprecated: This package has been replaced by @base-ui-components/react + deprecated: This package has been replaced by @base-ui/react peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -3705,15 +3705,17 @@ packages: typescript: optional: true - '@mui/internal-docs-infra@0.4.1-canary.9': - resolution: {integrity: sha512-B761GiFwpMNsE0FifRACFrFblnY3TZyKyCfRln7YfEChAsykPZchhqImyhYNKaSw/PwUyivEDLQqWfNDc9KdUg==} - engines: {node: '>=22.12.0'} + '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801': + resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801} + version: 0.11.0 + engines: {node: '>=22.18.0'} hasBin: true peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 next: ^15.0.0 || ^16.0.0 prettier: ^3.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 + typescript: ^6.0.2 peerDependenciesMeta: '@types/react': optional: true @@ -7443,6 +7445,9 @@ packages: es-toolkit@1.44.0: resolution: {integrity: sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==} + es-toolkit@1.46.0: + resolution: {integrity: sha512-IToJ6ct9OLl5zz6WsC/1vZEwfSZ7Myil+ygl5Tf30Xjn9AEkzNB4kqp2G7VUJKF1DtTx/ra5M5KLlXvzOg51BA==} + esbuild@0.27.2: resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==} engines: {node: '>=18'} @@ -8004,6 +8009,7 @@ packages: git-raw-commits@3.0.0: resolution: {integrity: sha512-b5OHmZ3vAgGrDn/X0kS+9qCfNKWe4K/jFnhwzVWWg0/k5eLa3060tZShrRg8Dja5kPc+YjS0Gc6y7cRr44Lpjw==} engines: {node: '>=14'} + deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead. hasBin: true git-remote-origin-url@2.0.0: @@ -8013,6 +8019,7 @@ packages: git-semver-tags@5.0.1: resolution: {integrity: sha512-hIvOeZwRbQ+7YEUmCkHqo8FOLQZCEn18yevLHADlFPZY02KJGsu5FZt9YW/lybfK2uhWFI7Qg/07LekJiTv7iA==} engines: {node: '>=14'} + deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead. hasBin: true git-up@7.0.0: @@ -10838,6 +10845,10 @@ packages: remark-stringify@11.0.0: resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + remark-typography@0.7.3: + resolution: {integrity: sha512-4PwzZTgKQclWZGWAjaB65H1neHKIUmAOuR1noLfPvD8DcrXKVCs/vDt9yhFJHYTrDXhWqYUBUmbrz0V77Do2kg==} + engines: {node: '>=14.18.0'} + remark@15.0.1: resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==} @@ -11779,6 +11790,12 @@ packages: typedarray@0.0.6: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} + typescript-api-extractor@1.0.0-beta.3: + resolution: {integrity: sha512-kniM+MhKK2egY8Vs6etsX8oWdBtjDOoSSPI0p7p5zlGtEuYfdozS5aCyJReLSTpLP+c2886oJ2c/6Nw7cTyJEQ==} + engines: {node: '>=22'} + peerDependencies: + typescript: ^5.8 + typescript-eslint@8.54.0: resolution: {integrity: sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -11925,6 +11942,11 @@ packages: peerDependencies: react: '>=16.8.0' + use-editable@2.3.3: + resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==} + peerDependencies: + react: '>= 16.8.0' + use-elapsed-time@3.0.2: resolution: {integrity: sha512-2EY9lJ5DWbAvT8wWiEp6Ztnl46DjXz2j78uhWbXaz/bg3OfpbgVucCAlcN8Bih6hTJfFTdVYX9L6ySMn5py/wQ==} peerDependencies: @@ -12388,6 +12410,11 @@ packages: zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + zx@8.8.5: + resolution: {integrity: sha512-SNgDF5L0gfN7FwVOdEFguY3orU5AkfFZm9B5YSHog/UDHv+lvmd82ZAsOenOkQixigwH2+yyH198AwNdKhj+RA==} + engines: {node: '>= 12.17.0'} + hasBin: true + snapshots: '@aashutoshrathi/word-wrap@1.2.6': {} @@ -13935,7 +13962,7 @@ snapshots: '@babel/runtime@7.28.6': {} - '@babel/standalone@7.29.1': {} + '@babel/standalone@7.29.2': {} '@babel/template@7.28.6': dependencies: @@ -15122,10 +15149,10 @@ snapshots: - supports-color - vitest - '@mui/internal-docs-infra@0.4.1-canary.9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)': + '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)': dependencies: '@babel/runtime': 7.28.6 - '@babel/standalone': 7.29.1 + '@babel/standalone': 7.29.2 '@orama/orama': 3.1.18 '@orama/plugin-qps': 3.1.18 '@orama/stemmers': 3.1.18 @@ -15133,22 +15160,31 @@ snapshots: '@wooorm/starry-night': 3.9.0 chalk: 5.6.2 clipboard-copy: 4.0.1 + es-toolkit: 1.46.0 fflate: 0.8.2 hast-util-to-jsx-runtime: 2.3.6 hast-util-to-text: 4.0.2 + import-meta-resolve: 4.2.0 jsondiffpatch: 0.7.3 kebab-case: 2.0.2 lz-string: 1.5.0 path-module: 0.1.2 proper-lockfile: 4.1.2 react: 19.2.4 + remark-gfm: 4.0.1 remark-mdx: 3.1.1 remark-parse: 11.0.0 + remark-stringify: 11.0.0 + remark-typography: 0.7.3 + typescript: 5.9.3 + typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3) uint8-to-base64: 0.2.1 unified: 11.0.5 unist-util-visit: 5.1.0 + use-editable: 2.3.3(react@19.2.4) vscode-oniguruma: 2.0.1 yargs: 18.0.0 + zx: 8.8.5 optionalDependencies: '@types/react': 19.2.14 next: 15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -19250,6 +19286,8 @@ snapshots: es-toolkit@1.44.0: {} + es-toolkit@1.46.0: {} + esbuild@0.27.2: optionalDependencies: '@esbuild/aix-ppc64': 0.27.2 @@ -23470,6 +23508,8 @@ snapshots: mdast-util-to-markdown: 2.1.0 unified: 11.0.5 + remark-typography@0.7.3: {} + remark@15.0.1: dependencies: '@types/mdast': 4.0.4 @@ -24568,6 +24608,11 @@ snapshots: typedarray@0.0.6: {} + typescript-api-extractor@1.0.0-beta.3(typescript@5.9.3): + dependencies: + es-toolkit: 1.46.0 + typescript: 5.9.3 + typescript-eslint@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3): dependencies: '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3) @@ -24750,6 +24795,10 @@ snapshots: react: 19.2.4 use-elapsed-time: 3.0.2(react@19.2.4) + use-editable@2.3.3(react@19.2.4): + dependencies: + react: 19.2.4 + use-elapsed-time@3.0.2(react@19.2.4): dependencies: react: 19.2.4 @@ -25231,3 +25280,5 @@ snapshots: zod@4.1.12: {} zwitch@2.0.4: {} + + zx@8.8.5: {} From 8e077b9eeaf26fdf092446996cb7e908a36a31f5 Mon Sep 17 00:00:00 2001 From: dav-is Date: Mon, 27 Apr 2026 13:24:09 -0400 Subject: [PATCH 004/140] Add eslint rule --- eslint.config.mjs | 10 ++++++++ package.json | 1 + pnpm-lock.yaml | 60 +++++++++++++++++++++++++---------------------- 3 files changed, 43 insertions(+), 28 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 903acbc423b4fb..d3f06ef113e44c 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -12,6 +12,7 @@ import eslintPluginConsistentName from 'eslint-plugin-consistent-default-export- import * as path from 'node:path'; import vitestPlugin from '@vitest/eslint-plugin'; import { fileURLToPath } from 'url'; +import { lintJavascriptDemoFocus } from '@mui/internal-docs-infra/pipeline/lintJavascriptDemoFocus'; const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(filename); @@ -166,6 +167,15 @@ export default defineConfig( ], }, }, + { + files: ['docs/data/**/demos/**/*.tsx', 'docs/data/**/demos/**/*.jsx'], + plugins: { + 'docs-infra': { rules: { 'require-demo-focus': lintJavascriptDemoFocus } }, + }, + rules: { + 'docs-infra/require-demo-focus': ['error', { wrapReturn: true }], + }, + }, // Moved from docs/data/material/components/.eslintrc.js { files: [`docs/data/material/components/**/*${EXTENSION_TS}`], diff --git a/package.json b/package.json index 420ddeeee3264b..5e1136c378e9cf 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.21", "@mui/internal-bundle-size-checker": "1.0.9-canary.61", "@mui/internal-code-infra": "0.0.3-canary.94", + "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801", "@mui/internal-docs-utils": "workspace:^", "@mui/internal-netlify-cache": "0.0.3-canary.0", "@mui/internal-scripts": "workspace:^", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fe9decf057e712..ff5f105e146de3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -70,6 +70,9 @@ importers: '@mui/internal-code-infra': specifier: 0.0.3-canary.94 version: 0.0.3-canary.94(@next/eslint-plugin-next@15.5.12)(@types/node@20.19.33)(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-webpack@0.13.10)(eslint@9.39.2(jiti@2.6.1))(postcss@8.5.6)(prettier@3.8.1)(stylelint@17.3.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13) + '@mui/internal-docs-infra': + specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801 + version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3) '@mui/internal-docs-utils': specifier: workspace:^ version: link:packages-internal/docs-utils @@ -237,13 +240,13 @@ importers: version: 7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) vitest: specifier: ^4.0.13 - version: 4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) + version: 4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) vitest-fail-on-console: specifier: 0.10.1 version: 0.10.1(@vitest/utils@4.0.15)(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13) webpack: specifier: 5.105.2 - version: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + version: 5.105.2(webpack-cli@6.0.1) webpack-cli: specifier: 6.0.1 version: 6.0.1(webpack@5.105.2) @@ -1627,7 +1630,7 @@ importers: version: 3.3.3 html-webpack-plugin: specifier: 5.6.6 - version: 5.6.6(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))) + version: 5.6.6(webpack@5.105.2(webpack-cli@6.0.1)) prop-types: specifier: 15.8.1 version: 15.8.1 @@ -1660,7 +1663,7 @@ importers: version: 1.6.28 webpack: specifier: 5.105.2 - version: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + version: 5.105.2(webpack-cli@6.0.1) yargs: specifier: 17.7.2 version: 17.7.2 @@ -17418,7 +17421,7 @@ snapshots: '@vitest/mocker': 4.0.13(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)) playwright: 1.58.2 tinyrainbow: 3.0.3 - vitest: 4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) + vitest: 4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) transitivePeerDependencies: - bufferutil - msw @@ -17434,7 +17437,7 @@ snapshots: pngjs: 7.0.0 sirv: 3.0.2 tinyrainbow: 3.0.3 - vitest: 4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) + vitest: 4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) ws: 8.19.0 transitivePeerDependencies: - bufferutil @@ -17455,7 +17458,7 @@ snapshots: magicast: 0.5.1 std-env: 3.10.0 tinyrainbow: 3.0.3 - vitest: 4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) + vitest: 4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) optionalDependencies: '@vitest/browser': 4.0.13(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13) transitivePeerDependencies: @@ -17468,7 +17471,7 @@ snapshots: eslint: 9.39.2(jiti@2.6.1) optionalDependencies: typescript: 5.9.3 - vitest: 4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) + vitest: 4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) transitivePeerDependencies: - supports-color @@ -17606,19 +17609,19 @@ snapshots: '@webassemblyjs/ast': 1.14.1 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)': + '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)': dependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-cli: 6.0.1(webpack@5.105.2) - '@webpack-cli/info@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)': + '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)': dependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-cli: 6.0.1(webpack@5.105.2) - '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)': + '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)': dependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-cli: 6.0.1(webpack@5.105.2) '@wooorm/starry-night@3.9.0': @@ -17993,7 +17996,7 @@ snapshots: dependencies: '@babel/core': 7.28.6 find-up: 5.0.0 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) babel-merge@3.0.0(@babel/core@7.28.6): dependencies: @@ -19374,7 +19377,7 @@ snapshots: lodash: 4.17.21 resolve: 2.0.0-next.5 semver: 5.7.2 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) transitivePeerDependencies: - supports-color @@ -20358,7 +20361,7 @@ snapshots: html-void-elements@3.0.0: {} - html-webpack-plugin@5.6.6(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))): + html-webpack-plugin@5.6.6(webpack@5.105.2(webpack-cli@6.0.1)): dependencies: '@types/html-minifier-terser': 6.1.0 html-minifier-terser: 6.1.0 @@ -20366,7 +20369,7 @@ snapshots: pretty-error: 4.0.0 tapable: 2.3.0 optionalDependencies: - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) htmlparser2@6.1.0: dependencies: @@ -24360,14 +24363,14 @@ snapshots: temp-dir@1.0.0: {} - terser-webpack-plugin@5.3.16(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))): + terser-webpack-plugin@5.3.16(webpack@5.105.2): dependencies: '@jridgewell/trace-mapping': 0.3.31 jest-worker: 27.5.1 schema-utils: 4.3.3 serialize-javascript: 6.0.2 terser: 5.39.0 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) terser@5.39.0: dependencies: @@ -24874,9 +24877,9 @@ snapshots: '@vitest/utils': 4.0.15 chalk: 5.6.2 vite: 7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) - vitest: 4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) + vitest: 4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) - vitest@4.0.13(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0): + vitest@4.0.13(@opentelemetry/api@1.8.0)(@types/debug@4.1.12)(@types/node@20.19.33)(@vitest/browser-playwright@4.0.13)(happy-dom@15.11.6)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0): dependencies: '@vitest/expect': 4.0.13 '@vitest/mocker': 4.0.13(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)) @@ -24899,6 +24902,7 @@ snapshots: vite: 7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0) why-is-node-running: 2.3.0 optionalDependencies: + '@opentelemetry/api': 1.8.0 '@types/debug': 4.1.12 '@types/node': 20.19.33 '@vitest/browser-playwright': 4.0.13(msw@2.7.3(@types/node@20.19.33)(typescript@5.9.3))(playwright@1.58.2)(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13) @@ -24969,9 +24973,9 @@ snapshots: webpack-cli@6.0.1(webpack@5.105.2): dependencies: '@discoveryjs/json-ext': 0.6.3 - '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2) - '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2) - '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2) + '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2) + '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2) + '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2) colorette: 2.0.20 commander: 12.1.0 cross-spawn: 7.0.6 @@ -24980,7 +24984,7 @@ snapshots: import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2)) + webpack: 5.105.2(webpack-cli@6.0.1) webpack-merge: 6.0.1 webpack-merge@6.0.1: @@ -24991,7 +24995,7 @@ snapshots: webpack-sources@3.3.3: {} - webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2)): + webpack@5.105.2(webpack-cli@6.0.1): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.8 @@ -25015,7 +25019,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 4.3.3 tapable: 2.3.0 - terser-webpack-plugin: 5.3.16(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))) + terser-webpack-plugin: 5.3.16(webpack@5.105.2) watchpack: 2.5.1 webpack-sources: 3.3.3 optionalDependencies: From 2b615ae2f23475781ff641ed2cde4b3ecc943c65 Mon Sep 17 00:00:00 2001 From: dav-is Date: Mon, 27 Apr 2026 14:42:29 -0400 Subject: [PATCH 005/140] Fix expand/collapse Co-authored-by: Copilot --- .../components/buttons/demos/basic/client.ts | 1 + docs/src/modules/components/DemoContent.tsx | 295 ++++++++++++- .../src/modules/components/useScrollAnchor.ts | 400 ++++++++++++++++++ 3 files changed, 674 insertions(+), 22 deletions(-) create mode 100644 docs/src/modules/components/useScrollAnchor.ts diff --git a/docs/data/material/components/buttons/demos/basic/client.ts b/docs/data/material/components/buttons/demos/basic/client.ts index 0d1c545e2f6718..3f80716ca627ec 100644 --- a/docs/data/material/components/buttons/demos/basic/client.ts +++ b/docs/data/material/components/buttons/demos/basic/client.ts @@ -1,4 +1,5 @@ 'use client'; + import { createDemoClient } from 'docs/src/modules/utils/createDemoClient'; export default createDemoClient(import.meta.url); diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx index 9d90e40347da37..bbf6c9774215ac 100644 --- a/docs/src/modules/components/DemoContent.tsx +++ b/docs/src/modules/components/DemoContent.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types'; import { useDemo } from '@mui/internal-docs-infra/useDemo'; import Box from '@mui/material/Box'; -import Collapse from '@mui/material/Collapse'; import IconButton from '@mui/material/IconButton'; import MDButton from '@mui/material/Button'; import MDToggleButton from '@mui/material/ToggleButton'; @@ -11,6 +10,10 @@ import Tooltip from '@mui/material/Tooltip'; import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'; import { alpha, styled } from '@mui/material/styles'; import { useTranslate } from '@mui/docs/i18n'; +import useScrollAnchor from './useScrollAnchor'; + +// Dark code-panel background used by the highlighted source viewer. +const CODE_BG = 'hsl(210, 25%, 9%)'; // --------------------------------------------------------------------------- // Styled components — ported from Demo.js, DemoToolbarRoot.ts, DemoToolbar.js @@ -151,31 +154,270 @@ const FileTab = styled('button')<{ selected?: boolean }>(({ theme }) => ({ })); // Wraps the already-highlighted code from useDemo — mirrors DemoCodeViewer in Demo.js. -const CodeViewer = styled('div')({ +// Also hosts the styles required by the `enhanceCodeEmphasis` source enhancer: +// frame/line highlights, indent shifting, fade overlay, and collapsible frame +// transitions for `data-frame-type` / `data-collapsible` markup. +const CodeViewer = styled('div', { + shouldForwardProp: (prop) => prop !== 'expanded', +})<{ expanded?: boolean }>(({ theme }) => ({ + position: 'relative', + + // ---- Base 
 styles (existing dark code panel) ----
   '& pre': {
     margin: 0,
     marginTop: -1,
-    maxHeight: 'min(68vh, 1000px)',
     maxWidth: 'initial',
     borderRadius: 0,
     borderBottomLeftRadius: 12,
     borderBottomRightRadius: 12,
     overflow: 'auto',
-    backgroundColor: 'hsl(210, 25%, 9%)',
+    backgroundColor: CODE_BG,
     border: '1px solid transparent',
     '-webkit-print-color-scheme': 'dark',
     colorScheme: 'dark',
     color: '#f8f8f2',
-    paddingTop: 'calc(2 * var(--muidocs-spacing))',
-    paddingRight: 'calc(2 * var(--muidocs-spacing))',
-    paddingBottom: 'calc(2 * var(--muidocs-spacing))',
-    paddingLeft: 'calc(2 * var(--muidocs-spacing))',
+    padding: 'calc(2 * var(--muidocs-spacing))',
     fontFamily: 'Menlo, Consolas, "Droid Sans Mono", monospace',
     fontWeight: '400',
     fontSize: '0.8125rem',
     lineHeight: '1.5',
   },
-});
+
+  // Cap height only on non-collapsible blocks; collapsible blocks animate their
+  // own height via frame transitions and need clean overflow handling.
+  '& pre:not(:has(> code[data-collapsible]))': {
+    maxHeight: 'min(68vh, 1000px)',
+  },
+
+  // Collapsible blocks: hide horizontal overflow so the fade overlay can clip
+  // cleanly. Re-enabled when expanded (see `expanded` variant below).
+  '& pre:has(> code[data-collapsible])': {
+    overflowX: 'hidden',
+  },
+
+  '& pre:has(> code > .frame[data-frame-truncated="visible"])': {
+    paddingBottom: 0,
+  },
+
+  // Code element inside pre — block so frames stretch to the widest line.
+  '& pre > code': {
+    display: 'block',
+    minWidth: 'fit-content',
+  },
+
+  // ---- Frame & line layout ----
+  // The HAST emitted by `enhanceCodeEmphasis` separates `.line` spans with
+  // whitespace text nodes (spaces/newlines). With `display: block` on `.line`,
+  // each of those whitespace nodes also forms an anonymous line box that
+  // takes up a full `line-height` of vertical space, doubling the apparent
+  // line spacing. Setting `line-height: 0` on the frame collapses those
+  // anonymous boxes to zero height; the explicit `line-height` on `.line`
+  // restores normal spacing for the actual lines of code.
+  '& pre > code > .frame': {
+    display: 'block',
+  },
+  '& pre > code > .frame[data-lined]': {
+    lineHeight: 0,
+  },
+  '& pre > code > .frame[data-lined] .line': {
+    display: 'block',
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+  },
+
+  // Highlighted frames get rounded corners and a subtle background.
+  '& .frame[data-frame-type="highlighted"], & .frame[data-frame-type="highlighted-unfocused"]': {
+    background: alpha(theme.palette.primary.main, 0.18),
+    borderRadius: 8,
+    margin: '0 6px',
+    padding: '0 6px',
+  },
+
+  // Line-level highlight inside a frame (nested emphasis).
+  '& .line[data-hl]': {
+    background: alpha(theme.palette.primary.main, 0.18),
+    margin: '0 -6px',
+    padding: '0 6px',
+  },
+  '& :not(.line)[data-hl]': {
+    background: alpha(theme.palette.primary.main, 0.32),
+    borderRadius: 4,
+  },
+  '& .line[data-hl="strong"]': {
+    background: alpha(theme.palette.primary.main, 0.32),
+    margin: '0 -6px',
+    padding: '0 6px',
+  },
+  // Strong lines bordering a regular highlight need to stack above it so the
+  // regular line's extended background sits underneath the rounded corners.
+  '& .line[data-hl="strong"][data-hl-position="single"], & .line[data-hl="strong"][data-hl-position="end"]':
+    {
+      position: 'relative',
+      zIndex: 1,
+    },
+  // Visually merge a regular highlighted line into an adjacent strong block.
+  '& .line[data-hl=""]:has(+ .line[data-hl="strong"])': {
+    paddingBottom: 6,
+    marginBottom: -6,
+  },
+  '& .line[data-hl="strong"] + .line[data-hl=""]': {
+    paddingTop: 6,
+    marginTop: -6,
+  },
+  '& .line[data-hl-position="single"]': { borderRadius: 8 },
+  '& .line[data-hl-position="start"]': {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  '& .line[data-hl-position="end"]': {
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+
+  // Description badges (rendered via `data-hl-description` / `data-frame-description`).
+  '& .line[data-hl-description]::after': {
+    content: 'attr(data-hl-description)',
+    float: 'right',
+    background: theme.palette.primary.main,
+    borderRadius: 8,
+    color: theme.palette.primary.contrastText,
+    padding: '2px 4px',
+    marginRight: -6,
+  },
+  '& .frame[data-frame-description]::before': {
+    content: 'attr(data-frame-description)',
+    float: 'right',
+    background: theme.palette.primary.main,
+    borderRadius: 8,
+    color: theme.palette.primary.contrastText,
+    padding: '2px 4px',
+  },
+
+  // Truncated visible frame: only round top — bottom fades out via overlay.
+  '& .frame[data-frame-truncated="visible"]': {
+    borderRadius: '8px 8px 0 0',
+  },
+  // Truncated hidden frame is the bottom of the region.
+  '& .frame[data-frame-truncated="hidden"]': {
+    borderRadius: '0 0 8px 8px',
+  },
+
+  // ---- Collapsible frame behavior ----
+  // Scoped to collapsible demos: in non-collapsible demos every frame lacks
+  // `data-frame-type`, so an unscoped rule would hide all of them.
+  '& pre:has(> code[data-collapsible]) .frame:not([data-frame-type]), & pre:has(> code[data-collapsible]) .frame[data-frame-type="highlighted-unfocused"], & pre:has(> code[data-collapsible]) .frame[data-frame-type="focus-unfocused"]':
+    {
+      maxHeight: 0,
+      overflow: 'hidden',
+      overflowAnchor: 'none',
+      opacity: 0,
+      visibility: 'hidden',
+      transition:
+        'max-height 0.3s cubic-bezier(0.5, 0, 0, 1), opacity 0.2s ease 0.1s, visibility 0.3s',
+      '@supports (interpolate-size: allow-keywords)': {
+        interpolateSize: 'allow-keywords',
+        maxHeight: 'unset',
+        height: 0,
+        overflow: 'clip',
+        transition: 'height 0.3s ease, opacity 0.3s ease, visibility 0.3s',
+      },
+    } as any,
+  '& pre:has(> code[data-collapsible]) .frame[data-frame-type="highlighted-unfocused"]': {
+    opacity: 1,
+  },
+
+  // Indent shifting for the focused/highlighted region. Uses transform to
+  // avoid layout reflow during height transitions.
+  '& pre:has(> code[data-collapsible]) .frame[data-frame-type="highlighted"], & pre:has(> code[data-collapsible]) .frame[data-frame-type="focus"]':
+    {
+      transition: 'transform 0.3s ease',
+    },
+  ...Object.fromEntries(
+    Array.from({ length: 8 }, (_unused, idx) => {
+      const level = idx + 1;
+      return [
+        `& pre:has(> code[data-collapsible]) .frame[data-frame-type="highlighted"][data-frame-indent="${level}"], & pre:has(> code[data-collapsible]) .frame[data-frame-type="focus"][data-frame-indent="${level}"]`,
+        { transform: `translateX(-${level * 2}ch)` },
+      ];
+    }),
+  ),
+
+  variants: [
+    {
+      props: { expanded: true },
+      style: {
+        // Show all frames when expanded.
+        '& pre:has(> code[data-collapsible]) .frame:not([data-frame-type]), & pre:has(> code[data-collapsible]) .frame[data-frame-type="highlighted-unfocused"], & pre:has(> code[data-collapsible]) .frame[data-frame-type="focus-unfocused"]':
+          {
+            maxHeight: 2220,
+            opacity: 1,
+            visibility: 'visible',
+            transition:
+              'max-height 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease, visibility 0s',
+            '@supports (interpolate-size: allow-keywords)': {
+              maxHeight: 'unset',
+              height: 'auto',
+              overflow: 'clip',
+              transition: 'height 0.3s ease, opacity 0.3s ease, visibility 0s',
+            },
+          } as any,
+        // Reset indent shift when expanded. Must match the per-indent base
+        // rules' specificity (which include `[data-frame-indent="N"]`) or the
+        // base `translateX(-Nch)` would still win.
+        ...Object.fromEntries(
+          Array.from({ length: 8 }, (_unused, idx) => {
+            const level = idx + 1;
+            return [
+              `& pre:has(> code[data-collapsible]) .frame[data-frame-type="highlighted"][data-frame-indent="${level}"], & pre:has(> code[data-collapsible]) .frame[data-frame-type="focus"][data-frame-indent="${level}"]`,
+              { transform: 'translateX(0)' },
+            ];
+          }),
+        ),
+        '& pre:has(> code[data-collapsible])': {
+          overflowX: 'auto',
+        },
+        '& pre:has(> code > .frame[data-frame-truncated="visible"])': {
+          paddingBottom: 'calc(2 * var(--muidocs-spacing))',
+        },
+      },
+    },
+  ],
+}));
+
+// Fade overlay shown at the bottom of truncated/collapsible code blocks.
+// Anchored to a non-scrolling wrapper so the overlay stays pinned to the
+// visible viewport edge instead of scrolling away with the pre's content.
+const CodeWrapper = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'expanded',
+})<{ expanded?: boolean }>(() => ({
+  position: 'relative',
+
+  '&:has(pre > code > .frame[data-frame-truncated="visible"])': {
+    overflowY: 'clip',
+  },
+  '&:has(pre > code > .frame[data-frame-truncated="visible"])::after': {
+    content: '""',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 40,
+    background: `linear-gradient(to bottom, transparent, ${alpha(CODE_BG, 0.85)})`,
+    transition: 'transform 0.3s ease',
+    pointerEvents: 'none',
+  },
+
+  variants: [
+    {
+      props: { expanded: true },
+      style: {
+        '&:has(pre > code > .frame[data-frame-truncated="visible"])::after': {
+          transform: 'translateY(100%)',
+        },
+      },
+    },
+  ],
+}));
 
 const AnchorLink = styled('div')({
   marginTop: -64, // height of toolbar
@@ -268,7 +510,10 @@ function DemoTooltip(props: React.ComponentProps) {
 export default function DemoContent(props: ContentProps) {
   const demo = useDemo(props);
   const t = useTranslate();
-  const [codeOpen, setCodeOpen] = React.useState(Boolean(demo.expanded));
+  // When the rendered code has collapsible frames (from `enhanceCodeEmphasis`),
+  // this expands all hidden context lines. Demos without emphasis frames render
+  // identically in both states.
+  const { containerRef, anchorScroll } = useScrollAnchor();
 
   const hasJsTransform = demo.availableTransforms.includes('js');
   const isJsSelected = demo.selectedTransform === 'js';
@@ -282,7 +527,15 @@ export default function DemoContent(props: ContentProps) {
     [demo],
   );
 
-  const showCodeLabel = codeOpen ? t('hideSource') : t('showSource');
+  const showCodeLabel = demo.expanded ? t('hideSource') : t('showSource');
+
+  const expandedRef = React.useRef(demo.expanded);
+  expandedRef.current = demo.expanded;
+  const handleToggleFrames = React.useCallback(() => {
+    const next = !expandedRef.current;
+    anchorScroll(next ? 'expand' : 'collapse');
+    demo.setExpanded(next);
+  }, [anchorScroll, demo]);
 
   return (
     
@@ -295,9 +548,9 @@ export default function DemoContent(props: ContentProps) {
       
 
       {/* Toolbar — hidden on mobile, matches DemoToolbarRoot */}
-      
+      
         {/* Left side: JS/TS toggle (only visible when code is open) */}
-        {codeOpen && hasJsTransform ? (
+        {demo.expanded && hasJsTransform ? (
           ) {
             
           )}
 
-          {/* Show / hide code */}
-           setCodeOpen((prev) => !prev)}>
-            {showCodeLabel}
-          
+          {/* Expand / collapse emphasis frames */}
+          {showCodeLabel}
 
           {/* Copy */}
           
@@ -345,7 +596,7 @@ export default function DemoContent(props: ContentProps) {
       
 
       {/* File tabs — only when multiple files and code is visible */}
-      {demo.files.length > 1 && codeOpen ? (
+      {demo.files.length > 1 && demo.expanded ? (
         
           {demo.files.map((file) => (
             ) {
         
       ) : null}
 
-      {/* Code — animated open/close */}
-      
-        {demo.selectedFile}
-      
+      {/* Code */}
+      
+        {demo.selectedFile}
+      
     
   );
 }
diff --git a/docs/src/modules/components/useScrollAnchor.ts b/docs/src/modules/components/useScrollAnchor.ts
new file mode 100644
index 00000000000000..aae644a252f2ae
--- /dev/null
+++ b/docs/src/modules/components/useScrollAnchor.ts
@@ -0,0 +1,400 @@
+import * as React from 'react';
+
+/**
+ * Selector for the first highlighted or focus frame — the content the user
+ * cares about. Anchoring to this keeps the focused code visually stable
+ * in both expand and collapse directions.
+ */
+const ANCHOR_SELECTOR = ['[data-frame-type="highlighted"]', '[data-frame-type="focus"]'].join(', ');
+
+/**
+ * Whether the browser supports `interpolate-size: allow-keywords` —
+ * determines which CSS transition path is active and thus how long
+ * the rAF loop needs to run.
+ *
+ * - Enhanced: 300ms for both expand and collapse
+ * - Fallback: 300ms collapse, 1500ms expand (max-height)
+ */
+const supportsInterpolateSize =
+  typeof CSS !== 'undefined' && CSS.supports('interpolate-size', 'allow-keywords');
+
+function getTransitionTimeout(direction: 'collapse' | 'expand'): number {
+  if (supportsInterpolateSize) {
+    // @supports path: height 0.3s ease in both directions
+    return 350;
+  }
+  // Fallback path: max-height 0.3s collapse, 1.5s expand
+  return direction === 'collapse' ? 350 : 1550;
+}
+
+const GUTTER_STATE_ATTRIBUTE = 'data-scrollbar-gutter';
+const gutterCleanupTimers = new WeakMap | Animation>();
+const gutterFlipTimers = new WeakMap>();
+const scrollbackAnimations = new WeakMap();
+
+const prefersReducedMotion = () =>
+  typeof window !== 'undefined' &&
+  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+
+/**
+ * Schedules `callback` to run after `duration` ms on the browser's animation
+ * timeline (via a no-op WAAPI animation), so DevTools' animation speed slider
+ * scales the delay in step with CSS transitions. Falls back to `setTimeout`
+ * when WAAPI isn't available.
+ *
+ * Returns the `Animation` (or timer id) so callers can cancel it. Cancelling
+ * the returned `Animation` does NOT invoke `callback` (the rejected
+ * `finished` promise is swallowed), matching `clearTimeout` semantics.
+ */
+function scheduleOnAnimationTimeline(
+  target: HTMLElement,
+  duration: number,
+  callback: () => void,
+): Animation | ReturnType {
+  if (typeof target.animate === 'function') {
+    const anim = target.animate([{ opacity: 1 }, { opacity: 1 }], { duration, fill: 'none' });
+    anim.finished.then(callback, () => {
+      // Swallow rejection from `Animation.cancel()` so cancelling the schedule
+      // doesn't fire the cleanup callback (which would otherwise stomp on a
+      // freshly-registered next-state cleanup).
+    });
+    return anim;
+  }
+  return setTimeout(callback, duration);
+}
+
+function cancelScheduled(handle: Animation | ReturnType | undefined) {
+  if (handle === undefined) {
+    return;
+  }
+  // Guard the `instanceof` so we don't throw a `ReferenceError` in browsers
+  // that lack WAAPI (where `scheduleOnAnimationTimeline` falls back to
+  // `setTimeout` and `Animation` is undefined as a global).
+  if (typeof Animation !== 'undefined' && handle instanceof Animation) {
+    handle.cancel();
+  } else {
+    clearTimeout(handle as ReturnType);
+  }
+}
+
+/**
+ * Smoothly slides the `` element back to the left edge over `duration`
+ * ms using an ease-out cubic via the Web Animations API.
+ *
+ * Used during collapse instead of tweening `pre.scrollLeft` because the
+ * scrollbar-gutter animation forces `overflow-x: hidden` on the pre, which
+ * snaps `scrollLeft` to 0 instantly. Animating a transform on the inner
+ * `code` element produces the same visual effect, isn't reset by the overflow
+ * change, and is naturally clipped by the pre's hidden overflow. Driving it
+ * through `Element.animate` keeps the styles off the element's `style`
+ * attribute and runs on the compositor, so it doesn't fight the existing
+ * CSS transitions on `code` (e.g. `margin-bottom`).
+ *
+ * Honors `prefers-reduced-motion` by snapping immediately.
+ */
+function smoothCollapseScrollLeft(pre: HTMLElement, duration: number): Animation | null {
+  const startLeft = pre.scrollLeft;
+  if (startLeft <= 0) {
+    return null;
+  }
+  const code = pre.querySelector('code');
+  if (!code || typeof code.animate !== 'function') {
+    return null;
+  }
+
+  // Cancel any leftover scroll-back animation from a previous toggle so we
+  // don't end up with two transforms competing on the same element.
+  scrollbackAnimations.get(pre)?.cancel();
+  scrollbackAnimations.delete(pre);
+
+  // Reset the actual scroll position now; the WAAPI animation visually
+  // compensates by translating the element from `-startLeft` back to `0`.
+  pre.scrollLeft = 0;
+
+  if (prefersReducedMotion() || duration <= 0) {
+    return null;
+  }
+
+  const anim = code.animate(
+    [{ transform: `translateX(${-startLeft}px)` }, { transform: 'translateX(0)' }],
+    {
+      duration,
+      easing: 'cubic-bezier(0, 0, 0.2, 1)',
+      fill: 'none',
+    },
+  );
+  scrollbackAnimations.set(pre, anim);
+  const onSettle = () => {
+    if (scrollbackAnimations.get(pre) === anim) {
+      scrollbackAnimations.delete(pre);
+    }
+  };
+  anim.finished.then(onSettle, onSettle);
+  return anim;
+}
+
+function isElementInViewport(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+  return rect.bottom > 0 && rect.top < window.innerHeight;
+}
+
+/**
+ * Measures the horizontal scrollbar height of a `
` element by
+ * temporarily forcing `overflow-x: scroll`.
+ */
+function measureScrollbarHeight(pre: HTMLElement): number {
+  const prevOverflow = pre.style.overflowX;
+  pre.style.overflowX = 'scroll';
+  const scrollbarHeight = pre.offsetHeight - pre.clientHeight;
+  pre.style.overflowX = prevOverflow;
+  return scrollbarHeight;
+}
+
+function clearGutterState(pre: HTMLElement) {
+  cancelScheduled(gutterCleanupTimers.get(pre));
+  gutterCleanupTimers.delete(pre);
+  const flipTimer = gutterFlipTimers.get(pre);
+  if (flipTimer !== undefined) {
+    clearTimeout(flipTimer);
+    gutterFlipTimers.delete(pre);
+  }
+  pre.removeAttribute(GUTTER_STATE_ATTRIBUTE);
+}
+
+/**
+ * Cancels every animation and timer associated with `pre` (scroll-back
+ * transform, gutter cleanup, gutter from→to flip). Used on hook unmount so
+ * we don't leave WAAPI animations or pending callbacks pointing at a node
+ * that's been removed from the document.
+ */
+function cancelAllForPre(pre: HTMLElement) {
+  scrollbackAnimations.get(pre)?.cancel();
+  scrollbackAnimations.delete(pre);
+  clearGutterState(pre);
+}
+
+/**
+ * Smoothly transitions the horizontal scrollbar gutter on collapse by
+ * swapping the real scrollbar for equivalent padding-bottom, then
+ * animating that padding down to the CSS base value.
+ *
+ * Skips the animation when content doesn't overflow (no scrollbar exists)
+ * or when the browser uses overlay scrollbars (zero height).
+ */
+function animateScrollbarGutter(pre: HTMLElement) {
+  const scrollbarHeight = measureScrollbarHeight(pre);
+  if (scrollbarHeight === 0) {
+    return; // Overlay scrollbars, nothing to do
+  }
+
+  // Only animate if content actually overflows (scrollbar is visible)
+  if (pre.scrollWidth <= pre.clientWidth) {
+    return;
+  }
+
+  clearGutterState(pre);
+  pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'collapse-from');
+
+  // Move into the transition state on the next macrotask. Tracked so the
+  // flip can be cancelled if the component unmounts before it fires.
+  const flipTimer = setTimeout(() => {
+    gutterFlipTimers.delete(pre);
+    pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'collapse-to');
+  }, 0);
+  gutterFlipTimers.set(pre, flipTimer);
+
+  // Schedule cleanup on the animation timeline so DevTools throttling
+  // scales it together with the CSS `margin-bottom` transition that's
+  // doing the actual gutter shrink.
+  const timeout = getTransitionTimeout('collapse');
+  const cleanup = scheduleOnAnimationTimeline(pre, timeout + 30, () => {
+    clearGutterState(pre);
+  });
+  gutterCleanupTimers.set(pre, cleanup);
+}
+
+/**
+ * Smoothly transitions the horizontal scrollbar gutter on expand by
+ * reserving the eventual scrollbar space via padding-bottom first,
+ * then letting CSS swap to real overflow-x at the end of the transition.
+ *
+ * This is primarily needed for the max-size split-frame case where hidden
+ * overflow lines can make the scrollbar appear late during expansion.
+ */
+function animateScrollbarGutterExpand(pre: HTMLElement) {
+  const scrollbarHeight = measureScrollbarHeight(pre);
+  if (scrollbarHeight === 0) {
+    return; // Overlay scrollbars, nothing to do
+  }
+
+  // The  element uses `min-width: fit-content`, so its scrollWidth
+  // reflects the widest line including hidden frames. If that doesn't
+  // exceed the container, no scrollbar will appear after expansion.
+  const code = pre.querySelector('code');
+  if (code && code.scrollWidth <= pre.clientWidth) {
+    return;
+  }
+
+  clearGutterState(pre);
+  pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'expand-from');
+
+  // Move into the transition state on the next macrotask. Tracked so the
+  // flip can be cancelled if the component unmounts before it fires.
+  const flipTimer = setTimeout(() => {
+    gutterFlipTimers.delete(pre);
+    pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'expand-to');
+  }, 0);
+  gutterFlipTimers.set(pre, flipTimer);
+
+  // Schedule cleanup on the animation timeline so the `overflow-x` flip back
+  // to `auto` lines up with the CSS `margin-bottom` and height transitions
+  // even when DevTools throttles animation speed.
+  const timeout = getTransitionTimeout('expand');
+  const cleanup = scheduleOnAnimationTimeline(pre, timeout + 30, () => {
+    clearGutterState(pre);
+  });
+  gutterCleanupTimers.set(pre, cleanup);
+}
+
+export default function useScrollAnchor() {
+  const containerRef = React.useRef(null);
+  const toggleRef = React.useRef(null);
+  // Tracks the cleanup for the currently in-flight `anchorScroll` call so a
+  // new toggle (or unmount) can abort it cleanly instead of leaving a
+  // ResizeObserver and window listeners holding references to detached
+  // nodes.
+  const activeSessionCleanupRef = React.useRef<(() => void) | null>(null);
+  // Tracks the most recently animated `
` so unmount can cancel any
+  // running scroll-back / gutter animations on it. Captured here because
+  // `containerRef.current` may already be null by the time the effect
+  // cleanup runs.
+  const lastPreRef = React.useRef(null);
+
+  // CSS `overflow-anchor: none` on hidden frames (set in CSS) nudges native
+  // scroll anchoring toward the visible highlighted/focus content. In Chromium
+  // and Firefox this usually handles most compensation synchronously, while the
+  // ResizeObserver below smooths any remaining drift so the transition appears
+  // stable and visually "fixed" to the user. In browsers without native
+  // overflow-anchor support (e.g. Safari), the observer is the primary
+  // compensation mechanism.
+
+  React.useEffect(() => {
+    return () => {
+      activeSessionCleanupRef.current?.();
+      activeSessionCleanupRef.current = null;
+      const pre = lastPreRef.current;
+      if (pre) {
+        cancelAllForPre(pre);
+        lastPreRef.current = null;
+      }
+    };
+  }, []);
+
+  const anchorScroll = React.useCallback((direction: 'collapse' | 'expand') => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    // Abort any in-flight session before starting a new one; otherwise the
+    // previous ResizeObserver and window listeners would race with this one.
+    activeSessionCleanupRef.current?.();
+    activeSessionCleanupRef.current = null;
+
+    const primaryAnchor = container.querySelector(ANCHOR_SELECTOR);
+    const toggleAnchor = toggleRef.current;
+
+    let anchor = primaryAnchor ?? toggleAnchor;
+    if (direction === 'collapse' && primaryAnchor && !isElementInViewport(primaryAnchor)) {
+      anchor = toggleAnchor ?? primaryAnchor;
+    }
+
+    if (!anchor) {
+      return;
+    }
+
+    // On collapse, animate the scrollbar gutter (padding swap) to avoid
+    // an instant height shrink when horizontal scrollbar space disappears.
+    // On expand, do the inverse only for truncated/max-size demos where
+    // scrollbar space can appear late and look like a snap.
+    const pre = container.querySelector('pre');
+    if (pre) {
+      lastPreRef.current = pre;
+      if (direction === 'collapse') {
+        // Smoothly return horizontal scroll to the left edge so the focused
+        // region (which usually starts at column 0) is visible after collapse,
+        // and so the fade overlay isn't masking scrolled-away content. We
+        // animate via a transform on the inner `code` element rather than
+        // tweening `pre.scrollLeft`, because the gutter animation below sets
+        // `overflow-x: hidden` which would snap `scrollLeft` to 0 instantly.
+        // Both animations start in the same frame: the scroll-back resets
+        // `scrollLeft` to 0 up front, so the gutter swap's `overflow-x`
+        // change has nothing left to snap.
+        smoothCollapseScrollLeft(pre, 300);
+        animateScrollbarGutter(pre);
+      }
+      if (direction === 'expand') {
+        // Cancel any in-flight collapse scroll-back so its leftover transform
+        // can't drift the code horizontally during the expand transition.
+        scrollbackAnimations.get(pre)?.cancel();
+        scrollbackAnimations.delete(pre);
+        if (pre.querySelector('[data-collapsible]')) {
+          animateScrollbarGutterExpand(pre);
+        }
+      }
+    }
+
+    const initialTop = anchor.getBoundingClientRect().top;
+    let active = true;
+    let cleanupTimer: ReturnType;
+
+    // Use ResizeObserver to compensate only when the container layout
+    // actually changes, rather than polling every animation frame.
+    // Callbacks fire after layout, so getBoundingClientRect() reads
+    // already-computed values without forcing an extra reflow.
+    const observer = new ResizeObserver(() => {
+      if (!active) {
+        return;
+      }
+      const delta = anchor.getBoundingClientRect().top - initialTop;
+      if (Math.abs(delta) > 0.5) {
+        window.scrollBy(0, delta);
+      }
+    });
+
+    // Stop compensating if the user interacts (scroll, click, keyboard),
+    // since UI changes like tab switches can invalidate anchor measurements.
+    function cleanup() {
+      if (!active) {
+        return;
+      }
+      active = false;
+      clearTimeout(cleanupTimer);
+      observer.disconnect();
+      window.removeEventListener('wheel', stopOnUserInteraction);
+      window.removeEventListener('touchmove', stopOnUserInteraction);
+      window.removeEventListener('pointerdown', stopOnUserInteraction);
+      window.removeEventListener('keydown', stopOnUserInteraction);
+      if (activeSessionCleanupRef.current === cleanup) {
+        activeSessionCleanupRef.current = null;
+      }
+    }
+    activeSessionCleanupRef.current = cleanup;
+
+    function stopOnUserInteraction() {
+      cleanup();
+    }
+    window.addEventListener('wheel', stopOnUserInteraction, { passive: true, once: true });
+    window.addEventListener('touchmove', stopOnUserInteraction, { passive: true, once: true });
+    window.addEventListener('pointerdown', stopOnUserInteraction, { passive: true, once: true });
+    window.addEventListener('keydown', stopOnUserInteraction, { passive: true, once: true });
+
+    observer.observe(container);
+
+    // Safety cleanup after the CSS transition completes.
+    const timeout = getTransitionTimeout(direction);
+    cleanupTimer = setTimeout(cleanup, timeout + 500);
+  }, []);
+
+  return { containerRef, toggleRef, anchorScroll };
+}

From 3d69c848b932eb90868b615fab6fc9ba887d6953 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Mon, 27 Apr 2026 15:28:01 -0400
Subject: [PATCH 006/140] Add demo export

Co-authored-by: Copilot 
---
 docs/src/modules/components/DemoContent.tsx | 303 +++++++++++++++++++-
 1 file changed, 302 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index bbf6c9774215ac..4756223367a40b 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -1,20 +1,229 @@
 import * as React from 'react';
 import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
 import { useDemo } from '@mui/internal-docs-infra/useDemo';
+import type { ExportConfig } from '@mui/internal-docs-infra/useDemo';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import MDButton from '@mui/material/Button';
 import MDToggleButton from '@mui/material/ToggleButton';
 import MDToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
+import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import { alpha, styled } from '@mui/material/styles';
 import { useTranslate } from '@mui/docs/i18n';
+import DemoContext from './DemoContext';
+import type { SandboxConfig } from './DemoContext';
 import useScrollAnchor from './useScrollAnchor';
 
 // Dark code-panel background used by the highlighted source viewer.
 const CODE_BG = 'hsl(210, 25%, 9%)';
 
+// ---------------------------------------------------------------------------
+// Sandbox export configuration — mirrors docs/src/modules/sandbox/Dependencies
+// so StackBlitz / CodeSandbox previews resolve packages the same way as the
+// existing Demo.js path.
+// ---------------------------------------------------------------------------
+
+// See docs/src/modules/sandbox/Dependencies.ts
+const PACKAGES_WITH_BUNDLED_TYPES = [
+  'date-fns',
+  '@emotion/react',
+  '@emotion/styled',
+  'dayjs',
+  'clsx',
+  '@react-spring/web',
+];
+const MUI_NPM_ORGS = ['@mui', '@base-ui', '@pigment-css', '@toolpad'];
+
+function isMuiPackage(name: string): boolean {
+  return MUI_NPM_ORGS.some((org) => name === org || name.startsWith(`${org}/`));
+}
+
+function getTypesPackageName(name: string): string {
+  // https://github.com/DefinitelyTyped/DefinitelyTyped#what-about-scoped-packages
+  const resolved = name.startsWith('@') ? name.slice(1).replace('/', '__') : name;
+  return `@types/${resolved}`;
+}
+
+/**
+ * Build the MUI version map, mirroring `getMuiPackageVersion` in
+ * docs/src/modules/sandbox/Dependencies.ts (including pkg.pr.new pinning when
+ * a commit ref is available for material-ui PR previews).
+ */
+function buildMuiVersions(commitRef?: string): Record {
+  const muiPackageNames = [
+    'material',
+    'icons-material',
+    'lab',
+    'styled-engine',
+    'system',
+    'theming',
+    'classnames',
+    'base',
+    'utils',
+    'material-nextjs',
+    'joy',
+  ];
+
+  const useCommitRef =
+    commitRef !== undefined &&
+    process.env.SOURCE_CODE_REPO === 'https://github.com/mui/material-ui';
+
+  const versions: Record = {};
+  for (const shortName of muiPackageNames) {
+    let fullName = `@mui/${shortName}`;
+    if (shortName === 'theming') {
+      fullName = '@mui/private-theming';
+    } else if (shortName === 'classnames') {
+      fullName = '@mui/private-classnames';
+    }
+
+    if (useCommitRef) {
+      versions[fullName] = `https://pkg.pr.new/mui/material-ui/@mui/${shortName}@${commitRef}`;
+    } else if (shortName === 'joy' || shortName === 'base') {
+      versions[fullName] = 'latest';
+    } else {
+      // #npm-tag-reference
+      versions[fullName] = 'next';
+    }
+  }
+  return versions;
+}
+
+interface SandboxResolvers {
+  versions: Record;
+  resolveDependencies: NonNullable;
+}
+
+/**
+ * Build dependency resolvers that mirror docs/src/modules/sandbox/Dependencies.ts
+ * for use with `useDemo`'s ExportConfig. The returned `resolveDependencies` is
+ * called per-imported-package by exportVariant; it injects MUI peer deps and
+ * `@types/*` packages the same way the existing demo system does.
+ *
+ * Note: @types/* are added to dependencies (rather than devDependencies) because
+ * ExportConfig has no per-package devDep resolver. This is functionally
+ * equivalent for StackBlitz/CodeSandbox install resolution.
+ */
+function buildSandboxResolvers(options: {
+  csbConfig?: SandboxConfig;
+  useTypescriptRef: React.RefObject;
+  commitRef?: string;
+}): SandboxResolvers {
+  const { csbConfig, useTypescriptRef, commitRef } = options;
+
+  let versions: Record = {
+    react: 'latest',
+    'react-dom': 'latest',
+    '@emotion/react': 'latest',
+    '@emotion/styled': 'latest',
+    ...buildMuiVersions(commitRef),
+  };
+
+  if (csbConfig?.getVersions) {
+    versions = csbConfig.getVersions(versions, { muiCommitRef: commitRef });
+  }
+
+  const resolveDependencies: NonNullable = (packageName) => {
+    const result: Record = {};
+    result[packageName] = versions[packageName] ?? 'latest';
+
+    // Peer dep auto-injection — see `includePeerDependencies` in
+    // docs/src/modules/sandbox/Dependencies.ts.
+    if (
+      packageName === '@mui/lab' ||
+      packageName === '@mui/icons-material' ||
+      packageName === '@mui/x-data-grid'
+    ) {
+      result['@mui/material'] = versions['@mui/material'] ?? 'latest';
+    }
+
+    // TS variant: pull in @types/* for non-bundled, non-MUI deps. Replicates
+    // `addTypeDeps` from docs/src/modules/sandbox/Dependencies.ts.
+    if (
+      useTypescriptRef.current &&
+      !PACKAGES_WITH_BUNDLED_TYPES.includes(packageName) &&
+      !isMuiPackage(packageName)
+    ) {
+      result[getTypesPackageName(packageName)] = 'latest';
+    }
+
+    if (csbConfig?.postProcessImport) {
+      const extra = csbConfig.postProcessImport(packageName);
+      if (extra) {
+        Object.assign(result, extra);
+      }
+    }
+
+    return result;
+  };
+
+  return { versions, resolveDependencies };
+}
+
+/**
+ * Build a rootIndexTemplate that mirrors `getRootIndex` from
+ * docs/src/modules/sandbox/CreateReactApp.ts. Substitutes the dynamic
+ * import string from exportVariant for the legacy `import Demo from './Demo'`.
+ */
+function buildRootIndexTemplate(
+  csbConfig: SandboxConfig | undefined,
+): ExportConfig['rootIndexTemplate'] | undefined {
+  if (!csbConfig?.getRootIndex) {
+    return undefined;
+  }
+  return ({ importString, useTypescript }) => {
+    const codeVariant = useTypescript ? 'TS' : 'JS';
+    const legacy = csbConfig.getRootIndex(codeVariant);
+    // Replace the legacy `import Demo from './Demo';` line with the dynamic
+    // entrypoint import emitted by exportVariant, then rename the rendered
+    // `` element to `` (the exportVariant default).
+    return legacy
+      .replace(/^import\s+Demo\s+from\s+['"]\.\/Demo['"];?\s*$/m, importString)
+      .replace(//g, '');
+  };
+}
+
+/**
+ * HTML template matching `getHtml` in docs/src/modules/sandbox/CreateReactApp.ts.
+ * Injects the Inter + Roboto + Material Icons fonts the existing demo system
+ * ships with, so sandboxes look identical to the legacy ones.
+ */
+const buildHtmlTemplate: ExportConfig['htmlTemplate'] = ({
+  language,
+  title,
+  entrypoint,
+  variant,
+}) => {
+  const raw = typeof variant?.source === 'string' ? variant.source : '';
+  const useTwoTone = raw.includes('material-icons-two-tone');
+  return `
+
+  
+    
+    ${title}
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    

+    ${entrypoint ? `` : ''}
+  
+`;
+};
+
 // ---------------------------------------------------------------------------
 // Styled components — ported from Demo.js, DemoToolbarRoot.ts, DemoToolbar.js
 // ---------------------------------------------------------------------------
@@ -508,7 +717,81 @@ function DemoTooltip(props: React.ComponentProps) {
 // ---------------------------------------------------------------------------
 
 export default function DemoContent(props: ContentProps) {
-  const demo = useDemo(props);
+  const csbContext = React.useContext(DemoContext);
+  const csbConfig = csbContext?.csb;
+
+  // resolveDependencies needs to know whether we're exporting TS or JS, but
+  // selectedTransform is only known after useDemo(). A ref bridges this — it's
+  // read at click time (when openStackBlitz/openCodeSandbox fire), not at
+  // render time, so the circular dependency is harmless.
+  const useTypescriptRef = React.useRef(true);
+
+  const exportConfig = React.useMemo(() => {
+    const commitRef = process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined;
+    const { versions, resolveDependencies } = buildSandboxResolvers({
+      csbConfig,
+      useTypescriptRef,
+      commitRef,
+    });
+    const config: ExportConfig = {
+      versions,
+      resolveDependencies,
+      htmlTemplate: buildHtmlTemplate,
+      // Emotion is a peer dep always shipped with MUI demos (see
+      // `includePeerDependencies` in docs/src/modules/sandbox/Dependencies.ts).
+      // exportVariant only auto-seeds react/react-dom from `versions`, so add
+      // emotion explicitly here.
+      dependencies: {
+        '@emotion/react': versions['@emotion/react'] ?? 'latest',
+        '@emotion/styled': versions['@emotion/styled'] ?? 'latest',
+      },
+    };
+
+    // fallbackDependency: ensure the product's primary package is always
+    // present even when the demo doesn't import it directly. Match the version
+    // produced by buildSandboxResolvers so we don't override pinning.
+    if (csbConfig?.fallbackDependency) {
+      const { name } = csbConfig.fallbackDependency;
+      config.dependencies = {
+        ...config.dependencies,
+        [name]: versions[name] ?? csbConfig.fallbackDependency.version,
+      };
+    }
+
+    const rootIndexTemplate = buildRootIndexTemplate(csbConfig);
+    if (rootIndexTemplate) {
+      config.rootIndexTemplate = rootIndexTemplate;
+    }
+
+    return config;
+  }, [csbConfig]);
+
+  const demo = useDemo(props, {
+    export: exportConfig,
+    // CodeSandbox uses CRA, which needs a node-style tsconfig (not Vite's
+    // `moduleResolution: 'bundler'`). Mirror docs/src/modules/sandbox/
+    // CreateReactApp.ts `getTsconfig`.
+    exportCodeSandbox: {
+      tsconfigOptions: {
+        target: 'es5',
+        lib: ['dom', 'dom.iterable', 'esnext'],
+        allowJs: true,
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true,
+        forceConsistentCasingInFileNames: true,
+        module: 'esnext',
+        moduleResolution: 'node',
+        jsx: 'react-jsx',
+        // Drop Vite-only options merged in by exportVariant defaults.
+        allowImportingTsExtensions: undefined,
+        useDefineForClassFields: undefined,
+        noUnusedLocals: undefined,
+        noUnusedParameters: undefined,
+      },
+    },
+  });
+  useTypescriptRef.current = demo.selectedTransform !== 'js';
+
   const t = useTranslate();
   // When the rendered code has collapsible frames (from `enhanceCodeEmphasis`),
   // this expands all hidden context lines. Demos without emphasis frames render
@@ -586,6 +869,24 @@ export default function DemoContent(props: ContentProps) {
           {/* Expand / collapse emphasis frames */}
           {showCodeLabel}
 
+          {/* StackBlitz */}
+          
+            
+              
+                
+              
+            
+          
+
+          {/* CodeSandbox */}
+          
+            
+              
+                
+              
+            
+          
+
           {/* Copy */}
           
             

From 900343ed1a31515379df1709894561a97a59edd1 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Mon, 27 Apr 2026 17:59:36 -0400
Subject: [PATCH 007/140] Add reset focus

Co-authored-by: Copilot 
---
 docs/package.json                           |   2 +-
 docs/src/modules/components/DemoContent.tsx |  12 ++-
 pnpm-lock.yaml                              | 108 +++++++++++++++-----
 3 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index ca5cb8323b1fae..e44435e6cbba23 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index 4756223367a40b..df9b6bfc004d62 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -10,6 +10,7 @@ import MDToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/Tog
 import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
 import { alpha, styled } from '@mui/material/styles';
 import { useTranslate } from '@mui/docs/i18n';
 import DemoContext from './DemoContext';
@@ -821,12 +822,12 @@ export default function DemoContent(props: ContentProps) {
   }, [anchorScroll, demo]);
 
   return (
-    
+    
       {demo.slug && }
 
       {/* Component Preview */}
       
-        
+        
         {demo.component}
       
 
@@ -893,6 +894,13 @@ export default function DemoContent(props: ContentProps) {
               
             
           
+
+          {/* Reset focus */}
+          
+            
+              
+            
+          
         
       
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff5f105e146de3..dfe1f605a8ab0f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -246,7 +246,7 @@ importers:
         version: 0.10.1(@vitest/utils@4.0.15)(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13)
       webpack:
         specifier: 5.105.2
-        version: 5.105.2(webpack-cli@6.0.1)
+        version: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
       webpack-cli:
         specifier: 6.0.1
         version: 6.0.1(webpack@5.105.2)
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -1630,7 +1630,7 @@ importers:
         version: 3.3.3
       html-webpack-plugin:
         specifier: 5.6.6
-        version: 5.6.6(webpack@5.105.2(webpack-cli@6.0.1))
+        version: 5.6.6(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2)))
       prop-types:
         specifier: 15.8.1
         version: 15.8.1
@@ -1663,7 +1663,7 @@ importers:
         version: 1.6.28
       webpack:
         specifier: 5.105.2
-        version: 5.105.2(webpack-cli@6.0.1)
+        version: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
       yargs:
         specifier: 17.7.2
         version: 17.7.2
@@ -3708,6 +3708,25 @@ packages:
       typescript:
         optional: true
 
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6}
+    version: 0.11.0
+    engines: {node: '>=22.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      next: ^15.0.0 || ^16.0.0
+      prettier: ^3.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      typescript: ^6.0.2
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      next:
+        optional: true
+      prettier:
+        optional: true
+
   '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801':
     resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801}
     version: 0.11.0
@@ -15152,6 +15171,49 @@ snapshots:
       - supports-color
       - vitest
 
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@babel/standalone': 7.29.2
+      '@orama/orama': 3.1.18
+      '@orama/plugin-qps': 3.1.18
+      '@orama/stemmers': 3.1.18
+      '@orama/stopwords': 3.1.18
+      '@wooorm/starry-night': 3.9.0
+      chalk: 5.6.2
+      clipboard-copy: 4.0.1
+      es-toolkit: 1.46.0
+      fflate: 0.8.2
+      hast-util-to-jsx-runtime: 2.3.6
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.2.0
+      jsondiffpatch: 0.7.3
+      kebab-case: 2.0.2
+      lz-string: 1.5.0
+      path-module: 0.1.2
+      proper-lockfile: 4.1.2
+      react: 19.2.4
+      remark-gfm: 4.0.1
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      remark-typography: 0.7.3
+      typescript: 5.9.3
+      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
+      uint8-to-base64: 0.2.1
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      use-editable: 2.3.3(react@19.2.4)
+      vscode-oniguruma: 2.0.1
+      yargs: 18.0.0
+      zx: 8.8.5
+    optionalDependencies:
+      '@types/react': 19.2.14
+      next: 15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
@@ -17609,19 +17671,19 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
-  '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)':
+  '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)':
     dependencies:
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
       webpack-cli: 6.0.1(webpack@5.105.2)
 
-  '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)':
+  '@webpack-cli/info@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)':
     dependencies:
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
       webpack-cli: 6.0.1(webpack@5.105.2)
 
-  '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)':
+  '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)':
     dependencies:
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
       webpack-cli: 6.0.1(webpack@5.105.2)
 
   '@wooorm/starry-night@3.9.0':
@@ -17996,7 +18058,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.6
       find-up: 5.0.0
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
 
   babel-merge@3.0.0(@babel/core@7.28.6):
     dependencies:
@@ -19377,7 +19439,7 @@ snapshots:
       lodash: 4.17.21
       resolve: 2.0.0-next.5
       semver: 5.7.2
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -20361,7 +20423,7 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@5.6.6(webpack@5.105.2(webpack-cli@6.0.1)):
+  html-webpack-plugin@5.6.6(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -20369,7 +20431,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.3.0
     optionalDependencies:
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
 
   htmlparser2@6.1.0:
     dependencies:
@@ -24363,14 +24425,14 @@ snapshots:
 
   temp-dir@1.0.0: {}
 
-  terser-webpack-plugin@5.3.16(webpack@5.105.2):
+  terser-webpack-plugin@5.3.16(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
       serialize-javascript: 6.0.2
       terser: 5.39.0
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
 
   terser@5.39.0:
     dependencies:
@@ -24973,9 +25035,9 @@ snapshots:
   webpack-cli@6.0.1(webpack@5.105.2):
     dependencies:
       '@discoveryjs/json-ext': 0.6.3
-      '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)
-      '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)
-      '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack@5.105.2)
+      '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)
+      '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)
+      '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1(webpack@5.105.2))(webpack@5.105.2)
       colorette: 2.0.20
       commander: 12.1.0
       cross-spawn: 7.0.6
@@ -24984,7 +25046,7 @@ snapshots:
       import-local: 3.1.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.105.2(webpack-cli@6.0.1)
+      webpack: 5.105.2(webpack-cli@6.0.1(webpack@5.105.2))
       webpack-merge: 6.0.1
 
   webpack-merge@6.0.1:
@@ -24995,7 +25057,7 @@ snapshots:
 
   webpack-sources@3.3.3: {}
 
-  webpack@5.105.2(webpack-cli@6.0.1):
+  webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2)):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -25019,7 +25081,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(webpack@5.105.2)
+      terser-webpack-plugin: 5.3.16(webpack@5.105.2(webpack-cli@6.0.1(webpack@5.105.2)))
       watchpack: 2.5.1
       webpack-sources: 3.3.3
     optionalDependencies:

From 66e0de22c575e57db9f18e576c49d9ab75230476 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Mon, 27 Apr 2026 22:23:03 -0400
Subject: [PATCH 008/140] Improve indent handling

---
 docs/next.config.ts                          |  9 ++++++++-
 docs/package.json                            |  2 +-
 docs/src/modules/components/AppLayoutDocs.js |  9 ++++++++-
 docs/src/modules/components/DemoContent.tsx  | 19 ++++++++++++++++++-
 pnpm-lock.yaml                               | 16 ++++++++--------
 5 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/docs/next.config.ts b/docs/next.config.ts
index 6407f4a77d2712..4e42fb1a0815f0 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -173,7 +173,14 @@ export default withDocsInfra({
             test: /[/\\]demos[/\\][^/\\]+[/\\]index\.ts$/,
             use: [
               options.defaultLoaders.babel,
-              '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter',
+              {
+                loader: '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter',
+                options: {
+                  // The CSS in DemoContent.tsx uses `data-frame-indent` to
+                  // shift highlighted/focus frames left when collapsed.
+                  emphasisOptions: { emitFrameIndent: true },
+                },
+              },
             ],
           },
           {
diff --git a/docs/package.json b/docs/package.json
index e44435e6cbba23..cf2b659ee9e66b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index 2155359931ef2f..99ecc856a322b7 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -20,6 +20,13 @@ import BackToTop from 'docs/src/modules/components/BackToTop';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
 import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
 import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { createEnhanceCodeEmphasis } from '@mui/internal-docs-infra/pipeline/enhanceCodeEmphasis';
+
+// Opt in to the `data-frame-indent` attribute that DemoContent's CSS uses
+// to shift highlighted/focus frames left when collapsed. This mirrors the
+// `emphasisOptions` configured for the build-time loader in next.config.ts
+// so runtime-highlighted source (e.g. on variant switch) behaves the same.
+const sourceEnhancers = [createEnhanceCodeEmphasis({ emitFrameIndent: true })];
 
 const TOC_WIDTH = 242;
 
@@ -168,7 +175,7 @@ export default function AppLayoutDocs(props) {
             See https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ for more details.
           */}
           
-            {children}
+            {children}
             
           
           {disableToc ? null : }
diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index df9b6bfc004d62..2f564f1cb24dbb 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -435,6 +435,23 @@ const CodeViewer = styled('div', {
     whiteSpace: 'pre',
   },
 
+  // Hide the selection highlight on the inter-line gap text nodes (the
+  // literal `\n` between `.line` spans). Those characters are real text
+  // positions in contentEditable, so when a user drags a selection across
+  // multiple lines the browser paints a `line-height: 0` highlight strip
+  // for each gap — visible as a thin horizontal bar between lines. Making
+  // the frame's `::selection` transparent removes the strip; the explicit
+  // `.line ::selection` rule re-enables the standard system highlight
+  // inside actual code lines.
+  '& pre > code > .frame[data-lined]::selection, & pre > code > .frame[data-lined] *::selection': {
+    background: 'transparent',
+  },
+  '& pre > code > .frame[data-lined] .line::selection, & pre > code > .frame[data-lined] .line *::selection':
+    {
+      background: 'Highlight',
+      color: 'HighlightText',
+    },
+
   // Highlighted frames get rounded corners and a subtle background.
   '& .frame[data-frame-type="highlighted"], & .frame[data-frame-type="highlighted-unfocused"]': {
     background: alpha(theme.palette.primary.main, 0.18),
@@ -811,7 +828,7 @@ export default function DemoContent(props: ContentProps) {
     [demo],
   );
 
-  const showCodeLabel = demo.expanded ? t('hideSource') : t('showSource');
+  const showCodeLabel = demo.expanded ? t('hideFullSource') : t('showFullSource');
 
   const expandedRef = React.useRef(demo.expanded);
   expandedRef.current = demo.expanded;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dfe1f605a8ab0f..b7de85fe4bc92b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3708,8 +3708,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15171,7 +15171,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@021d8a6(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2
@@ -15214,7 +15214,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From e90b3abe78fef29a34032a03396e5e4240fe0685 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Mon, 27 Apr 2026 23:12:06 -0400
Subject: [PATCH 009/140] Update theme

---
 docs/public/static/styles/syntax.css | 112 ++++++++++-----------------
 1 file changed, 40 insertions(+), 72 deletions(-)

diff --git a/docs/public/static/styles/syntax.css b/docs/public/static/styles/syntax.css
index 2d2d920c30c0bb..b855cb74eedf1a 100644
--- a/docs/public/static/styles/syntax.css
+++ b/docs/public/static/styles/syntax.css
@@ -3,7 +3,7 @@
 :root {
   /* Core syntax colors (from prism-okaidia) */
   --color-prettylights-syntax-comment: #b2b2b2;
-  --color-prettylights-syntax-constant: #e6db74;
+  --color-prettylights-syntax-constant: #f8f8f2;
   --color-prettylights-syntax-constant-other-reference-link: #a6e22e;
   --color-prettylights-syntax-entity: #a6e22e;
   --color-prettylights-syntax-entity-name: #e6db74;
@@ -39,18 +39,21 @@
   --color-prettylights-syntax-meta-diff-range: #b78eff;
 
   /* Docs-infra extensions */
-  --color-docs-infra-syntax-nullish: #b2b2b2;
-  --color-docs-infra-syntax-other: #f8f8f2;
   --color-docs-infra-syntax-number: #b78eff;
   --color-docs-infra-syntax-boolean: #b78eff;
+  --color-docs-infra-syntax-nullish: #b2b2b2;
+  --color-docs-infra-syntax-attr-key: #a6e22e;
   --color-docs-infra-syntax-attr-value: #e6db74;
+  --color-docs-infra-syntax-attr-value-quote: #f8f8f2;
   --color-docs-infra-syntax-attr-equals: #f8f8f2;
-  --color-docs-infra-syntax-bracket-tag: #f8f8f2;
-  --color-docs-infra-syntax-bracket-curly: #f8f8f2;
-  --color-docs-infra-syntax-bracket-round: #f8f8f2;
-  --color-docs-infra-syntax-bracket-square: #f8f8f2;
-  --color-docs-infra-syntax-bracket-angle: #f8f8f2;
-  --color-docs-infra-syntax-bracket-quote: #f8f8f2;
+  --color-docs-infra-syntax-data-attr: #a6e22e;
+  --color-docs-infra-syntax-css-property: #fc929e;
+  --color-docs-infra-syntax-css-value: #f8f8f2;
+  --color-docs-infra-syntax-this: #66d9ef;
+  --color-docs-infra-syntax-builtin-type: #66d9ef;
+  --color-docs-infra-syntax-jsx: #e6db74;
+  --color-docs-infra-syntax-html-tag: #fc929e;
+  --color-docs-infra-syntax-jsx-tag: #fc929e;
 }
 
 .pl-c {
@@ -178,99 +181,64 @@
 
 /* Docs-infra extensions (.di-* classes) */
 
-/* Nullish values (null, undefined) */
-.di-n {
-  color: var(--color-docs-infra-syntax-nullish);
-}
-
-/* Default text color */
-.di-d {
-  color: #f8f8f2;
-}
-
-/* Parameter highlighting */
-.di-p {
-  color: var(--color-prettylights-syntax-storage-modifier-import);
-}
-
-/* Misc/other markup styling */
-.di-o {
-  color: var(--color-docs-infra-syntax-other);
-}
-
-/* Number literals */
-.di-nu {
+.di-num {
   color: var(--color-docs-infra-syntax-number);
 }
 
-/* Boolean literals */
-.di-bo {
+.di-bool {
   color: var(--color-docs-infra-syntax-boolean);
 }
 
-/* Attribute values */
-.di-av {
-  color: var(--color-docs-infra-syntax-attr-value);
+.di-n {
+  color: var(--color-docs-infra-syntax-nullish);
 }
 
-/* Attribute equals sign */
-.di-ae {
-  color: var(--color-docs-infra-syntax-attr-equals);
+.di-ak {
+  color: var(--color-docs-infra-syntax-attr-key);
 }
 
-/* Bracket types */
-.di-bt {
-  color: var(--color-docs-infra-syntax-bracket-tag);
+.di-av {
+  color: var(--color-docs-infra-syntax-attr-value);
 }
 
-.di-bc {
-  color: var(--color-docs-infra-syntax-bracket-curly);
+.di-av .pl-pds {
+  color: var(--color-docs-infra-syntax-attr-value-quote);
 }
 
-.di-br {
-  color: var(--color-docs-infra-syntax-bracket-round);
+.di-ae {
+  color: var(--color-docs-infra-syntax-attr-equals);
 }
 
-.di-bs {
-  color: var(--color-docs-infra-syntax-bracket-square);
+.di-da {
+  color: var(--color-docs-infra-syntax-data-attr);
 }
 
-.di-ba {
-  color: var(--color-docs-infra-syntax-bracket-angle);
+.di-cp {
+  color: var(--color-docs-infra-syntax-css-property);
 }
 
-.di-bq {
-  color: var(--color-docs-infra-syntax-bracket-quote);
+.di-cv {
+  color: var(--color-docs-infra-syntax-css-value);
 }
 
-/* Diff additions */
-.di-ins {
-  color: var(--color-prettylights-syntax-markup-inserted-text);
-  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+.di-this {
+  color: var(--color-docs-infra-syntax-this);
 }
 
-/* Diff deletions */
-.di-del {
-  color: var(--color-prettylights-syntax-markup-deleted-text);
-  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+.di-bt {
+  color: var(--color-docs-infra-syntax-builtin-type);
 }
 
-/* Diff changes */
-.di-chg {
-  color: var(--color-prettylights-syntax-markup-changed-text);
-  background-color: var(--color-prettylights-syntax-markup-changed-bg);
+.di-jsx {
+  color: var(--color-docs-infra-syntax-jsx);
 }
 
-/* Diff ignored/untracked */
-.di-ign {
-  color: var(--color-prettylights-syntax-markup-ignored-text);
-  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+.di-ht {
+  color: var(--color-docs-infra-syntax-html-tag);
 }
 
-/* Diff range indicator */
-.di-rng {
-  font-weight: bold;
-  color: var(--color-prettylights-syntax-meta-diff-range);
+.di-jt {
+  color: var(--color-docs-infra-syntax-jsx-tag);
 }
 
 /* Line highlighting */

From 66b856d80bf150575e47e01482a79e08e6a39f3d Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 28 Apr 2026 00:35:48 -0400
Subject: [PATCH 010/140] bump docs-infra

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index cf2b659ee9e66b..fea8778d97406d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7de85fe4bc92b..324a05aded9e1f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a':
+    resolution: {integrity: sha512-VQHOrESyQINyaQjswe5UwcpuA0P4IA4KSGlo7fGDeQEjNBaH/eTETOPR4BY5YbkxhUdJQppOjDvcvLL91i4LJQ==, tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15214,7 +15214,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@ff387f9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From f515075dc882decc92c4905dc321a86fb5b4ee21 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 28 Apr 2026 09:11:09 -0400
Subject: [PATCH 011/140] Fix backspace bug

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index fea8778d97406d..e5988f091f1c7e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 324a05aded9e1f..94c8cd91504650 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3708,8 +3708,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a':
-    resolution: {integrity: sha512-VQHOrESyQINyaQjswe5UwcpuA0P4IA4KSGlo7fGDeQEjNBaH/eTETOPR4BY5YbkxhUdJQppOjDvcvLL91i4LJQ==, tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15171,7 +15171,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2
@@ -15214,7 +15214,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d36d97a(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From dd91265d721631fc1ad7245dec523a02b09a9856 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 28 Apr 2026 11:34:19 -0400
Subject: [PATCH 012/140] bump docs-infra

---
 docs/package.json |  2 +-
 package.json      |  2 +-
 pnpm-lock.yaml    | 76 +++++------------------------------------------
 3 files changed, 9 insertions(+), 71 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index e5988f091f1c7e..dc06ef9518aba3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/package.json b/package.json
index 5e1136c378e9cf..ace20ff8991cdf 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.21",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.61",
     "@mui/internal-code-infra": "0.0.3-canary.94",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.0",
     "@mui/internal-scripts": "workspace:^",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94c8cd91504650..6ba3bf678eecc7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,8 +71,8 @@ importers:
         specifier: 0.0.3-canary.94
         version: 0.0.3-canary.94(@next/eslint-plugin-next@15.5.12)(@types/node@20.19.33)(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-webpack@0.13.10)(eslint@9.39.2(jiti@2.6.1))(postcss@8.5.6)(prettier@3.8.1)(stylelint@17.3.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3708,27 +3708,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548}
-    version: 0.11.0
-    engines: {node: '>=22.18.0'}
-    hasBin: true
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      next: ^15.0.0 || ^16.0.0
-      prettier: ^3.0.0
-      react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      typescript: ^6.0.2
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      next:
-        optional: true
-      prettier:
-        optional: true
-
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15171,50 +15152,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@33be548(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
-    dependencies:
-      '@babel/runtime': 7.28.6
-      '@babel/standalone': 7.29.2
-      '@orama/orama': 3.1.18
-      '@orama/plugin-qps': 3.1.18
-      '@orama/stemmers': 3.1.18
-      '@orama/stopwords': 3.1.18
-      '@wooorm/starry-night': 3.9.0
-      chalk: 5.6.2
-      clipboard-copy: 4.0.1
-      es-toolkit: 1.46.0
-      fflate: 0.8.2
-      hast-util-to-jsx-runtime: 2.3.6
-      hast-util-to-text: 4.0.2
-      import-meta-resolve: 4.2.0
-      jsondiffpatch: 0.7.3
-      kebab-case: 2.0.2
-      lz-string: 1.5.0
-      path-module: 0.1.2
-      proper-lockfile: 4.1.2
-      react: 19.2.4
-      remark-gfm: 4.0.1
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      remark-typography: 0.7.3
-      typescript: 5.9.3
-      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
-      uint8-to-base64: 0.2.1
-      unified: 11.0.5
-      unist-util-visit: 5.1.0
-      use-editable: 2.3.3(react@19.2.4)
-      vscode-oniguruma: 2.0.1
-      yargs: 18.0.0
-      zx: 8.8.5
-    optionalDependencies:
-      '@types/react': 19.2.14
-      next: 15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      prettier: 3.8.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@992f801(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From df214d2b3a3acf742d26faea0cd84a8d84c98379 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 5 May 2026 20:49:22 -0400
Subject: [PATCH 013/140] bump docs-infra

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 69 +++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index dc06ef9518aba3..5ec4516ac8136c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ba3bf678eecc7..987afcc07a54f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3727,6 +3727,26 @@ packages:
       prettier:
         optional: true
 
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9}
+    version: 0.11.0
+    engines: {node: '>=22.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      next: ^15.0.0 || ^16.0.0
+      prettier: ^3.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+      typescript: ^6.0.2
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      next:
+        optional: true
+      prettier:
+        optional: true
+
   '@mui/internal-netlify-cache@0.0.3-canary.0':
     resolution: {integrity: sha512-5QPmAEpzgMTNe6djyApxiczzDUDy71iRk19w0EFfzknDo3hzz4DmFvaSFXUrEDk2KUDlVwdZ7qhODMbHB88hcw==}
 
@@ -11979,6 +11999,7 @@ packages:
 
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   v8-to-istanbul@9.0.1:
@@ -15195,6 +15216,50 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@babel/standalone': 7.29.2
+      '@orama/orama': 3.1.18
+      '@orama/plugin-qps': 3.1.18
+      '@orama/stemmers': 3.1.18
+      '@orama/stopwords': 3.1.18
+      '@wooorm/starry-night': 3.9.0
+      chalk: 5.6.2
+      clipboard-copy: 4.0.1
+      es-toolkit: 1.46.0
+      fflate: 0.8.2
+      hast-util-to-jsx-runtime: 2.3.6
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.2.0
+      jsondiffpatch: 0.7.3
+      kebab-case: 2.0.2
+      lz-string: 1.5.0
+      path-module: 0.1.2
+      proper-lockfile: 4.1.2
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      remark-gfm: 4.0.1
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      remark-typography: 0.7.3
+      typescript: 5.9.3
+      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
+      uint8-to-base64: 0.2.1
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      use-editable: 2.3.3(react@19.2.4)
+      vscode-oniguruma: 2.0.1
+      yargs: 18.0.0
+      zx: 8.8.5
+    optionalDependencies:
+      '@types/react': 19.2.14
+      next: 15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@mui/internal-netlify-cache@0.0.3-canary.0': {}
 
   '@mui/internal-test-utils@2.0.18-canary.8(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.15)(chai@6.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13)':

From 752c409563257897ce0c01265e890d45763addf0 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 5 May 2026 21:26:32 -0400
Subject: [PATCH 014/140] bump docs-infra

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 5ec4516ac8136c..241c6743d0b1c9 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 987afcc07a54f2..15811187e64628 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3708,8 +3708,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -3718,6 +3718,7 @@ packages:
       next: ^15.0.0 || ^16.0.0
       prettier: ^3.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
       typescript: ^6.0.2
     peerDependenciesMeta:
       '@types/react':
@@ -3727,8 +3728,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -3737,7 +3738,6 @@ packages:
       next: ^15.0.0 || ^16.0.0
       prettier: ^3.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
       typescript: ^6.0.2
     peerDependenciesMeta:
       '@types/react':
@@ -15173,7 +15173,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2
@@ -15195,6 +15195,7 @@ snapshots:
       path-module: 0.1.2
       proper-lockfile: 4.1.2
       react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
       remark-gfm: 4.0.1
       remark-mdx: 3.1.1
       remark-parse: 11.0.0
@@ -15216,7 +15217,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@9c41eb9(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2
@@ -15238,7 +15239,6 @@ snapshots:
       path-module: 0.1.2
       proper-lockfile: 4.1.2
       react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
       remark-gfm: 4.0.1
       remark-mdx: 3.1.1
       remark-parse: 11.0.0

From 384de67603f799a0e56d25033e1c588ca43f83cd Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 5 May 2026 23:02:44 -0400
Subject: [PATCH 015/140] Add demo reset

Co-authored-by: Copilot 
---
 docs/package.json                           |  2 +-
 docs/src/modules/components/DemoContent.tsx |  8 ++++++++
 pnpm-lock.yaml                              | 20 ++++++++++----------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 241c6743d0b1c9..372993eb249eba 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index 2f564f1cb24dbb..c6b154261c4513 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -10,6 +10,7 @@ import MDToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/Tog
 import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
 import { alpha, styled } from '@mui/material/styles';
 import { useTranslate } from '@mui/docs/i18n';
@@ -918,6 +919,13 @@ export default function DemoContent(props: ContentProps) {
               
             
           
+
+          {/* Reset demo */}
+          
+            
+              
+            
+          
         
       
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15811187e64628..8432ed29003767 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3708,8 +3708,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -3718,7 +3718,6 @@ packages:
       next: ^15.0.0 || ^16.0.0
       prettier: ^3.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
       typescript: ^6.0.2
     peerDependenciesMeta:
       '@types/react':
@@ -3728,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -3738,6 +3737,7 @@ packages:
       next: ^15.0.0 || ^16.0.0
       prettier: ^3.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
       typescript: ^6.0.2
     peerDependenciesMeta:
       '@types/react':
@@ -15173,7 +15173,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@4639835(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2
@@ -15195,7 +15195,6 @@ snapshots:
       path-module: 0.1.2
       proper-lockfile: 4.1.2
       react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
       remark-gfm: 4.0.1
       remark-mdx: 3.1.1
       remark-parse: 11.0.0
@@ -15217,7 +15216,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2
@@ -15239,6 +15238,7 @@ snapshots:
       path-module: 0.1.2
       proper-lockfile: 4.1.2
       react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
       remark-gfm: 4.0.1
       remark-mdx: 3.1.1
       remark-parse: 11.0.0

From 30222eff8c3228126bf273a518b09f076646d59d Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 5 May 2026 23:26:47 -0400
Subject: [PATCH 016/140] Add focus trap

---
 docs/package.json                           |  2 +-
 docs/src/modules/components/DemoContent.tsx | 42 +++++++++++++++++++++
 pnpm-lock.yaml                              | 10 ++---
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 372993eb249eba..7c888b05115e6d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index c6b154261c4513..18f892ef2dba01 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -521,6 +521,48 @@ const CodeViewer = styled('div', {
     padding: '2px 4px',
   },
 
+  // ---- Editable code wrapper ----
+  // Focus-trap wrapper added by `
` when `setSource` is provided. The
+  // wrapper is the keyboard-only tab stop; pressing Enter focuses the inner
+  // `
` and engages contentEditable Tab-indents-line behavior. Escape
+  // returns focus to the wrapper. The overlay is hidden via the [hidden]
+  // attribute when the wrapper isn't armed; only shown after keyboard focus
+  // arrives on the wrapper.
+  '& .editable-code-wrapper': {
+    position: 'relative',
+    display: 'block',
+    borderRadius: 8,
+  },
+  '& .editable-code-wrapper:focus-visible': {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: -2,
+  },
+  '& .editable-code-wrapper .editable-code-overlay': {
+    position: 'absolute',
+    top: 8,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    padding: '4px 10px',
+    borderRadius: 6,
+    background: 'rgba(28, 24, 48, 0.92)',
+    color: '#fff',
+    fontSize: 12,
+    lineHeight: 1.4,
+    pointerEvents: 'none',
+    zIndex: 1,
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+  },
+  '& .editable-code-wrapper .editable-code-overlay kbd': {
+    display: 'inline-block',
+    padding: '1px 6px',
+    margin: '0 2px',
+    border: '1px solid rgba(255, 255, 255, 0.35)',
+    borderRadius: 4,
+    fontFamily: 'inherit',
+    fontSize: 11,
+    background: 'rgba(255, 255, 255, 0.1)',
+  },
+
   // Truncated visible frame: only round top — bottom fades out via overlay.
   '& .frame[data-frame-truncated="visible"]': {
     borderRadius: '8px 8px 0 0',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8432ed29003767..9511ef756d8ce2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15216,7 +15216,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d351bf2(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From 86b5b1585ed72957106e2023a37786d04b9cef3f Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 00:10:42 -0400
Subject: [PATCH 017/140] Fix focus trap

Co-authored-by: Copilot 
---
 docs/package.json                           |  2 +-
 docs/src/modules/components/DemoContent.tsx | 58 +++++++++++++++------
 pnpm-lock.yaml                              | 10 ++--
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 7c888b05115e6d..35b371003d9e09 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index 18f892ef2dba01..33a9d7a12f1e34 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -13,6 +13,7 @@ import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
 import { alpha, styled } from '@mui/material/styles';
+import { blueDark } from '@mui/docs/branding';
 import { useTranslate } from '@mui/docs/i18n';
 import DemoContext from './DemoContext';
 import type { SandboxConfig } from './DemoContext';
@@ -393,6 +394,13 @@ const CodeViewer = styled('div', {
     fontSize: '0.8125rem',
     lineHeight: '1.5',
   },
+  // When the editable `
` is focused (after pressing Enter), use the
+  // brand-blue focus ring instead of the browser default (which is white in
+  // dark color schemes).
+  '& .editable-code-wrapper pre:focus, & .editable-code-wrapper pre:focus-visible': {
+    outline: `3px solid ${alpha(theme.palette.primary[500], 0.8)}`,
+    outlineOffset: 0,
+  },
 
   // Cap height only on non-collapsible blocks; collapsible blocks animate their
   // own height via frame transitions and need clean overflow handling.
@@ -534,33 +542,49 @@ const CodeViewer = styled('div', {
     borderRadius: 8,
   },
   '& .editable-code-wrapper:focus-visible': {
-    outline: `2px solid ${theme.palette.primary.main}`,
-    outlineOffset: -2,
+    outline: 0,
   },
+  // Overlay matches the legacy DemoEditor "Press Enter to start editing" hint.
   '& .editable-code-wrapper .editable-code-overlay': {
     position: 'absolute',
-    top: 8,
+    top: theme.spacing(1),
     left: '50%',
     transform: 'translateX(-50%)',
-    padding: '4px 10px',
+    padding: theme.spacing(0.2, 1, 0.5, 1),
+    border: '1px solid',
+    borderColor: blueDark[600],
+    backgroundColor: blueDark[700],
+    color: '#FFF',
     borderRadius: 6,
-    background: 'rgba(28, 24, 48, 0.92)',
-    color: '#fff',
-    fontSize: 12,
-    lineHeight: 1.4,
+    fontSize: theme.typography.pxToRem(13),
+    // Use `outline` (instead of `box-shadow`) for the focus ring so it paints
+    // purely outside the popup and never stacks under the popup's own
+    // background/border. Animate the popup slide/fade and the ring together.
+    transition: 'top 0.3s, opacity 0.3s, outline-color 0.3s, outline-width 0.3s',
+    outlineStyle: 'solid',
+    outlineColor: alpha(theme.palette.primary[500], 0.8),
+    outlineWidth: 3,
+    outlineOffset: 0,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
     pointerEvents: 'none',
     zIndex: 1,
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+  },
+  // Hide the overlay when the wrapper isn't armed. Animates `top`/`opacity`
+  // and collapses the focus ring to 0 so it grows in alongside the popup.
+  '& .editable-code-wrapper:not([data-editable-armed]) .editable-code-overlay': {
+    top: 0,
+    opacity: 0,
+    outlineColor: alpha(theme.palette.primary[500], 0),
+    outlineWidth: 0,
+    pointerEvents: 'none',
   },
   '& .editable-code-wrapper .editable-code-overlay kbd': {
-    display: 'inline-block',
-    padding: '1px 6px',
-    margin: '0 2px',
-    border: '1px solid rgba(255, 255, 255, 0.35)',
-    borderRadius: 4,
-    fontFamily: 'inherit',
-    fontSize: 11,
-    background: 'rgba(255, 255, 255, 0.1)',
+    padding: theme.spacing(0.2, 0.4),
+    backgroundColor: blueDark[500],
+    fontSize: theme.typography.pxToRem(11),
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: blueDark[400],
   },
 
   // Truncated visible frame: only round top — bottom fades out via overlay.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9511ef756d8ce2..06f2162e0bb497 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15216,7 +15216,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@c0d9462(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From 0fad40fc9bd9d64fb9271ff0529b3ae7f44211ea Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 00:20:01 -0400
Subject: [PATCH 018/140] Fix focus trap styles

Co-authored-by: Copilot 
---
 docs/src/modules/components/DemoContent.tsx | 29 +++++++++++----------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index 33a9d7a12f1e34..961727162fb3a8 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -545,9 +545,12 @@ const CodeViewer = styled('div', {
     outline: 0,
   },
   // Overlay matches the legacy DemoEditor "Press Enter to start editing" hint.
+  // Hidden by default; revealed only while the wrapper has keyboard focus
+  // (`data-editable-armed` is added by `
` on keyboard focus and removed
+  // on blur or once the user presses Enter to engage editing).
   '& .editable-code-wrapper .editable-code-overlay': {
     position: 'absolute',
-    top: theme.spacing(1),
+    top: 0,
     left: '50%',
     transform: 'translateX(-50%)',
     padding: theme.spacing(0.2, 1, 0.5, 1),
@@ -557,26 +560,24 @@ const CodeViewer = styled('div', {
     color: '#FFF',
     borderRadius: 6,
     fontSize: theme.typography.pxToRem(13),
-    // Use `outline` (instead of `box-shadow`) for the focus ring so it paints
-    // purely outside the popup and never stacks under the popup's own
-    // background/border. Animate the popup slide/fade and the ring together.
+    // Animate the popup slide/fade together with its focus ring. `outline`
+    // (rather than `box-shadow`) is used so the ring paints purely outside
+    // the popup and never stacks under the popup's own background/border.
     transition: 'top 0.3s, opacity 0.3s, outline-color 0.3s, outline-width 0.3s',
     outlineStyle: 'solid',
-    outlineColor: alpha(theme.palette.primary[500], 0.8),
-    outlineWidth: 3,
+    outlineColor: alpha(theme.palette.primary[500], 0),
+    outlineWidth: 0,
     outlineOffset: 0,
     boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
+    opacity: 0,
     pointerEvents: 'none',
     zIndex: 1,
   },
-  // Hide the overlay when the wrapper isn't armed. Animates `top`/`opacity`
-  // and collapses the focus ring to 0 so it grows in alongside the popup.
-  '& .editable-code-wrapper:not([data-editable-armed]) .editable-code-overlay': {
-    top: 0,
-    opacity: 0,
-    outlineColor: alpha(theme.palette.primary[500], 0),
-    outlineWidth: 0,
-    pointerEvents: 'none',
+  '& .editable-code-wrapper[data-editable-armed] .editable-code-overlay': {
+    top: theme.spacing(1),
+    opacity: 1,
+    outlineColor: alpha(theme.palette.primary[500], 0.8),
+    outlineWidth: 3,
   },
   '& .editable-code-wrapper .editable-code-overlay kbd': {
     padding: theme.spacing(0.2, 0.4),

From 5526095f37cdfbec3f2f319e28b18ee216e87ead Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 14:44:26 -0400
Subject: [PATCH 019/140] bump docs-infra

---
 pnpm-lock.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06f2162e0bb497..2aba7bc9e6cc64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5715,6 +5715,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@unrs/resolver-binding-android-arm-eabi@1.9.2':
     resolution: {integrity: sha512-tS+lqTU3N0kkthU+rYp0spAYq15DU8ld9kXkaKg9sbQqJNF+WPMuNHZQGCgdxrUOEO0j22RKMwRVhF1HTl+X8A==}

From cafc8db89947b0b3f1e8c0aa4e95ea66c9a7a0e3 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 14:52:12 -0400
Subject: [PATCH 020/140] bump docs-infra

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 35b371003d9e09..13d27ed3762dd3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2aba7bc9e6cc64..3e10fc531edeb1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15217,7 +15217,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@7311568(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From b2866a21ddfce3b9c474e0dc88093817f62bf5a0 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 15:29:13 -0400
Subject: [PATCH 021/140] bump docs-infra

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 13d27ed3762dd3..2532a0007f19fd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,7 +31,7 @@
     "@mui/base": "5.0.0-beta.70",
     "@mui/docs": "workspace:*",
     "@mui/icons-material": "workspace:*",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768",
     "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e10fc531edeb1..f9b141e0bf6131 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,8 +299,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/mui-icons-material/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages/markdown
@@ -3727,8 +3727,8 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -15217,7 +15217,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f4ef587(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.12(@babel/core@7.28.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.28.6
       '@babel/standalone': 7.29.2

From 2c728295bff99fe6f3b31ed727a489ffe4925523 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 15:44:49 -0400
Subject: [PATCH 022/140] Fix build

---
 docs/src/modules/components/DemoContent.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/src/modules/components/DemoContent.tsx b/docs/src/modules/components/DemoContent.tsx
index a2e642015626b7..75b838af220446 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/docs/src/modules/components/DemoContent.tsx
@@ -15,8 +15,7 @@ import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
 import { alpha, styled } from '@mui/material/styles';
 import { blueDark } from '@mui/internal-core-docs/branding';
 import { useTranslate } from '@mui/internal-core-docs/i18n';
-import DemoContext from './DemoContext';
-import type { SandboxConfig } from './DemoContext';
+import DemoContext, { type SandboxConfig } from '@mui/internal-core-docs/DemoContext';
 import useScrollAnchor from './useScrollAnchor';
 
 // Dark code-panel background used by the highlighted source viewer.

From 4e75a1853cf567b1d35cf6a9fb7fa8589e10b041 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 15:46:12 -0400
Subject: [PATCH 023/140] Fix CI

---
 docs/data/material/components/buttons/Test.tsx     |  3 ---
 .../components/buttons/demos/basic/BasicButtons.js | 14 ++++++++++++++
 .../buttons/demos/basic/BasicButtons.tsx.preview   |  5 +++++
 .../components/buttons/demos/basic/client.js       |  5 +++++
 .../components/buttons/demos/basic/index.js        |  8 ++++++++
 5 files changed, 32 insertions(+), 3 deletions(-)
 delete mode 100644 docs/data/material/components/buttons/Test.tsx
 create mode 100644 docs/data/material/components/buttons/demos/basic/BasicButtons.js
 create mode 100644 docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview
 create mode 100644 docs/data/material/components/buttons/demos/basic/client.js
 create mode 100644 docs/data/material/components/buttons/demos/basic/index.js

diff --git a/docs/data/material/components/buttons/Test.tsx b/docs/data/material/components/buttons/Test.tsx
deleted file mode 100644
index bc65ca63cf302a..00000000000000
--- a/docs/data/material/components/buttons/Test.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Test() {
-  return 
Test
;
-}
diff --git a/docs/data/material/components/buttons/demos/basic/BasicButtons.js b/docs/data/material/components/buttons/demos/basic/BasicButtons.js
new file mode 100644
index 00000000000000..c62d2a7aa9a5ff
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/basic/BasicButtons.js
@@ -0,0 +1,14 @@
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+
+export default function BasicButtons() {
+  return (
+    
+      {/* @focus-start */}
+      
+      
+      
+      {/* @focus-end */}
+    
+  );
+}
diff --git a/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview
new file mode 100644
index 00000000000000..9b23439d8451e9
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview
@@ -0,0 +1,5 @@
+{/* @focus-start */}
+
+
+
+{/* @focus-end */}
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/demos/basic/client.js b/docs/data/material/components/buttons/demos/basic/client.js
new file mode 100644
index 00000000000000..3f80716ca627ec
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/basic/client.js
@@ -0,0 +1,5 @@
+'use client';
+
+import { createDemoClient } from 'docs/src/modules/utils/createDemoClient';
+
+export default createDemoClient(import.meta.url);
diff --git a/docs/data/material/components/buttons/demos/basic/index.js b/docs/data/material/components/buttons/demos/basic/index.js
new file mode 100644
index 00000000000000..ea59e1aae8e038
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/basic/index.js
@@ -0,0 +1,8 @@
+import { createDemo } from 'docs/src/modules/utils/createDemo';
+import ClientProvider from './client';
+
+import BasicButtons from './BasicButtons';
+
+export default createDemo(import.meta.url, BasicButtons, {
+  ClientProvider,
+});

From db69a5b40895b7d25609712e7ef80dfa30c867db Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Wed, 6 May 2026 16:05:32 -0400
Subject: [PATCH 024/140] Move demo components to core-docs package

---
 .../components/buttons/demos/basic/client.js  |  2 +-
 .../components/buttons/demos/basic/client.ts  |  2 +-
 .../components/buttons/demos/basic/index.js   |  2 +-
 .../components/buttons/demos/basic/index.ts   |  2 +-
 package.json                                  |  2 +-
 packages-internal/core-docs/package.json      |  5 +-
 .../src/DemoContent}/DemoContent.tsx          |  9 +--
 .../src/DemoContent}/DemoController.tsx       |  0
 .../core-docs/src/DemoContent/index.ts        |  2 +
 .../src/DemoContent}/useScrollAnchor.ts       |  0
 .../core-docs/src}/utils/createDemo.ts        |  4 +-
 .../core-docs/src}/utils/createDemoClient.ts  |  3 +-
 .../core-docs/src/utils/index.ts              |  2 +
 pnpm-lock.yaml                                | 69 ++-----------------
 14 files changed, 24 insertions(+), 80 deletions(-)
 rename {docs/src/modules/components => packages-internal/core-docs/src/DemoContent}/DemoContent.tsx (99%)
 rename {docs/src/modules/components => packages-internal/core-docs/src/DemoContent}/DemoController.tsx (100%)
 create mode 100644 packages-internal/core-docs/src/DemoContent/index.ts
 rename {docs/src/modules/components => packages-internal/core-docs/src/DemoContent}/useScrollAnchor.ts (100%)
 rename {docs/src/modules => packages-internal/core-docs/src}/utils/createDemo.ts (90%)
 rename {docs/src/modules => packages-internal/core-docs/src}/utils/createDemoClient.ts (78%)

diff --git a/docs/data/material/components/buttons/demos/basic/client.js b/docs/data/material/components/buttons/demos/basic/client.js
index 3f80716ca627ec..262420f6e96ed6 100644
--- a/docs/data/material/components/buttons/demos/basic/client.js
+++ b/docs/data/material/components/buttons/demos/basic/client.js
@@ -1,5 +1,5 @@
 'use client';
 
-import { createDemoClient } from 'docs/src/modules/utils/createDemoClient';
+import { createDemoClient } from '@mui/internal-core-docs/utils';
 
 export default createDemoClient(import.meta.url);
diff --git a/docs/data/material/components/buttons/demos/basic/client.ts b/docs/data/material/components/buttons/demos/basic/client.ts
index 3f80716ca627ec..262420f6e96ed6 100644
--- a/docs/data/material/components/buttons/demos/basic/client.ts
+++ b/docs/data/material/components/buttons/demos/basic/client.ts
@@ -1,5 +1,5 @@
 'use client';
 
-import { createDemoClient } from 'docs/src/modules/utils/createDemoClient';
+import { createDemoClient } from '@mui/internal-core-docs/utils';
 
 export default createDemoClient(import.meta.url);
diff --git a/docs/data/material/components/buttons/demos/basic/index.js b/docs/data/material/components/buttons/demos/basic/index.js
index ea59e1aae8e038..c76df2dbb9c2b5 100644
--- a/docs/data/material/components/buttons/demos/basic/index.js
+++ b/docs/data/material/components/buttons/demos/basic/index.js
@@ -1,4 +1,4 @@
-import { createDemo } from 'docs/src/modules/utils/createDemo';
+import { createDemo } from '@mui/internal-core-docs/utils';
 import ClientProvider from './client';
 
 import BasicButtons from './BasicButtons';
diff --git a/docs/data/material/components/buttons/demos/basic/index.ts b/docs/data/material/components/buttons/demos/basic/index.ts
index ea59e1aae8e038..c76df2dbb9c2b5 100644
--- a/docs/data/material/components/buttons/demos/basic/index.ts
+++ b/docs/data/material/components/buttons/demos/basic/index.ts
@@ -1,4 +1,4 @@
-import { createDemo } from 'docs/src/modules/utils/createDemo';
+import { createDemo } from '@mui/internal-core-docs/utils';
 import ClientProvider from './client';
 
 import BasicButtons from './BasicButtons';
diff --git a/package.json b/package.json
index a720e37a6f24b6..bad12a85fa6a67 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
     "@mui/internal-code-infra": "0.0.4-canary.43",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 40b70fcea31e40..14e7d52fc6fa4f 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -29,18 +29,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
-    "lz-string": "^1.5.0",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.46.1",
     "fg-loadcss": "^3.1.0",
+    "lz-string": "^1.5.0",
     "nprogress": "^0.2.0",
     "stylis": "catalog:docs"
   },
   "devDependencies": {
-    "@mui/internal-api-docs-builder": "workspace:*",
     "@mui/icons-material": "workspace:*",
+    "@mui/internal-api-docs-builder": "workspace:*",
     "@mui/material": "workspace:*",
     "@types/chai": "5.2.3",
     "@types/fg-loadcss": "3.1.3",
diff --git a/docs/src/modules/components/DemoContent.tsx b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
similarity index 99%
rename from docs/src/modules/components/DemoContent.tsx
rename to packages-internal/core-docs/src/DemoContent/DemoContent.tsx
index 75b838af220446..f91adbcec3ad9a 100644
--- a/docs/src/modules/components/DemoContent.tsx
+++ b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
@@ -13,9 +13,9 @@ import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
 import { alpha, styled } from '@mui/material/styles';
-import { blueDark } from '@mui/internal-core-docs/branding';
-import { useTranslate } from '@mui/internal-core-docs/i18n';
-import DemoContext, { type SandboxConfig } from '@mui/internal-core-docs/DemoContext';
+import { blueDark } from '../branding';
+import { useTranslate } from '../i18n';
+import DemoContext, { type SandboxConfig } from '../DemoContext';
 import useScrollAnchor from './useScrollAnchor';
 
 // Dark code-panel background used by the highlighted source viewer.
@@ -175,9 +175,10 @@ function buildRootIndexTemplate(
   if (!csbConfig?.getRootIndex) {
     return undefined;
   }
+  const { getRootIndex } = csbConfig;
   return ({ importString, useTypescript }) => {
     const codeVariant = useTypescript ? 'TS' : 'JS';
-    const legacy = csbConfig.getRootIndex(codeVariant);
+    const legacy = getRootIndex(codeVariant);
     // Replace the legacy `import Demo from './Demo';` line with the dynamic
     // entrypoint import emitted by exportVariant, then rename the rendered
     // `` element to `` (the exportVariant default).
diff --git a/docs/src/modules/components/DemoController.tsx b/packages-internal/core-docs/src/DemoContent/DemoController.tsx
similarity index 100%
rename from docs/src/modules/components/DemoController.tsx
rename to packages-internal/core-docs/src/DemoContent/DemoController.tsx
diff --git a/packages-internal/core-docs/src/DemoContent/index.ts b/packages-internal/core-docs/src/DemoContent/index.ts
new file mode 100644
index 00000000000000..376ba197e07ba9
--- /dev/null
+++ b/packages-internal/core-docs/src/DemoContent/index.ts
@@ -0,0 +1,2 @@
+export { default as DemoContent } from './DemoContent';
+export { default as DemoController } from './DemoController';
diff --git a/docs/src/modules/components/useScrollAnchor.ts b/packages-internal/core-docs/src/DemoContent/useScrollAnchor.ts
similarity index 100%
rename from docs/src/modules/components/useScrollAnchor.ts
rename to packages-internal/core-docs/src/DemoContent/useScrollAnchor.ts
diff --git a/docs/src/modules/utils/createDemo.ts b/packages-internal/core-docs/src/utils/createDemo.ts
similarity index 90%
rename from docs/src/modules/utils/createDemo.ts
rename to packages-internal/core-docs/src/utils/createDemo.ts
index 3f29793c8f0c0f..e97bdf8d48e044 100644
--- a/docs/src/modules/utils/createDemo.ts
+++ b/packages-internal/core-docs/src/utils/createDemo.ts
@@ -2,9 +2,7 @@ import {
   createDemoFactory,
   createDemoWithVariantsFactory,
 } from '@mui/internal-docs-infra/abstractCreateDemo';
-
-// eslint-disable-next-line import/extensions
-import DemoContent from '../components/DemoContent';
+import { DemoContent } from '../DemoContent';
 
 /**
  * Creates a demo component for displaying code examples with syntax highlighting.
diff --git a/docs/src/modules/utils/createDemoClient.ts b/packages-internal/core-docs/src/utils/createDemoClient.ts
similarity index 78%
rename from docs/src/modules/utils/createDemoClient.ts
rename to packages-internal/core-docs/src/utils/createDemoClient.ts
index 0d04a9a1670edb..468fc8153347b2 100644
--- a/docs/src/modules/utils/createDemoClient.ts
+++ b/packages-internal/core-docs/src/utils/createDemoClient.ts
@@ -1,12 +1,11 @@
 import { createDemoClientFactory } from '@mui/internal-docs-infra/abstractCreateDemoClient';
-import DemoController from '../components/DemoController';
+import { DemoController } from '../DemoContent';
 
 /**
  * Creates a demo client provider for live editing with precomputed externals.
  * @param url Depends on `import.meta.url` to determine the source file location.
  * @param meta Additional meta and configuration for the demo client.
  */
-// eslint-disable-next-line import/prefer-default-export
 export const createDemoClient = createDemoClientFactory({
   DemoController,
 });
diff --git a/packages-internal/core-docs/src/utils/index.ts b/packages-internal/core-docs/src/utils/index.ts
index de7681378d2d48..828b1a36d3302b 100644
--- a/packages-internal/core-docs/src/utils/index.ts
+++ b/packages-internal/core-docs/src/utils/index.ts
@@ -1 +1,3 @@
 export { getProductInfoFromUrl } from './getProductInfoFromUrl';
+export { createDemo, createDemoWithVariants } from './createDemo';
+export { createDemoClient } from './createDemoClient';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3024a0b258d1fd..d6598d9c818682 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: 0.0.4-canary.43
         version: 0.0.4-canary.43(@next/eslint-plugin-next@15.5.15)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.13)(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -738,6 +738,9 @@ importers:
       '@emotion/styled':
         specifier: catalog:docs
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
+      '@mui/internal-docs-infra':
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
@@ -3446,25 +3449,6 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be}
-    version: 0.11.0
-    engines: {node: '>=22.18.0'}
-    hasBin: true
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      next: ^15.0.0 || ^16.0.0
-      prettier: ^3.0.0
-      react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      typescript: ^6.0.2
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      next:
-        optional: true
-      prettier:
-        optional: true
-
   '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768':
     resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768}
     version: 0.11.0
@@ -14000,49 +13984,6 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@6b414be(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react@19.2.4)(typescript@5.9.3)':
-    dependencies:
-      '@babel/runtime': 7.29.2
-      '@babel/standalone': 7.29.4
-      '@orama/orama': 3.1.18
-      '@orama/plugin-qps': 3.1.18
-      '@orama/stemmers': 3.1.18
-      '@orama/stopwords': 3.1.18
-      '@wooorm/starry-night': 3.9.0
-      chalk: 5.6.2
-      clipboard-copy: 4.0.1
-      es-toolkit: 1.46.1
-      fflate: 0.8.2
-      hast-util-to-jsx-runtime: 2.3.6
-      hast-util-to-text: 4.0.2
-      import-meta-resolve: 4.2.0
-      jsondiffpatch: 0.7.3
-      kebab-case: 2.0.2
-      lz-string: 1.5.0
-      path-module: 0.1.2
-      proper-lockfile: 4.1.2
-      react: 19.2.4
-      remark-gfm: 4.0.1
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      remark-typography: 0.7.3
-      typescript: 5.9.3
-      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
-      uint8-to-base64: 0.2.1
-      unified: 11.0.5
-      unist-util-visit: 5.1.0
-      use-editable: 2.3.3(react@19.2.4)
-      vscode-oniguruma: 2.0.1
-      yargs: 18.0.0
-      zx: 8.8.5
-    optionalDependencies:
-      '@types/react': 19.2.14
-      next: 15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      prettier: 3.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2

From abbd2adac6eacab8a66e48861b225ee4964d4eb7 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 10:50:52 -0400
Subject: [PATCH 025/140] Update css

---
 package.json                                  |  2 +-
 .../core-docs/src/DemoContent/DemoContent.tsx | 16 +++--
 pnpm-lock.yaml                                | 68 ++++++++++++++++++-
 3 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index bad12a85fa6a67..05049b9f8716ab 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
     "@mui/internal-code-infra": "0.0.4-canary.43",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
index f91adbcec3ad9a..4c07c9fe10ae23 100644
--- a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
+++ b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
@@ -545,9 +545,13 @@ const CodeViewer = styled('div', {
     outline: 0,
   },
   // Overlay matches the legacy DemoEditor "Press Enter to start editing" hint.
-  // Hidden by default; revealed only while the wrapper has keyboard focus
-  // (`data-editable-armed` is added by `
` on keyboard focus and removed
-  // on blur or once the user presses Enter to engage editing).
+  // `
` ships the overlay with the `[hidden]` attribute by default and
+  // toggles `data-editable-prompt` on the wrapper while the prompt is shown.
+  // Override `[hidden]` so the overlay stays in layout, then animate the
+  // slide/fade + focus ring via `data-editable-prompt`.
+  '& .editable-code-wrapper .editable-code-overlay[hidden]': {
+    display: 'block',
+  },
   '& .editable-code-wrapper .editable-code-overlay': {
     position: 'absolute',
     top: 0,
@@ -563,18 +567,20 @@ const CodeViewer = styled('div', {
     // Animate the popup slide/fade together with its focus ring. `outline`
     // (rather than `box-shadow`) is used so the ring paints purely outside
     // the popup and never stacks under the popup's own background/border.
-    transition: 'top 0.3s, opacity 0.3s, outline-color 0.3s, outline-width 0.3s',
+    transition: 'top 0.3s, opacity 0.3s, visibility 0.3s, outline-color 0.3s, outline-width 0.3s',
     outlineStyle: 'solid',
     outlineColor: alpha(theme.palette.primary[500], 0),
     outlineWidth: 0,
     outlineOffset: 0,
     boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
+    visibility: 'hidden',
     opacity: 0,
     pointerEvents: 'none',
     zIndex: 1,
   },
-  '& .editable-code-wrapper[data-editable-armed] .editable-code-overlay': {
+  '& .editable-code-wrapper[data-editable-prompt] .editable-code-overlay': {
     top: theme.spacing(1),
+    visibility: 'visible',
     opacity: 1,
     outlineColor: alpha(theme.palette.primary[500], 0.8),
     outlineWidth: 3,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6598d9c818682..2f62f9b618f665 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: 0.0.4-canary.43
         version: 0.0.4-canary.43(@next/eslint-plugin-next@15.5.15)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.13)(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -3449,6 +3449,26 @@ packages:
       typescript:
         optional: true
 
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67}
+    version: 0.11.0
+    engines: {node: '>=22.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      next: ^15.0.0 || ^16.0.0
+      prettier: ^3.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+      typescript: ^6.0.2
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      next:
+        optional: true
+      prettier:
+        optional: true
+
   '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768':
     resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768}
     version: 0.11.0
@@ -13984,6 +14004,50 @@ snapshots:
       - supports-color
       - vitest
 
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@babel/standalone': 7.29.4
+      '@orama/orama': 3.1.18
+      '@orama/plugin-qps': 3.1.18
+      '@orama/stemmers': 3.1.18
+      '@orama/stopwords': 3.1.18
+      '@wooorm/starry-night': 3.9.0
+      chalk: 5.6.2
+      clipboard-copy: 4.0.1
+      es-toolkit: 1.46.1
+      fflate: 0.8.2
+      hast-util-to-jsx-runtime: 2.3.6
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.2.0
+      jsondiffpatch: 0.7.3
+      kebab-case: 2.0.2
+      lz-string: 1.5.0
+      path-module: 0.1.2
+      proper-lockfile: 4.1.2
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      remark-gfm: 4.0.1
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      remark-typography: 0.7.3
+      typescript: 5.9.3
+      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
+      uint8-to-base64: 0.2.1
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      use-editable: 2.3.3(react@19.2.4)
+      vscode-oniguruma: 2.0.1
+      yargs: 18.0.0
+      zx: 8.8.5
+    optionalDependencies:
+      '@types/react': 19.2.14
+      next: 15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      prettier: 3.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2

From d043c3fcd6201efcd74d438fa1e8705e67712f58 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 12:39:54 -0400
Subject: [PATCH 026/140] Remove js

---
 .../components/buttons/demos/basic/BasicButtons.js | 14 --------------
 .../buttons/demos/basic/BasicButtons.tsx.preview   |  5 -----
 .../components/buttons/demos/basic/client.js       |  5 -----
 .../components/buttons/demos/basic/index.js        |  8 --------
 4 files changed, 32 deletions(-)
 delete mode 100644 docs/data/material/components/buttons/demos/basic/BasicButtons.js
 delete mode 100644 docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/demos/basic/client.js
 delete mode 100644 docs/data/material/components/buttons/demos/basic/index.js

diff --git a/docs/data/material/components/buttons/demos/basic/BasicButtons.js b/docs/data/material/components/buttons/demos/basic/BasicButtons.js
deleted file mode 100644
index c62d2a7aa9a5ff..00000000000000
--- a/docs/data/material/components/buttons/demos/basic/BasicButtons.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-export default function BasicButtons() {
-  return (
-    
-      {/* @focus-start */}
-      
-      
-      
-      {/* @focus-end */}
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview
deleted file mode 100644
index 9b23439d8451e9..00000000000000
--- a/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-{/* @focus-start */}
-
-
-
-{/* @focus-end */}
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/demos/basic/client.js b/docs/data/material/components/buttons/demos/basic/client.js
deleted file mode 100644
index 262420f6e96ed6..00000000000000
--- a/docs/data/material/components/buttons/demos/basic/client.js
+++ /dev/null
@@ -1,5 +0,0 @@
-'use client';
-
-import { createDemoClient } from '@mui/internal-core-docs/utils';
-
-export default createDemoClient(import.meta.url);
diff --git a/docs/data/material/components/buttons/demos/basic/index.js b/docs/data/material/components/buttons/demos/basic/index.js
deleted file mode 100644
index c76df2dbb9c2b5..00000000000000
--- a/docs/data/material/components/buttons/demos/basic/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createDemo } from '@mui/internal-core-docs/utils';
-import ClientProvider from './client';
-
-import BasicButtons from './BasicButtons';
-
-export default createDemo(import.meta.url, BasicButtons, {
-  ClientProvider,
-});

From 2256640ae359dc78ea25375d90270dc2e1e5e56a Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 12:42:21 -0400
Subject: [PATCH 027/140] bump docs-infra

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index b7e2ef4294af7a..23d2c142e03f68 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -30,7 +30,7 @@
     "@fortawesome/react-fontawesome": "^0.2.6",
     "@mui/icons-material": "workspace:^",
     "@mui/internal-core-docs": "workspace:^",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f62f9b618f665..1e334a6f970996 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -297,8 +297,8 @@ importers:
         specifier: workspace:^
         version: link:../packages-internal/core-docs/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages-internal/markdown
@@ -13939,7 +13939,7 @@ snapshots:
       eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1))
       eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1))
       eslint-plugin-compat: 7.0.1(eslint@10.2.1(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.2.1(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@10.2.1(jiti@2.6.1))
       eslint-plugin-mdx: 3.7.0(eslint@10.2.1(jiti@2.6.1))
       eslint-plugin-mocha: 11.2.0(eslint@10.2.1(jiti@2.6.1))
@@ -17831,7 +17831,7 @@ snapshots:
       tinyglobby: 0.2.16
       unrs-resolver: 1.9.2
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.2.1(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -17881,7 +17881,7 @@ snapshots:
       lodash: 4.18.1
       pkg-dir: 5.0.0
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1)))(eslint@10.2.1(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.2.1(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9

From 66727366873ea57e53436ae702d97b8001acb997 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 12:58:15 -0400
Subject: [PATCH 028/140] bump docs-infra

---
 packages-internal/core-docs/package.json |  2 +-
 pnpm-lock.yaml                           | 68 +-----------------------
 2 files changed, 3 insertions(+), 67 deletions(-)

diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 55c38fbe52b32d..98eb0ee7d77aaf 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff6995d9103cd3..8bc3313dc3a88b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -727,8 +727,8 @@ importers:
         specifier: catalog:docs
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
@@ -3430,26 +3430,6 @@ packages:
       prettier:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768}
-    version: 0.11.0
-    engines: {node: '>=22.18.0'}
-    hasBin: true
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      next: ^15.0.0 || ^16.0.0
-      prettier: ^3.0.0
-      react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
-      typescript: ^6.0.2
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      next:
-        optional: true
-      prettier:
-        optional: true
-
   '@mui/internal-netlify-cache@0.0.3-canary.5':
     resolution: {integrity: sha512-3HiXaQ2x8nwwvXxMjXcy1uHVnhbCpWTAbyjkrpNeycJ2afSNnmHVLFq5Nu7K7QOJnYGwlcKjX9kBVGUv1aJp1w==}
 
@@ -13977,50 +13957,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@777d768(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
-    dependencies:
-      '@babel/runtime': 7.29.2
-      '@babel/standalone': 7.29.4
-      '@orama/orama': 3.1.18
-      '@orama/plugin-qps': 3.1.18
-      '@orama/stemmers': 3.1.18
-      '@orama/stopwords': 3.1.18
-      '@wooorm/starry-night': 3.9.0
-      chalk: 5.6.2
-      clipboard-copy: 4.0.1
-      es-toolkit: 1.46.1
-      fflate: 0.8.2
-      hast-util-to-jsx-runtime: 2.3.6
-      hast-util-to-text: 4.0.2
-      import-meta-resolve: 4.2.0
-      jsondiffpatch: 0.7.3
-      kebab-case: 2.0.2
-      lz-string: 1.5.0
-      path-module: 0.1.2
-      proper-lockfile: 4.1.2
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      remark-gfm: 4.0.1
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      remark-typography: 0.7.3
-      typescript: 5.9.3
-      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
-      uint8-to-base64: 0.2.1
-      unified: 11.0.5
-      unist-util-visit: 5.1.0
-      use-editable: 2.3.3(react@19.2.4)
-      vscode-oniguruma: 2.0.1
-      yargs: 18.0.0
-      zx: 8.8.5
-    optionalDependencies:
-      '@types/react': 19.2.14
-      next: 15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      prettier: 3.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@mui/internal-netlify-cache@0.0.3-canary.5': {}
 
   '@mui/internal-test-utils@2.0.18-canary.22(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.59.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.15)(chai@6.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))(vitest@4.0.13)':

From 139c50910093ce2d8e87b9bd7e43e5da68401de0 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 13:06:47 -0400
Subject: [PATCH 029/140] Fix hover styles

---
 packages-internal/core-docs/src/DemoContent/DemoContent.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
index 4c07c9fe10ae23..af734d256cade3 100644
--- a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
+++ b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
@@ -394,6 +394,11 @@ const CodeViewer = styled('div', {
     fontSize: '0.8125rem',
     lineHeight: '1.5',
   },
+  // Hover ring on the editable `
` — mirrors the legacy DemoEditor
+  // `.scrollContainer:hover` treatment.
+  '& .editable-code-wrapper pre:hover': {
+    boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.5)}`,
+  },
   // When the editable `
` is focused (after pressing Enter), use the
   // brand-blue focus ring instead of the browser default (which is white in
   // dark color schemes).

From e1f9ad8ff5b5c5424ff88e07518d9d8ba457b36c Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 21:03:28 -0400
Subject: [PATCH 030/140] bump docs-infra

---
 docs/package.json                             |   2 +-
 package.json                                  |   2 +-
 packages-internal/core-docs/package.json      |   2 +-
 .../core-docs/src/DemoContent/DemoContent.tsx |   8 +-
 .../src/DemoContent/useScrollAnchor.ts        | 400 ------------------
 pnpm-lock.yaml                                |  18 +-
 6 files changed, 17 insertions(+), 415 deletions(-)
 delete mode 100644 packages-internal/core-docs/src/DemoContent/useScrollAnchor.ts

diff --git a/docs/package.json b/docs/package.json
index f9cb9facdc6516..4911b18da0e3cf 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -27,7 +27,7 @@
     "@emotion/styled": "catalog:docs",
     "@mui/icons-material": "workspace:^",
     "@mui/internal-core-docs": "workspace:^",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
diff --git a/package.json b/package.json
index 42ef0c2d7577c7..aed4900c120314 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
     "@mui/internal-code-infra": "0.0.4-canary.43",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 98eb0ee7d77aaf..922ab6c260c813 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
diff --git a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
index af734d256cade3..5dfbf73ded44d1 100644
--- a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
+++ b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
 import { useDemo } from '@mui/internal-docs-infra/useDemo';
 import type { ExportConfig } from '@mui/internal-docs-infra/useDemo';
+import { useCodeWindow } from '@mui/internal-docs-infra/useCodeWindow';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import MDButton from '@mui/material/Button';
@@ -16,7 +17,6 @@ import { alpha, styled } from '@mui/material/styles';
 import { blueDark } from '../branding';
 import { useTranslate } from '../i18n';
 import DemoContext, { type SandboxConfig } from '../DemoContext';
-import useScrollAnchor from './useScrollAnchor';
 
 // Dark code-panel background used by the highlighted source viewer.
 const CODE_BG = 'hsl(210, 25%, 9%)';
@@ -893,7 +893,7 @@ export default function DemoContent(props: ContentProps) {
   // When the rendered code has collapsible frames (from `enhanceCodeEmphasis`),
   // this expands all hidden context lines. Demos without emphasis frames render
   // identically in both states.
-  const { containerRef, anchorScroll } = useScrollAnchor();
+  const { containerRef, toggleRef, anchorScroll } = useCodeWindow();
 
   const hasJsTransform = demo.availableTransforms.includes('js');
   const isJsSelected = demo.selectedTransform === 'js';
@@ -964,7 +964,9 @@ export default function DemoContent(props: ContentProps) {
           )}
 
           {/* Expand / collapse emphasis frames */}
-          {showCodeLabel}
+          
+            {showCodeLabel}
+          
 
           {/* StackBlitz */}
           
diff --git a/packages-internal/core-docs/src/DemoContent/useScrollAnchor.ts b/packages-internal/core-docs/src/DemoContent/useScrollAnchor.ts
deleted file mode 100644
index aae644a252f2ae..00000000000000
--- a/packages-internal/core-docs/src/DemoContent/useScrollAnchor.ts
+++ /dev/null
@@ -1,400 +0,0 @@
-import * as React from 'react';
-
-/**
- * Selector for the first highlighted or focus frame — the content the user
- * cares about. Anchoring to this keeps the focused code visually stable
- * in both expand and collapse directions.
- */
-const ANCHOR_SELECTOR = ['[data-frame-type="highlighted"]', '[data-frame-type="focus"]'].join(', ');
-
-/**
- * Whether the browser supports `interpolate-size: allow-keywords` —
- * determines which CSS transition path is active and thus how long
- * the rAF loop needs to run.
- *
- * - Enhanced: 300ms for both expand and collapse
- * - Fallback: 300ms collapse, 1500ms expand (max-height)
- */
-const supportsInterpolateSize =
-  typeof CSS !== 'undefined' && CSS.supports('interpolate-size', 'allow-keywords');
-
-function getTransitionTimeout(direction: 'collapse' | 'expand'): number {
-  if (supportsInterpolateSize) {
-    // @supports path: height 0.3s ease in both directions
-    return 350;
-  }
-  // Fallback path: max-height 0.3s collapse, 1.5s expand
-  return direction === 'collapse' ? 350 : 1550;
-}
-
-const GUTTER_STATE_ATTRIBUTE = 'data-scrollbar-gutter';
-const gutterCleanupTimers = new WeakMap | Animation>();
-const gutterFlipTimers = new WeakMap>();
-const scrollbackAnimations = new WeakMap();
-
-const prefersReducedMotion = () =>
-  typeof window !== 'undefined' &&
-  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
-
-/**
- * Schedules `callback` to run after `duration` ms on the browser's animation
- * timeline (via a no-op WAAPI animation), so DevTools' animation speed slider
- * scales the delay in step with CSS transitions. Falls back to `setTimeout`
- * when WAAPI isn't available.
- *
- * Returns the `Animation` (or timer id) so callers can cancel it. Cancelling
- * the returned `Animation` does NOT invoke `callback` (the rejected
- * `finished` promise is swallowed), matching `clearTimeout` semantics.
- */
-function scheduleOnAnimationTimeline(
-  target: HTMLElement,
-  duration: number,
-  callback: () => void,
-): Animation | ReturnType {
-  if (typeof target.animate === 'function') {
-    const anim = target.animate([{ opacity: 1 }, { opacity: 1 }], { duration, fill: 'none' });
-    anim.finished.then(callback, () => {
-      // Swallow rejection from `Animation.cancel()` so cancelling the schedule
-      // doesn't fire the cleanup callback (which would otherwise stomp on a
-      // freshly-registered next-state cleanup).
-    });
-    return anim;
-  }
-  return setTimeout(callback, duration);
-}
-
-function cancelScheduled(handle: Animation | ReturnType | undefined) {
-  if (handle === undefined) {
-    return;
-  }
-  // Guard the `instanceof` so we don't throw a `ReferenceError` in browsers
-  // that lack WAAPI (where `scheduleOnAnimationTimeline` falls back to
-  // `setTimeout` and `Animation` is undefined as a global).
-  if (typeof Animation !== 'undefined' && handle instanceof Animation) {
-    handle.cancel();
-  } else {
-    clearTimeout(handle as ReturnType);
-  }
-}
-
-/**
- * Smoothly slides the `` element back to the left edge over `duration`
- * ms using an ease-out cubic via the Web Animations API.
- *
- * Used during collapse instead of tweening `pre.scrollLeft` because the
- * scrollbar-gutter animation forces `overflow-x: hidden` on the pre, which
- * snaps `scrollLeft` to 0 instantly. Animating a transform on the inner
- * `code` element produces the same visual effect, isn't reset by the overflow
- * change, and is naturally clipped by the pre's hidden overflow. Driving it
- * through `Element.animate` keeps the styles off the element's `style`
- * attribute and runs on the compositor, so it doesn't fight the existing
- * CSS transitions on `code` (e.g. `margin-bottom`).
- *
- * Honors `prefers-reduced-motion` by snapping immediately.
- */
-function smoothCollapseScrollLeft(pre: HTMLElement, duration: number): Animation | null {
-  const startLeft = pre.scrollLeft;
-  if (startLeft <= 0) {
-    return null;
-  }
-  const code = pre.querySelector('code');
-  if (!code || typeof code.animate !== 'function') {
-    return null;
-  }
-
-  // Cancel any leftover scroll-back animation from a previous toggle so we
-  // don't end up with two transforms competing on the same element.
-  scrollbackAnimations.get(pre)?.cancel();
-  scrollbackAnimations.delete(pre);
-
-  // Reset the actual scroll position now; the WAAPI animation visually
-  // compensates by translating the element from `-startLeft` back to `0`.
-  pre.scrollLeft = 0;
-
-  if (prefersReducedMotion() || duration <= 0) {
-    return null;
-  }
-
-  const anim = code.animate(
-    [{ transform: `translateX(${-startLeft}px)` }, { transform: 'translateX(0)' }],
-    {
-      duration,
-      easing: 'cubic-bezier(0, 0, 0.2, 1)',
-      fill: 'none',
-    },
-  );
-  scrollbackAnimations.set(pre, anim);
-  const onSettle = () => {
-    if (scrollbackAnimations.get(pre) === anim) {
-      scrollbackAnimations.delete(pre);
-    }
-  };
-  anim.finished.then(onSettle, onSettle);
-  return anim;
-}
-
-function isElementInViewport(element: HTMLElement): boolean {
-  const rect = element.getBoundingClientRect();
-  return rect.bottom > 0 && rect.top < window.innerHeight;
-}
-
-/**
- * Measures the horizontal scrollbar height of a `
` element by
- * temporarily forcing `overflow-x: scroll`.
- */
-function measureScrollbarHeight(pre: HTMLElement): number {
-  const prevOverflow = pre.style.overflowX;
-  pre.style.overflowX = 'scroll';
-  const scrollbarHeight = pre.offsetHeight - pre.clientHeight;
-  pre.style.overflowX = prevOverflow;
-  return scrollbarHeight;
-}
-
-function clearGutterState(pre: HTMLElement) {
-  cancelScheduled(gutterCleanupTimers.get(pre));
-  gutterCleanupTimers.delete(pre);
-  const flipTimer = gutterFlipTimers.get(pre);
-  if (flipTimer !== undefined) {
-    clearTimeout(flipTimer);
-    gutterFlipTimers.delete(pre);
-  }
-  pre.removeAttribute(GUTTER_STATE_ATTRIBUTE);
-}
-
-/**
- * Cancels every animation and timer associated with `pre` (scroll-back
- * transform, gutter cleanup, gutter from→to flip). Used on hook unmount so
- * we don't leave WAAPI animations or pending callbacks pointing at a node
- * that's been removed from the document.
- */
-function cancelAllForPre(pre: HTMLElement) {
-  scrollbackAnimations.get(pre)?.cancel();
-  scrollbackAnimations.delete(pre);
-  clearGutterState(pre);
-}
-
-/**
- * Smoothly transitions the horizontal scrollbar gutter on collapse by
- * swapping the real scrollbar for equivalent padding-bottom, then
- * animating that padding down to the CSS base value.
- *
- * Skips the animation when content doesn't overflow (no scrollbar exists)
- * or when the browser uses overlay scrollbars (zero height).
- */
-function animateScrollbarGutter(pre: HTMLElement) {
-  const scrollbarHeight = measureScrollbarHeight(pre);
-  if (scrollbarHeight === 0) {
-    return; // Overlay scrollbars, nothing to do
-  }
-
-  // Only animate if content actually overflows (scrollbar is visible)
-  if (pre.scrollWidth <= pre.clientWidth) {
-    return;
-  }
-
-  clearGutterState(pre);
-  pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'collapse-from');
-
-  // Move into the transition state on the next macrotask. Tracked so the
-  // flip can be cancelled if the component unmounts before it fires.
-  const flipTimer = setTimeout(() => {
-    gutterFlipTimers.delete(pre);
-    pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'collapse-to');
-  }, 0);
-  gutterFlipTimers.set(pre, flipTimer);
-
-  // Schedule cleanup on the animation timeline so DevTools throttling
-  // scales it together with the CSS `margin-bottom` transition that's
-  // doing the actual gutter shrink.
-  const timeout = getTransitionTimeout('collapse');
-  const cleanup = scheduleOnAnimationTimeline(pre, timeout + 30, () => {
-    clearGutterState(pre);
-  });
-  gutterCleanupTimers.set(pre, cleanup);
-}
-
-/**
- * Smoothly transitions the horizontal scrollbar gutter on expand by
- * reserving the eventual scrollbar space via padding-bottom first,
- * then letting CSS swap to real overflow-x at the end of the transition.
- *
- * This is primarily needed for the max-size split-frame case where hidden
- * overflow lines can make the scrollbar appear late during expansion.
- */
-function animateScrollbarGutterExpand(pre: HTMLElement) {
-  const scrollbarHeight = measureScrollbarHeight(pre);
-  if (scrollbarHeight === 0) {
-    return; // Overlay scrollbars, nothing to do
-  }
-
-  // The  element uses `min-width: fit-content`, so its scrollWidth
-  // reflects the widest line including hidden frames. If that doesn't
-  // exceed the container, no scrollbar will appear after expansion.
-  const code = pre.querySelector('code');
-  if (code && code.scrollWidth <= pre.clientWidth) {
-    return;
-  }
-
-  clearGutterState(pre);
-  pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'expand-from');
-
-  // Move into the transition state on the next macrotask. Tracked so the
-  // flip can be cancelled if the component unmounts before it fires.
-  const flipTimer = setTimeout(() => {
-    gutterFlipTimers.delete(pre);
-    pre.setAttribute(GUTTER_STATE_ATTRIBUTE, 'expand-to');
-  }, 0);
-  gutterFlipTimers.set(pre, flipTimer);
-
-  // Schedule cleanup on the animation timeline so the `overflow-x` flip back
-  // to `auto` lines up with the CSS `margin-bottom` and height transitions
-  // even when DevTools throttles animation speed.
-  const timeout = getTransitionTimeout('expand');
-  const cleanup = scheduleOnAnimationTimeline(pre, timeout + 30, () => {
-    clearGutterState(pre);
-  });
-  gutterCleanupTimers.set(pre, cleanup);
-}
-
-export default function useScrollAnchor() {
-  const containerRef = React.useRef(null);
-  const toggleRef = React.useRef(null);
-  // Tracks the cleanup for the currently in-flight `anchorScroll` call so a
-  // new toggle (or unmount) can abort it cleanly instead of leaving a
-  // ResizeObserver and window listeners holding references to detached
-  // nodes.
-  const activeSessionCleanupRef = React.useRef<(() => void) | null>(null);
-  // Tracks the most recently animated `
` so unmount can cancel any
-  // running scroll-back / gutter animations on it. Captured here because
-  // `containerRef.current` may already be null by the time the effect
-  // cleanup runs.
-  const lastPreRef = React.useRef(null);
-
-  // CSS `overflow-anchor: none` on hidden frames (set in CSS) nudges native
-  // scroll anchoring toward the visible highlighted/focus content. In Chromium
-  // and Firefox this usually handles most compensation synchronously, while the
-  // ResizeObserver below smooths any remaining drift so the transition appears
-  // stable and visually "fixed" to the user. In browsers without native
-  // overflow-anchor support (e.g. Safari), the observer is the primary
-  // compensation mechanism.
-
-  React.useEffect(() => {
-    return () => {
-      activeSessionCleanupRef.current?.();
-      activeSessionCleanupRef.current = null;
-      const pre = lastPreRef.current;
-      if (pre) {
-        cancelAllForPre(pre);
-        lastPreRef.current = null;
-      }
-    };
-  }, []);
-
-  const anchorScroll = React.useCallback((direction: 'collapse' | 'expand') => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
-    // Abort any in-flight session before starting a new one; otherwise the
-    // previous ResizeObserver and window listeners would race with this one.
-    activeSessionCleanupRef.current?.();
-    activeSessionCleanupRef.current = null;
-
-    const primaryAnchor = container.querySelector(ANCHOR_SELECTOR);
-    const toggleAnchor = toggleRef.current;
-
-    let anchor = primaryAnchor ?? toggleAnchor;
-    if (direction === 'collapse' && primaryAnchor && !isElementInViewport(primaryAnchor)) {
-      anchor = toggleAnchor ?? primaryAnchor;
-    }
-
-    if (!anchor) {
-      return;
-    }
-
-    // On collapse, animate the scrollbar gutter (padding swap) to avoid
-    // an instant height shrink when horizontal scrollbar space disappears.
-    // On expand, do the inverse only for truncated/max-size demos where
-    // scrollbar space can appear late and look like a snap.
-    const pre = container.querySelector('pre');
-    if (pre) {
-      lastPreRef.current = pre;
-      if (direction === 'collapse') {
-        // Smoothly return horizontal scroll to the left edge so the focused
-        // region (which usually starts at column 0) is visible after collapse,
-        // and so the fade overlay isn't masking scrolled-away content. We
-        // animate via a transform on the inner `code` element rather than
-        // tweening `pre.scrollLeft`, because the gutter animation below sets
-        // `overflow-x: hidden` which would snap `scrollLeft` to 0 instantly.
-        // Both animations start in the same frame: the scroll-back resets
-        // `scrollLeft` to 0 up front, so the gutter swap's `overflow-x`
-        // change has nothing left to snap.
-        smoothCollapseScrollLeft(pre, 300);
-        animateScrollbarGutter(pre);
-      }
-      if (direction === 'expand') {
-        // Cancel any in-flight collapse scroll-back so its leftover transform
-        // can't drift the code horizontally during the expand transition.
-        scrollbackAnimations.get(pre)?.cancel();
-        scrollbackAnimations.delete(pre);
-        if (pre.querySelector('[data-collapsible]')) {
-          animateScrollbarGutterExpand(pre);
-        }
-      }
-    }
-
-    const initialTop = anchor.getBoundingClientRect().top;
-    let active = true;
-    let cleanupTimer: ReturnType;
-
-    // Use ResizeObserver to compensate only when the container layout
-    // actually changes, rather than polling every animation frame.
-    // Callbacks fire after layout, so getBoundingClientRect() reads
-    // already-computed values without forcing an extra reflow.
-    const observer = new ResizeObserver(() => {
-      if (!active) {
-        return;
-      }
-      const delta = anchor.getBoundingClientRect().top - initialTop;
-      if (Math.abs(delta) > 0.5) {
-        window.scrollBy(0, delta);
-      }
-    });
-
-    // Stop compensating if the user interacts (scroll, click, keyboard),
-    // since UI changes like tab switches can invalidate anchor measurements.
-    function cleanup() {
-      if (!active) {
-        return;
-      }
-      active = false;
-      clearTimeout(cleanupTimer);
-      observer.disconnect();
-      window.removeEventListener('wheel', stopOnUserInteraction);
-      window.removeEventListener('touchmove', stopOnUserInteraction);
-      window.removeEventListener('pointerdown', stopOnUserInteraction);
-      window.removeEventListener('keydown', stopOnUserInteraction);
-      if (activeSessionCleanupRef.current === cleanup) {
-        activeSessionCleanupRef.current = null;
-      }
-    }
-    activeSessionCleanupRef.current = cleanup;
-
-    function stopOnUserInteraction() {
-      cleanup();
-    }
-    window.addEventListener('wheel', stopOnUserInteraction, { passive: true, once: true });
-    window.addEventListener('touchmove', stopOnUserInteraction, { passive: true, once: true });
-    window.addEventListener('pointerdown', stopOnUserInteraction, { passive: true, once: true });
-    window.addEventListener('keydown', stopOnUserInteraction, { passive: true, once: true });
-
-    observer.observe(container);
-
-    // Safety cleanup after the CSS transition completes.
-    const timeout = getTransitionTimeout(direction);
-    cleanupTimer = setTimeout(cleanup, timeout + 500);
-  }, []);
-
-  return { containerRef, toggleRef, anchorScroll };
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bc3313dc3a88b..03a3eb65cd3b40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: 0.0.4-canary.43
         version: 0.0.4-canary.43(@next/eslint-plugin-next@15.5.15)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.13)(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -285,8 +285,8 @@ importers:
         specifier: workspace:^
         version: link:../packages-internal/core-docs/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages-internal/markdown
@@ -727,8 +727,8 @@ importers:
         specifier: catalog:docs
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
@@ -3410,8 +3410,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -13913,7 +13913,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@1355a67(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@babel/standalone': 7.29.4

From 8a1e380db41bdf899121619833d726b2dc0502a6 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Thu, 7 May 2026 23:51:59 -0400
Subject: [PATCH 031/140] bump docs-infra

---
 docs/package.json                        |  2 +-
 package.json                             |  2 +-
 packages-internal/core-docs/package.json |  2 +-
 pnpm-lock.yaml                           | 18 +++++++++---------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 4911b18da0e3cf..b569e176e9bc5f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -27,7 +27,7 @@
     "@emotion/styled": "catalog:docs",
     "@mui/icons-material": "workspace:^",
     "@mui/internal-core-docs": "workspace:^",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
diff --git a/package.json b/package.json
index aed4900c120314..7aae06b3b669a3 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
     "@mui/internal-code-infra": "0.0.4-canary.43",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 922ab6c260c813..270f387c102a55 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03a3eb65cd3b40..21ec56d00d9fb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: 0.0.4-canary.43
         version: 0.0.4-canary.43(@next/eslint-plugin-next@15.5.15)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.13)(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -285,8 +285,8 @@ importers:
         specifier: workspace:^
         version: link:../packages-internal/core-docs/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages-internal/markdown
@@ -727,8 +727,8 @@ importers:
         specifier: catalog:docs
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
@@ -3410,8 +3410,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -13913,7 +13913,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@f8b6c50(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@babel/standalone': 7.29.4

From acb0ae5561edafffdbfee977e0b81d3c26df6d1e Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Fri, 8 May 2026 11:13:27 -0400
Subject: [PATCH 032/140] bump docs-infra

---
 docs/package.json                        |  2 +-
 package.json                             |  2 +-
 packages-internal/core-docs/package.json |  2 +-
 pnpm-lock.yaml                           | 18 +++++++++---------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index b569e176e9bc5f..29b90b00d21530 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -27,7 +27,7 @@
     "@emotion/styled": "catalog:docs",
     "@mui/icons-material": "workspace:^",
     "@mui/internal-core-docs": "workspace:^",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
diff --git a/package.json b/package.json
index 7aae06b3b669a3..72f20bb247a6ae 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
     "@mui/internal-code-infra": "0.0.4-canary.43",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 270f387c102a55..383161f9857f32 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21ec56d00d9fb6..7c07e18f705146 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: 0.0.4-canary.43
         version: 0.0.4-canary.43(@next/eslint-plugin-next@15.5.15)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.2.1(jiti@2.6.1))(typescript@5.9.3))(eslint@10.2.1(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.13)(prettier@3.8.3)(stylelint@17.9.1(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -285,8 +285,8 @@ importers:
         specifier: workspace:^
         version: link:../packages-internal/core-docs/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages-internal/markdown
@@ -727,8 +727,8 @@ importers:
         specifier: catalog:docs
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
@@ -3410,8 +3410,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -13913,7 +13913,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@d2d3fde(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@babel/standalone': 7.29.4

From 4ee34de8fdb63360d5e251252c1268afa4b930b1 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 12 May 2026 14:21:56 -0400
Subject: [PATCH 033/140] Add migration script

---
 docs/package.json                             |   4 +-
 .../css-theme-variables/configuration.js      |  10 +-
 .../css-theme-variables/native-color.js       |  10 +-
 .../css-theme-variables/overview.js           |  10 +-
 .../css-theme-variables/usage.js              |  10 +-
 package.json                                  |   3 +-
 packages-internal/core-docs/package.json      |   2 +-
 .../core-docs/src/utils/index.ts              |   2 -
 pnpm-lock.yaml                                |  18 +-
 scripts/migrateDemos.mjs                      | 724 ++++++++++++++++++
 10 files changed, 775 insertions(+), 18 deletions(-)
 create mode 100644 scripts/migrateDemos.mjs

diff --git a/docs/package.json b/docs/package.json
index 365e3b308ba848..cae88847d99797 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,6 +7,8 @@
     "build:clean": "rimraf .next && pnpm build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "next dev",
+    "docs-infra": "docs-infra",
+    "validate": "docs-infra validate --command 'pnpm validate'",
     "deploy": "git fetch upstream master && git push -f material-ui-docs FETCH_HEAD:latest",
     "icons": "rimraf --glob public/static/icons/* && node ./scripts/buildIcons.js",
     "start": "serve ./export",
@@ -27,7 +29,7 @@
     "@emotion/styled": "catalog:docs",
     "@mui/icons-material": "workspace:^",
     "@mui/internal-core-docs": "workspace:^",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
diff --git a/docs/pages/material-ui/customization/css-theme-variables/configuration.js b/docs/pages/material-ui/customization/css-theme-variables/configuration.js
index 92de205634ff5b..896308c78deb79 100644
--- a/docs/pages/material-ui/customization/css-theme-variables/configuration.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/configuration.js
@@ -3,8 +3,16 @@ import {
   demos,
   docs,
   demoComponents,
+  srcComponents,
 } from 'docs/data/material/customization/css-theme-variables/configuration.md?muiMarkdown';
 
 export default function Page() {
-  return ;
+  return (
+    
+  );
 }
diff --git a/docs/pages/material-ui/customization/css-theme-variables/native-color.js b/docs/pages/material-ui/customization/css-theme-variables/native-color.js
index 1fb0adf0935d00..517482518e7ba0 100644
--- a/docs/pages/material-ui/customization/css-theme-variables/native-color.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/native-color.js
@@ -3,8 +3,16 @@ import {
   demos,
   docs,
   demoComponents,
+  srcComponents,
 } from 'docs/data/material/customization/css-theme-variables/native-color.md?muiMarkdown';
 
 export default function Page() {
-  return ;
+  return (
+    
+  );
 }
diff --git a/docs/pages/material-ui/customization/css-theme-variables/overview.js b/docs/pages/material-ui/customization/css-theme-variables/overview.js
index 0a67f4cc771d99..6324701131bd41 100644
--- a/docs/pages/material-ui/customization/css-theme-variables/overview.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/overview.js
@@ -3,8 +3,16 @@ import {
   demos,
   docs,
   demoComponents,
+  srcComponents,
 } from 'docs/data/material/customization/css-theme-variables/overview.md?muiMarkdown';
 
 export default function Page() {
-  return ;
+  return (
+    
+  );
 }
diff --git a/docs/pages/material-ui/customization/css-theme-variables/usage.js b/docs/pages/material-ui/customization/css-theme-variables/usage.js
index 6a1761885dddb9..f449fa6c617651 100644
--- a/docs/pages/material-ui/customization/css-theme-variables/usage.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/usage.js
@@ -3,8 +3,16 @@ import {
   demos,
   docs,
   demoComponents,
+  srcComponents,
 } from 'docs/data/material/customization/css-theme-variables/usage.md?muiMarkdown';
 
 export default function Page() {
-  return ;
+  return (
+    
+  );
 }
diff --git a/package.json b/package.json
index 407204f9af5ea8..862d441c5660b7 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "docs:build-color-preview": "babel-node scripts/buildColorTypes",
     "docs:deploy": "pnpm --filter docs run deploy",
     "docs:dev": "pnpm --filter docs dev",
+    "docs:validate": "pnpm -F \"./docs\" run docs-infra validate --command 'pnpm docs:validate'",
     "docs:icons": "pnpm --filter docs icons",
     "docs:size-why": "cross-env DOCS_STATS_ENABLED=true pnpm docs:build",
     "docs:start": "pnpm --filter docs start",
@@ -92,7 +93,7 @@
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
     "@mui/internal-code-infra": "0.0.4-canary.43",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 622a555d48f7ec..620162e2e0ae1c 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c",
+    "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
diff --git a/packages-internal/core-docs/src/utils/index.ts b/packages-internal/core-docs/src/utils/index.ts
index 828b1a36d3302b..de7681378d2d48 100644
--- a/packages-internal/core-docs/src/utils/index.ts
+++ b/packages-internal/core-docs/src/utils/index.ts
@@ -1,3 +1 @@
 export { getProductInfoFromUrl } from './getProductInfoFromUrl';
-export { createDemo, createDemoWithVariants } from './createDemo';
-export { createDemoClient } from './createDemoClient';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f83dd5e299d9f1..f0ae9f3ad44a9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: 0.0.4-canary.43
         version: 0.0.4-canary.43(@next/eslint-plugin-next@15.5.16)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.14)(prettier@3.8.3)(stylelint@17.11.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -291,8 +291,8 @@ importers:
         specifier: workspace:^
         version: link:../packages-internal/core-docs/build
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../packages-internal/markdown
@@ -733,8 +733,8 @@ importers:
         specifier: catalog:docs
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
       '@mui/internal-docs-infra':
-        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c
-        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
@@ -3406,8 +3406,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c':
-    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c}
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db}
     version: 0.11.0
     engines: {node: '>=22.18.0'}
     hasBin: true
@@ -13807,7 +13807,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@a57681c(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@52dc6db(@types/react@19.2.14)(next@15.5.16(@babel/core@7.29.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.59.1)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@babel/standalone': 7.29.4
diff --git a/scripts/migrateDemos.mjs b/scripts/migrateDemos.mjs
new file mode 100644
index 00000000000000..89a4e7ebd3088f
--- /dev/null
+++ b/scripts/migrateDemos.mjs
@@ -0,0 +1,724 @@
+#!/usr/bin/env node
+/* eslint-disable no-await-in-loop -- one-off codemod, sequential I/O is intentional */
+/**
+ * One-off codemod: migrates legacy `{{"demo": "Foo.js"}}` markdown references
+ * in `docs/data/**` to the new `demos//index.ts` layout consumed by
+ * `@mui/internal-docs-infra`.
+ *
+ * Defaults to dry-run; pass `--write` to actually mutate the working tree.
+ *
+ * Usage:
+ *   node scripts/migrateDemos.mjs
+ *   node scripts/migrateDemos.mjs --write
+ *   node scripts/migrateDemos.mjs --filter buttons --verbose
+ */
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import {
+  parseImportsAndComments,
+  fileUrlToPortablePath,
+} from '@mui/internal-docs-infra/pipeline/loaderUtils';
+
+// ---------- CLI ----------
+const args = process.argv.slice(2);
+const WRITE = args.includes('--write');
+const VERBOSE = args.includes('--verbose');
+const FILTER = (() => {
+  const i = args.indexOf('--filter');
+  return i !== -1 ? args[i + 1] : null;
+})();
+const ROOT_ARG = (() => {
+  const i = args.indexOf('--root');
+  return i !== -1 ? args[i + 1] : 'docs/data';
+})();
+
+const REPO_ROOT = path.resolve(fileURLToPath(import.meta.url), '../..');
+const ROOT = path.resolve(REPO_ROOT, ROOT_ARG);
+
+const DEMO_RE = /\{\{\s*"demo"\s*:\s*"([^"]+)\.(?:js|tsx|jsx|ts)"([^}]*)\}\}/g;
+const DEMO_EXTS = ['.tsx', '.js', '.jsx', '.ts'];
+
+// ---------- helpers ----------
+function log(...m) {
+  console.warn(...m);
+}
+function vlog(...m) {
+  if (VERBOSE) {
+    console.warn(...m);
+  }
+}
+
+function toKebabCase(s) {
+  return s
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+function toPascalCase(s) {
+  return s
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((p) => p[0].toUpperCase() + p.slice(1))
+    .join('');
+}
+
+/**
+ * Compute folder names for every demo in a single .md file, handling
+ * collisions by falling back to the full kebab-cased component name.
+ */
+function computeFolderTokens(componentNames, mdBaseName) {
+  const base = toPascalCase(mdBaseName);
+  // Try every reasonable singular/plural form so e.g. `table.md` can strip
+  // `Table` AND `Tables`, and `buttons.md` can strip `Buttons` AND `Button`.
+  const forms = new Set([base]);
+  if (base.endsWith('s')) {
+    forms.add(base.slice(0, -1));
+  } else {
+    forms.add(`${base}s`);
+  }
+  if (base.endsWith('es')) {
+    forms.add(base.slice(0, -2));
+  } else if (!base.endsWith('s')) {
+    forms.add(`${base}es`);
+  }
+  // Sort longest-first so we prefer e.g. `Tables` over `Table`.
+  const ordered = [...forms].sort((a, b) => b.length - a.length);
+
+  /**
+   * Strip every PascalCase-aligned occurrence of any form from `name`.
+   * A match is only accepted when its boundaries align with PascalCase word
+   * boundaries — the char before must be lowercase/digit (or start of string)
+   * and the char after must be uppercase (or end of string). This prevents
+   * `BoxSystemProps` from matching the form `Boxs` against `BoxS`.
+   */
+  function stripForms(name) {
+    let result = '';
+    let i = 0;
+    while (i < name.length) {
+      let matched = null;
+      for (const form of ordered) {
+        if (name.slice(i, i + form.length).toLowerCase() !== form.toLowerCase()) {
+          continue;
+        }
+        const before = i === 0 ? null : name[i - 1];
+        const after = i + form.length >= name.length ? null : name[i + form.length];
+        const okBefore = before === null || /[a-z0-9]/.test(before);
+        const okAfter = after === null || /[A-Z]/.test(after);
+        if (okBefore && okAfter) {
+          matched = form;
+          break;
+        }
+      }
+      if (matched) {
+        i += matched.length;
+      } else {
+        result += name[i];
+        i += 1;
+      }
+    }
+    return result;
+  }
+
+  function strippedToken(name) {
+    const stripped = stripForms(name);
+    const kebab = toKebabCase(stripped);
+    return kebab || toKebabCase(name);
+  }
+
+  const initial = new Map();
+  for (const name of componentNames) {
+    initial.set(name, strippedToken(name));
+  }
+
+  const counts = new Map();
+  for (const v of initial.values()) {
+    counts.set(v, (counts.get(v) || 0) + 1);
+  }
+  const final = new Map();
+  for (const [name, token] of initial) {
+    if ((counts.get(token) || 0) > 1) {
+      final.set(name, toKebabCase(name));
+    } else {
+      final.set(name, token);
+    }
+  }
+
+  const seen = new Set();
+  for (const t of final.values()) {
+    if (seen.has(t)) {
+      throw new Error(
+        `migrateDemos: unresolvable folder-name collision in ${mdBaseName}.md among components: ${componentNames.join(', ')}`,
+      );
+    }
+    seen.add(t);
+  }
+  return final;
+}
+
+async function fileExists(p) {
+  try {
+    await fs.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function findDemoSource(dir, name) {
+  for (const ext of DEMO_EXTS) {
+    const p = path.join(dir, `${name}${ext}`);
+    if (await fileExists(p)) {
+      return { path: p, ext };
+    }
+  }
+  return null;
+}
+
+async function resolveExisting(p) {
+  if (await fileExists(p)) {
+    const stat = await fs.stat(p);
+    if (stat.isFile()) {
+      return p;
+    }
+  }
+  for (const ext of ['.tsx', '.ts', '.jsx', '.js', '.json', '.css']) {
+    const candidate = p + ext;
+    if (await fileExists(candidate)) {
+      return candidate;
+    }
+  }
+  for (const ext of ['.tsx', '.ts', '.jsx', '.js']) {
+    const candidate = path.join(p, `index${ext}`);
+    if (await fileExists(candidate)) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+/**
+ * Recursively collect every relative-import file reachable from the given
+ * source file, restricted to `withinDir`.
+ */
+async function collectLocalGraph(sourcePath, withinDir, acc = new Map()) {
+  if (acc.has(sourcePath)) {
+    return acc;
+  }
+  const code = await fs.readFile(sourcePath, 'utf8');
+  const parsed = await parseImportsAndComments(code, pathToFileURL(sourcePath).href);
+  acc.set(sourcePath, { code, parsed });
+
+  const withinNormalized = `${path.normalize(withinDir)}${path.sep}`;
+  for (const rel of Object.values(parsed.relative)) {
+    const importedPath = fileUrlToPortablePath(rel.url);
+    const normalized = path.normalize(importedPath);
+    if (!normalized.startsWith(withinNormalized) && normalized !== path.normalize(withinDir)) {
+      continue;
+    }
+    const resolved = await resolveExisting(importedPath);
+    if (!resolved) {
+      continue;
+    }
+    await collectLocalGraph(resolved, withinDir, acc);
+  }
+  return acc;
+}
+
+/**
+ * Splice import-path edits into `code` using byte positions reported by
+ * parseImportsAndComments. Each edit is `{ start, end, newSpecifier }` where
+ * `start`/`end` include the surrounding quotes.
+ */
+function applyImportEdits(code, edits) {
+  if (!edits.length) {
+    return code;
+  }
+  const sorted = [...edits].sort((a, b) => a.start - b.start);
+  let out = '';
+  let cursor = 0;
+  for (const edit of sorted) {
+    out += code.slice(cursor, edit.start);
+    out += JSON.stringify(edit.newSpecifier);
+    cursor = edit.end;
+  }
+  out += code.slice(cursor);
+  return out;
+}
+
+function indexTsTemplate(componentName) {
+  return `import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ${componentName} from './${componentName}';
+
+export default createDemo(import.meta.url, ${componentName});
+`;
+}
+
+/**
+ * Insert `{/* @focus-start *\/}` / `{/* @focus-end *\/}` JSX comments around
+ * the block of source lines that match `previewText`. Returns the modified
+ * code, or `null` if no contiguous match was found.
+ *
+ * The preview file holds the inner JSX of the demo with leading indentation
+ * stripped. We locate the matching window by trying every offset and looking
+ * for a constant-whitespace prefix that aligns each preview line with the
+ * corresponding source line.
+ */
+function insertFocusMarkers(code, previewText) {
+  const newline = code.includes('\r\n') ? '\r\n' : '\n';
+  const codeLines = code.split(/\r?\n/);
+  const previewLines = previewText.split(/\r?\n/);
+  while (previewLines.length && previewLines[0].trim() === '') {
+    previewLines.shift();
+  }
+  while (previewLines.length && previewLines[previewLines.length - 1].trim() === '') {
+    previewLines.pop();
+  }
+  if (!previewLines.length) {
+    return null;
+  }
+  const firstPreview = previewLines[0];
+  for (let i = 0; i + previewLines.length <= codeLines.length; i += 1) {
+    const firstCode = codeLines[i];
+    if (!firstCode.endsWith(firstPreview)) {
+      continue;
+    }
+    const indent = firstCode.slice(0, firstCode.length - firstPreview.length);
+    if (!/^\s*$/.test(indent)) {
+      continue;
+    }
+    let matched = true;
+    for (let j = 1; j < previewLines.length; j += 1) {
+      const previewLine = previewLines[j];
+      const codeLine = codeLines[i + j];
+      if (previewLine.trim() === '') {
+        if (codeLine.trim() !== '') {
+          matched = false;
+          break;
+        }
+        continue;
+      }
+      if (codeLine !== indent + previewLine) {
+        matched = false;
+        break;
+      }
+    }
+    if (!matched) {
+      continue;
+    }
+    const prevLine = i > 0 ? codeLines[i - 1].trimEnd() : '';
+    const nextLineIdx = i + previewLines.length;
+    const nextLine = nextLineIdx < codeLines.length ? codeLines[nextLineIdx].trim() : '';
+
+    // Case 1: matched block sits in JSX-children position (line above ends
+    // with `>`, an opening JSX tag). Use JSX comments around the block.
+    if (prevLine.endsWith('>')) {
+      const startMarker = `${indent}{/* @focus-start */}`;
+      const endMarker = `${indent}{/* @focus-end */}`;
+      const newLines = [
+        ...codeLines.slice(0, i),
+        startMarker,
+        ...codeLines.slice(i, nextLineIdx),
+        endMarker,
+        ...codeLines.slice(nextLineIdx),
+      ];
+      return newLines.join(newline);
+    }
+
+    // Case 2: matched block IS the entire JSX returned by the function — the
+    // line above ends with `return (` (or just `(`) and the next line closes
+    // with `);`. Use line-comment markers around the `return` statement, the
+    // same form the eslint plugin's `wrapReturn` autofix produces.
+    if (prevLine.endsWith('(') && /^\)\s*;?$/.test(nextLine)) {
+      // Find the line containing `return` (usually i-1, but allow the `(` to
+      // sit on its own line in unusual formatting).
+      let returnLineIdx = i - 1;
+      while (returnLineIdx >= 0 && !/\breturn\b/.test(codeLines[returnLineIdx])) {
+        returnLineIdx -= 1;
+      }
+      if (returnLineIdx < 0) {
+        return null;
+      }
+      const returnIndent = codeLines[returnLineIdx].match(/^\s*/)[0];
+      const startMarker = `${returnIndent}// @focus-start @padding 1`;
+      const endMarker = `${returnIndent}// @focus-end`;
+      const newLines = [
+        ...codeLines.slice(0, returnLineIdx),
+        startMarker,
+        ...codeLines.slice(returnLineIdx, nextLineIdx + 1),
+        endMarker,
+        ...codeLines.slice(nextLineIdx + 1),
+      ];
+      return newLines.join(newline);
+    }
+
+    return null;
+  }
+  return null;
+}
+
+// ---------- main per-md processing ----------
+async function processMarkdown(mdPath, plan) {
+  const dir = path.dirname(mdPath);
+  const mdBaseName = path.basename(mdPath, '.md');
+  const src = await fs.readFile(mdPath, 'utf8');
+
+  const matches = [...src.matchAll(DEMO_RE)];
+  if (!matches.length) {
+    vlog(`  skip (no {{"demo": ...}}): ${path.relative(REPO_ROOT, mdPath)}`);
+    return;
+  }
+
+  const componentNames = [...new Set(matches.map((m) => m[1]))];
+  const folderTokens = computeFolderTokens(componentNames, mdBaseName);
+
+  const demoInfo = new Map();
+  for (const name of componentNames) {
+    const found = await findDemoSource(dir, name);
+    if (!found) {
+      log(
+        `  WARN: no source file for {{"demo": "${name}.*"}} in ${path.relative(REPO_ROOT, mdPath)}`,
+      );
+      continue;
+    }
+    const graph = await collectLocalGraph(found.path, dir);
+    demoInfo.set(name, { source: found.path, ext: found.ext, graph });
+  }
+
+  if (!demoInfo.size) {
+    return;
+  }
+
+  const demoEntryPoints = new Set([...demoInfo.values()].map((d) => d.source));
+  const helperUsedBy = new Map();
+  for (const [name, info] of demoInfo) {
+    for (const filePath of info.graph.keys()) {
+      if (demoEntryPoints.has(filePath)) {
+        continue;
+      }
+      if (!helperUsedBy.has(filePath)) {
+        helperUsedBy.set(filePath, new Set());
+      }
+      helperUsedBy.get(filePath).add(name);
+    }
+  }
+
+  const demosRoot = path.join(dir, 'demos');
+
+  const helperDest = new Map();
+  for (const [helperPath, users] of helperUsedBy) {
+    const base = path.basename(helperPath);
+    if (users.size >= 2) {
+      helperDest.set(helperPath, path.join(demosRoot, base));
+    } else {
+      const onlyUser = [...users][0];
+      const folder = folderTokens.get(onlyUser);
+      helperDest.set(helperPath, path.join(demosRoot, folder, base));
+    }
+  }
+
+  const demoDest = new Map();
+  for (const [name, info] of demoInfo) {
+    const folder = folderTokens.get(name);
+    demoDest.set(name, path.join(demosRoot, folder, `${name}${info.ext}`));
+  }
+
+  function destFor(absPath) {
+    if (helperDest.has(absPath)) {
+      return helperDest.get(absPath);
+    }
+    for (const [name, info] of demoInfo) {
+      if (info.source === absPath) {
+        return demoDest.get(name);
+      }
+    }
+    return null;
+  }
+
+  const fileWrites = [];
+  const filesToDelete = new Set();
+
+  for (const [demoName, info] of demoInfo) {
+    for (const [absPath, { code, parsed }] of info.graph) {
+      const dest = destFor(absPath);
+      if (!dest) {
+        continue;
+      }
+      const edits = [];
+      for (const rel of Object.values(parsed.relative)) {
+        const importedAbs = fileUrlToPortablePath(rel.url);
+        const importedResolved = await resolveExisting(importedAbs);
+        if (!importedResolved) {
+          continue;
+        }
+        const importedDest = destFor(importedResolved);
+        if (!importedDest) {
+          continue;
+        }
+        let newSpec = path.relative(path.dirname(dest), importedDest);
+        if (!newSpec.startsWith('.')) {
+          newSpec = `./${newSpec}`;
+        }
+        newSpec = newSpec.replace(/\.(?:tsx?|jsx?)$/, '');
+        newSpec = newSpec.split(path.sep).join('/');
+        for (const pos of rel.positions) {
+          edits.push({ start: pos.start, end: pos.end, newSpecifier: newSpec });
+        }
+      }
+      let content = applyImportEdits(code, edits);
+
+      // Insert focus markers based on the legacy `.tsx.preview` snippet,
+      // but only on the demo entry file (not shared helpers).
+      if (absPath === info.source) {
+        const previewPath = path.join(dir, `${demoName}.tsx.preview`);
+        if (await fileExists(previewPath)) {
+          const previewText = await fs.readFile(previewPath, 'utf8');
+          const withMarkers = insertFocusMarkers(content, previewText);
+          if (withMarkers !== null) {
+            content = withMarkers;
+          } else {
+            log(
+              `  WARN: could not match preview to source for ${demoName} in ${path.relative(REPO_ROOT, mdPath)}`,
+            );
+          }
+        }
+      }
+
+      if (dest !== absPath || content !== code) {
+        fileWrites.push({ destPath: dest, content });
+      }
+      if (dest !== absPath) {
+        filesToDelete.add(absPath);
+      }
+    }
+  }
+
+  for (const [name] of demoInfo) {
+    const destDir = path.dirname(demoDest.get(name));
+    fileWrites.push({
+      destPath: path.join(destDir, 'index.ts'),
+      content: indexTsTemplate(name),
+    });
+  }
+
+  // Deduplicate fileWrites by destPath (shared helpers are visited in every
+  // demo's graph). Keep the last entry; assert content agreement.
+  const dedupedByPath = new Map();
+  for (const w of fileWrites) {
+    const existing = dedupedByPath.get(w.destPath);
+    if (existing && existing.content !== w.content) {
+      throw new Error(
+        `migrateDemos: conflicting rewrites for ${path.relative(REPO_ROOT, w.destPath)}`,
+      );
+    }
+    dedupedByPath.set(w.destPath, w);
+  }
+  const dedupedWrites = [...dedupedByPath.values()];
+
+  // Patch the markdown.
+  let newMd = '';
+  let cursor = 0;
+  for (const m of matches) {
+    const componentName = m[1];
+    const tail = m[2];
+    if (!demoInfo.has(componentName)) {
+      continue;
+    }
+    const folder = folderTokens.get(componentName);
+    const relFromDocsData = path.relative(ROOT, dir).split(path.sep).join('/');
+    const newPath = `../data/${relFromDocsData}/demos/${folder}/index.ts`;
+    const replacement = `{{"component": "${newPath}"${tail}}}`;
+    newMd += src.slice(cursor, m.index);
+    newMd += replacement;
+    cursor = m.index + m[0].length;
+  }
+  newMd += src.slice(cursor);
+  const mdChanged = newMd !== src;
+
+  // Delete legacy siblings of every migrated demo.
+  for (const [, info] of demoInfo) {
+    const base = path.basename(info.source, info.ext);
+    for (const ext of [...DEMO_EXTS, '.tsx.preview']) {
+      const candidate = path.join(dir, `${base}${ext}`);
+      if (candidate === info.source) {
+        continue;
+      }
+      if (await fileExists(candidate)) {
+        filesToDelete.add(candidate);
+      }
+    }
+  }
+
+  // Delete legacy siblings of every moved helper too (e.g. when we move
+  // `components/Menubar.tsx`, we also want `components/Menubar.js` gone).
+  for (const helperPath of helperDest.keys()) {
+    const helperDir = path.dirname(helperPath);
+    const helperExt = path.extname(helperPath);
+    const helperBase = path.basename(helperPath, helperExt);
+    for (const ext of [...DEMO_EXTS, '.tsx.preview']) {
+      const candidate = path.join(helperDir, `${helperBase}${ext}`);
+      if (candidate === helperPath) {
+        continue;
+      }
+      if (await fileExists(candidate)) {
+        filesToDelete.add(candidate);
+      }
+    }
+  }
+
+  // Orphan cleanup: any *.tsx, *.js, *.tsx.preview directly in `dir` that we did
+  // not touch (i.e. not referenced by any {{"demo": …}}) is removed.
+  const dirEntries = await fs.readdir(dir, { withFileTypes: true });
+  const referencedNames = new Set([...demoInfo.keys()]);
+  for (const ent of dirEntries) {
+    if (!ent.isFile()) {
+      continue;
+    }
+    const isDemoLike =
+      ent.name.endsWith('.tsx.preview') ||
+      ent.name.endsWith('.tsx') ||
+      ent.name.endsWith('.js') ||
+      ent.name.endsWith('.jsx') ||
+      ent.name.endsWith('.ts');
+    if (!isDemoLike) {
+      continue;
+    }
+    let base = ent.name;
+    if (base.endsWith('.tsx.preview')) {
+      base = base.slice(0, -'.tsx.preview'.length);
+    } else {
+      base = base.replace(/\.(?:tsx?|jsx?)$/, '');
+    }
+    if (referencedNames.has(base)) {
+      continue;
+    }
+    if (!/^[A-Z][A-Za-z0-9]*$/.test(base)) {
+      continue;
+    }
+    filesToDelete.add(path.join(dir, ent.name));
+  }
+
+  plan.push({
+    mdPath,
+    mdChanged,
+    newMd,
+    fileWrites: dedupedWrites,
+    filesToDelete: [...filesToDelete],
+  });
+}
+
+// ---------- entrypoint ----------
+async function main() {
+  log(
+    `migrateDemos: ${WRITE ? 'WRITE' : 'DRY-RUN'} root=${path.relative(REPO_ROOT, ROOT)}${
+      FILTER ? ` filter=${FILTER}` : ''
+    }`,
+  );
+
+  const mdFiles = [];
+  for await (const entry of fs.glob('**/*.md', { cwd: ROOT })) {
+    if (FILTER && !entry.includes(FILTER)) {
+      continue;
+    }
+    mdFiles.push(path.join(ROOT, entry));
+  }
+  log(`Found ${mdFiles.length} markdown files`);
+
+  const plan = [];
+  for (const md of mdFiles) {
+    try {
+      await processMarkdown(md, plan);
+    } catch (err) {
+      log(`  ERROR processing ${path.relative(REPO_ROOT, md)}: ${err.message}`);
+      if (VERBOSE) {
+        console.error(err.stack);
+      }
+    }
+  }
+
+  let totalWrites = 0;
+  let totalDeletes = 0;
+  let totalMdPatched = 0;
+  for (const entry of plan) {
+    if (entry.mdChanged) {
+      totalMdPatched += 1;
+    }
+    totalWrites += entry.fileWrites.length;
+    totalDeletes += entry.filesToDelete.length;
+    if (VERBOSE) {
+      log(`\n${path.relative(REPO_ROOT, entry.mdPath)}`);
+      if (entry.mdChanged) {
+        log(`  PATCH md`);
+      }
+      for (const w of entry.fileWrites) {
+        log(`  WRITE ${path.relative(REPO_ROOT, w.destPath)}`);
+      }
+      for (const d of entry.filesToDelete) {
+        log(`  DELETE ${path.relative(REPO_ROOT, d)}`);
+      }
+    }
+  }
+  log(
+    `\nSummary: ${totalMdPatched} md patched, ${totalWrites} files written, ${totalDeletes} files deleted`,
+  );
+
+  if (!WRITE) {
+    log(`\n(dry-run; pass --write to apply)`);
+    return;
+  }
+
+  for (const entry of plan) {
+    for (const w of entry.fileWrites) {
+      await fs.mkdir(path.dirname(w.destPath), { recursive: true });
+      await fs.writeFile(w.destPath, w.content);
+    }
+    for (const d of entry.filesToDelete) {
+      try {
+        await fs.unlink(d);
+      } catch (err) {
+        if (err.code !== 'ENOENT') {
+          throw err;
+        }
+      }
+    }
+    if (entry.mdChanged) {
+      await fs.writeFile(entry.mdPath, entry.newMd);
+    }
+  }
+
+  // Prune any directories that became empty as a result of helper moves
+  // (e.g. an old `components/` subdir).
+  const candidateParents = new Set();
+  for (const entry of plan) {
+    for (const d of entry.filesToDelete) {
+      candidateParents.add(path.dirname(d));
+    }
+  }
+  // Sort by depth (deepest first) so child dirs are pruned before parents.
+  const sortedParents = [...candidateParents].sort(
+    (a, b) => b.split(path.sep).length - a.split(path.sep).length,
+  );
+  for (const dir of sortedParents) {
+    try {
+      const entries = await fs.readdir(dir);
+      if (entries.length === 0) {
+        await fs.rmdir(dir);
+      }
+    } catch (err) {
+      if (err.code !== 'ENOENT') {
+        throw err;
+      }
+    }
+  }
+
+  log(`\nDone.`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

From bb1e17d3117811b2791175832c88c9c4834b08b0 Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 12 May 2026 14:57:10 -0400
Subject: [PATCH 034/140] Fix broken links checker

---
 docs/scripts/reportBrokenLinks.mts            | 20 +++++++++----------
 .../core-docs/src/DemoContent/DemoContent.tsx |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/scripts/reportBrokenLinks.mts b/docs/scripts/reportBrokenLinks.mts
index a7a6fcfa817319..483dca414db7fa 100644
--- a/docs/scripts/reportBrokenLinks.mts
+++ b/docs/scripts/reportBrokenLinks.mts
@@ -28,16 +28,16 @@ async function main() {
       // Links used in demos under MemoryRouter
       // TODO: Create an easier way to identify content under MemoryRouter
       // (e.g. a class or an option on the demo)
-      '[id^="demo-"] a[href^="/inbox"]',
-      '[id^="demo-"] a[href^="/trash"]',
-      '[id^="demo-"] a[href^="/spam"]',
-      '[id^="demo-"] a[href^="/drafts"]',
-      '[id^="demo-"] a[href^="#simple-list"]',
-      '[id^="demo-"] a[href^="#customized-list"]',
-      '[id^="demo-"] a[href^="#text-buttons"]',
-      '[id^="demo-"] a[href^="#contained-buttons"]',
-      '[id^="demo-"] a[href^="#outlined-buttons"]',
-      '[id^="demo-"] a[href^="#foo"]',
+      '.demo-preview a[href^="/inbox"]',
+      '.demo-preview a[href^="/trash"]',
+      '.demo-preview a[href^="/spam"]',
+      '.demo-preview a[href^="/drafts"]',
+      '.demo-preview a[href^="#simple-list"]',
+      '.demo-preview a[href^="#customized-list"]',
+      '.demo-preview a[href^="#text-buttons"]',
+      '.demo-preview a[href^="#contained-buttons"]',
+      '.demo-preview a[href^="#outlined-buttons"]',
+      '.demo-preview a[href^="#foo"]',
     ],
     ignores: [
       {
diff --git a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
index 5dfbf73ded44d1..c9d12d2e3cdc6c 100644
--- a/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
+++ b/packages-internal/core-docs/src/DemoContent/DemoContent.tsx
@@ -922,7 +922,7 @@ export default function DemoContent(props: ContentProps) {
       {demo.slug && }
 
       {/* Component Preview */}
-      
+      
         
         {demo.component}
       

From 732f5abc796053fd29012467458a1544b1226e6f Mon Sep 17 00:00:00 2001
From: dav-is 
Date: Tue, 12 May 2026 14:57:19 -0400
Subject: [PATCH 035/140] Migrate all demos

---
 .../accordion/AccordionExpandDefault.js       |    44 -
 .../accordion/AccordionExpandIcon.js          |    45 -
 .../accordion/AccordionTransition.js          |    77 -
 .../components/accordion/AccordionUsage.js    |    59 -
 .../accordion/ControlledAccordions.js         |    97 -
 .../accordion/CustomizedAccordions.js         |    98 -
 .../components/accordion/DisabledAccordion.js |    53 -
 .../components/accordion/accordion.md         |    14 +-
 .../controlled}/ControlledAccordions.tsx      |     2 +
 .../accordion/demos/controlled/index.ts       |     5 +
 .../customized}/CustomizedAccordions.tsx      |     2 +
 .../accordion/demos/customized/index.ts       |     5 +
 .../disabled}/DisabledAccordion.tsx           |     2 +
 .../accordion/demos/disabled/index.ts         |     5 +
 .../AccordionExpandDefault.tsx                |     2 +
 .../accordion/demos/expand-default/index.ts   |     5 +
 .../expand-icon}/AccordionExpandIcon.tsx      |     2 +
 .../accordion/demos/expand-icon/index.ts      |     5 +
 .../transition}/AccordionTransition.tsx       |     2 +
 .../accordion/demos/transition/index.ts       |     5 +
 .../{ => demos/usage}/AccordionUsage.tsx      |     2 +
 .../components/accordion/demos/usage/index.ts |     5 +
 .../material/components/alert/ActionAlerts.js |    23 -
 .../components/alert/ActionAlerts.tsx.preview |    13 -
 .../material/components/alert/BasicAlerts.js  |    13 -
 .../components/alert/BasicAlerts.tsx.preview  |     4 -
 .../material/components/alert/ColorAlerts.js  |     9 -
 .../components/alert/ColorAlerts.tsx.preview  |     3 -
 .../components/alert/DescriptionAlerts.js     |    26 -
 .../alert/DescriptionAlerts.tsx.preview       |    16 -
 .../material/components/alert/FilledAlerts.js |    21 -
 .../components/alert/FilledAlerts.tsx.preview |    12 -
 .../material/components/alert/IconAlerts.js   |    24 -
 .../components/alert/IconAlerts.tsx.preview   |    13 -
 .../components/alert/OutlinedAlerts.js        |    21 -
 .../alert/OutlinedAlerts.tsx.preview          |    12 -
 .../material/components/alert/SimpleAlert.js  |    10 -
 .../components/alert/SimpleAlert.tsx.preview  |     3 -
 .../components/alert/TransitionAlerts.js      |    44 -
 docs/data/material/components/alert/alert.md  |    18 +-
 .../alert/{ => demos/action}/ActionAlerts.tsx |     2 +
 .../components/alert/demos/action/index.ts    |     5 +
 .../alert/{ => demos/basic}/BasicAlerts.tsx   |     2 +
 .../components/alert/demos/basic/index.ts     |     5 +
 .../alert/{ => demos/color}/ColorAlerts.tsx   |     2 +
 .../components/alert/demos/color/index.ts     |     5 +
 .../description}/DescriptionAlerts.tsx        |     2 +
 .../alert/demos/description/index.ts          |     5 +
 .../alert/{ => demos/filled}/FilledAlerts.tsx |     2 +
 .../components/alert/demos/filled/index.ts    |     5 +
 .../alert/{ => demos/icon}/IconAlerts.tsx     |     2 +
 .../components/alert/demos/icon/index.ts      |     5 +
 .../{ => demos/outlined}/OutlinedAlerts.tsx   |     2 +
 .../components/alert/demos/outlined/index.ts  |     5 +
 .../alert/{ => demos/simple}/SimpleAlert.tsx  |     2 +
 .../components/alert/demos/simple/index.ts    |     5 +
 .../transition}/TransitionAlerts.tsx          |     2 +
 .../alert/demos/transition/index.ts           |     5 +
 .../material/components/app-bar/BackToTop.js  |    90 -
 .../components/app-bar/BottomAppBar.js        |   130 -
 .../components/app-bar/ButtonAppBar.js        |    31 -
 .../components/app-bar/DenseAppBar.js         |    29 -
 .../app-bar/DenseAppBar.tsx.preview           |    16 -
 .../components/app-bar/DrawerAppBar.js        |   145 -
 .../components/app-bar/ElevateAppBar.js       |    66 -
 .../app-bar/EnableColorOnDarkAppBar.js        |    44 -
 .../EnableColorOnDarkAppBar.tsx.preview       |     8 -
 .../material/components/app-bar/HideAppBar.js |    65 -
 .../material/components/app-bar/MenuAppBar.js |    95 -
 .../components/app-bar/PrimarySearchAppBar.js |   233 -
 .../components/app-bar/ProminentAppBar.js     |    58 -
 .../components/app-bar/ResponsiveAppBar.js    |   159 -
 .../components/app-bar/SearchAppBar.js        |    88 -
 .../material/components/app-bar/app-bar.md    |    26 +-
 .../{ => demos/back-to-top}/BackToTop.tsx     |     2 +
 .../app-bar/demos/back-to-top/index.ts        |     5 +
 .../{ => demos/bottom}/BottomAppBar.tsx       |     2 +
 .../components/app-bar/demos/bottom/index.ts  |     5 +
 .../{ => demos/button}/ButtonAppBar.tsx       |     2 +
 .../components/app-bar/demos/button/index.ts  |     5 +
 .../app-bar/{ => demos/dense}/DenseAppBar.tsx |     2 +
 .../components/app-bar/demos/dense/index.ts   |     5 +
 .../{ => demos/drawer}/DrawerAppBar.tsx       |     2 +
 .../components/app-bar/demos/drawer/index.ts  |     5 +
 .../{ => demos/elevate}/ElevateAppBar.tsx     |     2 +
 .../components/app-bar/demos/elevate/index.ts |     5 +
 .../EnableColorOnDarkAppBar.tsx               |     2 +
 .../demos/enable-color-on-dark/index.ts       |     5 +
 .../app-bar/{ => demos/hide}/HideAppBar.tsx   |     2 +
 .../components/app-bar/demos/hide/index.ts    |     5 +
 .../app-bar/{ => demos/menu}/MenuAppBar.tsx   |     2 +
 .../components/app-bar/demos/menu/index.ts    |     5 +
 .../primary-search}/PrimarySearchAppBar.tsx   |     2 +
 .../app-bar/demos/primary-search/index.ts     |     5 +
 .../{ => demos/prominent}/ProminentAppBar.tsx |     2 +
 .../app-bar/demos/prominent/index.ts          |     5 +
 .../responsive}/ResponsiveAppBar.tsx          |     0
 .../app-bar/demos/responsive/index.ts         |     5 +
 .../{ => demos/search}/SearchAppBar.tsx       |     2 +
 .../components/app-bar/demos/search/index.ts  |     5 +
 .../components/autocomplete/Asynchronous.js   |   116 -
 .../autocomplete/AutocompleteHint.js          |   197 -
 .../components/autocomplete/CheckboxesTags.js |    85 -
 .../components/autocomplete/ComboBox.js       |    14 -
 .../autocomplete/ComboBox.tsx.preview         |     6 -
 .../autocomplete/ControllableStates.js        |    32 -
 .../components/autocomplete/CountrySelect.js  |   474 -
 .../autocomplete/CustomInputAutocomplete.js   |    28 -
 .../CustomSingleValueRendering.js             |    78 -
 .../CustomSingleValueRendering.tsx.preview    |    16 -
 .../components/autocomplete/CustomizedHook.js |   368 -
 .../autocomplete/CustomizedHook.tsx.preview   |     6 -
 .../autocomplete/DisabledOptions.js           |    23 -
 .../autocomplete/DisabledOptions.tsx.preview  |     8 -
 .../components/autocomplete/Filter.js         |   147 -
 .../autocomplete/Filter.tsx.preview           |     7 -
 .../components/autocomplete/FixedTags.js      |   170 -
 .../components/autocomplete/FreeSolo.js       |   182 -
 .../autocomplete/FreeSoloCreateOption.js      |   202 -
 .../FreeSoloCreateOptionDialog.js             |   275 -
 .../components/autocomplete/GitHubLabel.js    |   385 -
 .../autocomplete/GloballyCustomizedOptions.js |   636 -
 .../GloballyCustomizedOptions.tsx.preview     |     6 -
 .../components/autocomplete/GoogleMaps.js     |   331 -
 .../components/autocomplete/Grouped.js        |   150 -
 .../autocomplete/Grouped.tsx.preview          |     7 -
 .../components/autocomplete/Highlights.js     |   167 -
 .../autocomplete/InfiniteLoading.js           |   351 -
 .../autocomplete/InfiniteLoading.tsx.preview  |     3 -
 .../components/autocomplete/LimitTags.js      |   147 -
 .../autocomplete/LimitTags.tsx.preview        |    12 -
 .../components/autocomplete/Playground.js     |   288 -
 .../components/autocomplete/RenderGroup.js    |   172 -
 .../autocomplete/RenderGroup.tsx.preview      |    13 -
 .../material/components/autocomplete/Sizes.js |   236 -
 .../material/components/autocomplete/Tags.js  |   202 -
 .../autocomplete/UseAutocomplete.js           |   205 -
 .../autocomplete/UseAutocomplete.tsx.preview  |    16 -
 .../components/autocomplete/Virtualize.js     |   211 -
 .../components/autocomplete/autocomplete.md   |    56 +-
 .../{ => demos/asynchronous}/Asynchronous.tsx |     2 +
 .../autocomplete/demos/asynchronous/index.ts  |     5 +
 .../checkboxes-tags}/CheckboxesTags.tsx       |     2 +
 .../demos/checkboxes-tags/index.ts            |     5 +
 .../{ => demos/combo-box}/ComboBox.tsx        |     4 +-
 .../autocomplete/demos/combo-box/index.ts     |     5 +
 .../{ => demos/combo-box}/top100Films.ts      |     0
 .../ControllableStates.tsx                    |     2 +
 .../demos/controllable-states/index.ts        |     5 +
 .../country-select}/CountrySelect.tsx         |     2 +
 .../demos/country-select/index.ts             |     5 +
 .../custom-input}/CustomInputAutocomplete.tsx |     2 +
 .../autocomplete/demos/custom-input/index.ts  |     5 +
 .../CustomSingleValueRendering.tsx            |     2 +
 .../custom-single-value-rendering/index.ts    |     5 +
 .../customized-hook}/CustomizedHook.tsx       |     2 +
 .../demos/customized-hook/index.ts            |     5 +
 .../disabled-options}/DisabledOptions.tsx     |     2 +
 .../demos/disabled-options/index.ts           |     5 +
 .../{ => demos/filter}/Filter.tsx             |     2 +
 .../autocomplete/demos/filter/index.ts        |     5 +
 .../{ => demos/fixed-tags}/FixedTags.tsx      |     2 +
 .../autocomplete/demos/fixed-tags/index.ts    |     5 +
 .../FreeSoloCreateOptionDialog.tsx            |     2 +
 .../free-solo-create-option-dialog/index.ts   |     5 +
 .../FreeSoloCreateOption.tsx                  |     2 +
 .../demos/free-solo-create-option/index.ts    |     5 +
 .../{ => demos/free-solo}/FreeSolo.tsx        |     2 +
 .../autocomplete/demos/free-solo/index.ts     |     5 +
 .../{ => demos/git-hub-label}/GitHubLabel.tsx |     2 +
 .../autocomplete/demos/git-hub-label/index.ts |     5 +
 .../GloballyCustomizedOptions.tsx             |     2 +
 .../globally-customized-options/index.ts      |     5 +
 .../{ => demos/google-maps}/GoogleMaps.tsx    |     2 +
 .../autocomplete/demos/google-maps/index.ts   |     5 +
 .../{ => demos/grouped}/Grouped.tsx           |     2 +
 .../autocomplete/demos/grouped/index.ts       |     5 +
 .../{ => demos/highlights}/Highlights.tsx     |     2 +
 .../autocomplete/demos/highlights/index.ts    |     5 +
 .../{ => demos/hint}/AutocompleteHint.tsx     |     2 +
 .../autocomplete/demos/hint/index.ts          |     5 +
 .../infinite-loading}/InfiniteLoading.tsx     |     6 +-
 .../demos/infinite-loading/index.ts           |     5 +
 .../{ => demos/infinite-loading}/movies.ts    |     0
 .../{ => demos/infinite-loading}/server.ts    |     4 +-
 .../{ => demos/limit-tags}/LimitTags.tsx      |     2 +
 .../autocomplete/demos/limit-tags/index.ts    |     5 +
 .../{ => demos/playground}/Playground.tsx     |     2 +
 .../autocomplete/demos/playground/index.ts    |     5 +
 .../{ => demos/render-group}/RenderGroup.tsx  |     2 +
 .../autocomplete/demos/render-group/index.ts  |     5 +
 .../autocomplete/{ => demos/sizes}/Sizes.tsx  |     2 +
 .../autocomplete/demos/sizes/index.ts         |     5 +
 .../autocomplete/{ => demos/tags}/Tags.tsx    |     2 +
 .../autocomplete/demos/tags/index.ts          |     5 +
 .../{ => demos/use}/UseAutocomplete.tsx       |     2 +
 .../autocomplete/demos/use/index.ts           |     5 +
 .../{ => demos/virtualize}/Virtualize.tsx     |     2 +
 .../autocomplete/demos/virtualize/index.ts    |     5 +
 .../components/autocomplete/movies.js         | 15317 ----------------
 .../components/autocomplete/server.js         |    80 -
 .../components/autocomplete/top100Films.js    |   129 -
 .../avatars/BackgroundLetterAvatars.js        |    41 -
 .../BackgroundLetterAvatars.tsx.preview       |     3 -
 .../components/avatars/BadgeAvatars.js        |    62 -
 .../avatars/BadgeAvatars.tsx.preview          |    16 -
 .../avatars/CustomSurplusAvatars.js           |    16 -
 .../avatars/CustomSurplusAvatars.tsx.preview  |     9 -
 .../components/avatars/FallbackAvatars.js     |    23 -
 .../avatars/FallbackAvatars.tsx.preview       |    13 -
 .../components/avatars/GroupAvatars.js        |    14 -
 .../avatars/GroupAvatars.tsx.preview          |     7 -
 .../components/avatars/IconAvatars.js         |    22 -
 .../avatars/IconAvatars.tsx.preview           |     9 -
 .../components/avatars/ImageAvatars.js        |    12 -
 .../avatars/ImageAvatars.tsx.preview          |     3 -
 .../components/avatars/LetterAvatars.js       |    13 -
 .../avatars/LetterAvatars.tsx.preview         |     3 -
 .../components/avatars/SizeAvatars.js         |    20 -
 .../avatars/SizeAvatars.tsx.preview           |    11 -
 .../material/components/avatars/Spacing.js    |    25 -
 .../components/avatars/Spacing.tsx.preview    |    15 -
 .../components/avatars/TotalAvatars.js        |    13 -
 .../avatars/TotalAvatars.tsx.preview          |     6 -
 .../components/avatars/UploadAvatars.js       |    53 -
 .../components/avatars/VariantAvatars.js      |    17 -
 .../avatars/VariantAvatars.tsx.preview        |     6 -
 .../material/components/avatars/avatars.md    |    26 +-
 .../BackgroundLetterAvatars.tsx               |     2 +
 .../avatars/demos/background-letter/index.ts  |     5 +
 .../{ => demos/badge}/BadgeAvatars.tsx        |     2 +
 .../components/avatars/demos/badge/index.ts   |     5 +
 .../custom-surplus}/CustomSurplusAvatars.tsx  |     2 +
 .../avatars/demos/custom-surplus/index.ts     |     5 +
 .../{ => demos/fallback}/FallbackAvatars.tsx  |     2 +
 .../avatars/demos/fallback/index.ts           |     5 +
 .../{ => demos/group}/GroupAvatars.tsx        |     2 +
 .../components/avatars/demos/group/index.ts   |     5 +
 .../avatars/{ => demos/icon}/IconAvatars.tsx  |     2 +
 .../components/avatars/demos/icon/index.ts    |     5 +
 .../{ => demos/image}/ImageAvatars.tsx        |     2 +
 .../components/avatars/demos/image/index.ts   |     5 +
 .../{ => demos/letter}/LetterAvatars.tsx      |     2 +
 .../components/avatars/demos/letter/index.ts  |     5 +
 .../avatars/{ => demos/size}/SizeAvatars.tsx  |     2 +
 .../components/avatars/demos/size/index.ts    |     5 +
 .../avatars/{ => demos/spacing}/Spacing.tsx   |     2 +
 .../components/avatars/demos/spacing/index.ts |     5 +
 .../{ => demos/total}/TotalAvatars.tsx        |     2 +
 .../components/avatars/demos/total/index.ts   |     5 +
 .../{ => demos/upload}/UploadAvatars.tsx      |     2 +
 .../components/avatars/demos/upload/index.ts  |     5 +
 .../{ => demos/variant}/VariantAvatars.tsx    |     2 +
 .../components/avatars/demos/variant/index.ts |     5 +
 .../components/backdrop/SimpleBackdrop.js     |    27 -
 .../backdrop/SimpleBackdrop.tsx.preview       |     8 -
 .../material/components/backdrop/backdrop.md  |     2 +-
 .../{ => demos/simple}/SimpleBackdrop.tsx     |     2 +
 .../components/backdrop/demos/simple/index.ts |     5 +
 .../components/badges/AccessibleBadges.js     |    23 -
 .../badges/AccessibleBadges.tsx.preview       |     5 -
 .../material/components/badges/BadgeMax.js    |    19 -
 .../components/badges/BadgeMax.tsx.preview    |     9 -
 .../components/badges/BadgeOverlap.js         |    29 -
 .../badges/BadgeOverlap.tsx.preview           |    12 -
 .../components/badges/BadgeVisibility.js      |    69 -
 .../material/components/badges/ColorBadge.js  |    16 -
 .../components/badges/ColorBadge.tsx.preview  |     6 -
 .../components/badges/CustomizedBadges.js     |    23 -
 .../badges/CustomizedBadges.tsx.preview       |     5 -
 .../material/components/badges/DotBadge.js    |    13 -
 .../components/badges/DotBadge.tsx.preview    |     3 -
 .../components/badges/ShowZeroBadge.js        |    16 -
 .../badges/ShowZeroBadge.tsx.preview          |     6 -
 .../material/components/badges/SimpleBadge.js |    10 -
 .../components/badges/SimpleBadge.tsx.preview |     3 -
 .../data/material/components/badges/badges.md |    20 +-
 .../accessible}/AccessibleBadges.tsx          |     2 +
 .../badges/demos/accessible/index.ts          |     5 +
 .../{ => demos/alignment}/BadgeAlignment.js   |     0
 .../badges/demos/alignment/index.ts           |     5 +
 .../badges/{ => demos/color}/ColorBadge.tsx   |     2 +
 .../components/badges/demos/color/index.ts    |     5 +
 .../customized}/CustomizedBadges.tsx          |     2 +
 .../badges/demos/customized/index.ts          |     5 +
 .../badges/{ => demos/dot}/DotBadge.tsx       |     2 +
 .../components/badges/demos/dot/index.ts      |     5 +
 .../badges/{ => demos/max}/BadgeMax.tsx       |     2 +
 .../components/badges/demos/max/index.ts      |     5 +
 .../{ => demos/overlap}/BadgeOverlap.tsx      |     2 +
 .../components/badges/demos/overlap/index.ts  |     5 +
 .../{ => demos/show-zero}/ShowZeroBadge.tsx   |     2 +
 .../badges/demos/show-zero/index.ts           |     5 +
 .../badges/{ => demos/simple}/SimpleBadge.tsx |     2 +
 .../components/badges/demos/simple/index.ts   |     5 +
 .../visibility}/BadgeVisibility.tsx           |     2 +
 .../badges/demos/visibility/index.ts          |     5 +
 .../FixedBottomNavigation.js                  |   104 -
 .../LabelBottomNavigation.js                  |    36 -
 .../SimpleBottomNavigation.js                 |    27 -
 .../SimpleBottomNavigation.tsx.preview        |    11 -
 .../bottom-navigation/bottom-navigation.md    |     6 +-
 .../fixed}/FixedBottomNavigation.tsx          |     2 +
 .../bottom-navigation/demos/fixed/index.ts    |     5 +
 .../label}/LabelBottomNavigation.tsx          |     2 +
 .../bottom-navigation/demos/label/index.ts    |     5 +
 .../simple}/SimpleBottomNavigation.tsx        |     2 +
 .../bottom-navigation/demos/simple/index.ts   |     5 +
 docs/data/material/components/box/BoxBasic.js |     9 -
 .../components/box/BoxBasic.tsx.preview       |     2 -
 docs/data/material/components/box/BoxSx.js    |    29 -
 docs/data/material/components/box/box.md      |     4 +-
 .../box/{ => demos/basic}/BoxBasic.tsx        |     2 +
 .../components/box/demos/basic/index.ts       |     5 +
 .../components/box/{ => demos/sx}/BoxSx.tsx   |     2 +
 .../material/components/box/demos/sx/index.ts |     5 +
 .../breadcrumbs/ActiveLastBreadcrumb.js       |    37 -
 .../breadcrumbs/BasicBreadcrumbs.js           |    29 -
 .../breadcrumbs/BasicBreadcrumbs.tsx.preview  |    13 -
 .../breadcrumbs/CollapsedBreadcrumbs.js       |    31 -
 .../CollapsedBreadcrumbs.tsx.preview          |    15 -
 .../breadcrumbs/CondensedWithMenu.js          |    51 -
 .../components/breadcrumbs/CustomSeparator.js |    48 -
 .../breadcrumbs/CustomSeparator.tsx.preview   |    12 -
 .../breadcrumbs/CustomizedBreadcrumbs.js      |    57 -
 .../CustomizedBreadcrumbs.tsx.preview         |    14 -
 .../components/breadcrumbs/IconBreadcrumbs.js |    45 -
 .../breadcrumbs/RouterBreadcrumbs.js          |   117 -
 .../components/breadcrumbs/breadcrumbs.md     |    16 +-
 .../active-last}/ActiveLastBreadcrumb.tsx     |     2 +
 .../breadcrumbs/demos/active-last/index.ts    |     5 +
 .../{ => demos/basic}/BasicBreadcrumbs.tsx    |     2 +
 .../breadcrumbs/demos/basic/index.ts          |     5 +
 .../collapsed}/CollapsedBreadcrumbs.tsx       |     2 +
 .../breadcrumbs/demos/collapsed/index.ts      |     5 +
 .../CondensedWithMenu.tsx                     |     2 +
 .../demos/condensed-with-menu/index.ts        |     5 +
 .../custom-separator}/CustomSeparator.tsx     |     2 +
 .../demos/custom-separator/index.ts           |     5 +
 .../customized}/CustomizedBreadcrumbs.tsx     |     2 +
 .../breadcrumbs/demos/customized/index.ts     |     5 +
 .../{ => demos/icon}/IconBreadcrumbs.tsx      |     2 +
 .../breadcrumbs/demos/icon/index.ts           |     5 +
 .../{ => demos/router}/RouterBreadcrumbs.tsx  |     2 +
 .../breadcrumbs/demos/router/index.ts         |     5 +
 .../button-group/BasicButtonGroup.js          |    12 -
 .../button-group/BasicButtonGroup.tsx.preview |     5 -
 .../button-group/DisableElevation.js          |    15 -
 .../button-group/DisableElevation.tsx.preview |     8 -
 .../button-group/GroupOrientation.js          |    40 -
 .../button-group/GroupSizesColors.js          |    34 -
 .../button-group/GroupSizesColors.tsx.preview |     9 -
 .../button-group/LoadingButtonGroup.js        |    15 -
 .../LoadingButtonGroup.tsx.preview            |     7 -
 .../components/button-group/SplitButton.js    |    96 -
 .../button-group/VariantButtonGroup.js        |    29 -
 .../VariantButtonGroup.tsx.preview            |    10 -
 .../components/button-group/button-group.md   |    14 +-
 .../{ => demos/basic}/BasicButtonGroup.tsx    |     2 +
 .../button-group/demos/basic/index.ts         |     5 +
 .../disable-elevation}/DisableElevation.tsx   |     2 +
 .../demos/disable-elevation/index.ts          |     5 +
 .../group-orientation}/GroupOrientation.tsx   |     2 +
 .../demos/group-orientation/index.ts          |     5 +
 .../group-sizes-colors}/GroupSizesColors.tsx  |     2 +
 .../demos/group-sizes-colors/index.ts         |     5 +
 .../loading}/LoadingButtonGroup.tsx           |     2 +
 .../button-group/demos/loading/index.ts       |     5 +
 .../{ => demos/split-button}/SplitButton.tsx  |     2 +
 .../button-group/demos/split-button/index.ts  |     5 +
 .../variant}/VariantButtonGroup.tsx           |     2 +
 .../button-group/demos/variant/index.ts       |     5 +
 .../components/buttons/ButtonBaseDemo.js      |   125 -
 .../components/buttons/ButtonSizes.js         |    36 -
 .../components/buttons/ColorButtons.js        |    16 -
 .../buttons/ColorButtons.tsx.preview          |     7 -
 .../components/buttons/ContainedButtons.js    |    16 -
 .../buttons/ContainedButtons.tsx.preview      |     7 -
 .../components/buttons/CustomizedButtons.js   |    59 -
 .../buttons/CustomizedButtons.tsx.preview     |     4 -
 .../components/buttons/DisableElevation.js    |     9 -
 .../buttons/DisableElevation.tsx.preview      |     3 -
 .../components/buttons/IconButtonColors.js    |    16 -
 .../buttons/IconButtonColors.tsx.preview      |     6 -
 .../components/buttons/IconButtonSizes.js     |    22 -
 .../buttons/IconButtonSizes.tsx.preview       |    12 -
 .../components/buttons/IconButtonWithBadge.js |    20 -
 .../buttons/IconButtonWithBadge.tsx.preview   |     4 -
 .../components/buttons/IconButtons.js         |    24 -
 .../buttons/IconButtons.tsx.preview           |    12 -
 .../components/buttons/IconLabelButtons.js    |    17 -
 .../buttons/IconLabelButtons.tsx.preview      |     6 -
 .../components/buttons/InputFileUpload.js     |    34 -
 .../buttons/InputFileUpload.tsx.preview       |    14 -
 .../components/buttons/LoadingButtons.js      |    60 -
 .../buttons/LoadingButtonsTransition.js       |   104 -
 .../components/buttons/LoadingIconButton.js   |    21 -
 .../buttons/LoadingIconButton.tsx.preview     |     5 -
 .../components/buttons/OutlinedButtons.js     |    16 -
 .../buttons/OutlinedButtons.tsx.preview       |     7 -
 .../components/buttons/TextButtons.js         |    12 -
 .../buttons/TextButtons.tsx.preview           |     3 -
 .../material/components/buttons/buttons.md    |    34 +-
 .../{ => demos/base-demo}/ButtonBaseDemo.tsx  |     2 +
 .../buttons/demos/base-demo/index.ts          |     5 +
 .../components/buttons/demos/basic/client.ts  |     2 +-
 .../components/buttons/demos/basic/index.ts   |     2 +-
 .../{ => demos/color}/ColorButtons.tsx        |     2 +
 .../components/buttons/demos/color/index.ts   |     5 +
 .../contained}/ContainedButtons.tsx           |     2 +
 .../buttons/demos/contained/index.ts          |     5 +
 .../customized}/CustomizedButtons.tsx         |     2 +
 .../buttons/demos/customized/index.ts         |     5 +
 .../disable-elevation}/DisableElevation.tsx   |     2 +
 .../buttons/demos/disable-elevation/index.ts  |     5 +
 .../icon-colors}/IconButtonColors.tsx         |     2 +
 .../buttons/demos/icon-colors/index.ts        |     5 +
 .../icon-label}/IconLabelButtons.tsx          |     2 +
 .../buttons/demos/icon-label/index.ts         |     5 +
 .../icon-sizes}/IconButtonSizes.tsx           |     2 +
 .../buttons/demos/icon-sizes/index.ts         |     5 +
 .../icon-with-badge}/IconButtonWithBadge.tsx  |     2 +
 .../buttons/demos/icon-with-badge/index.ts    |     5 +
 .../buttons/{ => demos/icon}/IconButtons.tsx  |     2 +
 .../components/buttons/demos/icon/index.ts    |     5 +
 .../input-file-upload}/InputFileUpload.tsx    |     2 +
 .../buttons/demos/input-file-upload/index.ts  |     5 +
 .../loading-icon}/LoadingIconButton.tsx       |     2 +
 .../buttons/demos/loading-icon/index.ts       |     5 +
 .../LoadingButtonsTransition.tsx              |     2 +
 .../buttons/demos/loading-transition/index.ts |     5 +
 .../{ => demos/loading}/LoadingButtons.tsx    |     2 +
 .../components/buttons/demos/loading/index.ts |     5 +
 .../{ => demos/outlined}/OutlinedButtons.tsx  |     2 +
 .../buttons/demos/outlined/index.ts           |     5 +
 .../buttons/{ => demos/sizes}/ButtonSizes.tsx |     2 +
 .../components/buttons/demos/sizes/index.ts   |     5 +
 .../buttons/{ => demos/text}/TextButtons.tsx  |     2 +
 .../components/buttons/demos/text/index.ts    |     5 +
 .../components/cards/ActionAreaCard.js        |    29 -
 .../material/components/cards/BasicCard.js    |    39 -
 .../material/components/cards/ImgMediaCard.js |    32 -
 .../material/components/cards/MediaCard.js    |    31 -
 .../components/cards/MediaControlCard.js      |    50 -
 .../components/cards/MultiActionAreaCard.js   |    36 -
 .../material/components/cards/OutlinedCard.js |    46 -
 .../components/cards/OutlinedCard.tsx.preview |     1 -
 .../components/cards/RecipeReviewCard.js      |   125 -
 .../components/cards/SelectActionCard.js      |    67 -
 docs/data/material/components/cards/cards.md  |    18 +-
 .../action-area}/ActionAreaCard.tsx           |     2 +
 .../cards/demos/action-area/index.ts          |     5 +
 .../cards/{ => demos/basic}/BasicCard.tsx     |     2 +
 .../components/cards/demos/basic/index.ts     |     5 +
 .../{ => demos/img-media}/ImgMediaCard.tsx    |     2 +
 .../components/cards/demos/img-media/index.ts |     5 +
 .../media-control}/MediaControlCard.tsx       |     2 +
 .../cards/demos/media-control/index.ts        |     5 +
 .../cards/{ => demos/media}/MediaCard.tsx     |     2 +
 .../components/cards/demos/media/index.ts     |     5 +
 .../MultiActionAreaCard.tsx                   |     2 +
 .../cards/demos/multi-action-area/index.ts    |     5 +
 .../{ => demos/outlined}/OutlinedCard.tsx     |     2 +
 .../components/cards/demos/outlined/index.ts  |     5 +
 .../recipe-review}/RecipeReviewCard.tsx       |     2 +
 .../cards/demos/recipe-review/index.ts        |     5 +
 .../select-action}/SelectActionCard.tsx       |     0
 .../cards/demos/select-action/index.ts        |     5 +
 .../components/checkboxes/CheckboxLabels.js   |    13 -
 .../checkboxes/CheckboxLabels.tsx.preview     |     5 -
 .../components/checkboxes/Checkboxes.js       |    14 -
 .../checkboxes/Checkboxes.tsx.preview         |     4 -
 .../components/checkboxes/CheckboxesGroup.js  |    85 -
 .../components/checkboxes/ColorCheckboxes.js  |    25 -
 .../checkboxes/ColorCheckboxes.tsx.preview    |    14 -
 .../checkboxes/ControlledCheckbox.js          |    20 -
 .../checkboxes/ControlledCheckbox.tsx.preview |     7 -
 .../checkboxes/CustomizedCheckbox.js          |    76 -
 .../checkboxes/CustomizedCheckbox.tsx.preview |     3 -
 .../checkboxes/FormControlLabelPosition.js    |    27 -
 .../components/checkboxes/IconCheckboxes.js   |    20 -
 .../checkboxes/IconCheckboxes.tsx.preview     |     6 -
 .../checkboxes/IndeterminateCheckbox.js       |    49 -
 .../IndeterminateCheckbox.tsx.preview         |    11 -
 .../components/checkboxes/SizeCheckboxes.js   |    17 -
 .../checkboxes/SizeCheckboxes.tsx.preview     |     7 -
 .../components/checkboxes/checkboxes.md       |    20 +-
 .../{ => demos/checkboxes}/Checkboxes.tsx     |     2 +
 .../checkboxes/demos/checkboxes/index.ts      |     5 +
 .../{ => demos/color}/ColorCheckboxes.tsx     |     2 +
 .../checkboxes/demos/color/index.ts           |     5 +
 .../controlled}/ControlledCheckbox.tsx        |     2 +
 .../checkboxes/demos/controlled/index.ts      |     5 +
 .../customized}/CustomizedCheckbox.tsx        |     2 +
 .../checkboxes/demos/customized/index.ts      |     5 +
 .../FormControlLabelPosition.tsx              |     2 +
 .../form-control-label-position/index.ts      |     5 +
 .../{ => demos/group}/CheckboxesGroup.tsx     |     2 +
 .../checkboxes/demos/group/index.ts           |     5 +
 .../{ => demos/icon}/IconCheckboxes.tsx       |     2 +
 .../components/checkboxes/demos/icon/index.ts |     5 +
 .../indeterminate}/IndeterminateCheckbox.tsx  |     2 +
 .../checkboxes/demos/indeterminate/index.ts   |     5 +
 .../{ => demos/labels}/CheckboxLabels.tsx     |     2 +
 .../checkboxes/demos/labels/index.ts          |     5 +
 .../{ => demos/size}/SizeCheckboxes.tsx       |     2 +
 .../components/checkboxes/demos/size/index.ts |     5 +
 .../material/components/chips/AvatarChips.js  |    16 -
 .../components/chips/AvatarChips.tsx.preview  |     6 -
 .../material/components/chips/BasicChips.js   |    11 -
 .../components/chips/BasicChips.tsx.preview   |     2 -
 .../material/components/chips/ChipsArray.js   |    55 -
 .../chips/ClickableAndDeletableChips.js       |    28 -
 .../ClickableAndDeletableChips.tsx.preview    |    11 -
 .../components/chips/ClickableChips.js        |    15 -
 .../chips/ClickableChips.tsx.preview          |     2 -
 .../components/chips/ClickableLinkChips.js    |    17 -
 .../chips/ClickableLinkChips.tsx.preview      |     8 -
 .../material/components/chips/ColorChips.js   |    17 -
 .../components/chips/ColorChips.tsx.preview   |     8 -
 .../components/chips/CustomDeleteIconChips.js |    32 -
 .../chips/CustomDeleteIconChips.tsx.preview   |    13 -
 .../components/chips/DeletableChips.js        |    15 -
 .../chips/DeletableChips.tsx.preview          |     2 -
 .../material/components/chips/IconChips.js    |    12 -
 .../components/chips/IconChips.tsx.preview    |     2 -
 .../components/chips/MultilineChips.js        |    19 -
 .../chips/MultilineChips.tsx.preview          |    10 -
 .../material/components/chips/SizesChips.js   |    11 -
 .../components/chips/SizesChips.tsx.preview   |     2 -
 docs/data/material/components/chips/chips.md  |    26 +-
 .../chips/{ => demos/array}/ChipsArray.tsx    |     2 +
 .../components/chips/demos/array/index.ts     |     5 +
 .../chips/{ => demos/avatar}/AvatarChips.tsx  |     2 +
 .../components/chips/demos/avatar/index.ts    |     5 +
 .../chips/{ => demos/basic}/BasicChips.tsx    |     2 +
 .../components/chips/demos/basic/index.ts     |     5 +
 .../ClickableAndDeletableChips.tsx            |     2 +
 .../demos/clickable-and-deletable/index.ts    |     5 +
 .../clickable-link}/ClickableLinkChips.tsx    |     2 +
 .../chips/demos/clickable-link/index.ts       |     5 +
 .../{ => demos/clickable}/ClickableChips.tsx  |     2 +
 .../components/chips/demos/clickable/index.ts |     5 +
 .../chips/{ => demos/color}/ColorChips.tsx    |     2 +
 .../components/chips/demos/color/index.ts     |     5 +
 .../CustomDeleteIconChips.tsx                 |     2 +
 .../chips/demos/custom-delete-icon/index.ts   |     5 +
 .../{ => demos/deletable}/DeletableChips.tsx  |     2 +
 .../components/chips/demos/deletable/index.ts |     5 +
 .../chips/{ => demos/icon}/IconChips.tsx      |     2 +
 .../components/chips/demos/icon/index.ts      |     5 +
 .../{ => demos/multiline}/MultilineChips.tsx  |     2 +
 .../components/chips/demos/multiline/index.ts |     5 +
 .../{ => demos/playground}/ChipsPlayground.js |     0
 .../chips/demos/playground/index.ts           |     5 +
 .../chips/{ => demos/sizes}/SizesChips.tsx    |     2 +
 .../components/chips/demos/sizes/index.ts     |     5 +
 .../click-away-listener/ClickAway.js          |    41 -
 .../click-away-listener/ClickAway.tsx.preview |    12 -
 .../click-away-listener/LeadingClickAway.js   |    45 -
 .../LeadingClickAway.tsx.preview              |    16 -
 .../click-away-listener/PortalClickAway.js    |    44 -
 .../PortalClickAway.tsx.preview               |    14 -
 .../click-away-listener.md                    |     6 +-
 .../{ => demos/click-away}/ClickAway.tsx      |     2 +
 .../demos/click-away/index.ts                 |     5 +
 .../leading-click-away}/LeadingClickAway.tsx  |     2 +
 .../demos/leading-click-away/index.ts         |     5 +
 .../portal-click-away}/PortalClickAway.tsx    |     2 +
 .../demos/portal-click-away/index.ts          |     5 +
 .../components/container/FixedContainer.js    |    15 -
 .../container/FixedContainer.tsx.preview      |     6 -
 .../components/container/SimpleContainer.js   |    15 -
 .../container/SimpleContainer.tsx.preview     |     6 -
 .../components/container/container.md         |     4 +-
 .../{ => demos/fixed}/FixedContainer.tsx      |     2 +
 .../components/container/demos/fixed/index.ts |     5 +
 .../{ => demos/simple}/SimpleContainer.tsx    |     2 +
 .../container/demos/simple/index.ts           |     5 +
 .../components/dialogs/AlertDialog.js         |    50 -
 .../components/dialogs/AlertDialogSlide.js    |    56 -
 .../components/dialogs/ConfirmationDialog.js  |   153 -
 .../components/dialogs/CookiesBanner.js       |   106 -
 .../components/dialogs/CustomizedDialogs.js   |    80 -
 .../components/dialogs/DraggableDialog.js     |    64 -
 .../material/components/dialogs/FormDialog.js |    65 -
 .../components/dialogs/FullScreenDialog.js    |    76 -
 .../components/dialogs/MaxWidthDialog.js      |   101 -
 .../components/dialogs/ResponsiveDialog.js    |    55 -
 .../components/dialogs/ScrollDialog.js        |    67 -
 .../components/dialogs/SimpleDialogDemo.js    |    99 -
 .../dialogs/SimpleDialogDemo.tsx.preview      |    12 -
 .../alert-slide}/AlertDialogSlide.tsx         |     2 +
 .../dialogs/demos/alert-slide/index.ts        |     5 +
 .../dialogs/{ => demos/alert}/AlertDialog.tsx |     2 +
 .../components/dialogs/demos/alert/index.ts   |     5 +
 .../confirmation}/ConfirmationDialog.tsx      |     2 +
 .../dialogs/demos/confirmation/index.ts       |     5 +
 .../cookies-banner}/CookiesBanner.tsx         |     2 +
 .../dialogs/demos/cookies-banner/index.ts     |     5 +
 .../customized}/CustomizedDialogs.tsx         |     2 +
 .../dialogs/demos/customized/index.ts         |     5 +
 .../{ => demos/draggable}/DraggableDialog.tsx |     2 +
 .../dialogs/demos/draggable/index.ts          |     5 +
 .../dialogs/{ => demos/form}/FormDialog.tsx   |     2 +
 .../components/dialogs/demos/form/index.ts    |     5 +
 .../full-screen}/FullScreenDialog.tsx         |     2 +
 .../dialogs/demos/full-screen/index.ts        |     5 +
 .../{ => demos/max-width}/MaxWidthDialog.tsx  |     2 +
 .../dialogs/demos/max-width/index.ts          |     5 +
 .../responsive}/ResponsiveDialog.tsx          |     2 +
 .../dialogs/demos/responsive/index.ts         |     5 +
 .../{ => demos/scroll}/ScrollDialog.tsx       |     2 +
 .../components/dialogs/demos/scroll/index.ts  |     5 +
 .../simple-demo}/SimpleDialogDemo.tsx         |     2 +
 .../dialogs/demos/simple-demo/index.ts        |     5 +
 .../material/components/dialogs/dialogs.md    |    24 +-
 .../components/dividers/DividerText.js        |    34 -
 .../dividers/DividerText.tsx.preview          |    13 -
 .../components/dividers/DividerVariants.js    |    36 -
 .../components/dividers/FlexDivider.js        |    27 -
 .../dividers/FlexDivider.tsx.preview          |     3 -
 .../components/dividers/IntroDivider.js       |    41 -
 .../components/dividers/ListDividers.js       |    36 -
 .../dividers/VerticalDividerMiddle.js         |    30 -
 .../components/dividers/VerticalDividers.js   |    34 -
 .../dividers/VerticalDividers.tsx.preview     |     5 -
 .../dividers/{ => demos/flex}/FlexDivider.tsx |     2 +
 .../components/dividers/demos/flex/index.ts   |     5 +
 .../{ => demos/intro}/IntroDivider.tsx        |     2 +
 .../components/dividers/demos/intro/index.ts  |     5 +
 .../{ => demos/list}/ListDividers.tsx         |     2 +
 .../components/dividers/demos/list/index.ts   |     5 +
 .../dividers/{ => demos/text}/DividerText.tsx |     2 +
 .../components/dividers/demos/text/index.ts   |     5 +
 .../{ => demos/variants}/DividerVariants.tsx  |     2 +
 .../dividers/demos/variants/index.ts          |     5 +
 .../VerticalDividerMiddle.tsx                 |     2 +
 .../dividers/demos/vertical-middle/index.ts   |     5 +
 .../{ => demos/vertical}/VerticalDividers.tsx |     2 +
 .../dividers/demos/vertical/index.ts          |     5 +
 .../material/components/dividers/dividers.md  |    14 +-
 .../drawers/AnchorTemporaryDrawer.js          |    81 -
 .../drawers/AnchorTemporaryDrawer.tsx.preview |    12 -
 .../components/drawers/ClippedDrawer.js       |    98 -
 .../material/components/drawers/MiniDrawer.js |   281 -
 .../components/drawers/PermanentDrawerLeft.js |   107 -
 .../drawers/PermanentDrawerRight.js           |   107 -
 .../drawers/PersistentDrawerLeft.js           |   192 -
 .../drawers/PersistentDrawerRight.js          |   193 -
 .../components/drawers/ResponsiveDrawer.js    |   182 -
 .../components/drawers/SwipeableEdgeDrawer.js |   108 -
 .../drawers/SwipeableTemporaryDrawer.js       |    86 -
 .../SwipeableTemporaryDrawer.tsx.preview      |    13 -
 .../components/drawers/TemporaryDrawer.js     |    59 -
 .../drawers/TemporaryDrawer.tsx.preview       |     4 -
 .../AnchorTemporaryDrawer.tsx                 |     2 +
 .../drawers/demos/anchor-temporary/index.ts   |     5 +
 .../{ => demos/clipped}/ClippedDrawer.tsx     |     2 +
 .../components/drawers/demos/clipped/index.ts |     5 +
 .../drawers/{ => demos/mini}/MiniDrawer.tsx   |     2 +
 .../components/drawers/demos/mini/index.ts    |     5 +
 .../permanent-left}/PermanentDrawerLeft.tsx   |     2 +
 .../drawers/demos/permanent-left/index.ts     |     5 +
 .../permanent-right}/PermanentDrawerRight.tsx |     2 +
 .../drawers/demos/permanent-right/index.ts    |     5 +
 .../persistent-left}/PersistentDrawerLeft.tsx |     2 +
 .../drawers/demos/persistent-left/index.ts    |     5 +
 .../PersistentDrawerRight.tsx                 |     2 +
 .../drawers/demos/persistent-right/index.ts   |     5 +
 .../responsive}/ResponsiveDrawer.tsx          |     2 +
 .../drawers/demos/responsive/index.ts         |     5 +
 .../swipeable-edge}/SwipeableEdgeDrawer.tsx   |     2 +
 .../drawers/demos/swipeable-edge/index.ts     |     5 +
 .../SwipeableTemporaryDrawer.tsx              |     2 +
 .../demos/swipeable-temporary/index.ts        |     5 +
 .../{ => demos/temporary}/TemporaryDrawer.tsx |     2 +
 .../drawers/demos/temporary/index.ts          |     5 +
 .../material/components/drawers/drawers.md    |    22 +-
 .../FloatingActionButtonExtendedSize.js       |    22 -
 ...oatingActionButtonExtendedSize.tsx.preview |    12 -
 .../FloatingActionButtonSize.js               |    19 -
 .../FloatingActionButtonSize.tsx.preview      |     9 -
 .../FloatingActionButtonZoom.js               |   143 -
 .../FloatingActionButtons.js                  |    26 -
 .../FloatingActionButtons.tsx.preview         |    13 -
 .../FloatingActionButtonExtendedSize.tsx      |     2 +
 .../demos/extended-size/index.ts              |     5 +
 .../FloatingActionButtons.tsx                 |     2 +
 .../demos/floating-action-buttons/index.ts    |     5 +
 .../size}/FloatingActionButtonSize.tsx        |     2 +
 .../demos/size/index.ts                       |     5 +
 .../zoom}/FloatingActionButtonZoom.tsx        |     2 +
 .../demos/zoom/index.ts                       |     5 +
 .../floating-action-button.md                 |     8 +-
 .../data/material/components/grid/AutoGrid.js |    33 -
 .../components/grid/AutoGrid.tsx.preview      |    11 -
 .../material/components/grid/BasicGrid.js     |    36 -
 .../components/grid/BasicGrid.tsx.preview     |    14 -
 .../components/grid/CenteredElementGrid.js    |    29 -
 .../components/grid/ColumnLayoutInsideGrid.js |    35 -
 .../grid/ColumnLayoutInsideGrid.tsx.preview   |    12 -
 .../material/components/grid/ColumnsGrid.js   |    30 -
 .../components/grid/ColumnsGrid.tsx.preview   |     8 -
 .../components/grid/FullBorderedGrid.js       |    36 -
 .../material/components/grid/FullWidthGrid.js |    36 -
 .../components/grid/FullWidthGrid.tsx.preview |    14 -
 .../components/grid/HalfBorderedGrid.js       |    38 -
 .../components/grid/InteractiveGrid.js        |   174 -
 .../material/components/grid/NestedGrid.js    |   114 -
 .../components/grid/NestedGridColumns.js      |    46 -
 .../material/components/grid/OffsetGrid.js    |    33 -
 .../components/grid/OffsetGrid.tsx.preview    |    14 -
 .../components/grid/ResponsiveGrid.js         |    29 -
 .../grid/ResponsiveGrid.tsx.preview           |     7 -
 .../components/grid/RowAndColumnSpacing.js    |    36 -
 .../grid/RowAndColumnSpacing.tsx.preview      |    14 -
 .../material/components/grid/SpacingGrid.js   |    74 -
 .../components/grid/VariableWidthGrid.js      |    33 -
 .../grid/VariableWidthGrid.tsx.preview        |    11 -
 .../grid/{ => demos/auto}/AutoGrid.tsx        |     2 +
 .../components/grid/demos/auto/index.ts       |     5 +
 .../grid/{ => demos/basic}/BasicGrid.tsx      |     2 +
 .../components/grid/demos/basic/index.ts      |     5 +
 .../centered-element}/CenteredElementGrid.tsx |     2 +
 .../grid/demos/centered-element/index.ts      |     5 +
 .../ColumnLayoutInsideGrid.tsx                |     2 +
 .../grid/demos/column-layout-inside/index.ts  |     5 +
 .../grid/{ => demos/columns}/ColumnsGrid.tsx  |     2 +
 .../components/grid/demos/columns/index.ts    |     5 +
 .../full-bordered}/FullBorderedGrid.tsx       |     2 +
 .../grid/demos/full-bordered/index.ts         |     5 +
 .../{ => demos/full-width}/FullWidthGrid.tsx  |     2 +
 .../components/grid/demos/full-width/index.ts |     5 +
 .../half-bordered}/HalfBorderedGrid.tsx       |     2 +
 .../grid/demos/half-bordered/index.ts         |     5 +
 .../interactive}/InteractiveGrid.tsx          |     2 +
 .../grid/demos/interactive/index.ts           |     5 +
 .../nested-columns}/NestedGridColumns.tsx     |     2 +
 .../grid/demos/nested-columns/index.ts        |     5 +
 .../grid/{ => demos/nested}/NestedGrid.tsx    |     2 +
 .../components/grid/demos/nested/index.ts     |     5 +
 .../grid/{ => demos/offset}/OffsetGrid.tsx    |     2 +
 .../components/grid/demos/offset/index.ts     |     5 +
 .../{ => demos/responsive}/ResponsiveGrid.tsx |     2 +
 .../components/grid/demos/responsive/index.ts |     5 +
 .../RowAndColumnSpacing.tsx                   |     2 +
 .../demos/row-and-column-spacing/index.ts     |     5 +
 .../grid/{ => demos/spacing}/SpacingGrid.tsx  |     2 +
 .../components/grid/demos/spacing/index.ts    |     5 +
 .../variable-width}/VariableWidthGrid.tsx     |     2 +
 .../grid/demos/variable-width/index.ts        |     5 +
 docs/data/material/components/grid/grid.md    |    32 +-
 .../components/icons/CreateSvgIcon.js         |    26 -
 .../icons/CreateSvgIcon.tsx.preview           |     4 -
 .../components/icons/FontAwesomeIcon.js       |    33 -
 .../icons/FontAwesomeIcon.tsx.preview         |     9 -
 .../components/icons/FontAwesomeIconSize.js   |    45 -
 .../icons/FontAwesomeIconSize.tsx.preview     |     4 -
 docs/data/material/components/icons/Icons.js  |    15 -
 .../components/icons/Icons.tsx.preview        |     5 -
 .../components/icons/SvgIconChildren.js       |    16 -
 .../icons/SvgIconChildren.tsx.preview         |    10 -
 .../components/icons/SvgIconsColor.js         |    25 -
 .../icons/SvgIconsColor.tsx.preview           |     7 -
 .../material/components/icons/SvgIconsSize.js |    21 -
 .../components/icons/SvgIconsSize.tsx.preview |     4 -
 .../components/icons/SvgMaterialIcons.js      |    68 -
 .../material/components/icons/TwoToneIcons.js |    20 -
 .../components/icons/TwoToneIcons.tsx.preview |     6 -
 .../{ => demos/create-svg}/CreateSvgIcon.tsx  |     2 +
 .../icons/demos/create-svg/index.ts           |     5 +
 .../FontAwesomeIconSize.tsx                   |     2 +
 .../icons/demos/font-awesome-size/index.ts    |     5 +
 .../font-awesome}/FontAwesomeIcon.tsx         |     2 +
 .../icons/demos/font-awesome/index.ts         |     5 +
 .../icons/{ => demos/icons}/Icons.tsx         |     2 +
 .../components/icons/demos/icons/index.ts     |     5 +
 .../svg-children}/SvgIconChildren.tsx         |     2 +
 .../icons/demos/svg-children/index.ts         |     5 +
 .../{ => demos/svg-color}/SvgIconsColor.tsx   |     2 +
 .../components/icons/demos/svg-color/index.ts |     5 +
 .../svg-material}/SvgMaterialIcons.tsx        |     2 +
 .../icons/demos/svg-material/index.ts         |     5 +
 .../{ => demos/svg-size}/SvgIconsSize.tsx     |     2 +
 .../components/icons/demos/svg-size/index.ts  |     5 +
 .../{ => demos/two-tone}/TwoToneIcons.tsx     |     2 +
 .../components/icons/demos/two-tone/index.ts  |     5 +
 docs/data/material/components/icons/icons.md  |    18 +-
 .../components/image-list/CustomImageList.js  |   127 -
 .../components/image-list/MasonryImageList.js |    73 -
 .../image-list/MasonryImageList.tsx.preview   |    12 -
 .../components/image-list/QuiltedImageList.js |    93 -
 .../image-list/QuiltedImageList.tsx.preview   |    16 -
 .../image-list/StandardImageList.js           |    70 -
 .../image-list/StandardImageList.tsx.preview  |    12 -
 .../image-list/TitlebarBelowImageList.js      |    88 -
 .../TitlebarBelowMasonryImageList.js          |    87 -
 .../TitlebarBelowMasonryImageList.tsx.preview |    13 -
 .../image-list/TitlebarImageList.js           |   112 -
 .../components/image-list/WovenImageList.js   |    70 -
 .../image-list/WovenImageList.tsx.preview     |    12 -
 .../{ => demos/custom}/CustomImageList.tsx    |     2 +
 .../image-list/demos/custom/index.ts          |     5 +
 .../{ => demos/masonry}/MasonryImageList.tsx  |     2 +
 .../image-list/demos/masonry/index.ts         |     5 +
 .../{ => demos/quilted}/QuiltedImageList.tsx  |     2 +
 .../image-list/demos/quilted/index.ts         |     5 +
 .../standard}/StandardImageList.tsx           |     2 +
 .../image-list/demos/standard/index.ts        |     5 +
 .../TitlebarBelowMasonryImageList.tsx         |     2 +
 .../demos/titlebar-below-masonry/index.ts     |     5 +
 .../TitlebarBelowImageList.tsx                |     2 +
 .../image-list/demos/titlebar-below/index.ts  |     5 +
 .../titlebar}/TitlebarImageList.tsx           |     2 +
 .../image-list/demos/titlebar/index.ts        |     5 +
 .../{ => demos/woven}/WovenImageList.tsx      |     2 +
 .../image-list/demos/woven/index.ts           |     5 +
 .../components/image-list/image-list.md       |    16 +-
 .../material/components/links/ButtonLink.js   |    15 -
 .../components/links/ButtonLink.tsx.preview   |     9 -
 docs/data/material/components/links/Links.js  |    27 -
 .../components/links/Links.tsx.preview        |     7 -
 .../components/links/UnderlineLink.js         |    32 -
 .../links/UnderlineLink.tsx.preview           |     9 -
 .../links/{ => demos/button}/ButtonLink.tsx   |     2 +
 .../components/links/demos/button/index.ts    |     5 +
 .../links/{ => demos/links}/Links.tsx         |     2 +
 .../components/links/demos/links/index.ts     |     5 +
 .../{ => demos/underline}/UnderlineLink.tsx   |     2 +
 .../components/links/demos/underline/index.ts |     5 +
 docs/data/material/components/links/links.md  |     6 +-
 .../components/lists/AlignItemsList.js        |    77 -
 .../material/components/lists/BasicList.js    |    51 -
 .../material/components/lists/CheckboxList.js |    59 -
 .../components/lists/CheckboxListSecondary.js |    57 -
 .../components/lists/CustomizedList.js        |   243 -
 .../material/components/lists/FolderList.js   |    39 -
 .../components/lists/GutterlessList.js        |    25 -
 .../lists/GutterlessList.tsx.preview          |    15 -
 .../material/components/lists/InsetList.js    |    29 -
 .../components/lists/InteractiveList.js       |   170 -
 .../material/components/lists/NestedList.js   |    64 -
 .../components/lists/PinnedSubheaderList.js   |    34 -
 .../components/lists/SelectedListItem.js      |    57 -
 .../components/lists/SwitchListSecondary.js   |    62 -
 .../components/lists/VirtualizedList.js       |    37 -
 .../lists/VirtualizedList.tsx.preview         |    11 -
 .../align-items}/AlignItemsList.tsx           |     2 +
 .../lists/demos/align-items/index.ts          |     5 +
 .../lists/{ => demos/basic}/BasicList.tsx     |     2 +
 .../components/lists/demos/basic/index.ts     |     5 +
 .../CheckboxListSecondary.tsx                 |     2 +
 .../lists/demos/checkbox-secondary/index.ts   |     5 +
 .../{ => demos/checkbox}/CheckboxList.tsx     |     2 +
 .../components/lists/demos/checkbox/index.ts  |     5 +
 .../{ => demos/customized}/CustomizedList.tsx |     2 +
 .../lists/demos/customized/index.ts           |     5 +
 .../lists/{ => demos/folder}/FolderList.tsx   |     2 +
 .../components/lists/demos/folder/index.ts    |     5 +
 .../{ => demos/gutterless}/GutterlessList.tsx |     2 +
 .../lists/demos/gutterless/index.ts           |     5 +
 .../lists/{ => demos/inset}/InsetList.tsx     |     2 +
 .../components/lists/demos/inset/index.ts     |     5 +
 .../interactive}/InteractiveList.tsx          |     2 +
 .../lists/demos/interactive/index.ts          |     5 +
 .../lists/{ => demos/nested}/NestedList.tsx   |     2 +
 .../components/lists/demos/nested/index.ts    |     5 +
 .../pinned-subheader}/PinnedSubheaderList.tsx |     2 +
 .../lists/demos/pinned-subheader/index.ts     |     5 +
 .../selected-item}/SelectedListItem.tsx       |     2 +
 .../lists/demos/selected-item/index.ts        |     5 +
 .../switch-secondary}/SwitchListSecondary.tsx |     2 +
 .../lists/demos/switch-secondary/index.ts     |     5 +
 .../virtualized}/VirtualizedList.tsx          |     2 +
 .../lists/demos/virtualized/index.ts          |     5 +
 docs/data/material/components/lists/lists.md  |    28 +-
 .../components/masonry/BasicMasonry.js        |    31 -
 .../masonry/BasicMasonry.tsx.preview          |     7 -
 .../components/masonry/FixedColumns.js        |    31 -
 .../masonry/FixedColumns.tsx.preview          |     7 -
 .../components/masonry/FixedSpacing.js        |    31 -
 .../masonry/FixedSpacing.tsx.preview          |     7 -
 .../components/masonry/ImageMasonry.js        |   114 -
 .../masonry/MasonryWithVariableHeightItems.js |    38 -
 ...MasonryWithVariableHeightItems.tsx.preview |    12 -
 .../components/masonry/ResponsiveColumns.js   |    31 -
 .../masonry/ResponsiveColumns.tsx.preview     |     7 -
 .../components/masonry/ResponsiveSpacing.js   |    31 -
 .../masonry/ResponsiveSpacing.tsx.preview     |     7 -
 .../material/components/masonry/SSRMasonry.js |    37 -
 .../components/masonry/SSRMasonry.tsx.preview |    13 -
 .../material/components/masonry/Sequential.js |    38 -
 .../components/masonry/Sequential.tsx.preview |    14 -
 .../{ => demos/basic}/BasicMasonry.tsx        |     2 +
 .../components/masonry/demos/basic/index.ts   |     5 +
 .../fixed-columns}/FixedColumns.tsx           |     2 +
 .../masonry/demos/fixed-columns/index.ts      |     5 +
 .../fixed-spacing}/FixedSpacing.tsx           |     2 +
 .../masonry/demos/fixed-spacing/index.ts      |     5 +
 .../{ => demos/image}/ImageMasonry.tsx        |     2 +
 .../components/masonry/demos/image/index.ts   |     5 +
 .../responsive-columns}/ResponsiveColumns.tsx |     2 +
 .../masonry/demos/responsive-columns/index.ts |     5 +
 .../responsive-spacing}/ResponsiveSpacing.tsx |     2 +
 .../masonry/demos/responsive-spacing/index.ts |     5 +
 .../{ => demos/sequential}/Sequential.tsx     |     2 +
 .../masonry/demos/sequential/index.ts         |     5 +
 .../{ => demos/ssr-masonry}/SSRMasonry.tsx    |     2 +
 .../masonry/demos/ssr-masonry/index.ts        |     5 +
 .../MasonryWithVariableHeightItems.tsx        |     2 +
 .../demos/with-variable-height-items/index.ts |     5 +
 .../material/components/masonry/masonry.md    |    18 +-
 .../{ => demos/search-icons}/SearchIcons.js   |     2 +-
 .../demos/search-icons/index.ts               |     5 +
 .../{ => demos/search-icons}/synonyms.js      |     0
 .../material-icons/material-icons.md          |     2 +-
 .../components/menubar/BasicMenubar.js        |    61 -
 .../menubar/CheckboxItemsMenubar.js           |    82 -
 .../components/menubar/GroupLabelMenubar.js   |   124 -
 .../components/menubar/IconItemsMenubar.js    |    50 -
 .../menubar/RadioGroupItemsMenubar.js         |    52 -
 .../menubar/ShortcutHintsMenubar.js           |    49 -
 .../components/menubar/components/Menubar.js  |   304 -
 .../menubar/{components => demos}/Menubar.tsx |     5 +-
 .../{ => demos/basic}/BasicMenubar.tsx        |     4 +-
 .../components/menubar/demos/basic/index.ts   |     5 +
 .../checkbox-items}/CheckboxItemsMenubar.tsx  |     4 +-
 .../menubar/demos/checkbox-items/index.ts     |     5 +
 .../group-label}/GroupLabelMenubar.tsx        |     4 +-
 .../menubar/demos/group-label/index.ts        |     5 +
 .../icon-items}/IconItemsMenubar.tsx          |     4 +-
 .../menubar/demos/icon-items/index.ts         |     5 +
 .../RadioGroupItemsMenubar.tsx                |     4 +-
 .../menubar/demos/radio-group-items/index.ts  |     5 +
 .../shortcut-hints}/ShortcutHintsMenubar.tsx  |     4 +-
 .../menubar/demos/shortcut-hints/index.ts     |     5 +
 .../material/components/menubar/menubar.md    |    12 +-
 .../material/components/menus/AccountMenu.js  |   107 -
 .../material/components/menus/BasicMenu.js    |    47 -
 .../material/components/menus/ContextMenu.js  |    68 -
 .../components/menus/CustomizedMenus.js       |   114 -
 .../material/components/menus/DenseMenu.js    |    42 -
 .../material/components/menus/FadeMenu.js     |    46 -
 .../material/components/menus/GroupedMenu.js  |    59 -
 .../material/components/menus/IconMenu.js     |    54 -
 .../material/components/menus/LongMenu.js     |    73 -
 .../components/menus/MenuListComposition.js   |   102 -
 .../components/menus/MenuPopupState.js        |    24 -
 .../menus/MenuPopupState.tsx.preview          |    14 -
 .../components/menus/PositionedMenu.js        |    48 -
 .../components/menus/SimpleListMenu.js        |    78 -
 .../components/menus/TypographyMenu.js        |    37 -
 .../menus/{ => demos/account}/AccountMenu.tsx |     2 +
 .../components/menus/demos/account/index.ts   |     5 +
 .../menus/{ => demos/basic}/BasicMenu.tsx     |     2 +
 .../components/menus/demos/basic/index.ts     |     5 +
 .../menus/{ => demos/context}/ContextMenu.tsx |     2 +
 .../components/menus/demos/context/index.ts   |     5 +
 .../customized}/CustomizedMenus.tsx           |     2 +
 .../menus/demos/customized/index.ts           |     5 +
 .../menus/{ => demos/dense}/DenseMenu.tsx     |     2 +
 .../components/menus/demos/dense/index.ts     |     5 +
 .../menus/{ => demos/fade}/FadeMenu.tsx       |     2 +
 .../components/menus/demos/fade/index.ts      |     5 +
 .../menus/{ => demos/grouped}/GroupedMenu.tsx |     2 +
 .../components/menus/demos/grouped/index.ts   |     5 +
 .../menus/{ => demos/icon}/IconMenu.tsx       |     2 +
 .../components/menus/demos/icon/index.ts      |     5 +
 .../list-composition}/MenuListComposition.tsx |     2 +
 .../menus/demos/list-composition/index.ts     |     5 +
 .../menus/{ => demos/long}/LongMenu.tsx       |     2 +
 .../components/menus/demos/long/index.ts      |     5 +
 .../popup-state}/MenuPopupState.tsx           |     2 +
 .../menus/demos/popup-state/index.ts          |     5 +
 .../{ => demos/positioned}/PositionedMenu.tsx |     2 +
 .../menus/demos/positioned/index.ts           |     5 +
 .../simple-list}/SimpleListMenu.tsx           |     2 +
 .../menus/demos/simple-list/index.ts          |     5 +
 .../{ => demos/typography}/TypographyMenu.tsx |     2 +
 .../menus/demos/typography/index.ts           |     5 +
 docs/data/material/components/menus/menus.md  |    28 +-
 .../material/components/modal/BasicModal.js   |    44 -
 .../components/modal/BasicModal.tsx.preview   |    16 -
 .../components/modal/KeepMountedModal.js      |    45 -
 .../material/components/modal/NestedModal.js  |    78 -
 .../components/modal/NestedModal.tsx.preview  |    15 -
 .../material/components/modal/ServerModal.js  |    54 -
 .../material/components/modal/SpringModal.js  |    95 -
 .../components/modal/TransitionsModal.js      |    55 -
 .../modal/{ => demos/basic}/BasicModal.tsx    |     2 +
 .../components/modal/demos/basic/index.ts     |     5 +
 .../keep-mounted}/KeepMountedModal.tsx        |     2 +
 .../modal/demos/keep-mounted/index.ts         |     5 +
 .../modal/{ => demos/nested}/NestedModal.tsx  |     2 +
 .../components/modal/demos/nested/index.ts    |     5 +
 .../modal/{ => demos/server}/ServerModal.tsx  |     2 +
 .../components/modal/demos/server/index.ts    |     5 +
 .../modal/{ => demos/spring}/SpringModal.tsx  |     2 +
 .../components/modal/demos/spring/index.ts    |     5 +
 .../transitions}/TransitionsModal.tsx         |     2 +
 .../modal/demos/transitions/index.ts          |     5 +
 docs/data/material/components/modal/modal.md  |    12 +-
 .../components/no-ssr/FrameDeferring.js       |    55 -
 .../material/components/no-ssr/SimpleNoSsr.js |    19 -
 .../components/no-ssr/SimpleNoSsr.tsx.preview |    10 -
 .../frame-deferring}/FrameDeferring.tsx       |     2 +
 .../no-ssr/demos/frame-deferring/index.ts     |     5 +
 .../no-ssr/{ => demos/simple}/SimpleNoSsr.tsx |     2 +
 .../components/no-ssr/demos/simple/index.ts   |     5 +
 .../data/material/components/no-ssr/no-ssr.md |     4 +-
 .../components/number-field/FieldDemo.js      |    20 -
 .../number-field/FieldDemo.tsx.preview        |    10 -
 .../components/number-field/SpinnerDemo.js    |    27 -
 .../number-field/SpinnerDemo.tsx.preview      |    10 -
 .../number-field/components/NumberField.js    |   117 -
 .../number-field/components/NumberSpinner.js  |   157 -
 .../{ => demos/field-demo}/FieldDemo.tsx      |     4 +-
 .../field-demo}/NumberField.tsx               |     2 +
 .../number-field/demos/field-demo/index.ts    |     5 +
 .../spinner-demo}/NumberSpinner.tsx           |     2 +
 .../{ => demos/spinner-demo}/SpinnerDemo.tsx  |     4 +-
 .../number-field/demos/spinner-demo/index.ts  |     5 +
 .../components/number-field/number-field.md   |     4 +-
 .../components/pagination/BasicPagination.js  |    13 -
 .../pagination/BasicPagination.tsx.preview    |     4 -
 .../components/pagination/CustomIcons.js      |    21 -
 .../pagination/CustomIcons.tsx.preview        |     9 -
 .../pagination/PaginationButtons.js           |    11 -
 .../pagination/PaginationButtons.tsx.preview  |     2 -
 .../pagination/PaginationControlled.js        |    18 -
 .../PaginationControlled.tsx.preview          |     2 -
 .../components/pagination/PaginationLink.js   |    32 -
 .../pagination/PaginationLink.tsx.preview     |     5 -
 .../pagination/PaginationOutlined.js          |    13 -
 .../pagination/PaginationOutlined.tsx.preview |     4 -
 .../components/pagination/PaginationRanges.js |    13 -
 .../pagination/PaginationRanges.tsx.preview   |     4 -
 .../pagination/PaginationRounded.js           |    11 -
 .../pagination/PaginationRounded.tsx.preview  |     2 -
 .../components/pagination/PaginationSize.js   |    12 -
 .../pagination/PaginationSize.tsx.preview     |     3 -
 .../pagination/TablePaginationDemo.js         |    27 -
 .../TablePaginationDemo.tsx.preview           |     8 -
 .../components/pagination/UsePagination.js    |    49 -
 .../{ => demos/basic}/BasicPagination.tsx     |     2 +
 .../pagination/demos/basic/index.ts           |     5 +
 .../{ => demos/buttons}/PaginationButtons.tsx |     2 +
 .../pagination/demos/buttons/index.ts         |     5 +
 .../controlled}/PaginationControlled.tsx      |     2 +
 .../pagination/demos/controlled/index.ts      |     5 +
 .../{ => demos/custom-icons}/CustomIcons.tsx  |     2 +
 .../pagination/demos/custom-icons/index.ts    |     5 +
 .../{ => demos/link}/PaginationLink.tsx       |     2 +
 .../components/pagination/demos/link/index.ts |     5 +
 .../outlined}/PaginationOutlined.tsx          |     2 +
 .../pagination/demos/outlined/index.ts        |     5 +
 .../{ => demos/ranges}/PaginationRanges.tsx   |     2 +
 .../pagination/demos/ranges/index.ts          |     5 +
 .../{ => demos/rounded}/PaginationRounded.tsx |     2 +
 .../pagination/demos/rounded/index.ts         |     5 +
 .../{ => demos/size}/PaginationSize.tsx       |     2 +
 .../components/pagination/demos/size/index.ts |     5 +
 .../table-demo}/TablePaginationDemo.tsx       |     2 +
 .../pagination/demos/table-demo/index.ts      |     5 +
 .../{ => demos/use}/UsePagination.tsx         |     2 +
 .../components/pagination/demos/use/index.ts  |     5 +
 .../components/pagination/pagination.md       |    22 +-
 .../material/components/paper/Elevation.js    |    46 -
 .../material/components/paper/SimplePaper.js  |    22 -
 .../components/paper/SimplePaper.tsx.preview  |     3 -
 .../components/paper/SquareCorners.js         |    20 -
 .../paper/SquareCorners.tsx.preview           |     2 -
 .../material/components/paper/Variants.js     |    20 -
 .../components/paper/Variants.tsx.preview     |     2 -
 .../paper/{ => demos/elevation}/Elevation.tsx |     2 +
 .../components/paper/demos/elevation/index.ts |     5 +
 .../paper/{ => demos/simple}/SimplePaper.tsx  |     2 +
 .../components/paper/demos/simple/index.ts    |     5 +
 .../square-corners}/SquareCorners.tsx         |     2 +
 .../paper/demos/square-corners/index.ts       |     5 +
 .../paper/{ => demos/variants}/Variants.tsx   |     2 +
 .../components/paper/demos/variants/index.ts  |     5 +
 docs/data/material/components/paper/paper.md  |     8 +-
 .../components/popover/BasicPopover.js        |    39 -
 .../popover/BasicPopover.tsx.preview          |    15 -
 .../components/popover/MouseHoverPopover.js   |    48 -
 .../components/popover/PopoverPopupState.js   |    31 -
 .../popover/VirtualElementPopover.js          |    59 -
 .../anchor-playground}/AnchorPlayground.js    |     0
 .../popover/demos/anchor-playground/index.ts  |     5 +
 .../{ => demos/basic}/BasicPopover.tsx        |     2 +
 .../components/popover/demos/basic/index.ts   |     5 +
 .../mouse-hover}/MouseHoverPopover.tsx        |     2 +
 .../popover/demos/mouse-hover/index.ts        |     5 +
 .../popup-state}/PopoverPopupState.tsx        |     2 +
 .../popover/demos/popup-state/index.ts        |     5 +
 .../VirtualElementPopover.tsx                 |     2 +
 .../popover/demos/virtual-element/index.ts    |     5 +
 .../material/components/popover/popover.md    |    10 +-
 .../components/popper/PopperPopupState.js     |    29 -
 .../components/popper/PositionedPopper.js     |    63 -
 .../components/popper/SimplePopper.js         |    27 -
 .../popper/SimplePopper.tsx.preview           |     8 -
 .../components/popper/SpringPopper.js         |    66 -
 .../popper/SpringPopper.tsx.preview           |    12 -
 .../components/popper/TransitionsPopper.js    |    34 -
 .../popper/TransitionsPopper.tsx.preview      |    12 -
 .../components/popper/VirtualElementPopper.js |    80 -
 .../popup-state}/PopperPopupState.tsx         |     2 +
 .../popper/demos/popup-state/index.ts         |     5 +
 .../positioned}/PositionedPopper.tsx          |     2 +
 .../popper/demos/positioned/index.ts          |     5 +
 .../scroll-playground}/ScrollPlayground.js    |     0
 .../popper/demos/scroll-playground/index.ts   |     5 +
 .../{ => demos/simple}/SimplePopper.tsx       |     2 +
 .../components/popper/demos/simple/index.ts   |     5 +
 .../{ => demos/spring}/SpringPopper.tsx       |     2 +
 .../components/popper/demos/spring/index.ts   |     5 +
 .../transitions}/TransitionsPopper.tsx        |     2 +
 .../popper/demos/transitions/index.ts         |     5 +
 .../virtual-element}/VirtualElementPopper.tsx |     2 +
 .../popper/demos/virtual-element/index.ts     |     5 +
 .../data/material/components/popper/popper.md |    14 +-
 .../components/portal/SimplePortal.js         |    29 -
 .../portal/SimplePortal.tsx.preview           |    12 -
 .../{ => demos/simple}/SimplePortal.tsx       |     2 +
 .../components/portal/demos/simple/index.ts   |     5 +
 .../data/material/components/portal/portal.md |     2 +-
 .../components/progress/CircularColor.js      |    12 -
 .../progress/CircularColor.tsx.preview        |     3 -
 .../progress/CircularCustomScale.js           |    26 -
 .../progress/CircularCustomScale.tsx.preview  |     7 -
 .../progress/CircularDeterminate.js           |    31 -
 .../progress/CircularDeterminate.tsx.preview  |     9 -
 .../progress/CircularEnableTrack.js           |    38 -
 .../progress/CircularEnableTrack.tsx.preview  |    16 -
 .../progress/CircularIndeterminate.js         |    10 -
 .../CircularIndeterminate.tsx.preview         |     1 -
 .../progress/CircularIntegration.js           |    92 -
 .../components/progress/CircularSize.js       |    12 -
 .../progress/CircularSize.tsx.preview         |     3 -
 .../components/progress/CircularUnderLoad.js  |     5 -
 .../progress/CircularUnderLoad.tsx.preview    |     1 -
 .../progress/CircularWithValueLabel.js        |    61 -
 .../CircularWithValueLabel.tsx.preview        |     1 -
 .../progress/CustomizedProgressBars.js        |    92 -
 .../CustomizedProgressBars.tsx.preview        |     8 -
 .../components/progress/DelayingAppearance.js |    76 -
 .../components/progress/LinearBuffer.js       |    45 -
 .../progress/LinearBuffer.tsx.preview         |     6 -
 .../components/progress/LinearColor.js        |    12 -
 .../progress/LinearColor.tsx.preview          |     3 -
 .../components/progress/LinearDeterminate.js  |    33 -
 .../progress/LinearDeterminate.tsx.preview    |     5 -
 .../progress/LinearIndeterminate.js           |    10 -
 .../progress/LinearIndeterminate.tsx.preview  |     1 -
 .../components/progress/LinearQuery.js        |    10 -
 .../progress/LinearQuery.tsx.preview          |     1 -
 .../progress/LinearWithAriaValueText.js       |    77 -
 .../LinearWithAriaValueText.tsx.preview       |     1 -
 .../progress/LinearWithValueLabel.js          |    57 -
 .../progress/LinearWithValueLabel.tsx.preview |     1 -
 .../circular-color}/CircularColor.tsx         |     2 +
 .../progress/demos/circular-color/index.ts    |     5 +
 .../CircularCustomScale.tsx                   |     2 +
 .../demos/circular-custom-scale/index.ts      |     5 +
 .../CircularDeterminate.tsx                   |     2 +
 .../demos/circular-determinate/index.ts       |     5 +
 .../CircularEnableTrack.tsx                   |     2 +
 .../demos/circular-enable-track/index.ts      |     5 +
 .../CircularIndeterminate.tsx                 |     2 +
 .../demos/circular-indeterminate/index.ts     |     5 +
 .../CircularIntegration.tsx                   |     2 +
 .../demos/circular-integration/index.ts       |     5 +
 .../circular-size}/CircularSize.tsx           |     2 +
 .../progress/demos/circular-size/index.ts     |     5 +
 .../CircularUnderLoad.tsx                     |     5 +-
 .../demos/circular-under-load/index.ts        |     5 +
 .../CircularWithValueLabel.tsx                |     2 +
 .../demos/circular-with-value-label/index.ts  |     5 +
 .../CustomizedProgressBars.tsx                |     2 +
 .../progress/demos/customized-bars/index.ts   |     5 +
 .../DelayingAppearance.tsx                    |     2 +
 .../demos/delaying-appearance/index.ts        |     5 +
 .../linear-buffer}/LinearBuffer.tsx           |     2 +
 .../progress/demos/linear-buffer/index.ts     |     5 +
 .../{ => demos/linear-color}/LinearColor.tsx  |     2 +
 .../progress/demos/linear-color/index.ts      |     5 +
 .../linear-determinate}/LinearDeterminate.tsx |     2 +
 .../demos/linear-determinate/index.ts         |     5 +
 .../LinearIndeterminate.tsx                   |     2 +
 .../demos/linear-indeterminate/index.ts       |     5 +
 .../{ => demos/linear-query}/LinearQuery.tsx  |     2 +
 .../progress/demos/linear-query/index.ts      |     5 +
 .../LinearWithAriaValueText.tsx               |     2 +
 .../linear-with-aria-value-text/index.ts      |     5 +
 .../LinearWithValueLabel.tsx                  |     2 +
 .../demos/linear-with-value-label/index.ts    |     5 +
 .../material/components/progress/progress.md  |    36 +-
 .../radio-buttons/ColorRadioButtons.js        |    37 -
 .../ColorRadioButtons.tsx.preview             |    13 -
 .../ControlledRadioButtonsGroup.js            |    30 -
 .../ControlledRadioButtonsGroup.tsx.preview   |    12 -
 .../radio-buttons/CustomizedRadios.js         |   107 -
 .../components/radio-buttons/ErrorRadios.js   |    57 -
 .../FormControlLabelPlacement.js              |    29 -
 .../components/radio-buttons/RadioButtons.js  |    29 -
 .../radio-buttons/RadioButtons.tsx.preview    |    14 -
 .../radio-buttons/RadioButtonsGroup.js        |    24 -
 .../RadioButtonsGroup.tsx.preview             |    12 -
 .../radio-buttons/RowRadioButtonsGroup.js     |    26 -
 .../RowRadioButtonsGroup.tsx.preview          |    14 -
 .../radio-buttons/SizeRadioButtons.js         |    32 -
 .../SizeRadioButtons.tsx.preview              |    10 -
 .../components/radio-buttons/UseRadioGroup.js |    48 -
 .../radio-buttons/UseRadioGroup.tsx.preview   |     4 -
 .../{ => demos/color}/ColorRadioButtons.tsx   |     2 +
 .../radio-buttons/demos/color/index.ts        |     5 +
 .../ControlledRadioButtonsGroup.tsx           |     2 +
 .../demos/controlled-group/index.ts           |     5 +
 .../customized-radios}/CustomizedRadios.tsx   |     2 +
 .../demos/customized-radios/index.ts          |     5 +
 .../{ => demos/error-radios}/ErrorRadios.tsx  |     2 +
 .../radio-buttons/demos/error-radios/index.ts |     5 +
 .../FormControlLabelPlacement.tsx             |     2 +
 .../form-control-label-placement/index.ts     |     5 +
 .../{ => demos/group}/RadioButtonsGroup.tsx   |     2 +
 .../radio-buttons/demos/group/index.ts        |     5 +
 .../radio-buttons}/RadioButtons.tsx           |     2 +
 .../demos/radio-buttons/index.ts              |     5 +
 .../row-group}/RowRadioButtonsGroup.tsx       |     2 +
 .../radio-buttons/demos/row-group/index.ts    |     5 +
 .../{ => demos/size}/SizeRadioButtons.tsx     |     2 +
 .../radio-buttons/demos/size/index.ts         |     5 +
 .../use-radio-group}/UseRadioGroup.tsx        |     2 +
 .../demos/use-radio-group/index.ts            |     5 +
 .../components/radio-buttons/radio-buttons.md |    20 +-
 .../material/components/rating/BasicRating.js |    35 -
 .../components/rating/CustomizedRating.js     |    33 -
 .../rating/CustomizedRating.tsx.preview       |    11 -
 .../material/components/rating/HalfRating.js  |    11 -
 .../components/rating/HalfRating.tsx.preview  |     2 -
 .../material/components/rating/HoverRating.js |    47 -
 .../components/rating/HoverRating.tsx.preview |    16 -
 .../components/rating/RadioGroupRating.js     |    59 -
 .../rating/RadioGroupRating.tsx.preview       |     7 -
 .../material/components/rating/RatingSize.js  |    12 -
 .../components/rating/RatingSize.tsx.preview  |     3 -
 .../material/components/rating/TextRating.js  |    33 -
 .../components/rating/TextRating.tsx.preview  |     8 -
 .../rating/{ => demos/basic}/BasicRating.tsx  |     2 +
 .../components/rating/demos/basic/index.ts    |     5 +
 .../customized}/CustomizedRating.tsx          |     2 +
 .../rating/demos/customized/index.ts          |     5 +
 .../rating/{ => demos/half}/HalfRating.tsx    |     2 +
 .../components/rating/demos/half/index.ts     |     5 +
 .../rating/{ => demos/hover}/HoverRating.tsx  |     2 +
 .../components/rating/demos/hover/index.ts    |     5 +
 .../radio-group}/RadioGroupRating.tsx         |     2 +
 .../rating/demos/radio-group/index.ts         |     5 +
 .../rating/{ => demos/size}/RatingSize.tsx    |     2 +
 .../components/rating/demos/size/index.ts     |     5 +
 .../rating/{ => demos/text}/TextRating.tsx    |     2 +
 .../components/rating/demos/text/index.ts     |     5 +
 .../data/material/components/rating/rating.md |    14 +-
 .../components/selects/BasicSelect.js         |    33 -
 .../selects/BasicSelect.tsx.preview           |    14 -
 .../selects/ControlledOpenSelect.js           |    51 -
 .../components/selects/CustomizedSelects.js   |    90 -
 .../components/selects/DialogSelect.js        |    85 -
 .../components/selects/GroupedSelect.js       |    52 -
 .../components/selects/MultipleSelect.js      |    83 -
 .../selects/MultipleSelectCheckmarks.js       |    82 -
 .../components/selects/MultipleSelectChip.js  |    92 -
 .../selects/MultipleSelectNative.js           |    58 -
 .../selects/MultipleSelectPlaceholder.js      |    91 -
 .../components/selects/NativeSelectDemo.js    |    29 -
 .../selects/NativeSelectDemo.tsx.preview      |    16 -
 .../components/selects/SelectAutoWidth.js     |    36 -
 .../components/selects/SelectLabels.js        |    61 -
 .../components/selects/SelectOtherProps.js    |    93 -
 .../components/selects/SelectSmall.js         |    33 -
 .../components/selects/SelectVariants.js      |    67 -
 .../auto-width}/SelectAutoWidth.tsx           |     2 +
 .../selects/demos/auto-width/index.ts         |     5 +
 .../selects/{ => demos/basic}/BasicSelect.tsx |     2 +
 .../components/selects/demos/basic/index.ts   |     5 +
 .../controlled-open}/ControlledOpenSelect.tsx |     2 +
 .../selects/demos/controlled-open/index.ts    |     5 +
 .../customized}/CustomizedSelects.tsx         |     2 +
 .../selects/demos/customized/index.ts         |     5 +
 .../{ => demos/dialog}/DialogSelect.tsx       |     2 +
 .../components/selects/demos/dialog/index.ts  |     5 +
 .../{ => demos/grouped}/GroupedSelect.tsx     |     2 +
 .../components/selects/demos/grouped/index.ts |     5 +
 .../{ => demos/labels}/SelectLabels.tsx       |     2 +
 .../components/selects/demos/labels/index.ts  |     5 +
 .../MultipleSelectCheckmarks.tsx              |     2 +
 .../demos/multiple-checkmarks/index.ts        |     5 +
 .../multiple-chip}/MultipleSelectChip.tsx     |     2 +
 .../selects/demos/multiple-chip/index.ts      |     5 +
 .../multiple-native}/MultipleSelectNative.tsx |     2 +
 .../selects/demos/multiple-native/index.ts    |     5 +
 .../MultipleSelectPlaceholder.tsx             |     2 +
 .../demos/multiple-placeholder/index.ts       |     5 +
 .../{ => demos/multiple}/MultipleSelect.tsx   |     2 +
 .../selects/demos/multiple/index.ts           |     5 +
 .../native-demo}/NativeSelectDemo.tsx         |     2 +
 .../selects/demos/native-demo/index.ts        |     5 +
 .../other-props}/SelectOtherProps.tsx         |     2 +
 .../selects/demos/other-props/index.ts        |     5 +
 .../selects/{ => demos/small}/SelectSmall.tsx |     2 +
 .../components/selects/demos/small/index.ts   |     5 +
 .../{ => demos/variants}/SelectVariants.tsx   |     2 +
 .../selects/demos/variants/index.ts           |     5 +
 .../material/components/selects/selects.md    |    32 +-
 .../components/skeleton/Animations.js         |    12 -
 .../skeleton/Animations.tsx.preview           |     3 -
 .../material/components/skeleton/Facebook.js  |    95 -
 .../components/skeleton/Facebook.tsx.preview  |     2 -
 .../components/skeleton/SkeletonChildren.js   |    67 -
 .../skeleton/SkeletonChildren.tsx.preview     |     8 -
 .../components/skeleton/SkeletonColor.js      |    23 -
 .../skeleton/SkeletonColor.tsx.preview        |     6 -
 .../components/skeleton/SkeletonTypography.js |    37 -
 .../skeleton/SkeletonTypography.tsx.preview   |     8 -
 .../material/components/skeleton/Variants.js  |    15 -
 .../components/skeleton/Variants.tsx.preview  |     7 -
 .../material/components/skeleton/YouTube.js   |    85 -
 .../components/skeleton/YouTube.tsx.preview   |     2 -
 .../{ => demos/animations}/Animations.tsx     |     2 +
 .../skeleton/demos/animations/index.ts        |     5 +
 .../{ => demos/children}/SkeletonChildren.tsx |     2 +
 .../skeleton/demos/children/index.ts          |     5 +
 .../{ => demos/color}/SkeletonColor.tsx       |     2 +
 .../components/skeleton/demos/color/index.ts  |     5 +
 .../{ => demos/facebook}/Facebook.tsx         |     2 +
 .../skeleton/demos/facebook/index.ts          |     5 +
 .../typography}/SkeletonTypography.tsx        |     2 +
 .../skeleton/demos/typography/index.ts        |     5 +
 .../{ => demos/variants}/Variants.tsx         |     2 +
 .../skeleton/demos/variants/index.ts          |     5 +
 .../skeleton/{ => demos/you-tube}/YouTube.tsx |     2 +
 .../skeleton/demos/you-tube/index.ts          |     5 +
 .../material/components/skeleton/skeleton.md  |    14 +-
 .../material/components/slider/ColorSlider.js |    19 -
 .../components/slider/ColorSlider.tsx.preview |     6 -
 .../components/slider/ContinuousSlider.js     |    25 -
 .../slider/ContinuousSlider.tsx.preview       |     6 -
 .../material/components/slider/CustomMarks.js |    54 -
 .../components/slider/CustomizedSlider.js     |   199 -
 .../components/slider/DiscreteSlider.js       |    25 -
 .../slider/DiscreteSlider.tsx.preview         |    12 -
 .../components/slider/DiscreteSliderLabel.js  |    40 -
 .../slider/DiscreteSliderLabel.tsx.preview    |     8 -
 .../components/slider/DiscreteSliderMarks.js  |    40 -
 .../slider/DiscreteSliderMarks.tsx.preview    |     8 -
 .../components/slider/DiscreteSliderSteps.js  |    23 -
 .../slider/DiscreteSliderSteps.tsx.preview    |    10 -
 .../components/slider/DiscreteSliderValues.js |    40 -
 .../slider/DiscreteSliderValues.tsx.preview   |     8 -
 .../material/components/slider/InputSlider.js |    67 -
 .../slider/MinimumDistanceSlider.js           |    58 -
 .../slider/MinimumDistanceSlider.tsx.preview  |    16 -
 .../components/slider/MusicPlayerSlider.js    |   241 -
 .../components/slider/NonLinearSlider.js      |    50 -
 .../slider/NonLinearSlider.tsx.preview        |    15 -
 .../material/components/slider/RangeSlider.js |    27 -
 .../components/slider/RangeSlider.tsx.preview |     7 -
 .../material/components/slider/SliderSizes.js |    16 -
 .../components/slider/SliderSizes.tsx.preview |     7 -
 .../components/slider/TrackFalseSlider.js     |    64 -
 .../components/slider/TrackInvertedSlider.js  |    61 -
 .../components/slider/VerticalSlider.js       |    54 -
 .../slider/{ => demos/color}/ColorSlider.tsx  |     2 +
 .../components/slider/demos/color/index.ts    |     5 +
 .../continuous}/ContinuousSlider.tsx          |     2 +
 .../slider/demos/continuous/index.ts          |     5 +
 .../{ => demos/custom-marks}/CustomMarks.tsx  |     2 +
 .../slider/demos/custom-marks/index.ts        |     5 +
 .../customized}/CustomizedSlider.tsx          |     2 +
 .../slider/demos/customized/index.ts          |     5 +
 .../discrete-label}/DiscreteSliderLabel.tsx   |     2 +
 .../slider/demos/discrete-label/index.ts      |     5 +
 .../discrete-marks}/DiscreteSliderMarks.tsx   |     2 +
 .../slider/demos/discrete-marks/index.ts      |     5 +
 .../discrete-steps}/DiscreteSliderSteps.tsx   |     2 +
 .../slider/demos/discrete-steps/index.ts      |     5 +
 .../discrete-values}/DiscreteSliderValues.tsx |     2 +
 .../slider/demos/discrete-values/index.ts     |     5 +
 .../{ => demos/discrete}/DiscreteSlider.tsx   |     2 +
 .../components/slider/demos/discrete/index.ts |     5 +
 .../slider/{ => demos/input}/InputSlider.tsx  |     2 +
 .../components/slider/demos/input/index.ts    |     5 +
 .../MinimumDistanceSlider.tsx                 |     2 +
 .../slider/demos/minimum-distance/index.ts    |     5 +
 .../music-player}/MusicPlayerSlider.tsx       |     2 +
 .../slider/demos/music-player/index.ts        |     5 +
 .../non-linear}/NonLinearSlider.tsx           |     2 +
 .../slider/demos/non-linear/index.ts          |     5 +
 .../slider/{ => demos/range}/RangeSlider.tsx  |     2 +
 .../components/slider/demos/range/index.ts    |     5 +
 .../slider/{ => demos/sizes}/SliderSizes.tsx  |     2 +
 .../components/slider/demos/sizes/index.ts    |     5 +
 .../track-false}/TrackFalseSlider.tsx         |     2 +
 .../slider/demos/track-false/index.ts         |     5 +
 .../track-inverted}/TrackInvertedSlider.tsx   |     2 +
 .../slider/demos/track-inverted/index.ts      |     5 +
 .../{ => demos/vertical}/VerticalSlider.tsx   |     2 +
 .../components/slider/demos/vertical/index.ts |     5 +
 .../data/material/components/slider/slider.md |    36 +-
 .../components/snackbars/AutohideSnackbar.js  |    31 -
 .../snackbars/AutohideSnackbar.tsx.preview    |     7 -
 .../snackbars/ConsecutiveSnackbars.js         |    68 -
 .../snackbars/CustomizedSnackbars.js          |    36 -
 .../snackbars/CustomizedSnackbars.tsx.preview |    11 -
 .../components/snackbars/DirectionSnackbar.js |    62 -
 .../snackbars/DirectionSnackbar.tsx           |    66 -
 .../snackbars/FabIntegrationSnackbar.js       |    69 -
 .../snackbars/IntegrationNotistack.js         |    31 -
 .../IntegrationNotistack.tsx.preview          |     3 -
 .../components/snackbars/LongTextSnackbar.js  |    34 -
 .../snackbars/PositionedSnackbar.js           |    72 -
 .../snackbars/PositionedSnackbar.tsx.preview  |     8 -
 .../components/snackbars/SimpleSnackbar.js    |    50 -
 .../snackbars/SimpleSnackbar.tsx.preview      |     8 -
 .../snackbars/TransitionsSnackbar.js          |    51 -
 .../snackbars/TransitionsSnackbar.tsx.preview |    11 -
 .../{ => demos/autohide}/AutohideSnackbar.tsx |     2 +
 .../snackbars/demos/autohide/index.ts         |     5 +
 .../consecutive}/ConsecutiveSnackbars.tsx     |     2 +
 .../snackbars/demos/consecutive/index.ts      |     5 +
 .../customized}/CustomizedSnackbars.tsx       |     2 +
 .../snackbars/demos/customized/index.ts       |     5 +
 .../FabIntegrationSnackbar.tsx                |     2 +
 .../snackbars/demos/fab-integration/index.ts  |     5 +
 .../IntegrationNotistack.tsx                  |     2 +
 .../demos/integration-notistack/index.ts      |     5 +
 .../long-text}/LongTextSnackbar.tsx           |     2 +
 .../snackbars/demos/long-text/index.ts        |     5 +
 .../positioned}/PositionedSnackbar.tsx        |     2 +
 .../snackbars/demos/positioned/index.ts       |     5 +
 .../{ => demos/simple}/SimpleSnackbar.tsx     |     2 +
 .../snackbars/demos/simple/index.ts           |     5 +
 .../transitions}/TransitionsSnackbar.tsx      |     2 +
 .../snackbars/demos/transitions/index.ts      |     5 +
 .../components/snackbars/snackbars.md         |    18 +-
 .../components/speed-dial/BasicSpeedDial.js   |    39 -
 .../speed-dial/ControlledOpenSpeedDial.js     |    48 -
 .../speed-dial/OpenIconSpeedDial.js           |    40 -
 .../speed-dial/PlaygroundSpeedDial.js         |    94 -
 .../speed-dial/SpeedDialTooltipOpen.js        |    51 -
 .../{ => demos/basic}/BasicSpeedDial.tsx      |     2 +
 .../speed-dial/demos/basic/index.ts           |     5 +
 .../ControlledOpenSpeedDial.tsx               |     2 +
 .../speed-dial/demos/controlled-open/index.ts |     5 +
 .../open-icon}/OpenIconSpeedDial.tsx          |     2 +
 .../speed-dial/demos/open-icon/index.ts       |     5 +
 .../playground}/PlaygroundSpeedDial.tsx       |     2 +
 .../speed-dial/demos/playground/index.ts      |     5 +
 .../tooltip-open}/SpeedDialTooltipOpen.tsx    |     2 +
 .../speed-dial/demos/tooltip-open/index.ts    |     5 +
 .../components/speed-dial/speed-dial.md       |    10 +-
 .../material/components/stack/BasicStack.js   |    27 -
 .../components/stack/BasicStack.tsx.preview   |     5 -
 .../components/stack/DirectionStack.js        |    26 -
 .../stack/DirectionStack.tsx.preview          |     5 -
 .../material/components/stack/DividerStack.js |    31 -
 .../components/stack/DividerStack.tsx.preview |     9 -
 .../components/stack/FlexboxGapStack.js       |    33 -
 .../stack/FlexboxGapStack.tsx.preview         |    10 -
 .../components/stack/InteractiveStack.js      |   201 -
 .../components/stack/ResponsiveStack.js       |    29 -
 .../stack/ResponsiveStack.tsx.preview         |     8 -
 .../components/stack/ZeroWidthStack.js        |    44 -
 .../stack/ZeroWidthStack.tsx.preview          |    16 -
 .../stack/{ => demos/basic}/BasicStack.tsx    |     2 +
 .../components/stack/demos/basic/index.ts     |     5 +
 .../{ => demos/direction}/DirectionStack.tsx  |     2 +
 .../components/stack/demos/direction/index.ts |     5 +
 .../{ => demos/divider}/DividerStack.tsx      |     2 +
 .../components/stack/demos/divider/index.ts   |     5 +
 .../flexbox-gap}/FlexboxGapStack.tsx          |     2 +
 .../stack/demos/flexbox-gap/index.ts          |     5 +
 .../interactive}/InteractiveStack.tsx         |     2 +
 .../stack/demos/interactive/index.ts          |     5 +
 .../responsive}/ResponsiveStack.tsx           |     2 +
 .../stack/demos/responsive/index.ts           |     5 +
 .../{ => demos/zero-width}/ZeroWidthStack.tsx |     2 +
 .../stack/demos/zero-width/index.ts           |     5 +
 docs/data/material/components/stack/stack.md  |    14 +-
 .../components/steppers/CustomizedSteppers.js |   211 -
 .../steppers/CustomizedSteppers.tsx.preview   |    14 -
 .../components/steppers/DotsMobileStepper.js  |    86 -
 ...HorizontalLinearAlternativeLabelStepper.js |    24 -
 ...lLinearAlternativeLabelStepper.tsx.preview |     7 -
 .../steppers/HorizontalLinearStepper.js       |   141 -
 .../steppers/HorizontalNonLinearStepper.js    |   148 -
 .../steppers/HorizontalStepperWithError.js    |    39 -
 .../steppers/ProgressMobileStepper.js         |    83 -
 .../components/steppers/TextMobileStepper.js  |   122 -
 .../VerticalLinearAlternativeLabelStepper.js  |    93 -
 .../steppers/VerticalLinearStepper.js         |   129 -
 .../customized}/CustomizedSteppers.tsx        |     2 +
 .../steppers/demos/customized/index.ts        |     5 +
 .../dots-mobile}/DotsMobileStepper.tsx        |     2 +
 .../steppers/demos/dots-mobile/index.ts       |     5 +
 ...orizontalLinearAlternativeLabelStepper.tsx |     2 +
 .../index.ts                                  |     5 +
 .../HorizontalLinearStepper.tsx               |     2 +
 .../steppers/demos/horizontal-linear/index.ts |     5 +
 .../HorizontalNonLinearStepper.tsx            |     2 +
 .../demos/horizontal-non-linear/index.ts      |     5 +
 .../HorizontalStepperWithError.tsx            |     2 +
 .../demos/horizontal-with-error/index.ts      |     5 +
 .../ProgressMobileStepper.tsx                 |     2 +
 .../steppers/demos/progress-mobile/index.ts   |     5 +
 .../text-mobile}/TextMobileStepper.tsx        |     2 +
 .../steppers/demos/text-mobile/index.ts       |     5 +
 .../VerticalLinearAlternativeLabelStepper.tsx |     2 +
 .../index.ts                                  |     5 +
 .../VerticalLinearStepper.tsx                 |     2 +
 .../steppers/demos/vertical-linear/index.ts   |     5 +
 .../material/components/steppers/steppers.md  |    20 +-
 .../components/switches/BasicSwitches.js      |    14 -
 .../switches/BasicSwitches.tsx.preview        |     4 -
 .../components/switches/ColorSwitches.js      |    29 -
 .../switches/ColorSwitches.tsx.preview        |     5 -
 .../components/switches/ControlledSwitches.js |    18 -
 .../switches/ControlledSwitches.tsx.preview   |     5 -
 .../components/switches/CustomizedSwitches.js |   229 -
 .../switches/FormControlLabelPosition.js      |    27 -
 .../components/switches/SwitchLabels.js       |    13 -
 .../switches/SwitchLabels.tsx.preview         |     5 -
 .../components/switches/SwitchesGroup.js      |    49 -
 .../components/switches/SwitchesSize.js       |    12 -
 .../switches/SwitchesSize.tsx.preview         |     2 -
 .../{ => demos/basic}/BasicSwitches.tsx       |     2 +
 .../components/switches/demos/basic/index.ts  |     5 +
 .../{ => demos/color}/ColorSwitches.tsx       |     2 +
 .../components/switches/demos/color/index.ts  |     5 +
 .../controlled}/ControlledSwitches.tsx        |     2 +
 .../switches/demos/controlled/index.ts        |     5 +
 .../customized}/CustomizedSwitches.tsx        |     2 +
 .../switches/demos/customized/index.ts        |     5 +
 .../FormControlLabelPosition.tsx              |     2 +
 .../form-control-label-position/index.ts      |     5 +
 .../{ => demos/group}/SwitchesGroup.tsx       |     2 +
 .../components/switches/demos/group/index.ts  |     5 +
 .../{ => demos/labels}/SwitchLabels.tsx       |     2 +
 .../components/switches/demos/labels/index.ts |     5 +
 .../{ => demos/size}/SwitchesSize.tsx         |     2 +
 .../components/switches/demos/size/index.ts   |     5 +
 .../material/components/switches/switches.md  |    16 +-
 .../components/table/AccessibleTable.js       |    49 -
 .../material/components/table/BasicTable.js   |    53 -
 .../components/table/CollapsibleTable.js      |   151 -
 .../components/table/ColumnGroupingTable.js   |   131 -
 .../table/CustomPaginationActionsTable.js     |   168 -
 .../components/table/CustomizedTables.js      |    71 -
 .../material/components/table/DataTable.js    |    51 -
 .../components/table/DataTable.tsx.preview    |    10 -
 .../material/components/table/DenseTable.js   |    53 -
 .../components/table/EnhancedTable.js         |   367 -
 .../components/table/ReactVirtualizedTable.js |   112 -
 .../table/ReactVirtualizedTable.tsx.preview   |     8 -
 .../components/table/SpanningTable.js         |    83 -
 .../components/table/StickyHeadTable.js       |   123 -
 .../accessible}/AccessibleTable.tsx           |     2 +
 .../table/demos/accessible/index.ts           |     5 +
 .../table/{ => demos/basic}/BasicTable.tsx    |     2 +
 .../components/table/demos/basic/index.ts     |     5 +
 .../collapsible}/CollapsibleTable.tsx         |     2 +
 .../table/demos/collapsible/index.ts          |     5 +
 .../column-grouping}/ColumnGroupingTable.tsx  |     2 +
 .../table/demos/column-grouping/index.ts      |     5 +
 .../CustomPaginationActionsTable.tsx          |     2 +
 .../demos/custom-pagination-actions/index.ts  |     5 +
 .../customized}/CustomizedTables.tsx          |     2 +
 .../table/demos/customized/index.ts           |     5 +
 .../table/{ => demos/data}/DataTable.tsx      |     2 +
 .../components/table/demos/data/index.ts      |     5 +
 .../table/{ => demos/dense}/DenseTable.tsx    |     2 +
 .../components/table/demos/dense/index.ts     |     5 +
 .../{ => demos/enhanced}/EnhancedTable.tsx    |     2 +
 .../components/table/demos/enhanced/index.ts  |     5 +
 .../ReactVirtualizedTable.tsx                 |     2 +
 .../table/demos/react-virtualized/index.ts    |     5 +
 .../{ => demos/spanning}/SpanningTable.tsx    |     2 +
 .../components/table/demos/spanning/index.ts  |     5 +
 .../sticky-head}/StickyHeadTable.tsx          |     2 +
 .../table/demos/sticky-head/index.ts          |     5 +
 docs/data/material/components/table/table.md  |    24 +-
 .../components/tabs/AccessibleTabs1.js        |    26 -
 .../tabs/AccessibleTabs1.tsx.preview          |    10 -
 .../components/tabs/AccessibleTabs2.js        |    25 -
 .../tabs/AccessibleTabs2.tsx.preview          |     9 -
 .../material/components/tabs/BasicTabs.js     |    63 -
 .../components/tabs/BasicTabs.tsx.preview     |    16 -
 .../material/components/tabs/CenteredTabs.js  |    22 -
 .../components/tabs/CenteredTabs.tsx.preview  |     5 -
 .../material/components/tabs/ColorTabs.js     |    28 -
 .../components/tabs/ColorTabs.tsx.preview     |    11 -
 .../components/tabs/CustomizedTabs.js         |   115 -
 .../material/components/tabs/DisabledTabs.js  |    19 -
 .../components/tabs/DisabledTabs.tsx.preview  |     5 -
 .../material/components/tabs/FullWidthTabs.js |    78 -
 .../material/components/tabs/IconLabelTabs.js |    22 -
 .../components/tabs/IconLabelTabs.tsx.preview |     5 -
 .../components/tabs/IconPositionTabs.js       |    28 -
 .../tabs/IconPositionTabs.tsx.preview         |    10 -
 .../data/material/components/tabs/IconTabs.js |    22 -
 .../components/tabs/IconTabs.tsx.preview      |     5 -
 docs/data/material/components/tabs/LabTabs.js |    31 -
 .../components/tabs/LabTabs.tsx.preview       |    12 -
 docs/data/material/components/tabs/NavTabs.js |    68 -
 .../components/tabs/NavTabs.tsx.preview       |    10 -
 .../tabs/ScrollableTabsButtonAuto.js          |    32 -
 .../tabs/ScrollableTabsButtonAuto.tsx.preview |    15 -
 .../tabs/ScrollableTabsButtonForce.js         |    33 -
 .../ScrollableTabsButtonForce.tsx.preview     |    16 -
 .../tabs/ScrollableTabsButtonPrevent.js       |    32 -
 .../ScrollableTabsButtonPrevent.tsx.preview   |    15 -
 .../tabs/ScrollableTabsButtonVisible.js       |    43 -
 .../components/tabs/TabsWrappedLabel.js       |    30 -
 .../tabs/TabsWrappedLabel.tsx.preview         |    13 -
 .../material/components/tabs/VerticalTabs.js  |    91 -
 .../accessible-tabs1}/AccessibleTabs1.tsx     |     2 +
 .../tabs/demos/accessible-tabs1/index.ts      |     5 +
 .../accessible-tabs2}/AccessibleTabs2.tsx     |     2 +
 .../tabs/demos/accessible-tabs2/index.ts      |     5 +
 .../tabs/{ => demos/basic}/BasicTabs.tsx      |     2 +
 .../components/tabs/demos/basic/index.ts      |     5 +
 .../{ => demos/centered}/CenteredTabs.tsx     |     2 +
 .../components/tabs/demos/centered/index.ts   |     5 +
 .../tabs/{ => demos/color}/ColorTabs.tsx      |     2 +
 .../components/tabs/demos/color/index.ts      |     5 +
 .../{ => demos/customized}/CustomizedTabs.tsx |     2 +
 .../components/tabs/demos/customized/index.ts |     5 +
 .../{ => demos/disabled}/DisabledTabs.tsx     |     2 +
 .../components/tabs/demos/disabled/index.ts   |     5 +
 .../{ => demos/full-width}/FullWidthTabs.tsx  |     2 +
 .../components/tabs/demos/full-width/index.ts |     5 +
 .../{ => demos/icon-label}/IconLabelTabs.tsx  |     2 +
 .../components/tabs/demos/icon-label/index.ts |     5 +
 .../icon-position}/IconPositionTabs.tsx       |     2 +
 .../tabs/demos/icon-position/index.ts         |     5 +
 .../tabs/{ => demos/icon}/IconTabs.tsx        |     2 +
 .../components/tabs/demos/icon/index.ts       |     5 +
 .../tabs/{ => demos/lab}/LabTabs.tsx          |     2 +
 .../components/tabs/demos/lab/index.ts        |     5 +
 .../tabs/{ => demos/nav}/NavTabs.tsx          |     2 +
 .../components/tabs/demos/nav/index.ts        |     5 +
 .../ScrollableTabsButtonAuto.tsx              |     2 +
 .../demos/scrollable-button-auto/index.ts     |     5 +
 .../ScrollableTabsButtonForce.tsx             |     2 +
 .../demos/scrollable-button-force/index.ts    |     5 +
 .../ScrollableTabsButtonPrevent.tsx           |     2 +
 .../demos/scrollable-button-prevent/index.ts  |     5 +
 .../ScrollableTabsButtonVisible.tsx           |     2 +
 .../demos/scrollable-button-visible/index.ts  |     5 +
 .../{ => demos/vertical}/VerticalTabs.tsx     |     2 +
 .../components/tabs/demos/vertical/index.ts   |     5 +
 .../wrapped-label}/TabsWrappedLabel.tsx       |     2 +
 .../tabs/demos/wrapped-label/index.ts         |     5 +
 docs/data/material/components/tabs/tabs.md    |    38 +-
 .../components/text-fields/BasicTextFields.js |    17 -
 .../text-fields/BasicTextFields.tsx.preview   |     3 -
 .../components/text-fields/ColorTextFields.js |    22 -
 .../text-fields/ColorTextFields.tsx.preview   |     8 -
 .../text-fields/ComposedTextField.js          |    67 -
 .../text-fields/CustomizedInputBase.js        |    32 -
 .../CustomizedInputsStyleOverrides.js         |    86 -
 ...CustomizedInputsStyleOverrides.tsx.preview |     5 -
 .../text-fields/CustomizedInputsStyled.js     |   154 -
 .../text-fields/FormPropsTextFields.js        |   145 -
 .../components/text-fields/FormattedInputs.js |    70 -
 .../text-fields/FullWidthTextField.js         |    10 -
 .../FullWidthTextField.tsx.preview            |     1 -
 .../text-fields/HelperTextAligned.js          |    19 -
 .../text-fields/HelperTextAligned.tsx.preview |    10 -
 .../text-fields/HelperTextMisaligned.js       |    15 -
 .../HelperTextMisaligned.tsx.preview          |     6 -
 .../components/text-fields/InputAdornments.js |   209 -
 .../text-fields/InputSuffixShrink.js          |    96 -
 .../components/text-fields/InputWithIcon.js   |    49 -
 .../material/components/text-fields/Inputs.js |    20 -
 .../components/text-fields/Inputs.tsx.preview |     4 -
 .../text-fields/LayoutTextFields.js           |    36 -
 .../text-fields/LayoutTextFields.tsx.preview  |     7 -
 .../text-fields/MultilineTextFields.js        |    83 -
 .../text-fields/SelectTextFields.js           |   137 -
 .../components/text-fields/StateTextFields.js |    30 -
 .../text-fields/StateTextFields.tsx.preview   |    13 -
 .../text-fields/TextFieldHiddenLabel.js       |    28 -
 .../TextFieldHiddenLabel.tsx.preview          |    13 -
 .../components/text-fields/TextFieldSizes.js  |    53 -
 .../components/text-fields/UseFormControl.js  |    29 -
 .../text-fields/UseFormControl.tsx.preview    |     6 -
 .../text-fields/ValidationTextFields.js       |    63 -
 .../{ => demos/basic}/BasicTextFields.tsx     |     2 +
 .../text-fields/demos/basic/index.ts          |     5 +
 .../{ => demos/color}/ColorTextFields.tsx     |     2 +
 .../text-fields/demos/color/index.ts          |     5 +
 .../composed}/ComposedTextField.tsx           |     2 +
 .../text-fields/demos/composed/index.ts       |     5 +
 .../CustomizedInputBase.tsx                   |     2 +
 .../demos/customized-input-base/index.ts      |     5 +
 .../CustomizedInputsStyleOverrides.tsx        |     2 +
 .../index.ts                                  |     5 +
 .../CustomizedInputsStyled.tsx                |     2 +
 .../demos/customized-inputs-styled/index.ts   |     5 +
 .../form-props}/FormPropsTextFields.tsx       |     2 +
 .../text-fields/demos/form-props/index.ts     |     5 +
 .../formatted-inputs}/FormattedInputs.tsx     |     2 +
 .../demos/formatted-inputs/index.ts           |     5 +
 .../full-width}/FullWidthTextField.tsx        |     2 +
 .../text-fields/demos/full-width/index.ts     |     5 +
 .../HelperTextAligned.tsx                     |     2 +
 .../demos/helper-text-aligned/index.ts        |     5 +
 .../HelperTextMisaligned.tsx                  |     2 +
 .../demos/helper-text-misaligned/index.ts     |     5 +
 .../hidden-label}/TextFieldHiddenLabel.tsx    |     2 +
 .../text-fields/demos/hidden-label/index.ts   |     5 +
 .../input-adornments}/InputAdornments.tsx     |     2 +
 .../demos/input-adornments/index.ts           |     5 +
 .../InputSuffixShrink.tsx                     |     2 +
 .../demos/input-suffix-shrink/index.ts        |     5 +
 .../input-with-icon}/InputWithIcon.tsx        |     2 +
 .../demos/input-with-icon/index.ts            |     5 +
 .../text-fields/{ => demos/inputs}/Inputs.tsx |     2 +
 .../text-fields/demos/inputs/index.ts         |     5 +
 .../{ => demos/layout}/LayoutTextFields.tsx   |     2 +
 .../text-fields/demos/layout/index.ts         |     5 +
 .../multiline}/MultilineTextFields.tsx        |     2 +
 .../text-fields/demos/multiline/index.ts      |     5 +
 .../{ => demos/select}/SelectTextFields.tsx   |     2 +
 .../text-fields/demos/select/index.ts         |     5 +
 .../{ => demos/sizes}/TextFieldSizes.tsx      |     2 +
 .../text-fields/demos/sizes/index.ts          |     5 +
 .../{ => demos/state}/StateTextFields.tsx     |     2 +
 .../text-fields/demos/state/index.ts          |     5 +
 .../use-form-control}/UseFormControl.tsx      |     2 +
 .../demos/use-form-control/index.ts           |     5 +
 .../validation}/ValidationTextFields.tsx      |     2 +
 .../text-fields/demos/validation/index.ts     |     5 +
 .../components/text-fields/text-fields.md     |    46 +-
 .../textarea-autosize/EmptyTextarea.js        |    11 -
 .../EmptyTextarea.tsx.preview                 |     5 -
 .../textarea-autosize/MaxHeightTextarea.js    |    14 -
 .../MaxHeightTextarea.tsx.preview             |     8 -
 .../textarea-autosize/MinHeightTextarea.js    |    12 -
 .../MinHeightTextarea.tsx.preview             |     6 -
 .../empty-textarea}/EmptyTextarea.tsx         |     2 +
 .../demos/empty-textarea/index.ts             |     5 +
 .../MaxHeightTextarea.tsx                     |     2 +
 .../demos/max-height-textarea/index.ts        |     5 +
 .../MinHeightTextarea.tsx                     |     2 +
 .../demos/min-height-textarea/index.ts        |     5 +
 .../textarea-autosize/textarea-autosize.md    |     6 +-
 .../timeline/AlternateReverseTimeline.js      |    40 -
 .../components/timeline/AlternateTimeline.js  |    40 -
 .../components/timeline/BasicTimeline.js      |    33 -
 .../components/timeline/ColorsTimeline.js     |    26 -
 .../timeline/ColorsTimeline.tsx.preview       |    15 -
 .../components/timeline/CustomizedTimeline.js |    98 -
 .../timeline/LeftAlignedTimeline.js           |    41 -
 .../timeline/LeftPositionedTimeline.js        |    40 -
 .../components/timeline/NoOppositeContent.js  |    33 -
 .../timeline/OppositeContentTimeline.js       |    70 -
 .../components/timeline/OutlinedTimeline.js   |    40 -
 .../timeline/RightAlignedTimeline.js          |    39 -
 .../AlternateReverseTimeline.tsx              |     2 +
 .../timeline/demos/alternate-reverse/index.ts |     5 +
 .../alternate}/AlternateTimeline.tsx          |     2 +
 .../timeline/demos/alternate/index.ts         |     5 +
 .../{ => demos/basic}/BasicTimeline.tsx       |     2 +
 .../components/timeline/demos/basic/index.ts  |     5 +
 .../{ => demos/colors}/ColorsTimeline.tsx     |     2 +
 .../components/timeline/demos/colors/index.ts |     5 +
 .../customized}/CustomizedTimeline.tsx        |     2 +
 .../timeline/demos/customized/index.ts        |     5 +
 .../left-aligned}/LeftAlignedTimeline.tsx     |     2 +
 .../timeline/demos/left-aligned/index.ts      |     5 +
 .../LeftPositionedTimeline.tsx                |     2 +
 .../timeline/demos/left-positioned/index.ts   |     5 +
 .../NoOppositeContent.tsx                     |     2 +
 .../demos/no-opposite-content/index.ts        |     5 +
 .../OppositeContentTimeline.tsx               |     2 +
 .../timeline/demos/opposite-content/index.ts  |     5 +
 .../{ => demos/outlined}/OutlinedTimeline.tsx |     2 +
 .../timeline/demos/outlined/index.ts          |     5 +
 .../right-aligned}/RightAlignedTimeline.tsx   |     2 +
 .../timeline/demos/right-aligned/index.ts     |     5 +
 .../material/components/timeline/timeline.md  |    22 +-
 .../toggle-button/ColorToggleButton.js        |    25 -
 .../ColorToggleButton.tsx.preview             |    11 -
 .../toggle-button/CustomizedDividers.js       |   101 -
 .../HorizontalSpacingToggleButton.js          |    59 -
 .../toggle-button/StandaloneToggleButton.js   |    17 -
 .../StandaloneToggleButton.tsx.preview        |     7 -
 .../toggle-button/ToggleButtonNotEmpty.js     |    64 -
 .../toggle-button/ToggleButtonSizes.js        |    51 -
 .../ToggleButtonSizes.tsx.preview             |     9 -
 .../components/toggle-button/ToggleButtons.js |    37 -
 .../toggle-button/ToggleButtonsMultiple.js    |    38 -
 .../VerticalSpacingToggleButton.js            |    60 -
 .../toggle-button/VerticalToggleButtons.js    |    33 -
 .../VerticalToggleButtons.tsx.preview         |    16 -
 .../{ => demos/color}/ColorToggleButton.tsx   |     2 +
 .../toggle-button/demos/color/index.ts        |     5 +
 .../CustomizedDividers.tsx                    |     2 +
 .../demos/customized-dividers/index.ts        |     5 +
 .../HorizontalSpacingToggleButton.tsx         |     2 +
 .../demos/horizontal-spacing/index.ts         |     5 +
 .../multiple}/ToggleButtonsMultiple.tsx       |     2 +
 .../toggle-button/demos/multiple/index.ts     |     5 +
 .../not-empty}/ToggleButtonNotEmpty.tsx       |     2 +
 .../toggle-button/demos/not-empty/index.ts    |     5 +
 .../{ => demos/sizes}/ToggleButtonSizes.tsx   |     2 +
 .../toggle-button/demos/sizes/index.ts        |     5 +
 .../standalone}/StandaloneToggleButton.tsx    |     2 +
 .../toggle-button/demos/standalone/index.ts   |     5 +
 .../toggle-buttons}/ToggleButtons.tsx         |     2 +
 .../demos/toggle-buttons/index.ts             |     5 +
 .../VerticalSpacingToggleButton.tsx           |     2 +
 .../demos/vertical-spacing/index.ts           |     5 +
 .../vertical}/VerticalToggleButtons.tsx       |     2 +
 .../toggle-button/demos/vertical/index.ts     |     5 +
 .../components/toggle-button/toggle-button.md |    20 +-
 .../tooltips/AccessibilityTooltips.js         |    19 -
 .../AccessibilityTooltips.tsx.preview         |     8 -
 .../components/tooltips/AnchorElTooltips.js   |    52 -
 .../components/tooltips/ArrowTooltips.js      |    10 -
 .../tooltips/ArrowTooltips.tsx.preview        |     3 -
 .../components/tooltips/BasicTooltip.js       |    13 -
 .../tooltips/BasicTooltip.tsx.preview         |     5 -
 .../components/tooltips/ControlledTooltips.js |    27 -
 .../tooltips/ControlledTooltips.tsx.preview   |     9 -
 .../components/tooltips/CustomizedTooltips.js |    69 -
 .../components/tooltips/DelayTooltips.js      |    10 -
 .../tooltips/DelayTooltips.tsx.preview        |     3 -
 .../components/tooltips/DisabledTooltips.js   |    12 -
 .../tooltips/DisabledTooltips.tsx.preview     |     5 -
 .../tooltips/FollowCursorTooltips.js          |    12 -
 .../tooltips/FollowCursorTooltips.tsx.preview |     5 -
 .../tooltips/NonInteractiveTooltips.js        |    10 -
 .../NonInteractiveTooltips.tsx.preview        |     3 -
 .../components/tooltips/PositionedTooltips.js |    57 -
 .../components/tooltips/TooltipMargin.js      |    35 -
 .../components/tooltips/TooltipOffset.js      |    25 -
 .../tooltips/TransitionsTooltips.js           |    35 -
 .../components/tooltips/TriggersTooltips.js   |    66 -
 .../components/tooltips/VariableWidth.js      |    41 -
 .../tooltips/VariableWidth.tsx.preview        |     9 -
 .../accessibility}/AccessibilityTooltips.tsx  |     2 +
 .../tooltips/demos/accessibility/index.ts     |     5 +
 .../anchor-el}/AnchorElTooltips.tsx           |     2 +
 .../tooltips/demos/anchor-el/index.ts         |     5 +
 .../{ => demos/arrow}/ArrowTooltips.tsx       |     2 +
 .../components/tooltips/demos/arrow/index.ts  |     5 +
 .../{ => demos/basic}/BasicTooltip.tsx        |     2 +
 .../components/tooltips/demos/basic/index.ts  |     5 +
 .../controlled}/ControlledTooltips.tsx        |     2 +
 .../tooltips/demos/controlled/index.ts        |     5 +
 .../customized}/CustomizedTooltips.tsx        |     2 +
 .../tooltips/demos/customized/index.ts        |     5 +
 .../{ => demos/delay}/DelayTooltips.tsx       |     2 +
 .../components/tooltips/demos/delay/index.ts  |     5 +
 .../{ => demos/disabled}/DisabledTooltips.tsx |     2 +
 .../tooltips/demos/disabled/index.ts          |     5 +
 .../follow-cursor}/FollowCursorTooltips.tsx   |     2 +
 .../tooltips/demos/follow-cursor/index.ts     |     5 +
 .../{ => demos/margin}/TooltipMargin.tsx      |     2 +
 .../components/tooltips/demos/margin/index.ts |     5 +
 .../NonInteractiveTooltips.tsx                |     2 +
 .../tooltips/demos/non-interactive/index.ts   |     5 +
 .../{ => demos/offset}/TooltipOffset.tsx      |     2 +
 .../components/tooltips/demos/offset/index.ts |     5 +
 .../positioned}/PositionedTooltips.tsx        |     2 +
 .../tooltips/demos/positioned/index.ts        |     5 +
 .../transitions}/TransitionsTooltips.tsx      |     2 +
 .../tooltips/demos/transitions/index.ts       |     5 +
 .../{ => demos/triggers}/TriggersTooltips.tsx |     2 +
 .../tooltips/demos/triggers/index.ts          |     5 +
 .../variable-width}/VariableWidth.tsx         |     2 +
 .../tooltips/demos/variable-width/index.ts    |     5 +
 .../material/components/tooltips/tooltips.md  |    32 +-
 .../transfer-list/SelectAllTransferList.js    |   160 -
 .../components/transfer-list/TransferList.js  |   145 -
 .../select-all}/SelectAllTransferList.tsx     |     2 +
 .../transfer-list/demos/select-all/index.ts   |     5 +
 .../transfer-list}/TransferList.tsx           |     2 +
 .../demos/transfer-list/index.ts              |     5 +
 .../components/transfer-list/transfer-list.md |     4 +-
 .../components/transitions/SimpleCollapse.js  |    68 -
 .../components/transitions/SimpleFade.js      |    42 -
 .../transitions/SimpleFade.tsx.preview        |     7 -
 .../components/transitions/SimpleGrow.js      |    50 -
 .../transitions/SimpleGrow.tsx.preview        |    15 -
 .../components/transitions/SimpleSlide.js     |    42 -
 .../transitions/SimpleSlide.tsx.preview       |     7 -
 .../components/transitions/SimpleZoom.js      |    45 -
 .../transitions/SimpleZoom.tsx.preview        |    10 -
 .../transitions/SlideFromContainer.js         |    53 -
 .../SlideFromContainer.tsx.preview            |     9 -
 .../transitions/TransitionGroupExample.js     |    74 -
 .../TransitionGroupExample.tsx.preview        |     8 -
 .../group-example}/TransitionGroupExample.tsx |     2 +
 .../transitions/demos/group-example/index.ts  |     5 +
 .../simple-collapse}/SimpleCollapse.tsx       |     2 +
 .../demos/simple-collapse/index.ts            |     5 +
 .../{ => demos/simple-fade}/SimpleFade.tsx    |     2 +
 .../transitions/demos/simple-fade/index.ts    |     5 +
 .../{ => demos/simple-grow}/SimpleGrow.tsx    |     2 +
 .../transitions/demos/simple-grow/index.ts    |     5 +
 .../{ => demos/simple-slide}/SimpleSlide.tsx  |     2 +
 .../transitions/demos/simple-slide/index.ts   |     5 +
 .../{ => demos/simple-zoom}/SimpleZoom.tsx    |     2 +
 .../transitions/demos/simple-zoom/index.ts    |     5 +
 .../SlideFromContainer.tsx                    |     2 +
 .../demos/slide-from-container/index.ts       |     5 +
 .../components/transitions/transitions.md     |    14 +-
 .../material/components/typography/Types.js   |    56 -
 .../components/typography/TypographyTheme.js  |    11 -
 .../typography/TypographyTheme.tsx.preview    |     1 -
 .../{ => demos/theme}/TypographyTheme.tsx     |     5 +-
 .../typography/demos/theme/index.ts           |     5 +
 .../typography/{ => demos/types}/Types.tsx    |     2 +
 .../typography/demos/types/index.ts           |     5 +
 .../components/typography/typography.md       |     4 +-
 .../use-media-query/JavaScriptMedia.js        |    12 -
 .../JavaScriptMedia.tsx.preview               |     1 -
 .../components/use-media-query/ServerSide.js  |    33 -
 .../use-media-query/ServerSide.tsx.preview    |    12 -
 .../use-media-query/SimpleMediaQuery.js       |     7 -
 .../SimpleMediaQuery.tsx.preview              |     1 -
 .../components/use-media-query/ThemeHelper.js |    19 -
 .../use-media-query/ThemeHelper.tsx.preview   |     3 -
 .../components/use-media-query/UseWidth.js    |    35 -
 .../use-media-query/UseWidth.tsx.preview      |     3 -
 .../java-script-media}/JavaScriptMedia.tsx    |     2 +
 .../demos/java-script-media/index.ts          |     5 +
 .../{ => demos/server-side}/ServerSide.tsx    |     2 +
 .../demos/server-side/index.ts                |     5 +
 .../simple-media-query}/SimpleMediaQuery.tsx  |     2 +
 .../demos/simple-media-query/index.ts         |     5 +
 .../{ => demos/theme-helper}/ThemeHelper.tsx  |     2 +
 .../demos/theme-helper/index.ts               |     5 +
 .../{ => demos/use-width}/UseWidth.tsx        |     2 +
 .../use-media-query/demos/use-width/index.ts  |     5 +
 .../use-media-query/use-media-query.md        |    10 +-
 .../customization/breakpoints/MediaQuery.js   |    26 -
 .../breakpoints/MediaQuery.tsx.preview        |     5 -
 .../customization/breakpoints/breakpoints.md  |     2 +-
 .../{ => demos/media-query}/MediaQuery.tsx    |     2 +
 .../breakpoints/demos/media-query/index.ts    |     5 +
 .../material/customization/color/color.md     |     4 +-
 .../color/{ => demos/color}/Color.js          |     0
 .../customization/color/demos/color/index.ts  |     5 +
 .../color/{ => demos/tool}/ColorDemo.js       |     0
 .../color/{ => demos/tool}/ColorTool.js       |     2 +-
 .../customization/color/demos/tool/index.ts   |     5 +
 .../BasicContainerQueries.js                  |    91 -
 .../SxPropContainerQueries.js                 |    91 -
 .../container-queries/container-queries.md    |     4 +-
 .../{ => demos}/ResizableDemo.js              |     0
 .../basic}/BasicContainerQueries.tsx          |     4 +-
 .../container-queries/demos/basic/index.ts    |     5 +
 .../sx-prop}/SxPropContainerQueries.tsx       |     4 +-
 .../container-queries/demos/sx-prop/index.ts  |     5 +
 .../StatFullTemplate.js                       |    80 -
 .../StatFullTemplate.tsx.preview              |     2 -
 .../creating-themed-components.md             |     6 +-
 .../stat-component}/StatComponent.js          |     0
 .../demos/stat-component/index.ts             |     5 +
 .../stat-full-template}/StatFullTemplate.tsx  |     2 +
 .../demos/stat-full-template/index.ts         |     5 +
 .../{ => demos/stat-slots}/StatSlots.js       |     0
 .../demos/stat-slots/index.ts                 |     5 +
 .../css-layers/CssLayersCaveat.js             |    84 -
 .../css-layers/CssLayersInput.js              |    43 -
 .../customization/css-layers/css-layers.md    |     4 +-
 .../{ => demos/caveat}/CssLayersCaveat.tsx    |     2 +
 .../css-layers/demos/caveat/index.ts          |     5 +
 .../{ => demos/input}/CssLayersInput.tsx      |     2 +
 .../css-layers/demos/input/index.ts           |     5 +
 .../AliasColorVariables.js                    |    37 -
 .../AliasColorVariables.tsx.preview           |    15 -
 .../css-theme-variables/ContrastTextDemo.js   |   122 -
 .../css-theme-variables/CustomColorSpace.js   |    43 -
 .../css-theme-variables/CustomColorSpace.tsx  |    43 -
 .../DisableTransitionOnChange.js              |    69 -
 .../css-theme-variables/ModernColorSpaces.js  |    64 -
 .../css-theme-variables/NativeCssColors.js    |    40 -
 .../ThemeColorFunctions.js                    |   142 -
 .../css-theme-variables/configuration.md      |     2 +-
 .../AliasColorVariables.tsx                   |     2 +
 .../demos/alias-color-variables/index.ts      |     5 +
 .../contrast-text-demo}/ContrastTextDemo.tsx  |     2 +
 .../demos/contrast-text-demo/index.ts         |     5 +
 .../DisableTransitionOnChange.tsx             |     2 +
 .../disable-transition-on-change/index.ts     |     5 +
 .../ModernColorSpaces.tsx                     |     2 +
 .../demos/modern-color-spaces/index.ts        |     5 +
 .../native-css-colors}/NativeCssColors.tsx    |     2 +
 .../demos/native-css-colors/index.ts          |     5 +
 .../ThemeColorFunctions.tsx                   |     2 +
 .../demos/theme-color-functions/index.ts      |     5 +
 .../css-theme-variables/native-color.md       |    10 +-
 .../dark-mode/DarkThemeWithCustomPalette.js   |    62 -
 .../dark-mode/DarkThemeWithCustomPalette.tsx  |    67 -
 .../DarkThemeWithCustomPalette.tsx.preview    |     3 -
 .../dark-mode/ToggleColorMode.js              |    58 -
 .../dark-mode/ToggleColorMode.tsx.preview     |     3 -
 .../customization/dark-mode/dark-mode.md      |     4 +-
 .../{ => demos/dark-theme}/DarkTheme.js       |     0
 .../dark-mode/demos/dark-theme/index.ts       |     5 +
 .../toggle-color-mode}/ToggleColorMode.tsx    |     2 +
 .../demos/toggle-color-mode/index.ts          |     5 +
 .../default-theme/default-theme.md            |     2 +-
 .../{ => demos/default-theme}/DefaultTheme.js |     0
 .../demos/default-theme/index.ts              |     5 +
 .../density/{ => demos/tool}/DensityTool.js   |     0
 .../customization/density/demos/tool/index.ts |     5 +
 .../material/customization/density/density.md |     2 +-
 .../how-to-customize/DevTools.js              |    16 -
 .../how-to-customize/DevTools.tsx.preview     |    10 -
 .../how-to-customize/DynamicCSS.js            |    52 -
 .../how-to-customize/DynamicCSS.tsx.preview   |    14 -
 .../how-to-customize/DynamicCSSVariables.js   |    53 -
 .../DynamicCSSVariables.tsx.preview           |    14 -
 .../how-to-customize/GlobalCssOverride.js     |    11 -
 .../GlobalCssOverride.tsx.preview             |     4 -
 .../GlobalCssOverrideTheme.js                 |    15 -
 .../GlobalCssOverrideTheme.tsx.preview        |     8 -
 .../OverrideCallbackCssBaseline.js            |    28 -
 .../OverrideCallbackCssBaseline.tsx.preview   |     4 -
 .../how-to-customize/OverrideCssBaseline.js   |    23 -
 .../OverrideCssBaseline.tsx.preview           |     4 -
 .../how-to-customize/StyledCustomization.js   |    19 -
 .../StyledCustomization.tsx.preview           |     1 -
 .../customization/how-to-customize/SxProp.js  |     5 -
 .../customization/how-to-customize/SxProp.tsx |     5 -
 .../how-to-customize/SxProp.tsx.preview       |     1 -
 .../{ => demos/dev-tools}/DevTools.tsx        |     2 +
 .../how-to-customize/demos/dev-tools/index.ts |     5 +
 .../DynamicCSSVariables.tsx                   |     2 +
 .../demos/dynamic-css-variables/index.ts      |     5 +
 .../{ => demos/dynamic-css}/DynamicCSS.tsx    |     2 +
 .../demos/dynamic-css/index.ts                |     5 +
 .../GlobalCssOverrideTheme.tsx                |     2 +
 .../demos/global-css-override-theme/index.ts  |     5 +
 .../GlobalCssOverride.tsx                     |     2 +
 .../demos/global-css-override/index.ts        |     5 +
 .../OverrideCallbackCssBaseline.tsx           |     2 +
 .../override-callback-css-baseline/index.ts   |     5 +
 .../OverrideCssBaseline.tsx                   |     2 +
 .../demos/override-css-baseline/index.ts      |     5 +
 .../StyledCustomization.tsx                   |     5 +-
 .../demos/styled-customization/index.ts       |     5 +
 .../how-to-customize/demos/sx-prop/SxProp.tsx |     8 +
 .../how-to-customize/demos/sx-prop/index.ts   |     5 +
 .../how-to-customize/how-to-customize.md      |    18 +-
 .../OverridingInternalSlot.js                 |    32 -
 .../OverridingInternalSlot.tsx.preview        |     8 -
 .../OverridingRootSlot.js                     |    14 -
 .../OverridingRootSlot.tsx.preview            |     8 -
 .../OverridingInternalSlot.tsx                |     2 +
 .../demos/overriding-internal-slot/index.ts   |     5 +
 .../OverridingRootSlot.tsx                    |     2 +
 .../demos/overriding-root-slot/index.ts       |     5 +
 .../overriding-component-structure.md         |     4 +-
 .../palette/AddingColorTokens.js              |    41 -
 .../palette/ContrastThreshold.js              |    48 -
 .../palette/ContrastThreshold.tsx.preview     |     6 -
 .../customization/palette/CustomColor.js      |    23 -
 .../customization/palette/CustomColor.tsx     |    41 -
 .../palette/CustomColor.tsx.preview           |     5 -
 .../palette/ManuallyProvideCustomColor.js     |    46 -
 .../palette/ManuallyProvidePaletteColor.js    |    63 -
 .../ManuallyProvidePaletteColor.tsx.preview   |     6 -
 .../material/customization/palette/Palette.js |    25 -
 .../customization/palette/Palette.tsx         |    25 -
 .../customization/palette/Palette.tsx.preview |     4 -
 .../palette/ToggleColorMode.tsx.preview       |     5 -
 .../customization/palette/TonalOffset.js      |    92 -
 .../palette/TonalOffset.tsx.preview           |     9 -
 .../palette/UsingAugmentColor.js              |    51 -
 .../customization/palette/UsingColorObject.js |    21 -
 .../palette/UsingColorObject.tsx.preview      |     6 -
 .../customization/palette/UsingStylesUtils.js |    54 -
 .../AddingColorTokens.tsx                     |     2 +
 .../demos/adding-color-tokens/index.ts        |     5 +
 .../contrast-threshold}/ContrastThreshold.tsx |     2 +
 .../palette/demos/contrast-threshold/index.ts |     5 +
 .../{ => demos/intentions}/Intentions.js      |     0
 .../palette/demos/intentions/index.ts         |     5 +
 .../ManuallyProvidePaletteColor.tsx           |     2 +
 .../demos/manually-provide-color/index.ts     |     5 +
 .../ManuallyProvideCustomColor.tsx            |     2 +
 .../manually-provide-custom-color/index.ts    |     5 +
 .../{ => demos/tonal-offset}/TonalOffset.tsx  |     2 +
 .../palette/demos/tonal-offset/index.ts       |     5 +
 .../UsingAugmentColor.tsx                     |     2 +
 .../demos/using-augment-color/index.ts        |     5 +
 .../using-color-object}/UsingColorObject.tsx  |     2 +
 .../palette/demos/using-color-object/index.ts |     5 +
 .../using-styles-utils}/UsingStylesUtils.tsx  |     2 +
 .../palette/demos/using-styles-utils/index.ts |     5 +
 .../material/customization/palette/palette.md |    18 +-
 .../customization/right-to-left/RtlDemo.js    |    39 -
 .../right-to-left/RtlDemo.tsx.preview         |    12 -
 .../customization/right-to-left/RtlOptOut.js  |    50 -
 .../right-to-left/RtlOptOut.tsx.preview       |    10 -
 .../{ => demos/rtl-demo}/RtlDemo.tsx          |     2 +
 .../right-to-left/demos/rtl-demo/index.ts     |     5 +
 .../{ => demos/rtl-opt-out}/RtlOptOut.tsx     |     2 +
 .../right-to-left/demos/rtl-opt-out/index.ts  |     5 +
 .../right-to-left/right-to-left.md            |     4 +-
 .../demo-no-snap}/ShadowDOMDemoNoSnap.js      |     0
 .../shadow-dom/demos/demo-no-snap/index.ts    |     5 +
 .../customization/shadow-dom/shadow-dom.md    |     2 +-
 .../theme-components/DefaultProps.js          |    22 -
 .../theme-components/DefaultProps.tsx.preview |     3 -
 .../theme-components/GlobalCss.js             |    38 -
 .../theme-components/GlobalCss.tsx            |    38 -
 .../theme-components/GlobalCss.tsx.preview    |     3 -
 .../theme-components/GlobalThemeOverride.js   |    22 -
 .../GlobalThemeOverride.tsx.preview           |     3 -
 .../theme-components/GlobalThemeOverrideSx.js |    44 -
 .../GlobalThemeOverrideSx.tsx.preview         |    11 -
 .../theme-components/GlobalThemeVariants.js   |    61 -
 .../GlobalThemeVariants.tsx.preview           |    14 -
 .../theme-components/ThemeVariables.js        |    18 -
 .../ThemeVariables.tsx.preview                |     3 -
 .../default-props}/DefaultProps.tsx           |     2 +
 .../demos/default-props/index.ts              |     5 +
 .../GlobalThemeOverrideSx.tsx                 |     2 +
 .../demos/global-theme-override-sx/index.ts   |     5 +
 .../GlobalThemeOverride.tsx                   |     2 +
 .../demos/global-theme-override/index.ts      |     5 +
 .../GlobalThemeVariants.tsx                   |     2 +
 .../demos/global-theme-variants/index.ts      |     5 +
 .../theme-variables}/ThemeVariables.tsx       |     2 +
 .../demos/theme-variables/index.ts            |     5 +
 .../theme-components/theme-components.md      |    10 +-
 .../customization/theming/CustomStyles.js     |    24 -
 .../theming/CustomStyles.tsx.preview          |     3 -
 .../customization/theming/ThemeNesting.js     |    30 -
 .../theming/ThemeNesting.tsx.preview          |     6 -
 .../theming/ThemeNestingExtend.js             |    35 -
 .../custom-styles}/CustomStyles.tsx           |     2 +
 .../theming/demos/custom-styles/index.ts      |     5 +
 .../ThemeNestingExtend.tsx                    |     2 +
 .../demos/theme-nesting-extend/index.ts       |     5 +
 .../theme-nesting}/ThemeNesting.tsx           |     2 +
 .../theming/demos/theme-nesting/index.ts      |     5 +
 .../material/customization/theming/theming.md |     6 +-
 .../transitions/TransitionHover.js            |    33 -
 .../transitions/TransitionHover.tsx.preview   |     3 -
 .../{ => demos/hover}/TransitionHover.tsx     |     2 +
 .../transitions/demos/hover/index.ts          |     5 +
 .../customization/transitions/transitions.md  |     2 +-
 .../typography/CustomResponsiveFontSizes.js   |    22 -
 .../CustomResponsiveFontSizes.tsx.preview     |     3 -
 .../customization/typography/FontSizeTheme.js |    17 -
 .../typography/FontSizeTheme.tsx.preview      |     3 -
 .../typography/ResponsiveFontSizes.js         |    21 -
 .../ResponsiveFontSizes.tsx.preview           |     5 -
 .../typography/TypographyCustomVariant.js     |    35 -
 .../TypographyCustomVariant.tsx.preview       |     7 -
 .../typography/TypographyVariants.js          |    29 -
 .../typography/TypographyVariants.tsx.preview |     5 -
 .../CustomResponsiveFontSizes.tsx             |     2 +
 .../custom-responsive-font-sizes/index.ts     |     5 +
 .../TypographyCustomVariant.tsx               |     2 +
 .../typography/demos/custom-variant/index.ts  |     5 +
 .../font-size-theme}/FontSizeTheme.tsx        |     2 +
 .../typography/demos/font-size-theme/index.ts |     5 +
 .../ResponsiveFontSizesChart.js               |     0
 .../responsive-font-sizes-chart/index.ts      |     5 +
 .../ResponsiveFontSizes.tsx                   |     2 +
 .../demos/responsive-font-sizes/index.ts      |     5 +
 .../variants}/TypographyVariants.tsx          |     2 +
 .../typography/demos/variants/index.ts        |     5 +
 .../customization/typography/typography.md    |    12 +-
 .../material/getting-started/learn/learn.md   |     2 +-
 .../MaterialUIComponents.js                   |     0
 .../demos/material-ui-components/index.ts     |     5 +
 .../supported-components.md                   |     2 +-
 .../getting-started/usage/ButtonUsage.js      |     5 -
 .../usage/ButtonUsage.tsx.preview             |     1 -
 .../usage/{ => demos/button}/ButtonUsage.tsx  |     5 +-
 .../usage/demos/button/index.ts               |     5 +
 .../material/getting-started/usage/usage.md   |     2 +-
 .../{ => demos/latest}/LatestVersions.js      |     0
 .../versions/demos/latest/index.ts            |     5 +
 .../{ => demos/released}/ReleasedVersions.js  |     0
 .../versions/demos/released/index.ts          |     5 +
 .../getting-started/versions/versions.md      |     4 +-
 .../ExtensibleThemes.js                       |   161 -
 .../ExtensibleThemes.tsx.preview              |     5 -
 .../building-extensible-themes.md             |     2 +-
 .../extensible-themes}/ExtensibleThemes.tsx   |     2 +
 .../demos/extensible-themes/index.ts          |     5 +
 .../guides/composition/Composition.js         |    21 -
 .../composition/Composition.tsx.preview       |     6 -
 .../guides/composition/composition.md         |     2 +-
 .../{ => demos/composition}/Composition.tsx   |     2 +
 .../composition/demos/composition/index.ts    |     5 +
 .../material/guides/localization/Locales.js   |    45 -
 .../{ => demos/locales}/Locales.tsx           |     2 +
 .../localization/demos/locales/index.ts       |     5 +
 .../guides/localization/localization.md       |     2 +-
 .../interoperability/EmotionCSS.js            |    22 -
 .../interoperability/EmotionCSS.tsx.preview   |    11 -
 .../interoperability/StyledComponents.js      |    20 -
 .../StyledComponents.tsx.preview              |     2 -
 .../interoperability/StyledComponentsDeep.js  |    24 -
 .../StyledComponentsDeep.tsx.preview          |     2 -
 .../StyledComponentsPortal.js                 |    21 -
 .../StyledComponentsPortal.tsx.preview        |     5 -
 .../interoperability/StyledComponentsTheme.js |    31 -
 .../StyledComponentsTheme.tsx.preview         |     3 -
 .../{ => demos/emotion-css}/EmotionCSS.tsx    |     2 +
 .../demos/emotion-css/index.ts                |     5 +
 .../StyledComponentsDeep.tsx                  |     2 +
 .../demos/styled-components-deep/index.ts     |     5 +
 .../StyledComponentsPortal.tsx                |     2 +
 .../demos/styled-components-portal/index.ts   |     5 +
 .../StyledComponentsTheme.tsx                 |     2 +
 .../demos/styled-components-theme/index.ts    |     5 +
 .../styled-components}/StyledComponents.tsx   |     2 +
 .../demos/styled-components/index.ts          |     5 +
 .../interoperability/interoperability.md      |    22 +-
 .../integrations/routing/ButtonDemo.js        |     9 -
 .../routing/ButtonDemo.tsx.preview            |     3 -
 .../integrations/routing/ButtonRouter.js      |    35 -
 .../routing/ButtonRouter.tsx.preview          |     7 -
 .../material/integrations/routing/LinkDemo.js |    10 -
 .../integrations/routing/LinkDemo.tsx.preview |     1 -
 .../integrations/routing/LinkRouter.js        |    36 -
 .../routing/LinkRouter.tsx.preview            |     7 -
 .../routing/LinkRouterWithTheme.js            |    67 -
 .../routing/LinkRouterWithTheme.tsx.preview   |     8 -
 .../integrations/routing/ListRouter.js        |    96 -
 .../integrations/routing/TabsRouter.js        |    86 -
 .../routing/TabsRouter.tsx.preview            |     8 -
 .../{ => demos/button-demo}/ButtonDemo.tsx    |     2 +
 .../routing/demos/button-demo/index.ts        |     5 +
 .../button-router}/ButtonRouter.tsx           |     2 +
 .../routing/demos/button-router/index.ts      |     5 +
 .../{ => demos/link-demo}/LinkDemo.tsx        |     2 +
 .../routing/demos/link-demo/index.ts          |     5 +
 .../LinkRouterWithTheme.tsx                   |     2 +
 .../demos/link-router-with-theme/index.ts     |     5 +
 .../{ => demos/link-router}/LinkRouter.tsx    |     2 +
 .../routing/demos/link-router/index.ts        |     5 +
 .../{ => demos/list-router}/ListRouter.tsx    |     2 +
 .../routing/demos/list-router/index.ts        |     5 +
 .../{ => demos/tabs-router}/TabsRouter.tsx    |     2 +
 .../routing/demos/tabs-router/index.ts        |     5 +
 .../material/integrations/routing/routing.md  |    14 +-
 .../tailwindcss/TextFieldTailwind.js          |    33 -
 .../TextFieldTailwind.tsx                     |     2 +
 .../demos/text-field-tailwind/index.ts        |     5 +
 .../tailwindcss/tailwindcss-v4.md             |     2 +-
 docs/data/system/borders/BorderAdditive.js    |    21 -
 .../system/borders/BorderAdditive.tsx.preview |     5 -
 docs/data/system/borders/BorderColor.js       |    21 -
 .../system/borders/BorderColor.tsx.preview    |     5 -
 docs/data/system/borders/BorderRadius.js      |    20 -
 .../system/borders/BorderRadius.tsx.preview   |     3 -
 docs/data/system/borders/BorderSubtractive.js |    22 -
 .../borders/BorderSubtractive.tsx.preview     |     5 -
 docs/data/system/borders/borders.md           |     8 +-
 .../{ => demos/additive}/BorderAdditive.tsx   |     2 +
 .../system/borders/demos/additive/index.ts    |     5 +
 .../borders/{ => demos/color}/BorderColor.tsx |     2 +
 docs/data/system/borders/demos/color/index.ts |     5 +
 .../{ => demos/radius}/BorderRadius.tsx       |     2 +
 .../data/system/borders/demos/radius/index.ts |     5 +
 .../subtractive}/BorderSubtractive.tsx        |     2 +
 .../system/borders/demos/subtractive/index.ts |     5 +
 docs/data/system/components/box/BoxBasic.js   |     9 -
 .../components/box/BoxBasic.tsx.preview       |     2 -
 docs/data/system/components/box/BoxSx.js      |    28 -
 .../system/components/box/BoxSystemProps.js   |    20 -
 .../components/box/BoxSystemProps.tsx.preview |     2 -
 docs/data/system/components/box/box.md        |     6 +-
 .../box/{ => demos/basic}/BoxBasic.tsx        |     2 +
 .../components/box/demos/basic/index.ts       |     5 +
 .../components/box/{ => demos/sx}/BoxSx.tsx   |     2 +
 .../system/components/box/demos/sx/index.ts   |     5 +
 .../system-props}/BoxSystemProps.tsx          |     2 +
 .../box/demos/system-props/index.ts           |     5 +
 .../components/container/FixedContainer.js    |    14 -
 .../container/FixedContainer.tsx.preview      |     6 -
 .../components/container/SimpleContainer.js   |    14 -
 .../container/SimpleContainer.tsx.preview     |     6 -
 .../system/components/container/container.md  |     4 +-
 .../{ => demos/fixed}/FixedContainer.tsx      |     2 +
 .../components/container/demos/fixed/index.ts |     5 +
 .../{ => demos/simple}/SimpleContainer.tsx    |     2 +
 .../container/demos/simple/index.ts           |     5 +
 docs/data/system/components/grid/AutoGrid.js  |    34 -
 .../components/grid/AutoGrid.tsx.preview      |    11 -
 .../system/components/grid/AutoGridNoWrap.js  |    53 -
 .../system/components/grid/AutoGridNoWrap.tsx |    53 -
 docs/data/system/components/grid/BasicGrid.js |    37 -
 .../components/grid/BasicGrid.tsx.preview     |    14 -
 .../system/components/grid/ColumnsGrid.js     |    31 -
 .../components/grid/ColumnsGrid.tsx.preview   |     8 -
 .../system/components/grid/FullWidthGrid.js   |    37 -
 .../components/grid/FullWidthGrid.tsx.preview |    14 -
 .../data/system/components/grid/NestedGrid.js |   111 -
 .../data/system/components/grid/OffsetGrid.js |    34 -
 .../components/grid/OffsetGrid.tsx.preview    |    14 -
 .../system/components/grid/ResponsiveGrid.js  |    30 -
 .../grid/ResponsiveGrid.tsx.preview           |     7 -
 .../components/grid/RowAndColumnSpacing.js    |    37 -
 .../grid/RowAndColumnSpacing.tsx.preview      |    14 -
 .../system/components/grid/SpacingGrid.js     |    72 -
 .../components/grid/VariableWidthGrid.js      |    34 -
 .../grid/VariableWidthGrid.tsx.preview        |    11 -
 .../grid/{ => demos/auto}/AutoGrid.tsx        |     2 +
 .../components/grid/demos/auto/index.ts       |     5 +
 .../grid/{ => demos/basic}/BasicGrid.tsx      |     2 +
 .../components/grid/demos/basic/index.ts      |     5 +
 .../grid/{ => demos/columns}/ColumnsGrid.tsx  |     2 +
 .../components/grid/demos/columns/index.ts    |     5 +
 .../CustomBreakpointsGrid.js                  |     0
 .../grid/demos/custom-breakpoints/index.ts    |     5 +
 .../{ => demos/full-width}/FullWidthGrid.tsx  |     2 +
 .../components/grid/demos/full-width/index.ts |     5 +
 .../grid/{ => demos/nested}/NestedGrid.tsx    |     2 +
 .../components/grid/demos/nested/index.ts     |     5 +
 .../grid/{ => demos/offset}/OffsetGrid.tsx    |     2 +
 .../components/grid/demos/offset/index.ts     |     5 +
 .../{ => demos/responsive}/ResponsiveGrid.tsx |     2 +
 .../components/grid/demos/responsive/index.ts |     5 +
 .../RowAndColumnSpacing.tsx                   |     2 +
 .../demos/row-and-column-spacing/index.ts     |     5 +
 .../grid/{ => demos/spacing}/SpacingGrid.tsx  |     2 +
 .../components/grid/demos/spacing/index.ts    |     5 +
 .../variable-width}/VariableWidthGrid.tsx     |     2 +
 .../grid/demos/variable-width/index.ts        |     5 +
 docs/data/system/components/grid/grid.md      |    22 +-
 .../system/components/stack/BasicStack.js     |    25 -
 .../components/stack/BasicStack.tsx.preview   |     5 -
 .../system/components/stack/DirectionStack.js |    24 -
 .../stack/DirectionStack.tsx.preview          |     5 -
 .../system/components/stack/DividerStack.js   |    39 -
 .../components/stack/FlexboxGapStack.js       |    31 -
 .../stack/FlexboxGapStack.tsx.preview         |    10 -
 .../components/stack/InteractiveStack.js      |   199 -
 .../components/stack/ResponsiveStack.js       |    27 -
 .../stack/ResponsiveStack.tsx.preview         |     8 -
 .../stack/{ => demos/basic}/BasicStack.tsx    |     2 +
 .../components/stack/demos/basic/index.ts     |     5 +
 .../{ => demos/direction}/DirectionStack.tsx  |     2 +
 .../components/stack/demos/direction/index.ts |     5 +
 .../{ => demos/divider}/DividerStack.tsx      |     2 +
 .../components/stack/demos/divider/index.ts   |     5 +
 .../flexbox-gap}/FlexboxGapStack.tsx          |     2 +
 .../stack/demos/flexbox-gap/index.ts          |     5 +
 .../interactive}/InteractiveStack.tsx         |     2 +
 .../stack/demos/interactive/index.ts          |     5 +
 .../responsive}/ResponsiveStack.tsx           |     2 +
 .../stack/demos/responsive/index.ts           |     5 +
 docs/data/system/components/stack/stack.md    |    12 +-
 docs/data/system/display/Block.js             |    52 -
 docs/data/system/display/Hiding.js            |    28 -
 docs/data/system/display/Inline.js            |    52 -
 docs/data/system/display/Overflow.js          |    52 -
 docs/data/system/display/Print.js             |    30 -
 docs/data/system/display/TextOverflow.js      |    54 -
 docs/data/system/display/Visibility.js        |    36 -
 docs/data/system/display/WhiteSpace.js        |    55 -
 .../display/{ => demos/block}/Block.tsx       |     2 +
 docs/data/system/display/demos/block/index.ts |     5 +
 .../display/{ => demos/hiding}/Hiding.tsx     |     2 +
 .../data/system/display/demos/hiding/index.ts |     5 +
 .../display/{ => demos/inline}/Inline.tsx     |     2 +
 .../data/system/display/demos/inline/index.ts |     5 +
 .../display/{ => demos/overflow}/Overflow.tsx |     2 +
 .../system/display/demos/overflow/index.ts    |     5 +
 .../display/{ => demos/print}/Print.tsx       |     2 +
 docs/data/system/display/demos/print/index.ts |     5 +
 .../text-overflow}/TextOverflow.tsx           |     2 +
 .../display/demos/text-overflow/index.ts      |     5 +
 .../{ => demos/visibility}/Visibility.tsx     |     2 +
 .../system/display/demos/visibility/index.ts  |     5 +
 .../{ => demos/white-space}/WhiteSpace.tsx    |     2 +
 .../system/display/demos/white-space/index.ts |     5 +
 docs/data/system/display/display.md           |    16 +-
 .../ChangeTheBehaviorSxProp.js                |    32 -
 .../ChangeTheBehaviorSxProp.tsx.preview       |     5 -
 .../configure-the-sx-prop/ExtendTheSxProp.js  |    32 -
 .../ExtendTheSxProp.tsx.preview               |     3 -
 .../configure-the-sx-prop.md                  |     4 +-
 .../ChangeTheBehaviorSxProp.tsx               |     2 +
 .../change-the-behavior-sx-prop/index.ts      |     5 +
 .../extend-the-sx-prop}/ExtendTheSxProp.tsx   |     2 +
 .../demos/extend-the-sx-prop/index.ts         |     5 +
 .../CreateCssVarsProvider.js                  |   136 -
 .../CreateCssVarsProvider.tsx.preview         |     3 -
 .../css-theme-variables.md                    |     2 +-
 .../CreateCssVarsProvider.tsx                 |     2 +
 .../demos/create-css-vars-provider/index.ts   |     5 +
 docs/data/system/flexbox/AlignContent.js      |   176 -
 docs/data/system/flexbox/AlignItems.js        |   125 -
 docs/data/system/flexbox/AlignSelf.js         |    65 -
 .../data/system/flexbox/AlignSelf.tsx.preview |    15 -
 docs/data/system/flexbox/Display.js           |    52 -
 docs/data/system/flexbox/FlexDirection.js     |   108 -
 docs/data/system/flexbox/FlexGrow.js          |    57 -
 docs/data/system/flexbox/FlexGrow.tsx.preview |     7 -
 docs/data/system/flexbox/FlexShrink.js        |    57 -
 .../system/flexbox/FlexShrink.tsx.preview     |     7 -
 docs/data/system/flexbox/FlexWrap.js          |   104 -
 docs/data/system/flexbox/JustifyContent.js    |   134 -
 docs/data/system/flexbox/Order.js             |    57 -
 docs/data/system/flexbox/Order.tsx.preview    |     7 -
 .../align-content}/AlignContent.tsx           |     2 +
 .../flexbox/demos/align-content/index.ts      |     5 +
 .../{ => demos/align-items}/AlignItems.tsx    |     2 +
 .../system/flexbox/demos/align-items/index.ts |     5 +
 .../{ => demos/align-self}/AlignSelf.tsx      |     2 +
 .../system/flexbox/demos/align-self/index.ts  |     5 +
 .../flexbox/{ => demos/display}/Display.tsx   |     2 +
 .../system/flexbox/demos/display/index.ts     |     5 +
 .../flex-direction}/FlexDirection.tsx         |     2 +
 .../flexbox/demos/flex-direction/index.ts     |     5 +
 .../{ => demos/flex-grow}/FlexGrow.tsx        |     2 +
 .../system/flexbox/demos/flex-grow/index.ts   |     5 +
 .../{ => demos/flex-shrink}/FlexShrink.tsx    |     2 +
 .../system/flexbox/demos/flex-shrink/index.ts |     5 +
 .../{ => demos/flex-wrap}/FlexWrap.tsx        |     2 +
 .../system/flexbox/demos/flex-wrap/index.ts   |     5 +
 .../justify-content}/JustifyContent.tsx       |     2 +
 .../flexbox/demos/justify-content/index.ts    |     5 +
 .../flexbox/{ => demos/order}/Order.tsx       |     2 +
 docs/data/system/flexbox/demos/order/index.ts |     5 +
 docs/data/system/flexbox/flexbox.md           |    20 +-
 .../CombiningStyleFunctionsDemo.js            |    15 -
 .../CombiningStyleFunctionsDemo.tsx.preview   |     3 -
 .../custom-components/StyleFunctionSxDemo.js  |    15 -
 .../StyleFunctionSxDemo.tsx.preview           |     3 -
 .../custom-components/custom-components.md    |     4 +-
 .../CombiningStyleFunctionsDemo.tsx           |     2 +
 .../combining-style-functions-demo/index.ts   |     5 +
 .../StyleFunctionSxDemo.tsx                   |     2 +
 .../demos/style-function-sx-demo/index.ts     |     5 +
 .../the-sx-prop/DynamicValues.js              |    38 -
 .../getting-started/the-sx-prop/Example.js    |    54 -
 .../the-sx-prop/PassingSxProp.js              |    45 -
 .../the-sx-prop/PassingSxProp.tsx.preview     |     8 -
 .../dynamic-values}/DynamicValues.tsx         |     2 +
 .../the-sx-prop/demos/dynamic-values/index.ts |     5 +
 .../{ => demos/example}/Example.tsx           |     2 +
 .../the-sx-prop/demos/example/index.ts        |     5 +
 .../passing-sx-prop}/PassingSxProp.tsx        |     2 +
 .../demos/passing-sx-prop/index.ts            |     5 +
 .../the-sx-prop/the-sx-prop.md                |     6 +-
 .../usage/BreakpointsAsArray.js               |     9 -
 .../usage/BreakpointsAsArray.tsx.preview      |     1 -
 .../usage/BreakpointsAsObject.js              |    21 -
 .../usage/BreakpointsAsObject.tsx.preview     |    13 -
 .../getting-started/usage/ContainerQueries.js |    87 -
 .../data/system/getting-started/usage/Demo.js |    70 -
 .../getting-started/usage/SxProp.tsx.preview  |     7 -
 .../getting-started/usage/ValueAsFunction.js  |    17 -
 .../usage/ValueAsFunction.tsx.preview         |     9 -
 docs/data/system/getting-started/usage/Why.js |    42 -
 .../BreakpointsAsArray.tsx                    |     2 +
 .../usage/demos/breakpoints-as-array/index.ts |     5 +
 .../BreakpointsAsObject.tsx                   |     2 +
 .../demos/breakpoints-as-object/index.ts      |     5 +
 .../container-queries}/ContainerQueries.tsx   |     2 +
 .../usage/demos/container-queries/index.ts    |     5 +
 .../usage/{ => demos/demo}/Demo.tsx           |     2 +
 .../getting-started/usage/demos/demo/index.ts |     5 +
 .../value-as-function}/ValueAsFunction.tsx    |     2 +
 .../usage/demos/value-as-function/index.ts    |     5 +
 .../usage/{ => demos/why}/Why.tsx             |     2 +
 .../getting-started/usage/demos/why/index.ts  |     5 +
 .../system/getting-started/usage/usage.md     |    12 +-
 docs/data/system/grid/Display.js              |    28 -
 docs/data/system/grid/Gap.js                  |    55 -
 docs/data/system/grid/Gap.tsx.preview         |     6 -
 docs/data/system/grid/GridAutoColumns.js      |    54 -
 .../system/grid/GridAutoColumns.tsx.preview   |     5 -
 docs/data/system/grid/GridAutoFlow.js         |    65 -
 .../data/system/grid/GridAutoFlow.tsx.preview |    15 -
 docs/data/system/grid/GridAutoRows.js         |    55 -
 .../data/system/grid/GridAutoRows.tsx.preview |     5 -
 docs/data/system/grid/GridTemplateAreas.js    |    36 -
 .../system/grid/GridTemplateAreas.tsx.preview |    16 -
 docs/data/system/grid/GridTemplateColumns.js  |    55 -
 .../grid/GridTemplateColumns.tsx.preview      |     5 -
 docs/data/system/grid/GridTemplateRows.js     |    55 -
 .../system/grid/GridTemplateRows.tsx.preview  |     5 -
 docs/data/system/grid/RowAndColumnGap.js      |    62 -
 .../system/grid/RowAndColumnGap.tsx.preview   |    13 -
 .../auto-columns}/GridAutoColumns.tsx         |     2 +
 .../system/grid/demos/auto-columns/index.ts   |     5 +
 .../{ => demos/auto-flow}/GridAutoFlow.tsx    |     2 +
 .../data/system/grid/demos/auto-flow/index.ts |     5 +
 .../{ => demos/auto-rows}/GridAutoRows.tsx    |     2 +
 .../data/system/grid/demos/auto-rows/index.ts |     5 +
 .../grid/{ => demos/display}/Display.tsx      |     2 +
 docs/data/system/grid/demos/display/index.ts  |     5 +
 docs/data/system/grid/{ => demos/gap}/Gap.tsx |     2 +
 docs/data/system/grid/demos/gap/index.ts      |     5 +
 .../row-and-column-gap}/RowAndColumnGap.tsx   |     2 +
 .../grid/demos/row-and-column-gap/index.ts    |     5 +
 .../template-areas}/GridTemplateAreas.tsx     |     2 +
 .../system/grid/demos/template-areas/index.ts |     5 +
 .../template-columns}/GridTemplateColumns.tsx |     2 +
 .../grid/demos/template-columns/index.ts      |     5 +
 .../template-rows}/GridTemplateRows.tsx       |     2 +
 .../system/grid/demos/template-rows/index.ts  |     5 +
 docs/data/system/grid/grid.md                 |    18 +-
 docs/data/system/palette/BackgroundColor.js   |   101 -
 docs/data/system/palette/Color.js             |    18 -
 docs/data/system/palette/Color.tsx.preview    |    11 -
 .../background-color}/BackgroundColor.tsx     |     2 +
 .../palette/demos/background-color/index.ts   |     5 +
 .../palette/{ => demos/color}/Color.tsx       |     2 +
 docs/data/system/palette/demos/color/index.ts |     5 +
 docs/data/system/palette/palette.md           |     4 +-
 docs/data/system/positions/ZIndex.js          |    63 -
 .../positions/{ => demos/z-index}/ZIndex.tsx  |     2 +
 .../system/positions/demos/z-index/index.ts   |     5 +
 docs/data/system/positions/positions.md       |     2 +-
 .../screen-readers/VisuallyHiddenUsage.js     |    13 -
 .../VisuallyHiddenUsage.tsx.preview           |     5 -
 .../VisuallyHiddenUsage.tsx                   |     2 +
 .../demos/visually-hidden-usage/index.ts      |     5 +
 .../system/screen-readers/screen-readers.md   |     2 +-
 docs/data/system/shadows/ShadowsDemo.js       |    93 -
 .../shadows/{ => demos/demo}/ShadowsDemo.tsx  |     2 +
 docs/data/system/shadows/demos/demo/index.ts  |     5 +
 docs/data/system/shadows/shadows.md           |     2 +-
 docs/data/system/sizing/Height.js             |   104 -
 docs/data/system/sizing/Values.js             |    94 -
 docs/data/system/sizing/Width.js              |   116 -
 .../sizing/{ => demos/height}/Height.tsx      |     2 +
 docs/data/system/sizing/demos/height/index.ts |     5 +
 .../sizing/{ => demos/values}/Values.tsx      |     2 +
 docs/data/system/sizing/demos/values/index.ts |     5 +
 .../system/sizing/{ => demos/width}/Width.tsx |     2 +
 docs/data/system/sizing/demos/width/index.ts  |     5 +
 docs/data/system/sizing/sizing.md             |     6 +-
 .../system/spacing/HorizontalCentering.js     |    31 -
 docs/data/system/spacing/SpacingDemo.js       |    65 -
 .../spacing/{ => demos/demo}/SpacingDemo.tsx  |     2 +
 docs/data/system/spacing/demos/demo/index.ts  |     5 +
 .../HorizontalCentering.tsx                   |     2 +
 .../demos/horizontal-centering/index.ts       |     5 +
 docs/data/system/spacing/spacing.md           |     4 +-
 docs/data/system/styled/BasicUsage.js         |    12 -
 .../data/system/styled/BasicUsage.tsx.preview |     1 -
 docs/data/system/styled/ThemeUsage.js         |    25 -
 .../data/system/styled/ThemeUsage.tsx.preview |     3 -
 docs/data/system/styled/UsingOptions.js       |    64 -
 .../system/styled/UsingOptions.tsx.preview    |     8 -
 docs/data/system/styled/UsingWithSx.js        |    27 -
 .../system/styled/UsingWithSx.tsx.preview     |     3 -
 .../{ => demos/basic-usage}/BasicUsage.tsx    |     5 +-
 .../system/styled/demos/basic-usage/index.ts  |     5 +
 .../{ => demos/theme-usage}/ThemeUsage.tsx    |     2 +
 .../system/styled/demos/theme-usage/index.ts  |     5 +
 .../using-options}/UsingOptions.tsx           |     2 +
 .../styled/demos/using-options/index.ts       |     5 +
 .../{ => demos/using-with-sx}/UsingWithSx.tsx |     2 +
 .../styled/demos/using-with-sx/index.ts       |     5 +
 docs/data/system/styled/styled.md             |     8 +-
 docs/data/system/typography/FontFamily.js     |    13 -
 .../system/typography/FontFamily.tsx.preview  |     6 -
 docs/data/system/typography/FontSize.js       |    12 -
 .../system/typography/FontSize.tsx.preview    |     5 -
 docs/data/system/typography/FontStyle.js      |    12 -
 .../system/typography/FontStyle.tsx.preview   |     5 -
 docs/data/system/typography/FontWeight.js     |    14 -
 .../system/typography/FontWeight.tsx.preview  |     7 -
 docs/data/system/typography/LetterSpacing.js  |    11 -
 .../typography/LetterSpacing.tsx.preview      |     4 -
 docs/data/system/typography/LineHeight.js     |    11 -
 .../system/typography/LineHeight.tsx.preview  |     4 -
 docs/data/system/typography/TextAlignment.js  |    16 -
 .../typography/TextAlignment.tsx.preview      |     9 -
 docs/data/system/typography/TextTransform.js  |    12 -
 .../typography/TextTransform.tsx.preview      |     5 -
 docs/data/system/typography/Variant.js        |    11 -
 .../system/typography/Variant.tsx.preview     |     3 -
 .../{ => demos/font-family}/FontFamily.tsx    |     2 +
 .../typography/demos/font-family/index.ts     |     5 +
 .../{ => demos/font-size}/FontSize.tsx        |     2 +
 .../typography/demos/font-size/index.ts       |     5 +
 .../{ => demos/font-style}/FontStyle.tsx      |     2 +
 .../typography/demos/font-style/index.ts      |     5 +
 .../{ => demos/font-weight}/FontWeight.tsx    |     2 +
 .../typography/demos/font-weight/index.ts     |     5 +
 .../letter-spacing}/LetterSpacing.tsx         |     2 +
 .../typography/demos/letter-spacing/index.ts  |     5 +
 .../{ => demos/line-height}/LineHeight.tsx    |     2 +
 .../typography/demos/line-height/index.ts     |     5 +
 .../text-alignment}/TextAlignment.tsx         |     2 +
 .../typography/demos/text-alignment/index.ts  |     5 +
 .../text-transform}/TextTransform.tsx         |     2 +
 .../typography/demos/text-transform/index.ts  |     5 +
 .../{ => demos/variant}/Variant.tsx           |     2 +
 .../system/typography/demos/variant/index.ts  |     5 +
 docs/data/system/typography/typography.md     |    18 +-
 2618 files changed, 5608 insertions(+), 59924 deletions(-)
 delete mode 100644 docs/data/material/components/accordion/AccordionExpandDefault.js
 delete mode 100644 docs/data/material/components/accordion/AccordionExpandIcon.js
 delete mode 100644 docs/data/material/components/accordion/AccordionTransition.js
 delete mode 100644 docs/data/material/components/accordion/AccordionUsage.js
 delete mode 100644 docs/data/material/components/accordion/ControlledAccordions.js
 delete mode 100644 docs/data/material/components/accordion/CustomizedAccordions.js
 delete mode 100644 docs/data/material/components/accordion/DisabledAccordion.js
 rename docs/data/material/components/accordion/{ => demos/controlled}/ControlledAccordions.tsx (98%)
 create mode 100644 docs/data/material/components/accordion/demos/controlled/index.ts
 rename docs/data/material/components/accordion/{ => demos/customized}/CustomizedAccordions.tsx (98%)
 create mode 100644 docs/data/material/components/accordion/demos/customized/index.ts
 rename docs/data/material/components/accordion/{ => demos/disabled}/DisabledAccordion.tsx (97%)
 create mode 100644 docs/data/material/components/accordion/demos/disabled/index.ts
 rename docs/data/material/components/accordion/{ => demos/expand-default}/AccordionExpandDefault.tsx (97%)
 create mode 100644 docs/data/material/components/accordion/demos/expand-default/index.ts
 rename docs/data/material/components/accordion/{ => demos/expand-icon}/AccordionExpandIcon.tsx (97%)
 create mode 100644 docs/data/material/components/accordion/demos/expand-icon/index.ts
 rename docs/data/material/components/accordion/{ => demos/transition}/AccordionTransition.tsx (98%)
 create mode 100644 docs/data/material/components/accordion/demos/transition/index.ts
 rename docs/data/material/components/accordion/{ => demos/usage}/AccordionUsage.tsx (97%)
 create mode 100644 docs/data/material/components/accordion/demos/usage/index.ts
 delete mode 100644 docs/data/material/components/alert/ActionAlerts.js
 delete mode 100644 docs/data/material/components/alert/ActionAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/BasicAlerts.js
 delete mode 100644 docs/data/material/components/alert/BasicAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/ColorAlerts.js
 delete mode 100644 docs/data/material/components/alert/ColorAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/DescriptionAlerts.js
 delete mode 100644 docs/data/material/components/alert/DescriptionAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/FilledAlerts.js
 delete mode 100644 docs/data/material/components/alert/FilledAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/IconAlerts.js
 delete mode 100644 docs/data/material/components/alert/IconAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/OutlinedAlerts.js
 delete mode 100644 docs/data/material/components/alert/OutlinedAlerts.tsx.preview
 delete mode 100644 docs/data/material/components/alert/SimpleAlert.js
 delete mode 100644 docs/data/material/components/alert/SimpleAlert.tsx.preview
 delete mode 100644 docs/data/material/components/alert/TransitionAlerts.js
 rename docs/data/material/components/alert/{ => demos/action}/ActionAlerts.tsx (92%)
 create mode 100644 docs/data/material/components/alert/demos/action/index.ts
 rename docs/data/material/components/alert/{ => demos/basic}/BasicAlerts.tsx (89%)
 create mode 100644 docs/data/material/components/alert/demos/basic/index.ts
 rename docs/data/material/components/alert/{ => demos/color}/ColorAlerts.tsx (82%)
 create mode 100644 docs/data/material/components/alert/demos/color/index.ts
 rename docs/data/material/components/alert/{ => demos/description}/DescriptionAlerts.tsx (94%)
 create mode 100644 docs/data/material/components/alert/demos/description/index.ts
 rename docs/data/material/components/alert/{ => demos/filled}/FilledAlerts.tsx (92%)
 create mode 100644 docs/data/material/components/alert/demos/filled/index.ts
 rename docs/data/material/components/alert/{ => demos/icon}/IconAlerts.tsx (93%)
 create mode 100644 docs/data/material/components/alert/demos/icon/index.ts
 rename docs/data/material/components/alert/{ => demos/outlined}/OutlinedAlerts.tsx (92%)
 create mode 100644 docs/data/material/components/alert/demos/outlined/index.ts
 rename docs/data/material/components/alert/{ => demos/simple}/SimpleAlert.tsx (87%)
 create mode 100644 docs/data/material/components/alert/demos/simple/index.ts
 rename docs/data/material/components/alert/{ => demos/transition}/TransitionAlerts.tsx (96%)
 create mode 100644 docs/data/material/components/alert/demos/transition/index.ts
 delete mode 100644 docs/data/material/components/app-bar/BackToTop.js
 delete mode 100644 docs/data/material/components/app-bar/BottomAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/ButtonAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/DenseAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/DenseAppBar.tsx.preview
 delete mode 100644 docs/data/material/components/app-bar/DrawerAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/ElevateAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview
 delete mode 100644 docs/data/material/components/app-bar/HideAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/MenuAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/PrimarySearchAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/ProminentAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/ResponsiveAppBar.js
 delete mode 100644 docs/data/material/components/app-bar/SearchAppBar.js
 rename docs/data/material/components/app-bar/{ => demos/back-to-top}/BackToTop.tsx (98%)
 create mode 100644 docs/data/material/components/app-bar/demos/back-to-top/index.ts
 rename docs/data/material/components/app-bar/{ => demos/bottom}/BottomAppBar.tsx (98%)
 create mode 100644 docs/data/material/components/app-bar/demos/bottom/index.ts
 rename docs/data/material/components/app-bar/{ => demos/button}/ButtonAppBar.tsx (94%)
 create mode 100644 docs/data/material/components/app-bar/demos/button/index.ts
 rename docs/data/material/components/app-bar/{ => demos/dense}/DenseAppBar.tsx (93%)
 create mode 100644 docs/data/material/components/app-bar/demos/dense/index.ts
 rename docs/data/material/components/app-bar/{ => demos/drawer}/DrawerAppBar.tsx (99%)
 create mode 100644 docs/data/material/components/app-bar/demos/drawer/index.ts
 rename docs/data/material/components/app-bar/{ => demos/elevate}/ElevateAppBar.tsx (97%)
 create mode 100644 docs/data/material/components/app-bar/demos/elevate/index.ts
 rename docs/data/material/components/app-bar/{ => demos/enable-color-on-dark}/EnableColorOnDarkAppBar.tsx (95%)
 create mode 100644 docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts
 rename docs/data/material/components/app-bar/{ => demos/hide}/HideAppBar.tsx (97%)
 create mode 100644 docs/data/material/components/app-bar/demos/hide/index.ts
 rename docs/data/material/components/app-bar/{ => demos/menu}/MenuAppBar.tsx (98%)
 create mode 100644 docs/data/material/components/app-bar/demos/menu/index.ts
 rename docs/data/material/components/app-bar/{ => demos/primary-search}/PrimarySearchAppBar.tsx (99%)
 create mode 100644 docs/data/material/components/app-bar/demos/primary-search/index.ts
 rename docs/data/material/components/app-bar/{ => demos/prominent}/ProminentAppBar.tsx (96%)
 create mode 100644 docs/data/material/components/app-bar/demos/prominent/index.ts
 rename docs/data/material/components/app-bar/{ => demos/responsive}/ResponsiveAppBar.tsx (100%)
 create mode 100644 docs/data/material/components/app-bar/demos/responsive/index.ts
 rename docs/data/material/components/app-bar/{ => demos/search}/SearchAppBar.tsx (97%)
 create mode 100644 docs/data/material/components/app-bar/demos/search/index.ts
 delete mode 100644 docs/data/material/components/autocomplete/Asynchronous.js
 delete mode 100644 docs/data/material/components/autocomplete/AutocompleteHint.js
 delete mode 100644 docs/data/material/components/autocomplete/CheckboxesTags.js
 delete mode 100644 docs/data/material/components/autocomplete/ComboBox.js
 delete mode 100644 docs/data/material/components/autocomplete/ComboBox.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/ControllableStates.js
 delete mode 100644 docs/data/material/components/autocomplete/CountrySelect.js
 delete mode 100644 docs/data/material/components/autocomplete/CustomInputAutocomplete.js
 delete mode 100644 docs/data/material/components/autocomplete/CustomSingleValueRendering.js
 delete mode 100644 docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/CustomizedHook.js
 delete mode 100644 docs/data/material/components/autocomplete/CustomizedHook.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/DisabledOptions.js
 delete mode 100644 docs/data/material/components/autocomplete/DisabledOptions.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/Filter.js
 delete mode 100644 docs/data/material/components/autocomplete/Filter.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/FixedTags.js
 delete mode 100644 docs/data/material/components/autocomplete/FreeSolo.js
 delete mode 100644 docs/data/material/components/autocomplete/FreeSoloCreateOption.js
 delete mode 100644 docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
 delete mode 100644 docs/data/material/components/autocomplete/GitHubLabel.js
 delete mode 100644 docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
 delete mode 100644 docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/GoogleMaps.js
 delete mode 100644 docs/data/material/components/autocomplete/Grouped.js
 delete mode 100644 docs/data/material/components/autocomplete/Grouped.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/Highlights.js
 delete mode 100644 docs/data/material/components/autocomplete/InfiniteLoading.js
 delete mode 100644 docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/LimitTags.js
 delete mode 100644 docs/data/material/components/autocomplete/LimitTags.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/Playground.js
 delete mode 100644 docs/data/material/components/autocomplete/RenderGroup.js
 delete mode 100644 docs/data/material/components/autocomplete/RenderGroup.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/Sizes.js
 delete mode 100644 docs/data/material/components/autocomplete/Tags.js
 delete mode 100644 docs/data/material/components/autocomplete/UseAutocomplete.js
 delete mode 100644 docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
 delete mode 100644 docs/data/material/components/autocomplete/Virtualize.js
 rename docs/data/material/components/autocomplete/{ => demos/asynchronous}/Asynchronous.tsx (98%)
 create mode 100644 docs/data/material/components/autocomplete/demos/asynchronous/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/checkboxes-tags}/CheckboxesTags.tsx (98%)
 create mode 100644 docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/combo-box}/ComboBox.tsx (79%)
 create mode 100644 docs/data/material/components/autocomplete/demos/combo-box/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/combo-box}/top100Films.ts (100%)
 rename docs/data/material/components/autocomplete/{ => demos/controllable-states}/ControllableStates.tsx (95%)
 create mode 100644 docs/data/material/components/autocomplete/demos/controllable-states/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/country-select}/CountrySelect.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/country-select/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/custom-input}/CustomInputAutocomplete.tsx (95%)
 create mode 100644 docs/data/material/components/autocomplete/demos/custom-input/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/custom-single-value-rendering}/CustomSingleValueRendering.tsx (98%)
 create mode 100644 docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/customized-hook}/CustomizedHook.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/customized-hook/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/disabled-options}/DisabledOptions.tsx (93%)
 create mode 100644 docs/data/material/components/autocomplete/demos/disabled-options/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/filter}/Filter.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/filter/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/fixed-tags}/FixedTags.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/fixed-tags/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/free-solo-create-option-dialog}/FreeSoloCreateOptionDialog.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/free-solo-create-option}/FreeSoloCreateOption.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/free-solo}/FreeSolo.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/free-solo/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/git-hub-label}/GitHubLabel.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/git-hub-label/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/globally-customized-options}/GloballyCustomizedOptions.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/google-maps}/GoogleMaps.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/google-maps/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/grouped}/Grouped.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/grouped/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/highlights}/Highlights.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/highlights/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/hint}/AutocompleteHint.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/hint/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/infinite-loading}/InfiniteLoading.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/infinite-loading/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/infinite-loading}/movies.ts (100%)
 rename docs/data/material/components/autocomplete/{ => demos/infinite-loading}/server.ts (97%)
 rename docs/data/material/components/autocomplete/{ => demos/limit-tags}/LimitTags.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/limit-tags/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/playground}/Playground.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/playground/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/render-group}/RenderGroup.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/render-group/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/sizes}/Sizes.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/sizes/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/tags}/Tags.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/tags/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/use}/UseAutocomplete.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/use/index.ts
 rename docs/data/material/components/autocomplete/{ => demos/virtualize}/Virtualize.tsx (99%)
 create mode 100644 docs/data/material/components/autocomplete/demos/virtualize/index.ts
 delete mode 100644 docs/data/material/components/autocomplete/movies.js
 delete mode 100644 docs/data/material/components/autocomplete/server.js
 delete mode 100644 docs/data/material/components/autocomplete/top100Films.js
 delete mode 100644 docs/data/material/components/avatars/BackgroundLetterAvatars.js
 delete mode 100644 docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/BadgeAvatars.js
 delete mode 100644 docs/data/material/components/avatars/BadgeAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/CustomSurplusAvatars.js
 delete mode 100644 docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/FallbackAvatars.js
 delete mode 100644 docs/data/material/components/avatars/FallbackAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/GroupAvatars.js
 delete mode 100644 docs/data/material/components/avatars/GroupAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/IconAvatars.js
 delete mode 100644 docs/data/material/components/avatars/IconAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/ImageAvatars.js
 delete mode 100644 docs/data/material/components/avatars/ImageAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/LetterAvatars.js
 delete mode 100644 docs/data/material/components/avatars/LetterAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/SizeAvatars.js
 delete mode 100644 docs/data/material/components/avatars/SizeAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/Spacing.js
 delete mode 100644 docs/data/material/components/avatars/Spacing.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/TotalAvatars.js
 delete mode 100644 docs/data/material/components/avatars/TotalAvatars.tsx.preview
 delete mode 100644 docs/data/material/components/avatars/UploadAvatars.js
 delete mode 100644 docs/data/material/components/avatars/VariantAvatars.js
 delete mode 100644 docs/data/material/components/avatars/VariantAvatars.tsx.preview
 rename docs/data/material/components/avatars/{ => demos/background-letter}/BackgroundLetterAvatars.tsx (94%)
 create mode 100644 docs/data/material/components/avatars/demos/background-letter/index.ts
 rename docs/data/material/components/avatars/{ => demos/badge}/BadgeAvatars.tsx (96%)
 create mode 100644 docs/data/material/components/avatars/demos/badge/index.ts
 rename docs/data/material/components/avatars/{ => demos/custom-surplus}/CustomSurplusAvatars.tsx (92%)
 create mode 100644 docs/data/material/components/avatars/demos/custom-surplus/index.ts
 rename docs/data/material/components/avatars/{ => demos/fallback}/FallbackAvatars.tsx (91%)
 create mode 100644 docs/data/material/components/avatars/demos/fallback/index.ts
 rename docs/data/material/components/avatars/{ => demos/group}/GroupAvatars.tsx (92%)
 create mode 100644 docs/data/material/components/avatars/demos/group/index.ts
 rename docs/data/material/components/avatars/{ => demos/icon}/IconAvatars.tsx (92%)
 create mode 100644 docs/data/material/components/avatars/demos/icon/index.ts
 rename docs/data/material/components/avatars/{ => demos/image}/ImageAvatars.tsx (88%)
 create mode 100644 docs/data/material/components/avatars/demos/image/index.ts
 rename docs/data/material/components/avatars/{ => demos/letter}/LetterAvatars.tsx (88%)
 create mode 100644 docs/data/material/components/avatars/demos/letter/index.ts
 rename docs/data/material/components/avatars/{ => demos/size}/SizeAvatars.tsx (90%)
 create mode 100644 docs/data/material/components/avatars/demos/size/index.ts
 rename docs/data/material/components/avatars/{ => demos/spacing}/Spacing.tsx (95%)
 create mode 100644 docs/data/material/components/avatars/demos/spacing/index.ts
 rename docs/data/material/components/avatars/{ => demos/total}/TotalAvatars.tsx (91%)
 create mode 100644 docs/data/material/components/avatars/demos/total/index.ts
 rename docs/data/material/components/avatars/{ => demos/upload}/UploadAvatars.tsx (96%)
 create mode 100644 docs/data/material/components/avatars/demos/upload/index.ts
 rename docs/data/material/components/avatars/{ => demos/variant}/VariantAvatars.tsx (90%)
 create mode 100644 docs/data/material/components/avatars/demos/variant/index.ts
 delete mode 100644 docs/data/material/components/backdrop/SimpleBackdrop.js
 delete mode 100644 docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview
 rename docs/data/material/components/backdrop/{ => demos/simple}/SimpleBackdrop.tsx (93%)
 create mode 100644 docs/data/material/components/backdrop/demos/simple/index.ts
 delete mode 100644 docs/data/material/components/badges/AccessibleBadges.js
 delete mode 100644 docs/data/material/components/badges/AccessibleBadges.tsx.preview
 delete mode 100644 docs/data/material/components/badges/BadgeMax.js
 delete mode 100644 docs/data/material/components/badges/BadgeMax.tsx.preview
 delete mode 100644 docs/data/material/components/badges/BadgeOverlap.js
 delete mode 100644 docs/data/material/components/badges/BadgeOverlap.tsx.preview
 delete mode 100644 docs/data/material/components/badges/BadgeVisibility.js
 delete mode 100644 docs/data/material/components/badges/ColorBadge.js
 delete mode 100644 docs/data/material/components/badges/ColorBadge.tsx.preview
 delete mode 100644 docs/data/material/components/badges/CustomizedBadges.js
 delete mode 100644 docs/data/material/components/badges/CustomizedBadges.tsx.preview
 delete mode 100644 docs/data/material/components/badges/DotBadge.js
 delete mode 100644 docs/data/material/components/badges/DotBadge.tsx.preview
 delete mode 100644 docs/data/material/components/badges/ShowZeroBadge.js
 delete mode 100644 docs/data/material/components/badges/ShowZeroBadge.tsx.preview
 delete mode 100644 docs/data/material/components/badges/SimpleBadge.js
 delete mode 100644 docs/data/material/components/badges/SimpleBadge.tsx.preview
 rename docs/data/material/components/badges/{ => demos/accessible}/AccessibleBadges.tsx (92%)
 create mode 100644 docs/data/material/components/badges/demos/accessible/index.ts
 rename docs/data/material/components/badges/{ => demos/alignment}/BadgeAlignment.js (100%)
 create mode 100644 docs/data/material/components/badges/demos/alignment/index.ts
 rename docs/data/material/components/badges/{ => demos/color}/ColorBadge.tsx (89%)
 create mode 100644 docs/data/material/components/badges/demos/color/index.ts
 rename docs/data/material/components/badges/{ => demos/customized}/CustomizedBadges.tsx (93%)
 create mode 100644 docs/data/material/components/badges/demos/customized/index.ts
 rename docs/data/material/components/badges/{ => demos/dot}/DotBadge.tsx (85%)
 create mode 100644 docs/data/material/components/badges/demos/dot/index.ts
 rename docs/data/material/components/badges/{ => demos/max}/BadgeMax.tsx (91%)
 create mode 100644 docs/data/material/components/badges/demos/max/index.ts
 rename docs/data/material/components/badges/{ => demos/overlap}/BadgeOverlap.tsx (94%)
 create mode 100644 docs/data/material/components/badges/demos/overlap/index.ts
 rename docs/data/material/components/badges/{ => demos/show-zero}/ShowZeroBadge.tsx (89%)
 create mode 100644 docs/data/material/components/badges/demos/show-zero/index.ts
 rename docs/data/material/components/badges/{ => demos/simple}/SimpleBadge.tsx (84%)
 create mode 100644 docs/data/material/components/badges/demos/simple/index.ts
 rename docs/data/material/components/badges/{ => demos/visibility}/BadgeVisibility.tsx (97%)
 create mode 100644 docs/data/material/components/badges/demos/visibility/index.ts
 delete mode 100644 docs/data/material/components/bottom-navigation/FixedBottomNavigation.js
 delete mode 100644 docs/data/material/components/bottom-navigation/LabelBottomNavigation.js
 delete mode 100644 docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js
 delete mode 100644 docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview
 rename docs/data/material/components/bottom-navigation/{ => demos/fixed}/FixedBottomNavigation.tsx (98%)
 create mode 100644 docs/data/material/components/bottom-navigation/demos/fixed/index.ts
 rename docs/data/material/components/bottom-navigation/{ => demos/label}/LabelBottomNavigation.tsx (96%)
 create mode 100644 docs/data/material/components/bottom-navigation/demos/label/index.ts
 rename docs/data/material/components/bottom-navigation/{ => demos/simple}/SimpleBottomNavigation.tsx (94%)
 create mode 100644 docs/data/material/components/bottom-navigation/demos/simple/index.ts
 delete mode 100644 docs/data/material/components/box/BoxBasic.js
 delete mode 100644 docs/data/material/components/box/BoxBasic.tsx.preview
 delete mode 100644 docs/data/material/components/box/BoxSx.js
 rename docs/data/material/components/box/{ => demos/basic}/BoxBasic.tsx (82%)
 create mode 100644 docs/data/material/components/box/demos/basic/index.ts
 rename docs/data/material/components/box/{ => demos/sx}/BoxSx.tsx (93%)
 create mode 100644 docs/data/material/components/box/demos/sx/index.ts
 delete mode 100644 docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js
 delete mode 100644 docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js
 delete mode 100644 docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview
 delete mode 100644 docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js
 delete mode 100644 docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview
 delete mode 100644 docs/data/material/components/breadcrumbs/CondensedWithMenu.js
 delete mode 100644 docs/data/material/components/breadcrumbs/CustomSeparator.js
 delete mode 100644 docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview
 delete mode 100644 docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js
 delete mode 100644 docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview
 delete mode 100644 docs/data/material/components/breadcrumbs/IconBreadcrumbs.js
 delete mode 100644 docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js
 rename docs/data/material/components/breadcrumbs/{ => demos/active-last}/ActiveLastBreadcrumb.tsx (94%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/active-last/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/basic}/BasicBreadcrumbs.tsx (94%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/basic/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/collapsed}/CollapsedBreadcrumbs.tsx (94%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/collapsed/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/condensed-with-menu}/CondensedWithMenu.tsx (97%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/custom-separator}/CustomSeparator.tsx (96%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/customized}/CustomizedBreadcrumbs.tsx (97%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/customized/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/icon}/IconBreadcrumbs.tsx (96%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/icon/index.ts
 rename docs/data/material/components/breadcrumbs/{ => demos/router}/RouterBreadcrumbs.tsx (98%)
 create mode 100644 docs/data/material/components/breadcrumbs/demos/router/index.ts
 delete mode 100644 docs/data/material/components/button-group/BasicButtonGroup.js
 delete mode 100644 docs/data/material/components/button-group/BasicButtonGroup.tsx.preview
 delete mode 100644 docs/data/material/components/button-group/DisableElevation.js
 delete mode 100644 docs/data/material/components/button-group/DisableElevation.tsx.preview
 delete mode 100644 docs/data/material/components/button-group/GroupOrientation.js
 delete mode 100644 docs/data/material/components/button-group/GroupSizesColors.js
 delete mode 100644 docs/data/material/components/button-group/GroupSizesColors.tsx.preview
 delete mode 100644 docs/data/material/components/button-group/LoadingButtonGroup.js
 delete mode 100644 docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview
 delete mode 100644 docs/data/material/components/button-group/SplitButton.js
 delete mode 100644 docs/data/material/components/button-group/VariantButtonGroup.js
 delete mode 100644 docs/data/material/components/button-group/VariantButtonGroup.tsx.preview
 rename docs/data/material/components/button-group/{ => demos/basic}/BasicButtonGroup.tsx (88%)
 create mode 100644 docs/data/material/components/button-group/demos/basic/index.ts
 rename docs/data/material/components/button-group/{ => demos/disable-elevation}/DisableElevation.tsx (88%)
 create mode 100644 docs/data/material/components/button-group/demos/disable-elevation/index.ts
 rename docs/data/material/components/button-group/{ => demos/group-orientation}/GroupOrientation.tsx (94%)
 create mode 100644 docs/data/material/components/button-group/demos/group-orientation/index.ts
 rename docs/data/material/components/button-group/{ => demos/group-sizes-colors}/GroupSizesColors.tsx (94%)
 create mode 100644 docs/data/material/components/button-group/demos/group-sizes-colors/index.ts
 rename docs/data/material/components/button-group/{ => demos/loading}/LoadingButtonGroup.tsx (91%)
 create mode 100644 docs/data/material/components/button-group/demos/loading/index.ts
 rename docs/data/material/components/button-group/{ => demos/split-button}/SplitButton.tsx (98%)
 create mode 100644 docs/data/material/components/button-group/demos/split-button/index.ts
 rename docs/data/material/components/button-group/{ => demos/variant}/VariantButtonGroup.tsx (93%)
 create mode 100644 docs/data/material/components/button-group/demos/variant/index.ts
 delete mode 100644 docs/data/material/components/buttons/ButtonBaseDemo.js
 delete mode 100644 docs/data/material/components/buttons/ButtonSizes.js
 delete mode 100644 docs/data/material/components/buttons/ColorButtons.js
 delete mode 100644 docs/data/material/components/buttons/ColorButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/ContainedButtons.js
 delete mode 100644 docs/data/material/components/buttons/ContainedButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/CustomizedButtons.js
 delete mode 100644 docs/data/material/components/buttons/CustomizedButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/DisableElevation.js
 delete mode 100644 docs/data/material/components/buttons/DisableElevation.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/IconButtonColors.js
 delete mode 100644 docs/data/material/components/buttons/IconButtonColors.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/IconButtonSizes.js
 delete mode 100644 docs/data/material/components/buttons/IconButtonSizes.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/IconButtonWithBadge.js
 delete mode 100644 docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/IconButtons.js
 delete mode 100644 docs/data/material/components/buttons/IconButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/IconLabelButtons.js
 delete mode 100644 docs/data/material/components/buttons/IconLabelButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/InputFileUpload.js
 delete mode 100644 docs/data/material/components/buttons/InputFileUpload.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/LoadingButtons.js
 delete mode 100644 docs/data/material/components/buttons/LoadingButtonsTransition.js
 delete mode 100644 docs/data/material/components/buttons/LoadingIconButton.js
 delete mode 100644 docs/data/material/components/buttons/LoadingIconButton.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/OutlinedButtons.js
 delete mode 100644 docs/data/material/components/buttons/OutlinedButtons.tsx.preview
 delete mode 100644 docs/data/material/components/buttons/TextButtons.js
 delete mode 100644 docs/data/material/components/buttons/TextButtons.tsx.preview
 rename docs/data/material/components/buttons/{ => demos/base-demo}/ButtonBaseDemo.tsx (98%)
 create mode 100644 docs/data/material/components/buttons/demos/base-demo/index.ts
 rename docs/data/material/components/buttons/{ => demos/color}/ColorButtons.tsx (88%)
 create mode 100644 docs/data/material/components/buttons/demos/color/index.ts
 rename docs/data/material/components/buttons/{ => demos/contained}/ContainedButtons.tsx (89%)
 create mode 100644 docs/data/material/components/buttons/demos/contained/index.ts
 rename docs/data/material/components/buttons/{ => demos/customized}/CustomizedButtons.tsx (96%)
 create mode 100644 docs/data/material/components/buttons/demos/customized/index.ts
 rename docs/data/material/components/buttons/{ => demos/disable-elevation}/DisableElevation.tsx (81%)
 create mode 100644 docs/data/material/components/buttons/demos/disable-elevation/index.ts
 rename docs/data/material/components/buttons/{ => demos/icon-colors}/IconButtonColors.tsx (90%)
 create mode 100644 docs/data/material/components/buttons/demos/icon-colors/index.ts
 rename docs/data/material/components/buttons/{ => demos/icon-label}/IconLabelButtons.tsx (90%)
 create mode 100644 docs/data/material/components/buttons/demos/icon-label/index.ts
 rename docs/data/material/components/buttons/{ => demos/icon-sizes}/IconButtonSizes.tsx (93%)
 create mode 100644 docs/data/material/components/buttons/demos/icon-sizes/index.ts
 rename docs/data/material/components/buttons/{ => demos/icon-with-badge}/IconButtonWithBadge.tsx (92%)
 create mode 100644 docs/data/material/components/buttons/demos/icon-with-badge/index.ts
 rename docs/data/material/components/buttons/{ => demos/icon}/IconButtons.tsx (93%)
 create mode 100644 docs/data/material/components/buttons/demos/icon/index.ts
 rename docs/data/material/components/buttons/{ => demos/input-file-upload}/InputFileUpload.tsx (94%)
 create mode 100644 docs/data/material/components/buttons/demos/input-file-upload/index.ts
 rename docs/data/material/components/buttons/{ => demos/loading-icon}/LoadingIconButton.tsx (93%)
 create mode 100644 docs/data/material/components/buttons/demos/loading-icon/index.ts
 rename docs/data/material/components/buttons/{ => demos/loading-transition}/LoadingButtonsTransition.tsx (98%)
 create mode 100644 docs/data/material/components/buttons/demos/loading-transition/index.ts
 rename docs/data/material/components/buttons/{ => demos/loading}/LoadingButtons.tsx (96%)
 create mode 100644 docs/data/material/components/buttons/demos/loading/index.ts
 rename docs/data/material/components/buttons/{ => demos/outlined}/OutlinedButtons.tsx (88%)
 create mode 100644 docs/data/material/components/buttons/demos/outlined/index.ts
 rename docs/data/material/components/buttons/{ => demos/sizes}/ButtonSizes.tsx (94%)
 create mode 100644 docs/data/material/components/buttons/demos/sizes/index.ts
 rename docs/data/material/components/buttons/{ => demos/text}/TextButtons.tsx (85%)
 create mode 100644 docs/data/material/components/buttons/demos/text/index.ts
 delete mode 100644 docs/data/material/components/cards/ActionAreaCard.js
 delete mode 100644 docs/data/material/components/cards/BasicCard.js
 delete mode 100644 docs/data/material/components/cards/ImgMediaCard.js
 delete mode 100644 docs/data/material/components/cards/MediaCard.js
 delete mode 100644 docs/data/material/components/cards/MediaControlCard.js
 delete mode 100644 docs/data/material/components/cards/MultiActionAreaCard.js
 delete mode 100644 docs/data/material/components/cards/OutlinedCard.js
 delete mode 100644 docs/data/material/components/cards/OutlinedCard.tsx.preview
 delete mode 100644 docs/data/material/components/cards/RecipeReviewCard.js
 delete mode 100644 docs/data/material/components/cards/SelectActionCard.js
 rename docs/data/material/components/cards/{ => demos/action-area}/ActionAreaCard.tsx (96%)
 create mode 100644 docs/data/material/components/cards/demos/action-area/index.ts
 rename docs/data/material/components/cards/{ => demos/basic}/BasicCard.tsx (96%)
 create mode 100644 docs/data/material/components/cards/demos/basic/index.ts
 rename docs/data/material/components/cards/{ => demos/img-media}/ImgMediaCard.tsx (96%)
 create mode 100644 docs/data/material/components/cards/demos/img-media/index.ts
 rename docs/data/material/components/cards/{ => demos/media-control}/MediaControlCard.tsx (97%)
 create mode 100644 docs/data/material/components/cards/demos/media-control/index.ts
 rename docs/data/material/components/cards/{ => demos/media}/MediaCard.tsx (96%)
 create mode 100644 docs/data/material/components/cards/demos/media/index.ts
 rename docs/data/material/components/cards/{ => demos/multi-action-area}/MultiActionAreaCard.tsx (96%)
 create mode 100644 docs/data/material/components/cards/demos/multi-action-area/index.ts
 rename docs/data/material/components/cards/{ => demos/outlined}/OutlinedCard.tsx (95%)
 create mode 100644 docs/data/material/components/cards/demos/outlined/index.ts
 rename docs/data/material/components/cards/{ => demos/recipe-review}/RecipeReviewCard.tsx (99%)
 create mode 100644 docs/data/material/components/cards/demos/recipe-review/index.ts
 rename docs/data/material/components/cards/{ => demos/select-action}/SelectActionCard.tsx (100%)
 create mode 100644 docs/data/material/components/cards/demos/select-action/index.ts
 delete mode 100644 docs/data/material/components/checkboxes/CheckboxLabels.js
 delete mode 100644 docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/Checkboxes.js
 delete mode 100644 docs/data/material/components/checkboxes/Checkboxes.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/CheckboxesGroup.js
 delete mode 100644 docs/data/material/components/checkboxes/ColorCheckboxes.js
 delete mode 100644 docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/ControlledCheckbox.js
 delete mode 100644 docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/CustomizedCheckbox.js
 delete mode 100644 docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/FormControlLabelPosition.js
 delete mode 100644 docs/data/material/components/checkboxes/IconCheckboxes.js
 delete mode 100644 docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/IndeterminateCheckbox.js
 delete mode 100644 docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview
 delete mode 100644 docs/data/material/components/checkboxes/SizeCheckboxes.js
 delete mode 100644 docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview
 rename docs/data/material/components/checkboxes/{ => demos/checkboxes}/Checkboxes.tsx (87%)
 create mode 100644 docs/data/material/components/checkboxes/demos/checkboxes/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/color}/ColorCheckboxes.tsx (92%)
 create mode 100644 docs/data/material/components/checkboxes/demos/color/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/controlled}/ControlledCheckbox.tsx (91%)
 create mode 100644 docs/data/material/components/checkboxes/demos/controlled/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/customized}/CustomizedCheckbox.tsx (97%)
 create mode 100644 docs/data/material/components/checkboxes/demos/customized/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/form-control-label-position}/FormControlLabelPosition.tsx (95%)
 create mode 100644 docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/group}/CheckboxesGroup.tsx (98%)
 create mode 100644 docs/data/material/components/checkboxes/demos/group/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/icon}/IconCheckboxes.tsx (92%)
 create mode 100644 docs/data/material/components/checkboxes/demos/icon/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/indeterminate}/IndeterminateCheckbox.tsx (96%)
 create mode 100644 docs/data/material/components/checkboxes/demos/indeterminate/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/labels}/CheckboxLabels.tsx (91%)
 create mode 100644 docs/data/material/components/checkboxes/demos/labels/index.ts
 rename docs/data/material/components/checkboxes/{ => demos/size}/SizeCheckboxes.tsx (89%)
 create mode 100644 docs/data/material/components/checkboxes/demos/size/index.ts
 delete mode 100644 docs/data/material/components/chips/AvatarChips.js
 delete mode 100644 docs/data/material/components/chips/AvatarChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/BasicChips.js
 delete mode 100644 docs/data/material/components/chips/BasicChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/ChipsArray.js
 delete mode 100644 docs/data/material/components/chips/ClickableAndDeletableChips.js
 delete mode 100644 docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/ClickableChips.js
 delete mode 100644 docs/data/material/components/chips/ClickableChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/ClickableLinkChips.js
 delete mode 100644 docs/data/material/components/chips/ClickableLinkChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/ColorChips.js
 delete mode 100644 docs/data/material/components/chips/ColorChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/CustomDeleteIconChips.js
 delete mode 100644 docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/DeletableChips.js
 delete mode 100644 docs/data/material/components/chips/DeletableChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/IconChips.js
 delete mode 100644 docs/data/material/components/chips/IconChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/MultilineChips.js
 delete mode 100644 docs/data/material/components/chips/MultilineChips.tsx.preview
 delete mode 100644 docs/data/material/components/chips/SizesChips.js
 delete mode 100644 docs/data/material/components/chips/SizesChips.tsx.preview
 rename docs/data/material/components/chips/{ => demos/array}/ChipsArray.tsx (96%)
 create mode 100644 docs/data/material/components/chips/demos/array/index.ts
 rename docs/data/material/components/chips/{ => demos/avatar}/AvatarChips.tsx (89%)
 create mode 100644 docs/data/material/components/chips/demos/avatar/index.ts
 rename docs/data/material/components/chips/{ => demos/basic}/BasicChips.tsx (84%)
 create mode 100644 docs/data/material/components/chips/demos/basic/index.ts
 rename docs/data/material/components/chips/{ => demos/clickable-and-deletable}/ClickableAndDeletableChips.tsx (92%)
 create mode 100644 docs/data/material/components/chips/demos/clickable-and-deletable/index.ts
 rename docs/data/material/components/chips/{ => demos/clickable-link}/ClickableLinkChips.tsx (89%)
 create mode 100644 docs/data/material/components/chips/demos/clickable-link/index.ts
 rename docs/data/material/components/chips/{ => demos/clickable}/ClickableChips.tsx (88%)
 create mode 100644 docs/data/material/components/chips/demos/clickable/index.ts
 rename docs/data/material/components/chips/{ => demos/color}/ColorChips.tsx (91%)
 create mode 100644 docs/data/material/components/chips/demos/color/index.ts
 rename docs/data/material/components/chips/{ => demos/custom-delete-icon}/CustomDeleteIconChips.tsx (93%)
 create mode 100644 docs/data/material/components/chips/demos/custom-delete-icon/index.ts
 rename docs/data/material/components/chips/{ => demos/deletable}/DeletableChips.tsx (88%)
 create mode 100644 docs/data/material/components/chips/demos/deletable/index.ts
 rename docs/data/material/components/chips/{ => demos/icon}/IconChips.tsx (87%)
 create mode 100644 docs/data/material/components/chips/demos/icon/index.ts
 rename docs/data/material/components/chips/{ => demos/multiline}/MultilineChips.tsx (88%)
 create mode 100644 docs/data/material/components/chips/demos/multiline/index.ts
 rename docs/data/material/components/chips/{ => demos/playground}/ChipsPlayground.js (100%)
 create mode 100644 docs/data/material/components/chips/demos/playground/index.ts
 rename docs/data/material/components/chips/{ => demos/sizes}/SizesChips.tsx (84%)
 create mode 100644 docs/data/material/components/chips/demos/sizes/index.ts
 delete mode 100644 docs/data/material/components/click-away-listener/ClickAway.js
 delete mode 100644 docs/data/material/components/click-away-listener/ClickAway.tsx.preview
 delete mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.js
 delete mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview
 delete mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.js
 delete mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview
 rename docs/data/material/components/click-away-listener/{ => demos/click-away}/ClickAway.tsx (95%)
 create mode 100644 docs/data/material/components/click-away-listener/demos/click-away/index.ts
 rename docs/data/material/components/click-away-listener/{ => demos/leading-click-away}/LeadingClickAway.tsx (95%)
 create mode 100644 docs/data/material/components/click-away-listener/demos/leading-click-away/index.ts
 rename docs/data/material/components/click-away-listener/{ => demos/portal-click-away}/PortalClickAway.tsx (95%)
 create mode 100644 docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts
 delete mode 100644 docs/data/material/components/container/FixedContainer.js
 delete mode 100644 docs/data/material/components/container/FixedContainer.tsx.preview
 delete mode 100644 docs/data/material/components/container/SimpleContainer.js
 delete mode 100644 docs/data/material/components/container/SimpleContainer.tsx.preview
 rename docs/data/material/components/container/{ => demos/fixed}/FixedContainer.tsx (89%)
 create mode 100644 docs/data/material/components/container/demos/fixed/index.ts
 rename docs/data/material/components/container/{ => demos/simple}/SimpleContainer.tsx (90%)
 create mode 100644 docs/data/material/components/container/demos/simple/index.ts
 delete mode 100644 docs/data/material/components/dialogs/AlertDialog.js
 delete mode 100644 docs/data/material/components/dialogs/AlertDialogSlide.js
 delete mode 100644 docs/data/material/components/dialogs/ConfirmationDialog.js
 delete mode 100644 docs/data/material/components/dialogs/CookiesBanner.js
 delete mode 100644 docs/data/material/components/dialogs/CustomizedDialogs.js
 delete mode 100644 docs/data/material/components/dialogs/DraggableDialog.js
 delete mode 100644 docs/data/material/components/dialogs/FormDialog.js
 delete mode 100644 docs/data/material/components/dialogs/FullScreenDialog.js
 delete mode 100644 docs/data/material/components/dialogs/MaxWidthDialog.js
 delete mode 100644 docs/data/material/components/dialogs/ResponsiveDialog.js
 delete mode 100644 docs/data/material/components/dialogs/ScrollDialog.js
 delete mode 100644 docs/data/material/components/dialogs/SimpleDialogDemo.js
 delete mode 100644 docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview
 rename docs/data/material/components/dialogs/{ => demos/alert-slide}/AlertDialogSlide.tsx (97%)
 create mode 100644 docs/data/material/components/dialogs/demos/alert-slide/index.ts
 rename docs/data/material/components/dialogs/{ => demos/alert}/AlertDialog.tsx (97%)
 create mode 100644 docs/data/material/components/dialogs/demos/alert/index.ts
 rename docs/data/material/components/dialogs/{ => demos/confirmation}/ConfirmationDialog.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/confirmation/index.ts
 rename docs/data/material/components/dialogs/{ => demos/cookies-banner}/CookiesBanner.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/cookies-banner/index.ts
 rename docs/data/material/components/dialogs/{ => demos/customized}/CustomizedDialogs.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/customized/index.ts
 rename docs/data/material/components/dialogs/{ => demos/draggable}/DraggableDialog.tsx (97%)
 create mode 100644 docs/data/material/components/dialogs/demos/draggable/index.ts
 rename docs/data/material/components/dialogs/{ => demos/form}/FormDialog.tsx (97%)
 create mode 100644 docs/data/material/components/dialogs/demos/form/index.ts
 rename docs/data/material/components/dialogs/{ => demos/full-screen}/FullScreenDialog.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/full-screen/index.ts
 rename docs/data/material/components/dialogs/{ => demos/max-width}/MaxWidthDialog.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/max-width/index.ts
 rename docs/data/material/components/dialogs/{ => demos/responsive}/ResponsiveDialog.tsx (97%)
 create mode 100644 docs/data/material/components/dialogs/demos/responsive/index.ts
 rename docs/data/material/components/dialogs/{ => demos/scroll}/ScrollDialog.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/scroll/index.ts
 rename docs/data/material/components/dialogs/{ => demos/simple-demo}/SimpleDialogDemo.tsx (98%)
 create mode 100644 docs/data/material/components/dialogs/demos/simple-demo/index.ts
 delete mode 100644 docs/data/material/components/dividers/DividerText.js
 delete mode 100644 docs/data/material/components/dividers/DividerText.tsx.preview
 delete mode 100644 docs/data/material/components/dividers/DividerVariants.js
 delete mode 100644 docs/data/material/components/dividers/FlexDivider.js
 delete mode 100644 docs/data/material/components/dividers/FlexDivider.tsx.preview
 delete mode 100644 docs/data/material/components/dividers/IntroDivider.js
 delete mode 100644 docs/data/material/components/dividers/ListDividers.js
 delete mode 100644 docs/data/material/components/dividers/VerticalDividerMiddle.js
 delete mode 100644 docs/data/material/components/dividers/VerticalDividers.js
 delete mode 100644 docs/data/material/components/dividers/VerticalDividers.tsx.preview
 rename docs/data/material/components/dividers/{ => demos/flex}/FlexDivider.tsx (93%)
 create mode 100644 docs/data/material/components/dividers/demos/flex/index.ts
 rename docs/data/material/components/dividers/{ => demos/intro}/IntroDivider.tsx (97%)
 create mode 100644 docs/data/material/components/dividers/demos/intro/index.ts
 rename docs/data/material/components/dividers/{ => demos/list}/ListDividers.tsx (95%)
 create mode 100644 docs/data/material/components/dividers/demos/list/index.ts
 rename docs/data/material/components/dividers/{ => demos/text}/DividerText.tsx (94%)
 create mode 100644 docs/data/material/components/dividers/demos/text/index.ts
 rename docs/data/material/components/dividers/{ => demos/variants}/DividerVariants.tsx (96%)
 create mode 100644 docs/data/material/components/dividers/demos/variants/index.ts
 rename docs/data/material/components/dividers/{ => demos/vertical-middle}/VerticalDividerMiddle.tsx (95%)
 create mode 100644 docs/data/material/components/dividers/demos/vertical-middle/index.ts
 rename docs/data/material/components/dividers/{ => demos/vertical}/VerticalDividers.tsx (95%)
 create mode 100644 docs/data/material/components/dividers/demos/vertical/index.ts
 delete mode 100644 docs/data/material/components/drawers/AnchorTemporaryDrawer.js
 delete mode 100644 docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview
 delete mode 100644 docs/data/material/components/drawers/ClippedDrawer.js
 delete mode 100644 docs/data/material/components/drawers/MiniDrawer.js
 delete mode 100644 docs/data/material/components/drawers/PermanentDrawerLeft.js
 delete mode 100644 docs/data/material/components/drawers/PermanentDrawerRight.js
 delete mode 100644 docs/data/material/components/drawers/PersistentDrawerLeft.js
 delete mode 100644 docs/data/material/components/drawers/PersistentDrawerRight.js
 delete mode 100644 docs/data/material/components/drawers/ResponsiveDrawer.js
 delete mode 100644 docs/data/material/components/drawers/SwipeableEdgeDrawer.js
 delete mode 100644 docs/data/material/components/drawers/SwipeableTemporaryDrawer.js
 delete mode 100644 docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview
 delete mode 100644 docs/data/material/components/drawers/TemporaryDrawer.js
 delete mode 100644 docs/data/material/components/drawers/TemporaryDrawer.tsx.preview
 rename docs/data/material/components/drawers/{ => demos/anchor-temporary}/AnchorTemporaryDrawer.tsx (98%)
 create mode 100644 docs/data/material/components/drawers/demos/anchor-temporary/index.ts
 rename docs/data/material/components/drawers/{ => demos/clipped}/ClippedDrawer.tsx (98%)
 create mode 100644 docs/data/material/components/drawers/demos/clipped/index.ts
 rename docs/data/material/components/drawers/{ => demos/mini}/MiniDrawer.tsx (99%)
 create mode 100644 docs/data/material/components/drawers/demos/mini/index.ts
 rename docs/data/material/components/drawers/{ => demos/permanent-left}/PermanentDrawerLeft.tsx (98%)
 create mode 100644 docs/data/material/components/drawers/demos/permanent-left/index.ts
 rename docs/data/material/components/drawers/{ => demos/permanent-right}/PermanentDrawerRight.tsx (98%)
 create mode 100644 docs/data/material/components/drawers/demos/permanent-right/index.ts
 rename docs/data/material/components/drawers/{ => demos/persistent-left}/PersistentDrawerLeft.tsx (99%)
 create mode 100644 docs/data/material/components/drawers/demos/persistent-left/index.ts
 rename docs/data/material/components/drawers/{ => demos/persistent-right}/PersistentDrawerRight.tsx (99%)
 create mode 100644 docs/data/material/components/drawers/demos/persistent-right/index.ts
 rename docs/data/material/components/drawers/{ => demos/responsive}/ResponsiveDrawer.tsx (99%)
 create mode 100644 docs/data/material/components/drawers/demos/responsive/index.ts
 rename docs/data/material/components/drawers/{ => demos/swipeable-edge}/SwipeableEdgeDrawer.tsx (98%)
 create mode 100644 docs/data/material/components/drawers/demos/swipeable-edge/index.ts
 rename docs/data/material/components/drawers/{ => demos/swipeable-temporary}/SwipeableTemporaryDrawer.tsx (98%)
 create mode 100644 docs/data/material/components/drawers/demos/swipeable-temporary/index.ts
 rename docs/data/material/components/drawers/{ => demos/temporary}/TemporaryDrawer.tsx (97%)
 create mode 100644 docs/data/material/components/drawers/demos/temporary/index.ts
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtonSize.js
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtons.js
 delete mode 100644 docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview
 rename docs/data/material/components/floating-action-button/{ => demos/extended-size}/FloatingActionButtonExtendedSize.tsx (92%)
 create mode 100644 docs/data/material/components/floating-action-button/demos/extended-size/index.ts
 rename docs/data/material/components/floating-action-button/{ => demos/floating-action-buttons}/FloatingActionButtons.tsx (93%)
 create mode 100644 docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts
 rename docs/data/material/components/floating-action-button/{ => demos/size}/FloatingActionButtonSize.tsx (90%)
 create mode 100644 docs/data/material/components/floating-action-button/demos/size/index.ts
 rename docs/data/material/components/floating-action-button/{ => demos/zoom}/FloatingActionButtonZoom.tsx (98%)
 create mode 100644 docs/data/material/components/floating-action-button/demos/zoom/index.ts
 delete mode 100644 docs/data/material/components/grid/AutoGrid.js
 delete mode 100644 docs/data/material/components/grid/AutoGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/BasicGrid.js
 delete mode 100644 docs/data/material/components/grid/BasicGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/CenteredElementGrid.js
 delete mode 100644 docs/data/material/components/grid/ColumnLayoutInsideGrid.js
 delete mode 100644 docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/ColumnsGrid.js
 delete mode 100644 docs/data/material/components/grid/ColumnsGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/FullBorderedGrid.js
 delete mode 100644 docs/data/material/components/grid/FullWidthGrid.js
 delete mode 100644 docs/data/material/components/grid/FullWidthGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/HalfBorderedGrid.js
 delete mode 100644 docs/data/material/components/grid/InteractiveGrid.js
 delete mode 100644 docs/data/material/components/grid/NestedGrid.js
 delete mode 100644 docs/data/material/components/grid/NestedGridColumns.js
 delete mode 100644 docs/data/material/components/grid/OffsetGrid.js
 delete mode 100644 docs/data/material/components/grid/OffsetGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/ResponsiveGrid.js
 delete mode 100644 docs/data/material/components/grid/ResponsiveGrid.tsx.preview
 delete mode 100644 docs/data/material/components/grid/RowAndColumnSpacing.js
 delete mode 100644 docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview
 delete mode 100644 docs/data/material/components/grid/SpacingGrid.js
 delete mode 100644 docs/data/material/components/grid/VariableWidthGrid.js
 delete mode 100644 docs/data/material/components/grid/VariableWidthGrid.tsx.preview
 rename docs/data/material/components/grid/{ => demos/auto}/AutoGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/auto/index.ts
 rename docs/data/material/components/grid/{ => demos/basic}/BasicGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/basic/index.ts
 rename docs/data/material/components/grid/{ => demos/centered-element}/CenteredElementGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/centered-element/index.ts
 rename docs/data/material/components/grid/{ => demos/column-layout-inside}/ColumnLayoutInsideGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/column-layout-inside/index.ts
 rename docs/data/material/components/grid/{ => demos/columns}/ColumnsGrid.tsx (93%)
 create mode 100644 docs/data/material/components/grid/demos/columns/index.ts
 rename docs/data/material/components/grid/{ => demos/full-bordered}/FullBorderedGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/full-bordered/index.ts
 rename docs/data/material/components/grid/{ => demos/full-width}/FullWidthGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/full-width/index.ts
 rename docs/data/material/components/grid/{ => demos/half-bordered}/HalfBorderedGrid.tsx (96%)
 create mode 100644 docs/data/material/components/grid/demos/half-bordered/index.ts
 rename docs/data/material/components/grid/{ => demos/interactive}/InteractiveGrid.tsx (99%)
 create mode 100644 docs/data/material/components/grid/demos/interactive/index.ts
 rename docs/data/material/components/grid/{ => demos/nested-columns}/NestedGridColumns.tsx (95%)
 create mode 100644 docs/data/material/components/grid/demos/nested-columns/index.ts
 rename docs/data/material/components/grid/{ => demos/nested}/NestedGrid.tsx (98%)
 create mode 100644 docs/data/material/components/grid/demos/nested/index.ts
 rename docs/data/material/components/grid/{ => demos/offset}/OffsetGrid.tsx (95%)
 create mode 100644 docs/data/material/components/grid/demos/offset/index.ts
 rename docs/data/material/components/grid/{ => demos/responsive}/ResponsiveGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/responsive/index.ts
 rename docs/data/material/components/grid/{ => demos/row-and-column-spacing}/RowAndColumnSpacing.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/row-and-column-spacing/index.ts
 rename docs/data/material/components/grid/{ => demos/spacing}/SpacingGrid.tsx (97%)
 create mode 100644 docs/data/material/components/grid/demos/spacing/index.ts
 rename docs/data/material/components/grid/{ => demos/variable-width}/VariableWidthGrid.tsx (94%)
 create mode 100644 docs/data/material/components/grid/demos/variable-width/index.ts
 delete mode 100644 docs/data/material/components/icons/CreateSvgIcon.js
 delete mode 100644 docs/data/material/components/icons/CreateSvgIcon.tsx.preview
 delete mode 100644 docs/data/material/components/icons/FontAwesomeIcon.js
 delete mode 100644 docs/data/material/components/icons/FontAwesomeIcon.tsx.preview
 delete mode 100644 docs/data/material/components/icons/FontAwesomeIconSize.js
 delete mode 100644 docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview
 delete mode 100644 docs/data/material/components/icons/Icons.js
 delete mode 100644 docs/data/material/components/icons/Icons.tsx.preview
 delete mode 100644 docs/data/material/components/icons/SvgIconChildren.js
 delete mode 100644 docs/data/material/components/icons/SvgIconChildren.tsx.preview
 delete mode 100644 docs/data/material/components/icons/SvgIconsColor.js
 delete mode 100644 docs/data/material/components/icons/SvgIconsColor.tsx.preview
 delete mode 100644 docs/data/material/components/icons/SvgIconsSize.js
 delete mode 100644 docs/data/material/components/icons/SvgIconsSize.tsx.preview
 delete mode 100644 docs/data/material/components/icons/SvgMaterialIcons.js
 delete mode 100644 docs/data/material/components/icons/TwoToneIcons.js
 delete mode 100644 docs/data/material/components/icons/TwoToneIcons.tsx.preview
 rename docs/data/material/components/icons/{ => demos/create-svg}/CreateSvgIcon.tsx (92%)
 create mode 100644 docs/data/material/components/icons/demos/create-svg/index.ts
 rename docs/data/material/components/icons/{ => demos/font-awesome-size}/FontAwesomeIconSize.tsx (95%)
 create mode 100644 docs/data/material/components/icons/demos/font-awesome-size/index.ts
 rename docs/data/material/components/icons/{ => demos/font-awesome}/FontAwesomeIcon.tsx (95%)
 create mode 100644 docs/data/material/components/icons/demos/font-awesome/index.ts
 rename docs/data/material/components/icons/{ => demos/icons}/Icons.tsx (89%)
 create mode 100644 docs/data/material/components/icons/demos/icons/index.ts
 rename docs/data/material/components/icons/{ => demos/svg-children}/SvgIconChildren.tsx (94%)
 create mode 100644 docs/data/material/components/icons/demos/svg-children/index.ts
 rename docs/data/material/components/icons/{ => demos/svg-color}/SvgIconsColor.tsx (92%)
 create mode 100644 docs/data/material/components/icons/demos/svg-color/index.ts
 rename docs/data/material/components/icons/{ => demos/svg-material}/SvgMaterialIcons.tsx (97%)
 create mode 100644 docs/data/material/components/icons/demos/svg-material/index.ts
 rename docs/data/material/components/icons/{ => demos/svg-size}/SvgIconsSize.tsx (91%)
 create mode 100644 docs/data/material/components/icons/demos/svg-size/index.ts
 rename docs/data/material/components/icons/{ => demos/two-tone}/TwoToneIcons.tsx (90%)
 create mode 100644 docs/data/material/components/icons/demos/two-tone/index.ts
 delete mode 100644 docs/data/material/components/image-list/CustomImageList.js
 delete mode 100644 docs/data/material/components/image-list/MasonryImageList.js
 delete mode 100644 docs/data/material/components/image-list/MasonryImageList.tsx.preview
 delete mode 100644 docs/data/material/components/image-list/QuiltedImageList.js
 delete mode 100644 docs/data/material/components/image-list/QuiltedImageList.tsx.preview
 delete mode 100644 docs/data/material/components/image-list/StandardImageList.js
 delete mode 100644 docs/data/material/components/image-list/StandardImageList.tsx.preview
 delete mode 100644 docs/data/material/components/image-list/TitlebarBelowImageList.js
 delete mode 100644 docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
 delete mode 100644 docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
 delete mode 100644 docs/data/material/components/image-list/TitlebarImageList.js
 delete mode 100644 docs/data/material/components/image-list/WovenImageList.js
 delete mode 100644 docs/data/material/components/image-list/WovenImageList.tsx.preview
 rename docs/data/material/components/image-list/{ => demos/custom}/CustomImageList.tsx (98%)
 create mode 100644 docs/data/material/components/image-list/demos/custom/index.ts
 rename docs/data/material/components/image-list/{ => demos/masonry}/MasonryImageList.tsx (97%)
 create mode 100644 docs/data/material/components/image-list/demos/masonry/index.ts
 rename docs/data/material/components/image-list/{ => demos/quilted}/QuiltedImageList.tsx (98%)
 create mode 100644 docs/data/material/components/image-list/demos/quilted/index.ts
 rename docs/data/material/components/image-list/{ => demos/standard}/StandardImageList.tsx (97%)
 create mode 100644 docs/data/material/components/image-list/demos/standard/index.ts
 rename docs/data/material/components/image-list/{ => demos/titlebar-below-masonry}/TitlebarBelowMasonryImageList.tsx (97%)
 create mode 100644 docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts
 rename docs/data/material/components/image-list/{ => demos/titlebar-below}/TitlebarBelowImageList.tsx (98%)
 create mode 100644 docs/data/material/components/image-list/demos/titlebar-below/index.ts
 rename docs/data/material/components/image-list/{ => demos/titlebar}/TitlebarImageList.tsx (98%)
 create mode 100644 docs/data/material/components/image-list/demos/titlebar/index.ts
 rename docs/data/material/components/image-list/{ => demos/woven}/WovenImageList.tsx (97%)
 create mode 100644 docs/data/material/components/image-list/demos/woven/index.ts
 delete mode 100644 docs/data/material/components/links/ButtonLink.js
 delete mode 100644 docs/data/material/components/links/ButtonLink.tsx.preview
 delete mode 100644 docs/data/material/components/links/Links.js
 delete mode 100644 docs/data/material/components/links/Links.tsx.preview
 delete mode 100644 docs/data/material/components/links/UnderlineLink.js
 delete mode 100644 docs/data/material/components/links/UnderlineLink.tsx.preview
 rename docs/data/material/components/links/{ => demos/button}/ButtonLink.tsx (85%)
 create mode 100644 docs/data/material/components/links/demos/button/index.ts
 rename docs/data/material/components/links/{ => demos/links}/Links.tsx (92%)
 create mode 100644 docs/data/material/components/links/demos/links/index.ts
 rename docs/data/material/components/links/{ => demos/underline}/UnderlineLink.tsx (93%)
 create mode 100644 docs/data/material/components/links/demos/underline/index.ts
 delete mode 100644 docs/data/material/components/lists/AlignItemsList.js
 delete mode 100644 docs/data/material/components/lists/BasicList.js
 delete mode 100644 docs/data/material/components/lists/CheckboxList.js
 delete mode 100644 docs/data/material/components/lists/CheckboxListSecondary.js
 delete mode 100644 docs/data/material/components/lists/CustomizedList.js
 delete mode 100644 docs/data/material/components/lists/FolderList.js
 delete mode 100644 docs/data/material/components/lists/GutterlessList.js
 delete mode 100644 docs/data/material/components/lists/GutterlessList.tsx.preview
 delete mode 100644 docs/data/material/components/lists/InsetList.js
 delete mode 100644 docs/data/material/components/lists/InteractiveList.js
 delete mode 100644 docs/data/material/components/lists/NestedList.js
 delete mode 100644 docs/data/material/components/lists/PinnedSubheaderList.js
 delete mode 100644 docs/data/material/components/lists/SelectedListItem.js
 delete mode 100644 docs/data/material/components/lists/SwitchListSecondary.js
 delete mode 100644 docs/data/material/components/lists/VirtualizedList.js
 delete mode 100644 docs/data/material/components/lists/VirtualizedList.tsx.preview
 rename docs/data/material/components/lists/{ => demos/align-items}/AlignItemsList.tsx (98%)
 create mode 100644 docs/data/material/components/lists/demos/align-items/index.ts
 rename docs/data/material/components/lists/{ => demos/basic}/BasicList.tsx (96%)
 create mode 100644 docs/data/material/components/lists/demos/basic/index.ts
 rename docs/data/material/components/lists/{ => demos/checkbox-secondary}/CheckboxListSecondary.tsx (97%)
 create mode 100644 docs/data/material/components/lists/demos/checkbox-secondary/index.ts
 rename docs/data/material/components/lists/{ => demos/checkbox}/CheckboxList.tsx (97%)
 create mode 100644 docs/data/material/components/lists/demos/checkbox/index.ts
 rename docs/data/material/components/lists/{ => demos/customized}/CustomizedList.tsx (99%)
 create mode 100644 docs/data/material/components/lists/demos/customized/index.ts
 rename docs/data/material/components/lists/{ => demos/folder}/FolderList.tsx (96%)
 create mode 100644 docs/data/material/components/lists/demos/folder/index.ts
 rename docs/data/material/components/lists/{ => demos/gutterless}/GutterlessList.tsx (94%)
 create mode 100644 docs/data/material/components/lists/demos/gutterless/index.ts
 rename docs/data/material/components/lists/{ => demos/inset}/InsetList.tsx (95%)
 create mode 100644 docs/data/material/components/lists/demos/inset/index.ts
 rename docs/data/material/components/lists/{ => demos/interactive}/InteractiveList.tsx (99%)
 create mode 100644 docs/data/material/components/lists/demos/interactive/index.ts
 rename docs/data/material/components/lists/{ => demos/nested}/NestedList.tsx (97%)
 create mode 100644 docs/data/material/components/lists/demos/nested/index.ts
 rename docs/data/material/components/lists/{ => demos/pinned-subheader}/PinnedSubheaderList.tsx (96%)
 create mode 100644 docs/data/material/components/lists/demos/pinned-subheader/index.ts
 rename docs/data/material/components/lists/{ => demos/selected-item}/SelectedListItem.tsx (97%)
 create mode 100644 docs/data/material/components/lists/demos/selected-item/index.ts
 rename docs/data/material/components/lists/{ => demos/switch-secondary}/SwitchListSecondary.tsx (97%)
 create mode 100644 docs/data/material/components/lists/demos/switch-secondary/index.ts
 rename docs/data/material/components/lists/{ => demos/virtualized}/VirtualizedList.tsx (94%)
 create mode 100644 docs/data/material/components/lists/demos/virtualized/index.ts
 delete mode 100644 docs/data/material/components/masonry/BasicMasonry.js
 delete mode 100644 docs/data/material/components/masonry/BasicMasonry.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/FixedColumns.js
 delete mode 100644 docs/data/material/components/masonry/FixedColumns.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/FixedSpacing.js
 delete mode 100644 docs/data/material/components/masonry/FixedSpacing.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/ImageMasonry.js
 delete mode 100644 docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
 delete mode 100644 docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/ResponsiveColumns.js
 delete mode 100644 docs/data/material/components/masonry/ResponsiveColumns.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/ResponsiveSpacing.js
 delete mode 100644 docs/data/material/components/masonry/ResponsiveSpacing.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/SSRMasonry.js
 delete mode 100644 docs/data/material/components/masonry/SSRMasonry.tsx.preview
 delete mode 100644 docs/data/material/components/masonry/Sequential.js
 delete mode 100644 docs/data/material/components/masonry/Sequential.tsx.preview
 rename docs/data/material/components/masonry/{ => demos/basic}/BasicMasonry.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/basic/index.ts
 rename docs/data/material/components/masonry/{ => demos/fixed-columns}/FixedColumns.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/fixed-columns/index.ts
 rename docs/data/material/components/masonry/{ => demos/fixed-spacing}/FixedSpacing.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/fixed-spacing/index.ts
 rename docs/data/material/components/masonry/{ => demos/image}/ImageMasonry.tsx (98%)
 create mode 100644 docs/data/material/components/masonry/demos/image/index.ts
 rename docs/data/material/components/masonry/{ => demos/responsive-columns}/ResponsiveColumns.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/responsive-columns/index.ts
 rename docs/data/material/components/masonry/{ => demos/responsive-spacing}/ResponsiveSpacing.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/responsive-spacing/index.ts
 rename docs/data/material/components/masonry/{ => demos/sequential}/Sequential.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/sequential/index.ts
 rename docs/data/material/components/masonry/{ => demos/ssr-masonry}/SSRMasonry.tsx (94%)
 create mode 100644 docs/data/material/components/masonry/demos/ssr-masonry/index.ts
 rename docs/data/material/components/masonry/{ => demos/with-variable-height-items}/MasonryWithVariableHeightItems.tsx (96%)
 create mode 100644 docs/data/material/components/masonry/demos/with-variable-height-items/index.ts
 rename docs/data/material/components/material-icons/{ => demos/search-icons}/SearchIcons.js (99%)
 create mode 100644 docs/data/material/components/material-icons/demos/search-icons/index.ts
 rename docs/data/material/components/material-icons/{ => demos/search-icons}/synonyms.js (100%)
 delete mode 100644 docs/data/material/components/menubar/BasicMenubar.js
 delete mode 100644 docs/data/material/components/menubar/CheckboxItemsMenubar.js
 delete mode 100644 docs/data/material/components/menubar/GroupLabelMenubar.js
 delete mode 100644 docs/data/material/components/menubar/IconItemsMenubar.js
 delete mode 100644 docs/data/material/components/menubar/RadioGroupItemsMenubar.js
 delete mode 100644 docs/data/material/components/menubar/ShortcutHintsMenubar.js
 delete mode 100644 docs/data/material/components/menubar/components/Menubar.js
 rename docs/data/material/components/menubar/{components => demos}/Menubar.tsx (98%)
 rename docs/data/material/components/menubar/{ => demos/basic}/BasicMenubar.tsx (96%)
 create mode 100644 docs/data/material/components/menubar/demos/basic/index.ts
 rename docs/data/material/components/menubar/{ => demos/checkbox-items}/CheckboxItemsMenubar.tsx (97%)
 create mode 100644 docs/data/material/components/menubar/demos/checkbox-items/index.ts
 rename docs/data/material/components/menubar/{ => demos/group-label}/GroupLabelMenubar.tsx (98%)
 create mode 100644 docs/data/material/components/menubar/demos/group-label/index.ts
 rename docs/data/material/components/menubar/{ => demos/icon-items}/IconItemsMenubar.tsx (96%)
 create mode 100644 docs/data/material/components/menubar/demos/icon-items/index.ts
 rename docs/data/material/components/menubar/{ => demos/radio-group-items}/RadioGroupItemsMenubar.tsx (96%)
 create mode 100644 docs/data/material/components/menubar/demos/radio-group-items/index.ts
 rename docs/data/material/components/menubar/{ => demos/shortcut-hints}/ShortcutHintsMenubar.tsx (95%)
 create mode 100644 docs/data/material/components/menubar/demos/shortcut-hints/index.ts
 delete mode 100644 docs/data/material/components/menus/AccountMenu.js
 delete mode 100644 docs/data/material/components/menus/BasicMenu.js
 delete mode 100644 docs/data/material/components/menus/ContextMenu.js
 delete mode 100644 docs/data/material/components/menus/CustomizedMenus.js
 delete mode 100644 docs/data/material/components/menus/DenseMenu.js
 delete mode 100644 docs/data/material/components/menus/FadeMenu.js
 delete mode 100644 docs/data/material/components/menus/GroupedMenu.js
 delete mode 100644 docs/data/material/components/menus/IconMenu.js
 delete mode 100644 docs/data/material/components/menus/LongMenu.js
 delete mode 100644 docs/data/material/components/menus/MenuListComposition.js
 delete mode 100644 docs/data/material/components/menus/MenuPopupState.js
 delete mode 100644 docs/data/material/components/menus/MenuPopupState.tsx.preview
 delete mode 100644 docs/data/material/components/menus/PositionedMenu.js
 delete mode 100644 docs/data/material/components/menus/SimpleListMenu.js
 delete mode 100644 docs/data/material/components/menus/TypographyMenu.js
 rename docs/data/material/components/menus/{ => demos/account}/AccountMenu.tsx (98%)
 create mode 100644 docs/data/material/components/menus/demos/account/index.ts
 rename docs/data/material/components/menus/{ => demos/basic}/BasicMenu.tsx (96%)
 create mode 100644 docs/data/material/components/menus/demos/basic/index.ts
 rename docs/data/material/components/menus/{ => demos/context}/ContextMenu.tsx (98%)
 create mode 100644 docs/data/material/components/menus/demos/context/index.ts
 rename docs/data/material/components/menus/{ => demos/customized}/CustomizedMenus.tsx (98%)
 create mode 100644 docs/data/material/components/menus/demos/customized/index.ts
 rename docs/data/material/components/menus/{ => demos/dense}/DenseMenu.tsx (97%)
 create mode 100644 docs/data/material/components/menus/demos/dense/index.ts
 rename docs/data/material/components/menus/{ => demos/fade}/FadeMenu.tsx (96%)
 create mode 100644 docs/data/material/components/menus/demos/fade/index.ts
 rename docs/data/material/components/menus/{ => demos/grouped}/GroupedMenu.tsx (97%)
 create mode 100644 docs/data/material/components/menus/demos/grouped/index.ts
 rename docs/data/material/components/menus/{ => demos/icon}/IconMenu.tsx (97%)
 create mode 100644 docs/data/material/components/menus/demos/icon/index.ts
 rename docs/data/material/components/menus/{ => demos/list-composition}/MenuListComposition.tsx (98%)
 create mode 100644 docs/data/material/components/menus/demos/list-composition/index.ts
 rename docs/data/material/components/menus/{ => demos/long}/LongMenu.tsx (97%)
 create mode 100644 docs/data/material/components/menus/demos/long/index.ts
 rename docs/data/material/components/menus/{ => demos/popup-state}/MenuPopupState.tsx (94%)
 create mode 100644 docs/data/material/components/menus/demos/popup-state/index.ts
 rename docs/data/material/components/menus/{ => demos/positioned}/PositionedMenu.tsx (96%)
 create mode 100644 docs/data/material/components/menus/demos/positioned/index.ts
 rename docs/data/material/components/menus/{ => demos/simple-list}/SimpleListMenu.tsx (97%)
 create mode 100644 docs/data/material/components/menus/demos/simple-list/index.ts
 rename docs/data/material/components/menus/{ => demos/typography}/TypographyMenu.tsx (96%)
 create mode 100644 docs/data/material/components/menus/demos/typography/index.ts
 delete mode 100644 docs/data/material/components/modal/BasicModal.js
 delete mode 100644 docs/data/material/components/modal/BasicModal.tsx.preview
 delete mode 100644 docs/data/material/components/modal/KeepMountedModal.js
 delete mode 100644 docs/data/material/components/modal/NestedModal.js
 delete mode 100644 docs/data/material/components/modal/NestedModal.tsx.preview
 delete mode 100644 docs/data/material/components/modal/ServerModal.js
 delete mode 100644 docs/data/material/components/modal/SpringModal.js
 delete mode 100644 docs/data/material/components/modal/TransitionsModal.js
 rename docs/data/material/components/modal/{ => demos/basic}/BasicModal.tsx (95%)
 create mode 100644 docs/data/material/components/modal/demos/basic/index.ts
 rename docs/data/material/components/modal/{ => demos/keep-mounted}/KeepMountedModal.tsx (96%)
 create mode 100644 docs/data/material/components/modal/demos/keep-mounted/index.ts
 rename docs/data/material/components/modal/{ => demos/nested}/NestedModal.tsx (97%)
 create mode 100644 docs/data/material/components/modal/demos/nested/index.ts
 rename docs/data/material/components/modal/{ => demos/server}/ServerModal.tsx (96%)
 create mode 100644 docs/data/material/components/modal/demos/server/index.ts
 rename docs/data/material/components/modal/{ => demos/spring}/SpringModal.tsx (98%)
 create mode 100644 docs/data/material/components/modal/demos/spring/index.ts
 rename docs/data/material/components/modal/{ => demos/transitions}/TransitionsModal.tsx (97%)
 create mode 100644 docs/data/material/components/modal/demos/transitions/index.ts
 delete mode 100644 docs/data/material/components/no-ssr/FrameDeferring.js
 delete mode 100644 docs/data/material/components/no-ssr/SimpleNoSsr.js
 delete mode 100644 docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview
 rename docs/data/material/components/no-ssr/{ => demos/frame-deferring}/FrameDeferring.tsx (96%)
 create mode 100644 docs/data/material/components/no-ssr/demos/frame-deferring/index.ts
 rename docs/data/material/components/no-ssr/{ => demos/simple}/SimpleNoSsr.tsx (89%)
 create mode 100644 docs/data/material/components/no-ssr/demos/simple/index.ts
 delete mode 100644 docs/data/material/components/number-field/FieldDemo.js
 delete mode 100644 docs/data/material/components/number-field/FieldDemo.tsx.preview
 delete mode 100644 docs/data/material/components/number-field/SpinnerDemo.js
 delete mode 100644 docs/data/material/components/number-field/SpinnerDemo.tsx.preview
 delete mode 100644 docs/data/material/components/number-field/components/NumberField.js
 delete mode 100644 docs/data/material/components/number-field/components/NumberSpinner.js
 rename docs/data/material/components/number-field/{ => demos/field-demo}/FieldDemo.tsx (83%)
 rename docs/data/material/components/number-field/{components => demos/field-demo}/NumberField.tsx (98%)
 create mode 100644 docs/data/material/components/number-field/demos/field-demo/index.ts
 rename docs/data/material/components/number-field/{components => demos/spinner-demo}/NumberSpinner.tsx (98%)
 rename docs/data/material/components/number-field/{ => demos/spinner-demo}/SpinnerDemo.tsx (85%)
 create mode 100644 docs/data/material/components/number-field/demos/spinner-demo/index.ts
 delete mode 100644 docs/data/material/components/pagination/BasicPagination.js
 delete mode 100644 docs/data/material/components/pagination/BasicPagination.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/CustomIcons.js
 delete mode 100644 docs/data/material/components/pagination/CustomIcons.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationButtons.js
 delete mode 100644 docs/data/material/components/pagination/PaginationButtons.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationControlled.js
 delete mode 100644 docs/data/material/components/pagination/PaginationControlled.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationLink.js
 delete mode 100644 docs/data/material/components/pagination/PaginationLink.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationOutlined.js
 delete mode 100644 docs/data/material/components/pagination/PaginationOutlined.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationRanges.js
 delete mode 100644 docs/data/material/components/pagination/PaginationRanges.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationRounded.js
 delete mode 100644 docs/data/material/components/pagination/PaginationRounded.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/PaginationSize.js
 delete mode 100644 docs/data/material/components/pagination/PaginationSize.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/TablePaginationDemo.js
 delete mode 100644 docs/data/material/components/pagination/TablePaginationDemo.tsx.preview
 delete mode 100644 docs/data/material/components/pagination/UsePagination.js
 rename docs/data/material/components/pagination/{ => demos/basic}/BasicPagination.tsx (87%)
 create mode 100644 docs/data/material/components/pagination/demos/basic/index.ts
 rename docs/data/material/components/pagination/{ => demos/buttons}/PaginationButtons.tsx (85%)
 create mode 100644 docs/data/material/components/pagination/demos/buttons/index.ts
 rename docs/data/material/components/pagination/{ => demos/controlled}/PaginationControlled.tsx (91%)
 create mode 100644 docs/data/material/components/pagination/demos/controlled/index.ts
 rename docs/data/material/components/pagination/{ => demos/custom-icons}/CustomIcons.tsx (91%)
 create mode 100644 docs/data/material/components/pagination/demos/custom-icons/index.ts
 rename docs/data/material/components/pagination/{ => demos/link}/PaginationLink.tsx (94%)
 create mode 100644 docs/data/material/components/pagination/demos/link/index.ts
 rename docs/data/material/components/pagination/{ => demos/outlined}/PaginationOutlined.tsx (89%)
 create mode 100644 docs/data/material/components/pagination/demos/outlined/index.ts
 rename docs/data/material/components/pagination/{ => demos/ranges}/PaginationRanges.tsx (90%)
 create mode 100644 docs/data/material/components/pagination/demos/ranges/index.ts
 rename docs/data/material/components/pagination/{ => demos/rounded}/PaginationRounded.tsx (85%)
 create mode 100644 docs/data/material/components/pagination/demos/rounded/index.ts
 rename docs/data/material/components/pagination/{ => demos/size}/PaginationSize.tsx (85%)
 create mode 100644 docs/data/material/components/pagination/demos/size/index.ts
 rename docs/data/material/components/pagination/{ => demos/table-demo}/TablePaginationDemo.tsx (94%)
 create mode 100644 docs/data/material/components/pagination/demos/table-demo/index.ts
 rename docs/data/material/components/pagination/{ => demos/use}/UsePagination.tsx (96%)
 create mode 100644 docs/data/material/components/pagination/demos/use/index.ts
 delete mode 100644 docs/data/material/components/paper/Elevation.js
 delete mode 100644 docs/data/material/components/paper/SimplePaper.js
 delete mode 100644 docs/data/material/components/paper/SimplePaper.tsx.preview
 delete mode 100644 docs/data/material/components/paper/SquareCorners.js
 delete mode 100644 docs/data/material/components/paper/SquareCorners.tsx.preview
 delete mode 100644 docs/data/material/components/paper/Variants.js
 delete mode 100644 docs/data/material/components/paper/Variants.tsx.preview
 rename docs/data/material/components/paper/{ => demos/elevation}/Elevation.tsx (96%)
 create mode 100644 docs/data/material/components/paper/demos/elevation/index.ts
 rename docs/data/material/components/paper/{ => demos/simple}/SimplePaper.tsx (88%)
 create mode 100644 docs/data/material/components/paper/demos/simple/index.ts
 rename docs/data/material/components/paper/{ => demos/square-corners}/SquareCorners.tsx (90%)
 create mode 100644 docs/data/material/components/paper/demos/square-corners/index.ts
 rename docs/data/material/components/paper/{ => demos/variants}/Variants.tsx (91%)
 create mode 100644 docs/data/material/components/paper/demos/variants/index.ts
 delete mode 100644 docs/data/material/components/popover/BasicPopover.js
 delete mode 100644 docs/data/material/components/popover/BasicPopover.tsx.preview
 delete mode 100644 docs/data/material/components/popover/MouseHoverPopover.js
 delete mode 100644 docs/data/material/components/popover/PopoverPopupState.js
 delete mode 100644 docs/data/material/components/popover/VirtualElementPopover.js
 rename docs/data/material/components/popover/{ => demos/anchor-playground}/AnchorPlayground.js (100%)
 create mode 100644 docs/data/material/components/popover/demos/anchor-playground/index.ts
 rename docs/data/material/components/popover/{ => demos/basic}/BasicPopover.tsx (95%)
 create mode 100644 docs/data/material/components/popover/demos/basic/index.ts
 rename docs/data/material/components/popover/{ => demos/mouse-hover}/MouseHoverPopover.tsx (96%)
 create mode 100644 docs/data/material/components/popover/demos/mouse-hover/index.ts
 rename docs/data/material/components/popover/{ => demos/popup-state}/PopoverPopupState.tsx (96%)
 create mode 100644 docs/data/material/components/popover/demos/popup-state/index.ts
 rename docs/data/material/components/popover/{ => demos/virtual-element}/VirtualElementPopover.tsx (97%)
 create mode 100644 docs/data/material/components/popover/demos/virtual-element/index.ts
 delete mode 100644 docs/data/material/components/popper/PopperPopupState.js
 delete mode 100644 docs/data/material/components/popper/PositionedPopper.js
 delete mode 100644 docs/data/material/components/popper/SimplePopper.js
 delete mode 100644 docs/data/material/components/popper/SimplePopper.tsx.preview
 delete mode 100644 docs/data/material/components/popper/SpringPopper.js
 delete mode 100644 docs/data/material/components/popper/SpringPopper.tsx.preview
 delete mode 100644 docs/data/material/components/popper/TransitionsPopper.js
 delete mode 100644 docs/data/material/components/popper/TransitionsPopper.tsx.preview
 delete mode 100644 docs/data/material/components/popper/VirtualElementPopper.js
 rename docs/data/material/components/popper/{ => demos/popup-state}/PopperPopupState.tsx (96%)
 create mode 100644 docs/data/material/components/popper/demos/popup-state/index.ts
 rename docs/data/material/components/popper/{ => demos/positioned}/PositionedPopper.tsx (98%)
 create mode 100644 docs/data/material/components/popper/demos/positioned/index.ts
 rename docs/data/material/components/popper/{ => demos/scroll-playground}/ScrollPlayground.js (100%)
 create mode 100644 docs/data/material/components/popper/demos/scroll-playground/index.ts
 rename docs/data/material/components/popper/{ => demos/simple}/SimplePopper.tsx (93%)
 create mode 100644 docs/data/material/components/popper/demos/simple/index.ts
 rename docs/data/material/components/popper/{ => demos/spring}/SpringPopper.tsx (97%)
 create mode 100644 docs/data/material/components/popper/demos/spring/index.ts
 rename docs/data/material/components/popper/{ => demos/transitions}/TransitionsPopper.tsx (95%)
 create mode 100644 docs/data/material/components/popper/demos/transitions/index.ts
 rename docs/data/material/components/popper/{ => demos/virtual-element}/VirtualElementPopper.tsx (98%)
 create mode 100644 docs/data/material/components/popper/demos/virtual-element/index.ts
 delete mode 100644 docs/data/material/components/portal/SimplePortal.js
 delete mode 100644 docs/data/material/components/portal/SimplePortal.tsx.preview
 rename docs/data/material/components/portal/{ => demos/simple}/SimplePortal.tsx (93%)
 create mode 100644 docs/data/material/components/portal/demos/simple/index.ts
 delete mode 100644 docs/data/material/components/progress/CircularColor.js
 delete mode 100644 docs/data/material/components/progress/CircularColor.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularCustomScale.js
 delete mode 100644 docs/data/material/components/progress/CircularCustomScale.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularDeterminate.js
 delete mode 100644 docs/data/material/components/progress/CircularDeterminate.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularEnableTrack.js
 delete mode 100644 docs/data/material/components/progress/CircularEnableTrack.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularIndeterminate.js
 delete mode 100644 docs/data/material/components/progress/CircularIndeterminate.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularIntegration.js
 delete mode 100644 docs/data/material/components/progress/CircularSize.js
 delete mode 100644 docs/data/material/components/progress/CircularSize.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularUnderLoad.js
 delete mode 100644 docs/data/material/components/progress/CircularUnderLoad.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CircularWithValueLabel.js
 delete mode 100644 docs/data/material/components/progress/CircularWithValueLabel.tsx.preview
 delete mode 100644 docs/data/material/components/progress/CustomizedProgressBars.js
 delete mode 100644 docs/data/material/components/progress/CustomizedProgressBars.tsx.preview
 delete mode 100644 docs/data/material/components/progress/DelayingAppearance.js
 delete mode 100644 docs/data/material/components/progress/LinearBuffer.js
 delete mode 100644 docs/data/material/components/progress/LinearBuffer.tsx.preview
 delete mode 100644 docs/data/material/components/progress/LinearColor.js
 delete mode 100644 docs/data/material/components/progress/LinearColor.tsx.preview
 delete mode 100644 docs/data/material/components/progress/LinearDeterminate.js
 delete mode 100644 docs/data/material/components/progress/LinearDeterminate.tsx.preview
 delete mode 100644 docs/data/material/components/progress/LinearIndeterminate.js
 delete mode 100644 docs/data/material/components/progress/LinearIndeterminate.tsx.preview
 delete mode 100644 docs/data/material/components/progress/LinearQuery.js
 delete mode 100644 docs/data/material/components/progress/LinearQuery.tsx.preview
 delete mode 100644 docs/data/material/components/progress/LinearWithAriaValueText.js
 delete mode 100644 docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview
 delete mode 100644 docs/data/material/components/progress/LinearWithValueLabel.js
 delete mode 100644 docs/data/material/components/progress/LinearWithValueLabel.tsx.preview
 rename docs/data/material/components/progress/{ => demos/circular-color}/CircularColor.tsx (89%)
 create mode 100644 docs/data/material/components/progress/demos/circular-color/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-custom-scale}/CircularCustomScale.tsx (92%)
 create mode 100644 docs/data/material/components/progress/demos/circular-custom-scale/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-determinate}/CircularDeterminate.tsx (95%)
 create mode 100644 docs/data/material/components/progress/demos/circular-determinate/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-enable-track}/CircularEnableTrack.tsx (95%)
 create mode 100644 docs/data/material/components/progress/demos/circular-enable-track/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-indeterminate}/CircularIndeterminate.tsx (83%)
 create mode 100644 docs/data/material/components/progress/demos/circular-indeterminate/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-integration}/CircularIntegration.tsx (98%)
 create mode 100644 docs/data/material/components/progress/demos/circular-integration/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-size}/CircularSize.tsx (89%)
 create mode 100644 docs/data/material/components/progress/demos/circular-size/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-under-load}/CircularUnderLoad.tsx (54%)
 create mode 100644 docs/data/material/components/progress/demos/circular-under-load/index.ts
 rename docs/data/material/components/progress/{ => demos/circular-with-value-label}/CircularWithValueLabel.tsx (96%)
 create mode 100644 docs/data/material/components/progress/demos/circular-with-value-label/index.ts
 rename docs/data/material/components/progress/{ => demos/customized-bars}/CustomizedProgressBars.tsx (98%)
 create mode 100644 docs/data/material/components/progress/demos/customized-bars/index.ts
 rename docs/data/material/components/progress/{ => demos/delaying-appearance}/DelayingAppearance.tsx (97%)
 create mode 100644 docs/data/material/components/progress/demos/delaying-appearance/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-buffer}/LinearBuffer.tsx (95%)
 create mode 100644 docs/data/material/components/progress/demos/linear-buffer/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-color}/LinearColor.tsx (89%)
 create mode 100644 docs/data/material/components/progress/demos/linear-color/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-determinate}/LinearDeterminate.tsx (93%)
 create mode 100644 docs/data/material/components/progress/demos/linear-determinate/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-indeterminate}/LinearIndeterminate.tsx (83%)
 create mode 100644 docs/data/material/components/progress/demos/linear-indeterminate/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-query}/LinearQuery.tsx (83%)
 create mode 100644 docs/data/material/components/progress/demos/linear-query/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-with-aria-value-text}/LinearWithAriaValueText.tsx (97%)
 create mode 100644 docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts
 rename docs/data/material/components/progress/{ => demos/linear-with-value-label}/LinearWithValueLabel.tsx (96%)
 create mode 100644 docs/data/material/components/progress/demos/linear-with-value-label/index.ts
 delete mode 100644 docs/data/material/components/radio-buttons/ColorRadioButtons.js
 delete mode 100644 docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview
 delete mode 100644 docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js
 delete mode 100644 docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview
 delete mode 100644 docs/data/material/components/radio-buttons/CustomizedRadios.js
 delete mode 100644 docs/data/material/components/radio-buttons/ErrorRadios.js
 delete mode 100644 docs/data/material/components/radio-buttons/FormControlLabelPlacement.js
 delete mode 100644 docs/data/material/components/radio-buttons/RadioButtons.js
 delete mode 100644 docs/data/material/components/radio-buttons/RadioButtons.tsx.preview
 delete mode 100644 docs/data/material/components/radio-buttons/RadioButtonsGroup.js
 delete mode 100644 docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview
 delete mode 100644 docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js
 delete mode 100644 docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview
 delete mode 100644 docs/data/material/components/radio-buttons/SizeRadioButtons.js
 delete mode 100644 docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview
 delete mode 100644 docs/data/material/components/radio-buttons/UseRadioGroup.js
 delete mode 100644 docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview
 rename docs/data/material/components/radio-buttons/{ => demos/color}/ColorRadioButtons.tsx (94%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/color/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/controlled-group}/ControlledRadioButtonsGroup.tsx (95%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/controlled-group/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/customized-radios}/CustomizedRadios.tsx (98%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/customized-radios/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/error-radios}/ErrorRadios.tsx (97%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/error-radios/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/form-control-label-placement}/FormControlLabelPlacement.tsx (95%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/group}/RadioButtonsGroup.tsx (95%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/group/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/radio-buttons}/RadioButtons.tsx (93%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/row-group}/RowRadioButtonsGroup.tsx (95%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/row-group/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/size}/SizeRadioButtons.tsx (93%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/size/index.ts
 rename docs/data/material/components/radio-buttons/{ => demos/use-radio-group}/UseRadioGroup.tsx (96%)
 create mode 100644 docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts
 delete mode 100644 docs/data/material/components/rating/BasicRating.js
 delete mode 100644 docs/data/material/components/rating/CustomizedRating.js
 delete mode 100644 docs/data/material/components/rating/CustomizedRating.tsx.preview
 delete mode 100644 docs/data/material/components/rating/HalfRating.js
 delete mode 100644 docs/data/material/components/rating/HalfRating.tsx.preview
 delete mode 100644 docs/data/material/components/rating/HoverRating.js
 delete mode 100644 docs/data/material/components/rating/HoverRating.tsx.preview
 delete mode 100644 docs/data/material/components/rating/RadioGroupRating.js
 delete mode 100644 docs/data/material/components/rating/RadioGroupRating.tsx.preview
 delete mode 100644 docs/data/material/components/rating/RatingSize.js
 delete mode 100644 docs/data/material/components/rating/RatingSize.tsx.preview
 delete mode 100644 docs/data/material/components/rating/TextRating.js
 delete mode 100644 docs/data/material/components/rating/TextRating.tsx.preview
 rename docs/data/material/components/rating/{ => demos/basic}/BasicRating.tsx (96%)
 create mode 100644 docs/data/material/components/rating/demos/basic/index.ts
 rename docs/data/material/components/rating/{ => demos/customized}/CustomizedRating.tsx (95%)
 create mode 100644 docs/data/material/components/rating/demos/customized/index.ts
 rename docs/data/material/components/rating/{ => demos/half}/HalfRating.tsx (86%)
 create mode 100644 docs/data/material/components/rating/demos/half/index.ts
 rename docs/data/material/components/rating/{ => demos/hover}/HoverRating.tsx (95%)
 create mode 100644 docs/data/material/components/rating/demos/hover/index.ts
 rename docs/data/material/components/rating/{ => demos/radio-group}/RadioGroupRating.tsx (97%)
 create mode 100644 docs/data/material/components/rating/demos/radio-group/index.ts
 rename docs/data/material/components/rating/{ => demos/size}/RatingSize.tsx (87%)
 create mode 100644 docs/data/material/components/rating/demos/size/index.ts
 rename docs/data/material/components/rating/{ => demos/text}/TextRating.tsx (93%)
 create mode 100644 docs/data/material/components/rating/demos/text/index.ts
 delete mode 100644 docs/data/material/components/selects/BasicSelect.js
 delete mode 100644 docs/data/material/components/selects/BasicSelect.tsx.preview
 delete mode 100644 docs/data/material/components/selects/ControlledOpenSelect.js
 delete mode 100644 docs/data/material/components/selects/CustomizedSelects.js
 delete mode 100644 docs/data/material/components/selects/DialogSelect.js
 delete mode 100644 docs/data/material/components/selects/GroupedSelect.js
 delete mode 100644 docs/data/material/components/selects/MultipleSelect.js
 delete mode 100644 docs/data/material/components/selects/MultipleSelectCheckmarks.js
 delete mode 100644 docs/data/material/components/selects/MultipleSelectChip.js
 delete mode 100644 docs/data/material/components/selects/MultipleSelectNative.js
 delete mode 100644 docs/data/material/components/selects/MultipleSelectPlaceholder.js
 delete mode 100644 docs/data/material/components/selects/NativeSelectDemo.js
 delete mode 100644 docs/data/material/components/selects/NativeSelectDemo.tsx.preview
 delete mode 100644 docs/data/material/components/selects/SelectAutoWidth.js
 delete mode 100644 docs/data/material/components/selects/SelectLabels.js
 delete mode 100644 docs/data/material/components/selects/SelectOtherProps.js
 delete mode 100644 docs/data/material/components/selects/SelectSmall.js
 delete mode 100644 docs/data/material/components/selects/SelectVariants.js
 rename docs/data/material/components/selects/{ => demos/auto-width}/SelectAutoWidth.tsx (96%)
 create mode 100644 docs/data/material/components/selects/demos/auto-width/index.ts
 rename docs/data/material/components/selects/{ => demos/basic}/BasicSelect.tsx (95%)
 create mode 100644 docs/data/material/components/selects/demos/basic/index.ts
 rename docs/data/material/components/selects/{ => demos/controlled-open}/ControlledOpenSelect.tsx (97%)
 create mode 100644 docs/data/material/components/selects/demos/controlled-open/index.ts
 rename docs/data/material/components/selects/{ => demos/customized}/CustomizedSelects.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/customized/index.ts
 rename docs/data/material/components/selects/{ => demos/dialog}/DialogSelect.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/dialog/index.ts
 rename docs/data/material/components/selects/{ => demos/grouped}/GroupedSelect.tsx (97%)
 create mode 100644 docs/data/material/components/selects/demos/grouped/index.ts
 rename docs/data/material/components/selects/{ => demos/labels}/SelectLabels.tsx (97%)
 create mode 100644 docs/data/material/components/selects/demos/labels/index.ts
 rename docs/data/material/components/selects/{ => demos/multiple-checkmarks}/MultipleSelectCheckmarks.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/multiple-checkmarks/index.ts
 rename docs/data/material/components/selects/{ => demos/multiple-chip}/MultipleSelectChip.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/multiple-chip/index.ts
 rename docs/data/material/components/selects/{ => demos/multiple-native}/MultipleSelectNative.tsx (97%)
 create mode 100644 docs/data/material/components/selects/demos/multiple-native/index.ts
 rename docs/data/material/components/selects/{ => demos/multiple-placeholder}/MultipleSelectPlaceholder.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/multiple-placeholder/index.ts
 rename docs/data/material/components/selects/{ => demos/multiple}/MultipleSelect.tsx (97%)
 create mode 100644 docs/data/material/components/selects/demos/multiple/index.ts
 rename docs/data/material/components/selects/{ => demos/native-demo}/NativeSelectDemo.tsx (94%)
 create mode 100644 docs/data/material/components/selects/demos/native-demo/index.ts
 rename docs/data/material/components/selects/{ => demos/other-props}/SelectOtherProps.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/other-props/index.ts
 rename docs/data/material/components/selects/{ => demos/small}/SelectSmall.tsx (95%)
 create mode 100644 docs/data/material/components/selects/demos/small/index.ts
 rename docs/data/material/components/selects/{ => demos/variants}/SelectVariants.tsx (98%)
 create mode 100644 docs/data/material/components/selects/demos/variants/index.ts
 delete mode 100644 docs/data/material/components/skeleton/Animations.js
 delete mode 100644 docs/data/material/components/skeleton/Animations.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/Facebook.js
 delete mode 100644 docs/data/material/components/skeleton/Facebook.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/SkeletonChildren.js
 delete mode 100644 docs/data/material/components/skeleton/SkeletonChildren.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/SkeletonColor.js
 delete mode 100644 docs/data/material/components/skeleton/SkeletonColor.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/SkeletonTypography.js
 delete mode 100644 docs/data/material/components/skeleton/SkeletonTypography.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/Variants.js
 delete mode 100644 docs/data/material/components/skeleton/Variants.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/YouTube.js
 delete mode 100644 docs/data/material/components/skeleton/YouTube.tsx.preview
 rename docs/data/material/components/skeleton/{ => demos/animations}/Animations.tsx (84%)
 create mode 100644 docs/data/material/components/skeleton/demos/animations/index.ts
 rename docs/data/material/components/skeleton/{ => demos/children}/SkeletonChildren.tsx (97%)
 create mode 100644 docs/data/material/components/skeleton/demos/children/index.ts
 rename docs/data/material/components/skeleton/{ => demos/color}/SkeletonColor.tsx (89%)
 create mode 100644 docs/data/material/components/skeleton/demos/color/index.ts
 rename docs/data/material/components/skeleton/{ => demos/facebook}/Facebook.tsx (98%)
 create mode 100644 docs/data/material/components/skeleton/demos/facebook/index.ts
 rename docs/data/material/components/skeleton/{ => demos/typography}/SkeletonTypography.tsx (94%)
 create mode 100644 docs/data/material/components/skeleton/demos/typography/index.ts
 rename docs/data/material/components/skeleton/{ => demos/variants}/Variants.tsx (91%)
 create mode 100644 docs/data/material/components/skeleton/demos/variants/index.ts
 rename docs/data/material/components/skeleton/{ => demos/you-tube}/YouTube.tsx (97%)
 create mode 100644 docs/data/material/components/skeleton/demos/you-tube/index.ts
 delete mode 100644 docs/data/material/components/slider/ColorSlider.js
 delete mode 100644 docs/data/material/components/slider/ColorSlider.tsx.preview
 delete mode 100644 docs/data/material/components/slider/ContinuousSlider.js
 delete mode 100644 docs/data/material/components/slider/ContinuousSlider.tsx.preview
 delete mode 100644 docs/data/material/components/slider/CustomMarks.js
 delete mode 100644 docs/data/material/components/slider/CustomizedSlider.js
 delete mode 100644 docs/data/material/components/slider/DiscreteSlider.js
 delete mode 100644 docs/data/material/components/slider/DiscreteSlider.tsx.preview
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderLabel.js
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderMarks.js
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderSteps.js
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderValues.js
 delete mode 100644 docs/data/material/components/slider/DiscreteSliderValues.tsx.preview
 delete mode 100644 docs/data/material/components/slider/InputSlider.js
 delete mode 100644 docs/data/material/components/slider/MinimumDistanceSlider.js
 delete mode 100644 docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview
 delete mode 100644 docs/data/material/components/slider/MusicPlayerSlider.js
 delete mode 100644 docs/data/material/components/slider/NonLinearSlider.js
 delete mode 100644 docs/data/material/components/slider/NonLinearSlider.tsx.preview
 delete mode 100644 docs/data/material/components/slider/RangeSlider.js
 delete mode 100644 docs/data/material/components/slider/RangeSlider.tsx.preview
 delete mode 100644 docs/data/material/components/slider/SliderSizes.js
 delete mode 100644 docs/data/material/components/slider/SliderSizes.tsx.preview
 delete mode 100644 docs/data/material/components/slider/TrackFalseSlider.js
 delete mode 100644 docs/data/material/components/slider/TrackInvertedSlider.js
 delete mode 100644 docs/data/material/components/slider/VerticalSlider.js
 rename docs/data/material/components/slider/{ => demos/color}/ColorSlider.tsx (88%)
 create mode 100644 docs/data/material/components/slider/demos/color/index.ts
 rename docs/data/material/components/slider/{ => demos/continuous}/ContinuousSlider.tsx (93%)
 create mode 100644 docs/data/material/components/slider/demos/continuous/index.ts
 rename docs/data/material/components/slider/{ => demos/custom-marks}/CustomMarks.tsx (96%)
 create mode 100644 docs/data/material/components/slider/demos/custom-marks/index.ts
 rename docs/data/material/components/slider/{ => demos/customized}/CustomizedSlider.tsx (98%)
 create mode 100644 docs/data/material/components/slider/demos/customized/index.ts
 rename docs/data/material/components/slider/{ => demos/discrete-label}/DiscreteSliderLabel.tsx (92%)
 create mode 100644 docs/data/material/components/slider/demos/discrete-label/index.ts
 rename docs/data/material/components/slider/{ => demos/discrete-marks}/DiscreteSliderMarks.tsx (92%)
 create mode 100644 docs/data/material/components/slider/demos/discrete-marks/index.ts
 rename docs/data/material/components/slider/{ => demos/discrete-steps}/DiscreteSliderSteps.tsx (90%)
 create mode 100644 docs/data/material/components/slider/demos/discrete-steps/index.ts
 rename docs/data/material/components/slider/{ => demos/discrete-values}/DiscreteSliderValues.tsx (92%)
 create mode 100644 docs/data/material/components/slider/demos/discrete-values/index.ts
 rename docs/data/material/components/slider/{ => demos/discrete}/DiscreteSlider.tsx (91%)
 create mode 100644 docs/data/material/components/slider/demos/discrete/index.ts
 rename docs/data/material/components/slider/{ => demos/input}/InputSlider.tsx (97%)
 create mode 100644 docs/data/material/components/slider/demos/input/index.ts
 rename docs/data/material/components/slider/{ => demos/minimum-distance}/MinimumDistanceSlider.tsx (96%)
 create mode 100644 docs/data/material/components/slider/demos/minimum-distance/index.ts
 rename docs/data/material/components/slider/{ => demos/music-player}/MusicPlayerSlider.tsx (99%)
 create mode 100644 docs/data/material/components/slider/demos/music-player/index.ts
 rename docs/data/material/components/slider/{ => demos/non-linear}/NonLinearSlider.tsx (95%)
 create mode 100644 docs/data/material/components/slider/demos/non-linear/index.ts
 rename docs/data/material/components/slider/{ => demos/range}/RangeSlider.tsx (92%)
 create mode 100644 docs/data/material/components/slider/demos/range/index.ts
 rename docs/data/material/components/slider/{ => demos/sizes}/SliderSizes.tsx (88%)
 create mode 100644 docs/data/material/components/slider/demos/sizes/index.ts
 rename docs/data/material/components/slider/{ => demos/track-false}/TrackFalseSlider.tsx (96%)
 create mode 100644 docs/data/material/components/slider/demos/track-false/index.ts
 rename docs/data/material/components/slider/{ => demos/track-inverted}/TrackInvertedSlider.tsx (95%)
 create mode 100644 docs/data/material/components/slider/demos/track-inverted/index.ts
 rename docs/data/material/components/slider/{ => demos/vertical}/VerticalSlider.tsx (95%)
 create mode 100644 docs/data/material/components/slider/demos/vertical/index.ts
 delete mode 100644 docs/data/material/components/snackbars/AutohideSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview
 delete mode 100644 docs/data/material/components/snackbars/ConsecutiveSnackbars.js
 delete mode 100644 docs/data/material/components/snackbars/CustomizedSnackbars.js
 delete mode 100644 docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview
 delete mode 100644 docs/data/material/components/snackbars/DirectionSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/DirectionSnackbar.tsx
 delete mode 100644 docs/data/material/components/snackbars/FabIntegrationSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/IntegrationNotistack.js
 delete mode 100644 docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview
 delete mode 100644 docs/data/material/components/snackbars/LongTextSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/PositionedSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview
 delete mode 100644 docs/data/material/components/snackbars/SimpleSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview
 delete mode 100644 docs/data/material/components/snackbars/TransitionsSnackbar.js
 delete mode 100644 docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview
 rename docs/data/material/components/snackbars/{ => demos/autohide}/AutohideSnackbar.tsx (93%)
 create mode 100644 docs/data/material/components/snackbars/demos/autohide/index.ts
 rename docs/data/material/components/snackbars/{ => demos/consecutive}/ConsecutiveSnackbars.tsx (98%)
 create mode 100644 docs/data/material/components/snackbars/demos/consecutive/index.ts
 rename docs/data/material/components/snackbars/{ => demos/customized}/CustomizedSnackbars.tsx (94%)
 create mode 100644 docs/data/material/components/snackbars/demos/customized/index.ts
 rename docs/data/material/components/snackbars/{ => demos/fab-integration}/FabIntegrationSnackbar.tsx (97%)
 create mode 100644 docs/data/material/components/snackbars/demos/fab-integration/index.ts
 rename docs/data/material/components/snackbars/{ => demos/integration-notistack}/IntegrationNotistack.tsx (94%)
 create mode 100644 docs/data/material/components/snackbars/demos/integration-notistack/index.ts
 rename docs/data/material/components/snackbars/{ => demos/long-text}/LongTextSnackbar.tsx (94%)
 create mode 100644 docs/data/material/components/snackbars/demos/long-text/index.ts
 rename docs/data/material/components/snackbars/{ => demos/positioned}/PositionedSnackbar.tsx (97%)
 create mode 100644 docs/data/material/components/snackbars/demos/positioned/index.ts
 rename docs/data/material/components/snackbars/{ => demos/simple}/SimpleSnackbar.tsx (95%)
 create mode 100644 docs/data/material/components/snackbars/demos/simple/index.ts
 rename docs/data/material/components/snackbars/{ => demos/transitions}/TransitionsSnackbar.tsx (96%)
 create mode 100644 docs/data/material/components/snackbars/demos/transitions/index.ts
 delete mode 100644 docs/data/material/components/speed-dial/BasicSpeedDial.js
 delete mode 100644 docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js
 delete mode 100644 docs/data/material/components/speed-dial/OpenIconSpeedDial.js
 delete mode 100644 docs/data/material/components/speed-dial/PlaygroundSpeedDial.js
 delete mode 100644 docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js
 rename docs/data/material/components/speed-dial/{ => demos/basic}/BasicSpeedDial.tsx (95%)
 create mode 100644 docs/data/material/components/speed-dial/demos/basic/index.ts
 rename docs/data/material/components/speed-dial/{ => demos/controlled-open}/ControlledOpenSpeedDial.tsx (97%)
 create mode 100644 docs/data/material/components/speed-dial/demos/controlled-open/index.ts
 rename docs/data/material/components/speed-dial/{ => demos/open-icon}/OpenIconSpeedDial.tsx (96%)
 create mode 100644 docs/data/material/components/speed-dial/demos/open-icon/index.ts
 rename docs/data/material/components/speed-dial/{ => demos/playground}/PlaygroundSpeedDial.tsx (98%)
 create mode 100644 docs/data/material/components/speed-dial/demos/playground/index.ts
 rename docs/data/material/components/speed-dial/{ => demos/tooltip-open}/SpeedDialTooltipOpen.tsx (97%)
 create mode 100644 docs/data/material/components/speed-dial/demos/tooltip-open/index.ts
 delete mode 100644 docs/data/material/components/stack/BasicStack.js
 delete mode 100644 docs/data/material/components/stack/BasicStack.tsx.preview
 delete mode 100644 docs/data/material/components/stack/DirectionStack.js
 delete mode 100644 docs/data/material/components/stack/DirectionStack.tsx.preview
 delete mode 100644 docs/data/material/components/stack/DividerStack.js
 delete mode 100644 docs/data/material/components/stack/DividerStack.tsx.preview
 delete mode 100644 docs/data/material/components/stack/FlexboxGapStack.js
 delete mode 100644 docs/data/material/components/stack/FlexboxGapStack.tsx.preview
 delete mode 100644 docs/data/material/components/stack/InteractiveStack.js
 delete mode 100644 docs/data/material/components/stack/ResponsiveStack.js
 delete mode 100644 docs/data/material/components/stack/ResponsiveStack.tsx.preview
 delete mode 100644 docs/data/material/components/stack/ZeroWidthStack.js
 delete mode 100644 docs/data/material/components/stack/ZeroWidthStack.tsx.preview
 rename docs/data/material/components/stack/{ => demos/basic}/BasicStack.tsx (92%)
 create mode 100644 docs/data/material/components/stack/demos/basic/index.ts
 rename docs/data/material/components/stack/{ => demos/direction}/DirectionStack.tsx (92%)
 create mode 100644 docs/data/material/components/stack/demos/direction/index.ts
 rename docs/data/material/components/stack/{ => demos/divider}/DividerStack.tsx (93%)
 create mode 100644 docs/data/material/components/stack/demos/divider/index.ts
 rename docs/data/material/components/stack/{ => demos/flexbox-gap}/FlexboxGapStack.tsx (93%)
 create mode 100644 docs/data/material/components/stack/demos/flexbox-gap/index.ts
 rename docs/data/material/components/stack/{ => demos/interactive}/InteractiveStack.tsx (99%)
 create mode 100644 docs/data/material/components/stack/demos/interactive/index.ts
 rename docs/data/material/components/stack/{ => demos/responsive}/ResponsiveStack.tsx (93%)
 create mode 100644 docs/data/material/components/stack/demos/responsive/index.ts
 rename docs/data/material/components/stack/{ => demos/zero-width}/ZeroWidthStack.tsx (96%)
 create mode 100644 docs/data/material/components/stack/demos/zero-width/index.ts
 delete mode 100644 docs/data/material/components/steppers/CustomizedSteppers.js
 delete mode 100644 docs/data/material/components/steppers/CustomizedSteppers.tsx.preview
 delete mode 100644 docs/data/material/components/steppers/DotsMobileStepper.js
 delete mode 100644 docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js
 delete mode 100644 docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview
 delete mode 100644 docs/data/material/components/steppers/HorizontalLinearStepper.js
 delete mode 100644 docs/data/material/components/steppers/HorizontalNonLinearStepper.js
 delete mode 100644 docs/data/material/components/steppers/HorizontalStepperWithError.js
 delete mode 100644 docs/data/material/components/steppers/ProgressMobileStepper.js
 delete mode 100644 docs/data/material/components/steppers/TextMobileStepper.js
 delete mode 100644 docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js
 delete mode 100644 docs/data/material/components/steppers/VerticalLinearStepper.js
 rename docs/data/material/components/steppers/{ => demos/customized}/CustomizedSteppers.tsx (99%)
 create mode 100644 docs/data/material/components/steppers/demos/customized/index.ts
 rename docs/data/material/components/steppers/{ => demos/dots-mobile}/DotsMobileStepper.tsx (98%)
 create mode 100644 docs/data/material/components/steppers/demos/dots-mobile/index.ts
 rename docs/data/material/components/steppers/{ => demos/horizontal-linear-alternative-label}/HorizontalLinearAlternativeLabelStepper.tsx (92%)
 create mode 100644 docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts
 rename docs/data/material/components/steppers/{ => demos/horizontal-linear}/HorizontalLinearStepper.tsx (99%)
 create mode 100644 docs/data/material/components/steppers/demos/horizontal-linear/index.ts
 rename docs/data/material/components/steppers/{ => demos/horizontal-non-linear}/HorizontalNonLinearStepper.tsx (99%)
 create mode 100644 docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts
 rename docs/data/material/components/steppers/{ => demos/horizontal-with-error}/HorizontalStepperWithError.tsx (96%)
 create mode 100644 docs/data/material/components/steppers/demos/horizontal-with-error/index.ts
 rename docs/data/material/components/steppers/{ => demos/progress-mobile}/ProgressMobileStepper.tsx (98%)
 create mode 100644 docs/data/material/components/steppers/demos/progress-mobile/index.ts
 rename docs/data/material/components/steppers/{ => demos/text-mobile}/TextMobileStepper.tsx (98%)
 create mode 100644 docs/data/material/components/steppers/demos/text-mobile/index.ts
 rename docs/data/material/components/steppers/{ => demos/vertical-linear-alternative-label}/VerticalLinearAlternativeLabelStepper.tsx (98%)
 create mode 100644 docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts
 rename docs/data/material/components/steppers/{ => demos/vertical-linear}/VerticalLinearStepper.tsx (98%)
 create mode 100644 docs/data/material/components/steppers/demos/vertical-linear/index.ts
 delete mode 100644 docs/data/material/components/switches/BasicSwitches.js
 delete mode 100644 docs/data/material/components/switches/BasicSwitches.tsx.preview
 delete mode 100644 docs/data/material/components/switches/ColorSwitches.js
 delete mode 100644 docs/data/material/components/switches/ColorSwitches.tsx.preview
 delete mode 100644 docs/data/material/components/switches/ControlledSwitches.js
 delete mode 100644 docs/data/material/components/switches/ControlledSwitches.tsx.preview
 delete mode 100644 docs/data/material/components/switches/CustomizedSwitches.js
 delete mode 100644 docs/data/material/components/switches/FormControlLabelPosition.js
 delete mode 100644 docs/data/material/components/switches/SwitchLabels.js
 delete mode 100644 docs/data/material/components/switches/SwitchLabels.tsx.preview
 delete mode 100644 docs/data/material/components/switches/SwitchesGroup.js
 delete mode 100644 docs/data/material/components/switches/SwitchesSize.js
 delete mode 100644 docs/data/material/components/switches/SwitchesSize.tsx.preview
 rename docs/data/material/components/switches/{ => demos/basic}/BasicSwitches.tsx (87%)
 create mode 100644 docs/data/material/components/switches/demos/basic/index.ts
 rename docs/data/material/components/switches/{ => demos/color}/ColorSwitches.tsx (94%)
 create mode 100644 docs/data/material/components/switches/demos/color/index.ts
 rename docs/data/material/components/switches/{ => demos/controlled}/ControlledSwitches.tsx (90%)
 create mode 100644 docs/data/material/components/switches/demos/controlled/index.ts
 rename docs/data/material/components/switches/{ => demos/customized}/CustomizedSwitches.tsx (99%)
 create mode 100644 docs/data/material/components/switches/demos/customized/index.ts
 rename docs/data/material/components/switches/{ => demos/form-control-label-position}/FormControlLabelPosition.tsx (95%)
 create mode 100644 docs/data/material/components/switches/demos/form-control-label-position/index.ts
 rename docs/data/material/components/switches/{ => demos/group}/SwitchesGroup.tsx (97%)
 create mode 100644 docs/data/material/components/switches/demos/group/index.ts
 rename docs/data/material/components/switches/{ => demos/labels}/SwitchLabels.tsx (91%)
 create mode 100644 docs/data/material/components/switches/demos/labels/index.ts
 rename docs/data/material/components/switches/{ => demos/size}/SwitchesSize.tsx (85%)
 create mode 100644 docs/data/material/components/switches/demos/size/index.ts
 delete mode 100644 docs/data/material/components/table/AccessibleTable.js
 delete mode 100644 docs/data/material/components/table/BasicTable.js
 delete mode 100644 docs/data/material/components/table/CollapsibleTable.js
 delete mode 100644 docs/data/material/components/table/ColumnGroupingTable.js
 delete mode 100644 docs/data/material/components/table/CustomPaginationActionsTable.js
 delete mode 100644 docs/data/material/components/table/CustomizedTables.js
 delete mode 100644 docs/data/material/components/table/DataTable.js
 delete mode 100644 docs/data/material/components/table/DataTable.tsx.preview
 delete mode 100644 docs/data/material/components/table/DenseTable.js
 delete mode 100644 docs/data/material/components/table/EnhancedTable.js
 delete mode 100644 docs/data/material/components/table/ReactVirtualizedTable.js
 delete mode 100644 docs/data/material/components/table/ReactVirtualizedTable.tsx.preview
 delete mode 100644 docs/data/material/components/table/SpanningTable.js
 delete mode 100644 docs/data/material/components/table/StickyHeadTable.js
 rename docs/data/material/components/table/{ => demos/accessible}/AccessibleTable.tsx (97%)
 create mode 100644 docs/data/material/components/table/demos/accessible/index.ts
 rename docs/data/material/components/table/{ => demos/basic}/BasicTable.tsx (98%)
 create mode 100644 docs/data/material/components/table/demos/basic/index.ts
 rename docs/data/material/components/table/{ => demos/collapsible}/CollapsibleTable.tsx (99%)
 create mode 100644 docs/data/material/components/table/demos/collapsible/index.ts
 rename docs/data/material/components/table/{ => demos/column-grouping}/ColumnGroupingTable.tsx (99%)
 create mode 100644 docs/data/material/components/table/demos/column-grouping/index.ts
 rename docs/data/material/components/table/{ => demos/custom-pagination-actions}/CustomPaginationActionsTable.tsx (99%)
 create mode 100644 docs/data/material/components/table/demos/custom-pagination-actions/index.ts
 rename docs/data/material/components/table/{ => demos/customized}/CustomizedTables.tsx (98%)
 create mode 100644 docs/data/material/components/table/demos/customized/index.ts
 rename docs/data/material/components/table/{ => demos/data}/DataTable.tsx (97%)
 create mode 100644 docs/data/material/components/table/demos/data/index.ts
 rename docs/data/material/components/table/{ => demos/dense}/DenseTable.tsx (98%)
 create mode 100644 docs/data/material/components/table/demos/dense/index.ts
 rename docs/data/material/components/table/{ => demos/enhanced}/EnhancedTable.tsx (99%)
 create mode 100644 docs/data/material/components/table/demos/enhanced/index.ts
 rename docs/data/material/components/table/{ => demos/react-virtualized}/ReactVirtualizedTable.tsx (98%)
 create mode 100644 docs/data/material/components/table/demos/react-virtualized/index.ts
 rename docs/data/material/components/table/{ => demos/spanning}/SpanningTable.tsx (98%)
 create mode 100644 docs/data/material/components/table/demos/spanning/index.ts
 rename docs/data/material/components/table/{ => demos/sticky-head}/StickyHeadTable.tsx (98%)
 create mode 100644 docs/data/material/components/table/demos/sticky-head/index.ts
 delete mode 100644 docs/data/material/components/tabs/AccessibleTabs1.js
 delete mode 100644 docs/data/material/components/tabs/AccessibleTabs1.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/AccessibleTabs2.js
 delete mode 100644 docs/data/material/components/tabs/AccessibleTabs2.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/BasicTabs.js
 delete mode 100644 docs/data/material/components/tabs/BasicTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/CenteredTabs.js
 delete mode 100644 docs/data/material/components/tabs/CenteredTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/ColorTabs.js
 delete mode 100644 docs/data/material/components/tabs/ColorTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/CustomizedTabs.js
 delete mode 100644 docs/data/material/components/tabs/DisabledTabs.js
 delete mode 100644 docs/data/material/components/tabs/DisabledTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/FullWidthTabs.js
 delete mode 100644 docs/data/material/components/tabs/IconLabelTabs.js
 delete mode 100644 docs/data/material/components/tabs/IconLabelTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/IconPositionTabs.js
 delete mode 100644 docs/data/material/components/tabs/IconPositionTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/IconTabs.js
 delete mode 100644 docs/data/material/components/tabs/IconTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/LabTabs.js
 delete mode 100644 docs/data/material/components/tabs/LabTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/NavTabs.js
 delete mode 100644 docs/data/material/components/tabs/NavTabs.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonAuto.js
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonForce.js
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/ScrollableTabsButtonVisible.js
 delete mode 100644 docs/data/material/components/tabs/TabsWrappedLabel.js
 delete mode 100644 docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview
 delete mode 100644 docs/data/material/components/tabs/VerticalTabs.js
 rename docs/data/material/components/tabs/{ => demos/accessible-tabs1}/AccessibleTabs1.tsx (92%)
 create mode 100644 docs/data/material/components/tabs/demos/accessible-tabs1/index.ts
 rename docs/data/material/components/tabs/{ => demos/accessible-tabs2}/AccessibleTabs2.tsx (92%)
 create mode 100644 docs/data/material/components/tabs/demos/accessible-tabs2/index.ts
 rename docs/data/material/components/tabs/{ => demos/basic}/BasicTabs.tsx (96%)
 create mode 100644 docs/data/material/components/tabs/demos/basic/index.ts
 rename docs/data/material/components/tabs/{ => demos/centered}/CenteredTabs.tsx (92%)
 create mode 100644 docs/data/material/components/tabs/demos/centered/index.ts
 rename docs/data/material/components/tabs/{ => demos/color}/ColorTabs.tsx (93%)
 create mode 100644 docs/data/material/components/tabs/demos/color/index.ts
 rename docs/data/material/components/tabs/{ => demos/customized}/CustomizedTabs.tsx (98%)
 create mode 100644 docs/data/material/components/tabs/demos/customized/index.ts
 rename docs/data/material/components/tabs/{ => demos/disabled}/DisabledTabs.tsx (91%)
 create mode 100644 docs/data/material/components/tabs/demos/disabled/index.ts
 rename docs/data/material/components/tabs/{ => demos/full-width}/FullWidthTabs.tsx (97%)
 create mode 100644 docs/data/material/components/tabs/demos/full-width/index.ts
 rename docs/data/material/components/tabs/{ => demos/icon-label}/IconLabelTabs.tsx (94%)
 create mode 100644 docs/data/material/components/tabs/demos/icon-label/index.ts
 rename docs/data/material/components/tabs/{ => demos/icon-position}/IconPositionTabs.tsx (95%)
 create mode 100644 docs/data/material/components/tabs/demos/icon-position/index.ts
 rename docs/data/material/components/tabs/{ => demos/icon}/IconTabs.tsx (94%)
 create mode 100644 docs/data/material/components/tabs/demos/icon/index.ts
 rename docs/data/material/components/tabs/{ => demos/lab}/LabTabs.tsx (95%)
 create mode 100644 docs/data/material/components/tabs/demos/lab/index.ts
 rename docs/data/material/components/tabs/{ => demos/nav}/NavTabs.tsx (97%)
 create mode 100644 docs/data/material/components/tabs/demos/nav/index.ts
 rename docs/data/material/components/tabs/{ => demos/scrollable-button-auto}/ScrollableTabsButtonAuto.tsx (94%)
 create mode 100644 docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts
 rename docs/data/material/components/tabs/{ => demos/scrollable-button-force}/ScrollableTabsButtonForce.tsx (94%)
 create mode 100644 docs/data/material/components/tabs/demos/scrollable-button-force/index.ts
 rename docs/data/material/components/tabs/{ => demos/scrollable-button-prevent}/ScrollableTabsButtonPrevent.tsx (94%)
 create mode 100644 docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts
 rename docs/data/material/components/tabs/{ => demos/scrollable-button-visible}/ScrollableTabsButtonVisible.tsx (96%)
 create mode 100644 docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts
 rename docs/data/material/components/tabs/{ => demos/vertical}/VerticalTabs.tsx (98%)
 create mode 100644 docs/data/material/components/tabs/demos/vertical/index.ts
 rename docs/data/material/components/tabs/{ => demos/wrapped-label}/TabsWrappedLabel.tsx (93%)
 create mode 100644 docs/data/material/components/tabs/demos/wrapped-label/index.ts
 delete mode 100644 docs/data/material/components/text-fields/BasicTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/BasicTextFields.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/ColorTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/ColorTextFields.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/ComposedTextField.js
 delete mode 100644 docs/data/material/components/text-fields/CustomizedInputBase.js
 delete mode 100644 docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
 delete mode 100644 docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/CustomizedInputsStyled.js
 delete mode 100644 docs/data/material/components/text-fields/FormPropsTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/FormattedInputs.js
 delete mode 100644 docs/data/material/components/text-fields/FullWidthTextField.js
 delete mode 100644 docs/data/material/components/text-fields/FullWidthTextField.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/HelperTextAligned.js
 delete mode 100644 docs/data/material/components/text-fields/HelperTextAligned.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/HelperTextMisaligned.js
 delete mode 100644 docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/InputAdornments.js
 delete mode 100644 docs/data/material/components/text-fields/InputSuffixShrink.js
 delete mode 100644 docs/data/material/components/text-fields/InputWithIcon.js
 delete mode 100644 docs/data/material/components/text-fields/Inputs.js
 delete mode 100644 docs/data/material/components/text-fields/Inputs.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/LayoutTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/LayoutTextFields.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/MultilineTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/SelectTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/StateTextFields.js
 delete mode 100644 docs/data/material/components/text-fields/StateTextFields.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/TextFieldHiddenLabel.js
 delete mode 100644 docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/TextFieldSizes.js
 delete mode 100644 docs/data/material/components/text-fields/UseFormControl.js
 delete mode 100644 docs/data/material/components/text-fields/UseFormControl.tsx.preview
 delete mode 100644 docs/data/material/components/text-fields/ValidationTextFields.js
 rename docs/data/material/components/text-fields/{ => demos/basic}/BasicTextFields.tsx (90%)
 create mode 100644 docs/data/material/components/text-fields/demos/basic/index.ts
 rename docs/data/material/components/text-fields/{ => demos/color}/ColorTextFields.tsx (91%)
 create mode 100644 docs/data/material/components/text-fields/demos/color/index.ts
 rename docs/data/material/components/text-fields/{ => demos/composed}/ComposedTextField.tsx (98%)
 create mode 100644 docs/data/material/components/text-fields/demos/composed/index.ts
 rename docs/data/material/components/text-fields/{ => demos/customized-input-base}/CustomizedInputBase.tsx (96%)
 create mode 100644 docs/data/material/components/text-fields/demos/customized-input-base/index.ts
 rename docs/data/material/components/text-fields/{ => demos/customized-inputs-style-overrides}/CustomizedInputsStyleOverrides.tsx (98%)
 create mode 100644 docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts
 rename docs/data/material/components/text-fields/{ => demos/customized-inputs-styled}/CustomizedInputsStyled.tsx (98%)
 create mode 100644 docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts
 rename docs/data/material/components/text-fields/{ => demos/form-props}/FormPropsTextFields.tsx (98%)
 create mode 100644 docs/data/material/components/text-fields/demos/form-props/index.ts
 rename docs/data/material/components/text-fields/{ => demos/formatted-inputs}/FormattedInputs.tsx (97%)
 create mode 100644 docs/data/material/components/text-fields/demos/formatted-inputs/index.ts
 rename docs/data/material/components/text-fields/{ => demos/full-width}/FullWidthTextField.tsx (84%)
 create mode 100644 docs/data/material/components/text-fields/demos/full-width/index.ts
 rename docs/data/material/components/text-fields/{ => demos/helper-text-aligned}/HelperTextAligned.tsx (90%)
 create mode 100644 docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts
 rename docs/data/material/components/text-fields/{ => demos/helper-text-misaligned}/HelperTextMisaligned.tsx (89%)
 create mode 100644 docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts
 rename docs/data/material/components/text-fields/{ => demos/hidden-label}/TextFieldHiddenLabel.tsx (92%)
 create mode 100644 docs/data/material/components/text-fields/demos/hidden-label/index.ts
 rename docs/data/material/components/text-fields/{ => demos/input-adornments}/InputAdornments.tsx (99%)
 create mode 100644 docs/data/material/components/text-fields/demos/input-adornments/index.ts
 rename docs/data/material/components/text-fields/{ => demos/input-suffix-shrink}/InputSuffixShrink.tsx (98%)
 create mode 100644 docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts
 rename docs/data/material/components/text-fields/{ => demos/input-with-icon}/InputWithIcon.tsx (97%)
 create mode 100644 docs/data/material/components/text-fields/demos/input-with-icon/index.ts
 rename docs/data/material/components/text-fields/{ => demos/inputs}/Inputs.tsx (91%)
 create mode 100644 docs/data/material/components/text-fields/demos/inputs/index.ts
 rename docs/data/material/components/text-fields/{ => demos/layout}/LayoutTextFields.tsx (94%)
 create mode 100644 docs/data/material/components/text-fields/demos/layout/index.ts
 rename docs/data/material/components/text-fields/{ => demos/multiline}/MultilineTextFields.tsx (97%)
 create mode 100644 docs/data/material/components/text-fields/demos/multiline/index.ts
 rename docs/data/material/components/text-fields/{ => demos/select}/SelectTextFields.tsx (98%)
 create mode 100644 docs/data/material/components/text-fields/demos/select/index.ts
 rename docs/data/material/components/text-fields/{ => demos/sizes}/TextFieldSizes.tsx (95%)
 create mode 100644 docs/data/material/components/text-fields/demos/sizes/index.ts
 rename docs/data/material/components/text-fields/{ => demos/state}/StateTextFields.tsx (93%)
 create mode 100644 docs/data/material/components/text-fields/demos/state/index.ts
 rename docs/data/material/components/text-fields/{ => demos/use-form-control}/UseFormControl.tsx (94%)
 create mode 100644 docs/data/material/components/text-fields/demos/use-form-control/index.ts
 rename docs/data/material/components/text-fields/{ => demos/validation}/ValidationTextFields.tsx (96%)
 create mode 100644 docs/data/material/components/text-fields/demos/validation/index.ts
 delete mode 100644 docs/data/material/components/textarea-autosize/EmptyTextarea.js
 delete mode 100644 docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview
 delete mode 100644 docs/data/material/components/textarea-autosize/MaxHeightTextarea.js
 delete mode 100644 docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview
 delete mode 100644 docs/data/material/components/textarea-autosize/MinHeightTextarea.js
 delete mode 100644 docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview
 rename docs/data/material/components/textarea-autosize/{ => demos/empty-textarea}/EmptyTextarea.tsx (84%)
 create mode 100644 docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts
 rename docs/data/material/components/textarea-autosize/{ => demos/max-height-textarea}/MaxHeightTextarea.tsx (90%)
 create mode 100644 docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts
 rename docs/data/material/components/textarea-autosize/{ => demos/min-height-textarea}/MinHeightTextarea.tsx (85%)
 create mode 100644 docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts
 delete mode 100644 docs/data/material/components/timeline/AlternateReverseTimeline.js
 delete mode 100644 docs/data/material/components/timeline/AlternateTimeline.js
 delete mode 100644 docs/data/material/components/timeline/BasicTimeline.js
 delete mode 100644 docs/data/material/components/timeline/ColorsTimeline.js
 delete mode 100644 docs/data/material/components/timeline/ColorsTimeline.tsx.preview
 delete mode 100644 docs/data/material/components/timeline/CustomizedTimeline.js
 delete mode 100644 docs/data/material/components/timeline/LeftAlignedTimeline.js
 delete mode 100644 docs/data/material/components/timeline/LeftPositionedTimeline.js
 delete mode 100644 docs/data/material/components/timeline/NoOppositeContent.js
 delete mode 100644 docs/data/material/components/timeline/OppositeContentTimeline.js
 delete mode 100644 docs/data/material/components/timeline/OutlinedTimeline.js
 delete mode 100644 docs/data/material/components/timeline/RightAlignedTimeline.js
 rename docs/data/material/components/timeline/{ => demos/alternate-reverse}/AlternateReverseTimeline.tsx (97%)
 create mode 100644 docs/data/material/components/timeline/demos/alternate-reverse/index.ts
 rename docs/data/material/components/timeline/{ => demos/alternate}/AlternateTimeline.tsx (96%)
 create mode 100644 docs/data/material/components/timeline/demos/alternate/index.ts
 rename docs/data/material/components/timeline/{ => demos/basic}/BasicTimeline.tsx (96%)
 create mode 100644 docs/data/material/components/timeline/demos/basic/index.ts
 rename docs/data/material/components/timeline/{ => demos/colors}/ColorsTimeline.tsx (94%)
 create mode 100644 docs/data/material/components/timeline/demos/colors/index.ts
 rename docs/data/material/components/timeline/{ => demos/customized}/CustomizedTimeline.tsx (98%)
 create mode 100644 docs/data/material/components/timeline/demos/customized/index.ts
 rename docs/data/material/components/timeline/{ => demos/left-aligned}/LeftAlignedTimeline.tsx (97%)
 create mode 100644 docs/data/material/components/timeline/demos/left-aligned/index.ts
 rename docs/data/material/components/timeline/{ => demos/left-positioned}/LeftPositionedTimeline.tsx (96%)
 create mode 100644 docs/data/material/components/timeline/demos/left-positioned/index.ts
 rename docs/data/material/components/timeline/{ => demos/no-opposite-content}/NoOppositeContent.tsx (96%)
 create mode 100644 docs/data/material/components/timeline/demos/no-opposite-content/index.ts
 rename docs/data/material/components/timeline/{ => demos/opposite-content}/OppositeContentTimeline.tsx (98%)
 create mode 100644 docs/data/material/components/timeline/demos/opposite-content/index.ts
 rename docs/data/material/components/timeline/{ => demos/outlined}/OutlinedTimeline.tsx (97%)
 create mode 100644 docs/data/material/components/timeline/demos/outlined/index.ts
 rename docs/data/material/components/timeline/{ => demos/right-aligned}/RightAlignedTimeline.tsx (96%)
 create mode 100644 docs/data/material/components/timeline/demos/right-aligned/index.ts
 delete mode 100644 docs/data/material/components/toggle-button/ColorToggleButton.js
 delete mode 100644 docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview
 delete mode 100644 docs/data/material/components/toggle-button/CustomizedDividers.js
 delete mode 100644 docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js
 delete mode 100644 docs/data/material/components/toggle-button/StandaloneToggleButton.js
 delete mode 100644 docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview
 delete mode 100644 docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js
 delete mode 100644 docs/data/material/components/toggle-button/ToggleButtonSizes.js
 delete mode 100644 docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview
 delete mode 100644 docs/data/material/components/toggle-button/ToggleButtons.js
 delete mode 100644 docs/data/material/components/toggle-button/ToggleButtonsMultiple.js
 delete mode 100644 docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js
 delete mode 100644 docs/data/material/components/toggle-button/VerticalToggleButtons.js
 delete mode 100644 docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview
 rename docs/data/material/components/toggle-button/{ => demos/color}/ColorToggleButton.tsx (94%)
 create mode 100644 docs/data/material/components/toggle-button/demos/color/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/customized-dividers}/CustomizedDividers.tsx (98%)
 create mode 100644 docs/data/material/components/toggle-button/demos/customized-dividers/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/horizontal-spacing}/HorizontalSpacingToggleButton.tsx (98%)
 create mode 100644 docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/multiple}/ToggleButtonsMultiple.tsx (96%)
 create mode 100644 docs/data/material/components/toggle-button/demos/multiple/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/not-empty}/ToggleButtonNotEmpty.tsx (97%)
 create mode 100644 docs/data/material/components/toggle-button/demos/not-empty/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/sizes}/ToggleButtonSizes.tsx (97%)
 create mode 100644 docs/data/material/components/toggle-button/demos/sizes/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/standalone}/StandaloneToggleButton.tsx (90%)
 create mode 100644 docs/data/material/components/toggle-button/demos/standalone/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/toggle-buttons}/ToggleButtons.tsx (96%)
 create mode 100644 docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/vertical-spacing}/VerticalSpacingToggleButton.tsx (98%)
 create mode 100644 docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts
 rename docs/data/material/components/toggle-button/{ => demos/vertical}/VerticalToggleButtons.tsx (95%)
 create mode 100644 docs/data/material/components/toggle-button/demos/vertical/index.ts
 delete mode 100644 docs/data/material/components/tooltips/AccessibilityTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/AnchorElTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/ArrowTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/ArrowTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/BasicTooltip.js
 delete mode 100644 docs/data/material/components/tooltips/BasicTooltip.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/ControlledTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/ControlledTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/CustomizedTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/DelayTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/DelayTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/DisabledTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/FollowCursorTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/NonInteractiveTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview
 delete mode 100644 docs/data/material/components/tooltips/PositionedTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/TooltipMargin.js
 delete mode 100644 docs/data/material/components/tooltips/TooltipOffset.js
 delete mode 100644 docs/data/material/components/tooltips/TransitionsTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/TriggersTooltips.js
 delete mode 100644 docs/data/material/components/tooltips/VariableWidth.js
 delete mode 100644 docs/data/material/components/tooltips/VariableWidth.tsx.preview
 rename docs/data/material/components/tooltips/{ => demos/accessibility}/AccessibilityTooltips.tsx (90%)
 create mode 100644 docs/data/material/components/tooltips/demos/accessibility/index.ts
 rename docs/data/material/components/tooltips/{ => demos/anchor-el}/AnchorElTooltips.tsx (96%)
 create mode 100644 docs/data/material/components/tooltips/demos/anchor-el/index.ts
 rename docs/data/material/components/tooltips/{ => demos/arrow}/ArrowTooltips.tsx (84%)
 create mode 100644 docs/data/material/components/tooltips/demos/arrow/index.ts
 rename docs/data/material/components/tooltips/{ => demos/basic}/BasicTooltip.tsx (87%)
 create mode 100644 docs/data/material/components/tooltips/demos/basic/index.ts
 rename docs/data/material/components/tooltips/{ => demos/controlled}/ControlledTooltips.tsx (92%)
 create mode 100644 docs/data/material/components/tooltips/demos/controlled/index.ts
 rename docs/data/material/components/tooltips/{ => demos/customized}/CustomizedTooltips.tsx (97%)
 create mode 100644 docs/data/material/components/tooltips/demos/customized/index.ts
 rename docs/data/material/components/tooltips/{ => demos/delay}/DelayTooltips.tsx (85%)
 create mode 100644 docs/data/material/components/tooltips/demos/delay/index.ts
 rename docs/data/material/components/tooltips/{ => demos/disabled}/DisabledTooltips.tsx (87%)
 create mode 100644 docs/data/material/components/tooltips/demos/disabled/index.ts
 rename docs/data/material/components/tooltips/{ => demos/follow-cursor}/FollowCursorTooltips.tsx (89%)
 create mode 100644 docs/data/material/components/tooltips/demos/follow-cursor/index.ts
 rename docs/data/material/components/tooltips/{ => demos/margin}/TooltipMargin.tsx (96%)
 create mode 100644 docs/data/material/components/tooltips/demos/margin/index.ts
 rename docs/data/material/components/tooltips/{ => demos/non-interactive}/NonInteractiveTooltips.tsx (85%)
 create mode 100644 docs/data/material/components/tooltips/demos/non-interactive/index.ts
 rename docs/data/material/components/tooltips/{ => demos/offset}/TooltipOffset.tsx (92%)
 create mode 100644 docs/data/material/components/tooltips/demos/offset/index.ts
 rename docs/data/material/components/tooltips/{ => demos/positioned}/PositionedTooltips.tsx (97%)
 create mode 100644 docs/data/material/components/tooltips/demos/positioned/index.ts
 rename docs/data/material/components/tooltips/{ => demos/transitions}/TransitionsTooltips.tsx (93%)
 create mode 100644 docs/data/material/components/tooltips/demos/transitions/index.ts
 rename docs/data/material/components/tooltips/{ => demos/triggers}/TriggersTooltips.tsx (97%)
 create mode 100644 docs/data/material/components/tooltips/demos/triggers/index.ts
 rename docs/data/material/components/tooltips/{ => demos/variable-width}/VariableWidth.tsx (96%)
 create mode 100644 docs/data/material/components/tooltips/demos/variable-width/index.ts
 delete mode 100644 docs/data/material/components/transfer-list/SelectAllTransferList.js
 delete mode 100644 docs/data/material/components/transfer-list/TransferList.js
 rename docs/data/material/components/transfer-list/{ => demos/select-all}/SelectAllTransferList.tsx (99%)
 create mode 100644 docs/data/material/components/transfer-list/demos/select-all/index.ts
 rename docs/data/material/components/transfer-list/{ => demos/transfer-list}/TransferList.tsx (98%)
 create mode 100644 docs/data/material/components/transfer-list/demos/transfer-list/index.ts
 delete mode 100644 docs/data/material/components/transitions/SimpleCollapse.js
 delete mode 100644 docs/data/material/components/transitions/SimpleFade.js
 delete mode 100644 docs/data/material/components/transitions/SimpleFade.tsx.preview
 delete mode 100644 docs/data/material/components/transitions/SimpleGrow.js
 delete mode 100644 docs/data/material/components/transitions/SimpleGrow.tsx.preview
 delete mode 100644 docs/data/material/components/transitions/SimpleSlide.js
 delete mode 100644 docs/data/material/components/transitions/SimpleSlide.tsx.preview
 delete mode 100644 docs/data/material/components/transitions/SimpleZoom.js
 delete mode 100644 docs/data/material/components/transitions/SimpleZoom.tsx.preview
 delete mode 100644 docs/data/material/components/transitions/SlideFromContainer.js
 delete mode 100644 docs/data/material/components/transitions/SlideFromContainer.tsx.preview
 delete mode 100644 docs/data/material/components/transitions/TransitionGroupExample.js
 delete mode 100644 docs/data/material/components/transitions/TransitionGroupExample.tsx.preview
 rename docs/data/material/components/transitions/{ => demos/group-example}/TransitionGroupExample.tsx (97%)
 create mode 100644 docs/data/material/components/transitions/demos/group-example/index.ts
 rename docs/data/material/components/transitions/{ => demos/simple-collapse}/SimpleCollapse.tsx (97%)
 create mode 100644 docs/data/material/components/transitions/demos/simple-collapse/index.ts
 rename docs/data/material/components/transitions/{ => demos/simple-fade}/SimpleFade.tsx (95%)
 create mode 100644 docs/data/material/components/transitions/demos/simple-fade/index.ts
 rename docs/data/material/components/transitions/{ => demos/simple-grow}/SimpleGrow.tsx (96%)
 create mode 100644 docs/data/material/components/transitions/demos/simple-grow/index.ts
 rename docs/data/material/components/transitions/{ => demos/simple-slide}/SimpleSlide.tsx (95%)
 create mode 100644 docs/data/material/components/transitions/demos/simple-slide/index.ts
 rename docs/data/material/components/transitions/{ => demos/simple-zoom}/SimpleZoom.tsx (95%)
 create mode 100644 docs/data/material/components/transitions/demos/simple-zoom/index.ts
 rename docs/data/material/components/transitions/{ => demos/slide-from-container}/SlideFromContainer.tsx (96%)
 create mode 100644 docs/data/material/components/transitions/demos/slide-from-container/index.ts
 delete mode 100644 docs/data/material/components/typography/Types.js
 delete mode 100644 docs/data/material/components/typography/TypographyTheme.js
 delete mode 100644 docs/data/material/components/typography/TypographyTheme.tsx.preview
 rename docs/data/material/components/typography/{ => demos/theme}/TypographyTheme.tsx (74%)
 create mode 100644 docs/data/material/components/typography/demos/theme/index.ts
 rename docs/data/material/components/typography/{ => demos/types}/Types.tsx (97%)
 create mode 100644 docs/data/material/components/typography/demos/types/index.ts
 delete mode 100644 docs/data/material/components/use-media-query/JavaScriptMedia.js
 delete mode 100644 docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview
 delete mode 100644 docs/data/material/components/use-media-query/ServerSide.js
 delete mode 100644 docs/data/material/components/use-media-query/ServerSide.tsx.preview
 delete mode 100644 docs/data/material/components/use-media-query/SimpleMediaQuery.js
 delete mode 100644 docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview
 delete mode 100644 docs/data/material/components/use-media-query/ThemeHelper.js
 delete mode 100644 docs/data/material/components/use-media-query/ThemeHelper.tsx.preview
 delete mode 100644 docs/data/material/components/use-media-query/UseWidth.js
 delete mode 100644 docs/data/material/components/use-media-query/UseWidth.tsx.preview
 rename docs/data/material/components/use-media-query/{ => demos/java-script-media}/JavaScriptMedia.tsx (86%)
 create mode 100644 docs/data/material/components/use-media-query/demos/java-script-media/index.ts
 rename docs/data/material/components/use-media-query/{ => demos/server-side}/ServerSide.tsx (94%)
 create mode 100644 docs/data/material/components/use-media-query/demos/server-side/index.ts
 rename docs/data/material/components/use-media-query/{ => demos/simple-media-query}/SimpleMediaQuery.tsx (83%)
 create mode 100644 docs/data/material/components/use-media-query/demos/simple-media-query/index.ts
 rename docs/data/material/components/use-media-query/{ => demos/theme-helper}/ThemeHelper.tsx (91%)
 create mode 100644 docs/data/material/components/use-media-query/demos/theme-helper/index.ts
 rename docs/data/material/components/use-media-query/{ => demos/use-width}/UseWidth.tsx (96%)
 create mode 100644 docs/data/material/components/use-media-query/demos/use-width/index.ts
 delete mode 100644 docs/data/material/customization/breakpoints/MediaQuery.js
 delete mode 100644 docs/data/material/customization/breakpoints/MediaQuery.tsx.preview
 rename docs/data/material/customization/breakpoints/{ => demos/media-query}/MediaQuery.tsx (93%)
 create mode 100644 docs/data/material/customization/breakpoints/demos/media-query/index.ts
 rename docs/data/material/customization/color/{ => demos/color}/Color.js (100%)
 create mode 100644 docs/data/material/customization/color/demos/color/index.ts
 rename docs/data/material/customization/color/{ => demos/tool}/ColorDemo.js (100%)
 rename docs/data/material/customization/color/{ => demos/tool}/ColorTool.js (99%)
 create mode 100644 docs/data/material/customization/color/demos/tool/index.ts
 delete mode 100644 docs/data/material/customization/container-queries/BasicContainerQueries.js
 delete mode 100644 docs/data/material/customization/container-queries/SxPropContainerQueries.js
 rename docs/data/material/customization/container-queries/{ => demos}/ResizableDemo.js (100%)
 rename docs/data/material/customization/container-queries/{ => demos/basic}/BasicContainerQueries.tsx (96%)
 create mode 100644 docs/data/material/customization/container-queries/demos/basic/index.ts
 rename docs/data/material/customization/container-queries/{ => demos/sx-prop}/SxPropContainerQueries.tsx (96%)
 create mode 100644 docs/data/material/customization/container-queries/demos/sx-prop/index.ts
 delete mode 100644 docs/data/material/customization/creating-themed-components/StatFullTemplate.js
 delete mode 100644 docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview
 rename docs/data/material/customization/creating-themed-components/{ => demos/stat-component}/StatComponent.js (100%)
 create mode 100644 docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts
 rename docs/data/material/customization/creating-themed-components/{ => demos/stat-full-template}/StatFullTemplate.tsx (97%)
 create mode 100644 docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts
 rename docs/data/material/customization/creating-themed-components/{ => demos/stat-slots}/StatSlots.js (100%)
 create mode 100644 docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts
 delete mode 100644 docs/data/material/customization/css-layers/CssLayersCaveat.js
 delete mode 100644 docs/data/material/customization/css-layers/CssLayersInput.js
 rename docs/data/material/customization/css-layers/{ => demos/caveat}/CssLayersCaveat.tsx (98%)
 create mode 100644 docs/data/material/customization/css-layers/demos/caveat/index.ts
 rename docs/data/material/customization/css-layers/{ => demos/input}/CssLayersInput.tsx (96%)
 create mode 100644 docs/data/material/customization/css-layers/demos/input/index.ts
 delete mode 100644 docs/data/material/customization/css-theme-variables/AliasColorVariables.js
 delete mode 100644 docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview
 delete mode 100644 docs/data/material/customization/css-theme-variables/ContrastTextDemo.js
 delete mode 100644 docs/data/material/customization/css-theme-variables/CustomColorSpace.js
 delete mode 100644 docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx
 delete mode 100644 docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js
 delete mode 100644 docs/data/material/customization/css-theme-variables/ModernColorSpaces.js
 delete mode 100644 docs/data/material/customization/css-theme-variables/NativeCssColors.js
 delete mode 100644 docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js
 rename docs/data/material/customization/css-theme-variables/{ => demos/alias-color-variables}/AliasColorVariables.tsx (94%)
 create mode 100644 docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts
 rename docs/data/material/customization/css-theme-variables/{ => demos/contrast-text-demo}/ContrastTextDemo.tsx (98%)
 create mode 100644 docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts
 rename docs/data/material/customization/css-theme-variables/{ => demos/disable-transition-on-change}/DisableTransitionOnChange.tsx (97%)
 create mode 100644 docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts
 rename docs/data/material/customization/css-theme-variables/{ => demos/modern-color-spaces}/ModernColorSpaces.tsx (97%)
 create mode 100644 docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts
 rename docs/data/material/customization/css-theme-variables/{ => demos/native-css-colors}/NativeCssColors.tsx (96%)
 create mode 100644 docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts
 rename docs/data/material/customization/css-theme-variables/{ => demos/theme-color-functions}/ThemeColorFunctions.tsx (98%)
 create mode 100644 docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts
 delete mode 100644 docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js
 delete mode 100644 docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx
 delete mode 100644 docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview
 delete mode 100644 docs/data/material/customization/dark-mode/ToggleColorMode.js
 delete mode 100644 docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview
 rename docs/data/material/customization/dark-mode/{ => demos/dark-theme}/DarkTheme.js (100%)
 create mode 100644 docs/data/material/customization/dark-mode/demos/dark-theme/index.ts
 rename docs/data/material/customization/dark-mode/{ => demos/toggle-color-mode}/ToggleColorMode.tsx (97%)
 create mode 100644 docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts
 rename docs/data/material/customization/default-theme/{ => demos/default-theme}/DefaultTheme.js (100%)
 create mode 100644 docs/data/material/customization/default-theme/demos/default-theme/index.ts
 rename docs/data/material/customization/density/{ => demos/tool}/DensityTool.js (100%)
 create mode 100644 docs/data/material/customization/density/demos/tool/index.ts
 delete mode 100644 docs/data/material/customization/how-to-customize/DevTools.js
 delete mode 100644 docs/data/material/customization/how-to-customize/DevTools.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/DynamicCSS.js
 delete mode 100644 docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/DynamicCSSVariables.js
 delete mode 100644 docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/GlobalCssOverride.js
 delete mode 100644 docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
 delete mode 100644 docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js
 delete mode 100644 docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/OverrideCssBaseline.js
 delete mode 100644 docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/StyledCustomization.js
 delete mode 100644 docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview
 delete mode 100644 docs/data/material/customization/how-to-customize/SxProp.js
 delete mode 100644 docs/data/material/customization/how-to-customize/SxProp.tsx
 delete mode 100644 docs/data/material/customization/how-to-customize/SxProp.tsx.preview
 rename docs/data/material/customization/how-to-customize/{ => demos/dev-tools}/DevTools.tsx (86%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/dynamic-css-variables}/DynamicCSSVariables.tsx (96%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/dynamic-css}/DynamicCSS.tsx (97%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/global-css-override-theme}/GlobalCssOverrideTheme.tsx (88%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/global-css-override}/GlobalCssOverride.tsx (86%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/override-callback-css-baseline}/OverrideCallbackCssBaseline.tsx (92%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/override-css-baseline}/OverrideCssBaseline.tsx (91%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts
 rename docs/data/material/customization/how-to-customize/{ => demos/styled-customization}/StyledCustomization.tsx (88%)
 create mode 100644 docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts
 create mode 100644 docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx
 create mode 100644 docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts
 delete mode 100644 docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.js
 delete mode 100644 docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx.preview
 delete mode 100644 docs/data/material/customization/overriding-component-structure/OverridingRootSlot.js
 delete mode 100644 docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx.preview
 rename docs/data/material/customization/overriding-component-structure/{ => demos/overriding-internal-slot}/OverridingInternalSlot.tsx (94%)
 create mode 100644 docs/data/material/customization/overriding-component-structure/demos/overriding-internal-slot/index.ts
 rename docs/data/material/customization/overriding-component-structure/{ => demos/overriding-root-slot}/OverridingRootSlot.tsx (85%)
 create mode 100644 docs/data/material/customization/overriding-component-structure/demos/overriding-root-slot/index.ts
 delete mode 100644 docs/data/material/customization/palette/AddingColorTokens.js
 delete mode 100644 docs/data/material/customization/palette/ContrastThreshold.js
 delete mode 100644 docs/data/material/customization/palette/ContrastThreshold.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/CustomColor.js
 delete mode 100644 docs/data/material/customization/palette/CustomColor.tsx
 delete mode 100644 docs/data/material/customization/palette/CustomColor.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/ManuallyProvideCustomColor.js
 delete mode 100644 docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
 delete mode 100644 docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/Palette.js
 delete mode 100644 docs/data/material/customization/palette/Palette.tsx
 delete mode 100644 docs/data/material/customization/palette/Palette.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/ToggleColorMode.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/TonalOffset.js
 delete mode 100644 docs/data/material/customization/palette/TonalOffset.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/UsingAugmentColor.js
 delete mode 100644 docs/data/material/customization/palette/UsingColorObject.js
 delete mode 100644 docs/data/material/customization/palette/UsingColorObject.tsx.preview
 delete mode 100644 docs/data/material/customization/palette/UsingStylesUtils.js
 rename docs/data/material/customization/palette/{ => demos/adding-color-tokens}/AddingColorTokens.tsx (97%)
 create mode 100644 docs/data/material/customization/palette/demos/adding-color-tokens/index.ts
 rename docs/data/material/customization/palette/{ => demos/contrast-threshold}/ContrastThreshold.tsx (95%)
 create mode 100644 docs/data/material/customization/palette/demos/contrast-threshold/index.ts
 rename docs/data/material/customization/palette/{ => demos/intentions}/Intentions.js (100%)
 create mode 100644 docs/data/material/customization/palette/demos/intentions/index.ts
 rename docs/data/material/customization/palette/{ => demos/manually-provide-color}/ManuallyProvidePaletteColor.tsx (97%)
 create mode 100644 docs/data/material/customization/palette/demos/manually-provide-color/index.ts
 rename docs/data/material/customization/palette/{ => demos/manually-provide-custom-color}/ManuallyProvideCustomColor.tsx (97%)
 create mode 100644 docs/data/material/customization/palette/demos/manually-provide-custom-color/index.ts
 rename docs/data/material/customization/palette/{ => demos/tonal-offset}/TonalOffset.tsx (97%)
 create mode 100644 docs/data/material/customization/palette/demos/tonal-offset/index.ts
 rename docs/data/material/customization/palette/{ => demos/using-augment-color}/UsingAugmentColor.tsx (98%)
 create mode 100644 docs/data/material/customization/palette/demos/using-augment-color/index.ts
 rename docs/data/material/customization/palette/{ => demos/using-color-object}/UsingColorObject.tsx (92%)
 create mode 100644 docs/data/material/customization/palette/demos/using-color-object/index.ts
 rename docs/data/material/customization/palette/{ => demos/using-styles-utils}/UsingStylesUtils.tsx (98%)
 create mode 100644 docs/data/material/customization/palette/demos/using-styles-utils/index.ts
 delete mode 100644 docs/data/material/customization/right-to-left/RtlDemo.js
 delete mode 100644 docs/data/material/customization/right-to-left/RtlDemo.tsx.preview
 delete mode 100644 docs/data/material/customization/right-to-left/RtlOptOut.js
 delete mode 100644 docs/data/material/customization/right-to-left/RtlOptOut.tsx.preview
 rename docs/data/material/customization/right-to-left/{ => demos/rtl-demo}/RtlDemo.tsx (96%)
 create mode 100644 docs/data/material/customization/right-to-left/demos/rtl-demo/index.ts
 rename docs/data/material/customization/right-to-left/{ => demos/rtl-opt-out}/RtlOptOut.tsx (95%)
 create mode 100644 docs/data/material/customization/right-to-left/demos/rtl-opt-out/index.ts
 rename docs/data/material/customization/shadow-dom/{ => demos/demo-no-snap}/ShadowDOMDemoNoSnap.js (100%)
 create mode 100644 docs/data/material/customization/shadow-dom/demos/demo-no-snap/index.ts
 delete mode 100644 docs/data/material/customization/theme-components/DefaultProps.js
 delete mode 100644 docs/data/material/customization/theme-components/DefaultProps.tsx.preview
 delete mode 100644 docs/data/material/customization/theme-components/GlobalCss.js
 delete mode 100644 docs/data/material/customization/theme-components/GlobalCss.tsx
 delete mode 100644 docs/data/material/customization/theme-components/GlobalCss.tsx.preview
 delete mode 100644 docs/data/material/customization/theme-components/GlobalThemeOverride.js
 delete mode 100644 docs/data/material/customization/theme-components/GlobalThemeOverride.tsx.preview
 delete mode 100644 docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js
 delete mode 100644 docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx.preview
 delete mode 100644 docs/data/material/customization/theme-components/GlobalThemeVariants.js
 delete mode 100644 docs/data/material/customization/theme-components/GlobalThemeVariants.tsx.preview
 delete mode 100644 docs/data/material/customization/theme-components/ThemeVariables.js
 delete mode 100644 docs/data/material/customization/theme-components/ThemeVariables.tsx.preview
 rename docs/data/material/customization/theme-components/{ => demos/default-props}/DefaultProps.tsx (92%)
 create mode 100644 docs/data/material/customization/theme-components/demos/default-props/index.ts
 rename docs/data/material/customization/theme-components/{ => demos/global-theme-override-sx}/GlobalThemeOverrideSx.tsx (95%)
 create mode 100644 docs/data/material/customization/theme-components/demos/global-theme-override-sx/index.ts
 rename docs/data/material/customization/theme-components/{ => demos/global-theme-override}/GlobalThemeOverride.tsx (90%)
 create mode 100644 docs/data/material/customization/theme-components/demos/global-theme-override/index.ts
 rename docs/data/material/customization/theme-components/{ => demos/global-theme-variants}/GlobalThemeVariants.tsx (97%)
 create mode 100644 docs/data/material/customization/theme-components/demos/global-theme-variants/index.ts
 rename docs/data/material/customization/theme-components/{ => demos/theme-variables}/ThemeVariables.tsx (89%)
 create mode 100644 docs/data/material/customization/theme-components/demos/theme-variables/index.ts
 delete mode 100644 docs/data/material/customization/theming/CustomStyles.js
 delete mode 100644 docs/data/material/customization/theming/CustomStyles.tsx.preview
 delete mode 100644 docs/data/material/customization/theming/ThemeNesting.js
 delete mode 100644 docs/data/material/customization/theming/ThemeNesting.tsx.preview
 delete mode 100644 docs/data/material/customization/theming/ThemeNestingExtend.js
 rename docs/data/material/customization/theming/{ => demos/custom-styles}/CustomStyles.tsx (94%)
 create mode 100644 docs/data/material/customization/theming/demos/custom-styles/index.ts
 rename docs/data/material/customization/theming/{ => demos/theme-nesting-extend}/ThemeNestingExtend.tsx (95%)
 create mode 100644 docs/data/material/customization/theming/demos/theme-nesting-extend/index.ts
 rename docs/data/material/customization/theming/{ => demos/theme-nesting}/ThemeNesting.tsx (93%)
 create mode 100644 docs/data/material/customization/theming/demos/theme-nesting/index.ts
 delete mode 100644 docs/data/material/customization/transitions/TransitionHover.js
 delete mode 100644 docs/data/material/customization/transitions/TransitionHover.tsx.preview
 rename docs/data/material/customization/transitions/{ => demos/hover}/TransitionHover.tsx (94%)
 create mode 100644 docs/data/material/customization/transitions/demos/hover/index.ts
 delete mode 100644 docs/data/material/customization/typography/CustomResponsiveFontSizes.js
 delete mode 100644 docs/data/material/customization/typography/CustomResponsiveFontSizes.tsx.preview
 delete mode 100644 docs/data/material/customization/typography/FontSizeTheme.js
 delete mode 100644 docs/data/material/customization/typography/FontSizeTheme.tsx.preview
 delete mode 100644 docs/data/material/customization/typography/ResponsiveFontSizes.js
 delete mode 100644 docs/data/material/customization/typography/ResponsiveFontSizes.tsx.preview
 delete mode 100644 docs/data/material/customization/typography/TypographyCustomVariant.js
 delete mode 100644 docs/data/material/customization/typography/TypographyCustomVariant.tsx.preview
 delete mode 100644 docs/data/material/customization/typography/TypographyVariants.js
 delete mode 100644 docs/data/material/customization/typography/TypographyVariants.tsx.preview
 rename docs/data/material/customization/typography/{ => demos/custom-responsive-font-sizes}/CustomResponsiveFontSizes.tsx (91%)
 create mode 100644 docs/data/material/customization/typography/demos/custom-responsive-font-sizes/index.ts
 rename docs/data/material/customization/typography/{ => demos/custom-variant}/TypographyCustomVariant.tsx (95%)
 create mode 100644 docs/data/material/customization/typography/demos/custom-variant/index.ts
 rename docs/data/material/customization/typography/{ => demos/font-size-theme}/FontSizeTheme.tsx (90%)
 create mode 100644 docs/data/material/customization/typography/demos/font-size-theme/index.ts
 rename docs/data/material/customization/typography/{ => demos/responsive-font-sizes-chart}/ResponsiveFontSizesChart.js (100%)
 create mode 100644 docs/data/material/customization/typography/demos/responsive-font-sizes-chart/index.ts
 rename docs/data/material/customization/typography/{ => demos/responsive-font-sizes}/ResponsiveFontSizes.tsx (91%)
 create mode 100644 docs/data/material/customization/typography/demos/responsive-font-sizes/index.ts
 rename docs/data/material/customization/typography/{ => demos/variants}/TypographyVariants.tsx (92%)
 create mode 100644 docs/data/material/customization/typography/demos/variants/index.ts
 rename docs/data/material/getting-started/supported-components/{ => demos/material-ui-components}/MaterialUIComponents.js (100%)
 create mode 100644 docs/data/material/getting-started/supported-components/demos/material-ui-components/index.ts
 delete mode 100644 docs/data/material/getting-started/usage/ButtonUsage.js
 delete mode 100644 docs/data/material/getting-started/usage/ButtonUsage.tsx.preview
 rename docs/data/material/getting-started/usage/{ => demos/button}/ButtonUsage.tsx (50%)
 create mode 100644 docs/data/material/getting-started/usage/demos/button/index.ts
 rename docs/data/material/getting-started/versions/{ => demos/latest}/LatestVersions.js (100%)
 create mode 100644 docs/data/material/getting-started/versions/demos/latest/index.ts
 rename docs/data/material/getting-started/versions/{ => demos/released}/ReleasedVersions.js (100%)
 create mode 100644 docs/data/material/getting-started/versions/demos/released/index.ts
 delete mode 100644 docs/data/material/guides/building-extensible-themes/ExtensibleThemes.js
 delete mode 100644 docs/data/material/guides/building-extensible-themes/ExtensibleThemes.tsx.preview
 rename docs/data/material/guides/building-extensible-themes/{ => demos/extensible-themes}/ExtensibleThemes.tsx (98%)
 create mode 100644 docs/data/material/guides/building-extensible-themes/demos/extensible-themes/index.ts
 delete mode 100644 docs/data/material/guides/composition/Composition.js
 delete mode 100644 docs/data/material/guides/composition/Composition.tsx.preview
 rename docs/data/material/guides/composition/{ => demos/composition}/Composition.tsx (89%)
 create mode 100644 docs/data/material/guides/composition/demos/composition/index.ts
 delete mode 100644 docs/data/material/guides/localization/Locales.js
 rename docs/data/material/guides/localization/{ => demos/locales}/Locales.tsx (96%)
 create mode 100644 docs/data/material/guides/localization/demos/locales/index.ts
 delete mode 100644 docs/data/material/integrations/interoperability/EmotionCSS.js
 delete mode 100644 docs/data/material/integrations/interoperability/EmotionCSS.tsx.preview
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponents.js
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponents.tsx.preview
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponentsDeep.js
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponentsDeep.tsx.preview
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponentsPortal.js
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponentsPortal.tsx.preview
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponentsTheme.js
 delete mode 100644 docs/data/material/integrations/interoperability/StyledComponentsTheme.tsx.preview
 rename docs/data/material/integrations/interoperability/{ => demos/emotion-css}/EmotionCSS.tsx (89%)
 create mode 100644 docs/data/material/integrations/interoperability/demos/emotion-css/index.ts
 rename docs/data/material/integrations/interoperability/{ => demos/styled-components-deep}/StyledComponentsDeep.tsx (90%)
 create mode 100644 docs/data/material/integrations/interoperability/demos/styled-components-deep/index.ts
 rename docs/data/material/integrations/interoperability/{ => demos/styled-components-portal}/StyledComponentsPortal.tsx (92%)
 create mode 100644 docs/data/material/integrations/interoperability/demos/styled-components-portal/index.ts
 rename docs/data/material/integrations/interoperability/{ => demos/styled-components-theme}/StyledComponentsTheme.tsx (92%)
 create mode 100644 docs/data/material/integrations/interoperability/demos/styled-components-theme/index.ts
 rename docs/data/material/integrations/interoperability/{ => demos/styled-components}/StyledComponents.tsx (88%)
 create mode 100644 docs/data/material/integrations/interoperability/demos/styled-components/index.ts
 delete mode 100644 docs/data/material/integrations/routing/ButtonDemo.js
 delete mode 100644 docs/data/material/integrations/routing/ButtonDemo.tsx.preview
 delete mode 100644 docs/data/material/integrations/routing/ButtonRouter.js
 delete mode 100644 docs/data/material/integrations/routing/ButtonRouter.tsx.preview
 delete mode 100644 docs/data/material/integrations/routing/LinkDemo.js
 delete mode 100644 docs/data/material/integrations/routing/LinkDemo.tsx.preview
 delete mode 100644 docs/data/material/integrations/routing/LinkRouter.js
 delete mode 100644 docs/data/material/integrations/routing/LinkRouter.tsx.preview
 delete mode 100644 docs/data/material/integrations/routing/LinkRouterWithTheme.js
 delete mode 100644 docs/data/material/integrations/routing/LinkRouterWithTheme.tsx.preview
 delete mode 100644 docs/data/material/integrations/routing/ListRouter.js
 delete mode 100644 docs/data/material/integrations/routing/TabsRouter.js
 delete mode 100644 docs/data/material/integrations/routing/TabsRouter.tsx.preview
 rename docs/data/material/integrations/routing/{ => demos/button-demo}/ButtonDemo.tsx (78%)
 create mode 100644 docs/data/material/integrations/routing/demos/button-demo/index.ts
 rename docs/data/material/integrations/routing/{ => demos/button-router}/ButtonRouter.tsx (94%)
 create mode 100644 docs/data/material/integrations/routing/demos/button-router/index.ts
 rename docs/data/material/integrations/routing/{ => demos/link-demo}/LinkDemo.tsx (80%)
 create mode 100644 docs/data/material/integrations/routing/demos/link-demo/index.ts
 rename docs/data/material/integrations/routing/{ => demos/link-router-with-theme}/LinkRouterWithTheme.tsx (96%)
 create mode 100644 docs/data/material/integrations/routing/demos/link-router-with-theme/index.ts
 rename docs/data/material/integrations/routing/{ => demos/link-router}/LinkRouter.tsx (95%)
 create mode 100644 docs/data/material/integrations/routing/demos/link-router/index.ts
 rename docs/data/material/integrations/routing/{ => demos/list-router}/ListRouter.tsx (98%)
 create mode 100644 docs/data/material/integrations/routing/demos/list-router/index.ts
 rename docs/data/material/integrations/routing/{ => demos/tabs-router}/TabsRouter.tsx (97%)
 create mode 100644 docs/data/material/integrations/routing/demos/tabs-router/index.ts
 delete mode 100644 docs/data/material/integrations/tailwindcss/TextFieldTailwind.js
 rename docs/data/material/integrations/tailwindcss/{ => demos/text-field-tailwind}/TextFieldTailwind.tsx (97%)
 create mode 100644 docs/data/material/integrations/tailwindcss/demos/text-field-tailwind/index.ts
 delete mode 100644 docs/data/system/borders/BorderAdditive.js
 delete mode 100644 docs/data/system/borders/BorderAdditive.tsx.preview
 delete mode 100644 docs/data/system/borders/BorderColor.js
 delete mode 100644 docs/data/system/borders/BorderColor.tsx.preview
 delete mode 100644 docs/data/system/borders/BorderRadius.js
 delete mode 100644 docs/data/system/borders/BorderRadius.tsx.preview
 delete mode 100644 docs/data/system/borders/BorderSubtractive.js
 delete mode 100644 docs/data/system/borders/BorderSubtractive.tsx.preview
 rename docs/data/system/borders/{ => demos/additive}/BorderAdditive.tsx (91%)
 create mode 100644 docs/data/system/borders/demos/additive/index.ts
 rename docs/data/system/borders/{ => demos/color}/BorderColor.tsx (92%)
 create mode 100644 docs/data/system/borders/demos/color/index.ts
 rename docs/data/system/borders/{ => demos/radius}/BorderRadius.tsx (90%)
 create mode 100644 docs/data/system/borders/demos/radius/index.ts
 rename docs/data/system/borders/{ => demos/subtractive}/BorderSubtractive.tsx (91%)
 create mode 100644 docs/data/system/borders/demos/subtractive/index.ts
 delete mode 100644 docs/data/system/components/box/BoxBasic.js
 delete mode 100644 docs/data/system/components/box/BoxBasic.tsx.preview
 delete mode 100644 docs/data/system/components/box/BoxSx.js
 delete mode 100644 docs/data/system/components/box/BoxSystemProps.js
 delete mode 100644 docs/data/system/components/box/BoxSystemProps.tsx.preview
 rename docs/data/system/components/box/{ => demos/basic}/BoxBasic.tsx (82%)
 create mode 100644 docs/data/system/components/box/demos/basic/index.ts
 rename docs/data/system/components/box/{ => demos/sx}/BoxSx.tsx (93%)
 create mode 100644 docs/data/system/components/box/demos/sx/index.ts
 rename docs/data/system/components/box/{ => demos/system-props}/BoxSystemProps.tsx (88%)
 create mode 100644 docs/data/system/components/box/demos/system-props/index.ts
 delete mode 100644 docs/data/system/components/container/FixedContainer.js
 delete mode 100644 docs/data/system/components/container/FixedContainer.tsx.preview
 delete mode 100644 docs/data/system/components/container/SimpleContainer.js
 delete mode 100644 docs/data/system/components/container/SimpleContainer.tsx.preview
 rename docs/data/system/components/container/{ => demos/fixed}/FixedContainer.tsx (88%)
 create mode 100644 docs/data/system/components/container/demos/fixed/index.ts
 rename docs/data/system/components/container/{ => demos/simple}/SimpleContainer.tsx (89%)
 create mode 100644 docs/data/system/components/container/demos/simple/index.ts
 delete mode 100644 docs/data/system/components/grid/AutoGrid.js
 delete mode 100644 docs/data/system/components/grid/AutoGrid.tsx.preview
 delete mode 100644 docs/data/system/components/grid/AutoGridNoWrap.js
 delete mode 100644 docs/data/system/components/grid/AutoGridNoWrap.tsx
 delete mode 100644 docs/data/system/components/grid/BasicGrid.js
 delete mode 100644 docs/data/system/components/grid/BasicGrid.tsx.preview
 delete mode 100644 docs/data/system/components/grid/ColumnsGrid.js
 delete mode 100644 docs/data/system/components/grid/ColumnsGrid.tsx.preview
 delete mode 100644 docs/data/system/components/grid/FullWidthGrid.js
 delete mode 100644 docs/data/system/components/grid/FullWidthGrid.tsx.preview
 delete mode 100644 docs/data/system/components/grid/NestedGrid.js
 delete mode 100644 docs/data/system/components/grid/OffsetGrid.js
 delete mode 100644 docs/data/system/components/grid/OffsetGrid.tsx.preview
 delete mode 100644 docs/data/system/components/grid/ResponsiveGrid.js
 delete mode 100644 docs/data/system/components/grid/ResponsiveGrid.tsx.preview
 delete mode 100644 docs/data/system/components/grid/RowAndColumnSpacing.js
 delete mode 100644 docs/data/system/components/grid/RowAndColumnSpacing.tsx.preview
 delete mode 100644 docs/data/system/components/grid/SpacingGrid.js
 delete mode 100644 docs/data/system/components/grid/VariableWidthGrid.js
 delete mode 100644 docs/data/system/components/grid/VariableWidthGrid.tsx.preview
 rename docs/data/system/components/grid/{ => demos/auto}/AutoGrid.tsx (93%)
 create mode 100644 docs/data/system/components/grid/demos/auto/index.ts
 rename docs/data/system/components/grid/{ => demos/basic}/BasicGrid.tsx (94%)
 create mode 100644 docs/data/system/components/grid/demos/basic/index.ts
 rename docs/data/system/components/grid/{ => demos/columns}/ColumnsGrid.tsx (93%)
 create mode 100644 docs/data/system/components/grid/demos/columns/index.ts
 rename docs/data/system/components/grid/{ => demos/custom-breakpoints}/CustomBreakpointsGrid.js (100%)
 create mode 100644 docs/data/system/components/grid/demos/custom-breakpoints/index.ts
 rename docs/data/system/components/grid/{ => demos/full-width}/FullWidthGrid.tsx (94%)
 create mode 100644 docs/data/system/components/grid/demos/full-width/index.ts
 rename docs/data/system/components/grid/{ => demos/nested}/NestedGrid.tsx (98%)
 create mode 100644 docs/data/system/components/grid/demos/nested/index.ts
 rename docs/data/system/components/grid/{ => demos/offset}/OffsetGrid.tsx (95%)
 create mode 100644 docs/data/system/components/grid/demos/offset/index.ts
 rename docs/data/system/components/grid/{ => demos/responsive}/ResponsiveGrid.tsx (93%)
 create mode 100644 docs/data/system/components/grid/demos/responsive/index.ts
 rename docs/data/system/components/grid/{ => demos/row-and-column-spacing}/RowAndColumnSpacing.tsx (94%)
 create mode 100644 docs/data/system/components/grid/demos/row-and-column-spacing/index.ts
 rename docs/data/system/components/grid/{ => demos/spacing}/SpacingGrid.tsx (98%)
 create mode 100644 docs/data/system/components/grid/demos/spacing/index.ts
 rename docs/data/system/components/grid/{ => demos/variable-width}/VariableWidthGrid.tsx (93%)
 create mode 100644 docs/data/system/components/grid/demos/variable-width/index.ts
 delete mode 100644 docs/data/system/components/stack/BasicStack.js
 delete mode 100644 docs/data/system/components/stack/BasicStack.tsx.preview
 delete mode 100644 docs/data/system/components/stack/DirectionStack.js
 delete mode 100644 docs/data/system/components/stack/DirectionStack.tsx.preview
 delete mode 100644 docs/data/system/components/stack/DividerStack.js
 delete mode 100644 docs/data/system/components/stack/FlexboxGapStack.js
 delete mode 100644 docs/data/system/components/stack/FlexboxGapStack.tsx.preview
 delete mode 100644 docs/data/system/components/stack/InteractiveStack.js
 delete mode 100644 docs/data/system/components/stack/ResponsiveStack.js
 delete mode 100644 docs/data/system/components/stack/ResponsiveStack.tsx.preview
 rename docs/data/system/components/stack/{ => demos/basic}/BasicStack.tsx (91%)
 create mode 100644 docs/data/system/components/stack/demos/basic/index.ts
 rename docs/data/system/components/stack/{ => demos/direction}/DirectionStack.tsx (90%)
 create mode 100644 docs/data/system/components/stack/demos/direction/index.ts
 rename docs/data/system/components/stack/{ => demos/divider}/DividerStack.tsx (94%)
 create mode 100644 docs/data/system/components/stack/demos/divider/index.ts
 rename docs/data/system/components/stack/{ => demos/flexbox-gap}/FlexboxGapStack.tsx (92%)
 create mode 100644 docs/data/system/components/stack/demos/flexbox-gap/index.ts
 rename docs/data/system/components/stack/{ => demos/interactive}/InteractiveStack.tsx (99%)
 create mode 100644 docs/data/system/components/stack/demos/interactive/index.ts
 rename docs/data/system/components/stack/{ => demos/responsive}/ResponsiveStack.tsx (91%)
 create mode 100644 docs/data/system/components/stack/demos/responsive/index.ts
 delete mode 100644 docs/data/system/display/Block.js
 delete mode 100644 docs/data/system/display/Hiding.js
 delete mode 100644 docs/data/system/display/Inline.js
 delete mode 100644 docs/data/system/display/Overflow.js
 delete mode 100644 docs/data/system/display/Print.js
 delete mode 100644 docs/data/system/display/TextOverflow.js
 delete mode 100644 docs/data/system/display/Visibility.js
 delete mode 100644 docs/data/system/display/WhiteSpace.js
 rename docs/data/system/display/{ => demos/block}/Block.tsx (95%)
 create mode 100644 docs/data/system/display/demos/block/index.ts
 rename docs/data/system/display/{ => demos/hiding}/Hiding.tsx (91%)
 create mode 100644 docs/data/system/display/demos/hiding/index.ts
 rename docs/data/system/display/{ => demos/inline}/Inline.tsx (95%)
 create mode 100644 docs/data/system/display/demos/inline/index.ts
 rename docs/data/system/display/{ => demos/overflow}/Overflow.tsx (96%)
 create mode 100644 docs/data/system/display/demos/overflow/index.ts
 rename docs/data/system/display/{ => demos/print}/Print.tsx (92%)
 create mode 100644 docs/data/system/display/demos/print/index.ts
 rename docs/data/system/display/{ => demos/text-overflow}/TextOverflow.tsx (96%)
 create mode 100644 docs/data/system/display/demos/text-overflow/index.ts
 rename docs/data/system/display/{ => demos/visibility}/Visibility.tsx (94%)
 create mode 100644 docs/data/system/display/demos/visibility/index.ts
 rename docs/data/system/display/{ => demos/white-space}/WhiteSpace.tsx (96%)
 create mode 100644 docs/data/system/display/demos/white-space/index.ts
 delete mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js
 delete mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview
 delete mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js
 delete mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview
 rename docs/data/system/experimental-api/configure-the-sx-prop/{ => demos/change-the-behavior-sx-prop}/ChangeTheBehaviorSxProp.tsx (94%)
 create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/demos/change-the-behavior-sx-prop/index.ts
 rename docs/data/system/experimental-api/configure-the-sx-prop/{ => demos/extend-the-sx-prop}/ExtendTheSxProp.tsx (94%)
 create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/demos/extend-the-sx-prop/index.ts
 delete mode 100644 docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js
 delete mode 100644 docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx.preview
 rename docs/data/system/experimental-api/css-theme-variables/{ => demos/create-css-vars-provider}/CreateCssVarsProvider.tsx (98%)
 create mode 100644 docs/data/system/experimental-api/css-theme-variables/demos/create-css-vars-provider/index.ts
 delete mode 100644 docs/data/system/flexbox/AlignContent.js
 delete mode 100644 docs/data/system/flexbox/AlignItems.js
 delete mode 100644 docs/data/system/flexbox/AlignSelf.js
 delete mode 100644 docs/data/system/flexbox/AlignSelf.tsx.preview
 delete mode 100644 docs/data/system/flexbox/Display.js
 delete mode 100644 docs/data/system/flexbox/FlexDirection.js
 delete mode 100644 docs/data/system/flexbox/FlexGrow.js
 delete mode 100644 docs/data/system/flexbox/FlexGrow.tsx.preview
 delete mode 100644 docs/data/system/flexbox/FlexShrink.js
 delete mode 100644 docs/data/system/flexbox/FlexShrink.tsx.preview
 delete mode 100644 docs/data/system/flexbox/FlexWrap.js
 delete mode 100644 docs/data/system/flexbox/JustifyContent.js
 delete mode 100644 docs/data/system/flexbox/Order.js
 delete mode 100644 docs/data/system/flexbox/Order.tsx.preview
 rename docs/data/system/flexbox/{ => demos/align-content}/AlignContent.tsx (98%)
 create mode 100644 docs/data/system/flexbox/demos/align-content/index.ts
 rename docs/data/system/flexbox/{ => demos/align-items}/AlignItems.tsx (97%)
 create mode 100644 docs/data/system/flexbox/demos/align-items/index.ts
 rename docs/data/system/flexbox/{ => demos/align-self}/AlignSelf.tsx (95%)
 create mode 100644 docs/data/system/flexbox/demos/align-self/index.ts
 rename docs/data/system/flexbox/{ => demos/display}/Display.tsx (96%)
 create mode 100644 docs/data/system/flexbox/demos/display/index.ts
 rename docs/data/system/flexbox/{ => demos/flex-direction}/FlexDirection.tsx (97%)
 create mode 100644 docs/data/system/flexbox/demos/flex-direction/index.ts
 rename docs/data/system/flexbox/{ => demos/flex-grow}/FlexGrow.tsx (95%)
 create mode 100644 docs/data/system/flexbox/demos/flex-grow/index.ts
 rename docs/data/system/flexbox/{ => demos/flex-shrink}/FlexShrink.tsx (95%)
 create mode 100644 docs/data/system/flexbox/demos/flex-shrink/index.ts
 rename docs/data/system/flexbox/{ => demos/flex-wrap}/FlexWrap.tsx (97%)
 create mode 100644 docs/data/system/flexbox/demos/flex-wrap/index.ts
 rename docs/data/system/flexbox/{ => demos/justify-content}/JustifyContent.tsx (98%)
 create mode 100644 docs/data/system/flexbox/demos/justify-content/index.ts
 rename docs/data/system/flexbox/{ => demos/order}/Order.tsx (95%)
 create mode 100644 docs/data/system/flexbox/demos/order/index.ts
 delete mode 100644 docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.js
 delete mode 100644 docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.tsx.preview
 delete mode 100644 docs/data/system/getting-started/custom-components/StyleFunctionSxDemo.js
 delete mode 100644 docs/data/system/getting-started/custom-components/StyleFunctionSxDemo.tsx.preview
 rename docs/data/system/getting-started/custom-components/{ => demos/combining-style-functions-demo}/CombiningStyleFunctionsDemo.tsx (88%)
 create mode 100644 docs/data/system/getting-started/custom-components/demos/combining-style-functions-demo/index.ts
 rename docs/data/system/getting-started/custom-components/{ => demos/style-function-sx-demo}/StyleFunctionSxDemo.tsx (92%)
 create mode 100644 docs/data/system/getting-started/custom-components/demos/style-function-sx-demo/index.ts
 delete mode 100644 docs/data/system/getting-started/the-sx-prop/DynamicValues.js
 delete mode 100644 docs/data/system/getting-started/the-sx-prop/Example.js
 delete mode 100644 docs/data/system/getting-started/the-sx-prop/PassingSxProp.js
 delete mode 100644 docs/data/system/getting-started/the-sx-prop/PassingSxProp.tsx.preview
 rename docs/data/system/getting-started/the-sx-prop/{ => demos/dynamic-values}/DynamicValues.tsx (95%)
 create mode 100644 docs/data/system/getting-started/the-sx-prop/demos/dynamic-values/index.ts
 rename docs/data/system/getting-started/the-sx-prop/{ => demos/example}/Example.tsx (96%)
 create mode 100644 docs/data/system/getting-started/the-sx-prop/demos/example/index.ts
 rename docs/data/system/getting-started/the-sx-prop/{ => demos/passing-sx-prop}/PassingSxProp.tsx (95%)
 create mode 100644 docs/data/system/getting-started/the-sx-prop/demos/passing-sx-prop/index.ts
 delete mode 100644 docs/data/system/getting-started/usage/BreakpointsAsArray.js
 delete mode 100644 docs/data/system/getting-started/usage/BreakpointsAsArray.tsx.preview
 delete mode 100644 docs/data/system/getting-started/usage/BreakpointsAsObject.js
 delete mode 100644 docs/data/system/getting-started/usage/BreakpointsAsObject.tsx.preview
 delete mode 100644 docs/data/system/getting-started/usage/ContainerQueries.js
 delete mode 100644 docs/data/system/getting-started/usage/Demo.js
 delete mode 100644 docs/data/system/getting-started/usage/SxProp.tsx.preview
 delete mode 100644 docs/data/system/getting-started/usage/ValueAsFunction.js
 delete mode 100644 docs/data/system/getting-started/usage/ValueAsFunction.tsx.preview
 delete mode 100644 docs/data/system/getting-started/usage/Why.js
 rename docs/data/system/getting-started/usage/{ => demos/breakpoints-as-array}/BreakpointsAsArray.tsx (79%)
 create mode 100644 docs/data/system/getting-started/usage/demos/breakpoints-as-array/index.ts
 rename docs/data/system/getting-started/usage/{ => demos/breakpoints-as-object}/BreakpointsAsObject.tsx (90%)
 create mode 100644 docs/data/system/getting-started/usage/demos/breakpoints-as-object/index.ts
 rename docs/data/system/getting-started/usage/{ => demos/container-queries}/ContainerQueries.tsx (97%)
 create mode 100644 docs/data/system/getting-started/usage/demos/container-queries/index.ts
 rename docs/data/system/getting-started/usage/{ => demos/demo}/Demo.tsx (97%)
 create mode 100644 docs/data/system/getting-started/usage/demos/demo/index.ts
 rename docs/data/system/getting-started/usage/{ => demos/value-as-function}/ValueAsFunction.tsx (87%)
 create mode 100644 docs/data/system/getting-started/usage/demos/value-as-function/index.ts
 rename docs/data/system/getting-started/usage/{ => demos/why}/Why.tsx (95%)
 create mode 100644 docs/data/system/getting-started/usage/demos/why/index.ts
 delete mode 100644 docs/data/system/grid/Display.js
 delete mode 100644 docs/data/system/grid/Gap.js
 delete mode 100644 docs/data/system/grid/Gap.tsx.preview
 delete mode 100644 docs/data/system/grid/GridAutoColumns.js
 delete mode 100644 docs/data/system/grid/GridAutoColumns.tsx.preview
 delete mode 100644 docs/data/system/grid/GridAutoFlow.js
 delete mode 100644 docs/data/system/grid/GridAutoFlow.tsx.preview
 delete mode 100644 docs/data/system/grid/GridAutoRows.js
 delete mode 100644 docs/data/system/grid/GridAutoRows.tsx.preview
 delete mode 100644 docs/data/system/grid/GridTemplateAreas.js
 delete mode 100644 docs/data/system/grid/GridTemplateAreas.tsx.preview
 delete mode 100644 docs/data/system/grid/GridTemplateColumns.js
 delete mode 100644 docs/data/system/grid/GridTemplateColumns.tsx.preview
 delete mode 100644 docs/data/system/grid/GridTemplateRows.js
 delete mode 100644 docs/data/system/grid/GridTemplateRows.tsx.preview
 delete mode 100644 docs/data/system/grid/RowAndColumnGap.js
 delete mode 100644 docs/data/system/grid/RowAndColumnGap.tsx.preview
 rename docs/data/system/grid/{ => demos/auto-columns}/GridAutoColumns.tsx (95%)
 create mode 100644 docs/data/system/grid/demos/auto-columns/index.ts
 rename docs/data/system/grid/{ => demos/auto-flow}/GridAutoFlow.tsx (95%)
 create mode 100644 docs/data/system/grid/demos/auto-flow/index.ts
 rename docs/data/system/grid/{ => demos/auto-rows}/GridAutoRows.tsx (95%)
 create mode 100644 docs/data/system/grid/demos/auto-rows/index.ts
 rename docs/data/system/grid/{ => demos/display}/Display.tsx (92%)
 create mode 100644 docs/data/system/grid/demos/display/index.ts
 rename docs/data/system/grid/{ => demos/gap}/Gap.tsx (94%)
 create mode 100644 docs/data/system/grid/demos/gap/index.ts
 rename docs/data/system/grid/{ => demos/row-and-column-gap}/RowAndColumnGap.tsx (95%)
 create mode 100644 docs/data/system/grid/demos/row-and-column-gap/index.ts
 rename docs/data/system/grid/{ => demos/template-areas}/GridTemplateAreas.tsx (95%)
 create mode 100644 docs/data/system/grid/demos/template-areas/index.ts
 rename docs/data/system/grid/{ => demos/template-columns}/GridTemplateColumns.tsx (94%)
 create mode 100644 docs/data/system/grid/demos/template-columns/index.ts
 rename docs/data/system/grid/{ => demos/template-rows}/GridTemplateRows.tsx (94%)
 create mode 100644 docs/data/system/grid/demos/template-rows/index.ts
 delete mode 100644 docs/data/system/palette/BackgroundColor.js
 delete mode 100644 docs/data/system/palette/Color.js
 delete mode 100644 docs/data/system/palette/Color.tsx.preview
 rename docs/data/system/palette/{ => demos/background-color}/BackgroundColor.tsx (98%)
 create mode 100644 docs/data/system/palette/demos/background-color/index.ts
 rename docs/data/system/palette/{ => demos/color}/Color.tsx (94%)
 create mode 100644 docs/data/system/palette/demos/color/index.ts
 delete mode 100644 docs/data/system/positions/ZIndex.js
 rename docs/data/system/positions/{ => demos/z-index}/ZIndex.tsx (97%)
 create mode 100644 docs/data/system/positions/demos/z-index/index.ts
 delete mode 100644 docs/data/system/screen-readers/VisuallyHiddenUsage.js
 delete mode 100644 docs/data/system/screen-readers/VisuallyHiddenUsage.tsx.preview
 rename docs/data/system/screen-readers/{ => demos/visually-hidden-usage}/VisuallyHiddenUsage.tsx (89%)
 create mode 100644 docs/data/system/screen-readers/demos/visually-hidden-usage/index.ts
 delete mode 100644 docs/data/system/shadows/ShadowsDemo.js
 rename docs/data/system/shadows/{ => demos/demo}/ShadowsDemo.tsx (98%)
 create mode 100644 docs/data/system/shadows/demos/demo/index.ts
 delete mode 100644 docs/data/system/sizing/Height.js
 delete mode 100644 docs/data/system/sizing/Values.js
 delete mode 100644 docs/data/system/sizing/Width.js
 rename docs/data/system/sizing/{ => demos/height}/Height.tsx (98%)
 create mode 100644 docs/data/system/sizing/demos/height/index.ts
 rename docs/data/system/sizing/{ => demos/values}/Values.tsx (97%)
 create mode 100644 docs/data/system/sizing/demos/values/index.ts
 rename docs/data/system/sizing/{ => demos/width}/Width.tsx (98%)
 create mode 100644 docs/data/system/sizing/demos/width/index.ts
 delete mode 100644 docs/data/system/spacing/HorizontalCentering.js
 delete mode 100644 docs/data/system/spacing/SpacingDemo.js
 rename docs/data/system/spacing/{ => demos/demo}/SpacingDemo.tsx (96%)
 create mode 100644 docs/data/system/spacing/demos/demo/index.ts
 rename docs/data/system/spacing/{ => demos/horizontal-centering}/HorizontalCentering.tsx (93%)
 create mode 100644 docs/data/system/spacing/demos/horizontal-centering/index.ts
 delete mode 100644 docs/data/system/styled/BasicUsage.js
 delete mode 100644 docs/data/system/styled/BasicUsage.tsx.preview
 delete mode 100644 docs/data/system/styled/ThemeUsage.js
 delete mode 100644 docs/data/system/styled/ThemeUsage.tsx.preview
 delete mode 100644 docs/data/system/styled/UsingOptions.js
 delete mode 100644 docs/data/system/styled/UsingOptions.tsx.preview
 delete mode 100644 docs/data/system/styled/UsingWithSx.js
 delete mode 100644 docs/data/system/styled/UsingWithSx.tsx.preview
 rename docs/data/system/styled/{ => demos/basic-usage}/BasicUsage.tsx (79%)
 create mode 100644 docs/data/system/styled/demos/basic-usage/index.ts
 rename docs/data/system/styled/{ => demos/theme-usage}/ThemeUsage.tsx (93%)
 create mode 100644 docs/data/system/styled/demos/theme-usage/index.ts
 rename docs/data/system/styled/{ => demos/using-options}/UsingOptions.tsx (97%)
 create mode 100644 docs/data/system/styled/demos/using-options/index.ts
 rename docs/data/system/styled/{ => demos/using-with-sx}/UsingWithSx.tsx (92%)
 create mode 100644 docs/data/system/styled/demos/using-with-sx/index.ts
 delete mode 100644 docs/data/system/typography/FontFamily.js
 delete mode 100644 docs/data/system/typography/FontFamily.tsx.preview
 delete mode 100644 docs/data/system/typography/FontSize.js
 delete mode 100644 docs/data/system/typography/FontSize.tsx.preview
 delete mode 100644 docs/data/system/typography/FontStyle.js
 delete mode 100644 docs/data/system/typography/FontStyle.tsx.preview
 delete mode 100644 docs/data/system/typography/FontWeight.js
 delete mode 100644 docs/data/system/typography/FontWeight.tsx.preview
 delete mode 100644 docs/data/system/typography/LetterSpacing.js
 delete mode 100644 docs/data/system/typography/LetterSpacing.tsx.preview
 delete mode 100644 docs/data/system/typography/LineHeight.js
 delete mode 100644 docs/data/system/typography/LineHeight.tsx.preview
 delete mode 100644 docs/data/system/typography/TextAlignment.js
 delete mode 100644 docs/data/system/typography/TextAlignment.tsx.preview
 delete mode 100644 docs/data/system/typography/TextTransform.js
 delete mode 100644 docs/data/system/typography/TextTransform.tsx.preview
 delete mode 100644 docs/data/system/typography/Variant.js
 delete mode 100644 docs/data/system/typography/Variant.tsx.preview
 rename docs/data/system/typography/{ => demos/font-family}/FontFamily.tsx (89%)
 create mode 100644 docs/data/system/typography/demos/font-family/index.ts
 rename docs/data/system/typography/{ => demos/font-size}/FontSize.tsx (89%)
 create mode 100644 docs/data/system/typography/demos/font-size/index.ts
 rename docs/data/system/typography/{ => demos/font-style}/FontStyle.tsx (90%)
 create mode 100644 docs/data/system/typography/demos/font-style/index.ts
 rename docs/data/system/typography/{ => demos/font-weight}/FontWeight.tsx (91%)
 create mode 100644 docs/data/system/typography/demos/font-weight/index.ts
 rename docs/data/system/typography/{ => demos/letter-spacing}/LetterSpacing.tsx (88%)
 create mode 100644 docs/data/system/typography/demos/letter-spacing/index.ts
 rename docs/data/system/typography/{ => demos/line-height}/LineHeight.tsx (87%)
 create mode 100644 docs/data/system/typography/demos/line-height/index.ts
 rename docs/data/system/typography/{ => demos/text-alignment}/TextAlignment.tsx (93%)
 create mode 100644 docs/data/system/typography/demos/text-alignment/index.ts
 rename docs/data/system/typography/{ => demos/text-transform}/TextTransform.tsx (90%)
 create mode 100644 docs/data/system/typography/demos/text-transform/index.ts
 rename docs/data/system/typography/{ => demos/variant}/Variant.tsx (84%)
 create mode 100644 docs/data/system/typography/demos/variant/index.ts

diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.js b/docs/data/material/components/accordion/AccordionExpandDefault.js
deleted file mode 100644
index c045b66a3ed68d..00000000000000
--- a/docs/data/material/components/accordion/AccordionExpandDefault.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-export default function AccordionExpandDefault() {
-  const id = React.useId();
-  return (
-    

-      
-        }
-          aria-controls={`${id}-panel1-content`}
-          id={`${id}-panel1-header`}
-        >
-          Expanded by default
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        }
-          aria-controls={`${id}-panel2-content`}
-          id={`${id}-panel2-header`}
-        >
-          Header
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.js b/docs/data/material/components/accordion/AccordionExpandIcon.js
deleted file mode 100644
index 459816b921a056..00000000000000
--- a/docs/data/material/components/accordion/AccordionExpandIcon.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-
-export default function AccordionExpandIcon() {
-  const id = React.useId();
-  return (
-    

-      
-        }
-          aria-controls={`${id}-panel1-content`}
-          id={`${id}-panel1-header`}
-        >
-          Accordion 1
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        }
-          aria-controls={`${id}-panel2-content`}
-          id={`${id}-panel2-header`}
-        >
-          Accordion 2
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js
deleted file mode 100644
index 3dd5ca18842b80..00000000000000
--- a/docs/data/material/components/accordion/AccordionTransition.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-import Accordion, { accordionClasses } from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails, {
-  accordionDetailsClasses,
-} from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Fade from '@mui/material/Fade';
-
-export default function AccordionTransition() {
-  const id = React.useId();
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleExpansion = () => {
-    setExpanded((prevExpanded) => !prevExpanded);
-  };
-
-  return (
-    

-      
-        }
-          aria-controls={`${id}-panel1-content`}
-          id={`${id}-panel1-header`}
-        >
-          Custom transition using Fade
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        }
-          aria-controls={`${id}-panel2-content`}
-          id={`${id}-panel2-header`}
-        >
-          Default transition using Collapse
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/AccordionUsage.js b/docs/data/material/components/accordion/AccordionUsage.js
deleted file mode 100644
index 26deb503ece3f5..00000000000000
--- a/docs/data/material/components/accordion/AccordionUsage.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionActions from '@mui/material/AccordionActions';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Button from '@mui/material/Button';
-
-export default function AccordionUsage() {
-  const id = React.useId();
-  return (
-    

-      
-        }
-          aria-controls={`${id}-panel1-content`}
-          id={`${id}-panel1-header`}
-        >
-          Accordion 1
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-          malesuada lacus ex, sit amet blandit leo lobortis eget.
-        
-      
-      
-        }
-          aria-controls={`${id}-panel2-content`}
-          id={`${id}-panel2-header`}
-        >
-          Accordion 2
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-          malesuada lacus ex, sit amet blandit leo lobortis eget.
-        
-      
-      
-        }
-          aria-controls={`${id}-panel3-content`}
-          id={`${id}-panel3-header`}
-        >
-          Accordion Actions
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-          malesuada lacus ex, sit amet blandit leo lobortis eget.
-        
-        
-          
-          
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/ControlledAccordions.js b/docs/data/material/components/accordion/ControlledAccordions.js
deleted file mode 100644
index d9a0067cb62a5b..00000000000000
--- a/docs/data/material/components/accordion/ControlledAccordions.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-export default function ControlledAccordions() {
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleChange = (panel) => (event, isExpanded) => {
-    setExpanded(isExpanded ? panel : false);
-  };
-
-  return (
-    

-      
-        }
-          aria-controls="panel1bh-content"
-          id="panel1bh-header"
-        >
-          
-            General settings
-          
-          
-            I am an accordion
-          
-        
-        
-          
-            Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.
-            Aliquam eget maximus est, id dignissim quam.
-          
-        
-      
-      
-        }
-          aria-controls="panel2bh-content"
-          id="panel2bh-header"
-        >
-          
-            Users
-          
-          
-            You are currently not an owner
-          
-        
-        
-          
-            Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus,
-            varius pulvinar diam eros in elit. Pellentesque convallis laoreet
-            laoreet.
-          
-        
-      
-      
-        }
-          aria-controls="panel3bh-content"
-          id="panel3bh-header"
-        >
-          
-            Advanced settings
-          
-          
-            Filtering has been entirely disabled for whole web server
-          
-        
-        
-          
-            Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit
-            amet egestas eros, vitae egestas augue. Duis vel est augue.
-          
-        
-      
-      
-        }
-          aria-controls="panel4bh-content"
-          id="panel4bh-header"
-        >
-          
-            Personal data
-          
-        
-        
-          
-            Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit
-            amet egestas eros, vitae egestas augue. Duis vel est augue.
-          
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/CustomizedAccordions.js b/docs/data/material/components/accordion/CustomizedAccordions.js
deleted file mode 100644
index 0390578a7d5c2d..00000000000000
--- a/docs/data/material/components/accordion/CustomizedAccordions.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
-import MuiAccordion from '@mui/material/Accordion';
-import MuiAccordionSummary, {
-  accordionSummaryClasses,
-} from '@mui/material/AccordionSummary';
-import MuiAccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-
-const Accordion = styled((props) => (
-  
-))(({ theme }) => ({
-  border: `1px solid ${theme.palette.divider}`,
-  '&:not(:last-child)': {
-    borderBottom: 0,
-  },
-  '&::before': {
-    display: 'none',
-  },
-}));
-
-const AccordionSummary = styled((props) => (
-  }
-    {...props}
-  />
-))(({ theme }) => ({
-  backgroundColor: 'rgba(0, 0, 0, .03)',
-  flexDirection: 'row-reverse',
-  [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]:
-    {
-      transform: 'rotate(90deg)',
-    },
-  [`& .${accordionSummaryClasses.content}`]: {
-    marginLeft: theme.spacing(1),
-  },
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'rgba(255, 255, 255, .05)',
-  }),
-}));
-
-const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
-  padding: theme.spacing(2),
-  borderTop: '1px solid rgba(0, 0, 0, .125)',
-}));
-
-export default function CustomizedAccordions() {
-  const [expanded, setExpanded] = React.useState('panel1');
-
-  const handleChange = (panel) => (event, newExpanded) => {
-    setExpanded(newExpanded ? panel : false);
-  };
-
-  return (
-    

-      
-        
-          Collapsible Group Item #1
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
-            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-            sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        
-          Collapsible Group Item #2
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
-            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-            sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        
-          Collapsible Group Item #3
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
-            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-            sit amet blandit leo lobortis eget.
-          
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/DisabledAccordion.js b/docs/data/material/components/accordion/DisabledAccordion.js
deleted file mode 100644
index ef1cf954db88f2..00000000000000
--- a/docs/data/material/components/accordion/DisabledAccordion.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-export default function DisabledAccordion() {
-  const id = React.useId();
-  return (
-    

-      
-        }
-          aria-controls={`${id}-panel1-content`}
-          id={`${id}-panel1-header`}
-        >
-          Accordion 1
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        }
-          aria-controls={`${id}-panel2-content`}
-          id={`${id}-panel2-header`}
-        >
-          Accordion 2
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          
-        
-      
-      
-        }
-          aria-controls={`${id}-panel3-content`}
-          id={`${id}-panel3-header`}
-        >
-          Disabled Accordion
-        
-      
-    

-  );
-}
diff --git a/docs/data/material/components/accordion/accordion.md b/docs/data/material/components/accordion/accordion.md
index a342c0df8489d4..5745f942d7ae92 100644
--- a/docs/data/material/components/accordion/accordion.md
+++ b/docs/data/material/components/accordion/accordion.md
@@ -23,7 +23,7 @@ The Material UI Accordion component includes several complementary utility comp
 - Accordion Details: the wrapper for the Accordion content.
 - Accordion Actions: an optional wrapper that groups a set of buttons.
 
-{{"demo": "AccordionUsage.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/usage/index.ts", "bg": true}}
 
 :::info
 This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it.
@@ -42,31 +42,31 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 Use the `expandIcon` prop on the Accordion Summary component to change the expand indicator icon.
 The component handles the turning upside-down transition automatically.
 
-{{"demo": "AccordionExpandIcon.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/expand-icon/index.ts", "bg": true}}
 
 ### Expanded by default
 
 Use the `defaultExpanded` prop on the Accordion component to have it opened by default.
 
-{{"demo": "AccordionExpandDefault.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/expand-default/index.ts", "bg": true}}
 
 ### Transition
 
 Use the `slots.transition` and `slotProps.transition` props to change the Accordion's default transition.
 
-{{"demo": "AccordionTransition.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/transition/index.ts", "bg": true}}
 
 ### Disabled item
 
 Use the `disabled` prop on the Accordion component to disable interaction and focus.
 
-{{"demo": "DisabledAccordion.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/disabled/index.ts", "bg": true}}
 
 ### Controlled Accordion
 
 The Accordion component can be controlled or uncontrolled.
 
-{{"demo": "ControlledAccordions.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/controlled/index.ts", "bg": true}}
 
 :::info
 
@@ -83,7 +83,7 @@ Learn more about controlled and uncontrolled components in the [React documentat
 Use the `expanded` prop with React's `useState` hook to allow only one Accordion item to be expanded at a time.
 The demo below also shows a bit of visual customization.
 
-{{"demo": "CustomizedAccordions.js", "bg": true}}
+{{"component": "../data/material/components/accordion/demos/customized/index.ts", "bg": true}}
 
 ### Changing heading level
 
diff --git a/docs/data/material/components/accordion/ControlledAccordions.tsx b/docs/data/material/components/accordion/demos/controlled/ControlledAccordions.tsx
similarity index 98%
rename from docs/data/material/components/accordion/ControlledAccordions.tsx
rename to docs/data/material/components/accordion/demos/controlled/ControlledAccordions.tsx
index 1eaa7c910ea988..37bce9a51674d5 100644
--- a/docs/data/material/components/accordion/ControlledAccordions.tsx
+++ b/docs/data/material/components/accordion/demos/controlled/ControlledAccordions.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function ControlledAccordions() {
+  // @focus-start @padding 1
   const [expanded, setExpanded] = React.useState(false);
 
   const handleChange =
@@ -95,4 +96,5 @@ export default function ControlledAccordions() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/controlled/index.ts b/docs/data/material/components/accordion/demos/controlled/index.ts
new file mode 100644
index 00000000000000..b81a5be6d1e57d
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/controlled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledAccordions from './ControlledAccordions';
+
+export default createDemo(import.meta.url, ControlledAccordions);
diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/demos/customized/CustomizedAccordions.tsx
similarity index 98%
rename from docs/data/material/components/accordion/CustomizedAccordions.tsx
rename to docs/data/material/components/accordion/demos/customized/CustomizedAccordions.tsx
index 16707f15eb63cd..ad005a8e6d57fb 100644
--- a/docs/data/material/components/accordion/CustomizedAccordions.tsx
+++ b/docs/data/material/components/accordion/demos/customized/CustomizedAccordions.tsx
@@ -47,6 +47,7 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
 }));
 
 export default function CustomizedAccordions() {
+  // @focus-start @padding 1
   const [expanded, setExpanded] = React.useState('panel1');
 
   const handleChange =
@@ -97,4 +98,5 @@ export default function CustomizedAccordions() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/customized/index.ts b/docs/data/material/components/accordion/demos/customized/index.ts
new file mode 100644
index 00000000000000..aa680cefac92cd
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedAccordions from './CustomizedAccordions';
+
+export default createDemo(import.meta.url, CustomizedAccordions);
diff --git a/docs/data/material/components/accordion/DisabledAccordion.tsx b/docs/data/material/components/accordion/demos/disabled/DisabledAccordion.tsx
similarity index 97%
rename from docs/data/material/components/accordion/DisabledAccordion.tsx
rename to docs/data/material/components/accordion/demos/disabled/DisabledAccordion.tsx
index ef1cf954db88f2..99d721e9b7c492 100644
--- a/docs/data/material/components/accordion/DisabledAccordion.tsx
+++ b/docs/data/material/components/accordion/demos/disabled/DisabledAccordion.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function DisabledAccordion() {
+  // @focus-start @padding 1
   const id = React.useId();
   return (
     

@@ -50,4 +51,5 @@ export default function DisabledAccordion() {
       
     

   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/disabled/index.ts b/docs/data/material/components/accordion/demos/disabled/index.ts
new file mode 100644
index 00000000000000..db4706216f1e31
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/disabled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisabledAccordion from './DisabledAccordion';
+
+export default createDemo(import.meta.url, DisabledAccordion);
diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.tsx b/docs/data/material/components/accordion/demos/expand-default/AccordionExpandDefault.tsx
similarity index 97%
rename from docs/data/material/components/accordion/AccordionExpandDefault.tsx
rename to docs/data/material/components/accordion/demos/expand-default/AccordionExpandDefault.tsx
index c045b66a3ed68d..8a2c08f95707d7 100644
--- a/docs/data/material/components/accordion/AccordionExpandDefault.tsx
+++ b/docs/data/material/components/accordion/demos/expand-default/AccordionExpandDefault.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function AccordionExpandDefault() {
+  // @focus-start @padding 1
   const id = React.useId();
   return (
     

@@ -41,4 +42,5 @@ export default function AccordionExpandDefault() {
       
     

   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/expand-default/index.ts b/docs/data/material/components/accordion/demos/expand-default/index.ts
new file mode 100644
index 00000000000000..659f175d4dfd56
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/expand-default/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccordionExpandDefault from './AccordionExpandDefault';
+
+export default createDemo(import.meta.url, AccordionExpandDefault);
diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.tsx b/docs/data/material/components/accordion/demos/expand-icon/AccordionExpandIcon.tsx
similarity index 97%
rename from docs/data/material/components/accordion/AccordionExpandIcon.tsx
rename to docs/data/material/components/accordion/demos/expand-icon/AccordionExpandIcon.tsx
index 459816b921a056..e040aee6c6ce36 100644
--- a/docs/data/material/components/accordion/AccordionExpandIcon.tsx
+++ b/docs/data/material/components/accordion/demos/expand-icon/AccordionExpandIcon.tsx
@@ -7,6 +7,7 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 export default function AccordionExpandIcon() {
+  // @focus-start @padding 1
   const id = React.useId();
   return (
     

@@ -42,4 +43,5 @@ export default function AccordionExpandIcon() {
       
     

   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/expand-icon/index.ts b/docs/data/material/components/accordion/demos/expand-icon/index.ts
new file mode 100644
index 00000000000000..80224c719e6630
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/expand-icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccordionExpandIcon from './AccordionExpandIcon';
+
+export default createDemo(import.meta.url, AccordionExpandIcon);
diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/demos/transition/AccordionTransition.tsx
similarity index 98%
rename from docs/data/material/components/accordion/AccordionTransition.tsx
rename to docs/data/material/components/accordion/demos/transition/AccordionTransition.tsx
index 3c3ebce28e5d97..be295e3f72f845 100644
--- a/docs/data/material/components/accordion/AccordionTransition.tsx
+++ b/docs/data/material/components/accordion/demos/transition/AccordionTransition.tsx
@@ -12,6 +12,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
 
 export default function AccordionTransition() {
+  // @focus-start @padding 1
   const id = React.useId();
   const [expanded, setExpanded] = React.useState(false);
 
@@ -77,4 +78,5 @@ export default function AccordionTransition() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/transition/index.ts b/docs/data/material/components/accordion/demos/transition/index.ts
new file mode 100644
index 00000000000000..9c273ae2c71425
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/transition/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccordionTransition from './AccordionTransition';
+
+export default createDemo(import.meta.url, AccordionTransition);
diff --git a/docs/data/material/components/accordion/AccordionUsage.tsx b/docs/data/material/components/accordion/demos/usage/AccordionUsage.tsx
similarity index 97%
rename from docs/data/material/components/accordion/AccordionUsage.tsx
rename to docs/data/material/components/accordion/demos/usage/AccordionUsage.tsx
index 26deb503ece3f5..12f8173ab6c496 100644
--- a/docs/data/material/components/accordion/AccordionUsage.tsx
+++ b/docs/data/material/components/accordion/demos/usage/AccordionUsage.tsx
@@ -8,6 +8,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 
 export default function AccordionUsage() {
+  // @focus-start @padding 1
   const id = React.useId();
   return (
     

@@ -56,4 +57,5 @@ export default function AccordionUsage() {
       
     

   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/accordion/demos/usage/index.ts b/docs/data/material/components/accordion/demos/usage/index.ts
new file mode 100644
index 00000000000000..4513e2eca7ec4e
--- /dev/null
+++ b/docs/data/material/components/accordion/demos/usage/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccordionUsage from './AccordionUsage';
+
+export default createDemo(import.meta.url, AccordionUsage);
diff --git a/docs/data/material/components/alert/ActionAlerts.js b/docs/data/material/components/alert/ActionAlerts.js
deleted file mode 100644
index 7cc818a4977723..00000000000000
--- a/docs/data/material/components/alert/ActionAlerts.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-
-export default function ActionAlerts() {
-  return (
-    
-       {}}>
-        This Alert displays the default close icon.
-      
-      
-            UNDO
-          
-        }
-      >
-        This Alert uses a Button component for its action.
-      
-    
-  );
-}
diff --git a/docs/data/material/components/alert/ActionAlerts.tsx.preview b/docs/data/material/components/alert/ActionAlerts.tsx.preview
deleted file mode 100644
index 2ca636bf48ef79..00000000000000
--- a/docs/data/material/components/alert/ActionAlerts.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
- {}}>
-  This Alert displays the default close icon.
-
-
-      UNDO
-    
-  }
->
-  This Alert uses a Button component for its action.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/BasicAlerts.js b/docs/data/material/components/alert/BasicAlerts.js
deleted file mode 100644
index 14293eeb4dad98..00000000000000
--- a/docs/data/material/components/alert/BasicAlerts.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Alert from '@mui/material/Alert';
-import Stack from '@mui/material/Stack';
-
-export default function BasicAlerts() {
-  return (
-    
-      This is a success Alert.
-      This is an info Alert.
-      This is a warning Alert.
-      This is an error Alert.
-    
-  );
-}
diff --git a/docs/data/material/components/alert/BasicAlerts.tsx.preview b/docs/data/material/components/alert/BasicAlerts.tsx.preview
deleted file mode 100644
index 1f048a50e35fbb..00000000000000
--- a/docs/data/material/components/alert/BasicAlerts.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-This is a success Alert.
-This is an info Alert.
-This is a warning Alert.
-This is an error Alert.
\ No newline at end of file
diff --git a/docs/data/material/components/alert/ColorAlerts.js b/docs/data/material/components/alert/ColorAlerts.js
deleted file mode 100644
index 2e69f76b1b82d8..00000000000000
--- a/docs/data/material/components/alert/ColorAlerts.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Alert from '@mui/material/Alert';
-
-export default function ColorAlerts() {
-  return (
-    
-      This is a success Alert with warning colors.
-    
-  );
-}
diff --git a/docs/data/material/components/alert/ColorAlerts.tsx.preview b/docs/data/material/components/alert/ColorAlerts.tsx.preview
deleted file mode 100644
index ce1d428ba30412..00000000000000
--- a/docs/data/material/components/alert/ColorAlerts.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  This is a success Alert with warning colors.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/DescriptionAlerts.js b/docs/data/material/components/alert/DescriptionAlerts.js
deleted file mode 100644
index 552c892fccc10e..00000000000000
--- a/docs/data/material/components/alert/DescriptionAlerts.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
-import Stack from '@mui/material/Stack';
-
-export default function DescriptionAlerts() {
-  return (
-    
-      
-        Success
-        This is a success Alert with an encouraging title.
-      
-      
-        Info
-        This is an info Alert with an informative title.
-      
-      
-        Warning
-        This is a warning Alert with a cautious title.
-      
-      
-        Error
-        This is an error Alert with a scary title.
-      
-    
-  );
-}
diff --git a/docs/data/material/components/alert/DescriptionAlerts.tsx.preview b/docs/data/material/components/alert/DescriptionAlerts.tsx.preview
deleted file mode 100644
index b6d0201f2772cf..00000000000000
--- a/docs/data/material/components/alert/DescriptionAlerts.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  Success
-  This is a success Alert with an encouraging title.
-
-
-  Info
-  This is an info Alert with an informative title.
-
-
-  Warning
-  This is a warning Alert with a cautious title.
-
-
-  Error
-  This is an error Alert with a scary title.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/FilledAlerts.js b/docs/data/material/components/alert/FilledAlerts.js
deleted file mode 100644
index 1003c206bdea05..00000000000000
--- a/docs/data/material/components/alert/FilledAlerts.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Alert from '@mui/material/Alert';
-import Stack from '@mui/material/Stack';
-
-export default function FilledAlerts() {
-  return (
-    
-      
-        This is a filled success Alert.
-      
-      
-        This is a filled info Alert.
-      
-      
-        This is a filled warning Alert.
-      
-      
-        This is a filled error Alert.
-      
-    
-  );
-}
diff --git a/docs/data/material/components/alert/FilledAlerts.tsx.preview b/docs/data/material/components/alert/FilledAlerts.tsx.preview
deleted file mode 100644
index 5eaa579252cc26..00000000000000
--- a/docs/data/material/components/alert/FilledAlerts.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  This is a filled success Alert.
-
-
-  This is a filled info Alert.
-
-
-  This is a filled warning Alert.
-
-
-  This is a filled error Alert.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/IconAlerts.js b/docs/data/material/components/alert/IconAlerts.js
deleted file mode 100644
index 6b0ed9b1be6add..00000000000000
--- a/docs/data/material/components/alert/IconAlerts.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Alert from '@mui/material/Alert';
-import CheckIcon from '@mui/icons-material/Check';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined';
-import Stack from '@mui/material/Stack';
-
-export default function IconAlerts() {
-  return (
-    
-      } severity="success">
-        This success Alert has a custom icon.
-      
-      
-        This success Alert has no icon.
-      
-      ,
-        }}
-      >
-        This success Alert uses `iconMapping` to override the default icon.
-      
-    
-  );
-}
diff --git a/docs/data/material/components/alert/IconAlerts.tsx.preview b/docs/data/material/components/alert/IconAlerts.tsx.preview
deleted file mode 100644
index 64ce73d4786ce0..00000000000000
--- a/docs/data/material/components/alert/IconAlerts.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-} severity="success">
-  This success Alert has a custom icon.
-
-
-  This success Alert has no icon.
-
-,
-  }}
->
-  This success Alert uses `iconMapping` to override the default icon.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/OutlinedAlerts.js b/docs/data/material/components/alert/OutlinedAlerts.js
deleted file mode 100644
index 8f84f6827280fa..00000000000000
--- a/docs/data/material/components/alert/OutlinedAlerts.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Alert from '@mui/material/Alert';
-import Stack from '@mui/material/Stack';
-
-export default function OutlinedAlerts() {
-  return (
-    
-      
-        This is an outlined success Alert.
-      
-      
-        This is an outlined info Alert.
-      
-      
-        This is an outlined warning Alert.
-      
-      
-        This is an outlined error Alert.
-      
-    
-  );
-}
diff --git a/docs/data/material/components/alert/OutlinedAlerts.tsx.preview b/docs/data/material/components/alert/OutlinedAlerts.tsx.preview
deleted file mode 100644
index 7c08d09e6b466f..00000000000000
--- a/docs/data/material/components/alert/OutlinedAlerts.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  This is an outlined success Alert.
-
-
-  This is an outlined info Alert.
-
-
-  This is an outlined warning Alert.
-
-
-  This is an outlined error Alert.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/SimpleAlert.js b/docs/data/material/components/alert/SimpleAlert.js
deleted file mode 100644
index aaecf0e2466891..00000000000000
--- a/docs/data/material/components/alert/SimpleAlert.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Alert from '@mui/material/Alert';
-import CheckIcon from '@mui/icons-material/Check';
-
-export default function SimpleAlert() {
-  return (
-    } severity="success">
-      Here is a gentle confirmation that your action was successful.
-    
-  );
-}
diff --git a/docs/data/material/components/alert/SimpleAlert.tsx.preview b/docs/data/material/components/alert/SimpleAlert.tsx.preview
deleted file mode 100644
index 006b2e25029d4b..00000000000000
--- a/docs/data/material/components/alert/SimpleAlert.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-} severity="success">
-  Here is a gentle confirmation that your action was successful.
-
\ No newline at end of file
diff --git a/docs/data/material/components/alert/TransitionAlerts.js b/docs/data/material/components/alert/TransitionAlerts.js
deleted file mode 100644
index 1b02d5dc435734..00000000000000
--- a/docs/data/material/components/alert/TransitionAlerts.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Alert from '@mui/material/Alert';
-import IconButton from '@mui/material/IconButton';
-import Collapse from '@mui/material/Collapse';
-import Button from '@mui/material/Button';
-import CloseIcon from '@mui/icons-material/Close';
-
-export default function TransitionAlerts() {
-  const [open, setOpen] = React.useState(true);
-
-  return (
-    
-      
-         {
-                setOpen(false);
-              }}
-            >
-              
-            
-          }
-          sx={{ mb: 2 }}
-        >
-          Click the close icon to see the Collapse transition in action!
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/alert/alert.md b/docs/data/material/components/alert/alert.md
index d1b638c7cf3ff8..7e03c1b2f89e62 100644
--- a/docs/data/material/components/alert/alert.md
+++ b/docs/data/material/components/alert/alert.md
@@ -19,7 +19,7 @@ Alerts give users brief and potentially time-sensitive information in an unobtru
 
 The Material UI Alert component includes several props for quickly customizing its styles to provide immediate visual cues about its contents.
 
-{{"demo": "SimpleAlert.js"}}
+{{"component": "../data/material/components/alert/demos/simple/index.ts"}}
 
 :::info
 This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it.
@@ -43,7 +43,7 @@ The Alert component wraps around its content, and stretches to fill its enclosin
 
 The `severity` prop accepts four values representing different states—`success` (the default), `info`, `warning`, and `error`–with corresponding icon and color combinations for each:
 
-{{"demo": "BasicAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/basic/index.ts"}}
 
 ### Variants
 
@@ -51,11 +51,11 @@ The Alert component comes with two alternative style options—`filled` and `out
 
 #### Filled
 
-{{"demo": "FilledAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/filled/index.ts"}}
 
 #### Outlined
 
-{{"demo": "OutlinedAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/outlined/index.ts"}}
 
 :::warning
 When using an outlined Alert with the [Snackbar](/material-ui/react-snackbar/) component, background content will be visible and bleed through the Alert by default.
@@ -72,7 +72,7 @@ Check out the [Snackbar—customization](/material-ui/react-snackbar/#customizat
 
 Use the `color` prop to override the default color for the specified [`severity`](#severity)—for instance, to apply `warning` colors to a `success` Alert:
 
-{{"demo": "ColorAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/color/index.ts"}}
 
 ### Actions
 
@@ -81,7 +81,7 @@ This lets you insert any element—an HTML tag, an SVG icon, or a React componen
 
 If you provide an `onClose` callback to the Alert without setting the `action` prop, the component will display a close icon (✕) by default.
 
-{{"demo": "ActionAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/action/index.ts"}}
 
 ### Icons
 
@@ -92,7 +92,7 @@ Set this prop to `false` to remove the icon altogether.
 If you need to override all instances of an icon for a given [`severity`](#severity), you can use the `iconMapping` prop instead.
 You can define this prop globally by customizing your app's theme. See [Theme components—Default props](/material-ui/customization/theme-components/#theme-default-props) for details.
 
-{{"demo": "IconAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/icon/index.ts"}}
 
 ## Customization
 
@@ -106,13 +106,13 @@ import AlertTitle from '@mui/material/AlertTitle';
 
 You can nest this component above the message in your Alert for a neatly styled and properly aligned title, as shown below:
 
-{{"demo": "DescriptionAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/description/index.ts"}}
 
 ### Transitions
 
 You can use [Transition components](/material-ui/transitions/) like [Collapse](/material-ui/transitions/#collapse) to add motion to an Alert's entrance and exit.
 
-{{"demo": "TransitionAlerts.js"}}
+{{"component": "../data/material/components/alert/demos/transition/index.ts"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/alert/ActionAlerts.tsx b/docs/data/material/components/alert/demos/action/ActionAlerts.tsx
similarity index 92%
rename from docs/data/material/components/alert/ActionAlerts.tsx
rename to docs/data/material/components/alert/demos/action/ActionAlerts.tsx
index 7cc818a4977723..c91cb79ba255db 100644
--- a/docs/data/material/components/alert/ActionAlerts.tsx
+++ b/docs/data/material/components/alert/demos/action/ActionAlerts.tsx
@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 export default function ActionAlerts() {
   return (
     
+      {/* @focus-start */}
        {}}>
         This Alert displays the default close icon.
       
@@ -18,6 +19,7 @@ export default function ActionAlerts() {
       >
         This Alert uses a Button component for its action.
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/alert/demos/action/index.ts b/docs/data/material/components/alert/demos/action/index.ts
new file mode 100644
index 00000000000000..492ed4b077c83e
--- /dev/null
+++ b/docs/data/material/components/alert/demos/action/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ActionAlerts from './ActionAlerts';
+
+export default createDemo(import.meta.url, ActionAlerts);
diff --git a/docs/data/material/components/alert/BasicAlerts.tsx b/docs/data/material/components/alert/demos/basic/BasicAlerts.tsx
similarity index 89%
rename from docs/data/material/components/alert/BasicAlerts.tsx
rename to docs/data/material/components/alert/demos/basic/BasicAlerts.tsx
index 14293eeb4dad98..23392ed658289e 100644
--- a/docs/data/material/components/alert/BasicAlerts.tsx
+++ b/docs/data/material/components/alert/demos/basic/BasicAlerts.tsx
@@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack';
 export default function BasicAlerts() {
   return (
     
+      {/* @focus-start */}
       This is a success Alert.
       This is an info Alert.
       This is a warning Alert.
       This is an error Alert.
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/alert/demos/basic/index.ts b/docs/data/material/components/alert/demos/basic/index.ts
new file mode 100644
index 00000000000000..e9850165352987
--- /dev/null
+++ b/docs/data/material/components/alert/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicAlerts from './BasicAlerts';
+
+export default createDemo(import.meta.url, BasicAlerts);
diff --git a/docs/data/material/components/alert/ColorAlerts.tsx b/docs/data/material/components/alert/demos/color/ColorAlerts.tsx
similarity index 82%
rename from docs/data/material/components/alert/ColorAlerts.tsx
rename to docs/data/material/components/alert/demos/color/ColorAlerts.tsx
index 2e69f76b1b82d8..bd7b649c477298 100644
--- a/docs/data/material/components/alert/ColorAlerts.tsx
+++ b/docs/data/material/components/alert/demos/color/ColorAlerts.tsx
@@ -1,9 +1,11 @@
 import Alert from '@mui/material/Alert';
 
 export default function ColorAlerts() {
+  // @focus-start @padding 1
   return (
     
       This is a success Alert with warning colors.
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/alert/demos/color/index.ts b/docs/data/material/components/alert/demos/color/index.ts
new file mode 100644
index 00000000000000..300b135428eb54
--- /dev/null
+++ b/docs/data/material/components/alert/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorAlerts from './ColorAlerts';
+
+export default createDemo(import.meta.url, ColorAlerts);
diff --git a/docs/data/material/components/alert/DescriptionAlerts.tsx b/docs/data/material/components/alert/demos/description/DescriptionAlerts.tsx
similarity index 94%
rename from docs/data/material/components/alert/DescriptionAlerts.tsx
rename to docs/data/material/components/alert/demos/description/DescriptionAlerts.tsx
index 552c892fccc10e..a67a5be72db2e0 100644
--- a/docs/data/material/components/alert/DescriptionAlerts.tsx
+++ b/docs/data/material/components/alert/demos/description/DescriptionAlerts.tsx
@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 export default function DescriptionAlerts() {
   return (
     
+      {/* @focus-start */}
       
         Success
         This is a success Alert with an encouraging title.
@@ -21,6 +22,7 @@ export default function DescriptionAlerts() {
         Error
         This is an error Alert with a scary title.
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/alert/demos/description/index.ts b/docs/data/material/components/alert/demos/description/index.ts
new file mode 100644
index 00000000000000..012317b95770c5
--- /dev/null
+++ b/docs/data/material/components/alert/demos/description/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DescriptionAlerts from './DescriptionAlerts';
+
+export default createDemo(import.meta.url, DescriptionAlerts);
diff --git a/docs/data/material/components/alert/FilledAlerts.tsx b/docs/data/material/components/alert/demos/filled/FilledAlerts.tsx
similarity index 92%
rename from docs/data/material/components/alert/FilledAlerts.tsx
rename to docs/data/material/components/alert/demos/filled/FilledAlerts.tsx
index 1003c206bdea05..1e6f0f0ffee406 100644
--- a/docs/data/material/components/alert/FilledAlerts.tsx
+++ b/docs/data/material/components/alert/demos/filled/FilledAlerts.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function FilledAlerts() {
   return (
     
+      {/* @focus-start */}
       
         This is a filled success Alert.
       
@@ -16,6 +17,7 @@ export default function FilledAlerts() {
       
         This is a filled error Alert.
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/alert/demos/filled/index.ts b/docs/data/material/components/alert/demos/filled/index.ts
new file mode 100644
index 00000000000000..5365e2dd04460c
--- /dev/null
+++ b/docs/data/material/components/alert/demos/filled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FilledAlerts from './FilledAlerts';
+
+export default createDemo(import.meta.url, FilledAlerts);
diff --git a/docs/data/material/components/alert/IconAlerts.tsx b/docs/data/material/components/alert/demos/icon/IconAlerts.tsx
similarity index 93%
rename from docs/data/material/components/alert/IconAlerts.tsx
rename to docs/data/material/components/alert/demos/icon/IconAlerts.tsx
index 6b0ed9b1be6add..167ec8cfaca31b 100644
--- a/docs/data/material/components/alert/IconAlerts.tsx
+++ b/docs/data/material/components/alert/demos/icon/IconAlerts.tsx
@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 export default function IconAlerts() {
   return (
     
+      {/* @focus-start */}
       } severity="success">
         This success Alert has a custom icon.
       
@@ -19,6 +20,7 @@ export default function IconAlerts() {
       >
         This success Alert uses `iconMapping` to override the default icon.
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/alert/demos/icon/index.ts b/docs/data/material/components/alert/demos/icon/index.ts
new file mode 100644
index 00000000000000..e1c56d2d8df310
--- /dev/null
+++ b/docs/data/material/components/alert/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconAlerts from './IconAlerts';
+
+export default createDemo(import.meta.url, IconAlerts);
diff --git a/docs/data/material/components/alert/OutlinedAlerts.tsx b/docs/data/material/components/alert/demos/outlined/OutlinedAlerts.tsx
similarity index 92%
rename from docs/data/material/components/alert/OutlinedAlerts.tsx
rename to docs/data/material/components/alert/demos/outlined/OutlinedAlerts.tsx
index 8f84f6827280fa..a86176848d3cd3 100644
--- a/docs/data/material/components/alert/OutlinedAlerts.tsx
+++ b/docs/data/material/components/alert/demos/outlined/OutlinedAlerts.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function OutlinedAlerts() {
   return (
     
+      {/* @focus-start */}
       
         This is an outlined success Alert.
       
@@ -16,6 +17,7 @@ export default function OutlinedAlerts() {
       
         This is an outlined error Alert.
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/alert/demos/outlined/index.ts b/docs/data/material/components/alert/demos/outlined/index.ts
new file mode 100644
index 00000000000000..597932d210d1b7
--- /dev/null
+++ b/docs/data/material/components/alert/demos/outlined/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OutlinedAlerts from './OutlinedAlerts';
+
+export default createDemo(import.meta.url, OutlinedAlerts);
diff --git a/docs/data/material/components/alert/SimpleAlert.tsx b/docs/data/material/components/alert/demos/simple/SimpleAlert.tsx
similarity index 87%
rename from docs/data/material/components/alert/SimpleAlert.tsx
rename to docs/data/material/components/alert/demos/simple/SimpleAlert.tsx
index aaecf0e2466891..419954017e6997 100644
--- a/docs/data/material/components/alert/SimpleAlert.tsx
+++ b/docs/data/material/components/alert/demos/simple/SimpleAlert.tsx
@@ -2,9 +2,11 @@ import Alert from '@mui/material/Alert';
 import CheckIcon from '@mui/icons-material/Check';
 
 export default function SimpleAlert() {
+  // @focus-start @padding 1
   return (
     } severity="success">
       Here is a gentle confirmation that your action was successful.
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/alert/demos/simple/index.ts b/docs/data/material/components/alert/demos/simple/index.ts
new file mode 100644
index 00000000000000..86f5ff718e43cc
--- /dev/null
+++ b/docs/data/material/components/alert/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleAlert from './SimpleAlert';
+
+export default createDemo(import.meta.url, SimpleAlert);
diff --git a/docs/data/material/components/alert/TransitionAlerts.tsx b/docs/data/material/components/alert/demos/transition/TransitionAlerts.tsx
similarity index 96%
rename from docs/data/material/components/alert/TransitionAlerts.tsx
rename to docs/data/material/components/alert/demos/transition/TransitionAlerts.tsx
index 1b02d5dc435734..3abd81034142e5 100644
--- a/docs/data/material/components/alert/TransitionAlerts.tsx
+++ b/docs/data/material/components/alert/demos/transition/TransitionAlerts.tsx
@@ -7,6 +7,7 @@ import Button from '@mui/material/Button';
 import CloseIcon from '@mui/icons-material/Close';
 
 export default function TransitionAlerts() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(true);
 
   return (
@@ -41,4 +42,5 @@ export default function TransitionAlerts() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/alert/demos/transition/index.ts b/docs/data/material/components/alert/demos/transition/index.ts
new file mode 100644
index 00000000000000..4525a4cb8e8012
--- /dev/null
+++ b/docs/data/material/components/alert/demos/transition/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransitionAlerts from './TransitionAlerts';
+
+export default createDemo(import.meta.url, TransitionAlerts);
diff --git a/docs/data/material/components/app-bar/BackToTop.js b/docs/data/material/components/app-bar/BackToTop.js
deleted file mode 100644
index 6e454039aa54a8..00000000000000
--- a/docs/data/material/components/app-bar/BackToTop.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import CssBaseline from '@mui/material/CssBaseline';
-import useScrollTrigger from '@mui/material/useScrollTrigger';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Fab from '@mui/material/Fab';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import Fade from '@mui/material/Fade';
-
-function ScrollTop(props) {
-  const { children, window } = props;
-  // Note that you normally won't need to set the window ref as useScrollTrigger
-  // will default to window.
-  // This is only being set here because the demo is in an iframe.
-  const trigger = useScrollTrigger({
-    target: window ? window() : undefined,
-    disableHysteresis: true,
-    threshold: 100,
-  });
-
-  const handleClick = (event) => {
-    const anchor = (event.target.ownerDocument || document).querySelector(
-      '#back-to-top-anchor',
-    );
-
-    if (anchor) {
-      anchor.scrollIntoView({
-        block: 'center',
-      });
-    }
-  };
-
-  return (
-    
-      
-        {children}
-      
-    
-  );
-}
-
-ScrollTop.propTypes = {
-  children: PropTypes.element,
-  /**
-   * Injected by the documentation to work in an iframe.
-   * You won't need it on your project.
-   */
-  window: PropTypes.func,
-};
-
-export default function BackToTop(props) {
-  return (
-    
-      
-      
-        
-          
-            Scroll to see button
-          
-        
-      
-      
-      
-        
-          {[...new Array(12)]
-            .map(
-              () => `Cras mattis consectetur purus sit amet fermentum.
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.
-Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
-            )
-            .join('\n')}
-        
-      
-      
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/BottomAppBar.js b/docs/data/material/components/app-bar/BottomAppBar.js
deleted file mode 100644
index 24afbb0929ace6..00000000000000
--- a/docs/data/material/components/app-bar/BottomAppBar.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import CssBaseline from '@mui/material/CssBaseline';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import Paper from '@mui/material/Paper';
-import Fab from '@mui/material/Fab';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
-import Avatar from '@mui/material/Avatar';
-import MenuIcon from '@mui/icons-material/Menu';
-import AddIcon from '@mui/icons-material/Add';
-import SearchIcon from '@mui/icons-material/Search';
-import MoreIcon from '@mui/icons-material/MoreVert';
-
-const messages = [
-  {
-    id: 1,
-    primary: 'Brunch this week?',
-    secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
-    person: '/static/images/avatar/5.jpg',
-  },
-  {
-    id: 2,
-    primary: 'Birthday Gift',
-    secondary: `Do you have a suggestion for a good present for John on his work
-      anniversary. I am really confused & would love your thoughts on it.`,
-    person: '/static/images/avatar/1.jpg',
-  },
-  {
-    id: 3,
-    primary: 'Recipe to try',
-    secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
-    person: '/static/images/avatar/2.jpg',
-  },
-  {
-    id: 4,
-    primary: 'Yes!',
-    secondary: 'I have the tickets to the ReactConf for this year.',
-    person: '/static/images/avatar/3.jpg',
-  },
-  {
-    id: 5,
-    primary: "Doctor's Appointment",
-    secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
-    person: '/static/images/avatar/4.jpg',
-  },
-  {
-    id: 6,
-    primary: 'Discussion',
-    secondary: `Menus that are generated by the bottom app bar (such as a bottom
-      navigation drawer or overflow menu) open as bottom sheets at a higher elevation
-      than the bar.`,
-    person: '/static/images/avatar/5.jpg',
-  },
-  {
-    id: 7,
-    primary: 'Summer BBQ',
-    secondary: `Who wants to have a cookout this weekend? I just got some furniture
-      for my backyard and would love to fire up the grill.`,
-    person: '/static/images/avatar/1.jpg',
-  },
-];
-
-const StyledFab = styled(Fab)({
-  position: 'absolute',
-  zIndex: 1,
-  top: -30,
-  left: 0,
-  right: 0,
-  margin: '0 auto',
-});
-
-export default function BottomAppBar() {
-  return (
-    
-      
-      
-        
-          Inbox
-        
-        
-          {messages.map(({ id, primary, secondary, person }) => (
-            
-              {id === 1 && (
-                
-                  Today
-                
-              )}
-              {id === 3 && (
-                
-                  Yesterday
-                
-              )}
-              
-                
-                  
-                
-                
-              
-            
-          ))}
-        
-      
-      
-        
-          
-            
-          
-          
-            
-          
-          
-          
-            
-          
-          
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/ButtonAppBar.js b/docs/data/material/components/app-bar/ButtonAppBar.js
deleted file mode 100644
index a9a57f5a53bdc7..00000000000000
--- a/docs/data/material/components/app-bar/ButtonAppBar.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-
-export default function ButtonAppBar() {
-  return (
-    
-      
-        
-          
-            
-          
-          
-            News
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/DenseAppBar.js b/docs/data/material/components/app-bar/DenseAppBar.js
deleted file mode 100644
index a170710ef0fa2b..00000000000000
--- a/docs/data/material/components/app-bar/DenseAppBar.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-
-export default function DenseAppBar() {
-  return (
-    
-      
-        
-          
-            
-          
-          
-            Photos
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview b/docs/data/material/components/app-bar/DenseAppBar.tsx.preview
deleted file mode 100644
index 09166609bd8828..00000000000000
--- a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-    
-      
-    
-    
-      Photos
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/app-bar/DrawerAppBar.js b/docs/data/material/components/app-bar/DrawerAppBar.js
deleted file mode 100644
index 6c06b633c0c595..00000000000000
--- a/docs/data/material/components/app-bar/DrawerAppBar.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
-import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import MenuIcon from '@mui/icons-material/Menu';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-const drawerWidth = 240;
-const navItems = ['Home', 'About', 'Contact'];
-
-function DrawerAppBar(props) {
-  const { window } = props;
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-
-  const handleDrawerToggle = () => {
-    setMobileOpen((prevState) => !prevState);
-  };
-
-  const drawer = (
-    
-      
-        MUI
-      
-      
-      
-        {navItems.map((item) => (
-          
-            
-              
-            
-          
-        ))}
-      
-    
-  );
-
-  const container = window !== undefined ? () => window().document.body : undefined;
-
-  return (
-    
-      
-      
-        
-          
-            
-          
-          
-            MUI
-          
-          
-            {navItems.map((item) => (
-              
-            ))}
-          
-        
-      
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique unde
-          fugit veniam eius, perspiciatis sunt? Corporis qui ducimus quibusdam,
-          aliquam dolore excepturi quae. Distinctio enim at eligendi perferendis in
-          cum quibusdam sed quae, accusantium et aperiam? Quod itaque exercitationem,
-          at ab sequi qui modi delectus quia corrupti alias distinctio nostrum.
-          Minima ex dolor modi inventore sapiente necessitatibus aliquam fuga et. Sed
-          numquam quibusdam at officia sapiente porro maxime corrupti perspiciatis
-          asperiores, exercitationem eius nostrum consequuntur iure aliquam itaque,
-          assumenda et! Quibusdam temporibus beatae doloremque voluptatum doloribus
-          soluta accusamus porro reprehenderit eos inventore facere, fugit, molestiae
-          ab officiis illo voluptates recusandae. Vel dolor nobis eius, ratione atque
-          soluta, aliquam fugit qui iste architecto perspiciatis. Nobis, voluptatem!
-          Cumque, eligendi unde aliquid minus quis sit debitis obcaecati error,
-          delectus quo eius exercitationem tempore. Delectus sapiente, provident
-          corporis dolorum quibusdam aut beatae repellendus est labore quisquam
-          praesentium repudiandae non vel laboriosam quo ab perferendis velit ipsa
-          deleniti modi! Ipsam, illo quod. Nesciunt commodi nihil corrupti cum non
-          fugiat praesentium doloremque architecto laborum aliquid. Quae, maxime
-          recusandae? Eveniet dolore molestiae dicta blanditiis est expedita eius
-          debitis cupiditate porro sed aspernatur quidem, repellat nihil quasi
-          praesentium quia eos, quibusdam provident. Incidunt tempore vel placeat
-          voluptate iure labore, repellendus beatae quia unde est aliquid dolor
-          molestias libero. Reiciendis similique exercitationem consequatur, nobis
-          placeat illo laudantium! Enim perferendis nulla soluta magni error,
-          provident repellat similique cupiditate ipsam, et tempore cumque quod! Qui,
-          iure suscipit tempora unde rerum autem saepe nisi vel cupiditate iusto.
-          Illum, corrupti? Fugiat quidem accusantium nulla. Aliquid inventore commodi
-          reprehenderit rerum reiciendis! Quidem alias repudiandae eaque eveniet
-          cumque nihil aliquam in expedita, impedit quas ipsum nesciunt ipsa ullam
-          consequuntur dignissimos numquam at nisi porro a, quaerat rem repellendus.
-          Voluptates perspiciatis, in pariatur impedit, nam facilis libero dolorem
-          dolores sunt inventore perferendis, aut sapiente modi nesciunt.
-        
-      
-    
-  );
-}
-
-DrawerAppBar.propTypes = {
-  /**
-   * Injected by the documentation to work in an iframe.
-   * You won't need it on your project.
-   */
-  window: PropTypes.func,
-};
-
-export default DrawerAppBar;
diff --git a/docs/data/material/components/app-bar/ElevateAppBar.js b/docs/data/material/components/app-bar/ElevateAppBar.js
deleted file mode 100644
index 1679f75e66c806..00000000000000
--- a/docs/data/material/components/app-bar/ElevateAppBar.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import CssBaseline from '@mui/material/CssBaseline';
-import useScrollTrigger from '@mui/material/useScrollTrigger';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-
-function ElevationScroll(props) {
-  const { children, window } = props;
-  // Note that you normally won't need to set the window ref as useScrollTrigger
-  // will default to window.
-  // This is only being set here because the demo is in an iframe.
-  const trigger = useScrollTrigger({
-    disableHysteresis: true,
-    threshold: 0,
-    target: window ? window() : undefined,
-  });
-
-  return children
-    ? React.cloneElement(children, {
-        elevation: trigger ? 4 : 0,
-      })
-    : null;
-}
-
-ElevationScroll.propTypes = {
-  children: PropTypes.element,
-  /**
-   * Injected by the documentation to work in an iframe.
-   * You won't need it on your project.
-   */
-  window: PropTypes.func,
-};
-
-export default function ElevateAppBar(props) {
-  return (
-    
-      
-      
-        
-          
-            
-              Scroll to elevate App bar
-            
-          
-        
-      
-      
-      
-        
-          {[...new Array(12)]
-            .map(
-              () => `Cras mattis consectetur purus sit amet fermentum.
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.
-Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
-            )
-            .join('\n')}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js b/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js
deleted file mode 100644
index 52bb534e32f117..00000000000000
--- a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import AppBar from '@mui/material/AppBar';
-import Stack from '@mui/material/Stack';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-
-function appBarLabel(label) {
-  return (
-    
-      
-        
-      
-      
-        {label}
-      
-    
-  );
-}
-
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-    primary: {
-      main: '#1976d2',
-    },
-  },
-});
-
-export default function EnableColorOnDarkAppBar() {
-  return (
-    
-      
-        
-          {appBarLabel('enableColorOnDark')}
-        
-        
-          {appBarLabel('default')}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview b/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview
deleted file mode 100644
index 1b12ffc0f60a7d..00000000000000
--- a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-    {appBarLabel('enableColorOnDark')}
-  
-  
-    {appBarLabel('default')}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/app-bar/HideAppBar.js b/docs/data/material/components/app-bar/HideAppBar.js
deleted file mode 100644
index 0753b6dd25b77b..00000000000000
--- a/docs/data/material/components/app-bar/HideAppBar.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import CssBaseline from '@mui/material/CssBaseline';
-import useScrollTrigger from '@mui/material/useScrollTrigger';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Slide from '@mui/material/Slide';
-
-function HideOnScroll(props) {
-  const { children, window } = props;
-  // Note that you normally won't need to set the window ref as useScrollTrigger
-  // will default to window.
-  // This is only being set here because the demo is in an iframe.
-  const trigger = useScrollTrigger({
-    target: window ? window() : undefined,
-  });
-
-  return (
-    
-      {children ?? 
}
-    
-  );
-}
-
-HideOnScroll.propTypes = {
-  children: PropTypes.element,
-  /**
-   * Injected by the documentation to work in an iframe.
-   * You won't need it on your project.
-   */
-  window: PropTypes.func,
-};
-
-export default function HideAppBar(props) {
-  return (
-    
-      
-      
-        
-          
-            
-              Scroll to hide App bar
-            
-          
-        
-      
-      
-      
-        
-          {[...new Array(12)]
-            .map(
-              () => `Cras mattis consectetur purus sit amet fermentum.
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.
-Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
-            )
-            .join('\n')}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/MenuAppBar.js b/docs/data/material/components/app-bar/MenuAppBar.js
deleted file mode 100644
index 37dab55766a0ff..00000000000000
--- a/docs/data/material/components/app-bar/MenuAppBar.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormGroup from '@mui/material/FormGroup';
-import MenuItem from '@mui/material/MenuItem';
-import Menu from '@mui/material/Menu';
-
-export default function MenuAppBar() {
-  const [auth, setAuth] = React.useState(true);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleChange = (event) => {
-    setAuth(event.target.checked);
-  };
-
-  const handleMenu = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
-      
-        
-          }
-          label={auth ? 'Logout' : 'Login'}
-        />
-      
-      
-        
-          
-            
-          
-          
-            Photos
-          
-          {auth && (
-            

-              
-                
-              
-              
-                Profile
-                My account
-              
-            

-          )}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/PrimarySearchAppBar.js b/docs/data/material/components/app-bar/PrimarySearchAppBar.js
deleted file mode 100644
index 55b56ac71026a4..00000000000000
--- a/docs/data/material/components/app-bar/PrimarySearchAppBar.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import InputBase from '@mui/material/InputBase';
-import Badge from '@mui/material/Badge';
-import MenuItem from '@mui/material/MenuItem';
-import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import MailIcon from '@mui/icons-material/Mail';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import MoreIcon from '@mui/icons-material/MoreVert';
-
-const Search = styled('div')(({ theme }) => ({
-  position: 'relative',
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
-  '&:hover': {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
-  marginRight: theme.spacing(2),
-  marginLeft: 0,
-  width: '100%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(3),
-    width: 'auto',
-  },
-}));
-
-const SearchIconWrapper = styled('div')(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  color: 'inherit',
-  '& .MuiInputBase-input': {
-    padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    transition: theme.transitions.create('width'),
-    width: '100%',
-    [theme.breakpoints.up('md')]: {
-      width: '20ch',
-    },
-  },
-}));
-
-export default function PrimarySearchAppBar() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
-
-  const isMenuOpen = Boolean(anchorEl);
-  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
-
-  const handleProfileMenuOpen = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMobileMenuClose = () => {
-    setMobileMoreAnchorEl(null);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-    handleMobileMenuClose();
-  };
-
-  const handleMobileMenuOpen = (event) => {
-    setMobileMoreAnchorEl(event.currentTarget);
-  };
-
-  const menuId = 'primary-search-account-menu';
-  const renderMenu = (
-    
-      Profile
-      My account
-    
-  );
-
-  const mobileMenuId = 'primary-search-account-menu-mobile';
-  const renderMobileMenu = (
-    
-      
-        
-          
-            
-          
-        
-        
Messages

-      
-      
-        
-          
-            
-          
-        
-        
Notifications

-      
-      
-        
-          
-        
-        
Profile

-      
-    
-  );
-
-  return (
-    
-      
-        
-          
-            
-          
-          
-            MUI
-          
-          
-            
-              
-            
-            
-          
-          
-          
-            
-              
-                
-              
-            
-            
-              
-                
-              
-            
-            
-              
-            
-          
-          
-            
-              
-            
-          
-        
-      
-      {renderMobileMenu}
-      {renderMenu}
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/ProminentAppBar.js b/docs/data/material/components/app-bar/ProminentAppBar.js
deleted file mode 100644
index c7cf66b17032dc..00000000000000
--- a/docs/data/material/components/app-bar/ProminentAppBar.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { styled } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-import MoreIcon from '@mui/icons-material/MoreVert';
-
-const StyledToolbar = styled(Toolbar)(({ theme }) => ({
-  alignItems: 'flex-start',
-  paddingTop: theme.spacing(1),
-  paddingBottom: theme.spacing(2),
-  // Override media queries injected by theme.mixins.toolbar
-  '@media all': {
-    minHeight: 128,
-  },
-}));
-
-export default function ProminentAppBar() {
-  return (
-    
-      
-        
-          
-            
-          
-          
-            MUI
-          
-          
-            
-          
-          
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/ResponsiveAppBar.js b/docs/data/material/components/app-bar/ResponsiveAppBar.js
deleted file mode 100644
index 270bdc428f0c7c..00000000000000
--- a/docs/data/material/components/app-bar/ResponsiveAppBar.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import AdbIcon from '@mui/icons-material/Adb';
-
-const pages = ['Products', 'Pricing', 'Blog'];
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
-
-function ResponsiveAppBar() {
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
-
-  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  };
-
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
-  return (
-    
-      
-        
-          
-          
-            LOGO
-          
-
-          
-            
-              
-            
-            
-              {pages.map((page) => (
-                
-                  {page}
-                
-              ))}
-            
-          
-          
-          
-            LOGO
-          
-          
-            {pages.map((page) => (
-              
-            ))}
-          
-          
-            
-              
-                
-              
-            
-            
-              {settings.map((setting) => (
-                
-                  {setting}
-                
-              ))}
-            
-          
-        
-      
-    
-  );
-}
-export default ResponsiveAppBar;
diff --git a/docs/data/material/components/app-bar/SearchAppBar.js b/docs/data/material/components/app-bar/SearchAppBar.js
deleted file mode 100644
index c193b74a92c415..00000000000000
--- a/docs/data/material/components/app-bar/SearchAppBar.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { styled, alpha } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import InputBase from '@mui/material/InputBase';
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-
-const Search = styled('div')(({ theme }) => ({
-  position: 'relative',
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
-  '&:hover': {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
-  marginLeft: 0,
-  width: '100%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(1),
-    width: 'auto',
-  },
-}));
-
-const SearchIconWrapper = styled('div')(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  color: 'inherit',
-  width: '100%',
-  '& .MuiInputBase-input': {
-    padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    transition: theme.transitions.create('width'),
-    [theme.breakpoints.up('sm')]: {
-      width: '12ch',
-      '&:focus': {
-        width: '20ch',
-      },
-    },
-  },
-}));
-
-export default function SearchAppBar() {
-  return (
-    
-      
-        
-          
-            
-          
-          
-            MUI
-          
-          
-            
-              
-            
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md
index 71fa5640992909..8853f6093d2626 100644
--- a/docs/data/material/components/app-bar/app-bar.md
+++ b/docs/data/material/components/app-bar/app-bar.md
@@ -19,45 +19,45 @@ It can transform into a contextual action bar or be used as a navbar.
 
 ## Basic App bar
 
-{{"demo": "ButtonAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/button/index.ts", "bg": true}}
 
 ## App bar with menu
 
-{{"demo": "MenuAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/menu/index.ts", "bg": true}}
 
 ## App bar with responsive menu
 
-{{"demo": "ResponsiveAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/responsive/index.ts", "bg": true}}
 
 ## App bar with search field
 
 A side searchbar.
 
-{{"demo": "SearchAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/search/index.ts", "bg": true}}
 
 ## Responsive App bar with Drawer
 
-{{"demo": "DrawerAppBar.js", "bg": true,"iframe": true}}
+{{"component": "../data/material/components/app-bar/demos/drawer/index.ts", "bg": true,"iframe": true}}
 
 ## App bar with a primary search field
 
 A primary searchbar.
 
-{{"demo": "PrimarySearchAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/primary-search/index.ts", "bg": true}}
 
 ## Dense (desktop only)
 
-{{"demo": "DenseAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/dense/index.ts", "bg": true}}
 
 ## Prominent
 
 A prominent app bar.
 
-{{"demo": "ProminentAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/prominent/index.ts", "bg": true}}
 
 ## Bottom App bar
 
-{{"demo": "BottomAppBar.js", "iframe": true, "maxWidth": 400}}
+{{"component": "../data/material/components/app-bar/demos/bottom/index.ts", "iframe": true, "maxWidth": 400}}
 
 ## Fixed placement
 
@@ -104,19 +104,19 @@ You can use the `useScrollTrigger()` hook to respond to user scroll actions.
 
 The app bar hides on scroll down to leave more space for reading.
 
-{{"demo": "HideAppBar.js", "iframe": true, "disableLiveEdit": true}}
+{{"component": "../data/material/components/app-bar/demos/hide/index.ts", "iframe": true, "disableLiveEdit": true}}
 
 ### Elevate App bar
 
 The app bar elevates on scroll to communicate that the user is not at the top of the page.
 
-{{"demo": "ElevateAppBar.js", "iframe": true, "disableLiveEdit": true}}
+{{"component": "../data/material/components/app-bar/demos/elevate/index.ts", "iframe": true, "disableLiveEdit": true}}
 
 ### Back to top
 
 A floating action button appears on scroll to make it easy to get back to the top of the page.
 
-{{"demo": "BackToTop.js", "iframe": true, "disableLiveEdit": true}}
+{{"component": "../data/material/components/app-bar/demos/back-to-top/index.ts", "iframe": true, "disableLiveEdit": true}}
 
 ### `useScrollTrigger([options]) => trigger`
 
@@ -151,4 +151,4 @@ function HideOnScroll(props) {
 Following the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode.
 You can override this behavior by setting the `enableColorOnDark` prop to `true`.
 
-{{"demo": "EnableColorOnDarkAppBar.js", "bg": true}}
+{{"component": "../data/material/components/app-bar/demos/enable-color-on-dark/index.ts", "bg": true}}
diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/demos/back-to-top/BackToTop.tsx
similarity index 98%
rename from docs/data/material/components/app-bar/BackToTop.tsx
rename to docs/data/material/components/app-bar/demos/back-to-top/BackToTop.tsx
index 844439ea2913dd..2ad6e95bfad9b6 100644
--- a/docs/data/material/components/app-bar/BackToTop.tsx
+++ b/docs/data/material/components/app-bar/demos/back-to-top/BackToTop.tsx
@@ -58,6 +58,7 @@ function ScrollTop(props: Props) {
 export default function BackToTop(props: Props) {
   return (
     
+      {/* @focus-start */}
       
       
         
@@ -84,6 +85,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/back-to-top/index.ts b/docs/data/material/components/app-bar/demos/back-to-top/index.ts
new file mode 100644
index 00000000000000..e8de624934811c
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/back-to-top/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BackToTop from './BackToTop';
+
+export default createDemo(import.meta.url, BackToTop);
diff --git a/docs/data/material/components/app-bar/BottomAppBar.tsx b/docs/data/material/components/app-bar/demos/bottom/BottomAppBar.tsx
similarity index 98%
rename from docs/data/material/components/app-bar/BottomAppBar.tsx
rename to docs/data/material/components/app-bar/demos/bottom/BottomAppBar.tsx
index 24afbb0929ace6..7bf448c5935b4b 100644
--- a/docs/data/material/components/app-bar/BottomAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/bottom/BottomAppBar.tsx
@@ -80,6 +80,7 @@ const StyledFab = styled(Fab)({
 export default function BottomAppBar() {
   return (
     
+      {/* @focus-start */}
       
       
         
@@ -125,6 +126,7 @@ export default function BottomAppBar() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/bottom/index.ts b/docs/data/material/components/app-bar/demos/bottom/index.ts
new file mode 100644
index 00000000000000..6b3de87548d67b
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/bottom/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BottomAppBar from './BottomAppBar';
+
+export default createDemo(import.meta.url, BottomAppBar);
diff --git a/docs/data/material/components/app-bar/ButtonAppBar.tsx b/docs/data/material/components/app-bar/demos/button/ButtonAppBar.tsx
similarity index 94%
rename from docs/data/material/components/app-bar/ButtonAppBar.tsx
rename to docs/data/material/components/app-bar/demos/button/ButtonAppBar.tsx
index a9a57f5a53bdc7..efdb444fa1434c 100644
--- a/docs/data/material/components/app-bar/ButtonAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/button/ButtonAppBar.tsx
@@ -9,6 +9,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 export default function ButtonAppBar() {
   return (
     
+      {/* @focus-start */}
       
         
           Login
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/button/index.ts b/docs/data/material/components/app-bar/demos/button/index.ts
new file mode 100644
index 00000000000000..21ce4d53613f7f
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/button/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ButtonAppBar from './ButtonAppBar';
+
+export default createDemo(import.meta.url, ButtonAppBar);
diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx b/docs/data/material/components/app-bar/demos/dense/DenseAppBar.tsx
similarity index 93%
rename from docs/data/material/components/app-bar/DenseAppBar.tsx
rename to docs/data/material/components/app-bar/demos/dense/DenseAppBar.tsx
index a170710ef0fa2b..d570ec00002d33 100644
--- a/docs/data/material/components/app-bar/DenseAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/dense/DenseAppBar.tsx
@@ -8,6 +8,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 export default function DenseAppBar() {
   return (
     
+      {/* @focus-start */}
       
         
           
@@ -24,6 +25,7 @@ export default function DenseAppBar() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/dense/index.ts b/docs/data/material/components/app-bar/demos/dense/index.ts
new file mode 100644
index 00000000000000..e8a3a5d2737381
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/dense/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DenseAppBar from './DenseAppBar';
+
+export default createDemo(import.meta.url, DenseAppBar);
diff --git a/docs/data/material/components/app-bar/DrawerAppBar.tsx b/docs/data/material/components/app-bar/demos/drawer/DrawerAppBar.tsx
similarity index 99%
rename from docs/data/material/components/app-bar/DrawerAppBar.tsx
rename to docs/data/material/components/app-bar/demos/drawer/DrawerAppBar.tsx
index 1051b04cbe496c..ba78fe0bdc80f4 100644
--- a/docs/data/material/components/app-bar/DrawerAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/drawer/DrawerAppBar.tsx
@@ -26,6 +26,7 @@ const drawerWidth = 240;
 const navItems = ['Home', 'About', 'Contact'];
 
 export default function DrawerAppBar(props: Props) {
+  // @focus-start @padding 1
   const { window } = props;
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
@@ -139,4 +140,5 @@ export default function DrawerAppBar(props: Props) {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/app-bar/demos/drawer/index.ts b/docs/data/material/components/app-bar/demos/drawer/index.ts
new file mode 100644
index 00000000000000..2670088130ecae
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/drawer/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DrawerAppBar from './DrawerAppBar';
+
+export default createDemo(import.meta.url, DrawerAppBar);
diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/demos/elevate/ElevateAppBar.tsx
similarity index 97%
rename from docs/data/material/components/app-bar/ElevateAppBar.tsx
rename to docs/data/material/components/app-bar/demos/elevate/ElevateAppBar.tsx
index 41f9f304c89c37..953dd9ef78eeec 100644
--- a/docs/data/material/components/app-bar/ElevateAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/elevate/ElevateAppBar.tsx
@@ -37,6 +37,7 @@ function ElevationScroll(props: Props) {
 export default function ElevateAppBar(props: Props) {
   return (
     
+      {/* @focus-start */}
       
       
         
@@ -60,6 +61,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
             .join('\n')}
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/elevate/index.ts b/docs/data/material/components/app-bar/demos/elevate/index.ts
new file mode 100644
index 00000000000000..c3a483587887d1
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/elevate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ElevateAppBar from './ElevateAppBar';
+
+export default createDemo(import.meta.url, ElevateAppBar);
diff --git a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx b/docs/data/material/components/app-bar/demos/enable-color-on-dark/EnableColorOnDarkAppBar.tsx
similarity index 95%
rename from docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx
rename to docs/data/material/components/app-bar/demos/enable-color-on-dark/EnableColorOnDarkAppBar.tsx
index aa6877d3978391..7ba13592f93860 100644
--- a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/enable-color-on-dark/EnableColorOnDarkAppBar.tsx
@@ -31,6 +31,7 @@ const darkTheme = createTheme({
 export default function EnableColorOnDarkAppBar() {
   return (
     
+      {/* @focus-start */}
       
         
           {appBarLabel('enableColorOnDark')}
@@ -39,6 +40,7 @@ export default function EnableColorOnDarkAppBar() {
           {appBarLabel('default')}
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts b/docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts
new file mode 100644
index 00000000000000..b52ff2fedd36dd
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import EnableColorOnDarkAppBar from './EnableColorOnDarkAppBar';
+
+export default createDemo(import.meta.url, EnableColorOnDarkAppBar);
diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/demos/hide/HideAppBar.tsx
similarity index 97%
rename from docs/data/material/components/app-bar/HideAppBar.tsx
rename to docs/data/material/components/app-bar/demos/hide/HideAppBar.tsx
index 9c4edd8a1af106..f85d6adb017629 100644
--- a/docs/data/material/components/app-bar/HideAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/hide/HideAppBar.tsx
@@ -36,6 +36,7 @@ function HideOnScroll(props: Props) {
 export default function HideAppBar(props: Props) {
   return (
     
+      {/* @focus-start */}
       
       
         
@@ -59,6 +60,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
             .join('\n')}
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/hide/index.ts b/docs/data/material/components/app-bar/demos/hide/index.ts
new file mode 100644
index 00000000000000..41282ddabe521e
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/hide/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HideAppBar from './HideAppBar';
+
+export default createDemo(import.meta.url, HideAppBar);
diff --git a/docs/data/material/components/app-bar/MenuAppBar.tsx b/docs/data/material/components/app-bar/demos/menu/MenuAppBar.tsx
similarity index 98%
rename from docs/data/material/components/app-bar/MenuAppBar.tsx
rename to docs/data/material/components/app-bar/demos/menu/MenuAppBar.tsx
index 9ce40c662d439a..53ccda830fcddb 100644
--- a/docs/data/material/components/app-bar/MenuAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/menu/MenuAppBar.tsx
@@ -13,6 +13,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
 
 export default function MenuAppBar() {
+  // @focus-start @padding 1
   const [auth, setAuth] = React.useState(true);
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -92,4 +93,5 @@ export default function MenuAppBar() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/app-bar/demos/menu/index.ts b/docs/data/material/components/app-bar/demos/menu/index.ts
new file mode 100644
index 00000000000000..b4f115d2940f23
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/menu/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MenuAppBar from './MenuAppBar';
+
+export default createDemo(import.meta.url, MenuAppBar);
diff --git a/docs/data/material/components/app-bar/PrimarySearchAppBar.tsx b/docs/data/material/components/app-bar/demos/primary-search/PrimarySearchAppBar.tsx
similarity index 99%
rename from docs/data/material/components/app-bar/PrimarySearchAppBar.tsx
rename to docs/data/material/components/app-bar/demos/primary-search/PrimarySearchAppBar.tsx
index c83f2a84bcdda7..5f1d026fc8a34c 100644
--- a/docs/data/material/components/app-bar/PrimarySearchAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/primary-search/PrimarySearchAppBar.tsx
@@ -57,6 +57,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 export default function PrimarySearchAppBar() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [mobileMoreAnchorEl, setMobileMoreAnchorEl] =
     React.useState(null);
@@ -231,4 +232,5 @@ export default function PrimarySearchAppBar() {
       {renderMenu}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/app-bar/demos/primary-search/index.ts b/docs/data/material/components/app-bar/demos/primary-search/index.ts
new file mode 100644
index 00000000000000..fbcf3ad0558359
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/primary-search/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PrimarySearchAppBar from './PrimarySearchAppBar';
+
+export default createDemo(import.meta.url, PrimarySearchAppBar);
diff --git a/docs/data/material/components/app-bar/ProminentAppBar.tsx b/docs/data/material/components/app-bar/demos/prominent/ProminentAppBar.tsx
similarity index 96%
rename from docs/data/material/components/app-bar/ProminentAppBar.tsx
rename to docs/data/material/components/app-bar/demos/prominent/ProminentAppBar.tsx
index c7cf66b17032dc..5c68001f19a6e1 100644
--- a/docs/data/material/components/app-bar/ProminentAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/prominent/ProminentAppBar.tsx
@@ -21,6 +21,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
 export default function ProminentAppBar() {
   return (
     
+      {/* @focus-start */}
       
         
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/prominent/index.ts b/docs/data/material/components/app-bar/demos/prominent/index.ts
new file mode 100644
index 00000000000000..65e2ccdabfba75
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/prominent/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ProminentAppBar from './ProminentAppBar';
+
+export default createDemo(import.meta.url, ProminentAppBar);
diff --git a/docs/data/material/components/app-bar/ResponsiveAppBar.tsx b/docs/data/material/components/app-bar/demos/responsive/ResponsiveAppBar.tsx
similarity index 100%
rename from docs/data/material/components/app-bar/ResponsiveAppBar.tsx
rename to docs/data/material/components/app-bar/demos/responsive/ResponsiveAppBar.tsx
diff --git a/docs/data/material/components/app-bar/demos/responsive/index.ts b/docs/data/material/components/app-bar/demos/responsive/index.ts
new file mode 100644
index 00000000000000..4f396769614df2
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/responsive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ResponsiveAppBar from './ResponsiveAppBar';
+
+export default createDemo(import.meta.url, ResponsiveAppBar);
diff --git a/docs/data/material/components/app-bar/SearchAppBar.tsx b/docs/data/material/components/app-bar/demos/search/SearchAppBar.tsx
similarity index 97%
rename from docs/data/material/components/app-bar/SearchAppBar.tsx
rename to docs/data/material/components/app-bar/demos/search/SearchAppBar.tsx
index c193b74a92c415..839a7a27e5df73 100644
--- a/docs/data/material/components/app-bar/SearchAppBar.tsx
+++ b/docs/data/material/components/app-bar/demos/search/SearchAppBar.tsx
@@ -53,6 +53,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 export default function SearchAppBar() {
   return (
     
+      {/* @focus-start */}
       
         
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/app-bar/demos/search/index.ts b/docs/data/material/components/app-bar/demos/search/index.ts
new file mode 100644
index 00000000000000..c2983413272c48
--- /dev/null
+++ b/docs/data/material/components/app-bar/demos/search/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SearchAppBar from './SearchAppBar';
+
+export default createDemo(import.meta.url, SearchAppBar);
diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js
deleted file mode 100644
index fdc8199accc1b6..00000000000000
--- a/docs/data/material/components/autocomplete/Asynchronous.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import CircularProgress from '@mui/material/CircularProgress';
-
-function sleep(duration) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve();
-    }, duration);
-  });
-}
-
-export default function Asynchronous() {
-  const [open, setOpen] = React.useState(false);
-  const [options, setOptions] = React.useState([]);
-  const [loading, setLoading] = React.useState(false);
-
-  const handleOpen = () => {
-    setOpen(true);
-    (async () => {
-      setLoading(true);
-      await sleep(1e3); // For demo purposes.
-      setLoading(false);
-
-      setOptions([...topFilms]);
-    })();
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    setOptions([]);
-  };
-
-  return (
-     option.title === value.title}
-      getOptionLabel={(option) => option.title}
-      options={options}
-      loading={loading}
-      renderInput={(params) => (
-        
-                  {loading ?  : null}
-                  {params.slotProps.input.endAdornment}
-                
-              ),
-            },
-          }}
-        />
-      )}
-    />
-  );
-}
-
-// Top films as rated by IMDb users. http://www.imdb.com/chart/top
-const topFilms = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-];
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js
deleted file mode 100644
index ab0db8c05e1cfc..00000000000000
--- a/docs/data/material/components/autocomplete/AutocompleteHint.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-export default function AutocompleteHint() {
-  const hint = React.useRef('');
-  const [inputValue, setInputValue] = React.useState('');
-  return (
-     {
-        if (event.key === 'Tab') {
-          if (hint.current) {
-            setInputValue(hint.current);
-            event.preventDefault();
-          }
-        }
-      }}
-      onClose={() => {
-        hint.current = '';
-      }}
-      onChange={(event, newValue) => {
-        setInputValue(newValue && newValue.label ? newValue.label : '');
-      }}
-      disablePortal
-      inputValue={inputValue}
-      id="combo-box-hint-demo"
-      options={top100Films}
-      sx={{ width: 300 }}
-      renderInput={(params) => {
-        return (
-          
-            
-              {hint.current}
-            
-             {
-                const newValue = event.target.value;
-                setInputValue(newValue);
-                const matchingOption = top100Films.find((option) =>
-                  option.label.startsWith(newValue),
-                );
-
-                if (newValue && matchingOption) {
-                  hint.current = matchingOption.label;
-                } else {
-                  hint.current = '';
-                }
-              }}
-              label="Movie"
-            />
-          
-        );
-      }}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { label: 'The Shawshank Redemption', year: 1994 },
-  { label: 'The Godfather', year: 1972 },
-  { label: 'The Godfather: Part II', year: 1974 },
-  { label: 'The Dark Knight', year: 2008 },
-  { label: '12 Angry Men', year: 1957 },
-  { label: "Schindler's List", year: 1993 },
-  { label: 'Pulp Fiction', year: 1994 },
-  {
-    label: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { label: 'The Good, the Bad and the Ugly', year: 1966 },
-  { label: 'Fight Club', year: 1999 },
-  {
-    label: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    label: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { label: 'Forrest Gump', year: 1994 },
-  { label: 'Inception', year: 2010 },
-  {
-    label: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { label: 'Goodfellas', year: 1990 },
-  { label: 'The Matrix', year: 1999 },
-  { label: 'Seven Samurai', year: 1954 },
-  {
-    label: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { label: 'City of God', year: 2002 },
-  { label: 'Se7en', year: 1995 },
-  { label: 'The Silence of the Lambs', year: 1991 },
-  { label: "It's a Wonderful Life", year: 1946 },
-  { label: 'Life Is Beautiful', year: 1997 },
-  { label: 'The Usual Suspects', year: 1995 },
-  { label: 'Léon: The Professional', year: 1994 },
-  { label: 'Spirited Away', year: 2001 },
-  { label: 'Saving Private Ryan', year: 1998 },
-  { label: 'Once Upon a Time in the West', year: 1968 },
-  { label: 'American History X', year: 1998 },
-  { label: 'Interstellar', year: 2014 },
-  { label: 'Casablanca', year: 1942 },
-  { label: 'City Lights', year: 1931 },
-  { label: 'Psycho', year: 1960 },
-  { label: 'The Green Mile', year: 1999 },
-  { label: 'The Intouchables', year: 2011 },
-  { label: 'Modern Times', year: 1936 },
-  { label: 'Raiders of the Lost Ark', year: 1981 },
-  { label: 'Rear Window', year: 1954 },
-  { label: 'The Pianist', year: 2002 },
-  { label: 'The Departed', year: 2006 },
-  { label: 'Terminator 2: Judgment Day', year: 1991 },
-  { label: 'Back to the Future', year: 1985 },
-  { label: 'Whiplash', year: 2014 },
-  { label: 'Gladiator', year: 2000 },
-  { label: 'Memento', year: 2000 },
-  { label: 'The Prestige', year: 2006 },
-  { label: 'The Lion King', year: 1994 },
-  { label: 'Apocalypse Now', year: 1979 },
-  { label: 'Alien', year: 1979 },
-  { label: 'Sunset Boulevard', year: 1950 },
-  {
-    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { label: 'The Great Dictator', year: 1940 },
-  { label: 'Cinema Paradiso', year: 1988 },
-  { label: 'The Lives of Others', year: 2006 },
-  { label: 'Grave of the Fireflies', year: 1988 },
-  { label: 'Paths of Glory', year: 1957 },
-  { label: 'Django Unchained', year: 2012 },
-  { label: 'The Shining', year: 1980 },
-  { label: 'WALL·E', year: 2008 },
-  { label: 'American Beauty', year: 1999 },
-  { label: 'The Dark Knight Rises', year: 2012 },
-  { label: 'Princess Mononoke', year: 1997 },
-  { label: 'Aliens', year: 1986 },
-  { label: 'Oldboy', year: 2003 },
-  { label: 'Once Upon a Time in America', year: 1984 },
-  { label: 'Witness for the Prosecution', year: 1957 },
-  { label: 'Das Boot', year: 1981 },
-  { label: 'Citizen Kane', year: 1941 },
-  { label: 'North by Northwest', year: 1959 },
-  { label: 'Vertigo', year: 1958 },
-  {
-    label: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { label: 'Reservoir Dogs', year: 1992 },
-  { label: 'Braveheart', year: 1995 },
-  { label: 'M', year: 1931 },
-  { label: 'Requiem for a Dream', year: 2000 },
-  { label: 'Amélie', year: 2001 },
-  { label: 'A Clockwork Orange', year: 1971 },
-  { label: 'Like Stars on Earth', year: 2007 },
-  { label: 'Taxi Driver', year: 1976 },
-  { label: 'Lawrence of Arabia', year: 1962 },
-  { label: 'Double Indemnity', year: 1944 },
-  {
-    label: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { label: 'Amadeus', year: 1984 },
-  { label: 'To Kill a Mockingbird', year: 1962 },
-  { label: 'Toy Story 3', year: 2010 },
-  { label: 'Logan', year: 2017 },
-  { label: 'Full Metal Jacket', year: 1987 },
-  { label: 'Dangal', year: 2016 },
-  { label: 'The Sting', year: 1973 },
-  { label: '2001: A Space Odyssey', year: 1968 },
-  { label: "Singin' in the Rain", year: 1952 },
-  { label: 'Toy Story', year: 1995 },
-  { label: 'Bicycle Thieves', year: 1948 },
-  { label: 'The Kid', year: 1921 },
-  { label: 'Inglourious Basterds', year: 2009 },
-  { label: 'Snatch', year: 2000 },
-  { label: '3 Idiots', year: 2009 },
-  { label: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.js b/docs/data/material/components/autocomplete/CheckboxesTags.js
deleted file mode 100644
index 53dc0603f35c51..00000000000000
--- a/docs/data/material/components/autocomplete/CheckboxesTags.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-
-export default function CheckboxesTags() {
-  return (
-     option.title}
-      renderOption={(props, option, { selected }) => {
-        const { key, ...optionProps } = props;
-        const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
-
-        return (
-          
  • 
-            
-            {option.title}
-          
    • 
-        );
-      }}
-      style={{ width: 500 }}
-      renderInput={(params) => (
-        
-      )}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-];
diff --git a/docs/data/material/components/autocomplete/ComboBox.js b/docs/data/material/components/autocomplete/ComboBox.js
deleted file mode 100644
index 5b2fae26df430a..00000000000000
--- a/docs/data/material/components/autocomplete/ComboBox.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import top100Films from './top100Films';
-
-export default function ComboBox() {
-  return (
-     }
-    />
-  );
-}
diff --git a/docs/data/material/components/autocomplete/ComboBox.tsx.preview b/docs/data/material/components/autocomplete/ComboBox.tsx.preview
deleted file mode 100644
index 7382e2d5a10c39..00000000000000
--- a/docs/data/material/components/autocomplete/ComboBox.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
- }
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/ControllableStates.js b/docs/data/material/components/autocomplete/ControllableStates.js
deleted file mode 100644
index 0911878aedcd76..00000000000000
--- a/docs/data/material/components/autocomplete/ControllableStates.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-const options = ['Option 1', 'Option 2'];
-
-export default function ControllableStates() {
-  const [value, setValue] = React.useState(options[0]);
-  const [inputValue, setInputValue] = React.useState('');
-
-  return (
-    
    
-      
    {`value: ${value !== null ? `'${value}'` : 'null'}`}
    
-      
    {`inputValue: '${inputValue}'`}
    
-      
    
-       {
-          setValue(newValue);
-        }}
-        inputValue={inputValue}
-        onInputChange={(event, newInputValue) => {
-          setInputValue(newInputValue);
-        }}
-        id="controllable-states-demo"
-        options={options}
-        sx={{ width: 300 }}
-        renderInput={(params) => }
-      />
-    
    
-  );
-}
diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
deleted file mode 100644
index 4e6c30ac28c059..00000000000000
--- a/docs/data/material/components/autocomplete/CountrySelect.js
+++ /dev/null
@@ -1,474 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-export default function CountrySelect() {
-  return (
-     option.label}
-      renderOption={(props, option) => {
-        const { key, ...optionProps } = props;
-        return (
-           img': { mr: 2, flexShrink: 0 } }}
-            {...optionProps}
-          >
-            
-            {option.label} ({option.code}) +{option.phone}
-          
-        );
-      }}
-      renderInput={(params) => (
-        
-      )}
-    />
-  );
-}
-
-// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
-const countries = [
-  { code: 'AD', label: 'Andorra', phone: '376' },
-  {
-    code: 'AE',
-    label: 'United Arab Emirates',
-    phone: '971',
-  },
-  { code: 'AF', label: 'Afghanistan', phone: '93' },
-  {
-    code: 'AG',
-    label: 'Antigua and Barbuda',
-    phone: '1-268',
-  },
-  { code: 'AI', label: 'Anguilla', phone: '1-264' },
-  { code: 'AL', label: 'Albania', phone: '355' },
-  { code: 'AM', label: 'Armenia', phone: '374' },
-  { code: 'AO', label: 'Angola', phone: '244' },
-  { code: 'AQ', label: 'Antarctica', phone: '672' },
-  { code: 'AR', label: 'Argentina', phone: '54' },
-  { code: 'AS', label: 'American Samoa', phone: '1-684' },
-  { code: 'AT', label: 'Austria', phone: '43' },
-  {
-    code: 'AU',
-    label: 'Australia',
-    phone: '61',
-    suggested: true,
-  },
-  { code: 'AW', label: 'Aruba', phone: '297' },
-  { code: 'AX', label: 'Alland Islands', phone: '358' },
-  { code: 'AZ', label: 'Azerbaijan', phone: '994' },
-  {
-    code: 'BA',
-    label: 'Bosnia and Herzegovina',
-    phone: '387',
-  },
-  { code: 'BB', label: 'Barbados', phone: '1-246' },
-  { code: 'BD', label: 'Bangladesh', phone: '880' },
-  { code: 'BE', label: 'Belgium', phone: '32' },
-  { code: 'BF', label: 'Burkina Faso', phone: '226' },
-  { code: 'BG', label: 'Bulgaria', phone: '359' },
-  { code: 'BH', label: 'Bahrain', phone: '973' },
-  { code: 'BI', label: 'Burundi', phone: '257' },
-  { code: 'BJ', label: 'Benin', phone: '229' },
-  { code: 'BL', label: 'Saint Barthelemy', phone: '590' },
-  { code: 'BM', label: 'Bermuda', phone: '1-441' },
-  { code: 'BN', label: 'Brunei Darussalam', phone: '673' },
-  { code: 'BO', label: 'Bolivia', phone: '591' },
-  { code: 'BR', label: 'Brazil', phone: '55' },
-  { code: 'BS', label: 'Bahamas', phone: '1-242' },
-  { code: 'BT', label: 'Bhutan', phone: '975' },
-  { code: 'BV', label: 'Bouvet Island', phone: '47' },
-  { code: 'BW', label: 'Botswana', phone: '267' },
-  { code: 'BY', label: 'Belarus', phone: '375' },
-  { code: 'BZ', label: 'Belize', phone: '501' },
-  {
-    code: 'CA',
-    label: 'Canada',
-    phone: '1',
-    suggested: true,
-  },
-  {
-    code: 'CC',
-    label: 'Cocos (Keeling) Islands',
-    phone: '61',
-  },
-  {
-    code: 'CD',
-    label: 'Congo, Democratic Republic of the',
-    phone: '243',
-  },
-  {
-    code: 'CF',
-    label: 'Central African Republic',
-    phone: '236',
-  },
-  {
-    code: 'CG',
-    label: 'Congo, Republic of the',
-    phone: '242',
-  },
-  { code: 'CH', label: 'Switzerland', phone: '41' },
-  { code: 'CI', label: "Cote d'Ivoire", phone: '225' },
-  { code: 'CK', label: 'Cook Islands', phone: '682' },
-  { code: 'CL', label: 'Chile', phone: '56' },
-  { code: 'CM', label: 'Cameroon', phone: '237' },
-  { code: 'CN', label: 'China', phone: '86' },
-  { code: 'CO', label: 'Colombia', phone: '57' },
-  { code: 'CR', label: 'Costa Rica', phone: '506' },
-  { code: 'CU', label: 'Cuba', phone: '53' },
-  { code: 'CV', label: 'Cape Verde', phone: '238' },
-  { code: 'CW', label: 'Curacao', phone: '599' },
-  { code: 'CX', label: 'Christmas Island', phone: '61' },
-  { code: 'CY', label: 'Cyprus', phone: '357' },
-  { code: 'CZ', label: 'Czech Republic', phone: '420' },
-  {
-    code: 'DE',
-    label: 'Germany',
-    phone: '49',
-    suggested: true,
-  },
-  { code: 'DJ', label: 'Djibouti', phone: '253' },
-  { code: 'DK', label: 'Denmark', phone: '45' },
-  { code: 'DM', label: 'Dominica', phone: '1-767' },
-  {
-    code: 'DO',
-    label: 'Dominican Republic',
-    phone: '1-809',
-  },
-  { code: 'DZ', label: 'Algeria', phone: '213' },
-  { code: 'EC', label: 'Ecuador', phone: '593' },
-  { code: 'EE', label: 'Estonia', phone: '372' },
-  { code: 'EG', label: 'Egypt', phone: '20' },
-  { code: 'EH', label: 'Western Sahara', phone: '212' },
-  { code: 'ER', label: 'Eritrea', phone: '291' },
-  { code: 'ES', label: 'Spain', phone: '34' },
-  { code: 'ET', label: 'Ethiopia', phone: '251' },
-  { code: 'FI', label: 'Finland', phone: '358' },
-  { code: 'FJ', label: 'Fiji', phone: '679' },
-  {
-    code: 'FK',
-    label: 'Falkland Islands (Malvinas)',
-    phone: '500',
-  },
-  {
-    code: 'FM',
-    label: 'Micronesia, Federated States of',
-    phone: '691',
-  },
-  { code: 'FO', label: 'Faroe Islands', phone: '298' },
-  {
-    code: 'FR',
-    label: 'France',
-    phone: '33',
-    suggested: true,
-  },
-  { code: 'GA', label: 'Gabon', phone: '241' },
-  { code: 'GB', label: 'United Kingdom', phone: '44' },
-  { code: 'GD', label: 'Grenada', phone: '1-473' },
-  { code: 'GE', label: 'Georgia', phone: '995' },
-  { code: 'GF', label: 'French Guiana', phone: '594' },
-  { code: 'GG', label: 'Guernsey', phone: '44' },
-  { code: 'GH', label: 'Ghana', phone: '233' },
-  { code: 'GI', label: 'Gibraltar', phone: '350' },
-  { code: 'GL', label: 'Greenland', phone: '299' },
-  { code: 'GM', label: 'Gambia', phone: '220' },
-  { code: 'GN', label: 'Guinea', phone: '224' },
-  { code: 'GP', label: 'Guadeloupe', phone: '590' },
-  { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
-  { code: 'GR', label: 'Greece', phone: '30' },
-  {
-    code: 'GS',
-    label: 'South Georgia and the South Sandwich Islands',
-    phone: '500',
-  },
-  { code: 'GT', label: 'Guatemala', phone: '502' },
-  { code: 'GU', label: 'Guam', phone: '1-671' },
-  { code: 'GW', label: 'Guinea-Bissau', phone: '245' },
-  { code: 'GY', label: 'Guyana', phone: '592' },
-  { code: 'HK', label: 'Hong Kong', phone: '852' },
-  {
-    code: 'HM',
-    label: 'Heard Island and McDonald Islands',
-    phone: '672',
-  },
-  { code: 'HN', label: 'Honduras', phone: '504' },
-  { code: 'HR', label: 'Croatia', phone: '385' },
-  { code: 'HT', label: 'Haiti', phone: '509' },
-  { code: 'HU', label: 'Hungary', phone: '36' },
-  { code: 'ID', label: 'Indonesia', phone: '62' },
-  { code: 'IE', label: 'Ireland', phone: '353' },
-  { code: 'IL', label: 'Israel', phone: '972' },
-  { code: 'IM', label: 'Isle of Man', phone: '44' },
-  { code: 'IN', label: 'India', phone: '91' },
-  {
-    code: 'IO',
-    label: 'British Indian Ocean Territory',
-    phone: '246',
-  },
-  { code: 'IQ', label: 'Iraq', phone: '964' },
-  {
-    code: 'IR',
-    label: 'Iran, Islamic Republic of',
-    phone: '98',
-  },
-  { code: 'IS', label: 'Iceland', phone: '354' },
-  { code: 'IT', label: 'Italy', phone: '39' },
-  { code: 'JE', label: 'Jersey', phone: '44' },
-  { code: 'JM', label: 'Jamaica', phone: '1-876' },
-  { code: 'JO', label: 'Jordan', phone: '962' },
-  {
-    code: 'JP',
-    label: 'Japan',
-    phone: '81',
-    suggested: true,
-  },
-  { code: 'KE', label: 'Kenya', phone: '254' },
-  { code: 'KG', label: 'Kyrgyzstan', phone: '996' },
-  { code: 'KH', label: 'Cambodia', phone: '855' },
-  { code: 'KI', label: 'Kiribati', phone: '686' },
-  { code: 'KM', label: 'Comoros', phone: '269' },
-  {
-    code: 'KN',
-    label: 'Saint Kitts and Nevis',
-    phone: '1-869',
-  },
-  {
-    code: 'KP',
-    label: "Korea, Democratic People's Republic of",
-    phone: '850',
-  },
-  { code: 'KR', label: 'Korea, Republic of', phone: '82' },
-  { code: 'KW', label: 'Kuwait', phone: '965' },
-  { code: 'KY', label: 'Cayman Islands', phone: '1-345' },
-  { code: 'KZ', label: 'Kazakhstan', phone: '7' },
-  {
-    code: 'LA',
-    label: "Lao People's Democratic Republic",
-    phone: '856',
-  },
-  { code: 'LB', label: 'Lebanon', phone: '961' },
-  { code: 'LC', label: 'Saint Lucia', phone: '1-758' },
-  { code: 'LI', label: 'Liechtenstein', phone: '423' },
-  { code: 'LK', label: 'Sri Lanka', phone: '94' },
-  { code: 'LR', label: 'Liberia', phone: '231' },
-  { code: 'LS', label: 'Lesotho', phone: '266' },
-  { code: 'LT', label: 'Lithuania', phone: '370' },
-  { code: 'LU', label: 'Luxembourg', phone: '352' },
-  { code: 'LV', label: 'Latvia', phone: '371' },
-  { code: 'LY', label: 'Libya', phone: '218' },
-  { code: 'MA', label: 'Morocco', phone: '212' },
-  { code: 'MC', label: 'Monaco', phone: '377' },
-  {
-    code: 'MD',
-    label: 'Moldova, Republic of',
-    phone: '373',
-  },
-  { code: 'ME', label: 'Montenegro', phone: '382' },
-  {
-    code: 'MF',
-    label: 'Saint Martin (French part)',
-    phone: '590',
-  },
-  { code: 'MG', label: 'Madagascar', phone: '261' },
-  { code: 'MH', label: 'Marshall Islands', phone: '692' },
-  {
-    code: 'MK',
-    label: 'Macedonia, the Former Yugoslav Republic of',
-    phone: '389',
-  },
-  { code: 'ML', label: 'Mali', phone: '223' },
-  { code: 'MM', label: 'Myanmar', phone: '95' },
-  { code: 'MN', label: 'Mongolia', phone: '976' },
-  { code: 'MO', label: 'Macao', phone: '853' },
-  {
-    code: 'MP',
-    label: 'Northern Mariana Islands',
-    phone: '1-670',
-  },
-  { code: 'MQ', label: 'Martinique', phone: '596' },
-  { code: 'MR', label: 'Mauritania', phone: '222' },
-  { code: 'MS', label: 'Montserrat', phone: '1-664' },
-  { code: 'MT', label: 'Malta', phone: '356' },
-  { code: 'MU', label: 'Mauritius', phone: '230' },
-  { code: 'MV', label: 'Maldives', phone: '960' },
-  { code: 'MW', label: 'Malawi', phone: '265' },
-  { code: 'MX', label: 'Mexico', phone: '52' },
-  { code: 'MY', label: 'Malaysia', phone: '60' },
-  { code: 'MZ', label: 'Mozambique', phone: '258' },
-  { code: 'NA', label: 'Namibia', phone: '264' },
-  { code: 'NC', label: 'New Caledonia', phone: '687' },
-  { code: 'NE', label: 'Niger', phone: '227' },
-  { code: 'NF', label: 'Norfolk Island', phone: '672' },
-  { code: 'NG', label: 'Nigeria', phone: '234' },
-  { code: 'NI', label: 'Nicaragua', phone: '505' },
-  { code: 'NL', label: 'Netherlands', phone: '31' },
-  { code: 'NO', label: 'Norway', phone: '47' },
-  { code: 'NP', label: 'Nepal', phone: '977' },
-  { code: 'NR', label: 'Nauru', phone: '674' },
-  { code: 'NU', label: 'Niue', phone: '683' },
-  { code: 'NZ', label: 'New Zealand', phone: '64' },
-  { code: 'OM', label: 'Oman', phone: '968' },
-  { code: 'PA', label: 'Panama', phone: '507' },
-  { code: 'PE', label: 'Peru', phone: '51' },
-  { code: 'PF', label: 'French Polynesia', phone: '689' },
-  { code: 'PG', label: 'Papua New Guinea', phone: '675' },
-  { code: 'PH', label: 'Philippines', phone: '63' },
-  { code: 'PK', label: 'Pakistan', phone: '92' },
-  { code: 'PL', label: 'Poland', phone: '48' },
-  {
-    code: 'PM',
-    label: 'Saint Pierre and Miquelon',
-    phone: '508',
-  },
-  { code: 'PN', label: 'Pitcairn', phone: '870' },
-  { code: 'PR', label: 'Puerto Rico', phone: '1' },
-  {
-    code: 'PS',
-    label: 'Palestine, State of',
-    phone: '970',
-  },
-  { code: 'PT', label: 'Portugal', phone: '351' },
-  { code: 'PW', label: 'Palau', phone: '680' },
-  { code: 'PY', label: 'Paraguay', phone: '595' },
-  { code: 'QA', label: 'Qatar', phone: '974' },
-  { code: 'RE', label: 'Reunion', phone: '262' },
-  { code: 'RO', label: 'Romania', phone: '40' },
-  { code: 'RS', label: 'Serbia', phone: '381' },
-  { code: 'RU', label: 'Russian Federation', phone: '7' },
-  { code: 'RW', label: 'Rwanda', phone: '250' },
-  { code: 'SA', label: 'Saudi Arabia', phone: '966' },
-  { code: 'SB', label: 'Solomon Islands', phone: '677' },
-  { code: 'SC', label: 'Seychelles', phone: '248' },
-  { code: 'SD', label: 'Sudan', phone: '249' },
-  { code: 'SE', label: 'Sweden', phone: '46' },
-  { code: 'SG', label: 'Singapore', phone: '65' },
-  { code: 'SH', label: 'Saint Helena', phone: '290' },
-  { code: 'SI', label: 'Slovenia', phone: '386' },
-  {
-    code: 'SJ',
-    label: 'Svalbard and Jan Mayen',
-    phone: '47',
-  },
-  { code: 'SK', label: 'Slovakia', phone: '421' },
-  { code: 'SL', label: 'Sierra Leone', phone: '232' },
-  { code: 'SM', label: 'San Marino', phone: '378' },
-  { code: 'SN', label: 'Senegal', phone: '221' },
-  { code: 'SO', label: 'Somalia', phone: '252' },
-  { code: 'SR', label: 'Suriname', phone: '597' },
-  { code: 'SS', label: 'South Sudan', phone: '211' },
-  {
-    code: 'ST',
-    label: 'Sao Tome and Principe',
-    phone: '239',
-  },
-  { code: 'SV', label: 'El Salvador', phone: '503' },
-  {
-    code: 'SX',
-    label: 'Sint Maarten (Dutch part)',
-    phone: '1-721',
-  },
-  {
-    code: 'SY',
-    label: 'Syrian Arab Republic',
-    phone: '963',
-  },
-  { code: 'SZ', label: 'Swaziland', phone: '268' },
-  {
-    code: 'TC',
-    label: 'Turks and Caicos Islands',
-    phone: '1-649',
-  },
-  { code: 'TD', label: 'Chad', phone: '235' },
-  {
-    code: 'TF',
-    label: 'French Southern Territories',
-    phone: '262',
-  },
-  { code: 'TG', label: 'Togo', phone: '228' },
-  { code: 'TH', label: 'Thailand', phone: '66' },
-  { code: 'TJ', label: 'Tajikistan', phone: '992' },
-  { code: 'TK', label: 'Tokelau', phone: '690' },
-  { code: 'TL', label: 'Timor-Leste', phone: '670' },
-  { code: 'TM', label: 'Turkmenistan', phone: '993' },
-  { code: 'TN', label: 'Tunisia', phone: '216' },
-  { code: 'TO', label: 'Tonga', phone: '676' },
-  { code: 'TR', label: 'Turkey', phone: '90' },
-  {
-    code: 'TT',
-    label: 'Trinidad and Tobago',
-    phone: '1-868',
-  },
-  { code: 'TV', label: 'Tuvalu', phone: '688' },
-  {
-    code: 'TW',
-    label: 'Taiwan',
-    phone: '886',
-  },
-  {
-    code: 'TZ',
-    label: 'United Republic of Tanzania',
-    phone: '255',
-  },
-  { code: 'UA', label: 'Ukraine', phone: '380' },
-  { code: 'UG', label: 'Uganda', phone: '256' },
-  {
-    code: 'US',
-    label: 'United States',
-    phone: '1',
-    suggested: true,
-  },
-  { code: 'UY', label: 'Uruguay', phone: '598' },
-  { code: 'UZ', label: 'Uzbekistan', phone: '998' },
-  {
-    code: 'VA',
-    label: 'Holy See (Vatican City State)',
-    phone: '379',
-  },
-  {
-    code: 'VC',
-    label: 'Saint Vincent and the Grenadines',
-    phone: '1-784',
-  },
-  { code: 'VE', label: 'Venezuela', phone: '58' },
-  {
-    code: 'VG',
-    label: 'British Virgin Islands',
-    phone: '1-284',
-  },
-  {
-    code: 'VI',
-    label: 'US Virgin Islands',
-    phone: '1-340',
-  },
-  { code: 'VN', label: 'Vietnam', phone: '84' },
-  { code: 'VU', label: 'Vanuatu', phone: '678' },
-  { code: 'WF', label: 'Wallis and Futuna', phone: '681' },
-  { code: 'WS', label: 'Samoa', phone: '685' },
-  { code: 'XK', label: 'Kosovo', phone: '383' },
-  { code: 'YE', label: 'Yemen', phone: '967' },
-  { code: 'YT', label: 'Mayotte', phone: '262' },
-  { code: 'ZA', label: 'South Africa', phone: '27' },
-  { code: 'ZM', label: 'Zambia', phone: '260' },
-  { code: 'ZW', label: 'Zimbabwe', phone: '263' },
-];
diff --git a/docs/data/material/components/autocomplete/CustomInputAutocomplete.js b/docs/data/material/components/autocomplete/CustomInputAutocomplete.js
deleted file mode 100644
index 5487c4f1944f75..00000000000000
--- a/docs/data/material/components/autocomplete/CustomInputAutocomplete.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Autocomplete from '@mui/material/Autocomplete';
-
-const options = ['Option 1', 'Option 2'];
-
-export default function CustomInputAutocomplete() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/autocomplete/CustomSingleValueRendering.js b/docs/data/material/components/autocomplete/CustomSingleValueRendering.js
deleted file mode 100644
index 47dee0633df665..00000000000000
--- a/docs/data/material/components/autocomplete/CustomSingleValueRendering.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function CustomSingleValueRendering() {
-  return (
-    
-       option.title}
-        renderValue={(value, getItemProps) => (
-          
-        )}
-        renderInput={(params) => }
-      />
-       option.title)}
-        freeSolo
-        renderValue={(value, getItemProps) => (
-          
-        )}
-        renderInput={(params) => }
-      />
-    
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-];
diff --git a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview b/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview
deleted file mode 100644
index 62c58aed531d75..00000000000000
--- a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
- option.title}
-  renderValue={(value, getItemProps) => (
-    
-  )}
-  renderInput={(params) => }
-/>
- option.title)}
-  freeSolo
-  renderValue={(value, getItemProps) => (
-    
-  )}
-  renderInput={(params) => }
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/CustomizedHook.js b/docs/data/material/components/autocomplete/CustomizedHook.js
deleted file mode 100644
index df4234c4d8df98..00000000000000
--- a/docs/data/material/components/autocomplete/CustomizedHook.js
+++ /dev/null
@@ -1,368 +0,0 @@
-import useAutocomplete from '@mui/material/useAutocomplete';
-import PropTypes from 'prop-types';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import { styled } from '@mui/material/styles';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
-
-const Root = styled('div')(({ theme }) => ({
-  color: 'rgba(0,0,0,0.85)',
-  fontSize: '14px',
-  ...theme.applyStyles('dark', {
-    color: 'rgba(255,255,255,0.65)',
-  }),
-}));
-
-const Label = styled('label')`
-  padding: 0 0 4px;
-  line-height: 1.5;
-  display: block;
-`;
-
-const InputWrapper = styled('div')(({ theme }) => ({
-  width: '300px',
-  border: '1px solid #d9d9d9',
-  backgroundColor: '#fff',
-  borderRadius: '4px',
-  padding: '1px',
-  display: 'flex',
-  flexWrap: 'wrap',
-  ...theme.applyStyles('dark', {
-    borderColor: '#434343',
-    backgroundColor: '#141414',
-  }),
-  '&:hover': {
-    borderColor: '#40a9ff',
-    ...theme.applyStyles('dark', {
-      borderColor: '#177ddc',
-    }),
-  },
-  '&.focused': {
-    borderColor: '#40a9ff',
-    boxShadow: '0 0 0 2px rgb(24 144 255 / 0.2)',
-    ...theme.applyStyles('dark', {
-      borderColor: '#177ddc',
-    }),
-  },
-  '& input': {
-    backgroundColor: '#fff',
-    color: 'rgba(0,0,0,.85)',
-    height: '30px',
-    boxSizing: 'border-box',
-    padding: '4px 6px',
-    width: '0',
-    minWidth: '30px',
-    flexGrow: 1,
-    border: 0,
-    margin: 0,
-    outline: 0,
-    ...theme.applyStyles('dark', {
-      color: 'rgba(255,255,255,0.65)',
-      backgroundColor: '#141414',
-    }),
-  },
-}));
-
-function Item(props) {
-  const { label, onDelete, ...other } = props;
-  return (
-    
    
-      {label}
-      
-    
    
-  );
-}
-
-Item.propTypes = {
-  label: PropTypes.string.isRequired,
-  onDelete: PropTypes.func.isRequired,
-};
-
-const StyledItem = styled(Item)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  height: '24px',
-  margin: '2px',
-  lineHeight: '22px',
-  backgroundColor: '#fafafa',
-  border: `1px solid #e8e8e8`,
-  borderRadius: '2px',
-  boxSizing: 'content-box',
-  padding: '0 4px 0 10px',
-  outline: 0,
-  overflow: 'hidden',
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'rgba(255,255,255,0.08)',
-    borderColor: '#303030',
-  }),
-  '&:focus': {
-    borderColor: '#40a9ff',
-    backgroundColor: '#e6f7ff',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#003b57',
-      borderColor: '#177ddc',
-    }),
-  },
-  '& span': {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-  },
-  '& svg': {
-    fontSize: '12px',
-    cursor: 'pointer',
-    padding: '4px',
-  },
-}));
-
-const Listbox = styled('ul')(({ theme }) => ({
-  width: '300px',
-  margin: '2px 0 0',
-  padding: 0,
-  position: 'absolute',
-  listStyle: 'none',
-  backgroundColor: '#fff',
-  overflow: 'auto',
-  maxHeight: '250px',
-  borderRadius: '4px',
-  boxShadow: '0 2px 8px rgb(0 0 0 / 0.15)',
-  zIndex: 1,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#141414',
-  }),
-  '& li': {
-    padding: '5px 12px',
-    display: 'flex',
-    '& span': {
-      flexGrow: 1,
-    },
-    '& svg': {
-      color: 'transparent',
-    },
-  },
-  "& li[aria-selected='true']": {
-    backgroundColor: '#fafafa',
-    fontWeight: 600,
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#2b2b2b',
-    }),
-    '& svg': {
-      color: '#1890ff',
-    },
-  },
-  [`& li.${autocompleteClasses.focused}`]: {
-    backgroundColor: '#e6f7ff',
-    cursor: 'pointer',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#003b57',
-    }),
-    '& svg': {
-      color: 'currentColor',
-    },
-  },
-}));
-
-function CustomAutocomplete(props) {
-  const {
-    getRootProps,
-    getInputLabelProps,
-    getInputProps,
-    getItemProps,
-    getListboxProps,
-    getOptionProps,
-    groupedOptions,
-    value,
-    focused,
-    setAnchorEl,
-  } = useAutocomplete({
-    multiple: true,
-    ...props,
-  });
-
-  return (
-    
-      
    
-        
-        
-          {value.map((option, index) => {
-            const { key, ...itemProps } = getItemProps({ index });
-            return (
-              
-            );
-          })}
-          
-        
-      
    
-      {groupedOptions.length > 0 ? (
-        
-          {groupedOptions.map((option, index) => {
-            const { key, ...optionProps } = getOptionProps({ option, index });
-            return (
-              
  • 
-                {props.getOptionLabel(option)}
-                
-              
    • 
-            );
-          })}
-            
-      ) : null}
-        
-  );
-}
-
-CustomAutocomplete.propTypes = {
-  /**
-   * Used to determine the string value for a given option.
-   * It's used to fill the input (and the list box options if `renderOption` is not provided).
-   *
-   * If used in free solo mode, it must accept both the type of the options and a string.
-   *
-   * @param {Value|string} option
-   * @returns {string}
-   * @default (option) => option.label ?? option
-   */
-  getOptionLabel: PropTypes.func,
-};
-
-export default function CustomizedHook() {
-  return (
-     option.title}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/CustomizedHook.tsx.preview b/docs/data/material/components/autocomplete/CustomizedHook.tsx.preview
deleted file mode 100644
index 11682646888cc5..00000000000000
--- a/docs/data/material/components/autocomplete/CustomizedHook.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  id="customized-hook-demo"
-  defaultValue={[top100Films[1]]}
-  options={top100Films}
-  getOptionLabel={(option) => option.title}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/DisabledOptions.js b/docs/data/material/components/autocomplete/DisabledOptions.js
deleted file mode 100644
index 81d62b703bd189..00000000000000
--- a/docs/data/material/components/autocomplete/DisabledOptions.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-export default function DisabledOptions() {
-  return (
-    
-        option === timeSlots[0] || option === timeSlots[2]
-      }
-      sx={{ width: 300 }}
-      renderInput={(params) => }
-    />
-  );
-}
-
-// One time slot every 30 minutes.
-const timeSlots = Array.from(new Array(24 * 2)).map(
-  (_, index) =>
-    `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
-      index % 2 === 0 ? '00' : '30'
-    }`,
-);
diff --git a/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview b/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview
deleted file mode 100644
index 528fc85290a1d3..00000000000000
--- a/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-    option === timeSlots[0] || option === timeSlots[2]
-  }
-  sx={{ width: 300 }}
-  renderInput={(params) => }
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/Filter.js b/docs/data/material/components/autocomplete/Filter.js
deleted file mode 100644
index 1b51f236259e4c..00000000000000
--- a/docs/data/material/components/autocomplete/Filter.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-
-const filterOptions = createFilterOptions({
-  matchFrom: 'start',
-  stringify: (option) => option.title,
-});
-
-export default function Filter() {
-  return (
-     option.title}
-      filterOptions={filterOptions}
-      sx={{ width: 300 }}
-      renderInput={(params) => }
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/Filter.tsx.preview b/docs/data/material/components/autocomplete/Filter.tsx.preview
deleted file mode 100644
index 7ca0d8bb8625c3..00000000000000
--- a/docs/data/material/components/autocomplete/Filter.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
- option.title}
-  filterOptions={filterOptions}
-  sx={{ width: 300 }}
-  renderInput={(params) => }
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/FixedTags.js b/docs/data/material/components/autocomplete/FixedTags.js
deleted file mode 100644
index a36922ba448fb9..00000000000000
--- a/docs/data/material/components/autocomplete/FixedTags.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import * as React from 'react';
-import Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-export default function FixedTags() {
-  const fixedOptions = [top100Films[6]];
-  const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
-
-  return (
-     {
-        setValue([
-          ...fixedOptions,
-          ...newValue.filter((option) => !fixedOptions.includes(option)),
-        ]);
-      }}
-      options={top100Films}
-      getOptionLabel={(option) => option.title}
-      renderValue={(values, getItemProps) =>
-        values.map((option, index) => {
-          const { key, ...itemProps } = getItemProps({ index });
-          return (
-            
-          );
-        })
-      }
-      style={{ width: 500 }}
-      renderInput={(params) => (
-        
-      )}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/FreeSolo.js b/docs/data/material/components/autocomplete/FreeSolo.js
deleted file mode 100644
index e572b55b4001d7..00000000000000
--- a/docs/data/material/components/autocomplete/FreeSolo.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
-import Autocomplete from '@mui/material/Autocomplete';
-
-export default function FreeSolo() {
-  return (
-    
-       option.title)}
-        renderInput={(params) => }
-      />
-       option.title)}
-        renderInput={(params) => (
-          
-        )}
-      />
-       (
-          
-        )}
-        getOptionLabel={(option) =>
-          typeof option === 'string' ? option : option.title
-        }
-        // this demo demonstrates how the value parameter can be either an object (same type as option) or a string
-        // it could become a string if, for example, you press "Enter" in the input field
-        isOptionEqualToValue={(option, value) => {
-          if (typeof value === 'string') {
-            return option.title === value;
-          }
-          return option.title === value.title;
-        }}
-      />
-    
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js b/docs/data/material/components/autocomplete/FreeSoloCreateOption.js
deleted file mode 100644
index 4c4d20ad68cf98..00000000000000
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-
-const filter = createFilterOptions();
-
-export default function FreeSoloCreateOption() {
-  const [value, setValue] = React.useState(null);
-
-  return (
-     {
-        if (typeof newValue === 'string') {
-          setValue({
-            title: newValue,
-          });
-        } else if (newValue && newValue.inputValue) {
-          // Create a new value from the user input
-          setValue({
-            title: newValue.inputValue,
-          });
-        } else {
-          setValue(newValue);
-        }
-      }}
-      filterOptions={(options, params) => {
-        const filtered = filter(options, params);
-
-        const { inputValue } = params;
-        // Suggest the creation of a new value
-        const isExisting = options.some((option) => inputValue === option.title);
-        if (inputValue !== '' && !isExisting) {
-          filtered.push({
-            inputValue,
-            title: `Add "${inputValue}"`,
-          });
-        }
-
-        return filtered;
-      }}
-      selectOnFocus
-      clearOnBlur
-      handleHomeEndKeys
-      id="free-solo-with-text-demo"
-      options={top100Films}
-      getOptionLabel={(option) => {
-        // Value selected with enter, right from the input
-        if (typeof option === 'string') {
-          return option;
-        }
-        // Add "xxx" option created dynamically
-        if (option.inputValue) {
-          return option.inputValue;
-        }
-        // Regular option
-        return option.title;
-      }}
-      renderOption={(props, option) => {
-        const { key, ...optionProps } = props;
-        return (
-          
  • 
-            {option.title}
-          
    • 
-        );
-      }}
-      sx={{ width: 300 }}
-      freeSolo
-      renderInput={(params) => (
-        
-      )}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
deleted file mode 100644
index ffccefc33aa8e1..00000000000000
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
+++ /dev/null
@@ -1,275 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-
-const filter = createFilterOptions();
-
-export default function FreeSoloCreateOptionDialog() {
-  const [value, setValue] = React.useState(null);
-  const [open, toggleOpen] = React.useState(false);
-
-  const handleClose = () => {
-    setDialogValue({
-      title: '',
-      year: '',
-    });
-    toggleOpen(false);
-  };
-
-  const [dialogValue, setDialogValue] = React.useState({
-    title: '',
-    year: '',
-  });
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    setValue({
-      title: dialogValue.title,
-      year: parseInt(dialogValue.year, 10),
-    });
-    handleClose();
-  };
-
-  return (
-    
-       {
-          if (typeof newValue === 'string') {
-            // timeout to avoid instant validation of the dialog's form.
-            setTimeout(() => {
-              toggleOpen(true);
-              setDialogValue({
-                title: newValue,
-                year: '',
-              });
-            });
-          } else if (newValue && newValue.inputValue) {
-            toggleOpen(true);
-            setDialogValue({
-              title: newValue.inputValue,
-              year: '',
-            });
-          } else {
-            setValue(newValue);
-          }
-        }}
-        filterOptions={(options, params) => {
-          const filtered = filter(options, params);
-
-          if (params.inputValue !== '') {
-            filtered.push({
-              inputValue: params.inputValue,
-              title: `Add "${params.inputValue}"`,
-            });
-          }
-
-          return filtered;
-        }}
-        id="free-solo-dialog-demo"
-        options={top100Films}
-        getOptionLabel={(option) => {
-          // for example value selected with enter, right from the input
-          if (typeof option === 'string') {
-            return option;
-          }
-          if (option.inputValue) {
-            return option.inputValue;
-          }
-          return option.title;
-        }}
-        selectOnFocus
-        clearOnBlur
-        handleHomeEndKeys
-        renderOption={(props, option) => {
-          const { key, ...optionProps } = props;
-          return (
-            
  • 
-              {option.title}
-            
    • 
-          );
-        }}
-        sx={{ width: 300 }}
-        freeSolo
-        renderInput={(params) => }
-      />
-      
-        
    
-          Add a new film
-          
-            
-              Did you miss any film in our list? Please, add it!
-            
-            
-                setDialogValue({
-                  ...dialogValue,
-                  title: event.target.value,
-                })
-              }
-              label="title"
-              type="text"
-              variant="standard"
-            />
-            
-                setDialogValue({
-                  ...dialogValue,
-                  year: event.target.value,
-                })
-              }
-              label="year"
-              type="number"
-              variant="standard"
-            />
-          
-          
-            
-            
-          
-        
    
-          
-        
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js
deleted file mode 100644
index 53baa52180f4f8..00000000000000
--- a/docs/data/material/components/autocomplete/GitHubLabel.js
+++ /dev/null
@@ -1,385 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTheme, styled } from '@mui/material/styles';
-import Popper from '@mui/material/Popper';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import SettingsIcon from '@mui/icons-material/Settings';
-import CloseIcon from '@mui/icons-material/Close';
-import DoneIcon from '@mui/icons-material/Done';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import ButtonBase from '@mui/material/ButtonBase';
-import InputBase from '@mui/material/InputBase';
-import Box from '@mui/material/Box';
-
-const StyledAutocompletePopper = styled('div')(({ theme }) => ({
-  [`& .${autocompleteClasses.paper}`]: {
-    boxShadow: 'none',
-    margin: 0,
-    color: 'inherit',
-    fontSize: 13,
-  },
-  [`& .${autocompleteClasses.listbox}`]: {
-    padding: 0,
-    backgroundColor: '#fff',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#1c2128',
-    }),
-    [`& .${autocompleteClasses.option}`]: {
-      minHeight: 'auto',
-      alignItems: 'flex-start',
-      padding: 8,
-      borderBottom: '1px solid #eaecef',
-      ...theme.applyStyles('dark', {
-        borderBottom: '1px solid #30363d',
-      }),
-      '&[aria-selected="true"]': {
-        backgroundColor: 'transparent',
-      },
-      [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
-        {
-          backgroundColor: theme.palette.action.hover,
-        },
-    },
-  },
-  [`&.${autocompleteClasses.popperDisablePortal}`]: {
-    position: 'relative',
-  },
-}));
-
-function PopperComponent(props) {
-  const { disablePortal, anchorEl, open, ...other } = props;
-  return ;
-}
-
-PopperComponent.propTypes = {
-  anchorEl: PropTypes.any,
-  disablePortal: PropTypes.bool,
-  open: PropTypes.bool.isRequired,
-};
-
-const StyledPopper = styled(Popper)(({ theme }) => ({
-  border: '1px solid #e1e4e8',
-  boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`,
-  color: '#24292e',
-  backgroundColor: '#fff',
-  borderRadius: 6,
-  width: 300,
-  zIndex: theme.zIndex.modal,
-  fontSize: 13,
-  ...theme.applyStyles('dark', {
-    border: '1px solid #30363d',
-    boxShadow: '0 8px 24px rgb(1, 4, 9)',
-    color: '#c9d1d9',
-    backgroundColor: '#1c2128',
-  }),
-}));
-
-const StyledInput = styled(InputBase)(({ theme }) => ({
-  padding: 10,
-  width: '100%',
-  borderBottom: '1px solid #eaecef',
-  ...theme.applyStyles('dark', {
-    borderBottom: '1px solid #30363d',
-  }),
-  '& input': {
-    borderRadius: 4,
-    padding: 8,
-    transition: theme.transitions.create(['border-color', 'box-shadow']),
-    fontSize: 14,
-    backgroundColor: '#fff',
-    border: '1px solid #30363d',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#0d1117',
-      border: '1px solid #eaecef',
-    }),
-    '&:focus': {
-      boxShadow: '0px 0px 0px 3px rgba(3, 102, 214, 0.3)',
-      borderColor: '#0366d6',
-      ...theme.applyStyles('dark', {
-        boxShadow: '0px 0px 0px 3px rgb(12, 45, 107)',
-        borderColor: '#388bfd',
-      }),
-    },
-  },
-}));
-
-const Button = styled(ButtonBase)(({ theme }) => ({
-  fontSize: 13,
-  width: '100%',
-  textAlign: 'left',
-  paddingBottom: 8,
-  fontWeight: 600,
-  color: '#586069',
-  ...theme.applyStyles('dark', {
-    color: '#8b949e',
-  }),
-  '&:hover,&:focus': {
-    color: '#0366d6',
-    ...theme.applyStyles('dark', {
-      color: '#58a6ff',
-    }),
-  },
-  '& span': {
-    width: '100%',
-  },
-  '& svg': {
-    width: 16,
-    height: 16,
-  },
-}));
-
-export default function GitHubLabel() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [value, setValue] = React.useState([labels[1], labels[11]]);
-  const [pendingValue, setPendingValue] = React.useState([]);
-  const theme = useTheme();
-
-  const handleClick = (event) => {
-    setPendingValue(value);
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setValue(pendingValue);
-    if (anchorEl) {
-      anchorEl.focus();
-    }
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'github-label' : undefined;
-
-  return (
-    
-      
-        
-        {value.map((label) => (
-          
-            {label.name}
-          
-        ))}
-      
-      
-        
-          
    
-             ({
-                borderBottom: '1px solid #30363d',
-                padding: '8px 10px',
-                fontWeight: 600,
-                ...t.applyStyles('light', {
-                  borderBottom: '1px solid #eaecef',
-                }),
-              })}
-            >
-              Apply labels to this pull request
-            
-             {
-                if (reason === 'escape') {
-                  handleClose();
-                }
-              }}
-              value={pendingValue}
-              onChange={(event, newValue, reason) => {
-                if (
-                  event.type === 'keydown' &&
-                  (event.key === 'Backspace' || event.key === 'Delete') &&
-                  reason === 'removeOption'
-                ) {
-                  return;
-                }
-                setPendingValue(newValue);
-              }}
-              disableCloseOnSelect
-              renderValue={() => null}
-              noOptionsText="No labels"
-              renderOption={(props, option, { selected }) => {
-                const { key, ...optionProps } = props;
-                return (
-                  
  • 
-                    
-                    
-                     ({
-                        flexGrow: 1,
-                        '& span': {
-                          color: '#8b949e',
-                          ...t.applyStyles('light', {
-                            color: '#586069',
-                          }),
-                        },
-                      })}
-                    >
-                      {option.name}
-                      
    
-                      {option.description}
-                        
-                    
-                  
    • 
-                );
-              }}
-              options={[...labels].sort((a, b) => {
-                // Display the selected labels first.
-                let ai = value.indexOf(a);
-                ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
-                let bi = value.indexOf(b);
-                bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
-                return ai - bi;
-              })}
-              getOptionLabel={(option) => option.name}
-              renderInput={(params) => (
-                
-              )}
-              slots={{
-                popper: PopperComponent,
-              }}
-            />
-          
    
-            
-          
-        
-  );
-}
-
-// From https://github.com/abdonrd/github-labels
-const labels = [
-  {
-    name: 'good first issue',
-    color: '#7057ff',
-    description: 'Good for newcomers',
-  },
-  {
-    name: 'help wanted',
-    color: '#008672',
-    description: 'Extra attention is needed',
-  },
-  {
-    name: 'priority: critical',
-    color: '#b60205',
-    description: '',
-  },
-  {
-    name: 'priority: high',
-    color: '#d93f0b',
-    description: '',
-  },
-  {
-    name: 'priority: low',
-    color: '#0e8a16',
-    description: '',
-  },
-  {
-    name: 'priority: medium',
-    color: '#fbca04',
-    description: '',
-  },
-  {
-    name: "status: can't reproduce",
-    color: '#fec1c1',
-    description: '',
-  },
-  {
-    name: 'status: confirmed',
-    color: '#215cea',
-    description: '',
-  },
-  {
-    name: 'status: duplicate',
-    color: '#cfd3d7',
-    description: 'This issue or pull request already exists',
-  },
-  {
-    name: 'status: needs information',
-    color: '#fef2c0',
-    description: '',
-  },
-  {
-    name: 'status: wont do/fix',
-    color: '#eeeeee',
-    description: 'This will not be worked on',
-  },
-  {
-    name: 'type: bug',
-    color: '#d73a4a',
-    description: "Something isn't working",
-  },
-  {
-    name: 'type: discussion',
-    color: '#d4c5f9',
-    description: '',
-  },
-  {
-    name: 'type: documentation',
-    color: '#006b75',
-    description: '',
-  },
-  {
-    name: 'type: enhancement',
-    color: '#84b6eb',
-    description: '',
-  },
-  {
-    name: 'type: epic',
-    color: '#3e4b9e',
-    description: 'A theme of work that contain sub-tasks',
-  },
-  {
-    name: 'type: feature request',
-    color: '#fbca04',
-    description: 'New feature or request',
-  },
-  {
-    name: 'type: question',
-    color: '#d876e3',
-    description: 'Further information is requested',
-  },
-];
diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
deleted file mode 100644
index bf76c5f336256e..00000000000000
--- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
+++ /dev/null
@@ -1,636 +0,0 @@
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles';
-
-// Theme.ts
-const customTheme = (outerTheme) =>
-  createTheme({
-    cssVariables: {
-      colorSchemeSelector: 'class',
-    },
-    palette: {
-      mode: outerTheme.palette.mode,
-    },
-    components: {
-      MuiAutocomplete: {
-        defaultProps: {
-          renderOption: (props, option, state, ownerState) => {
-            const { key, ...optionProps } = props;
-            return (
-              
-                {ownerState.getOptionLabel(option)}
-              
-            );
-          },
-        },
-      },
-    },
-  });
-
-export default function GloballyCustomizedOptions() {
-  // useTheme is used to determine the dark or light mode of the docs to maintain the Autocomplete component default styles.
-  const outerTheme = useTheme();
-
-  return (
-    
-      
-        
-        
-      
-    
-  );
-}
-
-function MovieSelect() {
-  return (
-     `${option.title} (${option.year})`}
-      id="movie-customized-option-demo"
-      disableCloseOnSelect
-      renderInput={(params) => (
-        
-      )}
-    />
-  );
-}
-
-function CountrySelect() {
-  return (
-    
-        `${option.label} (${option.code}) +${option.phone}`
-      }
-      renderInput={(params) => }
-    />
-  );
-}
-
-// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
-const countries = [
-  { code: 'AD', label: 'Andorra', phone: '376' },
-  {
-    code: 'AE',
-    label: 'United Arab Emirates',
-    phone: '971',
-  },
-  { code: 'AF', label: 'Afghanistan', phone: '93' },
-  {
-    code: 'AG',
-    label: 'Antigua and Barbuda',
-    phone: '1-268',
-  },
-  { code: 'AI', label: 'Anguilla', phone: '1-264' },
-  { code: 'AL', label: 'Albania', phone: '355' },
-  { code: 'AM', label: 'Armenia', phone: '374' },
-  { code: 'AO', label: 'Angola', phone: '244' },
-  { code: 'AQ', label: 'Antarctica', phone: '672' },
-  { code: 'AR', label: 'Argentina', phone: '54' },
-  { code: 'AS', label: 'American Samoa', phone: '1-684' },
-  { code: 'AT', label: 'Austria', phone: '43' },
-  {
-    code: 'AU',
-    label: 'Australia',
-    phone: '61',
-    suggested: true,
-  },
-  { code: 'AW', label: 'Aruba', phone: '297' },
-  { code: 'AX', label: 'Alland Islands', phone: '358' },
-  { code: 'AZ', label: 'Azerbaijan', phone: '994' },
-  {
-    code: 'BA',
-    label: 'Bosnia and Herzegovina',
-    phone: '387',
-  },
-  { code: 'BB', label: 'Barbados', phone: '1-246' },
-  { code: 'BD', label: 'Bangladesh', phone: '880' },
-  { code: 'BE', label: 'Belgium', phone: '32' },
-  { code: 'BF', label: 'Burkina Faso', phone: '226' },
-  { code: 'BG', label: 'Bulgaria', phone: '359' },
-  { code: 'BH', label: 'Bahrain', phone: '973' },
-  { code: 'BI', label: 'Burundi', phone: '257' },
-  { code: 'BJ', label: 'Benin', phone: '229' },
-  { code: 'BL', label: 'Saint Barthelemy', phone: '590' },
-  { code: 'BM', label: 'Bermuda', phone: '1-441' },
-  { code: 'BN', label: 'Brunei Darussalam', phone: '673' },
-  { code: 'BO', label: 'Bolivia', phone: '591' },
-  { code: 'BR', label: 'Brazil', phone: '55' },
-  { code: 'BS', label: 'Bahamas', phone: '1-242' },
-  { code: 'BT', label: 'Bhutan', phone: '975' },
-  { code: 'BV', label: 'Bouvet Island', phone: '47' },
-  { code: 'BW', label: 'Botswana', phone: '267' },
-  { code: 'BY', label: 'Belarus', phone: '375' },
-  { code: 'BZ', label: 'Belize', phone: '501' },
-  {
-    code: 'CA',
-    label: 'Canada',
-    phone: '1',
-    suggested: true,
-  },
-  {
-    code: 'CC',
-    label: 'Cocos (Keeling) Islands',
-    phone: '61',
-  },
-  {
-    code: 'CD',
-    label: 'Congo, Democratic Republic of the',
-    phone: '243',
-  },
-  {
-    code: 'CF',
-    label: 'Central African Republic',
-    phone: '236',
-  },
-  {
-    code: 'CG',
-    label: 'Congo, Republic of the',
-    phone: '242',
-  },
-  { code: 'CH', label: 'Switzerland', phone: '41' },
-  { code: 'CI', label: "Cote d'Ivoire", phone: '225' },
-  { code: 'CK', label: 'Cook Islands', phone: '682' },
-  { code: 'CL', label: 'Chile', phone: '56' },
-  { code: 'CM', label: 'Cameroon', phone: '237' },
-  { code: 'CN', label: 'China', phone: '86' },
-  { code: 'CO', label: 'Colombia', phone: '57' },
-  { code: 'CR', label: 'Costa Rica', phone: '506' },
-  { code: 'CU', label: 'Cuba', phone: '53' },
-  { code: 'CV', label: 'Cape Verde', phone: '238' },
-  { code: 'CW', label: 'Curacao', phone: '599' },
-  { code: 'CX', label: 'Christmas Island', phone: '61' },
-  { code: 'CY', label: 'Cyprus', phone: '357' },
-  { code: 'CZ', label: 'Czech Republic', phone: '420' },
-  {
-    code: 'DE',
-    label: 'Germany',
-    phone: '49',
-    suggested: true,
-  },
-  { code: 'DJ', label: 'Djibouti', phone: '253' },
-  { code: 'DK', label: 'Denmark', phone: '45' },
-  { code: 'DM', label: 'Dominica', phone: '1-767' },
-  {
-    code: 'DO',
-    label: 'Dominican Republic',
-    phone: '1-809',
-  },
-  { code: 'DZ', label: 'Algeria', phone: '213' },
-  { code: 'EC', label: 'Ecuador', phone: '593' },
-  { code: 'EE', label: 'Estonia', phone: '372' },
-  { code: 'EG', label: 'Egypt', phone: '20' },
-  { code: 'EH', label: 'Western Sahara', phone: '212' },
-  { code: 'ER', label: 'Eritrea', phone: '291' },
-  { code: 'ES', label: 'Spain', phone: '34' },
-  { code: 'ET', label: 'Ethiopia', phone: '251' },
-  { code: 'FI', label: 'Finland', phone: '358' },
-  { code: 'FJ', label: 'Fiji', phone: '679' },
-  {
-    code: 'FK',
-    label: 'Falkland Islands (Malvinas)',
-    phone: '500',
-  },
-  {
-    code: 'FM',
-    label: 'Micronesia, Federated States of',
-    phone: '691',
-  },
-  { code: 'FO', label: 'Faroe Islands', phone: '298' },
-  {
-    code: 'FR',
-    label: 'France',
-    phone: '33',
-    suggested: true,
-  },
-  { code: 'GA', label: 'Gabon', phone: '241' },
-  { code: 'GB', label: 'United Kingdom', phone: '44' },
-  { code: 'GD', label: 'Grenada', phone: '1-473' },
-  { code: 'GE', label: 'Georgia', phone: '995' },
-  { code: 'GF', label: 'French Guiana', phone: '594' },
-  { code: 'GG', label: 'Guernsey', phone: '44' },
-  { code: 'GH', label: 'Ghana', phone: '233' },
-  { code: 'GI', label: 'Gibraltar', phone: '350' },
-  { code: 'GL', label: 'Greenland', phone: '299' },
-  { code: 'GM', label: 'Gambia', phone: '220' },
-  { code: 'GN', label: 'Guinea', phone: '224' },
-  { code: 'GP', label: 'Guadeloupe', phone: '590' },
-  { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
-  { code: 'GR', label: 'Greece', phone: '30' },
-  {
-    code: 'GS',
-    label: 'South Georgia and the South Sandwich Islands',
-    phone: '500',
-  },
-  { code: 'GT', label: 'Guatemala', phone: '502' },
-  { code: 'GU', label: 'Guam', phone: '1-671' },
-  { code: 'GW', label: 'Guinea-Bissau', phone: '245' },
-  { code: 'GY', label: 'Guyana', phone: '592' },
-  { code: 'HK', label: 'Hong Kong', phone: '852' },
-  {
-    code: 'HM',
-    label: 'Heard Island and McDonald Islands',
-    phone: '672',
-  },
-  { code: 'HN', label: 'Honduras', phone: '504' },
-  { code: 'HR', label: 'Croatia', phone: '385' },
-  { code: 'HT', label: 'Haiti', phone: '509' },
-  { code: 'HU', label: 'Hungary', phone: '36' },
-  { code: 'ID', label: 'Indonesia', phone: '62' },
-  { code: 'IE', label: 'Ireland', phone: '353' },
-  { code: 'IL', label: 'Israel', phone: '972' },
-  { code: 'IM', label: 'Isle of Man', phone: '44' },
-  { code: 'IN', label: 'India', phone: '91' },
-  {
-    code: 'IO',
-    label: 'British Indian Ocean Territory',
-    phone: '246',
-  },
-  { code: 'IQ', label: 'Iraq', phone: '964' },
-  {
-    code: 'IR',
-    label: 'Iran, Islamic Republic of',
-    phone: '98',
-  },
-  { code: 'IS', label: 'Iceland', phone: '354' },
-  { code: 'IT', label: 'Italy', phone: '39' },
-  { code: 'JE', label: 'Jersey', phone: '44' },
-  { code: 'JM', label: 'Jamaica', phone: '1-876' },
-  { code: 'JO', label: 'Jordan', phone: '962' },
-  {
-    code: 'JP',
-    label: 'Japan',
-    phone: '81',
-    suggested: true,
-  },
-  { code: 'KE', label: 'Kenya', phone: '254' },
-  { code: 'KG', label: 'Kyrgyzstan', phone: '996' },
-  { code: 'KH', label: 'Cambodia', phone: '855' },
-  { code: 'KI', label: 'Kiribati', phone: '686' },
-  { code: 'KM', label: 'Comoros', phone: '269' },
-  {
-    code: 'KN',
-    label: 'Saint Kitts and Nevis',
-    phone: '1-869',
-  },
-  {
-    code: 'KP',
-    label: "Korea, Democratic People's Republic of",
-    phone: '850',
-  },
-  { code: 'KR', label: 'Korea, Republic of', phone: '82' },
-  { code: 'KW', label: 'Kuwait', phone: '965' },
-  { code: 'KY', label: 'Cayman Islands', phone: '1-345' },
-  { code: 'KZ', label: 'Kazakhstan', phone: '7' },
-  {
-    code: 'LA',
-    label: "Lao People's Democratic Republic",
-    phone: '856',
-  },
-  { code: 'LB', label: 'Lebanon', phone: '961' },
-  { code: 'LC', label: 'Saint Lucia', phone: '1-758' },
-  { code: 'LI', label: 'Liechtenstein', phone: '423' },
-  { code: 'LK', label: 'Sri Lanka', phone: '94' },
-  { code: 'LR', label: 'Liberia', phone: '231' },
-  { code: 'LS', label: 'Lesotho', phone: '266' },
-  { code: 'LT', label: 'Lithuania', phone: '370' },
-  { code: 'LU', label: 'Luxembourg', phone: '352' },
-  { code: 'LV', label: 'Latvia', phone: '371' },
-  { code: 'LY', label: 'Libya', phone: '218' },
-  { code: 'MA', label: 'Morocco', phone: '212' },
-  { code: 'MC', label: 'Monaco', phone: '377' },
-  {
-    code: 'MD',
-    label: 'Moldova, Republic of',
-    phone: '373',
-  },
-  { code: 'ME', label: 'Montenegro', phone: '382' },
-  {
-    code: 'MF',
-    label: 'Saint Martin (French part)',
-    phone: '590',
-  },
-  { code: 'MG', label: 'Madagascar', phone: '261' },
-  { code: 'MH', label: 'Marshall Islands', phone: '692' },
-  {
-    code: 'MK',
-    label: 'Macedonia, the Former Yugoslav Republic of',
-    phone: '389',
-  },
-  { code: 'ML', label: 'Mali', phone: '223' },
-  { code: 'MM', label: 'Myanmar', phone: '95' },
-  { code: 'MN', label: 'Mongolia', phone: '976' },
-  { code: 'MO', label: 'Macao', phone: '853' },
-  {
-    code: 'MP',
-    label: 'Northern Mariana Islands',
-    phone: '1-670',
-  },
-  { code: 'MQ', label: 'Martinique', phone: '596' },
-  { code: 'MR', label: 'Mauritania', phone: '222' },
-  { code: 'MS', label: 'Montserrat', phone: '1-664' },
-  { code: 'MT', label: 'Malta', phone: '356' },
-  { code: 'MU', label: 'Mauritius', phone: '230' },
-  { code: 'MV', label: 'Maldives', phone: '960' },
-  { code: 'MW', label: 'Malawi', phone: '265' },
-  { code: 'MX', label: 'Mexico', phone: '52' },
-  { code: 'MY', label: 'Malaysia', phone: '60' },
-  { code: 'MZ', label: 'Mozambique', phone: '258' },
-  { code: 'NA', label: 'Namibia', phone: '264' },
-  { code: 'NC', label: 'New Caledonia', phone: '687' },
-  { code: 'NE', label: 'Niger', phone: '227' },
-  { code: 'NF', label: 'Norfolk Island', phone: '672' },
-  { code: 'NG', label: 'Nigeria', phone: '234' },
-  { code: 'NI', label: 'Nicaragua', phone: '505' },
-  { code: 'NL', label: 'Netherlands', phone: '31' },
-  { code: 'NO', label: 'Norway', phone: '47' },
-  { code: 'NP', label: 'Nepal', phone: '977' },
-  { code: 'NR', label: 'Nauru', phone: '674' },
-  { code: 'NU', label: 'Niue', phone: '683' },
-  { code: 'NZ', label: 'New Zealand', phone: '64' },
-  { code: 'OM', label: 'Oman', phone: '968' },
-  { code: 'PA', label: 'Panama', phone: '507' },
-  { code: 'PE', label: 'Peru', phone: '51' },
-  { code: 'PF', label: 'French Polynesia', phone: '689' },
-  { code: 'PG', label: 'Papua New Guinea', phone: '675' },
-  { code: 'PH', label: 'Philippines', phone: '63' },
-  { code: 'PK', label: 'Pakistan', phone: '92' },
-  { code: 'PL', label: 'Poland', phone: '48' },
-  {
-    code: 'PM',
-    label: 'Saint Pierre and Miquelon',
-    phone: '508',
-  },
-  { code: 'PN', label: 'Pitcairn', phone: '870' },
-  { code: 'PR', label: 'Puerto Rico', phone: '1' },
-  {
-    code: 'PS',
-    label: 'Palestine, State of',
-    phone: '970',
-  },
-  { code: 'PT', label: 'Portugal', phone: '351' },
-  { code: 'PW', label: 'Palau', phone: '680' },
-  { code: 'PY', label: 'Paraguay', phone: '595' },
-  { code: 'QA', label: 'Qatar', phone: '974' },
-  { code: 'RE', label: 'Reunion', phone: '262' },
-  { code: 'RO', label: 'Romania', phone: '40' },
-  { code: 'RS', label: 'Serbia', phone: '381' },
-  { code: 'RU', label: 'Russian Federation', phone: '7' },
-  { code: 'RW', label: 'Rwanda', phone: '250' },
-  { code: 'SA', label: 'Saudi Arabia', phone: '966' },
-  { code: 'SB', label: 'Solomon Islands', phone: '677' },
-  { code: 'SC', label: 'Seychelles', phone: '248' },
-  { code: 'SD', label: 'Sudan', phone: '249' },
-  { code: 'SE', label: 'Sweden', phone: '46' },
-  { code: 'SG', label: 'Singapore', phone: '65' },
-  { code: 'SH', label: 'Saint Helena', phone: '290' },
-  { code: 'SI', label: 'Slovenia', phone: '386' },
-  {
-    code: 'SJ',
-    label: 'Svalbard and Jan Mayen',
-    phone: '47',
-  },
-  { code: 'SK', label: 'Slovakia', phone: '421' },
-  { code: 'SL', label: 'Sierra Leone', phone: '232' },
-  { code: 'SM', label: 'San Marino', phone: '378' },
-  { code: 'SN', label: 'Senegal', phone: '221' },
-  { code: 'SO', label: 'Somalia', phone: '252' },
-  { code: 'SR', label: 'Suriname', phone: '597' },
-  { code: 'SS', label: 'South Sudan', phone: '211' },
-  {
-    code: 'ST',
-    label: 'Sao Tome and Principe',
-    phone: '239',
-  },
-  { code: 'SV', label: 'El Salvador', phone: '503' },
-  {
-    code: 'SX',
-    label: 'Sint Maarten (Dutch part)',
-    phone: '1-721',
-  },
-  {
-    code: 'SY',
-    label: 'Syrian Arab Republic',
-    phone: '963',
-  },
-  { code: 'SZ', label: 'Swaziland', phone: '268' },
-  {
-    code: 'TC',
-    label: 'Turks and Caicos Islands',
-    phone: '1-649',
-  },
-  { code: 'TD', label: 'Chad', phone: '235' },
-  {
-    code: 'TF',
-    label: 'French Southern Territories',
-    phone: '262',
-  },
-  { code: 'TG', label: 'Togo', phone: '228' },
-  { code: 'TH', label: 'Thailand', phone: '66' },
-  { code: 'TJ', label: 'Tajikistan', phone: '992' },
-  { code: 'TK', label: 'Tokelau', phone: '690' },
-  { code: 'TL', label: 'Timor-Leste', phone: '670' },
-  { code: 'TM', label: 'Turkmenistan', phone: '993' },
-  { code: 'TN', label: 'Tunisia', phone: '216' },
-  { code: 'TO', label: 'Tonga', phone: '676' },
-  { code: 'TR', label: 'Turkey', phone: '90' },
-  {
-    code: 'TT',
-    label: 'Trinidad and Tobago',
-    phone: '1-868',
-  },
-  { code: 'TV', label: 'Tuvalu', phone: '688' },
-  {
-    code: 'TW',
-    label: 'Taiwan',
-    phone: '886',
-  },
-  {
-    code: 'TZ',
-    label: 'United Republic of Tanzania',
-    phone: '255',
-  },
-  { code: 'UA', label: 'Ukraine', phone: '380' },
-  { code: 'UG', label: 'Uganda', phone: '256' },
-  {
-    code: 'US',
-    label: 'United States',
-    phone: '1',
-    suggested: true,
-  },
-  { code: 'UY', label: 'Uruguay', phone: '598' },
-  { code: 'UZ', label: 'Uzbekistan', phone: '998' },
-  {
-    code: 'VA',
-    label: 'Holy See (Vatican City State)',
-    phone: '379',
-  },
-  {
-    code: 'VC',
-    label: 'Saint Vincent and the Grenadines',
-    phone: '1-784',
-  },
-  { code: 'VE', label: 'Venezuela', phone: '58' },
-  {
-    code: 'VG',
-    label: 'British Virgin Islands',
-    phone: '1-284',
-  },
-  {
-    code: 'VI',
-    label: 'US Virgin Islands',
-    phone: '1-340',
-  },
-  { code: 'VN', label: 'Vietnam', phone: '84' },
-  { code: 'VU', label: 'Vanuatu', phone: '678' },
-  { code: 'WF', label: 'Wallis and Futuna', phone: '681' },
-  { code: 'WS', label: 'Samoa', phone: '685' },
-  { code: 'XK', label: 'Kosovo', phone: '383' },
-  { code: 'YE', label: 'Yemen', phone: '967' },
-  { code: 'YT', label: 'Mayotte', phone: '262' },
-  { code: 'ZA', label: 'South Africa', phone: '27' },
-  { code: 'ZM', label: 'Zambia', phone: '260' },
-  { code: 'ZW', label: 'Zimbabwe', phone: '263' },
-];
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview
deleted file mode 100644
index 711bb6e91ce57c..00000000000000
--- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-    
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
deleted file mode 100644
index 2eef6910b7cf5c..00000000000000
--- a/docs/data/material/components/autocomplete/GoogleMaps.js
+++ /dev/null
@@ -1,331 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import Paper from '@mui/material/Paper';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import parse from 'autosuggest-highlight/parse';
-// For the sake of this demo, we have to use debounce to reduce Google Maps Places API quote use
-// But prefer to use throttle in practice
-// import throttle from 'lodash/throttle';
-import { debounce } from '@mui/material/utils';
-
-// This key was created specifically for the demo in mui.com.
-// You need to create a new one for your application.
-const GOOGLE_MAPS_API_KEY = 'AIzaSyC3aviU6KHXAjoSnxcw6qbOhjnFctbxPkE';
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-function loadScript(src, position) {
-  const script = document.createElement('script');
-  script.setAttribute('async', '');
-  script.src = src;
-  position.appendChild(script);
-  return script;
-}
-
-function CustomPaper(props) {
-  return (
-    
-      {props.children}
-      {/* Legal requirement https://developers.google.com/maps/documentation/javascript/policies#logo */}
-       ({
-          display: 'flex',
-          justifyContent: 'flex-end',
-          p: '5px 10px 6px 10px',
-          opacity: 0.9,
-          '& path': {
-            fill: '#5e5e5e',
-          },
-          ...staticTheme.applyStyles('dark', {
-            opacity: 0.7,
-            '& path': {
-              fill: '#fff',
-            },
-          }),
-        })}
-      >
-        
-          
-        
-      
-    
-  );
-}
-
-CustomPaper.propTypes = {
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-};
-
-const fetch = debounce(async (request, callback) => {
-  try {
-    const { suggestions } =
-      await window.google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(
-        request,
-      );
-
-    callback(
-      suggestions.map((suggestion) => {
-        const place = suggestion.placePrediction;
-        // Map to the old AutocompleteService.getPlacePredictions format
-        // https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete
-        return {
-          description: place.text.text,
-          structured_formatting: {
-            main_text: place.mainText.text,
-            main_text_matched_substrings: place.mainText.matches.map((match) => ({
-              offset: match.startOffset,
-              length: match.endOffset - match.startOffset,
-            })),
-            secondary_text: place.secondaryText?.text,
-          },
-        };
-      }),
-    );
-  } catch (err) {
-    if (err.message.startsWith('Quota exceeded for quota')) {
-      callback(request.input.length === 1 ? fakeAnswer.p : fakeAnswer.paris);
-    }
-
-    throw err;
-  }
-}, 400);
-
-const emptyOptions = [];
-let sessionToken;
-
-export default function GoogleMaps() {
-  const [value, setValue] = React.useState(null);
-  const [inputValue, setInputValue] = React.useState('');
-  const [options, setOptions] = React.useState(emptyOptions);
-  const callbackId = React.useId().replace(/[^\w]/g, '');
-  const [loaded, setLoaded] = React.useState(false);
-
-  if (typeof window !== 'undefined') {
-    if (!document.querySelector('#google-maps')) {
-      const GOOGLE_NAMESPACE = '_google_callback';
-      const globalContext =
-        window[GOOGLE_NAMESPACE] || (window[GOOGLE_NAMESPACE] = {});
-      globalContext[callbackId] = () => {
-        setLoaded(true);
-      };
-
-      const script = loadScript(
-        `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places&loading=async&callback=${GOOGLE_NAMESPACE}.${callbackId}`,
-        document.querySelector('head'),
-      );
-      script.id = 'google-maps';
-    } else if (window.google && !loaded) {
-      setLoaded(true);
-    }
-  }
-
-  useEnhancedEffect(() => {
-    if (!loaded) {
-      return undefined;
-    }
-
-    if (inputValue === '') {
-      setOptions(value ? [value] : emptyOptions);
-      return undefined;
-    }
-
-    // Allow to resolve the out of order request resolution.
-    let active = true;
-
-    if (!sessionToken) {
-      sessionToken = new window.google.maps.places.AutocompleteSessionToken();
-    }
-
-    fetch({ input: inputValue, sessionToken }, (results) => {
-      if (!active) {
-        return;
-      }
-
-      let newOptions = [];
-
-      if (results) {
-        newOptions = results;
-
-        if (value) {
-          newOptions = [
-            value,
-            ...results.filter((result) => result.description !== value.description),
-          ];
-        }
-      } else if (value) {
-        newOptions = [value];
-      }
-      setOptions(newOptions);
-    });
-
-    return () => {
-      active = false;
-    };
-  }, [value, inputValue, loaded]);
-
-  return (
-    
-        typeof option === 'string' ? option : option.description
-      }
-      filterOptions={(x) => x}
-      slots={{
-        paper: CustomPaper,
-      }}
-      options={options}
-      autoComplete
-      includeInputInList
-      filterSelectedOptions
-      value={value}
-      noOptionsText="No locations"
-      onChange={(event, newValue) => {
-        setOptions(newValue ? [newValue, ...options] : options);
-        setValue(newValue);
-      }}
-      onInputChange={(event, newInputValue) => {
-        setInputValue(newInputValue);
-      }}
-      renderInput={(params) => (
-        
-      )}
-      renderOption={(props, option) => {
-        const { key, ...optionProps } = props;
-        const matches = option.structured_formatting.main_text_matched_substrings;
-
-        const parts = parse(
-          option.structured_formatting.main_text,
-          matches.map((match) => [match.offset, match.offset + match.length]),
-        );
-        return (
-          
  • 
-            
-              
-                
-              
-              
-                {parts.map((part, index) => (
-                  
-                    {part.text}
-                  
-                ))}
-                {option.structured_formatting.secondary_text ? (
-                  
-                    {option.structured_formatting.secondary_text}
-                  
-                ) : null}
-              
-            
-          
    • 
-        );
-      }}
-    />
-  );
-}
-
-// Fake data in case Google Maps Places API returns a rate limit.
-const fakeAnswer = {
-  p: [
-    {
-      description: 'Portugal',
-      structured_formatting: {
-        main_text: 'Portugal',
-        main_text_matched_substrings: [{ offset: 0, length: 1 }],
-      },
-    },
-    {
-      description: 'Puerto Rico',
-      structured_formatting: {
-        main_text: 'Puerto Rico',
-        main_text_matched_substrings: [{ offset: 0, length: 1 }],
-      },
-    },
-    {
-      description: 'Pakistan',
-      structured_formatting: {
-        main_text: 'Pakistan',
-        main_text_matched_substrings: [{ offset: 0, length: 1 }],
-      },
-    },
-    {
-      description: 'Philippines',
-      structured_formatting: {
-        main_text: 'Philippines',
-        main_text_matched_substrings: [{ offset: 0, length: 1 }],
-      },
-    },
-    {
-      description: 'Paris, France',
-      structured_formatting: {
-        main_text: 'Paris',
-        main_text_matched_substrings: [{ offset: 0, length: 1 }],
-        secondary_text: 'France',
-      },
-    },
-  ],
-  paris: [
-    {
-      description: 'Paris, France',
-      structured_formatting: {
-        main_text: 'Paris',
-        main_text_matched_substrings: [{ offset: 0, length: 5 }],
-        secondary_text: 'France',
-      },
-    },
-    {
-      description: 'Paris, TX, USA',
-      structured_formatting: {
-        main_text: 'Paris',
-        main_text_matched_substrings: [{ offset: 0, length: 5 }],
-        secondary_text: 'TX, USA',
-      },
-    },
-    {
-      description: "Paris Beauvais Airport, Route de l'Aéroport, Tillé, France",
-      structured_formatting: {
-        main_text: 'Paris Beauvais Airport',
-        main_text_matched_substrings: [{ offset: 0, length: 5 }],
-        secondary_text: "Route de l'Aéroport, Tillé, France",
-      },
-    },
-    {
-      description: 'Paris Las Vegas, South Las Vegas Boulevard, Las Vegas, NV, USA',
-      structured_formatting: {
-        main_text: 'Paris Las Vegas',
-        main_text_matched_substrings: [{ offset: 0, length: 5 }],
-        secondary_text: 'South Las Vegas Boulevard, Las Vegas, NV, USA',
-      },
-    },
-    {
-      description: "Paris La Défense Arena, Jardin de l'Arche, Nanterre, France",
-      structured_formatting: {
-        main_text: 'Paris La Défense Arena',
-        main_text_matched_substrings: [{ offset: 0, length: 5 }],
-        secondary_text: "Jardin de l'Arche, Nanterre, France",
-      },
-    },
-  ],
-};
diff --git a/docs/data/material/components/autocomplete/Grouped.js b/docs/data/material/components/autocomplete/Grouped.js
deleted file mode 100644
index 345c9d4521a531..00000000000000
--- a/docs/data/material/components/autocomplete/Grouped.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-export default function Grouped() {
-  const options = top100Films.map((option) => {
-    const firstLetter = option.title[0].toUpperCase();
-    return {
-      firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
-      ...option,
-    };
-  });
-
-  return (
-     -b.firstLetter.localeCompare(a.firstLetter))}
-      groupBy={(option) => option.firstLetter}
-      getOptionLabel={(option) => option.title}
-      sx={{ width: 300 }}
-      renderInput={(params) => }
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/Grouped.tsx.preview b/docs/data/material/components/autocomplete/Grouped.tsx.preview
deleted file mode 100644
index 861cf451662757..00000000000000
--- a/docs/data/material/components/autocomplete/Grouped.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
- -b.firstLetter.localeCompare(a.firstLetter))}
-  groupBy={(option) => option.firstLetter}
-  getOptionLabel={(option) => option.title}
-  sx={{ width: 300 }}
-  renderInput={(params) => }
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/Highlights.js b/docs/data/material/components/autocomplete/Highlights.js
deleted file mode 100644
index 8902223d812529..00000000000000
--- a/docs/data/material/components/autocomplete/Highlights.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import parse from 'autosuggest-highlight/parse';
-import match from 'autosuggest-highlight/match';
-
-export default function Highlights() {
-  return (
-     option.title}
-      renderInput={(params) => (
-        
-      )}
-      renderOption={(props, option, { inputValue }) => {
-        const { key, ...optionProps } = props;
-        const matches = match(option.title, inputValue, { insideWords: true });
-        const parts = parse(option.title, matches);
-
-        return (
-          
  • 
-            
    
-              {parts.map((part, index) => (
-                
-                  {part.text}
-                
-              ))}
-            
    
-          
    • 
-        );
-      }}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.js b/docs/data/material/components/autocomplete/InfiniteLoading.js
deleted file mode 100644
index ede469324b2399..00000000000000
--- a/docs/data/material/components/autocomplete/InfiniteLoading.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Autocomplete from '@mui/material/Autocomplete';
-import CircularProgress from '@mui/material/CircularProgress';
-import TextField from '@mui/material/TextField';
-import {
-  QueryClient,
-  QueryClientProvider,
-  useInfiniteQuery,
-} from '@tanstack/react-query';
-import { useEventCallback, useForkRef } from '@mui/material/utils';
-import useTimeout from '@mui/utils/useTimeout';
-import { useVirtualizer } from '@tanstack/react-virtual';
-
-import { fetchMovies, getMovieLabel, normalizeMovieQuery } from './server';
-
-const ITEM_HEIGHT_PX = 36;
-const MAX_LISTBOX_HEIGHT_PX = 8 * ITEM_HEIGHT_PX;
-const OVERSCAN = 5;
-const PREFETCH_WITHIN_ITEMS = 5;
-const INPUT_DEBOUNCE_MS = 200;
-
-// Autocomplete invokes `renderOption(props, option)` for every option that
-// would be rendered. Returning this tuple lets the virtual listbox own layout
-// and mount only the rows that are visible.
-
-/** Props added to the Autocomplete listbox slot for infinite loading and virtualization. */
-
-/**
- * Virtualized Autocomplete listbox.
- * It mounts only visible options and triggers pagination as the rendered range approaches the end.
- */
-const VirtualListbox = React.forwardRef(
-  function VirtualListbox(props, forwardedRef) {
-    const {
-      children,
-      onReachEnd,
-      resetScrollKey,
-      virtualizerRef,
-      style,
-      ...listboxProps
-    } = props;
-    const items = children;
-
-    // One DOM node must serve both Autocomplete's listbox ref and the virtualizer's
-    // scroll observer, so merge the forwarded ref with the local ref.
-    const scrollContainerRef = React.useRef(null);
-    const setScrollContainerRef = useForkRef(scrollContainerRef, forwardedRef);
-
-    const virtualizer = useVirtualizer({
-      count: items.length,
-      getScrollElement: () => scrollContainerRef.current,
-      estimateSize: () => ITEM_HEIGHT_PX,
-      overscan: OVERSCAN,
-      // Avoids forcing synchronous updates while Autocomplete is rendering.
-      useFlushSync: false,
-    });
-
-    React.useEffect(() => {
-      virtualizerRef.current = virtualizer;
-      return () => {
-        if (virtualizerRef.current === virtualizer) {
-          virtualizerRef.current = null;
-        }
-      };
-    }, [virtualizer, virtualizerRef]);
-
-    React.useEffect(() => {
-      scrollContainerRef.current?.scrollTo({ top: 0 });
-      virtualizer.scrollToOffset(0);
-    }, [resetScrollKey, virtualizer]);
-
-    const virtualItems = virtualizer.getVirtualItems();
-    const lastRenderedIndex = virtualItems[virtualItems.length - 1]?.index ?? -1;
-
-    // Trigger pagination from the virtualizer's rendered range, not raw scroll
-    // offsets, so overscan and keyboard scrolling behave consistently.
-    React.useEffect(() => {
-      if (
-        items.length > 0 &&
-        lastRenderedIndex >= items.length - PREFETCH_WITHIN_ITEMS
-      ) {
-        onReachEnd();
-      }
-    }, [lastRenderedIndex, items.length, onReachEnd]);
-
-    return (
-      
      
-        {/* This spacer gives the 
         its scroll height without nesting a div inside the listbox. */}
-        
      • 
-        {virtualItems.map((virtualItem) => {
-          const [optionProps, option] = items[virtualItem.index];
-          const { key, style: optionStyle, ...htmlProps } = optionProps;
-          const label = getMovieLabel(option);
-
-          return (
-            
      • 
-              
-                {label}
-              
-            
        • 
-          );
-        })}
-      
      
-    );
-  },
-);
-
-VirtualListbox.propTypes = {
-  children: PropTypes.node,
-  /**
-   * Called when the rendered window gets close enough to the end to load another page.
-   */
-  onReachEnd: PropTypes.func.isRequired,
-  /**
-   * Changes when the search context changes so the listbox can reset to the first row.
-   */
-  resetScrollKey: PropTypes.string.isRequired,
-  style: PropTypes.object,
-  /**
-   * Exposes the virtualizer to the parent so keyboard navigation can scroll highlighted rows into view.
-   */
-  virtualizerRef: PropTypes.shape({
-    current: PropTypes.object,
-  }).isRequired,
-};
-
-function InfiniteQueryAutocomplete() {
-  const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState(null);
-  const [inputValue, setInputValue] = React.useState('');
-  const [searchInputValue, setSearchInputValue] = React.useState('');
-  const [queryInputValue, setQueryInputValue] = React.useState('');
-  const virtualizerRef = React.useRef(null);
-  const wasOpenRef = React.useRef(false);
-  const queryDebounce = useTimeout();
-
-  React.useEffect(() => {
-    // Opening the popup should query for whatever text is already visible in the
-    // input, but reopening should not retrigger this sync while it is already open.
-    if (open && !wasOpenRef.current) {
-      setSearchInputValue(inputValue);
-      setQueryInputValue(inputValue);
-    }
-    wasOpenRef.current = open;
-  }, [inputValue, open]);
-
-  React.useEffect(() => {
-    if (!open || searchInputValue === queryInputValue) {
-      queryDebounce.clear();
-      return undefined;
-    }
-
-    queryDebounce.start(INPUT_DEBOUNCE_MS, () => {
-      setQueryInputValue(searchInputValue);
-    });
-
-    return queryDebounce.clear;
-  }, [open, queryDebounce, queryInputValue, searchInputValue]);
-
-  const normalizedQuery = React.useMemo(
-    () => normalizeMovieQuery(queryInputValue),
-    [queryInputValue],
-  );
-
-  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: ['movies', normalizedQuery],
-      queryFn: ({ pageParam, signal }) =>
-        fetchMovies(normalizedQuery, pageParam, signal),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage) => lastPage.nextPage,
-      enabled: open,
-    });
-
-  const options = React.useMemo(
-    () => data?.pages.flatMap((page) => page.items) ?? [],
-    [data],
-  );
-
-  const optionIndexMap = React.useMemo(() => {
-    const indexMap = new Map();
-
-    options.forEach((option, index) => {
-      indexMap.set(option.id, index);
-    });
-
-    return indexMap;
-  }, [options]);
-
-  const handleReachEnd = useEventCallback(() => {
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  });
-
-  const handleInputChange = useEventCallback((_event, newInputValue, reason) => {
-    setInputValue(newInputValue);
-
-    // Autocomplete also calls `onInputChange` for selection and blur resets.
-    // Only real typing should advance the remote query.
-    if (reason === 'input') {
-      setSearchInputValue(newInputValue);
-    }
-
-    if (reason === 'clear') {
-      setSearchInputValue(newInputValue);
-      setQueryInputValue(newInputValue);
-    }
-  });
-
-  const handleHighlightChange = useEventCallback((_event, option) => {
-    const virtualizer = virtualizerRef.current;
-    if (!option || !virtualizer) {
-      return;
-    }
-
-    // Keep keyboard navigation aligned with virtualization. Autocomplete can
-    // highlight rows that are not mounted, so its default scrollIntoView would
-    // otherwise no-op for off-screen options.
-    const index = optionIndexMap.get(option.id);
-    if (index !== undefined) {
-      virtualizer.scrollToIndex(index, { align: 'auto' });
-    }
-  });
-
-  // The listbox scrolls back to the top when the popup opens or the search
-  // query changes, matching what users expect from a newly loaded result set.
-  const listboxResetKey = open ? normalizedQuery : `closed:${normalizedQuery}`;
-
-  return (
-     setOpen(true)}
-      onClose={() => setOpen(false)}
-      options={options}
-      value={value}
-      onChange={(_event, newValue) => setValue(newValue)}
-      inputValue={inputValue}
-      onInputChange={handleInputChange}
-      // Results are already filtered by the query key, so disable the built-in
-      // client filter.
-      filterOptions={(x) => x}
-      getOptionLabel={getMovieLabel}
-      isOptionEqualToValue={(option, candidate) => option.id === candidate.id}
-      loading={isFetching}
-      loadingText="Loading movies…"
-      disableListWrap
-      onHighlightChange={handleHighlightChange}
-      renderOption={(optionProps, option) => [optionProps, option]}
-      renderInput={(params) => {
-        const { endAdornment, ...inputSlotProps } = params.slotProps.input;
-
-        return (
-          
-                    {isFetching ? (
-                      
-                    ) : null}
-                    {endAdornment}
-                  
-                ),
-              },
-            }}
-          />
-        );
-      }}
-      slotProps={{
-        // The cast is only for the extra props injected into this custom slot.
-        listbox: {
-          component: VirtualListbox,
-          onReachEnd: handleReachEnd,
-          resetScrollKey: listboxResetKey,
-          virtualizerRef,
-        },
-      }}
-    />
-  );
-}
-
-const queryClientOptions = {
-  defaultOptions: {
-    queries: {
-      staleTime: 60_000,
-      refetchOnWindowFocus: false,
-    },
-  },
-};
-
-export default function InfiniteLoading() {
-  // Create the QueryClient once for this mounted demo. In an app, this usually
-  // lives near the root alongside the rest of your data-fetching setup.
-  const [queryClient] = React.useState(() => new QueryClient(queryClientOptions));
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview b/docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview
deleted file mode 100644
index ed4e30762ab7b6..00000000000000
--- a/docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/LimitTags.js b/docs/data/material/components/autocomplete/LimitTags.js
deleted file mode 100644
index c882d0debcfa79..00000000000000
--- a/docs/data/material/components/autocomplete/LimitTags.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-
-export default function LimitTags() {
-  return (
-     option.title}
-      defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
-      renderInput={(params) => (
-        
-      )}
-      sx={{ width: '500px' }}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/LimitTags.tsx.preview b/docs/data/material/components/autocomplete/LimitTags.tsx.preview
deleted file mode 100644
index 4e447dea48e520..00000000000000
--- a/docs/data/material/components/autocomplete/LimitTags.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
- option.title}
-  defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
-  renderInput={(params) => (
-    
-  )}
-  sx={{ width: '500px' }}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/Playground.js b/docs/data/material/components/autocomplete/Playground.js
deleted file mode 100644
index ea72267877c7f5..00000000000000
--- a/docs/data/material/components/autocomplete/Playground.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import Stack from '@mui/material/Stack';
-
-export default function Playground() {
-  const defaultProps = {
-    options: top100Films,
-    getOptionLabel: (option) => option.title,
-  };
-  const flatProps = {
-    options: top100Films.map((option) => option.title),
-  };
-  const [value, setValue] = React.useState(null);
-
-  return (
-    
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       {
-          setValue(newValue);
-        }}
-        renderInput={(params) => (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-       (
-          
-        )}
-      />
-    
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js
deleted file mode 100644
index 5e5737b75f0480..00000000000000
--- a/docs/data/material/components/autocomplete/RenderGroup.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import { styled, lighten, darken } from '@mui/system';
-
-const GroupHeader = styled('div')(({ theme }) => ({
-  position: 'sticky',
-  top: '-8px',
-  padding: '4px 10px',
-  color: theme.palette.primary.main,
-  backgroundColor: lighten(theme.palette.primary.light, 0.85),
-  ...theme.applyStyles('dark', {
-    backgroundColor: darken(theme.palette.primary.main, 0.8),
-  }),
-}));
-
-const GroupItems = styled('ul')({
-  padding: 0,
-});
-
-export default function RenderGroup() {
-  const options = top100Films.map((option) => {
-    const firstLetter = option.title[0].toUpperCase();
-    return {
-      firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
-      ...option,
-    };
-  });
-
-  return (
-     -b.firstLetter.localeCompare(a.firstLetter))}
-      groupBy={(option) => option.firstLetter}
-      getOptionLabel={(option) => option.title}
-      sx={{ width: 300 }}
-      renderInput={(params) => }
-      renderGroup={(params) => (
-        
    • 
-          {params.group}
-          {params.children}
-        
      • 
-      )}
-    />
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview
deleted file mode 100644
index 85d7b49d75f0d7..00000000000000
--- a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
- -b.firstLetter.localeCompare(a.firstLetter))}
-  groupBy={(option) => option.firstLetter}
-  getOptionLabel={(option) => option.title}
-  sx={{ width: 300 }}
-  renderInput={(params) => }
-  renderGroup={(params) => (
-    
    • 
-      {params.group}
-      {params.children}
-    
      • 
-  )}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/Sizes.js b/docs/data/material/components/autocomplete/Sizes.js
deleted file mode 100644
index 6ad2b064b0046c..00000000000000
--- a/docs/data/material/components/autocomplete/Sizes.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Chip from '@mui/material/Chip';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-
-export default function Sizes() {
-  return (
-    
-       option.title}
-        defaultValue={top100Films[13]}
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title}
-        defaultValue={[top100Films[13]]}
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title}
-        defaultValue={top100Films[13]}
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title}
-        defaultValue={[top100Films[13]]}
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title}
-        defaultValue={top100Films[13]}
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title}
-        defaultValue={[top100Films[13]]}
-        renderValue={(values, getItemProps) =>
-          values.map((option, index) => {
-            const { key, ...itemProps } = getItemProps({ index });
-            return (
-              
-            );
-          })
-        }
-        renderInput={(params) => (
-          
-        )}
-      />
-    
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/Tags.js b/docs/data/material/components/autocomplete/Tags.js
deleted file mode 100644
index ed1e92eab6c4b2..00000000000000
--- a/docs/data/material/components/autocomplete/Tags.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
-
-export default function Tags() {
-  return (
-    
-       option.title}
-        defaultValue={[top100Films[13]]}
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title}
-        defaultValue={[top100Films[13]]}
-        filterSelectedOptions
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title)}
-        defaultValue={[top100Films[13].title]}
-        freeSolo
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const { key, ...itemProps } = getItemProps({ index });
-            return (
-              
-            );
-          })
-        }
-        renderInput={(params) => (
-          
-        )}
-      />
-       option.title)}
-        defaultValue={[top100Films[12].title, top100Films[13].title]}
-        readOnly
-        renderInput={(params) => (
-          
-        )}
-      />
-    
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js
deleted file mode 100644
index 97f404f936568e..00000000000000
--- a/docs/data/material/components/autocomplete/UseAutocomplete.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import useAutocomplete from '@mui/material/useAutocomplete';
-import { styled } from '@mui/system';
-
-const Label = styled('label')({
-  display: 'block',
-});
-
-const Input = styled('input')(({ theme }) => ({
-  width: 200,
-  backgroundColor: '#fff',
-  color: '#000',
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#000',
-    color: '#fff',
-  }),
-}));
-
-const Listbox = styled('ul')(({ theme }) => ({
-  width: 200,
-  margin: 0,
-  padding: 0,
-  zIndex: 1,
-  position: 'absolute',
-  listStyle: 'none',
-  backgroundColor: '#fff',
-  overflow: 'auto',
-  maxHeight: 200,
-  border: '1px solid rgba(0,0,0,.25)',
-  '& li.Mui-focused': {
-    backgroundColor: '#4a8df6',
-    color: 'white',
-    cursor: 'pointer',
-  },
-  '& li:active': {
-    backgroundColor: '#2977f5',
-    color: 'white',
-  },
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#000',
-  }),
-}));
-
-export default function UseAutocomplete() {
-  const {
-    getRootProps,
-    getInputLabelProps,
-    getInputProps,
-    getListboxProps,
-    getOptionProps,
-    groupedOptions,
-  } = useAutocomplete({
-    id: 'use-autocomplete-demo',
-    options: top100Films,
-    getOptionLabel: (option) => option.title,
-  });
-
-  return (
-    
      
-      
      
-        
-        
-      
      
-      {groupedOptions.length > 0 ? (
-        
-          {groupedOptions.map((option, index) => {
-            const { key, ...optionProps } = getOptionProps({ option, index });
-            return (
-              
    • 
-                {option.title}
-              
      • 
-            );
-          })}
-              
-      ) : null}
-    
      
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-  { title: 'Casablanca', year: 1942 },
-  { title: 'City Lights', year: 1931 },
-  { title: 'Psycho', year: 1960 },
-  { title: 'The Green Mile', year: 1999 },
-  { title: 'The Intouchables', year: 2011 },
-  { title: 'Modern Times', year: 1936 },
-  { title: 'Raiders of the Lost Ark', year: 1981 },
-  { title: 'Rear Window', year: 1954 },
-  { title: 'The Pianist', year: 2002 },
-  { title: 'The Departed', year: 2006 },
-  { title: 'Terminator 2: Judgment Day', year: 1991 },
-  { title: 'Back to the Future', year: 1985 },
-  { title: 'Whiplash', year: 2014 },
-  { title: 'Gladiator', year: 2000 },
-  { title: 'Memento', year: 2000 },
-  { title: 'The Prestige', year: 2006 },
-  { title: 'The Lion King', year: 1994 },
-  { title: 'Apocalypse Now', year: 1979 },
-  { title: 'Alien', year: 1979 },
-  { title: 'Sunset Boulevard', year: 1950 },
-  {
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { title: 'The Great Dictator', year: 1940 },
-  { title: 'Cinema Paradiso', year: 1988 },
-  { title: 'The Lives of Others', year: 2006 },
-  { title: 'Grave of the Fireflies', year: 1988 },
-  { title: 'Paths of Glory', year: 1957 },
-  { title: 'Django Unchained', year: 2012 },
-  { title: 'The Shining', year: 1980 },
-  { title: 'WALL·E', year: 2008 },
-  { title: 'American Beauty', year: 1999 },
-  { title: 'The Dark Knight Rises', year: 2012 },
-  { title: 'Princess Mononoke', year: 1997 },
-  { title: 'Aliens', year: 1986 },
-  { title: 'Oldboy', year: 2003 },
-  { title: 'Once Upon a Time in America', year: 1984 },
-  { title: 'Witness for the Prosecution', year: 1957 },
-  { title: 'Das Boot', year: 1981 },
-  { title: 'Citizen Kane', year: 1941 },
-  { title: 'North by Northwest', year: 1959 },
-  { title: 'Vertigo', year: 1958 },
-  {
-    title: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { title: 'Reservoir Dogs', year: 1992 },
-  { title: 'Braveheart', year: 1995 },
-  { title: 'M', year: 1931 },
-  { title: 'Requiem for a Dream', year: 2000 },
-  { title: 'Amélie', year: 2001 },
-  { title: 'A Clockwork Orange', year: 1971 },
-  { title: 'Like Stars on Earth', year: 2007 },
-  { title: 'Taxi Driver', year: 1976 },
-  { title: 'Lawrence of Arabia', year: 1962 },
-  { title: 'Double Indemnity', year: 1944 },
-  {
-    title: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { title: 'Amadeus', year: 1984 },
-  { title: 'To Kill a Mockingbird', year: 1962 },
-  { title: 'Toy Story 3', year: 2010 },
-  { title: 'Logan', year: 2017 },
-  { title: 'Full Metal Jacket', year: 1987 },
-  { title: 'Dangal', year: 2016 },
-  { title: 'The Sting', year: 1973 },
-  { title: '2001: A Space Odyssey', year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: 'Toy Story', year: 1995 },
-  { title: 'Bicycle Thieves', year: 1948 },
-  { title: 'The Kid', year: 1921 },
-  { title: 'Inglourious Basterds', year: 2009 },
-  { title: 'Snatch', year: 2000 },
-  { title: '3 Idiots', year: 2009 },
-  { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
deleted file mode 100644
index 6bd1f59e445bfe..00000000000000
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
      
-  
-  
-
      
-{groupedOptions.length > 0 ? (
-  
-    {groupedOptions.map((option, index) => {
-      const { key, ...optionProps } = getOptionProps({ option, index });
-      return (
-        
    • 
-          {option.title}
-        
      • 
-      );
-    })}
-        
-) : null}
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js
deleted file mode 100644
index b431dc73e84860..00000000000000
--- a/docs/data/material/components/autocomplete/Virtualize.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import TextField from '@mui/material/TextField';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import ListSubheader from '@mui/material/ListSubheader';
-import Popper from '@mui/material/Popper';
-import { useTheme, styled } from '@mui/material/styles';
-import { List, useListRef } from 'react-window';
-import Typography from '@mui/material/Typography';
-
-const LISTBOX_PADDING = 8; // px
-
-function RowComponent({ index, itemData, style }) {
-  const dataSet = itemData[index];
-  const inlineStyle = {
-    ...style,
-    top: (style.top ?? 0) + LISTBOX_PADDING,
-  };
-
-  if ('group' in dataSet) {
-    return (
-      
-        {dataSet.group}
-      
-    );
-  }
-
-  const { key, ...optionProps } = dataSet[0];
-
-  return (
-    
-      {`#${dataSet[2] + 1} - ${dataSet[1]}`}
-    
-  );
-}
-
-// Adapter for react-window v2
-
-RowComponent.propTypes = {
-  index: PropTypes.number.isRequired,
-  itemData: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string])
-          .isRequired,
-      ),
-      PropTypes.shape({
-        children: PropTypes.node,
-        group: PropTypes.string.isRequired,
-        key: PropTypes.number.isRequired,
-      }),
-    ]).isRequired,
-  ).isRequired,
-  style: PropTypes.object.isRequired,
-};
-
-const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
-  const { children, internalListRef, onItemsBuilt, ...other } = props;
-  const itemData = [];
-  const optionIndexMap = React.useMemo(() => new Map(), []);
-
-  children.forEach((item) => {
-    itemData.push(item);
-    if ('children' in item && Array.isArray(item.children)) {
-      itemData.push(...item.children);
-    }
-  });
-
-  // Map option values to their indices in the flattened array
-  itemData.forEach((item, index) => {
-    if (Array.isArray(item) && item[1]) {
-      optionIndexMap.set(item[1], index);
-    }
-  });
-
-  React.useEffect(() => {
-    if (onItemsBuilt) {
-      onItemsBuilt(optionIndexMap);
-    }
-  }, [onItemsBuilt, optionIndexMap]);
-
-  const theme = useTheme();
-  const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
-    noSsr: true,
-  });
-  const itemCount = itemData.length;
-  const itemSize = smUp ? 36 : 48;
-
-  const getChildSize = (child) => {
-    if (child.hasOwnProperty('group')) {
-      return 48;
-    }
-    return itemSize;
-  };
-
-  const getHeight = () => {
-    if (itemCount > 8) {
-      return 8 * itemSize;
-    }
-    return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
-  };
-
-  // Separate className for List, other props for wrapper div (ARIA, handlers)
-  const { className, style, ...otherProps } = other;
-
-  return (
-    
      
-       getChildSize(itemData[index])}
-        rowComponent={RowComponent}
-        rowProps={{ itemData }}
-        style={{
-          height: getHeight() + 2 * LISTBOX_PADDING,
-          width: '100%',
-        }}
-        overscanCount={5}
-        tagName="ul"
-      />
-    
      
-  );
-});
-
-ListboxComponent.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  internalListRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.shape({
-        element: PropTypes.object,
-        scrollToRow: PropTypes.func.isRequired,
-      }),
-    }),
-  ]),
-  onItemsBuilt: PropTypes.func.isRequired,
-  style: PropTypes.object,
-};
-
-function random(length) {
-  const characters =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-
-  for (let i = 0; i < length; i += 1) {
-    result += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-
-  return result;
-}
-
-const StyledPopper = styled(Popper)({
-  [`& .${autocompleteClasses.listbox}`]: {
-    boxSizing: 'border-box',
-    '& ul': {
-      padding: 0,
-      margin: 0,
-    },
-  },
-});
-
-const OPTIONS = Array.from(new Array(10000))
-  .map(() => random(10 + Math.ceil(Math.random() * 20)))
-  .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase()));
-
-export default function Virtualize() {
-  // Use react-window v2's useListRef hook for imperative API access
-  const internalListRef = useListRef(null);
-  const optionIndexMapRef = React.useRef(new Map());
-
-  const handleItemsBuilt = React.useCallback((optionIndexMap) => {
-    optionIndexMapRef.current = optionIndexMap;
-  }, []);
-
-  // Handle keyboard navigation by scrolling to highlighted option
-  const handleHighlightChange = (event, option) => {
-    if (option && internalListRef.current) {
-      const index = optionIndexMapRef.current.get(option);
-      if (index !== undefined) {
-        internalListRef.current.scrollToRow({ index, align: 'auto' });
-      }
-    }
-  };
-
-  return (
-     option[0].toUpperCase()}
-      renderInput={(params) => }
-      renderOption={(props, option, state) => [props, option, state.index]}
-      renderGroup={(params) => params}
-      onHighlightChange={handleHighlightChange}
-      slots={{
-        popper: StyledPopper,
-      }}
-      slotProps={{
-        listbox: {
-          component: ListboxComponent,
-          internalListRef,
-          onItemsBuilt: handleItemsBuilt,
-        },
-      }}
-    />
-  );
-}
diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
index a0adb175010450..046da692d998c5 100644
--- a/docs/data/material/components/autocomplete/autocomplete.md
+++ b/docs/data/material/components/autocomplete/autocomplete.md
@@ -24,7 +24,7 @@ It's meant to be an improved version of the "react-select" and "downshift" packa
 
 The value must be chosen from a predefined set of allowed values.
 
-{{"demo": "ComboBox.js"}}
+{{"component": "../data/material/components/autocomplete/demos/combo-box/index.ts"}}
 
 ### Options structure
 
@@ -71,13 +71,13 @@ return  option.id} />;
 
 Each of the following examples demonstrates one feature of the Autocomplete component.
 
-{{"demo": "Playground.js"}}
+{{"component": "../data/material/components/autocomplete/demos/playground/index.ts"}}
 
 ### Country select
 
 Choose one of the 248 countries.
 
-{{"demo": "CountrySelect.js"}}
+{{"component": "../data/material/components/autocomplete/demos/country-select/index.ts"}}
 
 ### Controlled states
 
@@ -96,7 +96,7 @@ These two states are isolated, and should be controlled independently.
 Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
 
-{{"demo": "ControllableStates.js"}}
+{{"component": "../data/material/components/autocomplete/demos/controllable-states/index.ts"}}
 
 :::warning
 
@@ -127,7 +127,7 @@ Set `freeSolo` to true so the textbox can contain any arbitrary value.
 
 The prop is designed to cover the primary use case of a **search input** with suggestions, for example Google search or react-autowhatever.
 
-{{"demo": "FreeSolo.js"}}
+{{"component": "../data/material/components/autocomplete/demos/free-solo/index.ts"}}
 
 :::warning
 Be careful when using the free solo mode with non-string options, as it may cause type mismatch.
@@ -144,11 +144,11 @@ If you intend to use this mode for a [combo box](#combo-box) like experience (an
 - `handleHomeEndKeys` to move focus inside the popup with the Home and End keys.
 - A last option, for instance: `Add "YOUR SEARCH"`.
 
-{{"demo": "FreeSoloCreateOption.js"}}
+{{"component": "../data/material/components/autocomplete/demos/free-solo-create-option/index.ts"}}
 
 You could also display a dialog when the user wants to add a new value.
 
-{{"demo": "FreeSoloCreateOptionDialog.js"}}
+{{"component": "../data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts"}}
 
 ## Grouped
 
@@ -156,7 +156,7 @@ You can group the options with the `groupBy` prop.
 If you do so, make sure that the options are also sorted with the same dimension that they are grouped by,
 otherwise, you will notice duplicate headers.
 
-{{"demo": "Grouped.js"}}
+{{"component": "../data/material/components/autocomplete/demos/grouped/index.ts"}}
 
 To control how the groups are rendered, provide a custom `renderGroup` prop.
 This is a function that accepts an object with two fields:
@@ -166,11 +166,11 @@ This is a function that accepts an object with two fields:
 
 The following demo shows how to use this prop to define custom markup and override the styles of the default groups:
 
-{{"demo": "RenderGroup.js"}}
+{{"component": "../data/material/components/autocomplete/demos/render-group/index.ts"}}
 
 ## Disabled options
 
-{{"demo": "DisabledOptions.js"}}
+{{"component": "../data/material/components/autocomplete/demos/disabled-options/index.ts"}}
 
 ## `useAutocomplete`
 
@@ -185,11 +185,11 @@ import useAutocomplete from '@mui/material/useAutocomplete';
 
 - 📦 [4.6 kB gzipped](https://bundlephobia.com/package/@mui/material).
 
-{{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/autocomplete/demos/use/index.ts", "defaultCodeOpen": false}}
 
 ### Customized hook
 
-{{"demo": "CustomizedHook.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/autocomplete/demos/customized-hook/index.ts", "defaultCodeOpen": false}}
 
 Head to the [customization](#customization) section for an example with the `Autocomplete` component instead of the hook.
 
@@ -204,7 +204,7 @@ The component supports two different asynchronous use-cases:
 
 It displays a progress state as long as the network request is pending.
 
-{{"demo": "Asynchronous.js"}}
+{{"component": "../data/material/components/autocomplete/demos/asynchronous/index.ts"}}
 
 ### Search as you type
 
@@ -223,7 +223,7 @@ overriding the `filterOptions` prop:
 A customized UI for Google Maps Places Autocomplete.
 For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/overview) and [Google Places](https://developers.google.com/maps/documentation/places/web-service/overview) API.
 
-{{"demo": "GoogleMaps.js"}}
+{{"component": "../data/material/components/autocomplete/demos/google-maps/index.ts"}}
 
 The demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components.
 
@@ -237,7 +237,7 @@ This demo has limited quotas to make API requests. When your quota exceeds, you
 
 This demo uses `@tanstack/react-query` to additively fetch new data onto existing `options` upon reaching the end of the current list. The list is virtualized using `@tanstack/react-virtual`.
 
-{{"demo": "InfiniteLoading.js"}}
+{{"component": "../data/material/components/autocomplete/demos/infinite-loading/index.ts"}}
 
 ## Single value rendering
 
@@ -248,7 +248,7 @@ This can be useful for adding custom styles, displaying additional information,
 - The `getItemProps` getter provides props like `data-item-index`, `disabled`, `tabIndex` and others. These props should be spread onto the rendered component for proper accessibility.
 - If using a custom component other than a Material UI Chip, destructure the `onDelete` prop as it's specific to the Material UI Chip.
 
-{{"demo": "CustomSingleValueRendering.js"}}
+{{"component": "../data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts"}}
 
 ## Multiple values
 
@@ -257,31 +257,31 @@ When `multiple={true}`, the user can select multiple values. These selected valu
 - The `getItemProps` getter supplies essential props like `data-item-index`, `disabled`, `tabIndex` and others. Make sure to spread them on each rendered item.
 - If using a custom component other than a Material UI Chip, destructure the `onDelete` prop as it's specific to the Material UI Chip.
 
-{{"demo": "Tags.js"}}
+{{"component": "../data/material/components/autocomplete/demos/tags/index.ts"}}
 
 ### Fixed options
 
 In the event that you need to lock certain tags so that they can't be removed, you can set the chips disabled.
 
-{{"demo": "FixedTags.js"}}
+{{"component": "../data/material/components/autocomplete/demos/fixed-tags/index.ts"}}
 
 ### Selection indicators
 
 This example demonstrates how icons are used to indicate the selection state of each item in the listbox.
 
-{{"demo": "CheckboxesTags.js"}}
+{{"component": "../data/material/components/autocomplete/demos/checkboxes-tags/index.ts"}}
 
 ### Limit tags
 
 You can use the `limitTags` prop to limit the number of displayed options when not focused.
 
-{{"demo": "LimitTags.js"}}
+{{"component": "../data/material/components/autocomplete/demos/limit-tags/index.ts"}}
 
 ## Sizes
 
 Fancy smaller inputs? Use the `size` prop.
 
-{{"demo": "Sizes.js"}}
+{{"component": "../data/material/components/autocomplete/demos/sizes/index.ts"}}
 
 ## Customization
 
@@ -295,7 +295,7 @@ Pay specific attention to the `ref` and `inputProps` keys.
 If you're using a custom input component inside the Autocomplete, make sure that you forward the ref to the underlying DOM element.
 :::
 
-{{"demo": "CustomInputAutocomplete.js"}}
+{{"component": "../data/material/components/autocomplete/demos/custom-input/index.ts"}}
 
 ### Globally customized options
 
@@ -305,13 +305,13 @@ The `renderOption` property takes the `ownerState` as the fourth parameter, whic
 To display the label, you can use the `getOptionLabel` prop from the `ownerState`.
 This approach enables different options for each Autocomplete component while keeping the options styling consistent.
 
-{{"demo": "GloballyCustomizedOptions.js"}}
+{{"component": "../data/material/components/autocomplete/demos/globally-customized-options/index.ts"}}
 
 ### GitHub's picker
 
 This demo reproduces GitHub's label picker:
 
-{{"demo": "GitHubLabel.js"}}
+{{"component": "../data/material/components/autocomplete/demos/git-hub-label/index.ts"}}
 
 Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component.
 
@@ -319,13 +319,13 @@ Head to the [Customized hook](#customized-hook) section for a customization exam
 
 The following demo shows how to add a hint feature to the Autocomplete:
 
-{{"demo": "AutocompleteHint.js"}}
+{{"component": "../data/material/components/autocomplete/demos/hint/index.ts"}}
 
 ## Highlights
 
 The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components.
 
-{{"demo": "Highlights.js"}}
+{{"component": "../data/material/components/autocomplete/demos/highlights/index.ts"}}
 
 ## Custom filter
 
@@ -364,7 +364,7 @@ const filterOptions = createFilterOptions({
 ;
 ```
 
-{{"demo": "Filter.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/autocomplete/demos/filter/index.ts", "defaultCodeOpen": false}}
 
 ### Advanced
 
@@ -382,7 +382,7 @@ const filterOptions = (options, { inputValue }) => matchSorter(options, inputVal
 
 Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window).
 
-{{"demo": "Virtualize.js"}}
+{{"component": "../data/material/components/autocomplete/demos/virtualize/index.ts"}}
 
 ## Events
 
diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/demos/asynchronous/Asynchronous.tsx
similarity index 98%
rename from docs/data/material/components/autocomplete/Asynchronous.tsx
rename to docs/data/material/components/autocomplete/demos/asynchronous/Asynchronous.tsx
index 48a9bb13ab434b..f6bd4386445c57 100644
--- a/docs/data/material/components/autocomplete/Asynchronous.tsx
+++ b/docs/data/material/components/autocomplete/demos/asynchronous/Asynchronous.tsx
@@ -17,6 +17,7 @@ function sleep(duration: number): Promise {
 }
 
 export default function Asynchronous() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
@@ -67,6 +68,7 @@ export default function Asynchronous() {
       )}
     />
   );
+  // @focus-end
 }
 
 // Top films as rated by IMDb users. http://www.imdb.com/chart/top
diff --git a/docs/data/material/components/autocomplete/demos/asynchronous/index.ts b/docs/data/material/components/autocomplete/demos/asynchronous/index.ts
new file mode 100644
index 00000000000000..11ef5c3b7c9814
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/asynchronous/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Asynchronous from './Asynchronous';
+
+export default createDemo(import.meta.url, Asynchronous);
diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.tsx b/docs/data/material/components/autocomplete/demos/checkboxes-tags/CheckboxesTags.tsx
similarity index 98%
rename from docs/data/material/components/autocomplete/CheckboxesTags.tsx
rename to docs/data/material/components/autocomplete/demos/checkboxes-tags/CheckboxesTags.tsx
index 53dc0603f35c51..a5c5a60efe00ab 100644
--- a/docs/data/material/components/autocomplete/CheckboxesTags.tsx
+++ b/docs/data/material/components/autocomplete/demos/checkboxes-tags/CheckboxesTags.tsx
@@ -5,6 +5,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 export default function CheckboxesTags() {
   return (
+    // @focus-start
     
       )}
     />
+    // @focus-end
   );
 }
 
diff --git a/docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts b/docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts
new file mode 100644
index 00000000000000..6039095df79f84
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CheckboxesTags from './CheckboxesTags';
+
+export default createDemo(import.meta.url, CheckboxesTags);
diff --git a/docs/data/material/components/autocomplete/ComboBox.tsx b/docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx
similarity index 79%
rename from docs/data/material/components/autocomplete/ComboBox.tsx
rename to docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx
index 5b2fae26df430a..20493c64352c29 100644
--- a/docs/data/material/components/autocomplete/ComboBox.tsx
+++ b/docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx
@@ -1,8 +1,9 @@
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import top100Films from './top100Films';
+import top100Films from "./top100Films";
 
 export default function ComboBox() {
+  // @focus-start @padding 1
   return (
      }
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/autocomplete/demos/combo-box/index.ts b/docs/data/material/components/autocomplete/demos/combo-box/index.ts
new file mode 100644
index 00000000000000..d449dd47d55ed5
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/combo-box/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ComboBox from './ComboBox';
+
+export default createDemo(import.meta.url, ComboBox);
diff --git a/docs/data/material/components/autocomplete/top100Films.ts b/docs/data/material/components/autocomplete/demos/combo-box/top100Films.ts
similarity index 100%
rename from docs/data/material/components/autocomplete/top100Films.ts
rename to docs/data/material/components/autocomplete/demos/combo-box/top100Films.ts
diff --git a/docs/data/material/components/autocomplete/ControllableStates.tsx b/docs/data/material/components/autocomplete/demos/controllable-states/ControllableStates.tsx
similarity index 95%
rename from docs/data/material/components/autocomplete/ControllableStates.tsx
rename to docs/data/material/components/autocomplete/demos/controllable-states/ControllableStates.tsx
index 4cd5f442a496c7..2460bc2d80aca0 100644
--- a/docs/data/material/components/autocomplete/ControllableStates.tsx
+++ b/docs/data/material/components/autocomplete/demos/controllable-states/ControllableStates.tsx
@@ -5,6 +5,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 const options = ['Option 1', 'Option 2'];
 
 export default function ControllableStates() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(options[0]);
   const [inputValue, setInputValue] = React.useState('');
 
@@ -29,4 +30,5 @@ export default function ControllableStates() {
       />
     
    
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/autocomplete/demos/controllable-states/index.ts b/docs/data/material/components/autocomplete/demos/controllable-states/index.ts
new file mode 100644
index 00000000000000..acf2adf5d50f87
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/controllable-states/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControllableStates from './ControllableStates';
+
+export default createDemo(import.meta.url, ControllableStates);
diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/demos/country-select/CountrySelect.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/CountrySelect.tsx
rename to docs/data/material/components/autocomplete/demos/country-select/CountrySelect.tsx
index e91d39d5f3796a..62820e4e73d9e0 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.tsx
+++ b/docs/data/material/components/autocomplete/demos/country-select/CountrySelect.tsx
@@ -4,6 +4,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 
 export default function CountrySelect() {
   return (
+    // @focus-start
     
       )}
     />
+    // @focus-end
   );
 }
 interface CountryType {
diff --git a/docs/data/material/components/autocomplete/demos/country-select/index.ts b/docs/data/material/components/autocomplete/demos/country-select/index.ts
new file mode 100644
index 00000000000000..a1258110527e46
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/country-select/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CountrySelect from './CountrySelect';
+
+export default createDemo(import.meta.url, CountrySelect);
diff --git a/docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx b/docs/data/material/components/autocomplete/demos/custom-input/CustomInputAutocomplete.tsx
similarity index 95%
rename from docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx
rename to docs/data/material/components/autocomplete/demos/custom-input/CustomInputAutocomplete.tsx
index 5487c4f1944f75..4144f961203a73 100644
--- a/docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx
+++ b/docs/data/material/components/autocomplete/demos/custom-input/CustomInputAutocomplete.tsx
@@ -4,6 +4,7 @@ const options = ['Option 1', 'Option 2'];
 
 export default function CustomInputAutocomplete() {
   return (
+    // @focus-start
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/autocomplete/demos/custom-input/index.ts b/docs/data/material/components/autocomplete/demos/custom-input/index.ts
new file mode 100644
index 00000000000000..61d66051df991a
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/custom-input/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomInputAutocomplete from './CustomInputAutocomplete';
+
+export default createDemo(import.meta.url, CustomInputAutocomplete);
diff --git a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/CustomSingleValueRendering.tsx
similarity index 98%
rename from docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx
rename to docs/data/material/components/autocomplete/demos/custom-single-value-rendering/CustomSingleValueRendering.tsx
index 47dee0633df665..d15b424f9a2038 100644
--- a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx
+++ b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/CustomSingleValueRendering.tsx
@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 export default function CustomSingleValueRendering() {
   return (
     
+      {/* @focus-start */}
        option.title}
@@ -22,6 +23,7 @@ export default function CustomSingleValueRendering() {
         )}
         renderInput={(params) => }
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts
new file mode 100644
index 00000000000000..52f678ce9b4475
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomSingleValueRendering from './CustomSingleValueRendering';
+
+export default createDemo(import.meta.url, CustomSingleValueRendering);
diff --git a/docs/data/material/components/autocomplete/CustomizedHook.tsx b/docs/data/material/components/autocomplete/demos/customized-hook/CustomizedHook.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/CustomizedHook.tsx
rename to docs/data/material/components/autocomplete/demos/customized-hook/CustomizedHook.tsx
index dbf0a2cc801080..338194a603f90e 100644
--- a/docs/data/material/components/autocomplete/CustomizedHook.tsx
+++ b/docs/data/material/components/autocomplete/demos/customized-hook/CustomizedHook.tsx
@@ -218,6 +218,7 @@ function CustomAutocomplete(
 }
 
 export default function CustomizedHook() {
+  // @focus-start @padding 1
   return (
     
       id="customized-hook-demo"
@@ -226,6 +227,7 @@ export default function CustomizedHook() {
       getOptionLabel={(option) => option.title}
     />
   );
+  // @focus-end
 }
 
 interface FilmOptionType {
diff --git a/docs/data/material/components/autocomplete/demos/customized-hook/index.ts b/docs/data/material/components/autocomplete/demos/customized-hook/index.ts
new file mode 100644
index 00000000000000..8a4d2ef16cc270
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/customized-hook/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedHook from './CustomizedHook';
+
+export default createDemo(import.meta.url, CustomizedHook);
diff --git a/docs/data/material/components/autocomplete/DisabledOptions.tsx b/docs/data/material/components/autocomplete/demos/disabled-options/DisabledOptions.tsx
similarity index 93%
rename from docs/data/material/components/autocomplete/DisabledOptions.tsx
rename to docs/data/material/components/autocomplete/demos/disabled-options/DisabledOptions.tsx
index 81d62b703bd189..382f5d6d8a8f00 100644
--- a/docs/data/material/components/autocomplete/DisabledOptions.tsx
+++ b/docs/data/material/components/autocomplete/demos/disabled-options/DisabledOptions.tsx
@@ -2,6 +2,7 @@ import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 
 export default function DisabledOptions() {
+  // @focus-start @padding 1
   return (
      }
     />
   );
+  // @focus-end
 }
 
 // One time slot every 30 minutes.
diff --git a/docs/data/material/components/autocomplete/demos/disabled-options/index.ts b/docs/data/material/components/autocomplete/demos/disabled-options/index.ts
new file mode 100644
index 00000000000000..e530713ccc2625
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/disabled-options/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisabledOptions from './DisabledOptions';
+
+export default createDemo(import.meta.url, DisabledOptions);
diff --git a/docs/data/material/components/autocomplete/Filter.tsx b/docs/data/material/components/autocomplete/demos/filter/Filter.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Filter.tsx
rename to docs/data/material/components/autocomplete/demos/filter/Filter.tsx
index b512bedd4bb0d0..e0e904abf568d9 100644
--- a/docs/data/material/components/autocomplete/Filter.tsx
+++ b/docs/data/material/components/autocomplete/demos/filter/Filter.tsx
@@ -7,6 +7,7 @@ const filterOptions = createFilterOptions({
 });
 
 export default function Filter() {
+  // @focus-start @padding 1
   return (
      }
     />
   );
+  // @focus-end
 }
 
 interface FilmOptionType {
diff --git a/docs/data/material/components/autocomplete/demos/filter/index.ts b/docs/data/material/components/autocomplete/demos/filter/index.ts
new file mode 100644
index 00000000000000..c3b5cc9185c2f1
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/filter/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Filter from './Filter';
+
+export default createDemo(import.meta.url, Filter);
diff --git a/docs/data/material/components/autocomplete/FixedTags.tsx b/docs/data/material/components/autocomplete/demos/fixed-tags/FixedTags.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/FixedTags.tsx
rename to docs/data/material/components/autocomplete/demos/fixed-tags/FixedTags.tsx
index a36922ba448fb9..5dcb0e2d0afebb 100644
--- a/docs/data/material/components/autocomplete/FixedTags.tsx
+++ b/docs/data/material/components/autocomplete/demos/fixed-tags/FixedTags.tsx
@@ -4,6 +4,7 @@ import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 
 export default function FixedTags() {
+  // @focus-start @padding 1
   const fixedOptions = [top100Films[6]];
   const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
 
@@ -39,6 +40,7 @@ export default function FixedTags() {
       )}
     />
   );
+  // @focus-end
 }
 
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
diff --git a/docs/data/material/components/autocomplete/demos/fixed-tags/index.ts b/docs/data/material/components/autocomplete/demos/fixed-tags/index.ts
new file mode 100644
index 00000000000000..828c7e81b016e3
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/fixed-tags/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FixedTags from './FixedTags';
+
+export default createDemo(import.meta.url, FixedTags);
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/FreeSoloCreateOptionDialog.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx
rename to docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/FreeSoloCreateOptionDialog.tsx
index 5179e050b1dd73..32fde2a225aba7 100644
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx
+++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/FreeSoloCreateOptionDialog.tsx
@@ -11,6 +11,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 const filter = createFilterOptions();
 
 export default function FreeSoloCreateOptionDialog() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(null);
   const [open, toggleOpen] = React.useState(false);
 
@@ -144,6 +145,7 @@ export default function FreeSoloCreateOptionDialog() {
       
     
   );
+  // @focus-end
 }
 
 interface FilmOptionType {
diff --git a/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts
new file mode 100644
index 00000000000000..77e4098ea1e3e9
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FreeSoloCreateOptionDialog from './FreeSoloCreateOptionDialog';
+
+export default createDemo(import.meta.url, FreeSoloCreateOptionDialog);
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx b/docs/data/material/components/autocomplete/demos/free-solo-create-option/FreeSoloCreateOption.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx
rename to docs/data/material/components/autocomplete/demos/free-solo-create-option/FreeSoloCreateOption.tsx
index ff7e52523be26b..a15412f5412dae 100644
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx
+++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option/FreeSoloCreateOption.tsx
@@ -5,6 +5,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 const filter = createFilterOptions();
 
 export default function FreeSoloCreateOption() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(null);
 
   return (
@@ -71,6 +72,7 @@ export default function FreeSoloCreateOption() {
       )}
     />
   );
+  // @focus-end
 }
 
 interface FilmOptionType {
diff --git a/docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts b/docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts
new file mode 100644
index 00000000000000..3a23e423d33ec5
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FreeSoloCreateOption from './FreeSoloCreateOption';
+
+export default createDemo(import.meta.url, FreeSoloCreateOption);
diff --git a/docs/data/material/components/autocomplete/FreeSolo.tsx b/docs/data/material/components/autocomplete/demos/free-solo/FreeSolo.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/FreeSolo.tsx
rename to docs/data/material/components/autocomplete/demos/free-solo/FreeSolo.tsx
index e572b55b4001d7..b619e7cccc3c73 100644
--- a/docs/data/material/components/autocomplete/FreeSolo.tsx
+++ b/docs/data/material/components/autocomplete/demos/free-solo/FreeSolo.tsx
@@ -5,6 +5,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 export default function FreeSolo() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/autocomplete/demos/free-solo/index.ts b/docs/data/material/components/autocomplete/demos/free-solo/index.ts
new file mode 100644
index 00000000000000..97ecdfaa986fab
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/free-solo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FreeSolo from './FreeSolo';
+
+export default createDemo(import.meta.url, FreeSolo);
diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/demos/git-hub-label/GitHubLabel.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/GitHubLabel.tsx
rename to docs/data/material/components/autocomplete/demos/git-hub-label/GitHubLabel.tsx
index 09e83bdecfba54..e5e3848902b9b1 100644
--- a/docs/data/material/components/autocomplete/GitHubLabel.tsx
+++ b/docs/data/material/components/autocomplete/demos/git-hub-label/GitHubLabel.tsx
@@ -131,6 +131,7 @@ const Button = styled(ButtonBase)(({ theme }) => ({
 }));
 
 export default function GitHubLabel() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [value, setValue] = React.useState([labels[1], labels[11]]);
   const [pendingValue, setPendingValue] = React.useState([]);
@@ -294,6 +295,7 @@ export default function GitHubLabel() {
       
     
   );
+  // @focus-end
 }
 
 interface LabelType {
diff --git a/docs/data/material/components/autocomplete/demos/git-hub-label/index.ts b/docs/data/material/components/autocomplete/demos/git-hub-label/index.ts
new file mode 100644
index 00000000000000..90695913fbc4d9
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/git-hub-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GitHubLabel from './GitHubLabel';
+
+export default createDemo(import.meta.url, GitHubLabel);
diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx b/docs/data/material/components/autocomplete/demos/globally-customized-options/GloballyCustomizedOptions.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
rename to docs/data/material/components/autocomplete/demos/globally-customized-options/GloballyCustomizedOptions.tsx
index 553b30e71178ea..044d3d65051923 100644
--- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
+++ b/docs/data/material/components/autocomplete/demos/globally-customized-options/GloballyCustomizedOptions.tsx
@@ -44,6 +44,7 @@ export default function GloballyCustomizedOptions() {
   // useTheme is used to determine the dark or light mode of the docs to maintain the Autocomplete component default styles.
   const outerTheme = useTheme();
 
+  // @focus-start @padding 1
   return (
     
       
@@ -52,6 +53,7 @@ export default function GloballyCustomizedOptions() {
       
     
   );
+  // @focus-end
 }
 
 function MovieSelect() {
diff --git a/docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts b/docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts
new file mode 100644
index 00000000000000..501fdc938a3512
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GloballyCustomizedOptions from './GloballyCustomizedOptions';
+
+export default createDemo(import.meta.url, GloballyCustomizedOptions);
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/demos/google-maps/GoogleMaps.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/GoogleMaps.tsx
rename to docs/data/material/components/autocomplete/demos/google-maps/GoogleMaps.tsx
index ee5450a9b3feab..0b7ad240d11eae 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.tsx
+++ b/docs/data/material/components/autocomplete/demos/google-maps/GoogleMaps.tsx
@@ -124,6 +124,7 @@ const emptyOptions = [] as any;
 let sessionToken: any;
 
 export default function GoogleMaps() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(null);
   const [inputValue, setInputValue] = React.useState('');
   const [options, setOptions] = React.useState(emptyOptions);
@@ -262,6 +263,7 @@ export default function GoogleMaps() {
       }}
     />
   );
+  // @focus-end
 }
 
 // Fake data in case Google Maps Places API returns a rate limit.
diff --git a/docs/data/material/components/autocomplete/demos/google-maps/index.ts b/docs/data/material/components/autocomplete/demos/google-maps/index.ts
new file mode 100644
index 00000000000000..fea73ae29f80c5
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/google-maps/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GoogleMaps from './GoogleMaps';
+
+export default createDemo(import.meta.url, GoogleMaps);
diff --git a/docs/data/material/components/autocomplete/Grouped.tsx b/docs/data/material/components/autocomplete/demos/grouped/Grouped.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Grouped.tsx
rename to docs/data/material/components/autocomplete/demos/grouped/Grouped.tsx
index 345c9d4521a531..be6b7932ab5b4a 100644
--- a/docs/data/material/components/autocomplete/Grouped.tsx
+++ b/docs/data/material/components/autocomplete/demos/grouped/Grouped.tsx
@@ -10,6 +10,7 @@ export default function Grouped() {
     };
   });
 
+  // @focus-start @padding 1
   return (
      -b.firstLetter.localeCompare(a.firstLetter))}
@@ -19,6 +20,7 @@ export default function Grouped() {
       renderInput={(params) => }
     />
   );
+  // @focus-end
 }
 
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
diff --git a/docs/data/material/components/autocomplete/demos/grouped/index.ts b/docs/data/material/components/autocomplete/demos/grouped/index.ts
new file mode 100644
index 00000000000000..afd71b261abdca
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/grouped/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Grouped from './Grouped';
+
+export default createDemo(import.meta.url, Grouped);
diff --git a/docs/data/material/components/autocomplete/Highlights.tsx b/docs/data/material/components/autocomplete/demos/highlights/Highlights.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Highlights.tsx
rename to docs/data/material/components/autocomplete/demos/highlights/Highlights.tsx
index 8902223d812529..3f8279f32fe85d 100644
--- a/docs/data/material/components/autocomplete/Highlights.tsx
+++ b/docs/data/material/components/autocomplete/demos/highlights/Highlights.tsx
@@ -5,6 +5,7 @@ import match from 'autosuggest-highlight/match';
 
 export default function Highlights() {
   return (
+    // @focus-start
     
+    // @focus-end
   );
 }
 
diff --git a/docs/data/material/components/autocomplete/demos/highlights/index.ts b/docs/data/material/components/autocomplete/demos/highlights/index.ts
new file mode 100644
index 00000000000000..930c5cd5002c15
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/highlights/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Highlights from './Highlights';
+
+export default createDemo(import.meta.url, Highlights);
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/demos/hint/AutocompleteHint.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/AutocompleteHint.tsx
rename to docs/data/material/components/autocomplete/demos/hint/AutocompleteHint.tsx
index ab0db8c05e1cfc..2dabbbca9d1b94 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/material/components/autocomplete/demos/hint/AutocompleteHint.tsx
@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
 export default function AutocompleteHint() {
+  // @focus-start @padding 1
   const hint = React.useRef('');
   const [inputValue, setInputValue] = React.useState('');
   return (
@@ -66,6 +67,7 @@ export default function AutocompleteHint() {
       }}
     />
   );
+  // @focus-end
 }
 
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
diff --git a/docs/data/material/components/autocomplete/demos/hint/index.ts b/docs/data/material/components/autocomplete/demos/hint/index.ts
new file mode 100644
index 00000000000000..5950385b0b2b6b
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/hint/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AutocompleteHint from './AutocompleteHint';
+
+export default createDemo(import.meta.url, AutocompleteHint);
diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.tsx b/docs/data/material/components/autocomplete/demos/infinite-loading/InfiniteLoading.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/InfiniteLoading.tsx
rename to docs/data/material/components/autocomplete/demos/infinite-loading/InfiniteLoading.tsx
index 20fb9b6bcd69c4..477fe742a9c80d 100644
--- a/docs/data/material/components/autocomplete/InfiniteLoading.tsx
+++ b/docs/data/material/components/autocomplete/demos/infinite-loading/InfiniteLoading.tsx
@@ -11,8 +11,8 @@ import { useEventCallback, useForkRef } from '@mui/material/utils';
 import useTimeout from '@mui/utils/useTimeout';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import type { Virtualizer } from '@tanstack/react-virtual';
-import { fetchMovies, getMovieLabel, normalizeMovieQuery } from './server';
-import type { Movie } from './movies';
+import { fetchMovies, getMovieLabel, normalizeMovieQuery } from "./server";
+import type { Movie } from "./movies";
 
 const ITEM_HEIGHT_PX = 36;
 const MAX_LISTBOX_HEIGHT_PX = 8 * ITEM_HEIGHT_PX;
@@ -348,9 +348,11 @@ export default function InfiniteLoading() {
   // lives near the root alongside the rest of your data-fetching setup.
   const [queryClient] = React.useState(() => new QueryClient(queryClientOptions));
 
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/autocomplete/demos/infinite-loading/index.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/index.ts
new file mode 100644
index 00000000000000..464457c30d4e90
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/infinite-loading/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InfiniteLoading from './InfiniteLoading';
+
+export default createDemo(import.meta.url, InfiniteLoading);
diff --git a/docs/data/material/components/autocomplete/movies.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/movies.ts
similarity index 100%
rename from docs/data/material/components/autocomplete/movies.ts
rename to docs/data/material/components/autocomplete/demos/infinite-loading/movies.ts
diff --git a/docs/data/material/components/autocomplete/server.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/server.ts
similarity index 97%
rename from docs/data/material/components/autocomplete/server.ts
rename to docs/data/material/components/autocomplete/demos/infinite-loading/server.ts
index 7867fc198c34d6..d896d6a03476c2 100644
--- a/docs/data/material/components/autocomplete/server.ts
+++ b/docs/data/material/components/autocomplete/demos/infinite-loading/server.ts
@@ -1,5 +1,5 @@
-import type { Movie } from './movies';
-import movies from './movies';
+import type { Movie } from "./movies";
+import movies from "./movies";
 
 const PAGE_SIZE = 20;
 const FETCH_DELAY_MS = 400;
diff --git a/docs/data/material/components/autocomplete/LimitTags.tsx b/docs/data/material/components/autocomplete/demos/limit-tags/LimitTags.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/LimitTags.tsx
rename to docs/data/material/components/autocomplete/demos/limit-tags/LimitTags.tsx
index c882d0debcfa79..9307a6044f9261 100644
--- a/docs/data/material/components/autocomplete/LimitTags.tsx
+++ b/docs/data/material/components/autocomplete/demos/limit-tags/LimitTags.tsx
@@ -2,6 +2,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 
 export default function LimitTags() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
 
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
diff --git a/docs/data/material/components/autocomplete/demos/limit-tags/index.ts b/docs/data/material/components/autocomplete/demos/limit-tags/index.ts
new file mode 100644
index 00000000000000..ed62c50212a6ea
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/limit-tags/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LimitTags from './LimitTags';
+
+export default createDemo(import.meta.url, LimitTags);
diff --git a/docs/data/material/components/autocomplete/Playground.tsx b/docs/data/material/components/autocomplete/demos/playground/Playground.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Playground.tsx
rename to docs/data/material/components/autocomplete/demos/playground/Playground.tsx
index c2b906f58bb091..f7c711c0701b45 100644
--- a/docs/data/material/components/autocomplete/Playground.tsx
+++ b/docs/data/material/components/autocomplete/demos/playground/Playground.tsx
@@ -4,6 +4,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import Stack from '@mui/material/Stack';
 
 export default function Playground() {
+  // @focus-start @padding 1
   const defaultProps = {
     options: top100Films,
     getOptionLabel: (option: FilmOptionType) => option.title,
@@ -157,6 +158,7 @@ export default function Playground() {
       />
     
   );
+  // @focus-end
 }
 
 interface FilmOptionType {
diff --git a/docs/data/material/components/autocomplete/demos/playground/index.ts b/docs/data/material/components/autocomplete/demos/playground/index.ts
new file mode 100644
index 00000000000000..386d8c64b7be76
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/playground/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Playground from './Playground';
+
+export default createDemo(import.meta.url, Playground);
diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/demos/render-group/RenderGroup.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/RenderGroup.tsx
rename to docs/data/material/components/autocomplete/demos/render-group/RenderGroup.tsx
index 5e5737b75f0480..436d7d79bf0f89 100644
--- a/docs/data/material/components/autocomplete/RenderGroup.tsx
+++ b/docs/data/material/components/autocomplete/demos/render-group/RenderGroup.tsx
@@ -26,6 +26,7 @@ export default function RenderGroup() {
     };
   });
 
+  // @focus-start @padding 1
   return (
      -b.firstLetter.localeCompare(a.firstLetter))}
@@ -41,6 +42,7 @@ export default function RenderGroup() {
       )}
     />
   );
+  // @focus-end
 }
 
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
diff --git a/docs/data/material/components/autocomplete/demos/render-group/index.ts b/docs/data/material/components/autocomplete/demos/render-group/index.ts
new file mode 100644
index 00000000000000..7910be4d9e1d1a
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/render-group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RenderGroup from './RenderGroup';
+
+export default createDemo(import.meta.url, RenderGroup);
diff --git a/docs/data/material/components/autocomplete/Sizes.tsx b/docs/data/material/components/autocomplete/demos/sizes/Sizes.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Sizes.tsx
rename to docs/data/material/components/autocomplete/demos/sizes/Sizes.tsx
index 6ad2b064b0046c..d99874ef51ded5 100644
--- a/docs/data/material/components/autocomplete/Sizes.tsx
+++ b/docs/data/material/components/autocomplete/demos/sizes/Sizes.tsx
@@ -6,6 +6,7 @@ import TextField from '@mui/material/TextField';
 export default function Sizes() {
   return (
     
+      {/* @focus-start */}
       
         )}
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/autocomplete/demos/sizes/index.ts b/docs/data/material/components/autocomplete/demos/sizes/index.ts
new file mode 100644
index 00000000000000..57da154eb024c4
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Sizes from './Sizes';
+
+export default createDemo(import.meta.url, Sizes);
diff --git a/docs/data/material/components/autocomplete/Tags.tsx b/docs/data/material/components/autocomplete/demos/tags/Tags.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Tags.tsx
rename to docs/data/material/components/autocomplete/demos/tags/Tags.tsx
index 99d9d70bf74008..48a11300125018 100644
--- a/docs/data/material/components/autocomplete/Tags.tsx
+++ b/docs/data/material/components/autocomplete/demos/tags/Tags.tsx
@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 export default function Tags() {
   return (
     
+      {/* @focus-start */}
       
         )}
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/autocomplete/demos/tags/index.ts b/docs/data/material/components/autocomplete/demos/tags/index.ts
new file mode 100644
index 00000000000000..85490d7bff0c04
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/tags/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Tags from './Tags';
+
+export default createDemo(import.meta.url, Tags);
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/demos/use/UseAutocomplete.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/UseAutocomplete.tsx
rename to docs/data/material/components/autocomplete/demos/use/UseAutocomplete.tsx
index 97f404f936568e..bd9053a4152fad 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/material/components/autocomplete/demos/use/UseAutocomplete.tsx
@@ -56,6 +56,7 @@ export default function UseAutocomplete() {
 
   return (
     
    
+      {/* @focus-start */}
       
    
         
         
@@ -72,6 +73,7 @@ export default function UseAutocomplete() {
           })}
         
       ) : null}
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/autocomplete/demos/use/index.ts b/docs/data/material/components/autocomplete/demos/use/index.ts
new file mode 100644
index 00000000000000..121abea63e4c88
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/use/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UseAutocomplete from './UseAutocomplete';
+
+export default createDemo(import.meta.url, UseAutocomplete);
diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/demos/virtualize/Virtualize.tsx
similarity index 99%
rename from docs/data/material/components/autocomplete/Virtualize.tsx
rename to docs/data/material/components/autocomplete/demos/virtualize/Virtualize.tsx
index 50418c99264b61..4efed3ed88f0ac 100644
--- a/docs/data/material/components/autocomplete/Virtualize.tsx
+++ b/docs/data/material/components/autocomplete/demos/virtualize/Virtualize.tsx
@@ -159,6 +159,7 @@ const OPTIONS = Array.from(new Array(10000))
 
 export default function Virtualize() {
   // Use react-window v2's useListRef hook for imperative API access
+  // @focus-start @padding 1
   const internalListRef = useListRef(null);
   const optionIndexMapRef = React.useRef>(new Map());
 
@@ -206,4 +207,5 @@ export default function Virtualize() {
       }}
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/autocomplete/demos/virtualize/index.ts b/docs/data/material/components/autocomplete/demos/virtualize/index.ts
new file mode 100644
index 00000000000000..20a9b28e5d03ff
--- /dev/null
+++ b/docs/data/material/components/autocomplete/demos/virtualize/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Virtualize from './Virtualize';
+
+export default createDemo(import.meta.url, Virtualize);
diff --git a/docs/data/material/components/autocomplete/movies.js b/docs/data/material/components/autocomplete/movies.js
deleted file mode 100644
index e10f258df04100..00000000000000
--- a/docs/data/material/components/autocomplete/movies.js
+++ /dev/null
@@ -1,15317 +0,0 @@
-// Roughly the top 1000 movies from TMDB
-// GET https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=title.asc&vote_average.gte=7.5&vote_count.gte=150&with_original_language=en
-const movies = [
-  {
-    id: 19913,
-    title: '(500) Days of Summer',
-    releaseDate: '2009-07-17',
-  },
-  {
-    id: 17443,
-    title: '...And Justice for All',
-    releaseDate: '1979-10-19',
-  },
-  {
-    id: 567811,
-    title: '10 Lives',
-    releaseDate: '2024-04-18',
-  },
-  {
-    id: 26234,
-    title: '10 Rillington Place',
-    releaseDate: '1971-02-10',
-  },
-  {
-    id: 4951,
-    title: '10 Things I Hate About You',
-    releaseDate: '1999-03-30',
-  },
-  {
-    id: 12219,
-    title: '12 Angry Men',
-    releaseDate: '1997-08-17',
-  },
-  {
-    id: 389,
-    title: '12 Angry Men',
-    releaseDate: '1957-04-10',
-  },
-  {
-    id: 625169,
-    title: '12 Mighty Orphans',
-    releaseDate: '2021-06-18',
-  },
-  {
-    id: 76203,
-    title: '12 Years a Slave',
-    releaseDate: '2013-10-18',
-  },
-  {
-    id: 44115,
-    title: '127 Hours',
-    releaseDate: '2010-11-12',
-  },
-  {
-    id: 300671,
-    title: '13 Hours: The Secret Soldiers of Benghazi',
-    releaseDate: '2016-01-14',
-  },
-  {
-    id: 407806,
-    title: '13th',
-    releaseDate: '2016-10-07',
-  },
-  {
-    id: 890825,
-    title: '14 Peaks: Nothing Is Impossible',
-    releaseDate: '2021-11-12',
-  },
-  {
-    id: 530915,
-    title: '1917',
-    releaseDate: '2019-12-25',
-  },
-  {
-    id: 710356,
-    title: '2 Hearts',
-    releaseDate: '2020-10-16',
-  },
-  {
-    id: 1058616,
-    title: '20 Days in Mariupol',
-    releaseDate: '2023-07-14',
-  },
-  {
-    id: 159014,
-    title: '20 Feet from Stardom',
-    releaseDate: '2013-06-14',
-  },
-  {
-    id: 246400,
-    title: '20,000 Days on Earth',
-    releaseDate: '2014-07-05',
-  },
-  {
-    id: 173,
-    title: '20,000 Leagues Under the Sea',
-    releaseDate: '1954-12-23',
-  },
-  {
-    id: 62,
-    title: '2001: A Space Odyssey',
-    releaseDate: '1968-04-02',
-  },
-  {
-    id: 342737,
-    title: '20th Century Women',
-    releaseDate: '2016-12-28',
-  },
-  {
-    id: 470,
-    title: '21 Grams',
-    releaseDate: '2003-09-06',
-  },
-  {
-    id: 474354,
-    title: '22 July',
-    releaseDate: '2018-10-04',
-  },
-  {
-    id: 1429,
-    title: '25th Hour',
-    releaseDate: '2002-12-19',
-  },
-  {
-    id: 170,
-    title: '28 Days Later',
-    releaseDate: '2002-10-31',
-  },
-  {
-    id: 1272837,
-    title: '28 Years Later: The Bone Temple',
-    releaseDate: '2026-01-14',
-  },
-  {
-    id: 41662,
-    title: '3 Women',
-    releaseDate: '1977-04-29',
-  },
-  {
-    id: 1271,
-    title: '300',
-    releaseDate: '2007-03-07',
-  },
-  {
-    id: 14168,
-    title: '3:10 to Yuma',
-    releaseDate: '1957-08-07',
-  },
-  {
-    id: 5176,
-    title: '3:10 to Yuma',
-    releaseDate: '2007-09-06',
-  },
-  {
-    id: 109410,
-    title: '42',
-    releaseDate: '2013-04-12',
-  },
-  {
-    id: 259954,
-    title: '5 to 7',
-    releaseDate: '2014-04-19',
-  },
-  {
-    id: 40807,
-    title: '50/50',
-    releaseDate: '2011-09-30',
-  },
-  {
-    id: 65,
-    title: '8 Mile',
-    releaseDate: '2002-11-08',
-  },
-  {
-    id: 15677,
-    title: '84 Charing Cross Road',
-    releaseDate: '1987-02-13',
-  },
-  {
-    id: 98622,
-    title: '9',
-    releaseDate: '2005-04-21',
-  },
-  {
-    id: 453,
-    title: 'A Beautiful Mind',
-    releaseDate: '2001-12-14',
-  },
-  {
-    id: 55720,
-    title: 'A Better Life',
-    releaseDate: '2011-06-24',
-  },
-  {
-    id: 615666,
-    title: 'A Boy Called Christmas',
-    releaseDate: '2021-11-24',
-  },
-  {
-    id: 5902,
-    title: 'A Bridge Too Far',
-    releaseDate: '1977-06-15',
-  },
-  {
-    id: 1607,
-    title: 'A Bronx Tale',
-    releaseDate: '1993-10-01',
-  },
-  {
-    id: 13187,
-    title: 'A Charlie Brown Christmas',
-    releaseDate: '1965-12-09',
-  },
-  {
-    id: 13479,
-    title: 'A Charlie Brown Thanksgiving',
-    releaseDate: '1973-11-20',
-  },
-  {
-    id: 13189,
-    title: 'A Christmas Carol',
-    releaseDate: '1984-10-09',
-  },
-  {
-    id: 850,
-    title: 'A Christmas Story',
-    releaseDate: '1983-11-18',
-  },
-  {
-    id: 407655,
-    title: 'A Cinderella Story: If the Shoe Fits',
-    releaseDate: '2016-08-02',
-  },
-  {
-    id: 185,
-    title: 'A Clockwork Orange',
-    releaseDate: '1971-10-28',
-  },
-  {
-    id: 532,
-    title: 'A Close Shave',
-    releaseDate: '1996-03-07',
-  },
-  {
-    id: 661539,
-    title: 'A Complete Unknown',
-    releaseDate: '2024-12-25',
-  },
-  {
-    id: 11939,
-    title: 'A Day at the Races',
-    releaseDate: '1937-06-11',
-  },
-  {
-    id: 427045,
-    title: 'A December Bride',
-    releaseDate: '2016-11-20',
-  },
-  {
-    id: 24660,
-    title: 'A Detective Story',
-    releaseDate: '2003-04-04',
-  },
-  {
-    id: 522518,
-    title: "A Dog's Journey",
-    releaseDate: '2019-05-03',
-  },
-  {
-    id: 36208,
-    title: "A Dog's Life",
-    releaseDate: '1918-04-14',
-  },
-  {
-    id: 381289,
-    title: "A Dog's Purpose",
-    releaseDate: '2017-01-19',
-  },
-  {
-    id: 508763,
-    title: "A Dog's Way Home",
-    releaseDate: '2019-01-10',
-  },
-  {
-    id: 21849,
-    title: 'A Face in the Crowd',
-    releaseDate: '1957-05-29',
-  },
-  {
-    id: 881,
-    title: 'A Few Good Men',
-    releaseDate: '1992-12-11',
-  },
-  {
-    id: 623,
-    title: 'A Fish Called Wanda',
-    releaseDate: '1988-07-15',
-  },
-  {
-    id: 61650,
-    title: 'A Foreign Affair',
-    releaseDate: '1948-08-20',
-  },
-  {
-    id: 428449,
-    title: 'A Ghost Story',
-    releaseDate: '2017-04-24',
-  },
-  {
-    id: 325113,
-    title: 'A Girl Like Her',
-    releaseDate: '2015-03-27',
-  },
-  {
-    id: 800787,
-    title: 'A Good Person',
-    releaseDate: '2023-03-23',
-  },
-  {
-    id: 15789,
-    title: 'A Goofy Movie',
-    releaseDate: '1995-04-05',
-  },
-  {
-    id: 530,
-    title: 'A Grand Day Out',
-    releaseDate: '1990-05-18',
-  },
-  {
-    id: 704,
-    title: "A Hard Day's Night",
-    releaseDate: '1964-07-07',
-  },
-  {
-    id: 403300,
-    title: 'A Hidden Life',
-    releaseDate: '2019-08-27',
-  },
-  {
-    id: 59,
-    title: 'A History of Violence',
-    releaseDate: '2005-09-23',
-  },
-  {
-    id: 11287,
-    title: 'A League of Their Own',
-    releaseDate: '1992-07-01',
-  },
-  {
-    id: 45578,
-    title: 'A Letter to Three Wives',
-    releaseDate: '1948-12-01',
-  },
-  {
-    id: 19101,
-    title: 'A Little Princess',
-    releaseDate: '1995-05-10',
-  },
-  {
-    id: 674610,
-    title: 'A Loud House Christmas',
-    releaseDate: '2021-11-26',
-  },
-  {
-    id: 937278,
-    title: 'A Man Called Otto',
-    releaseDate: '2022-12-28',
-  },
-  {
-    id: 874,
-    title: 'A Man for All Seasons',
-    releaseDate: '1966-12-13',
-  },
-  {
-    id: 28162,
-    title: 'A Matter of Life and Death',
-    releaseDate: '1946-12-15',
-  },
-  {
-    id: 14447,
-    title: 'A Matter of Loaf and Death',
-    releaseDate: '2008-12-26',
-  },
-  {
-    id: 1002185,
-    title: 'A Million Miles Away',
-    releaseDate: '2023-09-08',
-  },
-  {
-    id: 258230,
-    title: 'A Monster Calls',
-    releaseDate: '2016-10-07',
-  },
-  {
-    id: 36850,
-    title: 'A New Leaf',
-    releaseDate: '1971-03-11',
-  },
-  {
-    id: 37719,
-    title: 'A Night at the Opera',
-    releaseDate: '1935-11-15',
-  },
-  {
-    id: 10971,
-    title: 'A Night to Remember',
-    releaseDate: '1958-07-03',
-  },
-  {
-    id: 377,
-    title: 'A Nightmare on Elm Street',
-    releaseDate: '1984-11-09',
-  },
-  {
-    id: 9559,
-    title: 'A Perfect World',
-    releaseDate: '1993-11-24',
-  },
-  {
-    id: 25673,
-    title: 'A Place in the Sun',
-    releaseDate: '1951-06-12',
-  },
-  {
-    id: 79113,
-    title: 'A Princess for Christmas',
-    releaseDate: '2011-12-03',
-  },
-  {
-    id: 447332,
-    title: 'A Quiet Place',
-    releaseDate: '2018-04-03',
-  },
-  {
-    id: 520763,
-    title: 'A Quiet Place Part II',
-    releaseDate: '2021-05-21',
-  },
-  {
-    id: 293,
-    title: 'A River Runs Through It',
-    releaseDate: '1992-10-09',
-  },
-  {
-    id: 435107,
-    title: 'A Royal Winter',
-    releaseDate: '2017-01-14',
-  },
-  {
-    id: 1594,
-    title: 'A Shot in the Dark',
-    releaseDate: '1964-06-23',
-  },
-  {
-    id: 10223,
-    title: 'A Simple Plan',
-    releaseDate: '1998-12-11',
-  },
-  {
-    id: 34653,
-    title: 'A Single Man',
-    releaseDate: '2009-12-11',
-  },
-  {
-    id: 332562,
-    title: 'A Star Is Born',
-    releaseDate: '2018-10-03',
-  },
-  {
-    id: 22692,
-    title: 'A Star Is Born',
-    releaseDate: '1937-04-20',
-  },
-  {
-    id: 3111,
-    title: 'A Star Is Born',
-    releaseDate: '1954-10-01',
-  },
-  {
-    id: 404378,
-    title: 'A Street Cat Named Bob',
-    releaseDate: '2016-11-04',
-  },
-  {
-    id: 702,
-    title: 'A Streetcar Named Desire',
-    releaseDate: '1951-09-18',
-  },
-  {
-    id: 1645,
-    title: 'A Time to Kill',
-    releaseDate: '1996-07-24',
-  },
-  {
-    id: 9560,
-    title: 'A Walk in the Clouds',
-    releaseDate: '1995-05-27',
-  },
-  {
-    id: 10229,
-    title: 'A Walk to Remember',
-    releaseDate: '2002-01-25',
-  },
-  {
-    id: 29845,
-    title: 'A Woman Under the Influence',
-    releaseDate: '1974-11-18',
-  },
-  {
-    id: 644,
-    title: 'A.I. Artificial Intelligence',
-    releaseDate: '2001-06-29',
-  },
-  {
-    id: 431580,
-    title: 'Abominable',
-    releaseDate: '2019-09-19',
-  },
-  {
-    id: 828613,
-    title: 'About Fate',
-    releaseDate: '2022-09-08',
-  },
-  {
-    id: 122906,
-    title: 'About Time',
-    releaseDate: '2013-09-04',
-  },
-  {
-    id: 297610,
-    title: 'Abraham Lincoln Vampire Hunter: The Great Calamity',
-    releaseDate: '2012-10-23',
-  },
-  {
-    id: 25364,
-    title: 'Ace in the Hole',
-    releaseDate: '1951-06-29',
-  },
-  {
-    id: 4688,
-    title: 'Across the Universe',
-    releaseDate: '2007-09-14',
-  },
-  {
-    id: 25431,
-    title: "Adam's Rib",
-    releaseDate: '1949-11-18',
-  },
-  {
-    id: 2757,
-    title: 'Adaptation.',
-    releaseDate: '2002-12-06',
-  },
-  {
-    id: 360606,
-    title: 'Adventures in Babysitting',
-    releaseDate: '2016-06-24',
-  },
-  {
-    id: 57586,
-    title: 'African Cats',
-    releaseDate: '2011-04-21',
-  },
-  {
-    id: 537915,
-    title: 'After',
-    releaseDate: '2019-04-11',
-  },
-  {
-    id: 10843,
-    title: 'After Hours',
-    releaseDate: '1985-09-13',
-  },
-  {
-    id: 14588,
-    title: 'After the Thin Man',
-    releaseDate: '1936-12-25',
-  },
-  {
-    id: 613504,
-    title: 'After We Collided',
-    releaseDate: '2020-09-02',
-  },
-  {
-    id: 744275,
-    title: 'After We Fell',
-    releaseDate: '2021-09-01',
-  },
-  {
-    id: 965150,
-    title: 'Aftersun',
-    releaseDate: '2022-10-21',
-  },
-  {
-    id: 588921,
-    title: 'Ainbo: Spirit of the Amazon',
-    releaseDate: '2021-02-09',
-  },
-  {
-    id: 964980,
-    title: 'Air',
-    releaseDate: '2023-04-05',
-  },
-  {
-    id: 813,
-    title: 'Airplane!',
-    releaseDate: '1980-06-27',
-  },
-  {
-    id: 13751,
-    title: 'Akeelah and the Bee',
-    releaseDate: '2006-04-28',
-  },
-  {
-    id: 361018,
-    title: 'Akron',
-    releaseDate: '2015-10-06',
-  },
-  {
-    id: 420817,
-    title: 'Aladdin',
-    releaseDate: '2019-05-22',
-  },
-  {
-    id: 812,
-    title: 'Aladdin',
-    releaseDate: '1992-11-25',
-  },
-  {
-    id: 396292,
-    title: 'Ali Wong: Baby Cobra',
-    releaseDate: '2016-05-06',
-  },
-  {
-    id: 12092,
-    title: 'Alice in Wonderland',
-    releaseDate: '1951-07-28',
-  },
-  {
-    id: 348,
-    title: 'Alien',
-    releaseDate: '1979-05-25',
-  },
-  {
-    id: 20182,
-    title: 'Alien Abduction: Incident in Lake County',
-    releaseDate: '1998-01-20',
-  },
-  {
-    id: 945961,
-    title: 'Alien: Romulus',
-    releaseDate: '2024-08-13',
-  },
-  {
-    id: 679,
-    title: 'Aliens',
-    releaseDate: '1986-07-18',
-  },
-  {
-    id: 399579,
-    title: 'Alita: Battle Angel',
-    releaseDate: '2019-01-31',
-  },
-  {
-    id: 705,
-    title: 'All About Eve',
-    releaseDate: '1950-11-09',
-  },
-  {
-    id: 632322,
-    title: 'All My Life',
-    releaseDate: '2020-10-23',
-  },
-  {
-    id: 994108,
-    title: 'All of Us Strangers',
-    releaseDate: '2023-12-22',
-  },
-  {
-    id: 12454,
-    title: 'All or Nothing',
-    releaseDate: '2002-10-18',
-  },
-  {
-    id: 143,
-    title: 'All Quiet on the Western Front',
-    releaseDate: '1930-04-29',
-  },
-  {
-    id: 43316,
-    title: 'All That Heaven Allows',
-    releaseDate: '1955-08-25',
-  },
-  {
-    id: 16858,
-    title: 'All That Jazz',
-    releaseDate: '1979-12-16',
-  },
-  {
-    id: 1004663,
-    title: 'All the Beauty and the Bloodshed',
-    releaseDate: '2022-11-23',
-  },
-  {
-    id: 342470,
-    title: 'All the Bright Places',
-    releaseDate: '2020-02-28',
-  },
-  {
-    id: 891,
-    title: "All the President's Men",
-    releaseDate: '1976-04-09',
-  },
-  {
-    id: 897429,
-    title: 'All Too Well: The Short Film',
-    releaseDate: '2021-11-12',
-  },
-  {
-    id: 786,
-    title: 'Almost Famous',
-    releaseDate: '2000-09-15',
-  },
-  {
-    id: 24615,
-    title: 'Aloha Scooby-Doo!',
-    releaseDate: '2005-02-08',
-  },
-  {
-    id: 455008,
-    title: 'AlphaGo',
-    releaseDate: '2017-09-29',
-  },
-  {
-    id: 279,
-    title: 'Amadeus',
-    releaseDate: '1984-09-19',
-  },
-  {
-    id: 1248753,
-    title: 'Amber Alert',
-    releaseDate: '2024-09-27',
-  },
-  {
-    id: 14,
-    title: 'American Beauty',
-    releaseDate: '1999-09-15',
-  },
-  {
-    id: 565716,
-    title: 'American Factory',
-    releaseDate: '2019-08-21',
-  },
-  {
-    id: 1056360,
-    title: 'American Fiction',
-    releaseDate: '2023-11-10',
-  },
-  {
-    id: 4982,
-    title: 'American Gangster',
-    releaseDate: '2007-11-02',
-  },
-  {
-    id: 838,
-    title: 'American Graffiti',
-    releaseDate: '1973-08-11',
-  },
-  {
-    id: 73,
-    title: 'American History X',
-    releaseDate: '1998-07-01',
-  },
-  {
-    id: 13199,
-    title: 'American Me',
-    releaseDate: '1992-03-13',
-  },
-  {
-    id: 14242,
-    title: 'American Movie',
-    releaseDate: '1999-11-05',
-  },
-  {
-    id: 743601,
-    title: 'American Murder: The Family Next Door',
-    releaseDate: '2020-09-29',
-  },
-  {
-    id: 1359,
-    title: 'American Psycho',
-    releaseDate: '2000-01-21',
-  },
-  {
-    id: 451751,
-    title: 'American Satan',
-    releaseDate: '2017-10-13',
-  },
-  {
-    id: 190859,
-    title: 'American Sniper',
-    releaseDate: '2014-12-25',
-  },
-  {
-    id: 2771,
-    title: 'American Splendor',
-    releaseDate: '2003-08-15',
-  },
-  {
-    id: 673309,
-    title: 'American Underdog',
-    releaseDate: '2021-12-25',
-  },
-  {
-    id: 11831,
-    title: 'Amistad',
-    releaseDate: '1997-12-10',
-  },
-  {
-    id: 331781,
-    title: 'Amy',
-    releaseDate: '2015-07-02',
-  },
-  {
-    id: 210024,
-    title: 'An Adventure in Space and Time',
-    releaseDate: '2013-11-21',
-  },
-  {
-    id: 8356,
-    title: 'An Affair to Remember',
-    releaseDate: '1957-07-11',
-  },
-  {
-    id: 13008,
-    title: 'An American Crime',
-    releaseDate: '2007-07-27',
-  },
-  {
-    id: 2769,
-    title: 'An American in Paris',
-    releaseDate: '1951-09-26',
-  },
-  {
-    id: 814,
-    title: 'An American Werewolf in London',
-    releaseDate: '1981-08-21',
-  },
-  {
-    id: 810223,
-    title: 'An Autumn Romance',
-    releaseDate: '2021-05-07',
-  },
-  {
-    id: 262481,
-    title: 'An Honest Liar',
-    releaseDate: '2014-04-18',
-  },
-  {
-    id: 359305,
-    title: 'An Inspector Calls',
-    releaseDate: '2015-09-13',
-  },
-  {
-    id: 534338,
-    title: 'An Interview with God',
-    releaseDate: '2018-08-20',
-  },
-  {
-    id: 2623,
-    title: 'An Officer and a Gentleman',
-    releaseDate: '1982-07-28',
-  },
-  {
-    id: 9444,
-    title: 'Anastasia',
-    releaseDate: '1997-11-20',
-  },
-  {
-    id: 93,
-    title: 'Anatomy of a Murder',
-    releaseDate: '1959-07-01',
-  },
-  {
-    id: 9267,
-    title: 'And Now for Something Completely Different',
-    releaseDate: '1971-09-28',
-  },
-  {
-    id: 4886,
-    title: 'And Then There Were None',
-    releaseDate: '1945-10-31',
-  },
-  {
-    id: 446663,
-    title: 'Andre the Giant',
-    releaseDate: '2018-04-10',
-  },
-  {
-    id: 1938,
-    title: 'Angel Face',
-    releaseDate: '1953-01-02',
-  },
-  {
-    id: 635,
-    title: 'Angel Heart',
-    releaseDate: '1987-03-06',
-  },
-  {
-    id: 10397,
-    title: "Angela's Ashes",
-    releaseDate: '1999-12-25',
-  },
-  {
-    id: 13696,
-    title: 'Angels with Dirty Faces',
-    releaseDate: '1938-11-26',
-  },
-  {
-    id: 610120,
-    title: 'Anima',
-    releaseDate: '2019-06-26',
-  },
-  {
-    id: 11848,
-    title: 'Animal Farm',
-    releaseDate: '1954-12-28',
-  },
-  {
-    id: 17663,
-    title: 'Anne of Green Gables',
-    releaseDate: '1985-12-01',
-  },
-  {
-    id: 703,
-    title: 'Annie Hall',
-    releaseDate: '1977-04-19',
-  },
-  {
-    id: 291270,
-    title: 'Anomalisa',
-    releaseDate: '2015-12-30',
-  },
-  {
-    id: 1064213,
-    title: 'Anora',
-    releaseDate: '2024-10-14',
-  },
-  {
-    id: 15157,
-    title: 'Another Cinderella Story',
-    releaseDate: '2008-09-16',
-  },
-  {
-    id: 44009,
-    title: 'Another Year',
-    releaseDate: '2010-11-05',
-  },
-  {
-    id: 102899,
-    title: 'Ant-Man',
-    releaseDate: '2015-07-14',
-  },
-  {
-    id: 351339,
-    title: 'Anthropoid',
-    releaseDate: '2016-08-12',
-  },
-  {
-    id: 18094,
-    title: 'Anvil! The Story of Anvil',
-    releaseDate: '2008-01-14',
-  },
-  {
-    id: 28,
-    title: 'Apocalypse Now',
-    releaseDate: '1979-05-19',
-  },
-  {
-    id: 1579,
-    title: 'Apocalypto',
-    releaseDate: '2006-12-07',
-  },
-  {
-    id: 664996,
-    title: 'Apollo 10½: A Space Age Childhood',
-    releaseDate: '2022-03-24',
-  },
-  {
-    id: 549559,
-    title: 'Apollo 11',
-    releaseDate: '2019-03-01',
-  },
-  {
-    id: 568,
-    title: 'Apollo 13',
-    releaseDate: '1995-06-30',
-  },
-  {
-    id: 555285,
-    title: "Are You There God? It's Me, Margaret.",
-    releaseDate: '2023-03-29',
-  },
-  {
-    id: 68734,
-    title: 'Argo',
-    releaseDate: '2012-10-11',
-  },
-  {
-    id: 774372,
-    title: 'ariana grande: excuse me, i love you',
-    releaseDate: '2020-12-21',
-  },
-  {
-    id: 11044,
-    title: 'Arizona Dream',
-    releaseDate: '1993-01-06',
-  },
-  {
-    id: 1073,
-    title: 'Arlington Road',
-    releaseDate: '1999-03-19',
-  },
-  {
-    id: 766,
-    title: 'Army of Darkness',
-    releaseDate: '1992-10-31',
-  },
-  {
-    id: 329865,
-    title: 'Arrival',
-    releaseDate: '2016-11-10',
-  },
-  {
-    id: 212,
-    title: 'Arsenic and Old Lace',
-    releaseDate: '1944-09-01',
-  },
-  {
-    id: 618588,
-    title: 'Arthur the King',
-    releaseDate: '2024-02-22',
-  },
-  {
-    id: 1140817,
-    title: 'As',
-    releaseDate: '2023-01-01',
-  },
-  {
-    id: 2898,
-    title: 'As Good as It Gets',
-    releaseDate: '1997-12-19',
-  },
-  {
-    id: 17814,
-    title: 'Assault on Precinct 13',
-    releaseDate: '1976-10-08',
-  },
-  {
-    id: 684700,
-    title: 'Athlete A',
-    releaseDate: '2020-06-23',
-  },
-  {
-    id: 10865,
-    title: 'Atlantis: The Lost Empire',
-    releaseDate: '2001-06-02',
-  },
-  {
-    id: 4347,
-    title: 'Atonement',
-    releaseDate: '2007-02-27',
-  },
-  {
-    id: 376228,
-    title: 'Audrie & Daisy',
-    releaseDate: '2016-09-23',
-  },
-  {
-    id: 5123,
-    title: 'August Rush',
-    releaseDate: '2007-11-21',
-  },
-  {
-    id: 546728,
-    title: 'Auntie Edna',
-    releaseDate: '2018-10-23',
-  },
-  {
-    id: 19995,
-    title: 'Avatar',
-    releaseDate: '2009-12-16',
-  },
-  {
-    id: 83533,
-    title: 'Avatar: Fire and Ash',
-    releaseDate: '2025-12-17',
-  },
-  {
-    id: 76600,
-    title: 'Avatar: The Way of Water',
-    releaseDate: '2022-12-14',
-  },
-  {
-    id: 99861,
-    title: 'Avengers: Age of Ultron',
-    releaseDate: '2015-04-22',
-  },
-  {
-    id: 299534,
-    title: 'Avengers: Endgame',
-    releaseDate: '2019-04-24',
-  },
-  {
-    id: 299536,
-    title: 'Avengers: Infinity War',
-    releaseDate: '2018-04-25',
-  },
-  {
-    id: 479626,
-    title: 'Avicii: True Stories',
-    releaseDate: '2017-10-26',
-  },
-  {
-    id: 11005,
-    title: 'Awakenings',
-    releaseDate: '1990-12-04',
-  },
-  {
-    id: 1919,
-    title: 'Away from Her',
-    releaseDate: '2007-05-04',
-  },
-  {
-    id: 1164,
-    title: 'Babel',
-    releaseDate: '2006-10-26',
-  },
-  {
-    id: 16161,
-    title: 'Baby Boy',
-    releaseDate: '2001-06-27',
-  },
-  {
-    id: 339403,
-    title: 'Baby Driver',
-    releaseDate: '2017-06-28',
-  },
-  {
-    id: 615777,
-    title: 'Babylon',
-    releaseDate: '2022-12-22',
-  },
-  {
-    id: 10940,
-    title: 'Babylon 5: In the Beginning',
-    releaseDate: '1998-01-04',
-  },
-  {
-    id: 105,
-    title: 'Back to the Future',
-    releaseDate: '1985-07-03',
-  },
-  {
-    id: 165,
-    title: 'Back to the Future Part II',
-    releaseDate: '1989-11-22',
-  },
-  {
-    id: 196,
-    title: 'Back to the Future Part III',
-    releaseDate: '1990-05-25',
-  },
-  {
-    id: 770254,
-    title: 'Back to the Outback',
-    releaseDate: '2021-12-03',
-  },
-  {
-    id: 38700,
-    title: 'Bad Boys for Life',
-    releaseDate: '2020-01-15',
-  },
-  {
-    id: 573435,
-    title: 'Bad Boys: Ride or Die',
-    releaseDate: '2024-06-05',
-  },
-  {
-    id: 14554,
-    title: 'Bad Day at Black Rock',
-    releaseDate: '1955-01-13',
-  },
-  {
-    id: 12143,
-    title: 'Bad Lieutenant',
-    releaseDate: '1992-11-20',
-  },
-  {
-    id: 3133,
-    title: 'Badlands',
-    releaseDate: '1974-01-05',
-  },
-  {
-    id: 29884,
-    title: 'Ball of Fire',
-    releaseDate: '1941-12-02',
-  },
-  {
-    id: 541671,
-    title: 'Ballerina',
-    releaseDate: '2025-06-04',
-  },
-  {
-    id: 342473,
-    title: 'Ballerina',
-    releaseDate: '2016-12-14',
-  },
-  {
-    id: 21032,
-    title: 'Balto',
-    releaseDate: '1995-12-22',
-  },
-  {
-    id: 3170,
-    title: 'Bambi',
-    releaseDate: '1942-08-14',
-  },
-  {
-    id: 54551,
-    title: 'Banana',
-    releaseDate: '2010-12-13',
-  },
-  {
-    id: 16876,
-    title: "Bang Bang You're Dead",
-    releaseDate: '2003-06-11',
-  },
-  {
-    id: 514754,
-    title: 'Bao',
-    releaseDate: '2018-06-15',
-  },
-  {
-    id: 14002,
-    title: 'Baraka',
-    releaseDate: '1992-09-15',
-  },
-  {
-    id: 361380,
-    title: 'Barbie & Her Sisters in the Great Puppy Adventure',
-    releaseDate: '2015-10-07',
-  },
-  {
-    id: 13004,
-    title: 'Barbie and the Diamond Castle',
-    releaseDate: '2008-09-03',
-  },
-  {
-    id: 15906,
-    title: 'Barbie and the Magic of Pegasus',
-    releaseDate: '2005-10-04',
-  },
-  {
-    id: 285733,
-    title: 'Barbie and the Secret Door',
-    releaseDate: '2014-08-30',
-  },
-  {
-    id: 23566,
-    title: 'Barbie and the Three Musketeers',
-    releaseDate: '2009-09-15',
-  },
-  {
-    id: 15015,
-    title: 'Barbie as Rapunzel',
-    releaseDate: '2002-10-01',
-  },
-  {
-    id: 13283,
-    title: 'Barbie as the Island Princess',
-    releaseDate: '2007-09-17',
-  },
-  {
-    id: 15165,
-    title: 'Barbie as The Princess & the Pauper',
-    releaseDate: '2004-09-28',
-  },
-  {
-    id: 13459,
-    title: "Barbie in 'A Christmas Carol'",
-    releaseDate: '2008-11-03',
-  },
-  {
-    id: 34134,
-    title: 'Barbie in A Mermaid Tale',
-    releaseDate: '2010-01-25',
-  },
-  {
-    id: 91342,
-    title: 'Barbie in A Mermaid Tale 2',
-    releaseDate: '2012-02-22',
-  },
-  {
-    id: 13002,
-    title: 'Barbie in the 12 Dancing Princesses',
-    releaseDate: '2006-09-19',
-  },
-  {
-    id: 15016,
-    title: 'Barbie of Swan Lake',
-    releaseDate: '2003-09-27',
-  },
-  {
-    id: 44874,
-    title: 'Barbie: A Fashion Fairytale',
-    releaseDate: '2010-09-14',
-  },
-  {
-    id: 73456,
-    title: 'Barbie: Princess Charm School',
-    releaseDate: '2011-08-11',
-  },
-  {
-    id: 129533,
-    title: 'Barbie: The Princess & the Popstar',
-    releaseDate: '2012-09-13',
-  },
-  {
-    id: 17887,
-    title: 'Barefoot in the Park',
-    releaseDate: '1967-05-25',
-  },
-  {
-    id: 3175,
-    title: 'Barry Lyndon',
-    releaseDate: '1975-12-18',
-  },
-  {
-    id: 290,
-    title: 'Barton Fink',
-    releaseDate: '1991-08-01',
-  },
-  {
-    id: 268,
-    title: 'Batman',
-    releaseDate: '1989-06-21',
-  },
-  {
-    id: 886396,
-    title: 'Batman and Superman: Battle of the Super Sons',
-    releaseDate: '2022-10-17',
-  },
-  {
-    id: 272,
-    title: 'Batman Begins',
-    releaseDate: '2005-06-10',
-  },
-  {
-    id: 16234,
-    title: 'Batman Beyond: Return of the Joker',
-    releaseDate: '2000-12-12',
-  },
-  {
-    id: 64202,
-    title: 'Batman Beyond: The Movie',
-    releaseDate: '1999-01-10',
-  },
-  {
-    id: 581997,
-    title: 'Batman vs Teenage Mutant Ninja Turtles',
-    releaseDate: '2019-03-31',
-  },
-  {
-    id: 321528,
-    title: 'Batman vs. Robin',
-    releaseDate: '2015-04-03',
-  },
-  {
-    id: 242643,
-    title: 'Batman: Assault on Arkham',
-    releaseDate: '2014-08-12',
-  },
-  {
-    id: 366924,
-    title: 'Batman: Bad Blood',
-    releaseDate: '2016-01-19',
-  },
-  {
-    id: 537056,
-    title: 'Batman: Hush',
-    releaseDate: '2019-07-19',
-  },
-  {
-    id: 14919,
-    title: 'Batman: Mask of the Phantasm',
-    releaseDate: '1993-12-25',
-  },
-  {
-    id: 123025,
-    title: 'Batman: The Dark Knight Returns, Part 1',
-    releaseDate: '2012-09-25',
-  },
-  {
-    id: 142061,
-    title: 'Batman: The Dark Knight Returns, Part 2',
-    releaseDate: '2013-01-03',
-  },
-  {
-    id: 736073,
-    title: 'Batman: The Long Halloween, Part One',
-    releaseDate: '2021-06-21',
-  },
-  {
-    id: 736074,
-    title: 'Batman: The Long Halloween, Part Two',
-    releaseDate: '2021-07-26',
-  },
-  {
-    id: 40662,
-    title: 'Batman: Under the Red Hood',
-    releaseDate: '2010-07-27',
-  },
-  {
-    id: 69735,
-    title: 'Batman: Year One',
-    releaseDate: '2011-09-27',
-  },
-  {
-    id: 69315,
-    title: 'Battlestar Galactica: Razor',
-    releaseDate: '2007-11-12',
-  },
-  {
-    id: 214314,
-    title: 'Bears',
-    releaseDate: '2014-04-17',
-  },
-  {
-    id: 664416,
-    title: 'Beastie Boys Story',
-    releaseDate: '2020-04-24',
-  },
-  {
-    id: 283587,
-    title: 'Beasts of No Nation',
-    releaseDate: '2015-09-11',
-  },
-  {
-    id: 451915,
-    title: 'Beautiful Boy',
-    releaseDate: '2018-10-12',
-  },
-  {
-    id: 10938,
-    title: 'Beautiful Thing',
-    releaseDate: '1996-06-21',
-  },
-  {
-    id: 10020,
-    title: 'Beauty and the Beast',
-    releaseDate: '1991-10-22',
-  },
-  {
-    id: 15421,
-    title: 'Becket',
-    releaseDate: '1964-03-11',
-  },
-  {
-    id: 699280,
-    title: 'Becoming',
-    releaseDate: '2020-05-06',
-  },
-  {
-    id: 2977,
-    title: 'Becoming Jane',
-    releaseDate: '2007-03-02',
-  },
-  {
-    id: 12335,
-    title: 'Bedknobs and Broomsticks',
-    releaseDate: '1971-10-07',
-  },
-  {
-    id: 4011,
-    title: 'Beetlejuice',
-    releaseDate: '1988-03-30',
-  },
-  {
-    id: 132344,
-    title: 'Before Midnight',
-    releaseDate: '2013-04-05',
-  },
-  {
-    id: 76,
-    title: 'Before Sunrise',
-    releaseDate: '1995-01-27',
-  },
-  {
-    id: 80,
-    title: 'Before Sunset',
-    releaseDate: '2004-06-16',
-  },
-  {
-    id: 7972,
-    title: "Before the Devil Knows You're Dead",
-    releaseDate: '2007-09-26',
-  },
-  {
-    id: 410718,
-    title: 'Before the Flood',
-    releaseDate: '2016-10-21',
-  },
-  {
-    id: 198277,
-    title: 'Begin Again',
-    releaseDate: '2014-06-27',
-  },
-  {
-    id: 492,
-    title: 'Being John Malkovich',
-    releaseDate: '1999-10-29',
-  },
-  {
-    id: 10322,
-    title: 'Being There',
-    releaseDate: '1979-12-19',
-  },
-  {
-    id: 777270,
-    title: 'Belfast',
-    releaseDate: '2021-11-12',
-  },
-  {
-    id: 550776,
-    title: 'Believe Me: The Abduction of Lisa McVey',
-    releaseDate: '2018-09-30',
-  },
-  {
-    id: 205601,
-    title: 'Belle',
-    releaseDate: '2013-05-01',
-  },
-  {
-    id: 15403,
-    title: 'Ben 10: Secret of the Omnitrix',
-    releaseDate: '2007-08-10',
-  },
-  {
-    id: 665,
-    title: 'Ben-Hur',
-    releaseDate: '1959-11-18',
-  },
-  {
-    id: 4104,
-    title: 'Benny & Joon',
-    releaseDate: '1993-04-16',
-  },
-  {
-    id: 40819,
-    title: 'Best Worst Movie',
-    releaseDate: '2009-03-14',
-  },
-  {
-    id: 799766,
-    title: 'Better Man',
-    releaseDate: '2024-12-06',
-  },
-  {
-    id: 90,
-    title: 'Beverly Hills Cop',
-    releaseDate: '1984-12-05',
-  },
-  {
-    id: 979163,
-    title: 'Beyond Infinity: Buzz and the Journey to Lightyear',
-    releaseDate: '2022-06-10',
-  },
-  {
-    id: 2277,
-    title: 'Bicentennial Man',
-    releaseDate: '1999-12-17',
-  },
-  {
-    id: 2280,
-    title: 'Big',
-    releaseDate: '1988-06-03',
-  },
-  {
-    id: 587,
-    title: 'Big Fish',
-    releaseDate: '2003-12-04',
-  },
-  {
-    id: 878361,
-    title: 'Big George Foreman',
-    releaseDate: '2023-04-27',
-  },
-  {
-    id: 177572,
-    title: 'Big Hero 6',
-    releaseDate: '2014-10-24',
-  },
-  {
-    id: 539617,
-    title: 'Big Time Adolescence',
-    releaseDate: '2020-03-13',
-  },
-  {
-    id: 95754,
-    title: 'Big Time Movie',
-    releaseDate: '2012-03-10',
-  },
-  {
-    id: 119321,
-    title: 'Big Top Scooby-Doo!',
-    releaseDate: '2012-10-09',
-  },
-  {
-    id: 6978,
-    title: 'Big Trouble in Little China',
-    releaseDate: '1986-05-30',
-  },
-  {
-    id: 702525,
-    title: 'Bigfoot Family',
-    releaseDate: '2020-07-23',
-  },
-  {
-    id: 26036,
-    title: 'Bigger Than Life',
-    releaseDate: '1956-11-20',
-  },
-  {
-    id: 528644,
-    title: 'Bilby',
-    releaseDate: '2018-06-06',
-  },
-  {
-    id: 308571,
-    title: "Bill Burr: I'm Sorry You Feel That Way",
-    releaseDate: '2014-12-05',
-  },
-  {
-    id: 625128,
-    title: 'Bill Burr: Paper Tiger',
-    releaseDate: '2019-09-10',
-  },
-  {
-    id: 191489,
-    title: 'Bill Burr: You People Are All The Same',
-    releaseDate: '2012-08-16',
-  },
-  {
-    id: 654754,
-    title: "Billie Eilish: The World's a Little Blurry",
-    releaseDate: '2021-02-26',
-  },
-  {
-    id: 17305,
-    title: "Billy & Mandy's Big Boogey Adventure",
-    releaseDate: '2007-02-14',
-  },
-  {
-    id: 71,
-    title: 'Billy Elliot',
-    releaseDate: '2000-09-28',
-  },
-  {
-    id: 1128752,
-    title: 'Bird',
-    releaseDate: '2024-11-08',
-  },
-  {
-    id: 898,
-    title: 'Birdman of Alcatraz',
-    releaseDate: '1962-07-04',
-  },
-  {
-    id: 194662,
-    title: 'Birdman or (The Unexpected Virtue of Ignorance)',
-    releaseDate: '2014-10-17',
-  },
-  {
-    id: 11296,
-    title: 'Birdy',
-    releaseDate: '1984-12-14',
-  },
-  {
-    id: 10497,
-    title: 'Bitter Moon',
-    releaseDate: '1992-09-02',
-  },
-  {
-    id: 1040330,
-    title: 'Black Adam: Saviour or Destroyer?',
-    releaseDate: '2022-10-15',
-  },
-  {
-    id: 526702,
-    title: 'Black Beauty',
-    releaseDate: '2020-11-27',
-  },
-  {
-    id: 24804,
-    title: 'Black Dynamite',
-    releaseDate: '2009-10-16',
-  },
-  {
-    id: 855,
-    title: 'Black Hawk Down',
-    releaseDate: '2001-12-28',
-  },
-  {
-    id: 16391,
-    title: 'Black Narcissus',
-    releaseDate: '1947-05-26',
-  },
-  {
-    id: 284054,
-    title: 'Black Panther',
-    releaseDate: '2018-02-13',
-  },
-  {
-    id: 505642,
-    title: 'Black Panther: Wakanda Forever',
-    releaseDate: '2022-11-09',
-  },
-  {
-    id: 44214,
-    title: 'Black Swan',
-    releaseDate: '2010-12-03',
-  },
-  {
-    id: 497698,
-    title: 'Black Widow',
-    releaseDate: '2021-07-07',
-  },
-  {
-    id: 1016084,
-    title: 'BlackBerry',
-    releaseDate: '2023-02-13',
-  },
-  {
-    id: 158999,
-    title: 'Blackfish',
-    releaseDate: '2013-06-07',
-  },
-  {
-    id: 487558,
-    title: 'BlacKkKlansman',
-    releaseDate: '2018-08-09',
-  },
-  {
-    id: 78,
-    title: 'Blade Runner',
-    releaseDate: '1982-06-25',
-  },
-  {
-    id: 335984,
-    title: 'Blade Runner 2049',
-    releaseDate: '2017-10-04',
-  },
-  {
-    id: 11072,
-    title: 'Blazing Saddles',
-    releaseDate: '1974-02-07',
-  },
-  {
-    id: 489930,
-    title: 'Blindspotting',
-    releaseDate: '2018-07-20',
-  },
-  {
-    id: 22164,
-    title: 'Blood and Bone',
-    releaseDate: '2009-02-07',
-  },
-  {
-    id: 1372,
-    title: 'Blood Diamond',
-    releaseDate: '2006-12-08',
-  },
-  {
-    id: 11368,
-    title: 'Blood Simple',
-    releaseDate: '1985-01-18',
-  },
-  {
-    id: 11690,
-    title: 'Bloodsport',
-    releaseDate: '1988-02-26',
-  },
-  {
-    id: 4107,
-    title: 'Bloody Sunday',
-    releaseDate: '2002-01-25',
-  },
-  {
-    id: 4133,
-    title: 'Blow',
-    releaseDate: '2001-04-04',
-  },
-  {
-    id: 11644,
-    title: 'Blow Out',
-    releaseDate: '1981-07-24',
-  },
-  {
-    id: 1052,
-    title: 'Blow-Up',
-    releaseDate: '1966-12-18',
-  },
-  {
-    id: 644089,
-    title: 'Blue Bayou',
-    releaseDate: '2021-09-10',
-  },
-  {
-    id: 14839,
-    title: 'Blue Collar',
-    releaseDate: '1978-02-10',
-  },
-  {
-    id: 408508,
-    title: 'Blue Jay',
-    releaseDate: '2016-10-07',
-  },
-  {
-    id: 671295,
-    title: 'Blue Miracle',
-    releaseDate: '2021-05-27',
-  },
-  {
-    id: 621191,
-    title: 'Blue Story',
-    releaseDate: '2019-11-22',
-  },
-  {
-    id: 793,
-    title: 'Blue Velvet',
-    releaseDate: '1986-09-19',
-  },
-  {
-    id: 818350,
-    title: 'Blush',
-    releaseDate: '2021-06-13',
-  },
-  {
-    id: 823754,
-    title: 'Bo Burnham: Inside',
-    releaseDate: '2021-07-22',
-  },
-  {
-    id: 400608,
-    title: 'Bo Burnham: Make Happy',
-    releaseDate: '2016-06-03',
-  },
-  {
-    id: 244001,
-    title: 'Bo Burnham: What.',
-    releaseDate: '2013-12-17',
-  },
-  {
-    id: 424694,
-    title: 'Bohemian Rhapsody',
-    releaseDate: '2018-10-24',
-  },
-  {
-    id: 807196,
-    title: 'Boiling Point',
-    releaseDate: '2021-07-05',
-  },
-  {
-    id: 396774,
-    title: 'Bomb City',
-    releaseDate: '2017-03-31',
-  },
-  {
-    id: 791177,
-    title: 'Bones and All',
-    releaseDate: '2022-11-18',
-  },
-  {
-    id: 475,
-    title: 'Bonnie and Clyde',
-    releaseDate: '1967-08-13',
-  },
-  {
-    id: 4995,
-    title: 'Boogie Nights',
-    releaseDate: '1997-10-10',
-  },
-  {
-    id: 505600,
-    title: 'Booksmart',
-    releaseDate: '2019-05-24',
-  },
-  {
-    id: 2604,
-    title: 'Born on the Fourth of July',
-    releaseDate: '1989-12-20',
-  },
-  {
-    id: 24481,
-    title: 'Born Yesterday',
-    releaseDate: '1950-12-26',
-  },
-  {
-    id: 421281,
-    title: 'Borrowed Time',
-    releaseDate: '2015-10-31',
-  },
-  {
-    id: 9303,
-    title: 'Bound',
-    releaseDate: '1996-09-13',
-  },
-  {
-    id: 9702,
-    title: 'Bound by Honor',
-    releaseDate: '1993-02-05',
-  },
-  {
-    id: 1430,
-    title: 'Bowling for Columbine',
-    releaseDate: '2002-10-09',
-  },
-  {
-    id: 39356,
-    title: 'Boy',
-    releaseDate: '2010-03-25',
-  },
-  {
-    id: 14748,
-    title: 'Boy A',
-    releaseDate: '2008-07-23',
-  },
-  {
-    id: 472451,
-    title: 'Boy Erased',
-    releaseDate: '2018-09-24',
-  },
-  {
-    id: 85350,
-    title: 'Boyhood',
-    releaseDate: '2014-06-05',
-  },
-  {
-    id: 348893,
-    title: 'Boyka: Undisputed IV',
-    releaseDate: '2016-08-01',
-  },
-  {
-    id: 226,
-    title: "Boys Don't Cry",
-    releaseDate: '1999-09-02',
-  },
-  {
-    id: 650,
-    title: 'Boyz n the Hood',
-    releaseDate: '1991-07-12',
-  },
-  {
-    id: 340027,
-    title: 'Brain on Fire',
-    releaseDate: '2017-02-22',
-  },
-  {
-    id: 763,
-    title: 'Braindead',
-    releaseDate: '1992-08-13',
-  },
-  {
-    id: 6114,
-    title: "Bram Stoker's Dracula",
-    releaseDate: '1992-11-13',
-  },
-  {
-    id: 62177,
-    title: 'Brave',
-    releaseDate: '2012-06-21',
-  },
-  {
-    id: 197,
-    title: 'Braveheart',
-    releaseDate: '1995-05-24',
-  },
-  {
-    id: 68,
-    title: 'Brazil',
-    releaseDate: '1985-02-20',
-  },
-  {
-    id: 13783,
-    title: 'Breaker Morant',
-    releaseDate: '1980-06-11',
-  },
-  {
-    id: 164,
-    title: "Breakfast at Tiffany's",
-    releaseDate: '1961-10-06',
-  },
-  {
-    id: 1420,
-    title: 'Breakfast on Pluto',
-    releaseDate: '2005-11-16',
-  },
-  {
-    id: 20283,
-    title: 'Breaking Away',
-    releaseDate: '1979-05-24',
-  },
-  {
-    id: 514439,
-    title: 'Breakthrough',
-    releaseDate: '2019-04-10',
-  },
-  {
-    id: 407445,
-    title: 'Breathe',
-    releaseDate: '2017-10-13',
-  },
-  {
-    id: 535845,
-    title: 'Brian Banks',
-    releaseDate: '2019-08-09',
-  },
-  {
-    id: 229,
-    title: 'Bride of Frankenstein',
-    releaseDate: '1935-04-20',
-  },
-  {
-    id: 296098,
-    title: 'Bridge of Spies',
-    releaseDate: '2015-10-15',
-  },
-  {
-    id: 1265,
-    title: 'Bridge to Terabithia',
-    releaseDate: '2007-02-15',
-  },
-  {
-    id: 851,
-    title: 'Brief Encounter',
-    releaseDate: '1945-11-24',
-  },
-  {
-    id: 403431,
-    title: 'Brigsby Bear',
-    releaseDate: '2017-07-27',
-  },
-  {
-    id: 324560,
-    title: 'Brimstone',
-    releaseDate: '2016-03-12',
-  },
-  {
-    id: 1151031,
-    title: 'Bring Her Back',
-    releaseDate: '2025-05-28',
-  },
-  {
-    id: 11942,
-    title: 'Bring Me the Head of Alfredo Garcia',
-    releaseDate: '1974-08-01',
-  },
-  {
-    id: 900,
-    title: 'Bringing Up Baby',
-    releaseDate: '1938-02-18',
-  },
-  {
-    id: 797594,
-    title: 'Britney vs. Spears',
-    releaseDate: '2021-09-27',
-  },
-  {
-    id: 12762,
-    title: 'Broadway Danny Rose',
-    releaseDate: '1984-01-27',
-  },
-  {
-    id: 142,
-    title: 'Brokeback Mountain',
-    releaseDate: '2005-10-22',
-  },
-  {
-    id: 167073,
-    title: 'Brooklyn',
-    releaseDate: '2015-10-20',
-  },
-  {
-    id: 10009,
-    title: 'Brother Bear',
-    releaseDate: '2003-10-23',
-  },
-  {
-    id: 7445,
-    title: 'Brothers',
-    releaseDate: '2009-12-02',
-  },
-  {
-    id: 378373,
-    title: 'Brothers of the Wind',
-    releaseDate: '2015-12-24',
-  },
-  {
-    id: 1623,
-    title: 'Brubaker',
-    releaseDate: '1980-06-20',
-  },
-  {
-    id: 28297,
-    title: 'Brute Force',
-    releaseDate: '1947-07-16',
-  },
-  {
-    id: 3073,
-    title: 'Bud Abbott and Lou Costello Meet Frankenstein',
-    releaseDate: '1948-06-01',
-  },
-  {
-    id: 11779,
-    title: 'Buena Vista Social Club',
-    releaseDate: '1999-06-04',
-  },
-  {
-    id: 9464,
-    title: "Buffalo '66",
-    releaseDate: '1998-01-20',
-  },
-  {
-    id: 701387,
-    title: 'Bugonia',
-    releaseDate: '2025-10-23',
-  },
-  {
-    id: 26730,
-    title: "Bugs Bunny's 3rd Movie: 1001 Rabbit Tales",
-    releaseDate: '1982-11-19',
-  },
-  {
-    id: 718930,
-    title: 'Bullet Train',
-    releaseDate: '2022-08-03',
-  },
-  {
-    id: 11382,
-    title: 'Bullets Over Broadway',
-    releaseDate: '1994-10-14',
-  },
-  {
-    id: 916,
-    title: 'Bullitt',
-    releaseDate: '1968-10-17',
-  },
-  {
-    id: 84404,
-    title: 'Bully',
-    releaseDate: '2011-04-23',
-  },
-  {
-    id: 1942,
-    title: 'Bunny Lake Is Missing',
-    releaseDate: '1965-10-03',
-  },
-  {
-    id: 42297,
-    title: 'Burlesque',
-    releaseDate: '2010-11-23',
-  },
-  {
-    id: 13413,
-    title: 'BURN·E',
-    releaseDate: '2008-11-17',
-  },
-  {
-    id: 747059,
-    title: 'Burrow',
-    releaseDate: '2020-12-25',
-  },
-  {
-    id: 20770,
-    title: "But I'm a Cheerleader",
-    releaseDate: '2000-07-07',
-  },
-  {
-    id: 642,
-    title: 'Butch Cassidy and the Sundance Kid',
-    releaseDate: '1969-09-23',
-  },
-  {
-    id: 632617,
-    title: "C'mon C'mon",
-    releaseDate: '2021-11-19',
-  },
-  {
-    id: 10784,
-    title: 'Cabaret',
-    releaseDate: '1972-02-13',
-  },
-  {
-    id: 28289,
-    title: 'Cactus Flower',
-    releaseDate: '1969-12-16',
-  },
-  {
-    id: 863873,
-    title: 'Caddo Lake',
-    releaseDate: '2024-11-28',
-  },
-  {
-    id: 14299,
-    title: 'Cadillac Records',
-    releaseDate: '2008-12-05',
-  },
-  {
-    id: 14117,
-    title: 'Calamity Jane',
-    releaseDate: '1953-11-04',
-  },
-  {
-    id: 398818,
-    title: 'Call Me by Your Name',
-    releaseDate: '2017-10-01',
-  },
-  {
-    id: 157832,
-    title: 'Calvary',
-    releaseDate: '2014-04-11',
-  },
-  {
-    id: 986,
-    title: 'Chimes at Midnight',
-    releaseDate: '1965-12-22',
-  },
-  {
-    id: 4441,
-    title: 'Candy',
-    releaseDate: '2006-05-25',
-  },
-  {
-    id: 11349,
-    title: 'Cape Fear',
-    releaseDate: '1962-04-12',
-  },
-  {
-    id: 1598,
-    title: 'Cape Fear',
-    releaseDate: '1991-11-13',
-  },
-  {
-    id: 22074,
-    title: 'Capitalism: A Love Story',
-    releaseDate: '2009-09-06',
-  },
-  {
-    id: 271110,
-    title: 'Captain America: Civil War',
-    releaseDate: '2016-04-27',
-  },
-  {
-    id: 1771,
-    title: 'Captain America: The First Avenger',
-    releaseDate: '2011-07-22',
-  },
-  {
-    id: 100402,
-    title: 'Captain America: The Winter Soldier',
-    releaseDate: '2014-03-20',
-  },
-  {
-    id: 16905,
-    title: 'Captain Blood',
-    releaseDate: '1935-12-26',
-  },
-  {
-    id: 334533,
-    title: 'Captain Fantastic',
-    releaseDate: '2016-07-08',
-  },
-  {
-    id: 109424,
-    title: 'Captain Phillips',
-    releaseDate: '2013-10-10',
-  },
-  {
-    id: 16515,
-    title: 'Captains Courageous',
-    releaseDate: '1937-06-25',
-  },
-  {
-    id: 2260,
-    title: 'Capturing the Friedmans',
-    releaseDate: '2003-05-30',
-  },
-  {
-    id: 1076364,
-    title: "Carl's Date",
-    releaseDate: '2023-06-15',
-  },
-  {
-    id: 6075,
-    title: "Carlito's Way",
-    releaseDate: '1993-11-10',
-  },
-  {
-    id: 72113,
-    title: 'Carnage',
-    releaseDate: '2011-09-16',
-  },
-  {
-    id: 258480,
-    title: 'Carol',
-    releaseDate: '2015-11-20',
-  },
-  {
-    id: 7340,
-    title: 'Carrie',
-    releaseDate: '1976-11-03',
-  },
-  {
-    id: 920,
-    title: 'Cars',
-    releaseDate: '2006-06-08',
-  },
-  {
-    id: 317952,
-    title: 'Cartel Land',
-    releaseDate: '2015-07-03',
-  },
-  {
-    id: 289,
-    title: 'Casablanca',
-    releaseDate: '1943-01-15',
-  },
-  {
-    id: 444308,
-    title: 'Cashback',
-    releaseDate: '2004-10-10',
-  },
-  {
-    id: 524,
-    title: 'Casino',
-    releaseDate: '1995-11-22',
-  },
-  {
-    id: 36557,
-    title: 'Casino Royale',
-    releaseDate: '2006-11-14',
-  },
-  {
-    id: 8358,
-    title: 'Cast Away',
-    releaseDate: '2000-12-22',
-  },
-  {
-    id: 236028,
-    title: 'Castello Cavalcanti',
-    releaseDate: '2013-11-12',
-  },
-  {
-    id: 10142,
-    title: 'Casualties of War',
-    releaseDate: '1989-08-18',
-  },
-  {
-    id: 261,
-    title: 'Cat on a Hot Tin Roof',
-    releaseDate: '1958-08-29',
-  },
-  {
-    id: 640,
-    title: 'Catch Me If You Can',
-    releaseDate: '2002-12-16',
-  },
-  {
-    id: 26598,
-    title: 'Cats',
-    releaseDate: '1998-10-05',
-  },
-  {
-    id: 24662,
-    title: "Cats Don't Dance",
-    releaseDate: '1997-03-26',
-  },
-  {
-    id: 59490,
-    title: 'Cave of Forgotten Dreams',
-    releaseDate: '2010-11-03',
-  },
-  {
-    id: 814340,
-    title: 'Cha Cha Real Smooth',
-    releaseDate: '2022-06-17',
-  },
-  {
-    id: 3580,
-    title: 'Changeling',
-    releaseDate: '2008-10-24',
-  },
-  {
-    id: 10435,
-    title: 'Chaplin',
-    releaseDate: '1992-12-17',
-  },
-  {
-    id: 4808,
-    title: 'Charade',
-    releaseDate: '1963-12-01',
-  },
-  {
-    id: 27331,
-    title: 'Charley Varrick',
-    releaseDate: '1973-09-19',
-  },
-  {
-    id: 118,
-    title: 'Charlie and the Chocolate Factory',
-    releaseDate: '2005-07-13',
-  },
-  {
-    id: 552532,
-    title: 'Charm City Kings',
-    releaseDate: '2020-01-27',
-  },
-  {
-    id: 84185,
-    title: 'Chasing Ice',
-    releaseDate: '2012-10-01',
-  },
-  {
-    id: 82684,
-    title: 'Chasing Mavericks',
-    releaseDate: '2012-10-25',
-  },
-  {
-    id: 212778,
-    title: 'Chef',
-    releaseDate: '2014-05-08',
-  },
-  {
-    id: 621013,
-    title: 'Chemical Hearts',
-    releaseDate: '2020-08-21',
-  },
-  {
-    id: 544401,
-    title: 'Cherry',
-    releaseDate: '2021-02-26',
-  },
-  {
-    id: 34672,
-    title: 'Chestnut: Hero of Central Park',
-    releaseDate: '2004-10-21',
-  },
-  {
-    id: 1574,
-    title: 'Chicago',
-    releaseDate: '2002-12-10',
-  },
-  {
-    id: 778855,
-    title: 'Chickenhare and the Hamster of Darkness',
-    releaseDate: '2022-02-16',
-  },
-  {
-    id: 9693,
-    title: 'Children of Men',
-    releaseDate: '2006-09-22',
-  },
-  {
-    id: 13354,
-    title: 'Chill Out, Scooby-Doo!',
-    releaseDate: '2007-08-31',
-  },
-  {
-    id: 829,
-    title: 'Chinatown',
-    releaseDate: '1974-06-20',
-  },
-  {
-    id: 420814,
-    title: 'Christopher Robin',
-    releaseDate: '2018-08-01',
-  },
-  {
-    id: 876716,
-    title: 'Ciao Alberto',
-    releaseDate: '2021-11-11',
-  },
-  {
-    id: 11224,
-    title: 'Cinderella',
-    releaseDate: '1950-02-22',
-  },
-  {
-    id: 921,
-    title: 'Cinderella Man',
-    releaseDate: '2005-06-02',
-  },
-  {
-    id: 94352,
-    title: 'Cirque du Soleil: Worlds Away',
-    releaseDate: '2012-11-09',
-  },
-  {
-    id: 15,
-    title: 'Citizen Kane',
-    releaseDate: '1941-04-17',
-  },
-  {
-    id: 12554,
-    title: 'Citizen X',
-    releaseDate: '1995-02-25',
-  },
-  {
-    id: 293310,
-    title: 'Citizenfour',
-    releaseDate: '2014-10-10',
-  },
-  {
-    id: 901,
-    title: 'City Lights',
-    releaseDate: '1931-02-06',
-  },
-  {
-    id: 466532,
-    title: 'Clara',
-    releaseDate: '2018-11-30',
-  },
-  {
-    id: 8095,
-    title: 'Cleopatra',
-    releaseDate: '1963-06-12',
-  },
-  {
-    id: 2292,
-    title: 'Clerks',
-    releaseDate: '1994-10-19',
-  },
-  {
-    id: 336845,
-    title: 'Cleveland Abduction',
-    releaseDate: '2015-05-02',
-  },
-  {
-    id: 585245,
-    title: 'Clifford the Big Red Dog',
-    releaseDate: '2021-11-10',
-  },
-  {
-    id: 66834,
-    title: 'Clock Cleaners',
-    releaseDate: '1937-10-15',
-  },
-  {
-    id: 840,
-    title: 'Close Encounters of the Third Kind',
-    releaseDate: '1977-12-14',
-  },
-  {
-    id: 353728,
-    title: 'Closet Monster',
-    releaseDate: '2016-07-15',
-  },
-  {
-    id: 630566,
-    title: 'Clouds',
-    releaseDate: '2020-10-09',
-  },
-  {
-    id: 15196,
-    title: 'Clue',
-    releaseDate: '1985-12-13',
-  },
-  {
-    id: 9603,
-    title: 'Clueless',
-    releaseDate: '1995-07-19',
-  },
-  {
-    id: 7214,
-    title: 'Coach Carter',
-    releaseDate: '2005-01-14',
-  },
-  {
-    id: 16769,
-    title: "Coal Miner's Daughter",
-    releaseDate: '1980-03-07',
-  },
-  {
-    id: 319075,
-    title: 'Cobain: Montage of Heck',
-    releaseDate: '2015-03-23',
-  },
-  {
-    id: 14761,
-    title: 'Cocaine Cowboys',
-    releaseDate: '2006-11-03',
-  },
-  {
-    id: 354912,
-    title: 'Coco',
-    releaseDate: '2017-10-27',
-  },
-  {
-    id: 776503,
-    title: 'CODA',
-    releaseDate: '2021-08-13',
-  },
-  {
-    id: 205081,
-    title: 'Codename: Kids Next Door: Operation Z.E.R.O.',
-    releaseDate: '2006-08-11',
-  },
-  {
-    id: 220289,
-    title: 'Coherence',
-    releaseDate: '2014-04-06',
-  },
-  {
-    id: 1538,
-    title: 'Collateral',
-    releaseDate: '2004-08-04',
-  },
-  {
-    id: 345920,
-    title: 'Collateral Beauty',
-    releaseDate: '2016-12-15',
-  },
-  {
-    id: 318781,
-    title: 'Colonia',
-    releaseDate: '2015-06-24',
-  },
-  {
-    id: 414453,
-    title: 'Columbus',
-    releaseDate: '2017-08-04',
-  },
-  {
-    id: 31657,
-    title: 'Coming Home',
-    releaseDate: '1978-02-15',
-  },
-  {
-    id: 1084199,
-    title: 'Companion',
-    releaseDate: '2025-01-22',
-  },
-  {
-    id: 35921,
-    title: 'Compulsion',
-    releaseDate: '1959-04-01',
-  },
-  {
-    id: 974576,
-    title: 'Conclave',
-    releaseDate: '2024-10-25',
-  },
-  {
-    id: 321741,
-    title: 'Concussion',
-    releaseDate: '2015-11-12',
-  },
-  {
-    id: 12900,
-    title: 'Conspiracy',
-    releaseDate: '2001-05-19',
-  },
-  {
-    id: 561,
-    title: 'Constantine',
-    releaseDate: '2005-02-08',
-  },
-  {
-    id: 539517,
-    title: 'Constantine: City of Demons - The Movie',
-    releaseDate: '2018-10-04',
-  },
-  {
-    id: 686,
-    title: 'Contact',
-    releaseDate: '1997-07-11',
-  },
-  {
-    id: 5708,
-    title: 'Control',
-    releaseDate: '2007-09-12',
-  },
-  {
-    id: 45094,
-    title: 'Conviction',
-    releaseDate: '2010-10-15',
-  },
-  {
-    id: 903,
-    title: 'Cool Hand Luke',
-    releaseDate: '1967-11-01',
-  },
-  {
-    id: 864,
-    title: 'Cool Runnings',
-    releaseDate: '1993-10-01',
-  },
-  {
-    id: 38742,
-    title: 'Cops',
-    releaseDate: '1922-03-11',
-  },
-  {
-    id: 14836,
-    title: 'Coraline',
-    releaseDate: '2009-02-05',
-  },
-  {
-    id: 3933,
-    title: 'Corpse Bride',
-    releaseDate: '2005-09-12',
-  },
-  {
-    id: 72213,
-    title: 'Courageous',
-    releaseDate: '2011-09-30',
-  },
-  {
-    id: 282297,
-    title: 'Cowspiracy: The Sustainability Secret',
-    releaseDate: '2014-07-01',
-  },
-  {
-    id: 1640,
-    title: 'Crash',
-    releaseDate: '2005-05-06',
-  },
-  {
-    id: 455207,
-    title: 'Crazy Rich Asians',
-    releaseDate: '2018-08-15',
-  },
-  {
-    id: 50646,
-    title: 'Crazy, Stupid, Love.',
-    releaseDate: '2011-07-29',
-  },
-  {
-    id: 312221,
-    title: 'Creed',
-    releaseDate: '2015-11-25',
-  },
-  {
-    id: 480530,
-    title: 'Creed II',
-    releaseDate: '2018-11-21',
-  },
-  {
-    id: 677179,
-    title: 'Creed III',
-    releaseDate: '2023-03-01',
-  },
-  {
-    id: 11562,
-    title: 'Crimes and Misdemeanors',
-    releaseDate: '1989-10-13',
-  },
-  {
-    id: 8963,
-    title: 'Crimson Tide',
-    releaseDate: '1995-05-12',
-  },
-  {
-    id: 653725,
-    title: 'Crip Camp: A Disability Revolution',
-    releaseDate: '2020-03-25',
-  },
-  {
-    id: 22112,
-    title: 'Criss Cross',
-    releaseDate: '1949-02-04',
-  },
-  {
-    id: 366141,
-    title: 'Cro Minion',
-    releaseDate: '2015-11-04',
-  },
-  {
-    id: 10839,
-    title: 'Cross of Iron',
-    releaseDate: '1977-01-29',
-  },
-  {
-    id: 15392,
-    title: 'Crossroads',
-    releaseDate: '1986-03-14',
-  },
-  {
-    id: 337404,
-    title: 'Cruella',
-    releaseDate: '2021-05-26',
-  },
-  {
-    id: 26564,
-    title: 'Crumb',
-    releaseDate: '1994-09-10',
-  },
-  {
-    id: 860159,
-    title: 'Crush',
-    releaseDate: '2022-04-29',
-  },
-  {
-    id: 346401,
-    title: 'Daft Punk Unchained',
-    releaseDate: '2015-06-24',
-  },
-  {
-    id: 152532,
-    title: 'Dallas Buyers Club',
-    releaseDate: '2013-11-01',
-  },
-  {
-    id: 16,
-    title: 'Dancer in the Dark',
-    releaseDate: '2000-09-01',
-  },
-  {
-    id: 581,
-    title: 'Dances with Wolves',
-    releaseDate: '1990-03-30',
-  },
-  {
-    id: 8583,
-    title: 'Dangerous Beauty',
-    releaseDate: '1998-02-20',
-  },
-  {
-    id: 859,
-    title: 'Dangerous Liaisons',
-    releaseDate: '1988-12-21',
-  },
-  {
-    id: 2666,
-    title: 'Dark City',
-    releaseDate: '1998-02-27',
-  },
-  {
-    id: 16227,
-    title: 'Dark Passage',
-    releaseDate: '1947-09-05',
-  },
-  {
-    id: 552178,
-    title: 'Dark Waters',
-    releaseDate: '2019-11-22',
-  },
-  {
-    id: 399404,
-    title: 'Darkest Hour',
-    releaseDate: '2017-11-22',
-  },
-  {
-    id: 635918,
-    title: 'Dating Amber',
-    releaseDate: '2020-07-03',
-  },
-  {
-    id: 444706,
-    title: 'Dave Chappelle: Deep in the Heart of Texas',
-    releaseDate: '2017-03-21',
-  },
-  {
-    id: 488223,
-    title: 'Dave Chappelle: Equanimity',
-    releaseDate: '2017-12-31',
-  },
-  {
-    id: 20147,
-    title: "Dave Chappelle: For What It's Worth",
-    releaseDate: '2004-09-04',
-  },
-  {
-    id: 16275,
-    title: "Dave Chappelle: Killin' Them Softly",
-    releaseDate: '2000-07-26',
-  },
-  {
-    id: 624932,
-    title: 'Dave Chappelle: Sticks & Stones',
-    releaseDate: '2019-08-26',
-  },
-  {
-    id: 444705,
-    title: 'Dave Chappelle: The Age of Spin',
-    releaseDate: '2017-03-21',
-  },
-  {
-    id: 494368,
-    title: 'Dave Chappelle: The Bird Revelation',
-    releaseDate: '2017-12-31',
-  },
-  {
-    id: 879540,
-    title: 'Dave Chappelle: The Closer',
-    releaseDate: '2021-10-05',
-  },
-  {
-    id: 664280,
-    title: 'David Attenborough: A Life on Our Planet',
-    releaseDate: '2020-09-28',
-  },
-  {
-    id: 924,
-    title: 'Dawn of the Dead',
-    releaseDate: '2004-03-19',
-  },
-  {
-    id: 923,
-    title: 'Dawn of the Dead',
-    releaseDate: '1978-09-02',
-  },
-  {
-    id: 119450,
-    title: 'Dawn of the Planet of the Apes',
-    releaseDate: '2014-07-08',
-  },
-  {
-    id: 40619,
-    title: 'Day & Night',
-    releaseDate: '2010-06-17',
-  },
-  {
-    id: 8408,
-    title: 'Day of the Dead',
-    releaseDate: '1985-07-03',
-  },
-  {
-    id: 16642,
-    title: 'Days of Heaven',
-    releaseDate: '1978-09-13',
-  },
-  {
-    id: 32488,
-    title: 'Days of Wine and Roses',
-    releaseDate: '1963-02-04',
-  },
-  {
-    id: 9571,
-    title: 'Dazed and Confused',
-    releaseDate: '1993-09-24',
-  },
-  {
-    id: 539681,
-    title: 'DC League of Super-Pets',
-    releaseDate: '2022-07-27',
-  },
-  {
-    id: 618353,
-    title: 'DC Showcase - Batman: Death in the Family',
-    releaseDate: '2020-10-13',
-  },
-  {
-    id: 46718,
-    title: 'DC Showcase: Green Arrow',
-    releaseDate: '2010-09-28',
-  },
-  {
-    id: 41988,
-    title: 'DC Showcase: Jonah Hex',
-    releaseDate: '2010-07-27',
-  },
-  {
-    id: 355254,
-    title: 'De Palma',
-    releaseDate: '2016-06-10',
-  },
-  {
-    id: 922,
-    title: 'Dead Man',
-    releaseDate: '1995-12-23',
-  },
-  {
-    id: 687,
-    title: 'Dead Man Walking',
-    releaseDate: '1995-12-29',
-  },
-  {
-    id: 12877,
-    title: "Dead Man's Shoes",
-    releaseDate: '2004-09-29',
-  },
-  {
-    id: 13581,
-    title: 'Dead of Night',
-    releaseDate: '1945-09-09',
-  },
-  {
-    id: 207,
-    title: 'Dead Poets Society',
-    releaseDate: '1989-06-02',
-  },
-  {
-    id: 9540,
-    title: 'Dead Ringers',
-    releaseDate: '1988-09-23',
-  },
-  {
-    id: 293660,
-    title: 'Deadpool',
-    releaseDate: '2016-02-09',
-  },
-  {
-    id: 533535,
-    title: 'Deadpool & Wolverine',
-    releaseDate: '2024-07-24',
-  },
-  {
-    id: 383498,
-    title: 'Deadpool 2',
-    releaseDate: '2018-05-15',
-  },
-  {
-    id: 558144,
-    title: 'Deadpool: No Good Deed',
-    releaseDate: '2017-03-03',
-  },
-  {
-    id: 483306,
-    title: 'Dear Basketball',
-    releaseDate: '2017-04-23',
-  },
-  {
-    id: 8981,
-    title: 'Dear Frankie',
-    releaseDate: '2004-05-18',
-  },
-  {
-    id: 15584,
-    title: 'Dear Zachary: A Letter to a Son About His Father',
-    releaseDate: '2008-10-31',
-  },
-  {
-    id: 10531,
-    title: 'Death and the Maiden',
-    releaseDate: '1994-05-04',
-  },
-  {
-    id: 4192,
-    title: 'Death on the Nile',
-    releaseDate: '1978-09-29',
-  },
-  {
-    id: 2639,
-    title: 'Deconstructing Harry',
-    releaseDate: '1997-12-12',
-  },
-  {
-    id: 13364,
-    title: 'Deliver Us from Evil',
-    releaseDate: '2006-06-24',
-  },
-  {
-    id: 10669,
-    title: 'Deliverance',
-    releaseDate: '1972-08-18',
-  },
-  {
-    id: 277217,
-    title: 'Descendants',
-    releaseDate: '2015-07-31',
-  },
-  {
-    id: 417320,
-    title: 'Descendants 2',
-    releaseDate: '2017-07-21',
-  },
-  {
-    id: 506574,
-    title: 'Descendants 3',
-    releaseDate: '2019-08-02',
-  },
-  {
-    id: 33997,
-    title: 'Desert Flower',
-    releaseDate: '2009-09-24',
-  },
-  {
-    id: 294,
-    title: 'Desert Hearts',
-    releaseDate: '1985-10-01',
-  },
-  {
-    id: 77210,
-    title: 'Design for Living',
-    releaseDate: '1933-12-29',
-  },
-  {
-    id: 20352,
-    title: 'Despicable Me',
-    releaseDate: '2010-07-08',
-  },
-  {
-    id: 35114,
-    title: 'Destino',
-    releaseDate: '2003-08-05',
-  },
-  {
-    id: 43828,
-    title: 'Destry Rides Again',
-    releaseDate: '1939-11-30',
-  },
-  {
-    id: 74308,
-    title: 'Detachment',
-    releaseDate: '2011-04-24',
-  },
-  {
-    id: 20853,
-    title: 'Detective Story',
-    releaseDate: '1951-10-24',
-  },
-  {
-    id: 20367,
-    title: 'Detour',
-    releaseDate: '1945-11-30',
-  },
-  {
-    id: 407448,
-    title: 'Detroit',
-    releaseDate: '2017-07-28',
-  },
-  {
-    id: 1997,
-    title: 'Two Brothers',
-    releaseDate: '2004-04-07',
-  },
-  {
-    id: 653851,
-    title: 'Devotion',
-    releaseDate: '2022-11-23',
-  },
-  {
-    id: 1127110,
-    title: 'Diablo',
-    releaseDate: '2025-06-13',
-  },
-  {
-    id: 521,
-    title: 'Dial M for Murder',
-    releaseDate: '1954-05-29',
-  },
-  {
-    id: 562,
-    title: 'Die Hard',
-    releaseDate: '1988-07-15',
-  },
-  {
-    id: 1572,
-    title: 'Die Hard: With a Vengeance',
-    releaseDate: '1995-05-19',
-  },
-  {
-    id: 6166,
-    title: 'Dinner for One',
-    releaseDate: '1963-06-08',
-  },
-  {
-    id: 653664,
-    title: 'Dinner in America',
-    releaseDate: '2020-05-27',
-  },
-  {
-    id: 88,
-    title: 'Dirty Dancing',
-    releaseDate: '1987-08-21',
-  },
-  {
-    id: 984,
-    title: 'Dirty Harry',
-    releaseDate: '1971-12-23',
-  },
-  {
-    id: 10141,
-    title: 'Dirty Rotten Scoundrels',
-    releaseDate: '1988-12-14',
-  },
-  {
-    id: 159004,
-    title: 'Dirty Wars',
-    releaseDate: '2013-01-18',
-  },
-  {
-    id: 127517,
-    title: 'Disconnect',
-    releaseDate: '2013-04-12',
-  },
-  {
-    id: 17654,
-    title: 'District 9',
-    releaseDate: '2009-08-05',
-  },
-  {
-    id: 68718,
-    title: 'Django Unchained',
-    releaseDate: '2012-12-25',
-  },
-  {
-    id: 925,
-    title: 'Do the Right Thing',
-    releaseDate: '1989-06-14',
-  },
-  {
-    id: 501170,
-    title: 'Doctor Sleep',
-    releaseDate: '2019-10-30',
-  },
-  {
-    id: 284052,
-    title: 'Doctor Strange',
-    releaseDate: '2016-10-25',
-  },
-  {
-    id: 453395,
-    title: 'Doctor Strange in the Multiverse of Madness',
-    releaseDate: '2022-05-04',
-  },
-  {
-    id: 315620,
-    title: 'Doctor Who: A Christmas Carol',
-    releaseDate: '2010-12-25',
-  },
-  {
-    id: 317182,
-    title: 'Doctor Who: Last Christmas',
-    releaseDate: '2014-12-25',
-  },
-  {
-    id: 282963,
-    title: 'Doctor Who: Planet of the Dead',
-    releaseDate: '2009-04-11',
-  },
-  {
-    id: 313106,
-    title: 'Doctor Who: The Day of the Doctor',
-    releaseDate: '2013-11-23',
-  },
-  {
-    id: 371759,
-    title: 'Doctor Who: The Husbands of River Song',
-    releaseDate: '2015-12-25',
-  },
-  {
-    id: 317190,
-    title: 'Doctor Who: The Next Doctor',
-    releaseDate: '2008-12-25',
-  },
-  {
-    id: 282758,
-    title: 'Doctor Who: The Runaway Bride',
-    releaseDate: '2006-12-25',
-  },
-  {
-    id: 369145,
-    title: 'Doctor Who: The Snowmen',
-    releaseDate: '2012-12-25',
-  },
-  {
-    id: 282848,
-    title: 'Doctor Who: The Time of the Doctor',
-    releaseDate: '2013-12-25',
-  },
-  {
-    id: 281979,
-    title: 'Doctor Who: The Waters of Mars',
-    releaseDate: '2009-11-15',
-  },
-  {
-    id: 335209,
-    title: 'Doctor Who: Voyage of the Damned',
-    releaseDate: '2007-12-25',
-  },
-  {
-    id: 907,
-    title: 'Doctor Zhivago',
-    releaseDate: '1965-12-22',
-  },
-  {
-    id: 626735,
-    title: 'Dog',
-    releaseDate: '2022-02-17',
-  },
-  {
-    id: 968,
-    title: 'Dog Day Afternoon',
-    releaseDate: '1975-09-21',
-  },
-  {
-    id: 774370,
-    title: 'Dog Man',
-    releaseDate: '2025-01-24',
-  },
-  {
-    id: 43920,
-    title: 'Dog Pound',
-    releaseDate: '2010-04-24',
-  },
-  {
-    id: 1282,
-    title: 'Dogtown and Z-Boys',
-    releaseDate: '2002-05-10',
-  },
-  {
-    id: 553,
-    title: 'Dogville',
-    releaseDate: '2003-05-21',
-  },
-  {
-    id: 11929,
-    title: 'Dolores Claiborne',
-    releaseDate: '1995-03-24',
-  },
-  {
-    id: 10607,
-    title:
-      "Don't Be a Menace to South Central While Drinking Your Juice in the Hood",
-    releaseDate: '1996-01-12',
-  },
-  {
-    id: 300669,
-    title: "Don't Breathe",
-    releaseDate: '2016-06-08',
-  },
-  {
-    id: 482373,
-    title: "Don't Breathe 2",
-    releaseDate: '2021-08-12',
-  },
-  {
-    id: 127144,
-    title: "Don't Hug Me I'm Scared",
-    releaseDate: '2012-10-24',
-  },
-  {
-    id: 646380,
-    title: "Don't Look Up",
-    releaseDate: '2021-12-08',
-  },
-  {
-    id: 9366,
-    title: 'Donnie Brasco',
-    releaseDate: '1997-02-27',
-  },
-  {
-    id: 141,
-    title: 'Donnie Darko',
-    releaseDate: '2001-01-19',
-  },
-  {
-    id: 135,
-    title: 'Dont Look Back',
-    releaseDate: '1967-05-17',
-  },
-  {
-    id: 308639,
-    title: 'Dope',
-    releaseDate: '2015-06-19',
-  },
-  {
-    id: 996,
-    title: 'Double Indemnity',
-    releaseDate: '1944-07-06',
-  },
-  {
-    id: 14359,
-    title: 'Doubt',
-    releaseDate: '2008-12-12',
-  },
-  {
-    id: 1554,
-    title: 'Down by Law',
-    releaseDate: '1986-09-20',
-  },
-  {
-    id: 913862,
-    title: 'Downfall: The Case Against Boeing',
-    releaseDate: '2022-02-09',
-  },
-  {
-    id: 535544,
-    title: 'Downton Abbey',
-    releaseDate: '2019-09-12',
-  },
-  {
-    id: 820446,
-    title: 'Downton Abbey: A New Era',
-    releaseDate: '2022-04-27',
-  },
-  {
-    id: 1289936,
-    title: 'Downton Abbey: The Grand Finale',
-    releaseDate: '2025-09-10',
-  },
-  {
-    id: 3019,
-    title: 'Dr. Jekyll and Mr. Hyde',
-    releaseDate: '1931-12-24',
-  },
-  {
-    id: 935,
-    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    releaseDate: '1964-01-29',
-  },
-  {
-    id: 11868,
-    title: 'Dracula',
-    releaseDate: '1958-04-21',
-  },
-  {
-    id: 138,
-    title: 'Dracula',
-    releaseDate: '1931-02-12',
-  },
-  {
-    id: 523366,
-    title: 'Dragon Rider',
-    releaseDate: '2020-10-13',
-  },
-  {
-    id: 298115,
-    title: 'Dragons: Dawn of the Dragon Racers',
-    releaseDate: '2014-11-01',
-  },
-  {
-    id: 91417,
-    title: 'Dragons: Gift of the Night Fury',
-    releaseDate: '2011-11-15',
-  },
-  {
-    id: 43960,
-    title: 'Drake & Josh Go Hollywood',
-    releaseDate: '2006-01-06',
-  },
-  {
-    id: 12920,
-    title: 'Dreamer: Inspired By a True Story',
-    releaseDate: '2005-09-10',
-  },
-  {
-    id: 64690,
-    title: 'Drive',
-    releaseDate: '2011-09-15',
-  },
-  {
-    id: 403,
-    title: 'Driving Miss Daisy',
-    releaseDate: '1989-12-13',
-  },
-  {
-    id: 27362,
-    title: 'Drowning by Numbers',
-    releaseDate: '1988-09-10',
-  },
-  {
-    id: 476,
-    title: 'Drugstore Cowboy',
-    releaseDate: '1989-10-20',
-  },
-  {
-    id: 53210,
-    title: 'Duck Amuck',
-    releaseDate: '1953-02-28',
-  },
-  {
-    id: 67409,
-    title: 'Duck Dodgers in the 24½th Century',
-    releaseDate: '1953-07-25',
-  },
-  {
-    id: 3063,
-    title: 'Duck Soup',
-    releaseDate: '1933-11-12',
-  },
-  {
-    id: 839,
-    title: 'Duel',
-    releaseDate: '1971-11-13',
-  },
-  {
-    id: 15907,
-    title: 'Duma',
-    releaseDate: '2005-04-22',
-  },
-  {
-    id: 438631,
-    title: 'Dune',
-    releaseDate: '2021-09-15',
-  },
-  {
-    id: 693134,
-    title: 'Dune: Part Two',
-    releaseDate: '2024-02-27',
-  },
-  {
-    id: 493529,
-    title: 'Dungeons & Dragons: Honor Among Thieves',
-    releaseDate: '2023-03-23',
-  },
-  {
-    id: 374720,
-    title: 'Dunkirk',
-    releaseDate: '2017-07-19',
-  },
-  {
-    id: 1158915,
-    title: 'Dìdi (弟弟)',
-    releaseDate: '2024-07-26',
-  },
-  {
-    id: 601,
-    title: 'E.T. the Extra-Terrestrial',
-    releaseDate: '1982-06-11',
-  },
-  {
-    id: 10946,
-    title: 'Earth',
-    releaseDate: '2007-10-10',
-  },
-  {
-    id: 464593,
-    title: 'Earth: One Amazing Day',
-    releaseDate: '2017-08-04',
-  },
-  {
-    id: 30238,
-    title: 'Earthlings',
-    releaseDate: '2005-09-24',
-  },
-  {
-    id: 220,
-    title: 'East of Eden',
-    releaseDate: '1955-04-10',
-  },
-  {
-    id: 2252,
-    title: 'Eastern Promises',
-    releaseDate: '2007-09-14',
-  },
-  {
-    id: 624,
-    title: 'Easy Rider',
-    releaseDate: '1969-06-26',
-  },
-  {
-    id: 47650,
-    title: 'Easy Street',
-    releaseDate: '1917-01-22',
-  },
-  {
-    id: 522,
-    title: 'Ed Wood',
-    releaseDate: '1994-09-28',
-  },
-  {
-    id: 17159,
-    title: 'Eddie Murphy Raw',
-    releaseDate: '1987-11-25',
-  },
-  {
-    id: 15251,
-    title: 'Eddie Murphy: Delirious',
-    releaseDate: '1983-10-15',
-  },
-  {
-    id: 319888,
-    title: 'Eddie the Eagle',
-    releaseDate: '2016-02-25',
-  },
-  {
-    id: 137113,
-    title: 'Edge of Tomorrow',
-    releaseDate: '2014-05-27',
-  },
-  {
-    id: 162,
-    title: 'Edward Scissorhands',
-    releaseDate: '1990-12-07',
-  },
-  {
-    id: 9036,
-    title: 'Eight Below',
-    releaseDate: '2006-02-17',
-  },
-  {
-    id: 489925,
-    title: 'Eighth Grade',
-    releaseDate: '2018-01-19',
-  },
-  {
-    id: 559969,
-    title: 'El Camino: A Breaking Bad Movie',
-    releaseDate: '2019-10-11',
-  },
-  {
-    id: 6644,
-    title: 'El Dorado',
-    releaseDate: '1966-12-17',
-  },
-  {
-    id: 282041,
-    title: 'Electric Boogaloo: The Wild, Untold Story of Cannon Films',
-    releaseDate: '2014-10-06',
-  },
-  {
-    id: 976573,
-    title: 'Elemental',
-    releaseDate: '2023-06-14',
-  },
-  {
-    id: 1807,
-    title: 'Elephant',
-    releaseDate: '2003-09-20',
-  },
-  {
-    id: 4518,
-    title: 'Elizabeth',
-    releaseDate: '1998-09-13',
-  },
-  {
-    id: 22013,
-    title: 'Elmer Gantry',
-    releaseDate: '1960-07-07',
-  },
-  {
-    id: 614934,
-    title: 'Elvis',
-    releaseDate: '2022-06-22',
-  },
-  {
-    id: 715931,
-    title: 'Emancipation',
-    releaseDate: '2022-12-02',
-  },
-  {
-    id: 556678,
-    title: 'Emma.',
-    releaseDate: '2020-02-13',
-  },
-  {
-    id: 76180,
-    title: 'Empire of Dreams: The Story of the Star Wars Trilogy',
-    releaseDate: '2004-09-20',
-  },
-  {
-    id: 10110,
-    title: 'Empire of the Sun',
-    releaseDate: '1987-12-09',
-  },
-  {
-    id: 568124,
-    title: 'Encanto',
-    releaseDate: '2021-10-13',
-  },
-  {
-    id: 1041513,
-    title: 'Encanto at the Hollywood Bowl',
-    releaseDate: '2022-12-27',
-  },
-  {
-    id: 12172,
-    title: 'Encounters at the End of the World',
-    releaseDate: '2007-09-01',
-  },
-  {
-    id: 77016,
-    title: 'End of Watch',
-    releaseDate: '2012-09-20',
-  },
-  {
-    id: 853,
-    title: 'Enemy at the Gates',
-    releaseDate: '2001-02-28',
-  },
-  {
-    id: 9798,
-    title: 'Enemy of the State',
-    releaseDate: '1998-11-20',
-  },
-  {
-    id: 497582,
-    title: 'Enola Holmes',
-    releaseDate: '2020-09-23',
-  },
-  {
-    id: 829280,
-    title: 'Enola Holmes 2',
-    releaseDate: '2022-11-30',
-  },
-  {
-    id: 13020,
-    title: 'Enron: The Smartest Guys in the Room',
-    releaseDate: '2005-04-22',
-  },
-  {
-    id: 9461,
-    title: 'Enter the Dragon',
-    releaseDate: '1973-08-17',
-  },
-  {
-    id: 34647,
-    title: 'Enter the Void',
-    releaseDate: '2010-05-05',
-  },
-  {
-    id: 1027014,
-    title: 'Entergalactic',
-    releaseDate: '2022-09-28',
-  },
-  {
-    id: 7299,
-    title: 'Equilibrium',
-    releaseDate: '2002-12-06',
-  },
-  {
-    id: 985,
-    title: 'Eraserhead',
-    releaseDate: '1977-09-28',
-  },
-  {
-    id: 462,
-    title: 'Erin Brockovich',
-    releaseDate: '2000-03-17',
-  },
-  {
-    id: 10734,
-    title: 'Escape from Alcatraz',
-    releaseDate: '1979-06-22',
-  },
-  {
-    id: 1103,
-    title: 'Escape from New York',
-    releaseDate: '1981-05-23',
-  },
-  {
-    id: 502425,
-    title: 'Escape from Pretoria',
-    releaseDate: '2020-03-06',
-  },
-  {
-    id: 25318,
-    title: 'Escape from Sobibor',
-    releaseDate: '1987-04-12',
-  },
-  {
-    id: 38,
-    title: 'Eternal Sunshine of the Spotless Mind',
-    releaseDate: '2004-03-19',
-  },
-  {
-    id: 1259102,
-    title: 'Eternity',
-    releaseDate: '2025-11-26',
-  },
-  {
-    id: 9454,
-    title: 'EverAfter',
-    releaseDate: '1998-07-31',
-  },
-  {
-    id: 465136,
-    title: 'Every Day',
-    releaseDate: '2018-02-22',
-  },
-  {
-    id: 576712,
-    title: "Everybody's Everything",
-    releaseDate: '2019-11-12',
-  },
-  {
-    id: 545611,
-    title: 'Everything Everywhere All at Once',
-    releaseDate: '2022-03-24',
-  },
-  {
-    id: 340,
-    title: 'Everything Is Illuminated',
-    releaseDate: '2005-09-05',
-  },
-  {
-    id: 417678,
-    title: 'Everything, Everything',
-    releaseDate: '2017-05-18',
-  },
-  {
-    id: 765,
-    title: 'Evil Dead II',
-    releaseDate: '1987-03-13',
-  },
-  {
-    id: 264660,
-    title: 'Ex Machina',
-    releaseDate: '2015-01-21',
-  },
-  {
-    id: 39452,
-    title: 'Exit Through the Gift Shop',
-    releaseDate: '2010-03-05',
-  },
-  {
-    id: 545609,
-    title: 'Extraction',
-    releaseDate: '2020-04-23',
-  },
-  {
-    id: 697843,
-    title: 'Extraction 2',
-    releaseDate: '2023-06-09',
-  },
-  {
-    id: 333352,
-    title: 'Eye in the Sky',
-    releaseDate: '2015-09-07',
-  },
-  {
-    id: 345,
-    title: 'Eyes Wide Shut',
-    releaseDate: '1999-07-16',
-  },
-  {
-    id: 911430,
-    title: 'F1',
-    releaseDate: '2025-06-25',
-  },
-  {
-    id: 385128,
-    title: 'F9',
-    releaseDate: '2021-05-19',
-  },
-  {
-    id: 754,
-    title: 'Face/Off',
-    releaseDate: '1997-06-27',
-  },
-  {
-    id: 753,
-    title: 'Faces',
-    releaseDate: '1968-11-24',
-  },
-  {
-    id: 18925,
-    title: 'Facing the Giants',
-    releaseDate: '2006-09-29',
-  },
-  {
-    id: 532908,
-    title: 'Fahrenheit 11/9',
-    releaseDate: '2018-09-10',
-  },
-  {
-    id: 1714,
-    title: 'Fahrenheit 451',
-    releaseDate: '1966-09-07',
-  },
-  {
-    id: 1777,
-    title: 'Fahrenheit 9/11',
-    releaseDate: '2004-06-25',
-  },
-  {
-    id: 502,
-    title: 'Fail Safe',
-    releaseDate: '1964-10-07',
-  },
-  {
-    id: 985939,
-    title: 'Fall',
-    releaseDate: '2022-08-11',
-  },
-  {
-    id: 37094,
-    title: 'Falling Down',
-    releaseDate: '1993-02-26',
-  },
-  {
-    id: 625651,
-    title: 'Family Guy Presents: Something, Something, Something, Dark Side',
-    releaseDate: '2009-12-22',
-  },
-  {
-    id: 756,
-    title: 'Fantasia',
-    releaseDate: '1940-11-13',
-  },
-  {
-    id: 259316,
-    title: 'Fantastic Beasts and Where to Find Them',
-    releaseDate: '2016-11-16',
-  },
-  {
-    id: 612654,
-    title: 'Fantastic Fungi',
-    releaseDate: '2019-08-30',
-  },
-  {
-    id: 10315,
-    title: 'Fantastic Mr. Fox',
-    releaseDate: '2009-10-14',
-  },
-  {
-    id: 10712,
-    title: 'Far from Heaven',
-    releaseDate: '2002-11-08',
-  },
-  {
-    id: 250734,
-    title: 'Far from the Madding Crowd',
-    releaseDate: '2015-04-23',
-  },
-  {
-    id: 831827,
-    title: 'Far from the Tree',
-    releaseDate: '2021-11-24',
-  },
-  {
-    id: 275,
-    title: 'Fargo',
-    releaseDate: '1996-03-08',
-  },
-  {
-    id: 51497,
-    title: 'Fast Five',
-    releaseDate: '2011-04-20',
-  },
-  {
-    id: 385687,
-    title: 'Fast X',
-    releaseDate: '2023-05-17',
-  },
-  {
-    id: 16993,
-    title: 'Fat City',
-    releaseDate: '1972-07-26',
-  },
-  {
-    id: 30295,
-    title: 'Father Goose',
-    releaseDate: '1964-12-10',
-  },
-  {
-    id: 809140,
-    title: 'Father Stu',
-    releaseDate: '2022-04-13',
-  },
-  {
-    id: 607259,
-    title: 'Fatherhood',
-    releaseDate: '2021-06-18',
-  },
-  {
-    id: 254172,
-    title: 'Fathers and Daughters',
-    releaseDate: '2015-10-01',
-  },
-  {
-    id: 520318,
-    title: 'Fatima',
-    releaseDate: '2020-08-13',
-  },
-  {
-    id: 1878,
-    title: 'Fear and Loathing in Las Vegas',
-    releaseDate: '1998-05-22',
-  },
-  {
-    id: 591275,
-    title: 'Fear Street: 1666',
-    releaseDate: '2021-07-14',
-  },
-  {
-    id: 591274,
-    title: 'Fear Street: 1978',
-    releaseDate: '2021-07-08',
-  },
-  {
-    id: 293299,
-    title: 'Feast',
-    releaseDate: '2014-10-25',
-  },
-  {
-    id: 250657,
-    title: 'Fed Up',
-    releaseDate: '2014-05-09',
-  },
-  {
-    id: 707886,
-    title: 'Feel the Beat',
-    releaseDate: '2020-06-19',
-  },
-  {
-    id: 13012,
-    title: 'Felon',
-    releaseDate: '2008-07-17',
-  },
-  {
-    id: 364689,
-    title: 'Ferdinand',
-    releaseDate: '2017-12-09',
-  },
-  {
-    id: 9377,
-    title: "Ferris Bueller's Day Off",
-    releaseDate: '1986-06-11',
-  },
-  {
-    id: 14811,
-    title: 'Fiddler on the Roof',
-    releaseDate: '1971-11-03',
-  },
-  {
-    id: 2323,
-    title: 'Field of Dreams',
-    releaseDate: '1989-04-21',
-  },
-  {
-    id: 550,
-    title: 'Fight Club',
-    releaseDate: '1999-10-15',
-  },
-  {
-    id: 574475,
-    title: 'Final Destination Bloodlines',
-    releaseDate: '2025-05-14',
-  },
-  {
-    id: 522402,
-    title: 'Finch',
-    releaseDate: '2021-11-04',
-  },
-  {
-    id: 127380,
-    title: 'Finding Dory',
-    releaseDate: '2016-06-16',
-  },
-  {
-    id: 711,
-    title: 'Finding Forrester',
-    releaseDate: '2000-12-21',
-  },
-  {
-    id: 12,
-    title: 'Finding Nemo',
-    releaseDate: '2003-05-30',
-  },
-  {
-    id: 866,
-    title: 'Finding Neverland',
-    releaseDate: '2004-10-29',
-  },
-  {
-    id: 169607,
-    title: 'Finding Vivian Maier',
-    releaseDate: '2014-03-21',
-  },
-  {
-    id: 426030,
-    title: 'Finding Your Feet',
-    releaseDate: '2017-12-26',
-  },
-  {
-    id: 913823,
-    title: 'Fire of Love',
-    releaseDate: '2022-07-06',
-  },
-  {
-    id: 797838,
-    title: 'Firebird',
-    releaseDate: '2021-10-29',
-  },
-  {
-    id: 50337,
-    title: 'Firebreather',
-    releaseDate: '2010-11-24',
-  },
-  {
-    id: 778810,
-    title: 'Fireheart',
-    releaseDate: '2022-01-16',
-  },
-  {
-    id: 14438,
-    title: 'Fireproof',
-    releaseDate: '2008-09-26',
-  },
-  {
-    id: 1368,
-    title: 'First Blood',
-    releaseDate: '1982-10-22',
-  },
-  {
-    id: 558582,
-    title: 'First Cow',
-    releaseDate: '2020-03-06',
-  },
-  {
-    id: 369972,
-    title: 'First Man',
-    releaseDate: '2018-10-10',
-  },
-  {
-    id: 433247,
-    title: 'First They Killed My Father',
-    releaseDate: '2017-02-18',
-  },
-  {
-    id: 26617,
-    title: 'Five Easy Pieces',
-    releaseDate: '1970-09-12',
-  },
-  {
-    id: 527641,
-    title: 'Five Feet Apart',
-    releaseDate: '2019-03-14',
-  },
-  {
-    id: 507089,
-    title: "Five Nights at Freddy's",
-    releaseDate: '2023-10-25',
-  },
-  {
-    id: 626332,
-    title: "Flamin' Hot",
-    releaseDate: '2023-03-11',
-  },
-  {
-    id: 43949,
-    title: 'Flipped',
-    releaseDate: '2010-08-06',
-  },
-  {
-    id: 574093,
-    title: 'Float',
-    releaseDate: '2019-11-12',
-  },
-  {
-    id: 21183,
-    title: 'Fluke',
-    releaseDate: '1995-06-02',
-  },
-  {
-    id: 768141,
-    title: 'Folklore: The Long Pond Studio Sessions',
-    releaseDate: '2020-11-25',
-  },
-  {
-    id: 11660,
-    title: 'Following',
-    releaseDate: '1999-05-06',
-  },
-  {
-    id: 18570,
-    title: 'Food, Inc.',
-    releaseDate: '2008-09-07',
-  },
-  {
-    id: 20423,
-    title: 'For All Mankind',
-    releaseDate: '1989-11-01',
-  },
-  {
-    id: 576017,
-    title: 'For Sama',
-    releaseDate: '2019-07-26',
-  },
-  {
-    id: 13930,
-    title: 'For the Birds',
-    releaseDate: '2000-11-02',
-  },
-  {
-    id: 338544,
-    title: 'For the Love of Spock',
-    releaseDate: '2016-09-09',
-  },
-  {
-    id: 830,
-    title: 'Forbidden Planet',
-    releaseDate: '1956-03-02',
-  },
-  {
-    id: 359724,
-    title: 'Ford v Ferrari',
-    releaseDate: '2019-11-13',
-  },
-  {
-    id: 417261,
-    title: 'Forever My Girl',
-    releaseDate: '2018-01-26',
-  },
-  {
-    id: 31451,
-    title: 'Forever Strong',
-    releaseDate: '2008-09-26',
-  },
-  {
-    id: 64288,
-    title: 'Forks Over Knives',
-    releaseDate: '2011-05-06',
-  },
-  {
-    id: 13,
-    title: 'Forrest Gump',
-    releaseDate: '1994-06-23',
-  },
-  {
-    id: 37347,
-    title: 'Fort Apache',
-    releaseDate: '1948-05-21',
-  },
-  {
-    id: 6145,
-    title: 'Fracture',
-    releaseDate: '2007-04-19',
-  },
-  {
-    id: 121986,
-    title: 'Frances Ha',
-    releaseDate: '2013-05-17',
-  },
-  {
-    id: 1062722,
-    title: 'Frankenstein',
-    releaseDate: '2025-10-17',
-  },
-  {
-    id: 3035,
-    title: 'Frankenstein',
-    releaseDate: '1931-11-21',
-  },
-  {
-    id: 136,
-    title: 'Freaks',
-    releaseDate: '1932-01-01',
-  },
-  {
-    id: 550988,
-    title: 'Free Guy',
-    releaseDate: '2021-08-11',
-  },
-  {
-    id: 515042,
-    title: 'Free Solo',
-    releaseDate: '2018-09-28',
-  },
-  {
-    id: 1646,
-    title: 'Freedom Writers',
-    releaseDate: '2007-01-05',
-  },
-  {
-    id: 306745,
-    title: 'Freeheld',
-    releaseDate: '2015-10-02',
-  },
-  {
-    id: 573,
-    title: 'Frenzy',
-    releaseDate: '1972-05-25',
-  },
-  {
-    id: 10559,
-    title: 'Frequency',
-    releaseDate: '2000-04-28',
-  },
-  {
-    id: 13815,
-    title: 'Fresh',
-    releaseDate: '1994-06-15',
-  },
-  {
-    id: 1360,
-    title: 'Frida',
-    releaseDate: '2002-08-29',
-  },
-  {
-    id: 10634,
-    title: 'Friday',
-    releaseDate: '1995-04-26',
-  },
-  {
-    id: 1633,
-    title: 'Fried Green Tomatoes',
-    releaseDate: '1991-12-27',
-  },
-  {
-    id: 691179,
-    title: 'Friends: The Reunion',
-    releaseDate: '2021-05-27',
-  },
-  {
-    id: 11797,
-    title: 'Fright Night',
-    releaseDate: '1985-08-02',
-  },
-  {
-    id: 755,
-    title: 'From Dusk Till Dawn',
-    releaseDate: '1996-01-19',
-  },
-  {
-    id: 11426,
-    title: 'From Here to Eternity',
-    releaseDate: '1953-08-28',
-  },
-  {
-    id: 657,
-    title: 'From Russia with Love',
-    releaseDate: '1963-10-10',
-  },
-  {
-    id: 63193,
-    title: 'Front of the Class',
-    releaseDate: '2008-12-07',
-  },
-  {
-    id: 11499,
-    title: 'Frost/Nixon',
-    releaseDate: '2008-10-15',
-  },
-  {
-    id: 109445,
-    title: 'Frozen',
-    releaseDate: '2013-11-20',
-  },
-  {
-    id: 330457,
-    title: 'Frozen II',
-    releaseDate: '2019-11-20',
-  },
-  {
-    id: 157354,
-    title: 'Fruitvale Station',
-    releaseDate: '2013-07-26',
-  },
-  {
-    id: 600,
-    title: 'Full Metal Jacket',
-    releaseDate: '1987-06-26',
-  },
-  {
-    id: 298582,
-    title: 'Full Out',
-    releaseDate: '2015-09-11',
-  },
-  {
-    id: 16085,
-    title: 'Funny Girl',
-    releaseDate: '1968-09-19',
-  },
-  {
-    id: 786892,
-    title: 'Furiosa: A Mad Max Saga',
-    releaseDate: '2024-05-22',
-  },
-  {
-    id: 168259,
-    title: 'Furious 7',
-    releaseDate: '2015-04-01',
-  },
-  {
-    id: 228150,
-    title: 'Fury',
-    releaseDate: '2014-10-15',
-  },
-  {
-    id: 14615,
-    title: 'Fury',
-    releaseDate: '1936-06-05',
-  },
-  {
-    id: 7249,
-    title: "Futurama: Bender's Big Score",
-    releaseDate: '2007-11-27',
-  },
-  {
-    id: 15060,
-    title: 'Futurama: Into the Wild Green Yonder',
-    releaseDate: '2009-02-06',
-  },
-  {
-    id: 656968,
-    title: "FX's A Christmas Carol",
-    releaseDate: '2019-12-19',
-  },
-  {
-    id: 696374,
-    title: "Gabriel's Inferno",
-    releaseDate: '2020-05-29',
-  },
-  {
-    id: 724089,
-    title: "Gabriel's Inferno: Part II",
-    releaseDate: '2020-07-31',
-  },
-  {
-    id: 761053,
-    title: "Gabriel's Inferno: Part III",
-    releaseDate: '2020-11-19',
-  },
-  {
-    id: 850356,
-    title: "Gabriel's Rapture: Part I",
-    releaseDate: '2021-11-24',
-  },
-  {
-    id: 472424,
-    title: 'Gaga: Five Foot Two',
-    releaseDate: '2017-09-21',
-  },
-  {
-    id: 926,
-    title: 'Galaxy Quest',
-    releaseDate: '1999-12-25',
-  },
-  {
-    id: 11646,
-    title: 'Gallipoli',
-    releaseDate: '1981-08-13',
-  },
-  {
-    id: 591278,
-    title: 'Game of Thrones: The Last Watch',
-    releaseDate: '2019-05-26',
-  },
-  {
-    id: 783,
-    title: 'Gandhi',
-    releaseDate: '1982-12-01',
-  },
-  {
-    id: 3131,
-    title: 'Gangs of New York',
-    releaseDate: '2002-12-14',
-  },
-  {
-    id: 401,
-    title: 'Garden State',
-    releaseDate: '2004-07-28',
-  },
-  {
-    id: 40663,
-    title: 'Gasland',
-    releaseDate: '2010-01-24',
-  },
-  {
-    id: 13528,
-    title: 'Gaslight',
-    releaseDate: '1944-05-04',
-  },
-  {
-    id: 782,
-    title: 'Gattaca',
-    releaseDate: '1997-09-07',
-  },
-  {
-    id: 759,
-    title: 'Gentlemen Prefer Blondes',
-    releaseDate: '1953-07-14',
-  },
-  {
-    id: 13929,
-    title: "Geri's Game",
-    releaseDate: '1997-11-24',
-  },
-  {
-    id: 234567,
-    title: 'Get a Horse!',
-    releaseDate: '2013-11-27',
-  },
-  {
-    id: 419430,
-    title: 'Get Out',
-    releaseDate: '2017-02-24',
-  },
-  {
-    id: 24584,
-    title: 'Get Real',
-    releaseDate: '1998-08-16',
-  },
-  {
-    id: 251,
-    title: 'Ghost',
-    releaseDate: '1990-07-13',
-  },
-  {
-    id: 4816,
-    title: 'Ghost Dog: The Way of the Samurai',
-    releaseDate: '1999-10-06',
-  },
-  {
-    id: 1548,
-    title: 'Ghost World',
-    releaseDate: '2001-07-20',
-  },
-  {
-    id: 620,
-    title: 'Ghostbusters',
-    releaseDate: '1984-06-08',
-  },
-  {
-    id: 425909,
-    title: 'Ghostbusters: Afterlife',
-    releaseDate: '2021-11-18',
-  },
-  {
-    id: 476299,
-    title: 'Ghostland',
-    releaseDate: '2018-03-14',
-  },
-  {
-    id: 37793,
-    title: 'Ghosts',
-    releaseDate: '1997-09-04',
-  },
-  {
-    id: 14533,
-    title: 'Gia',
-    releaseDate: '1998-01-31',
-  },
-  {
-    id: 1712,
-    title: 'Giant',
-    releaseDate: '1956-11-08',
-  },
-  {
-    id: 537681,
-    title: 'Giant Little Ones',
-    releaseDate: '2019-01-03',
-  },
-  {
-    id: 400928,
-    title: 'Gifted',
-    releaseDate: '2017-04-07',
-  },
-  {
-    id: 22683,
-    title: 'Gifted Hands: The Ben Carson Story',
-    releaseDate: '2009-02-07',
-  },
-  {
-    id: 3767,
-    title: 'Gilda',
-    releaseDate: '1946-04-25',
-  },
-  {
-    id: 132,
-    title: 'Gimme Shelter',
-    releaseDate: '1970-12-13',
-  },
-  {
-    id: 801335,
-    title: 'Girl in the Basement',
-    releaseDate: '2021-02-27',
-  },
-  {
-    id: 988046,
-    title: 'Girl in the Picture',
-    releaseDate: '2022-07-06',
-  },
-  {
-    id: 3558,
-    title: 'Girl, Interrupted',
-    releaseDate: '1999-12-21',
-  },
-  {
-    id: 16219,
-    title: 'Gladiator',
-    releaseDate: '1992-03-06',
-  },
-  {
-    id: 98,
-    title: 'Gladiator',
-    releaseDate: '2000-05-04',
-  },
-  {
-    id: 661374,
-    title: 'Glass Onion: A Knives Out Mystery',
-    releaseDate: '2022-11-23',
-  },
-  {
-    id: 67675,
-    title: 'Glee: The Concert Movie',
-    releaseDate: '2011-08-11',
-  },
-  {
-    id: 9504,
-    title: 'Glengarry Glen Ross',
-    releaseDate: '1992-09-10',
-  },
-  {
-    id: 9665,
-    title: 'Glory',
-    releaseDate: '1989-12-15',
-  },
-  {
-    id: 9918,
-    title: 'Glory Road',
-    releaseDate: '2006-01-13',
-  },
-  {
-    id: 428493,
-    title: "God's Own Country",
-    releaseDate: '2017-08-31',
-  },
-  {
-    id: 399566,
-    title: 'Godzilla vs. Kong',
-    releaseDate: '2021-03-24',
-  },
-  {
-    id: 823464,
-    title: 'Godzilla x Kong: The New Empire',
-    releaseDate: '2024-03-27',
-  },
-  {
-    id: 318224,
-    title: 'Going Clear: Scientology and the Prison of Belief',
-    releaseDate: '2015-01-25',
-  },
-  {
-    id: 31511,
-    title: 'Gold Diggers of 1933',
-    releaseDate: '1933-05-27',
-  },
-  {
-    id: 658,
-    title: 'Goldfinger',
-    releaseDate: '1964-09-20',
-  },
-  {
-    id: 4771,
-    title: 'Gone Baby Gone',
-    releaseDate: '2007-09-18',
-  },
-  {
-    id: 210577,
-    title: 'Gone Girl',
-    releaseDate: '2014-10-01',
-  },
-  {
-    id: 831223,
-    title: 'Gone Mom: The Disappearance of Jennifer Dulos',
-    releaseDate: '2021-06-05',
-  },
-  {
-    id: 770,
-    title: 'Gone with the Wind',
-    releaseDate: '1939-12-15',
-  },
-  {
-    id: 1114967,
-    title: 'Good Fortune',
-    releaseDate: '2025-10-14',
-  },
-  {
-    id: 801,
-    title: 'Good Morning, Vietnam',
-    releaseDate: '1987-12-23',
-  },
-  {
-    id: 3291,
-    title: 'Good Night, and Good Luck.',
-    releaseDate: '2005-09-16',
-  },
-  {
-    id: 429200,
-    title: 'Good Time',
-    releaseDate: '2017-08-11',
-  },
-  {
-    id: 489,
-    title: 'Good Will Hunting',
-    releaseDate: '1997-12-05',
-  },
-  {
-    id: 418680,
-    title: 'Goodbye Christopher Robin',
-    releaseDate: '2017-09-29',
-  },
-  {
-    id: 769,
-    title: 'GoodFellas',
-    releaseDate: '1990-09-12',
-  },
-  {
-    id: 10130,
-    title: 'Gorillas in the Mist',
-    releaseDate: '1988-09-23',
-  },
-  {
-    id: 13223,
-    title: 'Gran Torino',
-    releaseDate: '2008-12-12',
-  },
-  {
-    id: 980489,
-    title: 'Gran Turismo',
-    releaseDate: '2023-08-09',
-  },
-  {
-    id: 20379,
-    title: 'Grand Prix',
-    releaseDate: '1966-12-21',
-  },
-  {
-    id: 49047,
-    title: 'Gravity',
-    releaseDate: '2013-10-03',
-  },
-  {
-    id: 621,
-    title: 'Grease',
-    releaseDate: '1978-06-16',
-  },
-  {
-    id: 348089,
-    title: 'Grease Live',
-    releaseDate: '2016-01-31',
-  },
-  {
-    id: 14320,
-    title: 'Great Expectations',
-    releaseDate: '1946-12-26',
-  },
-  {
-    id: 1405,
-    title: 'Greed',
-    releaseDate: '1924-12-04',
-  },
-  {
-    id: 490132,
-    title: 'Green Book',
-    releaseDate: '2018-11-16',
-  },
-  {
-    id: 8923,
-    title: 'Green Street Hooligans',
-    releaseDate: '2005-09-09',
-  },
-  {
-    id: 524047,
-    title: 'Greenland',
-    releaseDate: '2020-07-29',
-  },
-  {
-    id: 927,
-    title: 'Gremlins',
-    releaseDate: '1984-06-08',
-  },
-  {
-    id: 17346,
-    title: 'Grey Gardens',
-    releaseDate: '1976-02-19',
-  },
-  {
-    id: 516486,
-    title: 'Greyhound',
-    releaseDate: '2020-07-09',
-  },
-  {
-    id: 9766,
-    title: 'Gridiron Gang',
-    releaseDate: '2006-09-15',
-  },
-  {
-    id: 15534,
-    title: 'Griffin & Phoenix',
-    releaseDate: '2006-09-12',
-  },
-  {
-    id: 501,
-    title: 'Grizzly Man',
-    releaseDate: '2005-08-12',
-  },
-  {
-    id: 1010821,
-    title: 'Groot Takes a Bath',
-    releaseDate: '2022-08-10',
-  },
-  {
-    id: 1010818,
-    title: "Groot's First Steps",
-    releaseDate: '2022-08-10',
-  },
-  {
-    id: 1010820,
-    title: "Groot's Pursuit",
-    releaseDate: '2022-08-10',
-  },
-  {
-    id: 137,
-    title: 'Groundhog Day',
-    releaseDate: '1993-02-11',
-  },
-  {
-    id: 118340,
-    title: 'Guardians of the Galaxy',
-    releaseDate: '2014-07-30',
-  },
-  {
-    id: 283995,
-    title: 'Guardians of the Galaxy Vol. 2',
-    releaseDate: '2017-04-19',
-  },
-  {
-    id: 447365,
-    title: 'Guardians of the Galaxy Vol. 3',
-    releaseDate: '2023-05-03',
-  },
-  {
-    id: 1879,
-    title: "Guess Who's Coming to Dinner",
-    releaseDate: '1967-12-11',
-  },
-  {
-    id: 555604,
-    title: "Guillermo del Toro's Pinocchio",
-    releaseDate: '2022-11-09',
-  },
-  {
-    id: 18671,
-    title: 'Gun Crazy',
-    releaseDate: '1950-01-20',
-  },
-  {
-    id: 22201,
-    title: 'Gunfight at the O.K. Corral',
-    releaseDate: '1957-05-30',
-  },
-  {
-    id: 242575,
-    title: 'Good Day, Ramon',
-    releaseDate: '2013-10-21',
-  },
-  {
-    id: 882569,
-    title: "Guy Ritchie's The Covenant",
-    releaseDate: '2023-04-19',
-  },
-  {
-    id: 28178,
-    title: "Hachi: A Dog's Tale",
-    releaseDate: '2009-06-08',
-  },
-  {
-    id: 324786,
-    title: 'Hacksaw Ridge',
-    releaseDate: '2016-10-07',
-  },
-  {
-    id: 10654,
-    title: 'Hair',
-    releaseDate: '1979-03-15',
-  },
-  {
-    id: 589739,
-    title: 'Hair Love',
-    releaseDate: '2019-08-14',
-  },
-  {
-    id: 409447,
-    title: 'Hairspray Live!',
-    releaseDate: '2016-12-07',
-  },
-  {
-    id: 652962,
-    title: 'Half Brothers',
-    releaseDate: '2020-12-04',
-  },
-  {
-    id: 948,
-    title: 'Halloween',
-    releaseDate: '1978-10-24',
-  },
-  {
-    id: 573531,
-    title: 'Halo Legends',
-    releaseDate: '2010-02-16',
-  },
-  {
-    id: 23383,
-    title: 'Hamlet',
-    releaseDate: '1948-12-10',
-  },
-  {
-    id: 10549,
-    title: 'Hamlet',
-    releaseDate: '1996-12-25',
-  },
-  {
-    id: 412202,
-    title: 'Handsome Devil',
-    releaseDate: '2017-02-15',
-  },
-  {
-    id: 5143,
-    title: 'Hannah and Her Sisters',
-    releaseDate: '1986-02-07',
-  },
-  {
-    id: 529531,
-    title: 'Hannah Gadsby: Nanette',
-    releaseDate: '2018-06-19',
-  },
-  {
-    id: 520172,
-    title: 'Happiest Season',
-    releaseDate: '2020-11-26',
-  },
-  {
-    id: 10683,
-    title: 'Happiness',
-    releaseDate: '1998-10-11',
-  },
-  {
-    id: 721656,
-    title: 'Happy Halloween, Scooby-Doo!',
-    releaseDate: '2020-10-06',
-  },
-  {
-    id: 343,
-    title: 'Harold and Maude',
-    releaseDate: '1971-12-20',
-  },
-  {
-    id: 506528,
-    title: 'Harriet',
-    releaseDate: '2019-11-01',
-  },
-  {
-    id: 899082,
-    title: 'Harry Potter 20th Anniversary: Return to Hogwarts',
-    releaseDate: '2022-01-01',
-  },
-  {
-    id: 672,
-    title: 'Harry Potter and the Chamber of Secrets',
-    releaseDate: '2002-11-13',
-  },
-  {
-    id: 12444,
-    title: 'Harry Potter and the Deathly Hallows: Part 1',
-    releaseDate: '2010-11-17',
-  },
-  {
-    id: 12445,
-    title: 'Harry Potter and the Deathly Hallows: Part 2',
-    releaseDate: '2011-07-12',
-  },
-  {
-    id: 674,
-    title: 'Harry Potter and the Goblet of Fire',
-    releaseDate: '2005-11-16',
-  },
-  {
-    id: 767,
-    title: 'Harry Potter and the Half-Blood Prince',
-    releaseDate: '2009-07-15',
-  },
-  {
-    id: 675,
-    title: 'Harry Potter and the Order of the Phoenix',
-    releaseDate: '2007-07-08',
-  },
-  {
-    id: 671,
-    title: "Harry Potter and the Philosopher's Stone",
-    releaseDate: '2001-11-16',
-  },
-  {
-    id: 673,
-    title: 'Harry Potter and the Prisoner of Azkaban',
-    releaseDate: '2004-05-31',
-  },
-  {
-    id: 11787,
-    title: 'Harvey',
-    releaseDate: '1950-12-04',
-  },
-  {
-    id: 21131,
-    title: 'Harvie Krumpet',
-    releaseDate: '2003-10-23',
-  },
-  {
-    id: 34843,
-    title: 'Hawking',
-    releaseDate: '2004-12-10',
-  },
-  {
-    id: 4539,
-    title: "Hearts of Darkness: A Filmmaker's Apocalypse",
-    releaseDate: '1991-11-27',
-  },
-  {
-    id: 949,
-    title: 'Heat',
-    releaseDate: '1995-12-15',
-  },
-  {
-    id: 2640,
-    title: 'Heathers',
-    releaseDate: '1989-03-31',
-  },
-  {
-    id: 13403,
-    title: 'Hedwig and the Angry Inch',
-    releaseDate: '2001-07-20',
-  },
-  {
-    id: 338766,
-    title: 'Hell or High Water',
-    releaseDate: '2016-08-11',
-  },
-  {
-    id: 13348,
-    title: 'Helvetica',
-    releaseDate: '2007-09-12',
-  },
-  {
-    id: 926670,
-    title: 'Henry Danger: The Movie',
-    releaseDate: '2025-01-17',
-  },
-  {
-    id: 10705,
-    title: 'Henry V',
-    releaseDate: '1989-10-05',
-  },
-  {
-    id: 152601,
-    title: 'Her',
-    releaseDate: '2013-12-18',
-  },
-  {
-    id: 11970,
-    title: 'Hercules',
-    releaseDate: '1997-06-13',
-  },
-  {
-    id: 493922,
-    title: 'Hereditary',
-    releaseDate: '2018-06-07',
-  },
-  {
-    id: 439058,
-    title: 'Hey Arnold! The Jungle Movie',
-    releaseDate: '2018-04-26',
-  },
-  {
-    id: 381284,
-    title: 'Hidden Figures',
-    releaseDate: '2016-12-10',
-  },
-  {
-    id: 243,
-    title: 'High Fidelity',
-    releaseDate: '2000-03-17',
-  },
-  {
-    id: 288,
-    title: 'High Noon',
-    releaseDate: '1952-06-09',
-  },
-  {
-    id: 11901,
-    title: 'High Plains Drifter',
-    releaseDate: '1973-04-19',
-  },
-  {
-    id: 27725,
-    title: 'High Sierra',
-    releaseDate: '1941-01-23',
-  },
-  {
-    id: 382399,
-    title: 'High Strung',
-    releaseDate: '2016-04-08',
-  },
-  {
-    id: 540158,
-    title: 'High Strung Free Dance',
-    releaseDate: '2018-09-13',
-  },
-  {
-    id: 789708,
-    title: 'Hilda and the Mountain King',
-    releaseDate: '2021-12-30',
-  },
-  {
-    id: 3085,
-    title: 'His Girl Friday',
-    releaseDate: '1940-01-18',
-  },
-  {
-    id: 339751,
-    title: 'Hitchcock/Truffaut',
-    releaseDate: '2015-09-05',
-  },
-  {
-    id: 16410,
-    title: "Hobson's Choice",
-    releaseDate: '1954-04-19',
-  },
-  {
-    id: 10439,
-    title: 'Hocus Pocus',
-    releaseDate: '1993-07-16',
-  },
-  {
-    id: 642885,
-    title: 'Hocus Pocus 2',
-    releaseDate: '2022-09-27',
-  },
-  {
-    id: 337960,
-    title: 'Holding the Man',
-    releaseDate: '2015-08-27',
-  },
-  {
-    id: 16274,
-    title: 'Holiday',
-    releaseDate: '1938-05-26',
-  },
-  {
-    id: 13485,
-    title: 'Holiday Inn',
-    releaseDate: '1942-07-10',
-  },
-  {
-    id: 27945,
-    title: 'Hombre',
-    releaseDate: '1967-03-21',
-  },
-  {
-    id: 771,
-    title: 'Home Alone',
-    releaseDate: '1990-11-16',
-  },
-  {
-    id: 593691,
-    title: 'HOMECOMING: A film by Beyoncé',
-    releaseDate: '2019-04-16',
-  },
-  {
-    id: 512263,
-    title: 'Honey Boy',
-    releaseDate: '2019-09-28',
-  },
-  {
-    id: 929170,
-    title: 'Honor Society',
-    releaseDate: '2022-07-23',
-  },
-  {
-    id: 14275,
-    title: 'Hoop Dreams',
-    releaseDate: '1994-09-12',
-  },
-  {
-    id: 5693,
-    title: 'Hoosiers',
-    releaseDate: '1986-11-14',
-  },
-  {
-    id: 4638,
-    title: 'Hot Fuzz',
-    releaseDate: '2007-02-14',
-  },
-  {
-    id: 416144,
-    title: 'Hotel Mumbai',
-    releaseDate: '2019-03-14',
-  },
-  {
-    id: 205,
-    title: 'Hotel Rwanda',
-    releaseDate: '2004-12-22',
-  },
-  {
-    id: 585083,
-    title: 'Hotel Transylvania: Transformania',
-    releaseDate: '2022-01-31',
-  },
-  {
-    id: 11093,
-    title: 'House of Sand and Fog',
-    releaseDate: '2003-12-19',
-  },
-  {
-    id: 43266,
-    title: 'How Green Was My Valley',
-    releaseDate: '1941-10-28',
-  },
-  {
-    id: 13377,
-    title: 'How the Grinch Stole Christmas!',
-    releaseDate: '1966-12-18',
-  },
-  {
-    id: 3001,
-    title: 'How to Steal a Million',
-    releaseDate: '1966-07-13',
-  },
-  {
-    id: 1087192,
-    title: 'How to Train Your Dragon',
-    releaseDate: '2025-06-06',
-  },
-  {
-    id: 10191,
-    title: 'How to Train Your Dragon',
-    releaseDate: '2010-03-18',
-  },
-  {
-    id: 82702,
-    title: 'How to Train Your Dragon 2',
-    releaseDate: '2014-06-05',
-  },
-  {
-    id: 638507,
-    title: 'How to Train Your Dragon: Homecoming',
-    releaseDate: '2019-12-03',
-  },
-  {
-    id: 166428,
-    title: 'How to Train Your Dragon: The Hidden World',
-    releaseDate: '2019-01-03',
-  },
-  {
-    id: 24748,
-    title: 'Hud',
-    releaseDate: '1963-05-28',
-  },
-  {
-    id: 44826,
-    title: 'Hugo',
-    releaseDate: '2011-11-22',
-  },
-  {
-    id: 15257,
-    title: 'Hulk vs. Wolverine',
-    releaseDate: '2009-01-27',
-  },
-  {
-    id: 1019939,
-    title: 'Hundreds of Beavers',
-    releaseDate: '2024-01-26',
-  },
-  {
-    id: 10360,
-    title: 'Hunger',
-    releaseDate: '2008-05-15',
-  },
-  {
-    id: 371645,
-    title: 'Hunt for the Wilderpeople',
-    releaseDate: '2016-01-22',
-  },
-  {
-    id: 10299,
-    title: 'Hush... Hush, Sweet Charlotte',
-    releaseDate: '1964-12-16',
-  },
-  {
-    id: 705861,
-    title: 'Hustle',
-    releaseDate: '2022-06-03',
-  },
-  {
-    id: 10476,
-    title: 'Hustle & Flow',
-    releaseDate: '2005-07-22',
-  },
-  {
-    id: 419546,
-    title: 'HyperNormalisation',
-    releaseDate: '2016-10-25',
-  },
-  {
-    id: 29740,
-    title: 'I Am a Fugitive from a Chain Gang',
-    releaseDate: '1932-11-09',
-  },
-  {
-    id: 84383,
-    title: 'I Am Bruce Lee',
-    releaseDate: '2012-02-09',
-  },
-  {
-    id: 450945,
-    title: 'I Am Heath Ledger',
-    releaseDate: '2017-04-23',
-  },
-  {
-    id: 6479,
-    title: 'I Am Legend',
-    releaseDate: '2007-12-12',
-  },
-  {
-    id: 411019,
-    title: 'I Am Not Your Negro',
-    releaseDate: '2017-02-03',
-  },
-  {
-    id: 10950,
-    title: 'I Am Sam',
-    releaseDate: '2001-12-28',
-  },
-  {
-    id: 879805,
-    title: 'I Am: Celine Dion',
-    releaseDate: '2024-06-18',
-  },
-  {
-    id: 470878,
-    title: 'I Can Only Imagine',
-    releaseDate: '2018-02-14',
-  },
-  {
-    id: 31216,
-    title: "I Can't Think Straight",
-    releaseDate: '2008-06-01',
-  },
-  {
-    id: 30159,
-    title: 'I Confess',
-    releaseDate: '1953-02-12',
-  },
-  {
-    id: 56137,
-    title: "I Know Where I'm Going!",
-    releaseDate: '1945-11-16',
-  },
-  {
-    id: 244267,
-    title: 'I Origins',
-    releaseDate: '2014-07-18',
-  },
-  {
-    id: 585244,
-    title: 'I Still Believe',
-    releaseDate: '2020-03-12',
-  },
-  {
-    id: 37058,
-    title: "I'm Here",
-    releaseDate: '2010-03-01',
-  },
-  {
-    id: 409502,
-    title: "I'm Not Ashamed",
-    releaseDate: '2016-10-21',
-  },
-  {
-    id: 374473,
-    title: 'I, Daniel Blake',
-    releaseDate: '2016-10-21',
-  },
-  {
-    id: 389015,
-    title: 'I, Tonya',
-    releaseDate: '2017-12-07',
-  },
-  {
-    id: 432976,
-    title: 'Icarus',
-    releaseDate: '2017-06-03',
-  },
-  {
-    id: 425,
-    title: 'Ice Age',
-    releaseDate: '2002-03-14',
-  },
-  {
-    id: 2832,
-    title: 'Identity',
-    releaseDate: '2003-04-25',
-  },
-  {
-    id: 713776,
-    title: 'If Anything Happens I Love You',
-    releaseDate: '2020-03-07',
-  },
-  {
-    id: 249164,
-    title: 'If I Stay',
-    releaseDate: '2014-08-21',
-  },
-  {
-    id: 15775,
-    title: 'If Only',
-    releaseDate: '2004-01-23',
-  },
-  {
-    id: 14794,
-    title: 'if....',
-    releaseDate: '1968-12-19',
-  },
-  {
-    id: 1544,
-    title: 'Imagine Me & You',
-    releaseDate: '2006-01-27',
-  },
-  {
-    id: 34148,
-    title: 'Imitation of Life',
-    releaseDate: '1959-04-09',
-  },
-  {
-    id: 13701,
-    title: 'Immortal Beloved',
-    releaseDate: '1994-12-16',
-  },
-  {
-    id: 455661,
-    title: 'In a Heartbeat',
-    releaseDate: '2017-06-01',
-  },
-  {
-    id: 17057,
-    title: 'In a Lonely Place',
-    releaseDate: '1950-05-17',
-  },
-  {
-    id: 10511,
-    title: 'In America',
-    releaseDate: '2003-09-22',
-  },
-  {
-    id: 8321,
-    title: 'In Bruges',
-    releaseDate: '2008-02-08',
-  },
-  {
-    id: 18900,
-    title: 'In Cold Blood',
-    releaseDate: '1967-12-15',
-  },
-  {
-    id: 10633,
-    title: 'In the Heat of the Night',
-    releaseDate: '1967-08-02',
-  },
-  {
-    id: 467909,
-    title: 'In the Heights',
-    releaseDate: '2021-06-10',
-  },
-  {
-    id: 19833,
-    title: 'In the Loop',
-    releaseDate: '2009-01-22',
-  },
-  {
-    id: 2654,
-    title: 'In the Mouth of Madness',
-    releaseDate: '1995-02-03',
-  },
-  {
-    id: 7984,
-    title: 'In the Name of the Father',
-    releaseDate: '1993-12-12',
-  },
-  {
-    id: 226448,
-    title: 'In Your Eyes',
-    releaseDate: '2014-04-20',
-  },
-  {
-    id: 27205,
-    title: 'Inception',
-    releaseDate: '2010-07-15',
-  },
-  {
-    id: 64956,
-    title: 'Inception: The Cobol Job',
-    releaseDate: '2010-12-07',
-  },
-  {
-    id: 260513,
-    title: 'Incredibles 2',
-    releaseDate: '2018-06-14',
-  },
-  {
-    id: 89,
-    title: 'Indiana Jones and the Last Crusade',
-    releaseDate: '1989-05-24',
-  },
-  {
-    id: 87,
-    title: 'Indiana Jones and the Temple of Doom',
-    releaseDate: '1984-05-23',
-  },
-  {
-    id: 80215,
-    title: 'Indie Game: The Movie',
-    releaseDate: '2012-05-18',
-  },
-  {
-    id: 16869,
-    title: 'Inglourious Basterds',
-    releaseDate: '2009-08-02',
-  },
-  {
-    id: 1908,
-    title: 'Inherit the Wind',
-    releaseDate: '1960-07-07',
-  },
-  {
-    id: 831405,
-    title: 'Injustice',
-    releaseDate: '2021-10-09',
-  },
-  {
-    id: 1730,
-    title: 'Inland Empire',
-    releaseDate: '2006-12-06',
-  },
-  {
-    id: 406785,
-    title: 'Inner Workings',
-    releaseDate: '2016-11-23',
-  },
-  {
-    id: 31165,
-    title: "Inside I'm Dancing",
-    releaseDate: '2004-10-15',
-  },
-  {
-    id: 44639,
-    title: 'Inside Job',
-    releaseDate: '2010-10-08',
-  },
-  {
-    id: 86829,
-    title: 'Inside Llewyn Davis',
-    releaseDate: '2013-10-18',
-  },
-  {
-    id: 388,
-    title: 'Inside Man',
-    releaseDate: '2006-03-17',
-  },
-  {
-    id: 150540,
-    title: 'Inside Out',
-    releaseDate: '2015-06-17',
-  },
-  {
-    id: 1022789,
-    title: 'Inside Out 2',
-    releaseDate: '2024-06-11',
-  },
-  {
-    id: 1003180,
-    title: 'Inside the Mind of a Cat',
-    releaseDate: '2022-08-18',
-  },
-  {
-    id: 491418,
-    title: 'Instant Family',
-    releaseDate: '2018-11-13',
-  },
-  {
-    id: 20312,
-    title: 'Interstate 60',
-    releaseDate: '2002-04-13',
-  },
-  {
-    id: 11049,
-    title: 'Interstella 5555: The 5tory of the 5ecret 5tar 5ystem',
-    releaseDate: '2003-05-28',
-  },
-  {
-    id: 157336,
-    title: 'Interstellar',
-    releaseDate: '2014-11-05',
-  },
-  {
-    id: 301959,
-    title: "Interstellar: Nolan's Odyssey",
-    releaseDate: '2014-11-05',
-  },
-  {
-    id: 628,
-    title: 'Interview with the Vampire',
-    releaseDate: '1994-11-11',
-  },
-  {
-    id: 5915,
-    title: 'Into the Wild',
-    releaseDate: '2007-09-21',
-  },
-  {
-    id: 3059,
-    title: "Intolerance: Love's Struggle Throughout the Ages",
-    releaseDate: '1916-09-04',
-  },
-  {
-    id: 472983,
-    title: 'Invader Zim: Enter the Florpus',
-    releaseDate: '2019-08-16',
-  },
-  {
-    id: 11850,
-    title: 'Invasion of the Body Snatchers',
-    releaseDate: '1978-12-20',
-  },
-  {
-    id: 11549,
-    title: 'Invasion of the Body Snatchers',
-    releaseDate: '1956-02-05',
-  },
-  {
-    id: 22954,
-    title: 'Invictus',
-    releaseDate: '2009-12-11',
-  },
-  {
-    id: 11652,
-    title: 'Invincible',
-    releaseDate: '2006-08-25',
-  },
-  {
-    id: 2690,
-    title: 'Irma la Douce',
-    releaseDate: '1963-06-05',
-  },
-  {
-    id: 1726,
-    title: 'Iron Man',
-    releaseDate: '2008-04-30',
-  },
-  {
-    id: 399174,
-    title: 'Isle of Dogs',
-    releaseDate: '2018-03-23',
-  },
-  {
-    id: 346364,
-    title: 'It',
-    releaseDate: '2017-09-06',
-  },
-  {
-    id: 3078,
-    title: 'It Happened One Night',
-    releaseDate: '1934-02-22',
-  },
-  {
-    id: 22492,
-    title: 'It Might Get Loud',
-    releaseDate: '2008-09-05',
-  },
-  {
-    id: 298016,
-    title: "It's a SpongeBob Christmas!",
-    releaseDate: '2012-09-19',
-  },
-  {
-    id: 1585,
-    title: "It's a Wonderful Life",
-    releaseDate: '1946-12-20',
-  },
-  {
-    id: 489412,
-    title: "It's Such a Beautiful Day",
-    releaseDate: '2012-08-24',
-  },
-  {
-    id: 13353,
-    title: "It's the Great Pumpkin, Charlie Brown",
-    releaseDate: '1966-10-27',
-  },
-  {
-    id: 13932,
-    title: 'Jack-Jack Attack',
-    releaseDate: '2005-03-15',
-  },
-  {
-    id: 184,
-    title: 'Jackie Brown',
-    releaseDate: '1997-12-25',
-  },
-  {
-    id: 2291,
-    title: "Jacob's Ladder",
-    releaseDate: '1990-11-02',
-  },
-  {
-    id: 38684,
-    title: 'Jane Eyre',
-    releaseDate: '2011-03-11',
-  },
-  {
-    id: 321974,
-    title: 'Janis: Little Girl Blue',
-    releaseDate: '2015-09-09',
-  },
-  {
-    id: 11533,
-    title: 'Jason and the Argonauts',
-    releaseDate: '1963-06-13',
-  },
-  {
-    id: 578,
-    title: 'Jaws',
-    releaseDate: '1975-06-20',
-  },
-  {
-    id: 11943,
-    title: 'Jeremiah Johnson',
-    releaseDate: '1972-09-10',
-  },
-  {
-    id: 843847,
-    title: 'Jerry & Marge Go Large',
-    releaseDate: '2022-10-20',
-  },
-  {
-    id: 45139,
-    title: 'Jesus',
-    releaseDate: '1979-10-19',
-  },
-  {
-    id: 12545,
-    title: 'Jesus Christ Superstar',
-    releaseDate: '1973-08-15',
-  },
-  {
-    id: 820,
-    title: 'JFK',
-    releaseDate: '1991-12-20',
-  },
-  {
-    id: 469019,
-    title: 'Jim & Andy: The Great Beyond',
-    releaseDate: '2017-09-05',
-  },
-  {
-    id: 289333,
-    title: 'Jim Jefferies: Bare',
-    releaseDate: '2014-08-29',
-  },
-  {
-    id: 404022,
-    title: 'Jim Jefferies: Freedumb',
-    releaseDate: '2016-07-01',
-  },
-  {
-    id: 80767,
-    title: 'Jiro Dreams of Sushi',
-    releaseDate: '2011-06-11',
-  },
-  {
-    id: 191720,
-    title: "Jodorowsky's Dune",
-    releaseDate: '2013-08-30',
-  },
-  {
-    id: 520594,
-    title: 'John Mulaney: Kid Gorgeous at Radio City',
-    releaseDate: '2018-05-01',
-  },
-  {
-    id: 86705,
-    title: 'John Mulaney: New in Town',
-    releaseDate: '2012-01-31',
-  },
-  {
-    id: 367735,
-    title: 'John Mulaney: The Comeback Kid',
-    releaseDate: '2015-11-13',
-  },
-  {
-    id: 8470,
-    title: 'John Q',
-    releaseDate: '2002-02-15',
-  },
-  {
-    id: 245891,
-    title: 'John Wick',
-    releaseDate: '2014-10-22',
-  },
-  {
-    id: 324552,
-    title: 'John Wick: Chapter 2',
-    releaseDate: '2017-02-08',
-  },
-  {
-    id: 458156,
-    title: 'John Wick: Chapter 3 - Parabellum',
-    releaseDate: '2019-05-15',
-  },
-  {
-    id: 603692,
-    title: 'John Wick: Chapter 4',
-    releaseDate: '2023-03-22',
-  },
-  {
-    id: 16328,
-    title: 'Johnny Got His Gun',
-    releaseDate: '1971-08-04',
-  },
-  {
-    id: 26596,
-    title: 'Johnny Guitar',
-    releaseDate: '1954-05-26',
-  },
-  {
-    id: 515001,
-    title: 'Jojo Rabbit',
-    releaseDate: '2019-10-18',
-  },
-  {
-    id: 475557,
-    title: 'Joker',
-    releaseDate: '2019-10-01',
-  },
-  {
-    id: 2405,
-    title: 'Joseph',
-    releaseDate: '1995-04-10',
-  },
-  {
-    id: 583406,
-    title: 'Judas and the Black Messiah',
-    releaseDate: '2021-02-12',
-  },
-  {
-    id: 821,
-    title: 'Judgment at Nuremberg',
-    releaseDate: '1961-12-18',
-  },
-  {
-    id: 16136,
-    title: 'Juice',
-    releaseDate: '1992-01-17',
-  },
-  {
-    id: 1072371,
-    title: 'Jules',
-    releaseDate: '2023-08-10',
-  },
-  {
-    id: 18019,
-    title: 'Julius Caesar',
-    releaseDate: '1953-06-04',
-  },
-  {
-    id: 8844,
-    title: 'Jumanji',
-    releaseDate: '1995-12-15',
-  },
-  {
-    id: 451048,
-    title: 'Jungle Cruise',
-    releaseDate: '2021-07-28',
-  },
-  {
-    id: 7326,
-    title: 'Juno',
-    releaseDate: '2007-12-05',
-  },
-  {
-    id: 329,
-    title: 'Jurassic Park',
-    releaseDate: '1993-06-11',
-  },
-  {
-    id: 522212,
-    title: 'Just Mercy',
-    releaseDate: '2019-12-25',
-  },
-  {
-    id: 408220,
-    title: 'Justice League Dark',
-    releaseDate: '2017-01-24',
-  },
-  {
-    id: 618344,
-    title: 'Justice League Dark: Apokolips War',
-    releaseDate: '2020-05-05',
-  },
-  {
-    id: 379291,
-    title: 'Justice League vs. Teen Titans',
-    releaseDate: '2016-03-26',
-  },
-  {
-    id: 1155089,
-    title: 'Justice League: Crisis on Infinite Earths Part One',
-    releaseDate: '2024-01-08',
-  },
-  {
-    id: 1209290,
-    title: 'Justice League: Crisis on Infinite Earths Part Three',
-    releaseDate: '2024-07-15',
-  },
-  {
-    id: 30061,
-    title: 'Justice League: Crisis on Two Earths',
-    releaseDate: '2010-02-23',
-  },
-  {
-    id: 76589,
-    title: 'Justice League: Doom',
-    releaseDate: '2012-02-28',
-  },
-  {
-    id: 323027,
-    title: 'Justice League: Gods and Monsters',
-    releaseDate: '2015-06-18',
-  },
-  {
-    id: 183011,
-    title: 'Justice League: The Flashpoint Paradox',
-    releaseDate: '2013-07-30',
-  },
-  {
-    id: 217993,
-    title: 'Justice League: War',
-    releaseDate: '2014-01-21',
-  },
-  {
-    id: 736069,
-    title: 'Justice Society: World War II',
-    releaseDate: '2021-04-27',
-  },
-  {
-    id: 229296,
-    title: "Justin Bieber's Believe",
-    releaseDate: '2013-12-19',
-  },
-  {
-    id: 616584,
-    title: 'K-12',
-    releaseDate: '2019-09-05',
-  },
-  {
-    id: 167,
-    title: 'K-PAX',
-    releaseDate: '2001-10-26',
-  },
-  {
-    id: 1011477,
-    title: 'Karate Kid: Legends',
-    releaseDate: '2025-05-08',
-  },
-  {
-    id: 101267,
-    title: 'Katy Perry: Part of Me',
-    releaseDate: '2012-06-28',
-  },
-  {
-    id: 14859,
-    title: 'Keith',
-    releaseDate: '2008-09-13',
-  },
-  {
-    id: 11589,
-    title: "Kelly's Heroes",
-    releaseDate: '1970-06-22',
-  },
-  {
-    id: 13384,
-    title: 'Kes',
-    releaseDate: '1970-04-03',
-  },
-  {
-    id: 27866,
-    title: "Kevin Hart: I'm a Grown Little Man",
-    releaseDate: '2009-02-03',
-  },
-  {
-    id: 42189,
-    title: 'Kevin Hart: Seriously Funny',
-    releaseDate: '2010-07-20',
-  },
-  {
-    id: 11016,
-    title: 'Key Largo',
-    releaseDate: '1948-07-16',
-  },
-  {
-    id: 23483,
-    title: 'Kick-Ass',
-    releaseDate: '2010-03-26',
-  },
-  {
-    id: 24914,
-    title: "Kid's Story",
-    releaseDate: '2003-06-03',
-  },
-  {
-    id: 414419,
-    title: 'Kill Bill: The Whole Bloody Affair',
-    releaseDate: '2011-03-27',
-  },
-  {
-    id: 24,
-    title: 'Kill Bill: Vol. 1',
-    releaseDate: '2003-10-10',
-  },
-  {
-    id: 393,
-    title: 'Kill Bill: Vol. 2',
-    releaseDate: '2004-04-16',
-  },
-  {
-    id: 1134055,
-    title: 'Kill Shot',
-    releaseDate: '2023-08-15',
-  },
-  {
-    id: 157370,
-    title: 'Kill Your Darlings',
-    releaseDate: '2013-10-16',
-  },
-  {
-    id: 24528,
-    title: 'Killer Bean Forever',
-    releaseDate: '2008-09-05',
-  },
-  {
-    id: 466420,
-    title: 'Killers of the Flower Moon',
-    releaseDate: '2023-10-18',
-  },
-  {
-    id: 11898,
-    title: 'Kind Hearts and Coronets',
-    releaseDate: '1949-06-21',
-  },
-  {
-    id: 244,
-    title: 'King Kong',
-    releaseDate: '1933-03-15',
-  },
-  {
-    id: 36362,
-    title: 'King of Kings',
-    releaseDate: '1961-10-11',
-  },
-  {
-    id: 614917,
-    title: 'King Richard',
-    releaseDate: '2021-11-18',
-  },
-  {
-    id: 1495,
-    title: 'Kingdom of Heaven',
-    releaseDate: '2005-05-03',
-  },
-  {
-    id: 653346,
-    title: 'Kingdom of the Planet of the Apes',
-    releaseDate: '2024-05-08',
-  },
-  {
-    id: 207703,
-    title: 'Kingsman: The Secret Service',
-    releaseDate: '2015-01-24',
-  },
-  {
-    id: 440596,
-    title: 'Kiss and Cry',
-    releaseDate: '2017-02-10',
-  },
-  {
-    id: 5236,
-    title: 'Kiss Kiss Bang Bang',
-    releaseDate: '2005-09-14',
-  },
-  {
-    id: 18030,
-    title: 'Kiss Me Deadly',
-    releaseDate: '1955-04-28',
-  },
-  {
-    id: 53021,
-    title: 'Kiss Me, Stupid',
-    releaseDate: '1964-12-22',
-  },
-  {
-    id: 21454,
-    title: 'Kiss of Death',
-    releaseDate: '1947-08-27',
-  },
-  {
-    id: 11703,
-    title: 'Kiss of the Spider Woman',
-    releaseDate: '1985-07-26',
-  },
-  {
-    id: 574074,
-    title: 'Kitbull',
-    releaseDate: '2019-01-18',
-  },
-  {
-    id: 508965,
-    title: 'Klaus',
-    releaseDate: '2019-11-08',
-  },
-  {
-    id: 13928,
-    title: 'Knick Knack',
-    releaseDate: '1989-11-23',
-  },
-  {
-    id: 546554,
-    title: 'Knives Out',
-    releaseDate: '2019-11-27',
-  },
-  {
-    id: 565312,
-    title: 'Knock Down the House',
-    releaseDate: '2019-01-27',
-  },
-  {
-    id: 11314,
-    title: 'Koyaanisqatsi',
-    releaseDate: '1983-04-27',
-  },
-  {
-    id: 803796,
-    title: 'KPop Demon Hunters',
-    releaseDate: '2025-06-20',
-  },
-  {
-    id: 12102,
-    title: 'Kramer vs. Kramer',
-    releaseDate: '1979-12-07',
-  },
-  {
-    id: 313297,
-    title: 'Kubo and the Two Strings',
-    releaseDate: '2016-08-18',
-  },
-  {
-    id: 9502,
-    title: 'Kung Fu Panda',
-    releaseDate: '2008-06-04',
-  },
-  {
-    id: 49444,
-    title: 'Kung Fu Panda 2',
-    releaseDate: '2011-05-25',
-  },
-  {
-    id: 1011985,
-    title: 'Kung Fu Panda 4',
-    releaseDate: '2024-03-02',
-  },
-  {
-    id: 251516,
-    title: 'Kung Fury',
-    releaseDate: '2015-05-22',
-  },
-  {
-    id: 2118,
-    title: 'L.A. Confidential',
-    releaseDate: '1997-09-19',
-  },
-  {
-    id: 16620,
-    title: 'La Bamba',
-    releaseDate: '1987-07-24',
-  },
-  {
-    id: 313369,
-    title: 'La La Land',
-    releaseDate: '2016-12-01',
-  },
-  {
-    id: 83564,
-    title: 'La luna',
-    releaseDate: '2012-02-10',
-  },
-  {
-    id: 989596,
-    title: 'The Braid',
-    releaseDate: '2023-11-29',
-  },
-  {
-    id: 130150,
-    title: 'Labor Day',
-    releaseDate: '2013-12-27',
-  },
-  {
-    id: 13597,
-    title: 'Labyrinth',
-    releaseDate: '1986-06-27',
-  },
-  {
-    id: 512895,
-    title: 'Lady and the Tramp',
-    releaseDate: '2019-11-12',
-  },
-  {
-    id: 10340,
-    title: 'Lady and the Tramp',
-    releaseDate: '1955-06-22',
-  },
-  {
-    id: 391713,
-    title: 'Lady Bird',
-    releaseDate: '2017-09-01',
-  },
-  {
-    id: 594530,
-    title: 'Lamp Life',
-    releaseDate: '2020-01-31',
-  },
-  {
-    id: 38884,
-    title: 'Land and Freedom',
-    releaseDate: '1995-04-07',
-  },
-  {
-    id: 969492,
-    title: 'Land of Bad',
-    releaseDate: '2024-02-09',
-  },
-  {
-    id: 6615,
-    title: 'Lars and the Real Girl',
-    releaseDate: '2007-10-12',
-  },
-  {
-    id: 549053,
-    title: 'Last Christmas',
-    releaseDate: '2019-11-07',
-  },
-  {
-    id: 17379,
-    title: 'Last Holiday',
-    releaseDate: '2006-01-13',
-  },
-  {
-    id: 576845,
-    title: 'Last Night in Soho',
-    releaseDate: '2021-10-21',
-  },
-  {
-    id: 14677,
-    title: 'Last Train from Gun Hill',
-    releaseDate: '1959-07-29',
-  },
-  {
-    id: 938614,
-    title: 'Late Night with the Devil',
-    releaseDate: '2024-03-19',
-  },
-  {
-    id: 1939,
-    title: 'Laura',
-    releaseDate: '1944-10-11',
-  },
-  {
-    id: 286192,
-    title: 'Lava',
-    releaseDate: '2014-10-10',
-  },
-  {
-    id: 22803,
-    title: 'Law Abiding Citizen',
-    releaseDate: '2009-10-15',
-  },
-  {
-    id: 82633,
-    title: 'Lawless',
-    releaseDate: '2012-08-29',
-  },
-  {
-    id: 947,
-    title: 'Lawrence of Arabia',
-    releaseDate: '1962-12-11',
-  },
-  {
-    id: 780382,
-    title: 'The Wolf and the Lion',
-    releaseDate: '2021-10-13',
-  },
-  {
-    id: 3009,
-    title: 'The Trial',
-    releaseDate: '1962-08-25',
-  },
-  {
-    id: 14621,
-    title: 'Lean On Me',
-    releaseDate: '1989-03-03',
-  },
-  {
-    id: 17645,
-    title: 'Leave Her to Heaven',
-    releaseDate: '1945-12-25',
-  },
-  {
-    id: 451,
-    title: 'Leaving Las Vegas',
-    releaseDate: '1995-10-27',
-  },
-  {
-    id: 832964,
-    title: 'Lee',
-    releaseDate: '2024-09-12',
-  },
-  {
-    id: 276907,
-    title: 'Legend',
-    releaseDate: '2015-09-09',
-  },
-  {
-    id: 47626,
-    title: 'Legend of the BoneKnapper Dragon',
-    releaseDate: '2010-10-14',
-  },
-  {
-    id: 4476,
-    title: 'Legends of the Fall',
-    releaseDate: '1994-12-23',
-  },
-  {
-    id: 690369,
-    title: 'LEGO DC: Shazam! Magic and Monsters',
-    releaseDate: '2020-04-28',
-  },
-  {
-    id: 461054,
-    title: 'LEGO Scooby-Doo! Blowout Beach Bash',
-    releaseDate: '2017-07-11',
-  },
-  {
-    id: 392536,
-    title: 'LEGO Scooby-Doo! Haunted Hollywood',
-    releaseDate: '2016-01-28',
-  },
-  {
-    id: 394269,
-    title: 'Lemonade',
-    releaseDate: '2016-04-23',
-  },
-  {
-    id: 65218,
-    title: 'Lemonade Mouth',
-    releaseDate: '2011-04-15',
-  },
-  {
-    id: 27094,
-    title: 'Lenny',
-    releaseDate: '1974-11-10',
-  },
-  {
-    id: 1075794,
-    title: 'Leo',
-    releaseDate: '2023-11-17',
-  },
-  {
-    id: 82695,
-    title: 'Les Misérables',
-    releaseDate: '2012-12-18',
-  },
-  {
-    id: 4415,
-    title: 'Les Misérables',
-    releaseDate: '1998-05-01',
-  },
-  {
-    id: 20556,
-    title: 'Let It Be',
-    releaseDate: '1970-02-13',
-  },
-  {
-    id: 941,
-    title: 'Lethal Weapon',
-    releaseDate: '1987-03-06',
-  },
-  {
-    id: 942,
-    title: 'Lethal Weapon 2',
-    releaseDate: '1989-07-07',
-  },
-  {
-    id: 946,
-    title: 'Letter from an Unknown Woman',
-    releaseDate: '1948-04-28',
-  },
-  {
-    id: 1251,
-    title: 'Letters from Iwo Jima',
-    releaseDate: '2006-12-09',
-  },
-  {
-    id: 37056,
-    title: 'Letters to Juliet',
-    releaseDate: '2010-05-13',
-  },
-  {
-    id: 11457,
-    title: 'Life as a House',
-    releaseDate: '2001-10-25',
-  },
-  {
-    id: 66150,
-    title: 'Life in a Day',
-    releaseDate: '2011-01-27',
-  },
-  {
-    id: 447362,
-    title: 'Life in a Year',
-    releaseDate: '2020-11-27',
-  },
-  {
-    id: 446696,
-    title: 'Life Itself',
-    releaseDate: '2018-09-21',
-  },
-  {
-    id: 250766,
-    title: 'Life Itself',
-    releaseDate: '2014-07-04',
-  },
-  {
-    id: 201550,
-    title: 'Life of a King',
-    releaseDate: '2013-06-22',
-  },
-  {
-    id: 583,
-    title: 'Life of Brian',
-    releaseDate: '1979-08-17',
-  },
-  {
-    id: 87827,
-    title: 'Life of Pi',
-    releaseDate: '2012-11-20',
-  },
-  {
-    id: 13321,
-    title: 'Lifeboat',
-    releaseDate: '1944-01-28',
-  },
-  {
-    id: 13060,
-    title: 'Lifted',
-    releaseDate: '2006-12-28',
-  },
-  {
-    id: 38805,
-    title: 'Lilies of the Field',
-    releaseDate: '1963-06-04',
-  },
-  {
-    id: 552524,
-    title: 'Lilo & Stitch',
-    releaseDate: '2025-05-17',
-  },
-  {
-    id: 11544,
-    title: 'Lilo & Stitch',
-    releaseDate: '2002-06-21',
-  },
-  {
-    id: 28971,
-    title: 'Limelight',
-    releaseDate: '1952-10-16',
-  },
-  {
-    id: 51876,
-    title: 'Limitless',
-    releaseDate: '2011-03-17',
-  },
-  {
-    id: 334543,
-    title: 'Lion',
-    releaseDate: '2016-11-24',
-  },
-  {
-    id: 26843,
-    title: 'Lion of the Desert',
-    releaseDate: '1981-04-17',
-  },
-  {
-    id: 319076,
-    title: 'Listen to Me Marlon',
-    releaseDate: '2015-07-29',
-  },
-  {
-    id: 11040,
-    title: 'Little Big Man',
-    releaseDate: '1970-12-23',
-  },
-  {
-    id: 256962,
-    title: 'Little Boy',
-    releaseDate: '2015-04-23',
-  },
-  {
-    id: 1440,
-    title: 'Little Children',
-    releaseDate: '2006-10-06',
-  },
-  {
-    id: 586791,
-    title: 'Little Fish',
-    releaseDate: '2021-02-05',
-  },
-  {
-    id: 38602,
-    title: 'Little Lord Fauntleroy',
-    releaseDate: '1980-12-01',
-  },
-  {
-    id: 16553,
-    title: 'Little Manhattan',
-    releaseDate: '2005-09-26',
-  },
-  {
-    id: 773,
-    title: 'Little Miss Sunshine',
-    releaseDate: '2006-07-26',
-  },
-  {
-    id: 331482,
-    title: 'Little Women',
-    releaseDate: '2019-12-25',
-  },
-  {
-    id: 43436,
-    title: 'Little Women',
-    releaseDate: '1949-03-10',
-  },
-  {
-    id: 9587,
-    title: 'Little Women',
-    releaseDate: '1994-12-21',
-  },
-  {
-    id: 9071,
-    title: 'Living in Oblivion',
-    releaseDate: '1995-07-21',
-  },
-  {
-    id: 100,
-    title: 'Lock, Stock and Two Smoking Barrels',
-    releaseDate: '1998-08-28',
-  },
-  {
-    id: 263115,
-    title: 'Logan',
-    releaseDate: '2017-02-28',
-  },
-  {
-    id: 32389,
-    title: 'Logorama',
-    releaseDate: '2009-05-16',
-  },
-  {
-    id: 9769,
-    title: 'Lolita',
-    releaseDate: '1997-09-27',
-  },
-  {
-    id: 802,
-    title: 'Lolita',
-    releaseDate: '1962-06-13',
-  },
-  {
-    id: 193756,
-    title: 'Lone Survivor',
-    releaseDate: '2013-12-24',
-  },
-  {
-    id: 43002,
-    title: 'Lonely are the Brave',
-    releaseDate: '1962-04-26',
-  },
-  {
-    id: 477331,
-    title: 'Long Shot',
-    releaseDate: '2017-09-03',
-  },
-  {
-    id: 371738,
-    title: 'Looking: The Movie',
-    releaseDate: '2016-07-24',
-  },
-  {
-    id: 1830,
-    title: 'Lord of War',
-    releaseDate: '2005-09-16',
-  },
-  {
-    id: 9787,
-    title: 'Lords of Dogtown',
-    releaseDate: '2005-06-03',
-  },
-  {
-    id: 2007,
-    title: "Lorenzo's Oil",
-    releaseDate: '1992-12-30',
-  },
-  {
-    id: 638,
-    title: 'Lost Highway',
-    releaseDate: '1997-01-15',
-  },
-  {
-    id: 21189,
-    title: 'Lost in La Mancha',
-    releaseDate: '2002-02-11',
-  },
-  {
-    id: 153,
-    title: 'Lost in Translation',
-    releaseDate: '2003-09-18',
-  },
-  {
-    id: 433471,
-    title: 'Lou',
-    releaseDate: '2017-06-16',
-  },
-  {
-    id: 449674,
-    title: 'Louis C.K. 2017',
-    releaseDate: '2017-04-04',
-  },
-  {
-    id: 30969,
-    title: 'Louis C.K.: Chewed Up',
-    releaseDate: '2008-10-01',
-  },
-  {
-    id: 45523,
-    title: 'Louis C.K.: Hilarious',
-    releaseDate: '2010-01-26',
-  },
-  {
-    id: 80379,
-    title: 'Louis C.K.: Live at the Beacon Theater',
-    releaseDate: '2011-12-10',
-  },
-  {
-    id: 321594,
-    title: 'Louis C.K.: Live at The Comedy Store',
-    releaseDate: '2015-01-27',
-  },
-  {
-    id: 185574,
-    title: 'Louis C.K.: Oh My God',
-    releaseDate: '2013-04-13',
-  },
-  {
-    id: 24447,
-    title: 'Louis C.K.: Shameless',
-    releaseDate: '2007-01-13',
-  },
-  {
-    id: 14736,
-    title: 'Love & Basketball',
-    releaseDate: '2000-04-21',
-  },
-  {
-    id: 271714,
-    title: 'Love & Mercy',
-    releaseDate: '2015-05-29',
-  },
-  {
-    id: 43347,
-    title: 'Love & Other Drugs',
-    releaseDate: '2010-11-22',
-  },
-  {
-    id: 508,
-    title: 'Love Actually',
-    releaseDate: '2003-09-07',
-  },
-  {
-    id: 11686,
-    title: 'Love and Death',
-    releaseDate: '1975-06-10',
-  },
-  {
-    id: 590223,
-    title: 'Love and Monsters',
-    releaseDate: '2020-10-16',
-  },
-  {
-    id: 353577,
-    title: 'Love at First Sight',
-    releaseDate: '2023-09-15',
-  },
-  {
-    id: 21542,
-    title: "Love Don't Co$t a Thing",
-    releaseDate: '2003-12-12',
-  },
-  {
-    id: 426203,
-    title: 'Love Everlasting',
-    releaseDate: '2016-11-14',
-  },
-  {
-    id: 18299,
-    title: 'Love in the Afternoon',
-    releaseDate: '1957-05-29',
-  },
-  {
-    id: 200727,
-    title: 'Love, Rosie',
-    releaseDate: '2014-10-16',
-  },
-  {
-    id: 449176,
-    title: 'Love, Simon',
-    releaseDate: '2018-02-16',
-  },
-  {
-    id: 339877,
-    title: 'Loving Vincent',
-    releaseDate: '2017-06-22',
-  },
-  {
-    id: 508943,
-    title: 'Luca',
-    releaseDate: '2021-06-17',
-  },
-  {
-    id: 585511,
-    title: 'Luck',
-    releaseDate: '2022-08-05',
-  },
-  {
-    id: 407449,
-    title: 'Lucky',
-    releaseDate: '2017-09-29',
-  },
-  {
-    id: 186,
-    title: 'Lucky Number Slevin',
-    releaseDate: '2006-02-24',
-  },
-  {
-    id: 770156,
-    title: 'Lucy Shimmers and the Prince of Peace',
-    releaseDate: '2020-10-19',
-  },
-  {
-    id: 3478,
-    title: 'Ludwig',
-    releaseDate: '1973-03-07',
-  },
-  {
-    id: 29592,
-    title: 'Lust for Life',
-    releaseDate: '1956-09-15',
-  },
-  {
-    id: 13925,
-    title: 'Luxo Jr.',
-    releaseDate: '1986-08-17',
-  },
-  {
-    id: 536554,
-    title: 'M3GAN',
-    releaseDate: '2022-12-28',
-  },
-  {
-    id: 1071585,
-    title: 'M3GAN 2.0',
-    releaseDate: '2025-06-25',
-  },
-  {
-    id: 27883,
-    title: 'Macbeth',
-    releaseDate: '1948-10-01',
-  },
-  {
-    id: 11316,
-    title: 'Macbeth',
-    releaseDate: '1971-12-20',
-  },
-  {
-    id: 8810,
-    title: 'Mad Max 2',
-    releaseDate: '1981-12-24',
-  },
-  {
-    id: 76341,
-    title: 'Mad Max: Fury Road',
-    releaseDate: '2015-05-13',
-  },
-  {
-    id: 673595,
-    title: 'Maggie Simpson in "Playdate with Destiny"',
-    releaseDate: '2020-02-29',
-  },
-  {
-    id: 334,
-    title: 'Magnolia',
-    releaseDate: '1999-12-17',
-  },
-  {
-    id: 10648,
-    title: 'Magnum Force',
-    releaseDate: '1973-12-13',
-  },
-  {
-    id: 1010823,
-    title: 'Magnum Opus',
-    releaseDate: '2022-07-18',
-  },
-  {
-    id: 41059,
-    title: 'Make Way for Tomorrow',
-    releaseDate: '1937-05-09',
-  },
-  {
-    id: 1214667,
-    title: 'Making Squid Game: The Challenge',
-    releaseDate: '2023-12-06',
-  },
-  {
-    id: 722913,
-    title: 'Malcolm & Marie',
-    releaseDate: '2021-01-29',
-  },
-  {
-    id: 1883,
-    title: 'Malcolm X',
-    releaseDate: '1992-11-18',
-  },
-  {
-    id: 102651,
-    title: 'Maleficent',
-    releaseDate: '2014-05-28',
-  },
-  {
-    id: 420809,
-    title: 'Maleficent: Mistress of Evil',
-    releaseDate: '2019-10-16',
-  },
-  {
-    id: 458423,
-    title: 'Mamma Mia! Here We Go Again',
-    releaseDate: '2018-07-18',
-  },
-  {
-    id: 9509,
-    title: 'Man on Fire',
-    releaseDate: '2004-04-23',
-  },
-  {
-    id: 1850,
-    title: 'Man on the Moon',
-    releaseDate: '1999-12-22',
-  },
-  {
-    id: 14048,
-    title: 'Man on Wire',
-    releaseDate: '2008-08-01',
-  },
-  {
-    id: 334541,
-    title: 'Manchester by the Sea',
-    releaseDate: '2016-11-17',
-  },
-  {
-    id: 696,
-    title: 'Manhattan',
-    releaseDate: '1979-04-25',
-  },
-  {
-    id: 10440,
-    title: 'Manhattan Murder Mystery',
-    releaseDate: '1993-05-02',
-  },
-  {
-    id: 11454,
-    title: 'Manhunter',
-    releaseDate: '1986-08-14',
-  },
-  {
-    id: 10518,
-    title: 'Marathon Man',
-    releaseDate: '1976-10-08',
-  },
-  {
-    id: 869626,
-    title: 'Marcel the Shell with Shoes On',
-    releaseDate: '2022-06-24',
-  },
-  {
-    id: 90125,
-    title: 'Marley',
-    releaseDate: '2012-04-20',
-  },
-  {
-    id: 14306,
-    title: 'Marley & Me',
-    releaseDate: '2008-12-25',
-  },
-  {
-    id: 506,
-    title: 'Marnie',
-    releaseDate: '1964-07-17',
-  },
-  {
-    id: 492188,
-    title: 'Marriage Story',
-    releaseDate: '2019-09-28',
-  },
-  {
-    id: 392982,
-    title: 'Marshall',
-    releaseDate: '2017-10-13',
-  },
-  {
-    id: 15919,
-    title: 'Marty',
-    releaseDate: '1955-04-11',
-  },
-  {
-    id: 1317288,
-    title: 'Marty Supreme',
-    releaseDate: '2025-12-19',
-  },
-  {
-    id: 211387,
-    title: 'Marvel One-Shot: Agent Carter',
-    releaseDate: '2013-10-04',
-  },
-  {
-    id: 24238,
-    title: 'Mary and Max',
-    releaseDate: '2009-04-09',
-  },
-  {
-    id: 433,
-    title: 'Mary Poppins',
-    releaseDate: '1964-12-17',
-  },
-  {
-    id: 332283,
-    title: 'Mary Shelley',
-    releaseDate: '2017-08-06',
-  },
-  {
-    id: 11177,
-    title: 'Mask',
-    releaseDate: '1985-03-08',
-  },
-  {
-    id: 423333,
-    title: 'Mass',
-    releaseDate: '2021-10-08',
-  },
-  {
-    id: 8619,
-    title: 'Master and Commander: The Far Side of the World',
-    releaseDate: '2003-11-14',
-  },
-  {
-    id: 116,
-    title: 'Match Point',
-    releaseDate: '2005-10-26',
-  },
-  {
-    id: 7270,
-    title: 'Matchstick Men',
-    releaseDate: '2003-09-12',
-  },
-  {
-    id: 10830,
-    title: 'Matilda',
-    releaseDate: '1996-08-02',
-  },
-  {
-    id: 359784,
-    title: 'Maudie',
-    releaseDate: '2016-06-16',
-  },
-  {
-    id: 26371,
-    title: 'Maurice',
-    releaseDate: '1987-09-18',
-  },
-  {
-    id: 272878,
-    title: 'Max',
-    releaseDate: '2015-06-25',
-  },
-  {
-    id: 336843,
-    title: 'Maze Runner: The Death Cure',
-    releaseDate: '2018-01-10',
-  },
-  {
-    id: 29005,
-    title: 'McCabe & Mrs. Miller',
-    releaseDate: '1971-06-24',
-  },
-  {
-    id: 228203,
-    title: 'McFarland, USA',
-    releaseDate: '2015-02-20',
-  },
-  {
-    id: 308369,
-    title: 'Me and Earl and the Dying Girl',
-    releaseDate: '2015-06-12',
-  },
-  {
-    id: 1382,
-    title: 'Me and You and Everyone We Know',
-    releaseDate: '2005-06-17',
-  },
-  {
-    id: 296096,
-    title: 'Me Before You',
-    releaseDate: '2016-06-01',
-  },
-  {
-    id: 10625,
-    title: 'Mean Girls',
-    releaseDate: '2004-04-30',
-  },
-  {
-    id: 203,
-    title: 'Mean Streets',
-    releaseDate: '1973-10-14',
-  },
-  {
-    id: 297,
-    title: 'Meet Joe Black',
-    releaseDate: '1998-11-12',
-  },
-  {
-    id: 32574,
-    title: 'Meet John Doe',
-    releaseDate: '1941-03-14',
-  },
-  {
-    id: 38055,
-    title: 'Megamind',
-    releaseDate: '2010-10-28',
-  },
-  {
-    id: 424488,
-    title: 'Megan Leavey',
-    releaseDate: '2017-06-09',
-  },
-  {
-    id: 62215,
-    title: 'Melancholia',
-    releaseDate: '2011-05-26',
-  },
-  {
-    id: 77,
-    title: 'Memento',
-    releaseDate: '2000-10-11',
-  },
-  {
-    id: 1064486,
-    title: 'Memoir of a Snail',
-    releaseDate: '2024-10-17',
-  },
-  {
-    id: 1904,
-    title: 'Memoirs of a Geisha',
-    releaseDate: '2005-12-06',
-  },
-  {
-    id: 979097,
-    title: 'Memory',
-    releaseDate: '2023-12-22',
-  },
-  {
-    id: 607,
-    title: 'Men in Black',
-    releaseDate: '1997-07-02',
-  },
-  {
-    id: 11978,
-    title: 'Men of Honor',
-    releaseDate: '2000-09-13',
-  },
-  {
-    id: 9516,
-    title: 'Menace II Society',
-    releaseDate: '1993-05-26',
-  },
-  {
-    id: 33871,
-    title: 'Merry Christmas, Drake & Josh',
-    releaseDate: '2008-12-05',
-  },
-  {
-    id: 318279,
-    title: 'Meru',
-    releaseDate: '2015-01-25',
-  },
-  {
-    id: 27040,
-    title: 'Meshes of the Afternoon',
-    releaseDate: '1943-01-01',
-  },
-  {
-    id: 20604,
-    title: "Metal: A Headbanger's Journey",
-    releaseDate: '2005-09-14',
-  },
-  {
-    id: 11401,
-    title: 'Metallica: Some Kind of Monster',
-    releaseDate: '2004-06-10',
-  },
-  {
-    id: 92060,
-    title: "Michael Jackson's Thriller",
-    releaseDate: '1983-11-14',
-  },
-  {
-    id: 14813,
-    title: "Mickey's Christmas Carol",
-    releaseDate: '1983-10-19',
-  },
-  {
-    id: 15400,
-    title: "Mickey's Once Upon a Christmas",
-    releaseDate: '1999-10-31',
-  },
-  {
-    id: 53219,
-    title: "Mickey's Trailer",
-    releaseDate: '1938-05-06',
-  },
-  {
-    id: 437586,
-    title: 'mid90s',
-    releaseDate: '2018-10-19',
-  },
-  {
-    id: 3116,
-    title: 'Midnight Cowboy',
-    releaseDate: '1969-05-25',
-  },
-  {
-    id: 11327,
-    title: 'Midnight Express',
-    releaseDate: '1978-08-31',
-  },
-  {
-    id: 59436,
-    title: 'Midnight in Paris',
-    releaseDate: '2011-05-11',
-  },
-  {
-    id: 9013,
-    title: 'Midnight Run',
-    releaseDate: '1988-07-20',
-  },
-  {
-    id: 419478,
-    title: 'Midnight Sun',
-    releaseDate: '2018-03-22',
-  },
-  {
-    id: 530385,
-    title: 'Midsommar',
-    releaseDate: '2019-07-03',
-  },
-  {
-    id: 522162,
-    title: 'Midway',
-    releaseDate: '2019-11-06',
-  },
-  {
-    id: 940551,
-    title: 'Migration',
-    releaseDate: '2023-12-06',
-  },
-  {
-    id: 3309,
-    title: 'Mildred Pierce',
-    releaseDate: '1945-10-20',
-  },
-  {
-    id: 10139,
-    title: 'Milk',
-    releaseDate: '2008-11-05',
-  },
-  {
-    id: 379,
-    title: "Miller's Crossing",
-    releaseDate: '1990-09-21',
-  },
-  {
-    id: 70,
-    title: 'Million Dollar Baby',
-    releaseDate: '2004-12-05',
-  },
-  {
-    id: 615643,
-    title: 'Minari',
-    releaseDate: '2021-02-12',
-  },
-  {
-    id: 489985,
-    title: 'Minding the Gap',
-    releaseDate: '2018-08-17',
-  },
-  {
-    id: 550022,
-    title: 'Mingle All the Way',
-    releaseDate: '2018-12-01',
-  },
-  {
-    id: 438148,
-    title: 'Minions: The Rise of Gru',
-    releaseDate: '2022-06-29',
-  },
-  {
-    id: 180,
-    title: 'Minority Report',
-    releaseDate: '2002-06-20',
-  },
-  {
-    id: 14292,
-    title: 'Miracle',
-    releaseDate: '2004-02-06',
-  },
-  {
-    id: 11881,
-    title: 'Miracle on 34th Street',
-    releaseDate: '1947-06-04',
-  },
-  {
-    id: 339984,
-    title: 'Miracles from Heaven',
-    releaseDate: '2016-03-17',
-  },
-  {
-    id: 1700,
-    title: 'Misery',
-    releaseDate: '1990-11-30',
-  },
-  {
-    id: 653567,
-    title: 'Miss Americana',
-    releaseDate: '2020-01-31',
-  },
-  {
-    id: 376290,
-    title: 'Miss Sloane',
-    releaseDate: '2016-11-25',
-  },
-  {
-    id: 290762,
-    title: 'Miss You Already',
-    releaseDate: '2015-09-12',
-  },
-  {
-    id: 768362,
-    title: 'Missing',
-    releaseDate: '2023-01-19',
-  },
-  {
-    id: 15600,
-    title: 'Missing',
-    releaseDate: '1982-02-12',
-  },
-  {
-    id: 954,
-    title: 'Mission: Impossible',
-    releaseDate: '1996-05-22',
-  },
-  {
-    id: 575264,
-    title: 'Mission: Impossible - Dead Reckoning Part One',
-    releaseDate: '2023-07-08',
-  },
-  {
-    id: 353081,
-    title: 'Mission: Impossible - Fallout',
-    releaseDate: '2018-07-25',
-  },
-  {
-    id: 56292,
-    title: 'Mission: Impossible - Ghost Protocol',
-    releaseDate: '2011-12-07',
-  },
-  {
-    id: 177677,
-    title: 'Mission: Impossible - Rogue Nation',
-    releaseDate: '2015-07-28',
-  },
-  {
-    id: 575265,
-    title: 'Mission: Impossible - The Final Reckoning',
-    releaseDate: '2025-05-17',
-  },
-  {
-    id: 1632,
-    title: 'Mississippi Burning',
-    releaseDate: '1988-12-08',
-  },
-  {
-    id: 37853,
-    title: 'Mister Roberts',
-    releaseDate: '1955-07-10',
-  },
-  {
-    id: 277834,
-    title: 'Moana',
-    releaseDate: '2016-10-13',
-  },
-  {
-    id: 1241982,
-    title: 'Moana 2',
-    releaseDate: '2024-11-21',
-  },
-  {
-    id: 10339,
-    title: 'Moby Dick',
-    releaseDate: '1956-06-27',
-  },
-  {
-    id: 3082,
-    title: 'Modern Times',
-    releaseDate: '1936-02-05',
-  },
-  {
-    id: 34308,
-    title: 'Modigliani',
-    releaseDate: '2004-05-18',
-  },
-  {
-    id: 396371,
-    title: "Molly's Game",
-    releaseDate: '2017-12-07',
-  },
-  {
-    id: 438446,
-    title: 'Mommy Dead and Dearest',
-    releaseDate: '2017-03-11',
-  },
-  {
-    id: 60308,
-    title: 'Moneyball',
-    releaseDate: '2011-09-23',
-  },
-  {
-    id: 30588,
-    title: 'Monsieur Verdoux',
-    releaseDate: '1947-09-26',
-  },
-  {
-    id: 504,
-    title: 'Monster',
-    releaseDate: '2003-12-24',
-  },
-  {
-    id: 212470,
-    title: 'Monster High: 13 Wishes',
-    releaseDate: '2013-10-08',
-  },
-  {
-    id: 360404,
-    title: 'Monster High: Boo York, Boo York',
-    releaseDate: '2015-10-19',
-  },
-  {
-    id: 324963,
-    title: 'Monster High: Haunted',
-    releaseDate: '2015-03-02',
-  },
-  {
-    id: 167313,
-    title: 'Monster High: Why Do Ghouls Fall in Love?',
-    releaseDate: '2012-02-12',
-  },
-  {
-    id: 813258,
-    title: 'Monster Pets: A Hotel Transylvania Short',
-    releaseDate: '2021-04-02',
-  },
-  {
-    id: 62211,
-    title: 'Monsters University',
-    releaseDate: '2013-06-19',
-  },
-  {
-    id: 585,
-    title: 'Monsters, Inc.',
-    releaseDate: '2001-11-01',
-  },
-  {
-    id: 762,
-    title: 'Monty Python and the Holy Grail',
-    releaseDate: '1975-04-03',
-  },
-  {
-    id: 11949,
-    title: 'Monty Python Live at the Hollywood Bowl',
-    releaseDate: '1982-06-25',
-  },
-  {
-    id: 4543,
-    title: "Monty Python's The Meaning of Life",
-    releaseDate: '1983-03-31',
-  },
-  {
-    id: 17431,
-    title: 'Moon',
-    releaseDate: '2009-06-12',
-  },
-  {
-    id: 957457,
-    title: 'Moonage Daydream',
-    releaseDate: '2022-09-15',
-  },
-  {
-    id: 376867,
-    title: 'Moonlight',
-    releaseDate: '2016-10-21',
-  },
-  {
-    id: 83666,
-    title: 'Moonrise Kingdom',
-    releaseDate: '2012-05-16',
-  },
-  {
-    id: 36107,
-    title: 'More',
-    releaseDate: '1998-09-01',
-  },
-  {
-    id: 841755,
-    title: 'Mortal Kombat Legends: Battle of the Realms',
-    releaseDate: '2021-08-30',
-  },
-  {
-    id: 664767,
-    title: "Mortal Kombat Legends: Scorpion's Revenge",
-    releaseDate: '2020-04-12',
-  },
-  {
-    id: 1007401,
-    title: 'Mortal Kombat Legends: Snow Blind',
-    releaseDate: '2022-10-09',
-  },
-  {
-    id: 824,
-    title: 'Moulin Rouge!',
-    releaseDate: '2001-05-18',
-  },
-  {
-    id: 583689,
-    title: 'Moxie',
-    releaseDate: '2021-03-03',
-  },
-  {
-    id: 374461,
-    title: 'Mr. Church',
-    releaseDate: '2016-09-16',
-  },
-  {
-    id: 24807,
-    title: 'Mr. Deeds Goes to Town',
-    releaseDate: '1936-04-09',
-  },
-  {
-    id: 31011,
-    title: 'Mr. Nobody',
-    releaseDate: '2009-11-06',
-  },
-  {
-    id: 3083,
-    title: 'Mr. Smith Goes to Washington',
-    releaseDate: '1939-10-19',
-  },
-  {
-    id: 788,
-    title: 'Mrs. Doubtfire',
-    releaseDate: '1993-11-24',
-  },
-  {
-    id: 754609,
-    title: 'Mrs. Harris Goes to Paris',
-    releaseDate: '2022-07-15',
-  },
-  {
-    id: 27367,
-    title: 'Mrs. Miniver',
-    releaseDate: '1942-07-03',
-  },
-  {
-    id: 40001,
-    title: 'Mrs. Winterbourne',
-    releaseDate: '1996-04-19',
-  },
-  {
-    id: 103731,
-    title: 'Mud',
-    releaseDate: '2013-04-26',
-  },
-  {
-    id: 414425,
-    title: 'Mudbound',
-    releaseDate: '2017-11-16',
-  },
-  {
-    id: 762509,
-    title: 'Mufasa: The Lion King',
-    releaseDate: '2024-12-18',
-  },
-  {
-    id: 10674,
-    title: 'Mulan',
-    releaseDate: '1998-06-18',
-  },
-  {
-    id: 1018,
-    title: 'Mulholland Drive',
-    releaseDate: '2001-06-06',
-  },
-  {
-    id: 612,
-    title: 'Munich',
-    releaseDate: '2005-12-23',
-  },
-  {
-    id: 758,
-    title: 'Murder Ahoy',
-    releaseDate: '1964-09-22',
-  },
-  {
-    id: 751,
-    title: 'Murder at the Gallop',
-    releaseDate: '1963-05-09',
-  },
-  {
-    id: 6037,
-    title: 'Murder by Death',
-    releaseDate: '1976-06-23',
-  },
-  {
-    id: 8438,
-    title: 'Murder in the First',
-    releaseDate: '1995-01-20',
-  },
-  {
-    id: 757,
-    title: 'Murder Most Foul',
-    releaseDate: '1964-03-01',
-  },
-  {
-    id: 4176,
-    title: 'Murder on the Orient Express',
-    releaseDate: '1974-11-22',
-  },
-  {
-    id: 750,
-    title: 'Murder She Said',
-    releaseDate: '1961-09-26',
-  },
-  {
-    id: 1834,
-    title: 'Murder, My Sweet',
-    releaseDate: '1944-12-14',
-  },
-  {
-    id: 2263,
-    title: 'Music Box',
-    releaseDate: '1989-12-22',
-  },
-  {
-    id: 12311,
-    title: 'Mutiny on the Bounty',
-    releaseDate: '1935-11-22',
-  },
-  {
-    id: 11085,
-    title: 'Mutiny on the Bounty',
-    releaseDate: '1962-11-08',
-  },
-  {
-    id: 334531,
-    title: 'My All American',
-    releaseDate: '2015-11-13',
-  },
-  {
-    id: 10377,
-    title: 'My Cousin Vinny',
-    releaseDate: '1992-03-13',
-  },
-  {
-    id: 3088,
-    title: 'My Darling Clementine',
-    releaseDate: '1946-10-17',
-  },
-  {
-    id: 434714,
-    title: 'My Days of Mercy',
-    releaseDate: '2018-03-31',
-  },
-  {
-    id: 25468,
-    title: 'My Dinner with Andre',
-    releaseDate: '1981-10-11',
-  },
-  {
-    id: 11113,
-    title: 'My Fair Lady',
-    releaseDate: '1964-12-01',
-  },
-  {
-    id: 1294203,
-    title: 'My Fault: London',
-    releaseDate: '2025-02-12',
-  },
-  {
-    id: 741011,
-    title: 'My First Summer',
-    releaseDate: '2020-10-24',
-  },
-  {
-    id: 4032,
-    title: 'My Girl',
-    releaseDate: '1991-11-27',
-  },
-  {
-    id: 10161,
-    title: 'My Left Foot: The Story of Christy Brown',
-    releaseDate: '1989-04-07',
-  },
-  {
-    id: 292177,
-    title: 'My Little Pony - Equestria Girls - Rainbow Rocks',
-    releaseDate: '2014-09-27',
-  },
-  {
-    id: 597316,
-    title: 'My Little Pony: A New Generation',
-    releaseDate: '2021-09-22',
-  },
-  {
-    id: 201676,
-    title: 'My Little Pony: Equestria Girls',
-    releaseDate: '2013-06-16',
-  },
-  {
-    id: 335360,
-    title: 'My Little Pony: The Movie',
-    releaseDate: '2017-10-05',
-  },
-  {
-    id: 13562,
-    title: 'My Man Godfrey',
-    releaseDate: '1936-09-02',
-  },
-  {
-    id: 8129,
-    title: 'My Name Is Joe',
-    releaseDate: '1998-05-15',
-  },
-  {
-    id: 682110,
-    title: 'My Octopus Teacher',
-    releaseDate: '2020-09-04',
-  },
-  {
-    id: 468,
-    title: 'My Own Private Idaho',
-    releaseDate: '1991-02-01',
-  },
-  {
-    id: 1159799,
-    title: 'My Penguin Friend',
-    releaseDate: '2024-08-07',
-  },
-  {
-    id: 744114,
-    title: 'My Policeman',
-    releaseDate: '2022-10-20',
-  },
-  {
-    id: 10024,
-    title: "My Sister's Keeper",
-    releaseDate: '2009-06-26',
-  },
-  {
-    id: 11171,
-    title: 'Mysterious Skin',
-    releaseDate: '2005-03-30',
-  },
-  {
-    id: 11305,
-    title: 'Mystery Train',
-    releaseDate: '1989-09-06',
-  },
-  {
-    id: 322,
-    title: 'Mystic River',
-    releaseDate: '2003-10-08',
-  },
-  {
-    id: 21450,
-    title: 'Naked',
-    releaseDate: '1993-08-06',
-  },
-  {
-    id: 2742,
-    title: 'Naked Lunch',
-    releaseDate: '1991-12-27',
-  },
-  {
-    id: 669,
-    title: 'Nanook of the North',
-    releaseDate: '1922-06-11',
-  },
-  {
-    id: 519035,
-    title: 'Nappily Ever After',
-    releaseDate: '2018-09-21',
-  },
-  {
-    id: 3121,
-    title: 'Nashville',
-    releaseDate: '1975-06-11',
-  },
-  {
-    id: 5825,
-    title: "National Lampoon's Christmas Vacation",
-    releaseDate: '1989-11-30',
-  },
-  {
-    id: 11153,
-    title: "National Lampoon's Vacation",
-    releaseDate: '1983-07-29',
-  },
-  {
-    id: 241,
-    title: 'Natural Born Killers',
-    releaseDate: '1994-08-26',
-  },
-  {
-    id: 926676,
-    title: 'Navalny',
-    releaseDate: '2022-04-08',
-  },
-  {
-    id: 129670,
-    title: 'Nebraska',
-    releaseDate: '2013-09-21',
-  },
-  {
-    id: 328387,
-    title: 'Nerve',
-    releaseDate: '2016-06-27',
-  },
-  {
-    id: 10774,
-    title: 'Network',
-    releaseDate: '1976-11-27',
-  },
-  {
-    id: 391757,
-    title: 'Never Back Down: No Surrender',
-    releaseDate: '2016-06-07',
-  },
-  {
-    id: 595671,
-    title: 'Never Rarely Sometimes Always',
-    releaseDate: '2020-03-13',
-  },
-  {
-    id: 37757,
-    title: 'Never Sleep Again: The Elm Street Legacy',
-    releaseDate: '2010-05-04',
-  },
-  {
-    id: 14613,
-    title: 'Next Avengers: Heroes of Tomorrow',
-    releaseDate: '2008-09-02',
-  },
-  {
-    id: 19119,
-    title: 'Night and the City',
-    releaseDate: '1950-06-15',
-  },
-  {
-    id: 10331,
-    title: 'Night of the Living Dead',
-    releaseDate: '1968-10-04',
-  },
-  {
-    id: 339,
-    title: 'Night on Earth',
-    releaseDate: '1991-12-12',
-  },
-  {
-    id: 242582,
-    title: 'Nightcrawler',
-    releaseDate: '2014-10-23',
-  },
-  {
-    id: 19169,
-    title: 'Nightmare Alley',
-    releaseDate: '1947-10-09',
-  },
-  {
-    id: 961323,
-    title: 'Nimona',
-    releaseDate: '2023-06-23',
-  },
-  {
-    id: 1859,
-    title: 'Ninotchka',
-    releaseDate: '1939-11-16',
-  },
-  {
-    id: 6977,
-    title: 'No Country for Old Men',
-    releaseDate: '2007-11-09',
-  },
-  {
-    id: 46247,
-    title: 'No Time for Nuts',
-    releaseDate: '2006-10-23',
-  },
-  {
-    id: 370172,
-    title: 'No Time to Die',
-    releaseDate: '2021-09-29',
-  },
-  {
-    id: 615457,
-    title: 'Nobody',
-    releaseDate: '2021-03-18',
-  },
-  {
-    id: 1007734,
-    title: 'Nobody 2',
-    releaseDate: '2025-08-13',
-  },
-  {
-    id: 340666,
-    title: 'Nocturnal Animals',
-    releaseDate: '2016-11-04',
-  },
-  {
-    id: 26670,
-    title: 'Noises Off...',
-    releaseDate: '1992-03-20',
-  },
-  {
-    id: 581734,
-    title: 'Nomadland',
-    releaseDate: '2021-01-29',
-  },
-  {
-    id: 40842,
-    title: 'Norma Rae',
-    releaseDate: '1979-03-02',
-  },
-  {
-    id: 213,
-    title: 'North by Northwest',
-    releaseDate: '1959-08-06',
-  },
-  {
-    id: 9701,
-    title: 'North Country',
-    releaseDate: '2005-02-12',
-  },
-  {
-    id: 1259,
-    title: 'Notes on a Scandal',
-    releaseDate: '2006-12-25',
-  },
-  {
-    id: 303,
-    title: 'Notorious',
-    releaseDate: '1946-08-21',
-  },
-  {
-    id: 509,
-    title: 'Notting Hill',
-    releaseDate: '1999-05-21',
-  },
-  {
-    id: 90369,
-    title: 'Now Is Good',
-    releaseDate: '2012-09-19',
-  },
-  {
-    id: 75656,
-    title: 'Now You See Me',
-    releaseDate: '2013-05-29',
-  },
-  {
-    id: 32847,
-    title: 'Now, Voyager',
-    releaseDate: '1942-10-22',
-  },
-  {
-    id: 33511,
-    title: 'Nowhere Boy',
-    releaseDate: '2009-12-25',
-  },
-  {
-    id: 728142,
-    title: 'Nowhere Special',
-    releaseDate: '2020-09-10',
-  },
-  {
-    id: 484133,
-    title: 'Nude',
-    releaseDate: '2017-10-29',
-  },
-  {
-    id: 1214931,
-    title: 'Nuremberg',
-    releaseDate: '2025-11-06',
-  },
-  {
-    id: 895549,
-    title: 'NYAD',
-    releaseDate: '2023-10-18',
-  },
-  {
-    id: 134,
-    title: 'O Brother, Where Art Thou?',
-    releaseDate: '2000-08-30',
-  },
-  {
-    id: 377462,
-    title: 'O.J.: Made in America',
-    releaseDate: '2016-05-20',
-  },
-  {
-    id: 161,
-    title: "Ocean's Eleven",
-    releaseDate: '2001-12-07',
-  },
-  {
-    id: 36970,
-    title: 'Oceans',
-    releaseDate: '2010-01-22',
-  },
-  {
-    id: 13466,
-    title: 'October Sky',
-    releaseDate: '1999-02-19',
-  },
-  {
-    id: 43461,
-    title: 'Odd Man Out',
-    releaseDate: '1947-01-30',
-  },
-  {
-    id: 9609,
-    title: 'Of Mice and Men',
-    releaseDate: '1992-09-16',
-  },
-  {
-    id: 1542,
-    title: 'Office Space',
-    releaseDate: '1999-02-19',
-  },
-  {
-    id: 393624,
-    title: 'Official Secrets',
-    releaseDate: '2019-08-30',
-  },
-  {
-    id: 387426,
-    title: 'Okja',
-    releaseDate: '2017-06-28',
-  },
-  {
-    id: 785663,
-    title: 'Old Henry',
-    releaseDate: '2021-10-01',
-  },
-  {
-    id: 10949,
-    title: 'Oliver Twist',
-    releaseDate: '1948-06-28',
-  },
-  {
-    id: 17917,
-    title: 'Oliver!',
-    releaseDate: '1968-09-26',
-  },
-  {
-    id: 11816,
-    title: 'On Golden Pond',
-    releaseDate: '1981-12-04',
-  },
-  {
-    id: 339380,
-    title: 'On the Basis of Sex',
-    releaseDate: '2018-12-25',
-  },
-  {
-    id: 654,
-    title: 'On the Waterfront',
-    releaseDate: '1954-06-22',
-  },
-  {
-    id: 5723,
-    title: 'Once',
-    releaseDate: '2007-03-23',
-  },
-  {
-    id: 567604,
-    title: 'Once Upon a Deadpool',
-    releaseDate: '2018-12-11',
-  },
-  {
-    id: 1139087,
-    title: 'Once Upon a Studio',
-    releaseDate: '2023-09-24',
-  },
-  {
-    id: 311,
-    title: 'Once Upon a Time in America',
-    releaseDate: '1984-05-23',
-  },
-  {
-    id: 466272,
-    title: 'Once Upon a Time... in Hollywood',
-    releaseDate: '2019-07-24',
-  },
-  {
-    id: 527,
-    title: 'Once Were Warriors',
-    releaseDate: '1994-09-02',
-  },
-  {
-    id: 1054867,
-    title: 'One Battle After Another',
-    releaseDate: '2025-09-23',
-  },
-  {
-    id: 566368,
-    title: 'One Child Nation',
-    releaseDate: '2019-03-29',
-  },
-  {
-    id: 51828,
-    title: 'One Day',
-    releaseDate: '2011-03-02',
-  },
-  {
-    id: 164558,
-    title: 'One Direction: This Is Us',
-    releaseDate: '2013-08-20',
-  },
-  {
-    id: 283559,
-    title: 'One Direction: Where We Are - The Concert Film',
-    releaseDate: '2014-10-08',
-  },
-  {
-    id: 510,
-    title: "One Flew Over the Cuckoo's Nest",
-    releaseDate: '1975-11-19',
-  },
-  {
-    id: 53211,
-    title: 'One Froggy Evening',
-    releaseDate: '1955-12-30',
-  },
-  {
-    id: 12230,
-    title: 'One Hundred and One Dalmatians',
-    releaseDate: '1961-01-25',
-  },
-  {
-    id: 760774,
-    title: 'One Life',
-    releaseDate: '2023-12-21',
-  },
-  {
-    id: 13933,
-    title: 'One Man Band',
-    releaseDate: '2005-06-21',
-  },
-  {
-    id: 661914,
-    title: 'One Night in Miami...',
-    releaseDate: '2020-12-25',
-  },
-  {
-    id: 430,
-    title: 'One, Two, Three',
-    releaseDate: '1961-12-15',
-  },
-  {
-    id: 43832,
-    title: 'Only Angels Have Wings',
-    releaseDate: '1939-05-15',
-  },
-  {
-    id: 152603,
-    title: 'Only Lovers Left Alive',
-    releaseDate: '2013-12-12',
-  },
-  {
-    id: 395991,
-    title: 'Only the Brave',
-    releaseDate: '2017-09-22',
-  },
-  {
-    id: 508439,
-    title: 'Onward',
-    releaseDate: '2020-02-29',
-  },
-  {
-    id: 2055,
-    title: 'Open Range',
-    releaseDate: '2003-08-11',
-  },
-  {
-    id: 33665,
-    title: 'Opening Night',
-    releaseDate: '1977-12-22',
-  },
-  {
-    id: 9660,
-    title: 'Operation Petticoat',
-    releaseDate: '1959-12-05',
-  },
-  {
-    id: 428836,
-    title: 'Ophelia',
-    releaseDate: '2019-06-28',
-  },
-  {
-    id: 872585,
-    title: 'Oppenheimer',
-    releaseDate: '2023-07-19',
-  },
-  {
-    id: 974036,
-    title: 'Ordinary Angels',
-    releaseDate: '2024-02-22',
-  },
-  {
-    id: 16619,
-    title: 'Ordinary People',
-    releaseDate: '1980-09-19',
-  },
-  {
-    id: 47697,
-    title: 'Othello',
-    releaseDate: '1951-11-28',
-  },
-  {
-    id: 583903,
-    title: 'Our Friend',
-    releaseDate: '2019-09-04',
-  },
-  {
-    id: 701,
-    title: 'Our Hospitality',
-    releaseDate: '1923-11-19',
-  },
-  {
-    id: 706860,
-    title: 'Out',
-    releaseDate: '2020-05-22',
-  },
-  {
-    id: 606,
-    title: 'Out of Africa',
-    releaseDate: '1985-12-20',
-  },
-  {
-    id: 678,
-    title: 'Out of the Past',
-    releaseDate: '1947-11-25',
-  },
-  {
-    id: 560050,
-    title: 'Over the Moon',
-    releaseDate: '2020-10-16',
-  },
-  {
-    id: 527776,
-    title: 'Overcomer',
-    releaseDate: '2019-08-22',
-  },
-  {
-    id: 6023,
-    title: 'P.S. I Love You',
-    releaseDate: '2007-11-15',
-  },
-  {
-    id: 116149,
-    title: 'Paddington',
-    releaseDate: '2014-11-24',
-  },
-  {
-    id: 346648,
-    title: 'Paddington 2',
-    releaseDate: '2017-11-09',
-  },
-  {
-    id: 8879,
-    title: 'Pale Rider',
-    releaseDate: '1985-06-28',
-  },
-  {
-    id: 587792,
-    title: 'Palm Springs',
-    releaseDate: '2020-07-10',
-  },
-  {
-    id: 458220,
-    title: 'Palmer',
-    releaseDate: '2021-01-28',
-  },
-  {
-    id: 11293,
-    title: 'Paper Moon',
-    releaseDate: '1973-05-09',
-  },
-  {
-    id: 140420,
-    title: 'Paperman',
-    releaseDate: '2012-11-02',
-  },
-  {
-    id: 433498,
-    title: 'Papillon',
-    releaseDate: '2017-09-07',
-  },
-  {
-    id: 5924,
-    title: 'Papillon',
-    releaseDate: '1973-12-16',
-  },
-  {
-    id: 17204,
-    title: 'Paradise Lost: The Child Murders at Robin Hood Hills',
-    releaseDate: '1996-12-03',
-  },
-  {
-    id: 77174,
-    title: 'ParaNorman',
-    releaseDate: '2012-08-03',
-  },
-  {
-    id: 31225,
-    title: 'Paris Is Burning',
-    releaseDate: '1991-03-13',
-  },
-  {
-    id: 655,
-    title: 'Paris, Texas',
-    releaseDate: '1984-07-16',
-  },
-  {
-    id: 202141,
-    title: 'Particle Fever',
-    releaseDate: '2013-06-14',
-  },
-  {
-    id: 24480,
-    title: 'Partly Cloudy',
-    releaseDate: '2009-05-28',
-  },
-  {
-    id: 130925,
-    title: 'Partysaurus Rex',
-    releaseDate: '2012-09-14',
-  },
-  {
-    id: 666277,
-    title: 'Past Lives',
-    releaseDate: '2023-06-02',
-  },
-  {
-    id: 11577,
-    title: 'Pat Garrett & Billy the Kid',
-    releaseDate: '1973-05-23',
-  },
-  {
-    id: 10312,
-    title: 'Patch Adams',
-    releaseDate: '1998-12-25',
-  },
-  {
-    id: 370755,
-    title: 'Paterson',
-    releaseDate: '2016-11-17',
-  },
-  {
-    id: 975,
-    title: 'Paths of Glory',
-    releaseDate: '1957-10-25',
-  },
-  {
-    id: 388399,
-    title: 'Patriots Day',
-    releaseDate: '2016-12-12',
-  },
-  {
-    id: 11202,
-    title: 'Patton',
-    releaseDate: '1970-01-25',
-  },
-  {
-    id: 476968,
-    title: 'Paul, Apostle of Christ',
-    releaseDate: '2018-03-23',
-  },
-  {
-    id: 743439,
-    title: 'PAW Patrol: Jet to the Rescue',
-    releaseDate: '2020-09-10',
-  },
-  {
-    id: 552095,
-    title: 'PAW Patrol: Mighty Pups',
-    releaseDate: '2018-10-04',
-  },
-  {
-    id: 893723,
-    title: 'PAW Patrol: The Mighty Movie',
-    releaseDate: '2023-09-21',
-  },
-  {
-    id: 675445,
-    title: 'PAW Patrol: The Movie',
-    releaseDate: '2021-08-09',
-  },
-  {
-    id: 10647,
-    title: 'Pay It Forward',
-    releaseDate: '2000-10-20',
-  },
-  {
-    id: 13689,
-    title: 'Peaceful Warrior',
-    releaseDate: '2006-03-30',
-  },
-  {
-    id: 949423,
-    title: 'Pearl',
-    releaseDate: '2022-09-16',
-  },
-  {
-    id: 11167,
-    title: 'Peeping Tom',
-    releaseDate: '1960-04-07',
-  },
-  {
-    id: 245913,
-    title: 'Pelé: Birth of a Legend',
-    releaseDate: '2016-05-06',
-  },
-  {
-    id: 1034716,
-    title: 'People We Meet on Vacation',
-    releaseDate: '2026-01-06',
-  },
-  {
-    id: 1427,
-    title: 'Perfume: The Story of a Murderer',
-    releaseDate: '2006-09-13',
-  },
-  {
-    id: 13949,
-    title: 'Persuasion',
-    releaseDate: '2007-04-01',
-  },
-  {
-    id: 10693,
-    title: 'Peter Pan',
-    releaseDate: '1953-02-05',
-  },
-  {
-    id: 10601,
-    title: 'Peter Pan',
-    releaseDate: '2003-12-18',
-  },
-  {
-    id: 522478,
-    title: 'Peter Rabbit 2: The Runaway',
-    releaseDate: '2021-03-25',
-  },
-  {
-    id: 27327,
-    title: 'Phantom of the Paradise',
-    releaseDate: '1974-10-31',
-  },
-  {
-    id: 400617,
-    title: 'Phantom Thread',
-    releaseDate: '2017-12-25',
-  },
-  {
-    id: 9800,
-    title: 'Philadelphia',
-    releaseDate: '1993-12-22',
-  },
-  {
-    id: 205220,
-    title: 'Philomena',
-    releaseDate: '2013-11-01',
-  },
-  {
-    id: 71689,
-    title: 'Phineas and Ferb The Movie: Across the 2nd Dimension',
-    releaseDate: '2011-08-05',
-  },
-  {
-    id: 594328,
-    title: 'Phineas and Ferb the Movie: Candace Against the Universe',
-    releaseDate: '2020-08-27',
-  },
-  {
-    id: 392216,
-    title: 'Phineas and Ferb: Star Wars',
-    releaseDate: '2014-07-26',
-  },
-  {
-    id: 19079,
-    title: 'Phoebe in Wonderland',
-    releaseDate: '2008-02-07',
-  },
-  {
-    id: 473,
-    title: 'Pi',
-    releaseDate: '1998-07-10',
-  },
-  {
-    id: 25955,
-    title: 'Pickup on South Street',
-    releaseDate: '1953-05-27',
-  },
-  {
-    id: 11020,
-    title: 'Picnic at Hanging Rock',
-    releaseDate: '1975-09-02',
-  },
-  {
-    id: 641662,
-    title: 'Pieces of a Woman',
-    releaseDate: '2020-12-30',
-  },
-  {
-    id: 4952,
-    title: 'Pillow Talk',
-    releaseDate: '1959-10-07',
-  },
-  {
-    id: 25771,
-    title: 'Pink Floyd: Live at Pompeii',
-    releaseDate: '1972-10-25',
-  },
-  {
-    id: 12104,
-    title: 'Pink Floyd: The Wall',
-    releaseDate: '1982-07-14',
-  },
-  {
-    id: 10895,
-    title: 'Pinocchio',
-    releaseDate: '1940-02-23',
-  },
-  {
-    id: 399106,
-    title: 'Piper',
-    releaseDate: '2016-06-16',
-  },
-  {
-    id: 3293,
-    title: 'Pirates of Silicon Valley',
-    releaseDate: '1999-06-20',
-  },
-  {
-    id: 285,
-    title: "Pirates of the Caribbean: At World's End",
-    releaseDate: '2007-05-19',
-  },
-  {
-    id: 58,
-    title: "Pirates of the Caribbean: Dead Man's Chest",
-    releaseDate: '2006-07-06',
-  },
-  {
-    id: 22,
-    title: 'Pirates of the Caribbean: The Curse of the Black Pearl',
-    releaseDate: '2003-07-09',
-  },
-  {
-    id: 114150,
-    title: 'Pitch Perfect',
-    releaseDate: '2012-09-28',
-  },
-  {
-    id: 13681,
-    title: 'Places in the Heart',
-    releaseDate: '1984-09-11',
-  },
-  {
-    id: 2609,
-    title: 'Planes, Trains and Automobiles',
-    releaseDate: '1987-11-26',
-  },
-  {
-    id: 30675,
-    title: 'Planet Hulk',
-    releaseDate: '2010-02-02',
-  },
-  {
-    id: 871,
-    title: 'Planet of the Apes',
-    releaseDate: '1968-02-07',
-  },
-  {
-    id: 792,
-    title: 'Platoon',
-    releaseDate: '1986-12-19',
-  },
-  {
-    id: 11610,
-    title: 'Play It Again, Sam',
-    releaseDate: '1972-05-04',
-  },
-  {
-    id: 2657,
-    title: 'Pleasantville',
-    releaseDate: '1998-09-17',
-  },
-  {
-    id: 248,
-    title: 'Pocketful of Miracles',
-    releaseDate: '1961-12-18',
-  },
-  {
-    id: 26039,
-    title: 'Point Blank',
-    releaseDate: '1967-08-30',
-  },
-  {
-    id: 1089,
-    title: 'Point Break',
-    releaseDate: '1991-07-12',
-  },
-  {
-    id: 609,
-    title: 'Poltergeist',
-    releaseDate: '1982-06-04',
-  },
-  {
-    id: 14269,
-    title: 'Polyester',
-    releaseDate: '1981-05-29',
-  },
-  {
-    id: 14903,
-    title: "Pooh's Grand Adventure: The Search for Christopher Robin",
-    releaseDate: '1997-08-05',
-  },
-  {
-    id: 792307,
-    title: 'Poor Things',
-    releaseDate: '2023-12-07',
-  },
-  {
-    id: 21484,
-    title: 'Possession',
-    releaseDate: '1981-05-27',
-  },
-  {
-    id: 24348,
-    title: 'Powaqqatsi',
-    releaseDate: '1988-04-29',
-  },
-  {
-    id: 21634,
-    title: 'Prayers for Bobby',
-    releaseDate: '2009-01-24',
-  },
-  {
-    id: 25793,
-    title: 'Precious',
-    releaseDate: '2009-11-06',
-  },
-  {
-    id: 106,
-    title: 'Predator',
-    releaseDate: '1987-06-12',
-  },
-  {
-    id: 1242898,
-    title: 'Predator: Badlands',
-    releaseDate: '2025-11-05',
-  },
-  {
-    id: 1376434,
-    title: 'Predator: Killer of Killers',
-    releaseDate: '2025-06-05',
-  },
-  {
-    id: 206487,
-    title: 'Predestination',
-    releaseDate: '2014-08-28',
-  },
-  {
-    id: 13042,
-    title: 'Presto',
-    releaseDate: '2008-06-27',
-  },
-  {
-    id: 114,
-    title: 'Pretty Woman',
-    releaseDate: '1990-03-23',
-  },
-  {
-    id: 766507,
-    title: 'Prey',
-    releaseDate: '2022-08-02',
-  },
-  {
-    id: 393765,
-    title: 'Priceless',
-    releaseDate: '2016-10-14',
-  },
-  {
-    id: 234200,
-    title: 'Pride',
-    releaseDate: '2014-09-12',
-  },
-  {
-    id: 4348,
-    title: 'Pride & Prejudice',
-    releaseDate: '2005-09-16',
-  },
-  {
-    id: 1592,
-    title: 'Primal Fear',
-    releaseDate: '1996-03-06',
-  },
-  {
-    id: 176241,
-    title: 'Prison Break: The Final Break',
-    releaseDate: '2009-09-10',
-  },
-  {
-    id: 146233,
-    title: 'Prisoners',
-    releaseDate: '2013-09-19',
-  },
-  {
-    id: 420622,
-    title: 'Professor Marston and the Wonder Women',
-    releaseDate: '2017-10-13',
-  },
-  {
-    id: 932430,
-    title: 'Prom Pact',
-    releaseDate: '2023-03-30',
-  },
-  {
-    id: 582014,
-    title: 'Promising Young Woman',
-    releaseDate: '2020-12-13',
-  },
-  {
-    id: 457840,
-    title: 'Psych: The Movie',
-    releaseDate: '2017-12-07',
-  },
-  {
-    id: 539,
-    title: 'Psycho',
-    releaseDate: '1960-06-22',
-  },
-  {
-    id: 680,
-    title: 'Pulp Fiction',
-    releaseDate: '1994-09-10',
-  },
-  {
-    id: 8428,
-    title: 'Pump Up the Volume',
-    releaseDate: '1990-08-22',
-  },
-  {
-    id: 5205,
-    title: 'Pumping Iron',
-    releaseDate: '1977-01-18',
-  },
-  {
-    id: 8051,
-    title: 'Punch-Drunk Love',
-    releaseDate: '2002-10-11',
-  },
-  {
-    id: 26513,
-    title: 'Punishment Park',
-    releaseDate: '1971-10-01',
-  },
-  {
-    id: 229407,
-    title: 'Puppy',
-    releaseDate: '2013-12-10',
-  },
-  {
-    id: 762975,
-    title: 'Purple Hearts',
-    releaseDate: '2022-07-29',
-  },
-  {
-    id: 315162,
-    title: 'Puss in Boots: The Last Wish',
-    releaseDate: '2022-12-07',
-  },
-  {
-    id: 25016,
-    title: 'Pygmalion',
-    releaseDate: '1938-10-06',
-  },
-  {
-    id: 631143,
-    title: 'QT8: The First Eight',
-    releaseDate: '2019-10-21',
-  },
-  {
-    id: 10373,
-    title: 'Quadrophenia',
-    releaseDate: '1979-09-14',
-  },
-  {
-    id: 536743,
-    title: 'Queen & Slim',
-    releaseDate: '2019-11-27',
-  },
-  {
-    id: 317557,
-    title: 'Queen of Katwe',
-    releaseDate: '2016-09-23',
-  },
-  {
-    id: 74406,
-    title: 'Queen: Days of Our Lives',
-    releaseDate: '2011-05-29',
-  },
-  {
-    id: 20575,
-    title: 'Queen: Live at Wembley Stadium',
-    releaseDate: '1986-07-12',
-  },
-  {
-    id: 10876,
-    title: 'Quills',
-    releaseDate: '2000-11-22',
-  },
-  {
-    id: 11450,
-    title: 'Quiz Show',
-    releaseDate: '1994-08-25',
-  },
-  {
-    id: 11620,
-    title: 'Quo Vadis',
-    releaseDate: '1951-11-08',
-  },
-  {
-    id: 52971,
-    title: 'Rabbit of Seville',
-    releaseDate: '1950-12-16',
-  },
-  {
-    id: 52954,
-    title: 'Rabbit Seasoning',
-    releaseDate: '1952-09-20',
-  },
-  {
-    id: 323677,
-    title: 'Race',
-    releaseDate: '2016-02-19',
-  },
-  {
-    id: 300792,
-    title: 'Racing Extinction',
-    releaseDate: '2015-01-24',
-  },
-  {
-    id: 13920,
-    title: 'Radio',
-    releaseDate: '2003-10-24',
-  },
-  {
-    id: 30890,
-    title: 'Radio Days',
-    releaseDate: '1987-01-30',
-  },
-  {
-    id: 1578,
-    title: 'Raging Bull',
-    releaseDate: '1980-11-14',
-  },
-  {
-    id: 110490,
-    title: 'Rags',
-    releaseDate: '2012-05-28',
-  },
-  {
-    id: 85,
-    title: 'Raiders of the Lost Ark',
-    releaseDate: '1981-06-12',
-  },
-  {
-    id: 380,
-    title: 'Rain Man',
-    releaseDate: '1988-12-12',
-  },
-  {
-    id: 378,
-    title: 'Raising Arizona',
-    releaseDate: '1987-03-13',
-  },
-  {
-    id: 461955,
-    title: 'Rakka',
-    releaseDate: '2017-06-14',
-  },
-  {
-    id: 404368,
-    title: 'Ralph Breaks the Internet',
-    releaseDate: '2018-11-20',
-  },
-  {
-    id: 2062,
-    title: 'Ratatouille',
-    releaseDate: '2007-06-28',
-  },
-  {
-    id: 29698,
-    title: 'Ratcatcher',
-    releaseDate: '1999-11-12',
-  },
-  {
-    id: 1677,
-    title: 'Ray',
-    releaseDate: '2004-10-29',
-  },
-  {
-    id: 527774,
-    title: 'Raya and the Last Dragon',
-    releaseDate: '2021-03-03',
-  },
-  {
-    id: 493099,
-    title: 'RBG',
-    releaseDate: '2018-05-04',
-  },
-  {
-    id: 1694,
-    title: 'Re-Animator',
-    releaseDate: '1985-10-18',
-  },
-  {
-    id: 567609,
-    title: 'Ready or Not',
-    releaseDate: '2019-08-21',
-  },
-  {
-    id: 333339,
-    title: 'Ready Player One',
-    releaseDate: '2018-03-28',
-  },
-  {
-    id: 39254,
-    title: 'Real Steel',
-    releaseDate: '2011-09-28',
-  },
-  {
-    id: 567,
-    title: 'Rear Window',
-    releaseDate: '1954-08-01',
-  },
-  {
-    id: 223,
-    title: 'Rebecca',
-    releaseDate: '1940-03-23',
-  },
-  {
-    id: 221,
-    title: 'Rebel Without a Cause',
-    releaseDate: '1955-10-27',
-  },
-  {
-    id: 256876,
-    title: 'Red Army',
-    releaseDate: '2014-08-13',
-  },
-  {
-    id: 66125,
-    title: 'Red Dog',
-    releaseDate: '2011-08-04',
-  },
-  {
-    id: 9533,
-    title: 'Red Dragon',
-    releaseDate: '2002-10-02',
-  },
-  {
-    id: 447061,
-    title: 'Red Nose Day Actually',
-    releaseDate: '2017-03-24',
-  },
-  {
-    id: 845781,
-    title: 'Red One',
-    releaseDate: '2024-10-31',
-  },
-  {
-    id: 3089,
-    title: 'Red River',
-    releaseDate: '1948-09-17',
-  },
-  {
-    id: 930094,
-    title: 'Red, White & Royal Blue',
-    releaseDate: '2023-07-27',
-  },
-  {
-    id: 698508,
-    title: 'Redeeming Love',
-    releaseDate: '2022-01-21',
-  },
-  {
-    id: 1327862,
-    title: 'Regretting You',
-    releaseDate: '2025-10-22',
-  },
-  {
-    id: 354857,
-    title: 'Regular Show: The Movie',
-    releaseDate: '2015-09-01',
-  },
-  {
-    id: 487672,
-    title: 'Reign of the Supermen',
-    releaseDate: '2019-01-13',
-  },
-  {
-    id: 2355,
-    title: 'Reign Over Me',
-    releaseDate: '2007-03-22',
-  },
-  {
-    id: 32536,
-    title: 'Rejected',
-    releaseDate: '2000-07-25',
-  },
-  {
-    id: 13007,
-    title: 'Religulous',
-    releaseDate: '2008-10-01',
-  },
-  {
-    id: 302528,
-    title: 'Remember',
-    releaseDate: '2015-10-23',
-  },
-  {
-    id: 23169,
-    title: 'Remember Me',
-    releaseDate: '2010-03-11',
-  },
-  {
-    id: 188538,
-    title: 'Remember Sunday',
-    releaseDate: '2013-04-21',
-  },
-  {
-    id: 10637,
-    title: 'Remember the Titans',
-    releaseDate: '2000-09-29',
-  },
-  {
-    id: 1208348,
-    title: 'Rental Family',
-    releaseDate: '2025-11-20',
-  },
-  {
-    id: 11481,
-    title: 'Repulsion',
-    releaseDate: '1965-06-01',
-  },
-  {
-    id: 641,
-    title: 'Requiem for a Dream',
-    releaseDate: '2000-10-06',
-  },
-  {
-    id: 333377,
-    title: 'Requiem for the American Dream',
-    releaseDate: '2015-04-18',
-  },
-  {
-    id: 921655,
-    title: 'Rescued by Ruby',
-    releaseDate: '2022-03-17',
-  },
-  {
-    id: 443129,
-    title: 'Reservoir Dogs',
-    releaseDate: '1991-06-01',
-  },
-  {
-    id: 500,
-    title: 'Reservoir Dogs',
-    releaseDate: '1992-09-02',
-  },
-  {
-    id: 785539,
-    title: 'Resort to Love',
-    releaseDate: '2021-07-29',
-  },
-  {
-    id: 39312,
-    title: 'Restrepo',
-    releaseDate: '2010-06-25',
-  },
-  {
-    id: 1892,
-    title: 'Return of the Jedi',
-    releaseDate: '1983-05-25',
-  },
-  {
-    id: 292011,
-    title: 'Richard Jewell',
-    releaseDate: '2019-12-13',
-  },
-  {
-    id: 1208476,
-    title: 'Ricky Gervais: Armageddon',
-    releaseDate: '2023-12-01',
-  },
-  {
-    id: 508933,
-    title: 'Ricky Gervais: Humanity',
-    releaseDate: '2018-03-13',
-  },
-  {
-    id: 973164,
-    title: 'Ricky Gervais: SuperNature',
-    releaseDate: '2022-05-24',
-  },
-  {
-    id: 487291,
-    title: 'Ride Like a Girl',
-    releaseDate: '2019-09-26',
-  },
-  {
-    id: 36206,
-    title: 'Ride the High Country',
-    releaseDate: '1962-06-20',
-  },
-  {
-    id: 355338,
-    title: "Riley's First Date?",
-    releaseDate: '2015-11-03',
-  },
-  {
-    id: 301,
-    title: 'Rio Bravo',
-    releaseDate: '1959-03-08',
-  },
-  {
-    id: 759054,
-    title: 'Rise',
-    releaseDate: '2022-06-23',
-  },
-  {
-    id: 81188,
-    title: 'Rise of the Guardians',
-    releaseDate: '2012-11-21',
-  },
-  {
-    id: 61791,
-    title: 'Rise of the Planet of the Apes',
-    releaseDate: '2011-08-03',
-  },
-  {
-    id: 4147,
-    title: 'Road to Perdition',
-    releaseDate: '2002-07-12',
-  },
-  {
-    id: 11886,
-    title: 'Robin Hood',
-    releaseDate: '1973-11-08',
-  },
-  {
-    id: 649928,
-    title: 'Robin Robin',
-    releaseDate: '2021-10-09',
-  },
-  {
-    id: 493100,
-    title: 'Robin Williams: Come Inside My Mind',
-    releaseDate: '2018-01-19',
-  },
-  {
-    id: 5548,
-    title: 'RoboCop',
-    releaseDate: '1987-07-17',
-  },
-  {
-    id: 42979,
-    title: 'Robot Chicken: Star Wars',
-    releaseDate: '2007-07-17',
-  },
-  {
-    id: 51888,
-    title: 'Robot Chicken: Star Wars Episode III',
-    releaseDate: '2010-12-19',
-  },
-  {
-    id: 504608,
-    title: 'Rocketman',
-    releaseDate: '2019-05-17',
-  },
-  {
-    id: 1366,
-    title: 'Rocky',
-    releaseDate: '1976-11-20',
-  },
-  {
-    id: 1367,
-    title: 'Rocky II',
-    releaseDate: '1979-06-15',
-  },
-  {
-    id: 1374,
-    title: 'Rocky IV',
-    releaseDate: '1985-11-21',
-  },
-  {
-    id: 1779,
-    title: 'Roger & Me',
-    releaseDate: '1989-09-01',
-  },
-  {
-    id: 290382,
-    title: 'Roger Waters: The Wall',
-    releaseDate: '2014-09-29',
-  },
-  {
-    id: 330459,
-    title: 'Rogue One: A Star Wars Story',
-    releaseDate: '2016-12-14',
-  },
-  {
-    id: 804,
-    title: 'Roman Holiday',
-    releaseDate: '1953-08-26',
-  },
-  {
-    id: 6003,
-    title: 'Romeo and Juliet',
-    releaseDate: '1968-04-02',
-  },
-  {
-    id: 482321,
-    title: "Ron's Gone Wrong",
-    releaseDate: '2021-10-14',
-  },
-  {
-    id: 361931,
-    title: 'Ronaldo',
-    releaseDate: '2015-11-09',
-  },
-  {
-    id: 1242419,
-    title: 'Roofman',
-    releaseDate: '2025-10-08',
-  },
-  {
-    id: 264644,
-    title: 'Room',
-    releaseDate: '2015-10-16',
-  },
-  {
-    id: 1580,
-    title: 'Rope',
-    releaseDate: '1948-02-01',
-  },
-  {
-    id: 826769,
-    title: 'Rosaline',
-    releaseDate: '2022-10-11',
-  },
-  {
-    id: 805,
-    title: "Rosemary's Baby",
-    releaseDate: '1968-06-12',
-  },
-  {
-    id: 10220,
-    title: 'Rounders',
-    releaseDate: '1998-09-11',
-  },
-  {
-    id: 1040148,
-    title: 'Ruby Gillman, Teenage Kraken',
-    releaseDate: '2023-06-28',
-  },
-  {
-    id: 103332,
-    title: 'Ruby Sparks',
-    releaseDate: '2012-07-25',
-  },
-  {
-    id: 244403,
-    title: 'Rudderless',
-    releaseDate: '2014-10-17',
-  },
-  {
-    id: 13382,
-    title: 'Rudolph the Red-Nosed Reindeer',
-    releaseDate: '1964-12-06',
-  },
-  {
-    id: 14534,
-    title: 'Rudy',
-    releaseDate: '1993-09-17',
-  },
-  {
-    id: 546121,
-    title: 'Run',
-    releaseDate: '2020-11-20',
-  },
-  {
-    id: 18197,
-    title: 'Running on Empty',
-    releaseDate: '1988-09-09',
-  },
-  {
-    id: 96721,
-    title: 'Rush',
-    releaseDate: '2013-09-02',
-  },
-  {
-    id: 2109,
-    title: 'Rush Hour',
-    releaseDate: '1998-09-18',
-  },
-  {
-    id: 11545,
-    title: 'Rushmore',
-    releaseDate: '1998-12-11',
-  },
-  {
-    id: 38953,
-    title: "Ryan's Daughter",
-    releaseDate: '1970-03-19',
-  },
-  {
-    id: 1049638,
-    title: 'Rye Lane',
-    releaseDate: '2023-03-17',
-  },
-  {
-    id: 6620,
-    title: 'Sabrina',
-    releaseDate: '1954-09-01',
-  },
-  {
-    id: 112949,
-    title: 'Safe Haven',
-    releaseDate: '2013-02-07',
-  },
-  {
-    id: 727306,
-    title: 'Safety',
-    releaseDate: '2020-12-11',
-  },
-  {
-    id: 22596,
-    title: 'Safety Last!',
-    releaseDate: '1923-04-01',
-  },
-  {
-    id: 18783,
-    title: 'Sahara',
-    releaseDate: '1943-09-22',
-  },
-  {
-    id: 6106,
-    title: 'Salvador',
-    releaseDate: '1986-04-23',
-  },
-  {
-    id: 89708,
-    title: 'Samsara',
-    releaseDate: '2011-09-16',
-  },
-  {
-    id: 13400,
-    title: "Santa Claus Is Comin' to Town",
-    releaseDate: '1970-12-13',
-  },
-  {
-    id: 19236,
-    title: 'Santa Sangre',
-    releaseDate: '1989-11-24',
-  },
-  {
-    id: 37230,
-    title: 'Saturday Night and Sunday Morning',
-    releaseDate: '1960-10-27',
-  },
-  {
-    id: 19316,
-    title: 'Saving Face',
-    releaseDate: '2004-09-12',
-  },
-  {
-    id: 140823,
-    title: 'Saving Mr. Banks',
-    releaseDate: '2013-11-29',
-  },
-  {
-    id: 857,
-    title: 'Saving Private Ryan',
-    releaseDate: '1998-07-24',
-  },
-  {
-    id: 2042,
-    title: 'Savior',
-    releaseDate: '1998-06-01',
-  },
-  {
-    id: 246355,
-    title: 'Saw',
-    releaseDate: '2003-10-16',
-  },
-  {
-    id: 176,
-    title: 'Saw',
-    releaseDate: '2004-10-01',
-  },
-  {
-    id: 951491,
-    title: 'Saw X',
-    releaseDate: '2023-09-27',
-  },
-  {
-    id: 2028,
-    title: 'Say Anything...',
-    releaseDate: '1989-04-14',
-  },
-  {
-    id: 31587,
-    title: 'Scarecrow',
-    releaseDate: '1973-04-11',
-  },
-  {
-    id: 877,
-    title: 'Scarface',
-    releaseDate: '1932-04-09',
-  },
-  {
-    id: 111,
-    title: 'Scarface',
-    releaseDate: '1983-12-09',
-  },
-  {
-    id: 17058,
-    title: 'Scarlet Street',
-    releaseDate: '1945-12-25',
-  },
-  {
-    id: 9475,
-    title: 'Scent of a Woman',
-    releaseDate: '1992-12-23',
-  },
-  {
-    id: 424,
-    title: "Schindler's List",
-    releaseDate: '1993-12-15',
-  },
-  {
-    id: 271467,
-    title: 'School Dance',
-    releaseDate: '2014-07-02',
-  },
-  {
-    id: 1584,
-    title: 'School of Rock',
-    releaseDate: '2003-10-03',
-  },
-  {
-    id: 385103,
-    title: 'Scoob!',
-    releaseDate: '2020-07-08',
-  },
-  {
-    id: 20410,
-    title: 'Scooby-Doo and the Alien Invaders',
-    releaseDate: '2000-10-03',
-  },
-  {
-    id: 15601,
-    title: 'Scooby-Doo and the Cyber Chase',
-    releaseDate: '2001-03-22',
-  },
-  {
-    id: 13350,
-    title: 'Scooby-Doo and the Ghoul School',
-    releaseDate: '1988-10-16',
-  },
-  {
-    id: 13151,
-    title: 'Scooby-Doo on Zombie Island',
-    releaseDate: '1998-09-22',
-  },
-  {
-    id: 484862,
-    title: 'Scooby-Doo! & Batman: The Brave and the Bold',
-    releaseDate: '2018-01-31',
-  },
-  {
-    id: 32916,
-    title: 'Scooby-Doo! Abracadabra-Doo',
-    releaseDate: '2010-02-16',
-  },
-  {
-    id: 347688,
-    title: 'Scooby-Doo! and KISS: Rock and Roll Mystery',
-    releaseDate: '2015-07-09',
-  },
-  {
-    id: 560066,
-    title: 'Scooby-Doo! and the Curse of the 13th Ghost',
-    releaseDate: '2019-02-05',
-  },
-  {
-    id: 12903,
-    title: 'Scooby-Doo! and the Goblin King',
-    releaseDate: '2008-09-23',
-  },
-  {
-    id: 533592,
-    title: 'Scooby-Doo! and the Gourmet Ghost',
-    releaseDate: '2018-08-28',
-  },
-  {
-    id: 30074,
-    title: 'Scooby-Doo! and the Legend of the Vampire',
-    releaseDate: '2003-03-04',
-  },
-  {
-    id: 12902,
-    title: 'Scooby-Doo! and the Loch Ness Monster',
-    releaseDate: '2004-05-20',
-  },
-  {
-    id: 21956,
-    title: 'Scooby-Doo! and the Monster of Mexico',
-    releaseDate: '2003-09-30',
-  },
-  {
-    id: 37211,
-    title: 'Scooby-Doo! and the Reluctant Werewolf',
-    releaseDate: '1988-11-13',
-  },
-  {
-    id: 16390,
-    title: 'Scooby-Doo! and the Samurai Sword',
-    releaseDate: '2009-04-07',
-  },
-  {
-    id: 17681,
-    title: "Scooby-Doo! and the Witch's Ghost",
-    releaseDate: '1999-10-05',
-  },
-  {
-    id: 409122,
-    title: 'Scooby-Doo! and WWE: Curse of the Speed Demon',
-    releaseDate: '2016-07-23',
-  },
-  {
-    id: 45752,
-    title: 'Scooby-Doo! Camp Scare',
-    releaseDate: '2010-09-14',
-  },
-  {
-    id: 284995,
-    title: 'Scooby-Doo! Frankencreepy',
-    releaseDate: '2014-08-05',
-  },
-  {
-    id: 13351,
-    title: 'Scooby-Doo! in Arabian Nights',
-    releaseDate: '1994-09-03',
-  },
-  {
-    id: 20558,
-    title: "Scooby-Doo! in Where's My Mummy?",
-    releaseDate: '2005-05-13',
-  },
-  {
-    id: 67900,
-    title: 'Scooby-Doo! Legend of the Phantosaur',
-    releaseDate: '2011-09-03',
-  },
-  {
-    id: 151535,
-    title: 'Scooby-Doo! Mask of the Blue Falcon',
-    releaseDate: '2012-12-15',
-  },
-  {
-    id: 24787,
-    title: 'Scooby-Doo! Meets the Boo Brothers',
-    releaseDate: '1987-10-18',
-  },
-  {
-    id: 302960,
-    title: 'Scooby-Doo! Moon Monster Madness',
-    releaseDate: '2015-02-03',
-  },
-  {
-    id: 81900,
-    title: 'Scooby-Doo! Music of the Vampire',
-    releaseDate: '2012-03-07',
-  },
-  {
-    id: 13355,
-    title: 'Scooby-Doo! Pirates Ahoy!',
-    releaseDate: '2006-09-10',
-  },
-  {
-    id: 427564,
-    title: "Scooby-Doo! Shaggy's Showdown",
-    releaseDate: '2017-02-14',
-  },
-  {
-    id: 203696,
-    title: 'Scooby-Doo! Stage Fright',
-    releaseDate: '2013-08-10',
-  },
-  {
-    id: 682254,
-    title: 'Scooby-Doo! The Sword and the Scoob',
-    releaseDate: '2021-02-24',
-  },
-  {
-    id: 258893,
-    title: 'Scooby-Doo! WrestleMania Mystery',
-    releaseDate: '2014-03-11',
-  },
-  {
-    id: 22538,
-    title: 'Scott Pilgrim vs. the World',
-    releaseDate: '2010-08-12',
-  },
-  {
-    id: 4232,
-    title: 'Scream',
-    releaseDate: '1996-12-20',
-  },
-  {
-    id: 13188,
-    title: 'Scrooge',
-    releaseDate: '1951-11-30',
-  },
-  {
-    id: 25476,
-    title: 'Scum',
-    releaseDate: '1979-09-12',
-  },
-  {
-    id: 807,
-    title: 'Se7en',
-    releaseDate: '1995-09-22',
-  },
-  {
-    id: 4464,
-    title: 'Seabiscuit',
-    releaseDate: '2003-07-22',
-  },
-  {
-    id: 489999,
-    title: 'Searching',
-    releaseDate: '2018-08-24',
-  },
-  {
-    id: 14291,
-    title: 'Searching for Bobby Fischer',
-    releaseDate: '1993-08-13',
-  },
-  {
-    id: 84334,
-    title: 'Searching for Sugar Man',
-    releaseDate: '2012-06-30',
-  },
-  {
-    id: 801058,
-    title: 'Seaspiracy',
-    releaseDate: '2021-03-24',
-  },
-  {
-    id: 13156,
-    title: 'Secondhand Lions',
-    releaseDate: '2003-09-19',
-  },
-  {
-    id: 20620,
-    title: 'Seconds',
-    releaseDate: '1966-10-05',
-  },
-  {
-    id: 75258,
-    title: 'Secret of the Wings',
-    releaseDate: '2012-08-17',
-  },
-  {
-    id: 39486,
-    title: 'Secretariat',
-    releaseDate: '2010-08-20',
-  },
-  {
-    id: 11159,
-    title: 'Secrets & Lies',
-    releaseDate: '1996-05-24',
-  },
-  {
-    id: 1122932,
-    title: 'See You on Venus',
-    releaseDate: '2023-07-20',
-  },
-  {
-    id: 16052,
-    title: 'Selena',
-    releaseDate: '1997-03-21',
-  },
-  {
-    id: 1022256,
-    title: 'Selena Gomez: My Mind & Me',
-    releaseDate: '2022-11-04',
-  },
-  {
-    id: 273895,
-    title: 'Selma',
-    releaseDate: '2014-12-25',
-  },
-  {
-    id: 58496,
-    title: 'Senna',
-    releaseDate: '2010-10-07',
-  },
-  {
-    id: 4584,
-    title: 'Sense and Sensibility',
-    releaseDate: '1995-12-13',
-  },
-  {
-    id: 1211472,
-    title: 'September 5',
-    releaseDate: '2024-11-07',
-  },
-  {
-    id: 16320,
-    title: 'Serenity',
-    releaseDate: '2005-09-25',
-  },
-  {
-    id: 16442,
-    title: 'Sergeant York',
-    releaseDate: '1941-09-27',
-  },
-  {
-    id: 9040,
-    title: 'Serpico',
-    releaseDate: '1973-12-18',
-  },
-  {
-    id: 9400,
-    title: 'Set It Off',
-    releaseDate: '1996-11-06',
-  },
-  {
-    id: 16563,
-    title: 'Seven Brides for Seven Brothers',
-    releaseDate: '1954-07-22',
-  },
-  {
-    id: 32600,
-    title: 'Seven Chances',
-    releaseDate: '1925-03-15',
-  },
-  {
-    id: 23518,
-    title: 'Seven Days in May',
-    releaseDate: '1964-02-01',
-  },
-  {
-    id: 11321,
-    title: 'Seven Pounds',
-    releaseDate: '2008-12-18',
-  },
-  {
-    id: 978,
-    title: 'Seven Years in Tibet',
-    releaseDate: '1997-09-12',
-  },
-  {
-    id: 433694,
-    title: 'Sgt. Stubby: An American Hero',
-    releaseDate: '2018-04-13',
-  },
-  {
-    id: 21734,
-    title: 'Shadow of a Doubt',
-    releaseDate: '1943-01-12',
-  },
-  {
-    id: 9905,
-    title: 'Shallow Grave',
-    releaseDate: '1994-12-22',
-  },
-  {
-    id: 3110,
-    title: 'Shane',
-    releaseDate: '1953-04-23',
-  },
-  {
-    id: 566525,
-    title: 'Shang-Chi and the Legend of the Ten Rings',
-    releaseDate: '2021-09-01',
-  },
-  {
-    id: 747,
-    title: 'Shaun of the Dead',
-    releaseDate: '2004-04-09',
-  },
-  {
-    id: 752939,
-    title: 'Shawn Mendes: In Wonder',
-    releaseDate: '2020-11-23',
-  },
-  {
-    id: 1196573,
-    title: 'She Rides Shotgun',
-    releaseDate: '2025-07-31',
-  },
-  {
-    id: 837881,
-    title: 'She Said',
-    releaseDate: '2022-11-17',
-  },
-  {
-    id: 17483,
-    title: 'Shelter',
-    releaseDate: '2007-06-16',
-  },
-  {
-    id: 10528,
-    title: 'Sherlock Holmes',
-    releaseDate: '2009-12-23',
-  },
-  {
-    id: 58574,
-    title: 'Sherlock Holmes: A Game of Shadows',
-    releaseDate: '2011-11-22',
-  },
-  {
-    id: 992,
-    title: 'Sherlock Jr.',
-    releaseDate: '1924-04-17',
-  },
-  {
-    id: 379170,
-    title: 'Sherlock: The Abominable Bride',
-    releaseDate: '2016-01-01',
-  },
-  {
-    id: 7863,
-    title: 'Shine',
-    releaseDate: '1996-08-15',
-  },
-  {
-    id: 664300,
-    title: 'Shiva Baby',
-    releaseDate: '2021-03-26',
-  },
-  {
-    id: 7485,
-    title: 'Shooter',
-    releaseDate: '2007-03-22',
-  },
-  {
-    id: 8588,
-    title: 'Shooting Dogs',
-    releaseDate: '2006-03-08',
-  },
-  {
-    id: 970284,
-    title: 'Shooting Stars',
-    releaseDate: '2023-06-02',
-  },
-  {
-    id: 695,
-    title: 'Short Cuts',
-    releaseDate: '1993-10-01',
-  },
-  {
-    id: 169813,
-    title: 'Short Term 12',
-    releaseDate: '2013-08-23',
-  },
-  {
-    id: 13830,
-    title: 'Shottas',
-    releaseDate: '2002-02-27',
-  },
-  {
-    id: 808,
-    title: 'Shrek',
-    releaseDate: '2001-05-18',
-  },
-  {
-    id: 809,
-    title: 'Shrek 2',
-    releaseDate: '2004-05-19',
-  },
-  {
-    id: 11324,
-    title: 'Shutter Island',
-    releaseDate: '2010-02-14',
-  },
-  {
-    id: 273481,
-    title: 'Sicario',
-    releaseDate: '2015-09-17',
-  },
-  {
-    id: 2359,
-    title: 'Sicko',
-    releaseDate: '2007-05-18',
-  },
-  {
-    id: 110354,
-    title: 'Side by Side',
-    releaseDate: '2012-08-19',
-  },
-  {
-    id: 9675,
-    title: 'Sideways',
-    releaseDate: '2004-10-22',
-  },
-  {
-    id: 68730,
-    title: 'Silence',
-    releaseDate: '2016-12-23',
-  },
-  {
-    id: 82693,
-    title: 'Silver Linings Playbook',
-    releaseDate: '2012-11-16',
-  },
-  {
-    id: 1105832,
-    title: 'Simón',
-    releaseDate: '2023-04-15',
-  },
-  {
-    id: 187,
-    title: 'Sin City',
-    releaseDate: '2005-04-01',
-  },
-  {
-    id: 335797,
-    title: 'Sing',
-    releaseDate: '2016-11-23',
-  },
-  {
-    id: 438695,
-    title: 'Sing 2',
-    releaseDate: '2021-12-01',
-  },
-  {
-    id: 1155828,
-    title: 'Sing Sing',
-    releaseDate: '2024-07-12',
-  },
-  {
-    id: 369557,
-    title: 'Sing Street',
-    releaseDate: '2016-03-11',
-  },
-  {
-    id: 1371727,
-    title: 'Sing: Thriller',
-    releaseDate: '2024-10-15',
-  },
-  {
-    id: 872,
-    title: "Singin' in the Rain",
-    releaseDate: '1952-04-10',
-  },
-  {
-    id: 1233413,
-    title: 'Sinners',
-    releaseDate: '2025-04-16',
-  },
-  {
-    id: 45745,
-    title: 'Sintel',
-    releaseDate: '2010-09-30',
-  },
-  {
-    id: 25126,
-    title: 'Six Shooter',
-    releaseDate: '2004-10-14',
-  },
-  {
-    id: 785522,
-    title: 'Skater Girl',
-    releaseDate: '2021-06-11',
-  },
-  {
-    id: 37724,
-    title: 'Skyfall',
-    releaseDate: '2012-10-24',
-  },
-  {
-    id: 6396,
-    title: 'SLC Punk',
-    releaseDate: '1998-09-24',
-  },
-  {
-    id: 819,
-    title: 'Sleepers',
-    releaseDate: '1996-10-18',
-  },
-  {
-    id: 2668,
-    title: 'Sleepy Hollow',
-    releaseDate: '1999-11-19',
-  },
-  {
-    id: 993,
-    title: 'Sleuth',
-    releaseDate: '1972-12-10',
-  },
-  {
-    id: 12498,
-    title: 'Sling Blade',
-    releaseDate: '1996-08-30',
-  },
-  {
-    id: 668461,
-    title: 'Slumberland',
-    releaseDate: '2022-11-18',
-  },
-  {
-    id: 12405,
-    title: 'Slumdog Millionaire',
-    releaseDate: '2008-11-12',
-  },
-  {
-    id: 1146302,
-    title: 'Sly',
-    releaseDate: '2023-09-16',
-  },
-  {
-    id: 10149,
-    title: 'Smoke',
-    releaseDate: '1995-06-09',
-  },
-  {
-    id: 1037113,
-    title: 'Snack Shack',
-    releaseDate: '2024-03-15',
-  },
-  {
-    id: 107,
-    title: 'Snatch',
-    releaseDate: '2000-09-01',
-  },
-  {
-    id: 15242,
-    title: 'Snoopy, Come Home',
-    releaseDate: '1972-08-09',
-  },
-  {
-    id: 313,
-    title: 'Snow Cake',
-    releaseDate: '2006-09-08',
-  },
-  {
-    id: 408,
-    title: 'Snow White and the Seven Dwarfs',
-    releaseDate: '1938-01-14',
-  },
-  {
-    id: 302401,
-    title: 'Snowden',
-    releaseDate: '2016-09-15',
-  },
-  {
-    id: 295595,
-    title: 'Soaked in Bleach',
-    releaseDate: '2015-06-09',
-  },
-  {
-    id: 239,
-    title: 'Some Like It Hot',
-    releaseDate: '1959-03-19',
-  },
-  {
-    id: 28000,
-    title: 'Somebody Up There Likes Me',
-    releaseDate: '1956-07-04',
-  },
-  {
-    id: 20544,
-    title: 'Something the Lord Made',
-    releaseDate: '2004-05-30',
-  },
-  {
-    id: 16633,
-    title: 'Somewhere in Time',
-    releaseDate: '1980-10-02',
-  },
-  {
-    id: 251519,
-    title: 'Son of Batman',
-    releaseDate: '2014-05-13',
-  },
-  {
-    id: 110416,
-    title: 'Song of the Sea',
-    releaseDate: '2014-06-23',
-  },
-  {
-    id: 454626,
-    title: 'Sonic the Hedgehog',
-    releaseDate: '2020-02-12',
-  },
-  {
-    id: 675353,
-    title: 'Sonic the Hedgehog 2',
-    releaseDate: '2022-03-30',
-  },
-  {
-    id: 939243,
-    title: 'Sonic the Hedgehog 3',
-    releaseDate: '2024-12-19',
-  },
-  {
-    id: 43128,
-    title: 'Sons of the Desert',
-    releaseDate: '1933-12-29',
-  },
-  {
-    id: 15764,
-    title: "Sophie's Choice",
-    releaseDate: '1982-12-08',
-  },
-  {
-    id: 38985,
-    title: 'Sorcerer',
-    releaseDate: '1977-06-24',
-  },
-  {
-    id: 522369,
-    title: 'Sorry We Missed You',
-    releaseDate: '2019-10-04',
-  },
-  {
-    id: 508442,
-    title: 'Soul',
-    releaseDate: '2020-12-25',
-  },
-  {
-    id: 43959,
-    title: 'Soul Surfer',
-    releaseDate: '2011-04-08',
-  },
-  {
-    id: 157117,
-    title: 'Sound City',
-    releaseDate: '2013-01-18',
-  },
-  {
-    id: 678512,
-    title: 'Sound of Freedom',
-    releaseDate: '2023-07-03',
-  },
-  {
-    id: 502033,
-    title: 'Sound of Metal',
-    releaseDate: '2020-11-20',
-  },
-  {
-    id: 45612,
-    title: 'Source Code',
-    releaseDate: '2011-03-30',
-  },
-  {
-    id: 1219926,
-    title: 'South Park (Not Suitable for Children)',
-    releaseDate: '2023-12-20',
-  },
-  {
-    id: 974691,
-    title: 'South Park the Streaming Wars',
-    releaseDate: '2022-06-01',
-  },
-  {
-    id: 993729,
-    title: 'South Park the Streaming Wars Part 2',
-    releaseDate: '2022-07-13',
-  },
-  {
-    id: 9473,
-    title: 'South Park: Bigger, Longer & Uncut',
-    releaseDate: '1999-06-24',
-  },
-  {
-    id: 1190012,
-    title: 'South Park: Joining the Panderverse',
-    releaseDate: '2023-10-27',
-  },
-  {
-    id: 874299,
-    title: 'South Park: Post COVID',
-    releaseDate: '2021-11-25',
-  },
-  {
-    id: 874300,
-    title: 'South Park: Post COVID: The Return of COVID',
-    releaseDate: '2021-12-16',
-  },
-  {
-    id: 1290938,
-    title: 'South Park: The End of Obesity',
-    releaseDate: '2024-05-24',
-  },
-  {
-    id: 307081,
-    title: 'Southpaw',
-    releaseDate: '2015-03-24',
-  },
-  {
-    id: 264337,
-    title: 'Spare Parts',
-    releaseDate: '2015-01-16',
-  },
-  {
-    id: 967,
-    title: 'Spartacus',
-    releaseDate: '1960-10-13',
-  },
-  {
-    id: 15058,
-    title: 'Speak',
-    releaseDate: '2004-01-20',
-  },
-  {
-    id: 1114513,
-    title: 'Speak No Evil',
-    releaseDate: '2024-09-11',
-  },
-  {
-    id: 1637,
-    title: 'Speed',
-    releaseDate: '1994-06-09',
-  },
-  {
-    id: 4174,
-    title: 'Spellbound',
-    releaseDate: '1945-11-08',
-  },
-  {
-    id: 557,
-    title: 'Spider-Man',
-    releaseDate: '2002-05-01',
-  },
-  {
-    id: 558,
-    title: 'Spider-Man 2',
-    releaseDate: '2004-06-25',
-  },
-  {
-    id: 569094,
-    title: 'Spider-Man: Across the Spider-Verse',
-    releaseDate: '2023-05-31',
-  },
-  {
-    id: 429617,
-    title: 'Spider-Man: Far From Home',
-    releaseDate: '2019-06-28',
-  },
-  {
-    id: 315635,
-    title: 'Spider-Man: Homecoming',
-    releaseDate: '2017-07-05',
-  },
-  {
-    id: 324857,
-    title: 'Spider-Man: Into the Spider-Verse',
-    releaseDate: '2018-12-06',
-  },
-  {
-    id: 634649,
-    title: 'Spider-Man: No Way Home',
-    releaseDate: '2021-12-15',
-  },
-  {
-    id: 467062,
-    title: 'Spielberg',
-    releaseDate: '2017-10-05',
-  },
-  {
-    id: 431693,
-    title: 'Spies in Disguise',
-    releaseDate: '2019-12-04',
-  },
-  {
-    id: 637693,
-    title: 'Spirit Untamed',
-    releaseDate: '2021-05-20',
-  },
-  {
-    id: 9023,
-    title: 'Spirit: Stallion of the Cimarron',
-    releaseDate: '2002-05-24',
-  },
-  {
-    id: 28569,
-    title: 'Splendor in the Grass',
-    releaseDate: '1961-10-10',
-  },
-  {
-    id: 381288,
-    title: 'Split',
-    releaseDate: '2017-01-19',
-  },
-  {
-    id: 314365,
-    title: 'Spotlight',
-    releaseDate: '2015-11-06',
-  },
-  {
-    id: 239563,
-    title: 'St. Vincent',
-    releaseDate: '2014-10-09',
-  },
-  {
-    id: 995,
-    title: 'Stagecoach',
-    releaseDate: '1939-03-02',
-  },
-  {
-    id: 632,
-    title: 'Stalag 17',
-    releaseDate: '1953-05-29',
-  },
-  {
-    id: 29154,
-    title: 'Stand and Deliver',
-    releaseDate: '1988-03-11',
-  },
-  {
-    id: 235,
-    title: 'Stand by Me',
-    releaseDate: '1986-08-08',
-  },
-  {
-    id: 30416,
-    title: 'Stanley Kubrick: A Life in Pictures',
-    releaseDate: '2001-05-02',
-  },
-  {
-    id: 13475,
-    title: 'Star Trek',
-    releaseDate: '2009-05-06',
-  },
-  {
-    id: 154,
-    title: 'Star Trek II: The Wrath of Khan',
-    releaseDate: '1982-06-04',
-  },
-  {
-    id: 54138,
-    title: 'Star Trek Into Darkness',
-    releaseDate: '2013-05-05',
-  },
-  {
-    id: 168,
-    title: 'Star Trek IV: The Voyage Home',
-    releaseDate: '1986-11-26',
-  },
-  {
-    id: 174,
-    title: 'Star Trek VI: The Undiscovered Country',
-    releaseDate: '1991-12-06',
-  },
-  {
-    id: 199,
-    title: 'Star Trek: First Contact',
-    releaseDate: '1996-11-22',
-  },
-  {
-    id: 11,
-    title: 'Star Wars',
-    releaseDate: '1977-05-25',
-  },
-  {
-    id: 287663,
-    title: 'Star Wars Rebels: Spark of Rebellion',
-    releaseDate: '2014-10-03',
-  },
-  {
-    id: 1895,
-    title: 'Star Wars: Episode III - Revenge of the Sith',
-    releaseDate: '2005-05-17',
-  },
-  {
-    id: 140607,
-    title: 'Star Wars: The Force Awakens',
-    releaseDate: '2015-12-15',
-  },
-  {
-    id: 2270,
-    title: 'Stardust',
-    releaseDate: '2007-08-10',
-  },
-  {
-    id: 2164,
-    title: 'Stargate',
-    releaseDate: '1994-10-28',
-  },
-  {
-    id: 12914,
-    title: 'Stargate: Continuum',
-    releaseDate: '2008-07-29',
-  },
-  {
-    id: 13001,
-    title: 'Stargate: The Ark of Truth',
-    releaseDate: '2008-03-11',
-  },
-  {
-    id: 382748,
-    title: 'Stargirl',
-    releaseDate: '2020-03-10',
-  },
-  {
-    id: 209276,
-    title: 'Starred Up',
-    releaseDate: '2014-03-21',
-  },
-  {
-    id: 563,
-    title: 'Starship Troopers',
-    releaseDate: '1997-11-07',
-  },
-  {
-    id: 35558,
-    title: 'Starstruck',
-    releaseDate: '2010-02-14',
-  },
-  {
-    id: 416494,
-    title: 'Status Update',
-    releaseDate: '2018-02-09',
-  },
-  {
-    id: 25768,
-    title: 'Steamboat Bill, Jr.',
-    releaseDate: '1928-05-09',
-  },
-  {
-    id: 53565,
-    title: 'Steamboat Willie',
-    releaseDate: '1928-05-15',
-  },
-  {
-    id: 10860,
-    title: 'Steel Magnolias',
-    releaseDate: '1989-11-15',
-  },
-  {
-    id: 9441,
-    title: 'Stepmom',
-    releaseDate: '1998-12-25',
-  },
-  {
-    id: 537061,
-    title: 'Steven Universe: The Movie',
-    releaseDate: '2019-10-07',
-  },
-  {
-    id: 284293,
-    title: 'Still Alice',
-    releaseDate: '2014-12-05',
-  },
-  {
-    id: 216156,
-    title: 'Still Life',
-    releaseDate: '2013-11-28',
-  },
-  {
-    id: 1058699,
-    title: 'STILL: A Michael J. Fox Movie',
-    releaseDate: '2023-01-20',
-  },
-  {
-    id: 1931,
-    title: 'Stomp the Yard',
-    releaseDate: '2007-05-16',
-  },
-  {
-    id: 24128,
-    title: 'Stop Making Sense',
-    releaseDate: '1984-10-19',
-  },
-  {
-    id: 128216,
-    title: 'Stories We Tell',
-    releaseDate: '2012-10-12',
-  },
-  {
-    id: 277216,
-    title: 'Straight Outta Compton',
-    releaseDate: '2015-08-11',
-  },
-  {
-    id: 843906,
-    title: 'Straight Outta Nowhere: Scooby-Doo! Meets Courage the Cowardly Dog',
-    releaseDate: '2021-09-14',
-  },
-  {
-    id: 23397,
-    title: 'Straight Time',
-    releaseDate: '1978-03-18',
-  },
-  {
-    id: 281,
-    title: 'Strange Days',
-    releaseDate: '1995-10-13',
-  },
-  {
-    id: 302429,
-    title: 'Strange Magic',
-    releaseDate: '2015-01-23',
-  },
-  {
-    id: 1262,
-    title: 'Stranger Than Fiction',
-    releaseDate: '2006-09-09',
-  },
-  {
-    id: 469,
-    title: 'Stranger Than Paradise',
-    releaseDate: '1984-10-01',
-  },
-  {
-    id: 845,
-    title: 'Strangers on a Train',
-    releaseDate: '1951-06-27',
-  },
-  {
-    id: 1426776,
-    title: 'STRAW',
-    releaseDate: '2025-06-05',
-  },
-  {
-    id: 994,
-    title: 'Straw Dogs',
-    releaseDate: '1971-11-25',
-  },
-  {
-    id: 912908,
-    title: 'Strays',
-    releaseDate: '2023-08-17',
-  },
-  {
-    id: 50032,
-    title: 'Stuart: A Life Backwards',
-    releaseDate: '2007-09-23',
-  },
-  {
-    id: 111969,
-    title: 'Stuck in Love',
-    releaseDate: '2013-06-14',
-  },
-  {
-    id: 799375,
-    title: 'Stutz',
-    releaseDate: '2022-11-14',
-  },
-  {
-    id: 49020,
-    title: 'Submarine',
-    releaseDate: '2011-03-18',
-  },
-  {
-    id: 1130276,
-    title: 'Succubus',
-    releaseDate: '2024-10-06',
-  },
-  {
-    id: 14698,
-    title: 'Suddenly, Last Summer',
-    releaseDate: '1959-12-22',
-  },
-  {
-    id: 245168,
-    title: 'Suffragette',
-    releaseDate: '2015-10-16',
-  },
-  {
-    id: 487242,
-    title: 'Suicide Squad: Hell to Pay',
-    releaseDate: '2018-03-23',
-  },
-  {
-    id: 271674,
-    title: 'Suite Française',
-    releaseDate: '2015-03-12',
-  },
-  {
-    id: 16305,
-    title: "Sullivan's Travels",
-    releaseDate: '1941-11-30',
-  },
-  {
-    id: 363676,
-    title: 'Sully',
-    releaseDate: '2016-09-07',
-  },
-  {
-    id: 776527,
-    title: 'Summer of Soul (...Or, When the Revolution Could Not Be Televised)',
-    releaseDate: '2021-07-02',
-  },
-  {
-    id: 523977,
-    title: 'Summerland',
-    releaseDate: '2020-07-24',
-  },
-  {
-    id: 631,
-    title: 'Sunrise: A Song of Two Humans',
-    releaseDate: '1927-11-04',
-  },
-  {
-    id: 599,
-    title: 'Sunset Boulevard',
-    releaseDate: '1950-08-10',
-  },
-  {
-    id: 1128559,
-    title: 'Super/Man: The Christopher Reeve Story',
-    releaseDate: '2024-09-21',
-  },
-  {
-    id: 8363,
-    title: 'Superbad',
-    releaseDate: '2007-08-17',
-  },
-  {
-    id: 1061474,
-    title: 'Superman',
-    releaseDate: '2025-07-09',
-  },
-  {
-    id: 1924,
-    title: 'Superman',
-    releaseDate: '1978-12-14',
-  },
-  {
-    id: 624479,
-    title: 'Superman II: The Richard Donner Cut',
-    releaseDate: '2006-11-02',
-  },
-  {
-    id: 45162,
-    title: 'Superman/Batman: Apocalypse',
-    releaseDate: '2010-09-28',
-  },
-  {
-    id: 22855,
-    title: 'Superman/Batman: Public Enemies',
-    releaseDate: '2009-09-29',
-  },
-  {
-    id: 43641,
-    title: 'Superman/Shazam!: The Return of Black Adam',
-    releaseDate: '2010-11-16',
-  },
-  {
-    id: 618354,
-    title: 'Superman: Man of Tomorrow',
-    releaseDate: '2020-08-23',
-  },
-  {
-    id: 618355,
-    title: 'Superman: Red Son',
-    releaseDate: '2020-02-24',
-  },
-  {
-    id: 412924,
-    title: 'Supersonic',
-    releaseDate: '2016-10-02',
-  },
-  {
-    id: 11462,
-    title: 'Suspicion',
-    releaseDate: '1941-11-14',
-  },
-  {
-    id: 765245,
-    title: 'Swan Song',
-    releaseDate: '2021-12-17',
-  },
-  {
-    id: 13885,
-    title: 'Sweeney Todd: The Demon Barber of Fleet Street',
-    releaseDate: '2007-12-21',
-  },
-  {
-    id: 976,
-    title: 'Sweet Smell of Success',
-    releaseDate: '1957-07-04',
-  },
-  {
-    id: 216769,
-    title: 'Swindle',
-    releaseDate: '2014-03-22',
-  },
-  {
-    id: 4960,
-    title: 'Synecdoche, New York',
-    releaseDate: '2008-10-24',
-  },
-  {
-    id: 977,
-    title: 'Tabu: A Story of the South Seas',
-    releaseDate: '1931-07-30',
-  },
-  {
-    id: 64720,
-    title: 'Take Shelter',
-    releaseDate: '2011-09-30',
-  },
-  {
-    id: 11485,
-    title: 'Take the Money and Run',
-    releaseDate: '1969-08-18',
-  },
-  {
-    id: 8681,
-    title: 'Taken',
-    releaseDate: '2008-02-18',
-  },
-  {
-    id: 25405,
-    title: 'Taking Chance',
-    releaseDate: '2009-09-21',
-  },
-  {
-    id: 10132,
-    title: 'Talk Radio',
-    releaseDate: '1988-12-21',
-  },
-  {
-    id: 1008042,
-    title: 'Talk to Me',
-    releaseDate: '2023-07-26',
-  },
-  {
-    id: 38757,
-    title: 'Tangled',
-    releaseDate: '2010-11-24',
-  },
-  {
-    id: 82881,
-    title: 'Tangled Ever After',
-    releaseDate: '2012-01-13',
-  },
-  {
-    id: 19383,
-    title: 'Targets',
-    releaseDate: '1968-08-13',
-  },
-  {
-    id: 37135,
-    title: 'Tarzan',
-    releaseDate: '1999-06-17',
-  },
-  {
-    id: 103,
-    title: 'Taxi Driver',
-    releaseDate: '1976-02-09',
-  },
-  {
-    id: 1160164,
-    title: 'TAYLOR SWIFT | THE ERAS TOUR',
-    releaseDate: '2023-10-13',
-  },
-  {
-    id: 568332,
-    title: 'Taylor Swift: Reputation Stadium Tour',
-    releaseDate: '2018-12-31',
-  },
-  {
-    id: 373558,
-    title: 'Taylor Swift: The 1989 World Tour - Live',
-    releaseDate: '2015-12-20',
-  },
-  {
-    id: 413279,
-    title: 'Team Thor',
-    releaseDate: '2016-08-28',
-  },
-  {
-    id: 474395,
-    title: 'Teen Titans Go! To the Movies',
-    releaseDate: '2018-07-27',
-  },
-  {
-    id: 556901,
-    title: 'Teen Titans Go! vs. Teen Titans',
-    releaseDate: '2019-07-21',
-  },
-  {
-    id: 408647,
-    title: 'Teen Titans: The Judas Contract',
-    releaseDate: '2017-03-31',
-  },
-  {
-    id: 16237,
-    title: 'Teen Titans: Trouble in Tokyo',
-    releaseDate: '2006-09-15',
-  },
-  {
-    id: 877703,
-    title: 'Teen Wolf: The Movie',
-    releaseDate: '2023-01-18',
-  },
-  {
-    id: 614930,
-    title: 'Teenage Mutant Ninja Turtles: Mutant Mayhem',
-    releaseDate: '2023-07-31',
-  },
-  {
-    id: 475888,
-    title: 'Tell It to the Bees',
-    releaseDate: '2019-05-03',
-  },
-  {
-    id: 627070,
-    title: 'Tell Me Who I Am',
-    releaseDate: '2019-10-18',
-  },
-  {
-    id: 33602,
-    title: 'Temple Grandin',
-    releaseDate: '2010-02-06',
-  },
-  {
-    id: 14843,
-    title: 'Ten Inch Hero',
-    releaseDate: '2007-04-25',
-  },
-  {
-    id: 577922,
-    title: 'Tenet',
-    releaseDate: '2020-08-22',
-  },
-  {
-    id: 280,
-    title: 'Terminator 2: Judgment Day',
-    releaseDate: '1991-07-03',
-  },
-  {
-    id: 11050,
-    title: 'Terms of Endearment',
-    releaseDate: '1983-11-20',
-  },
-  {
-    id: 11121,
-    title: 'Tess',
-    releaseDate: '1979-10-06',
-  },
-  {
-    id: 284689,
-    title: 'Testament of Youth',
-    releaseDate: '2015-01-16',
-  },
-  {
-    id: 726759,
-    title: 'Tetris',
-    releaseDate: '2023-03-15',
-  },
-  {
-    id: 9388,
-    title: 'Thank You for Smoking',
-    releaseDate: '2005-09-09',
-  },
-  {
-    id: 645757,
-    title: 'That Christmas',
-    releaseDate: '2024-11-27',
-  },
-  {
-    id: 260,
-    title: 'The 39 Steps',
-    releaseDate: '1935-06-06',
-  },
-  {
-    id: 2756,
-    title: 'The Abyss',
-    releaseDate: '1989-08-09',
-  },
-  {
-    id: 302946,
-    title: 'The Accountant',
-    releaseDate: '2016-10-13',
-  },
-  {
-    id: 870028,
-    title: 'The Accountant²',
-    releaseDate: '2025-04-23',
-  },
-  {
-    id: 10868,
-    title: 'The Accused',
-    releaseDate: '1988-10-14',
-  },
-  {
-    id: 696806,
-    title: 'The Adam Project',
-    releaseDate: '2022-03-11',
-  },
-  {
-    id: 2907,
-    title: 'The Addams Family',
-    releaseDate: '1991-11-22',
-  },
-  {
-    id: 2759,
-    title: 'The Adventures of Priscilla, Queen of the Desert',
-    releaseDate: '1994-05-31',
-  },
-  {
-    id: 10907,
-    title: 'The Adventures of Robin Hood',
-    releaseDate: '1938-05-13',
-  },
-  {
-    id: 488,
-    title: 'The African Queen',
-    releaseDate: '1952-01-07',
-  },
-  {
-    id: 293863,
-    title: 'The Age of Adaline',
-    releaseDate: '2015-04-16',
-  },
-  {
-    id: 11209,
-    title: 'The Alamo',
-    releaseDate: '1960-10-23',
-  },
-  {
-    id: 682587,
-    title: 'The Alpinist',
-    releaseDate: '2021-02-07',
-  },
-  {
-    id: 10514,
-    title: 'The Andromeda Strain',
-    releaseDate: '1971-03-12',
-  },
-  {
-    id: 454640,
-    title: 'The Angry Birds Movie 2',
-    releaseDate: '2019-08-02',
-  },
-  {
-    id: 55931,
-    title: 'The Animatrix',
-    releaseDate: '2003-05-09',
-  },
-  {
-    id: 284,
-    title: 'The Apartment',
-    releaseDate: '1960-06-21',
-  },
-  {
-    id: 10112,
-    title: 'The Aristocats',
-    releaseDate: '1970-12-24',
-  },
-  {
-    id: 68450,
-    title: 'The Art of Flight',
-    releaseDate: '2011-09-08',
-  },
-  {
-    id: 522924,
-    title: 'The Art of Racing in the Rain',
-    releaseDate: '2019-08-08',
-  },
-  {
-    id: 16958,
-    title: 'The Asphalt Jungle',
-    releaseDate: '1950-05-12',
-  },
-  {
-    id: 4512,
-    title: 'The Assassination of Jesse James by the Coward Robert Ford',
-    releaseDate: '2007-09-20',
-  },
-  {
-    id: 24428,
-    title: 'The Avengers',
-    releaseDate: '2012-04-25',
-  },
-  {
-    id: 2567,
-    title: 'The Aviator',
-    releaseDate: '2004-12-17',
-  },
-  {
-    id: 14675,
-    title: 'The Awful Truth',
-    releaseDate: '1937-10-21',
-  },
-  {
-    id: 397601,
-    title: 'The Bachelors',
-    releaseDate: '2017-10-20',
-  },
-  {
-    id: 32499,
-    title: 'The Bad and the Beautiful',
-    releaseDate: '1952-12-25',
-  },
-  {
-    id: 629542,
-    title: 'The Bad Guys',
-    releaseDate: '2022-03-17',
-  },
-  {
-    id: 1175942,
-    title: 'The Bad Guys 2',
-    releaseDate: '2025-07-24',
-  },
-  {
-    id: 532814,
-    title: 'The Bad Seed',
-    releaseDate: '2018-09-09',
-  },
-  {
-    id: 42196,
-    title: 'The Bad Seed',
-    releaseDate: '1956-09-12',
-  },
-  {
-    id: 537996,
-    title: 'The Ballad of Buster Scruggs',
-    releaseDate: '2018-11-09',
-  },
-  {
-    id: 67572,
-    title: 'The Band Concert',
-    releaseDate: '1935-02-23',
-  },
-  {
-    id: 29376,
-    title: 'The Band Wagon',
-    releaseDate: '1953-08-07',
-  },
-  {
-    id: 627725,
-    title: 'The Banker',
-    releaseDate: '2020-03-06',
-  },
-  {
-    id: 674324,
-    title: 'The Banshees of Inisherin',
-    releaseDate: '2022-10-20',
-  },
-  {
-    id: 10474,
-    title: 'The Basketball Diaries',
-    releaseDate: '1995-04-21',
-  },
-  {
-    id: 414906,
-    title: 'The Batman',
-    releaseDate: '2022-03-01',
-  },
-  {
-    id: 20077,
-    title: 'The Batman vs. Dracula',
-    releaseDate: '2005-10-18',
-  },
-  {
-    id: 15267,
-    title: 'The Beast',
-    releaseDate: '1988-09-14',
-  },
-  {
-    id: 391698,
-    title: 'The Beatles: Eight Days a Week - The Touring Years',
-    releaseDate: '2016-09-15',
-  },
-  {
-    id: 866398,
-    title: 'The Beekeeper',
-    releaseDate: '2024-01-08',
-  },
-  {
-    id: 31906,
-    title: 'The Beguiled',
-    releaseDate: '1971-01-23',
-  },
-  {
-    id: 458131,
-    title: 'The Best of Enemies',
-    releaseDate: '2019-04-05',
-  },
-  {
-    id: 239571,
-    title: 'The Best of Me',
-    releaseDate: '2014-10-15',
-  },
-  {
-    id: 887,
-    title: 'The Best Years of Our Lives',
-    releaseDate: '1946-12-25',
-  },
-  {
-    id: 2525,
-    title: 'The Bible: In the Beginning...',
-    releaseDate: '1966-09-28',
-  },
-  {
-    id: 19974,
-    title: 'The Big Clock',
-    releaseDate: '1948-03-18',
-  },
-  {
-    id: 22342,
-    title: 'The Big Combo',
-    releaseDate: '1955-02-13',
-  },
-  {
-    id: 12501,
-    title: 'The Big Country',
-    releaseDate: '1958-09-30',
-  },
-  {
-    id: 14580,
-    title: 'The Big Heat',
-    releaseDate: '1953-10-14',
-  },
-  {
-    id: 115,
-    title: 'The Big Lebowski',
-    releaseDate: '1998-03-06',
-  },
-  {
-    id: 318846,
-    title: 'The Big Short',
-    releaseDate: '2015-12-11',
-  },
-  {
-    id: 416477,
-    title: 'The Big Sick',
-    releaseDate: '2017-03-30',
-  },
-  {
-    id: 910,
-    title: 'The Big Sleep',
-    releaseDate: '1946-08-22',
-  },
-  {
-    id: 543084,
-    title: 'The Biggest Little Farm',
-    releaseDate: '2019-06-05',
-  },
-  {
-    id: 11000,
-    title: 'The Birdcage',
-    releaseDate: '1996-03-08',
-  },
-  {
-    id: 571,
-    title: 'The Birds',
-    releaseDate: '1963-03-28',
-  },
-  {
-    id: 19490,
-    title: "The Bishop's Wife",
-    releaseDate: '1947-12-25',
-  },
-  {
-    id: 756999,
-    title: 'The Black Phone',
-    releaseDate: '2022-06-16',
-  },
-  {
-    id: 17264,
-    title: 'The Black Stallion',
-    releaseDate: '1979-10-13',
-  },
-  {
-    id: 22881,
-    title: 'The Blind Side',
-    releaseDate: '2009-11-20',
-  },
-  {
-    id: 200481,
-    title: 'The Blue Umbrella',
-    releaseDate: '2013-02-12',
-  },
-  {
-    id: 525,
-    title: 'The Blues Brothers',
-    releaseDate: '1980-06-16',
-  },
-  {
-    id: 18947,
-    title: 'The Boat That Rocked',
-    releaseDate: '2009-04-01',
-  },
-  {
-    id: 382614,
-    title: 'The Book of Henry',
-    releaseDate: '2017-06-16',
-  },
-  {
-    id: 228326,
-    title: 'The Book of Life',
-    releaseDate: '2014-10-01',
-  },
-  {
-    id: 203833,
-    title: 'The Book Thief',
-    releaseDate: '2013-11-08',
-  },
-  {
-    id: 8374,
-    title: 'The Boondock Saints',
-    releaseDate: '1999-01-22',
-  },
-  {
-    id: 459151,
-    title: 'The Boss Baby: Family Business',
-    releaseDate: '2021-07-01',
-  },
-  {
-    id: 2501,
-    title: 'The Bourne Identity',
-    releaseDate: '2002-06-14',
-  },
-  {
-    id: 2502,
-    title: 'The Bourne Supremacy',
-    releaseDate: '2004-07-23',
-  },
-  {
-    id: 2503,
-    title: 'The Bourne Ultimatum',
-    releaseDate: '2007-08-03',
-  },
-  {
-    id: 14574,
-    title: 'The Boy in the Striped Pyjamas',
-    releaseDate: '2008-05-07',
-  },
-  {
-    id: 491480,
-    title: 'The Boy Who Harnessed the Wind',
-    releaseDate: '2019-02-14',
-  },
-  {
-    id: 995133,
-    title: 'The Boy, the Mole, the Fox and the Horse',
-    releaseDate: '2022-12-25',
-  },
-  {
-    id: 823452,
-    title: 'The Boys in the Boat',
-    releaseDate: '2023-12-25',
-  },
-  {
-    id: 435129,
-    title: 'The Breadwinner',
-    releaseDate: '2017-11-17',
-  },
-  {
-    id: 2108,
-    title: 'The Breakfast Club',
-    releaseDate: '1985-02-15',
-  },
-  {
-    id: 826,
-    title: 'The Bridge on the River Kwai',
-    releaseDate: '1957-10-11',
-  },
-  {
-    id: 688,
-    title: 'The Bridges of Madison County',
-    releaseDate: '1995-06-02',
-  },
-  {
-    id: 616251,
-    title: 'The Broken Hearts Gallery',
-    releaseDate: '2020-09-11',
-  },
-  {
-    id: 7350,
-    title: 'The Bucket List',
-    releaseDate: '2007-12-25',
-  },
-  {
-    id: 20007,
-    title: 'The Bugs Bunny/Road Runner Movie',
-    releaseDate: '1979-09-28',
-  },
-  {
-    id: 763165,
-    title: 'The Burial',
-    releaseDate: '2023-10-06',
-  },
-  {
-    id: 132363,
-    title: 'The Butler',
-    releaseDate: '2013-08-16',
-  },
-  {
-    id: 1954,
-    title: 'The Butterfly Effect',
-    releaseDate: '2004-01-17',
-  },
-  {
-    id: 10178,
-    title: 'The Caine Mutiny',
-    releaseDate: '1954-06-24',
-  },
-  {
-    id: 481848,
-    title: 'The Call of the Wild',
-    releaseDate: '2020-02-19',
-  },
-  {
-    id: 31411,
-    title: 'The Cameraman',
-    releaseDate: '1928-09-10',
-  },
-  {
-    id: 13852,
-    title: 'The Castle',
-    releaseDate: '1997-04-10',
-  },
-  {
-    id: 39853,
-    title: 'The Cat Concerto',
-    releaseDate: '1947-04-26',
-  },
-  {
-    id: 31602,
-    title: 'The Chase',
-    releaseDate: '1966-02-18',
-  },
-  {
-    id: 20139,
-    title: "The Children's Hour",
-    releaseDate: '1961-12-19',
-  },
-  {
-    id: 988,
-    title: 'The China Syndrome',
-    releaseDate: '1979-03-16',
-  },
-  {
-    id: 330483,
-    title: 'The Choice',
-    releaseDate: '2016-02-04',
-  },
-  {
-    id: 527435,
-    title: 'The Christmas Chronicles',
-    releaseDate: '2018-11-22',
-  },
-  {
-    id: 411,
-    title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe',
-    releaseDate: '2005-12-07',
-  },
-  {
-    id: 1715,
-    title: 'The Cider House Rules',
-    releaseDate: '1999-12-17',
-  },
-  {
-    id: 28978,
-    title: 'The Circus',
-    releaseDate: '1928-01-06',
-  },
-  {
-    id: 42740,
-    title: 'The Collector',
-    releaseDate: '1965-06-17',
-  },
-  {
-    id: 558915,
-    title: 'The Color Purple',
-    releaseDate: '2023-12-25',
-  },
-  {
-    id: 873,
-    title: 'The Color Purple',
-    releaseDate: '1985-12-18',
-  },
-  {
-    id: 11663,
-    title: 'The Commitments',
-    releaseDate: '1991-08-14',
-  },
-  {
-    id: 138843,
-    title: 'The Conjuring',
-    releaseDate: '2013-07-18',
-  },
-  {
-    id: 259693,
-    title: 'The Conjuring 2',
-    releaseDate: '2016-06-08',
-  },
-  {
-    id: 423108,
-    title: 'The Conjuring: The Devil Made Me Do It',
-    releaseDate: '2021-05-25',
-  },
-  {
-    id: 592,
-    title: 'The Conversation',
-    releaseDate: '1974-04-07',
-  },
-  {
-    id: 7452,
-    title: 'The Cook, the Thief, His Wife & Her Lover',
-    releaseDate: '1989-10-13',
-  },
-  {
-    id: 11420,
-    title: 'The Corporation',
-    releaseDate: '2003-09-10',
-  },
-  {
-    id: 11362,
-    title: 'The Count of Monte Cristo',
-    releaseDate: '2002-01-23',
-  },
-  {
-    id: 522241,
-    title: 'The Courier',
-    releaseDate: '2020-01-24',
-  },
-  {
-    id: 11839,
-    title: 'The Court Jester',
-    releaseDate: '1955-12-24',
-  },
-  {
-    id: 23128,
-    title: 'The Cove',
-    releaseDate: '2009-07-31',
-  },
-  {
-    id: 15573,
-    title: 'The Cowboys',
-    releaseDate: '1972-01-13',
-  },
-  {
-    id: 670292,
-    title: 'The Creator',
-    releaseDate: '2023-09-27',
-  },
-  {
-    id: 11570,
-    title: 'The Crimson Pirate',
-    releaseDate: '1952-09-27',
-  },
-  {
-    id: 529203,
-    title: 'The Croods: A New Age',
-    releaseDate: '2020-11-25',
-  },
-  {
-    id: 9495,
-    title: 'The Crow',
-    releaseDate: '1994-05-11',
-  },
-  {
-    id: 3061,
-    title: 'The Crowd',
-    releaseDate: '1928-03-03',
-  },
-  {
-    id: 6715,
-    title: 'The Cure',
-    releaseDate: '1995-04-21',
-  },
-  {
-    id: 4922,
-    title: 'The Curious Case of Benjamin Button',
-    releaseDate: '2008-12-25',
-  },
-  {
-    id: 16562,
-    title: 'The Cutting Edge',
-    releaseDate: '1992-03-27',
-  },
-  {
-    id: 21641,
-    title: 'The Damned United',
-    releaseDate: '2009-03-27',
-  },
-  {
-    id: 306819,
-    title: 'The Danish Girl',
-    releaseDate: '2015-11-27',
-  },
-  {
-    id: 4538,
-    title: 'The Darjeeling Limited',
-    releaseDate: '2007-09-07',
-  },
-  {
-    id: 11639,
-    title: 'The Dark Crystal',
-    releaseDate: '1982-12-17',
-  },
-  {
-    id: 155,
-    title: 'The Dark Knight',
-    releaseDate: '2008-07-16',
-  },
-  {
-    id: 49026,
-    title: 'The Dark Knight Rises',
-    releaseDate: '2012-07-17',
-  },
-  {
-    id: 445651,
-    title: 'The Darkest Minds',
-    releaseDate: '2018-07-25',
-  },
-  {
-    id: 489471,
-    title: 'The Dawn Wall',
-    releaseDate: '2017-11-01',
-  },
-  {
-    id: 4909,
-    title: 'The Day of the Jackal',
-    releaseDate: '1973-05-16',
-  },
-  {
-    id: 870360,
-    title: 'The Day the Earth Blew Up: A Looney Tunes Movie',
-    releaseDate: '2024-08-01',
-  },
-  {
-    id: 828,
-    title: 'The Day the Earth Stood Still',
-    releaseDate: '1951-09-18',
-  },
-  {
-    id: 11336,
-    title: 'The Dead Zone',
-    releaseDate: '1983-10-21',
-  },
-  {
-    id: 402897,
-    title: 'The Death of Stalin',
-    releaseDate: '2017-10-20',
-  },
-  {
-    id: 487670,
-    title: 'The Death of Superman',
-    releaseDate: '2018-07-24',
-  },
-  {
-    id: 1058647,
-    title: 'The Deepest Breath',
-    releaseDate: '2023-01-21',
-  },
-  {
-    id: 11778,
-    title: 'The Deer Hunter',
-    releaseDate: '1978-12-08',
-  },
-  {
-    id: 11414,
-    title: 'The Defiant Ones',
-    releaseDate: '1958-08-14',
-  },
-  {
-    id: 1422,
-    title: 'The Departed',
-    releaseDate: '2006-10-04',
-  },
-  {
-    id: 18612,
-    title: 'The Desperate Hours',
-    releaseDate: '1955-10-05',
-  },
-  {
-    id: 499932,
-    title: 'The Devil All the Time',
-    releaseDate: '2020-09-11',
-  },
-  {
-    id: 350,
-    title: 'The Devil Wears Prada',
-    releaseDate: '2006-06-29',
-  },
-  {
-    id: 1813,
-    title: "The Devil's Advocate",
-    releaseDate: '1997-10-17',
-  },
-  {
-    id: 31767,
-    title: 'The Devils',
-    releaseDate: '1971-07-16',
-  },
-  {
-    id: 2576,
-    title: 'The Diary of Anne Frank',
-    releaseDate: '1959-03-18',
-  },
-  {
-    id: 327331,
-    title: 'The Dirt',
-    releaseDate: '2019-03-22',
-  },
-  {
-    id: 1654,
-    title: 'The Dirty Dozen',
-    releaseDate: '1967-06-15',
-  },
-  {
-    id: 371638,
-    title: 'The Disaster Artist',
-    releaseDate: '2017-03-12',
-  },
-  {
-    id: 10537,
-    title: 'The Doors',
-    releaseDate: '1991-03-01',
-  },
-  {
-    id: 10831,
-    title: "The Draughtsman's Contract",
-    releaseDate: '1982-11-12',
-  },
-  {
-    id: 1278,
-    title: 'The Dreamers',
-    releaseDate: '2003-10-10',
-  },
-  {
-    id: 2153,
-    title: 'The Driver',
-    releaseDate: '1978-06-08',
-  },
-  {
-    id: 19067,
-    title: 'The Duellists',
-    releaseDate: '1977-08-31',
-  },
-  {
-    id: 376660,
-    title: 'The Edge of Seventeen',
-    releaseDate: '2016-11-18',
-  },
-  {
-    id: 1955,
-    title: 'The Elephant Man',
-    releaseDate: '1980-10-09',
-  },
-  {
-    id: 17187,
-    title: "The Emperor's Club",
-    releaseDate: '2002-11-22',
-  },
-  {
-    id: 11688,
-    title: "The Emperor's New Groove",
-    releaseDate: '2000-12-15',
-  },
-  {
-    id: 1891,
-    title: 'The Empire Strikes Back',
-    releaseDate: '1980-05-20',
-  },
-  {
-    id: 249688,
-    title: 'The End of the Tour',
-    releaseDate: '2015-07-31',
-  },
-  {
-    id: 15876,
-    title: 'The Enemy Below',
-    releaseDate: '1957-12-25',
-  },
-  {
-    id: 846433,
-    title: 'The Enforcer',
-    releaseDate: '2022-09-22',
-  },
-  {
-    id: 409,
-    title: 'The English Patient',
-    releaseDate: '1996-11-14',
-  },
-  {
-    id: 156022,
-    title: 'The Equalizer',
-    releaseDate: '2014-09-24',
-  },
-  {
-    id: 926393,
-    title: 'The Equalizer 3',
-    releaseDate: '2023-08-30',
-  },
-  {
-    id: 764,
-    title: 'The Evil Dead',
-    releaseDate: '1981-10-15',
-  },
-  {
-    id: 836225,
-    title: 'The Exorcism of God',
-    releaseDate: '2022-03-11',
-  },
-  {
-    id: 9552,
-    title: 'The Exorcist',
-    releaseDate: '1973-12-26',
-  },
-  {
-    id: 14325,
-    title: 'The Express',
-    releaseDate: '2008-10-10',
-  },
-  {
-    id: 804095,
-    title: 'The Fabelmans',
-    releaseDate: '2022-11-11',
-  },
-  {
-    id: 14784,
-    title: 'The Fall',
-    releaseDate: '2006-09-09',
-  },
-  {
-    id: 21631,
-    title: 'The Fallen Idol',
-    releaseDate: '1948-09-30',
-  },
-  {
-    id: 795514,
-    title: 'The Fallout',
-    releaseDate: '2021-03-17',
-  },
-  {
-    id: 1029575,
-    title: 'The Family Plan',
-    releaseDate: '2023-12-14',
-  },
-  {
-    id: 565310,
-    title: 'The Farewell',
-    releaseDate: '2019-07-12',
-  },
-  {
-    id: 9799,
-    title: 'The Fast and the Furious',
-    releaseDate: '2001-06-22',
-  },
-  {
-    id: 600354,
-    title: 'The Father',
-    releaseDate: '2020-12-23',
-  },
-  {
-    id: 222935,
-    title: 'The Fault in Our Stars',
-    releaseDate: '2014-06-02',
-  },
-  {
-    id: 375262,
-    title: 'The Favourite',
-    releaseDate: '2018-11-23',
-  },
-  {
-    id: 45317,
-    title: 'The Fighter',
-    releaseDate: '2010-12-10',
-  },
-  {
-    id: 177,
-    title: 'The Fisher King',
-    releaseDate: '1991-09-20',
-  },
-  {
-    id: 10243,
-    title: 'The Flight of the Phoenix',
-    releaseDate: '1965-12-15',
-  },
-  {
-    id: 394117,
-    title: 'The Florida Project',
-    releaseDate: '2017-10-06',
-  },
-  {
-    id: 11815,
-    title: 'The Fly',
-    releaseDate: '1958-07-16',
-  },
-  {
-    id: 9426,
-    title: 'The Fly',
-    releaseDate: '1986-08-15',
-  },
-  {
-    id: 20789,
-    title: 'The Flyboys',
-    releaseDate: '2008-08-15',
-  },
-  {
-    id: 12698,
-    title: 'The Fog of War',
-    releaseDate: '2003-10-26',
-  },
-  {
-    id: 1186532,
-    title: 'The Forge',
-    releaseDate: '2024-08-22',
-  },
-  {
-    id: 1888,
-    title: 'The Fortune Cookie',
-    releaseDate: '1966-10-19',
-  },
-  {
-    id: 310307,
-    title: 'The Founder',
-    releaseDate: '2016-11-24',
-  },
-  {
-    id: 10948,
-    title: 'The Fox and the Hound',
-    releaseDate: '1981-07-10',
-  },
-  {
-    id: 1051,
-    title: 'The French Connection',
-    releaseDate: '1971-10-09',
-  },
-  {
-    id: 542178,
-    title: 'The French Dispatch of the Liberty, Kansas Evening Sun',
-    releaseDate: '2021-10-21',
-  },
-  {
-    id: 738362,
-    title: 'The Fresh Prince of Bel-Air Reunion',
-    releaseDate: '2020-11-18',
-  },
-  {
-    id: 25680,
-    title: 'The Friends of Eddie Coyle',
-    releaseDate: '1973-06-26',
-  },
-  {
-    id: 1723,
-    title: 'The Front',
-    releaseDate: '1976-09-17',
-  },
-  {
-    id: 987,
-    title: 'The Front Page',
-    releaseDate: '1974-11-01',
-  },
-  {
-    id: 5503,
-    title: 'The Fugitive',
-    releaseDate: '1993-08-06',
-  },
-  {
-    id: 318121,
-    title: 'The Fundamentals of Caring',
-    releaseDate: '2016-06-16',
-  },
-  {
-    id: 2649,
-    title: 'The Game',
-    releaseDate: '1997-09-12',
-  },
-  {
-    id: 463088,
-    title: 'The Game Changers',
-    releaseDate: '2019-09-16',
-  },
-  {
-    id: 748783,
-    title: 'The Garfield Movie',
-    releaseDate: '2024-04-30',
-  },
-  {
-    id: 961,
-    title: 'The General',
-    releaseDate: '1926-12-25',
-  },
-  {
-    id: 522627,
-    title: 'The Gentlemen',
-    releaseDate: '2020-01-01',
-  },
-  {
-    id: 5916,
-    title: 'The Getaway',
-    releaseDate: '1972-12-13',
-  },
-  {
-    id: 22292,
-    title: 'The Ghost and Mrs. Muir',
-    releaseDate: '1947-05-25',
-  },
-  {
-    id: 65754,
-    title: 'The Girl with the Dragon Tattoo',
-    releaseDate: '2011-12-14',
-  },
-  {
-    id: 336000,
-    title: 'The Glass Castle',
-    releaseDate: '2017-08-11',
-  },
-  {
-    id: 51360,
-    title: 'The Goat',
-    releaseDate: '1921-05-15',
-  },
-  {
-    id: 238,
-    title: 'The Godfather',
-    releaseDate: '1972-03-14',
-  },
-  {
-    id: 240,
-    title: 'The Godfather Part II',
-    releaseDate: '1974-12-20',
-  },
-  {
-    id: 242,
-    title: 'The Godfather Part III',
-    releaseDate: '1990-12-25',
-  },
-  {
-    id: 8393,
-    title: 'The Gods Must Be Crazy',
-    releaseDate: '1980-09-10',
-  },
-  {
-    id: 11937,
-    title: 'The Gods Must Be Crazy II',
-    releaseDate: '1989-07-01',
-  },
-  {
-    id: 962,
-    title: 'The Gold Rush',
-    releaseDate: '1925-07-13',
-  },
-  {
-    id: 472674,
-    title: 'The Goldfinch',
-    releaseDate: '2019-09-12',
-  },
-  {
-    id: 250538,
-    title: 'The Good Lie',
-    releaseDate: '2014-09-10',
-  },
-  {
-    id: 32790,
-    title: 'The Good Witch',
-    releaseDate: '2008-01-19',
-  },
-  {
-    id: 846214,
-    title: 'The Good, the Bart, and the Loki',
-    releaseDate: '2021-07-07',
-  },
-  {
-    id: 9340,
-    title: 'The Goonies',
-    releaseDate: '1985-06-07',
-  },
-  {
-    id: 950396,
-    title: 'The Gorge',
-    releaseDate: '2025-02-13',
-  },
-  {
-    id: 37247,
-    title: 'The Graduate',
-    releaseDate: '1967-12-21',
-  },
-  {
-    id: 120467,
-    title: 'The Grand Budapest Hotel',
-    releaseDate: '2014-02-26',
-  },
-  {
-    id: 596,
-    title: 'The Grapes of Wrath',
-    releaseDate: '1940-03-15',
-  },
-  {
-    id: 14047,
-    title: 'The Great Debaters',
-    releaseDate: '2007-12-25',
-  },
-  {
-    id: 914,
-    title: 'The Great Dictator',
-    releaseDate: '1940-10-15',
-  },
-  {
-    id: 5925,
-    title: 'The Great Escape',
-    releaseDate: '1963-07-03',
-  },
-  {
-    id: 64682,
-    title: 'The Great Gatsby',
-    releaseDate: '2013-05-09',
-  },
-  {
-    id: 9994,
-    title: 'The Great Mouse Detective',
-    releaseDate: '1986-07-02',
-  },
-  {
-    id: 11575,
-    title: 'The Great Race',
-    releaseDate: '1965-07-01',
-  },
-  {
-    id: 597922,
-    title: 'The Greatest Beer Run Ever',
-    releaseDate: '2022-09-23',
-  },
-  {
-    id: 15487,
-    title: 'The Greatest Game Ever Played',
-    releaseDate: '2005-09-30',
-  },
-  {
-    id: 1226841,
-    title: 'The Greatest Night in Pop',
-    releaseDate: '2024-01-19',
-  },
-  {
-    id: 316029,
-    title: 'The Greatest Showman',
-    releaseDate: '2017-12-20',
-  },
-  {
-    id: 497,
-    title: 'The Green Mile',
-    releaseDate: '1999-12-10',
-  },
-  {
-    id: 28118,
-    title: 'The Gruffalo',
-    releaseDate: '2009-12-25',
-  },
-  {
-    id: 4643,
-    title: 'The Guardian',
-    releaseDate: '2006-09-28',
-  },
-  {
-    id: 774752,
-    title: 'The Guardians of the Galaxy Holiday Special',
-    releaseDate: '2022-11-24',
-  },
-  {
-    id: 451480,
-    title: 'The Guernsey Literary & Potato Peel Pie Society',
-    releaseDate: '2018-04-19',
-  },
-  {
-    id: 17409,
-    title: 'The Gunfighter',
-    releaseDate: '1950-05-26',
-  },
-  {
-    id: 10911,
-    title: 'The Guns of Navarone',
-    releaseDate: '1961-04-27',
-  },
-  {
-    id: 597219,
-    title: 'The Half of It',
-    releaseDate: '2020-05-01',
-  },
-  {
-    id: 18785,
-    title: 'The Hangover',
-    releaseDate: '2009-06-02',
-  },
-  {
-    id: 470044,
-    title: 'The Hate U Give',
-    releaseDate: '2018-10-19',
-  },
-  {
-    id: 273248,
-    title: 'The Hateful Eight',
-    releaseDate: '2015-12-25',
-  },
-  {
-    id: 603661,
-    title: 'The Hating Game',
-    releaseDate: '2021-12-09',
-  },
-  {
-    id: 11772,
-    title: 'The Haunting',
-    releaseDate: '1963-03-28',
-  },
-  {
-    id: 340270,
-    title: 'The Healer',
-    releaseDate: '2017-02-17',
-  },
-  {
-    id: 28571,
-    title: 'The Heiress',
-    releaseDate: '1949-10-06',
-  },
-  {
-    id: 50014,
-    title: 'The Help',
-    releaseDate: '2011-08-09',
-  },
-  {
-    id: 862557,
-    title: 'The Hill',
-    releaseDate: '2023-08-18',
-  },
-  {
-    id: 24395,
-    title: 'The Hill',
-    releaseDate: '1965-06-11',
-  },
-  {
-    id: 64353,
-    title: 'The Hitch Hikers Guide to the Galaxy',
-    releaseDate: '1981-02-09',
-  },
-  {
-    id: 49051,
-    title: 'The Hobbit: An Unexpected Journey',
-    releaseDate: '2012-12-12',
-  },
-  {
-    id: 122917,
-    title: 'The Hobbit: The Battle of the Five Armies',
-    releaseDate: '2014-12-10',
-  },
-  {
-    id: 57158,
-    title: 'The Hobbit: The Desolation of Smaug',
-    releaseDate: '2013-12-11',
-  },
-  {
-    id: 840430,
-    title: 'The Holdovers',
-    releaseDate: '2023-10-27',
-  },
-  {
-    id: 1581,
-    title: 'The Holiday',
-    releaseDate: '2006-12-05',
-  },
-  {
-    id: 27118,
-    title: 'The Hound of the Baskervilles',
-    releaseDate: '1939-03-24',
-  },
-  {
-    id: 590,
-    title: 'The Hours',
-    releaseDate: '2002-12-27',
-  },
-  {
-    id: 926899,
-    title: 'The House',
-    releaseDate: '2022-01-14',
-  },
-  {
-    id: 398173,
-    title: 'The House That Jack Built',
-    releaseDate: '2018-10-04',
-  },
-  {
-    id: 1368166,
-    title: 'The Housemaid',
-    releaseDate: '2025-12-18',
-  },
-  {
-    id: 11934,
-    title: 'The Hudsucker Proxy',
-    releaseDate: '1994-03-11',
-  },
-  {
-    id: 31685,
-    title: 'The Hunchback of Notre Dame',
-    releaseDate: '1939-08-31',
-  },
-  {
-    id: 10545,
-    title: 'The Hunchback of Notre Dame',
-    releaseDate: '1996-06-21',
-  },
-  {
-    id: 228194,
-    title: 'The Hundred-Foot Journey',
-    releaseDate: '2014-08-06',
-  },
-  {
-    id: 70160,
-    title: 'The Hunger Games',
-    releaseDate: '2012-03-12',
-  },
-  {
-    id: 101299,
-    title: 'The Hunger Games: Catching Fire',
-    releaseDate: '2013-11-15',
-  },
-  {
-    id: 1669,
-    title: 'The Hunt for Red October',
-    releaseDate: '1990-03-02',
-  },
-  {
-    id: 10400,
-    title: 'The Hurricane',
-    releaseDate: '1999-09-17',
-  },
-  {
-    id: 12162,
-    title: 'The Hurt Locker',
-    releaseDate: '2008-10-10',
-  },
-  {
-    id: 990,
-    title: 'The Hustler',
-    releaseDate: '1961-09-25',
-  },
-  {
-    id: 843527,
-    title: 'The Idea of You',
-    releaseDate: '2024-05-02',
-  },
-  {
-    id: 1491,
-    title: 'The Illusionist',
-    releaseDate: '2006-08-18',
-  },
-  {
-    id: 205596,
-    title: 'The Imitation Game',
-    releaseDate: '2014-11-14',
-  },
-  {
-    id: 47653,
-    title: 'The Immigrant',
-    releaseDate: '1917-06-17',
-  },
-  {
-    id: 80278,
-    title: 'The Impossible',
-    releaseDate: '2012-09-09',
-  },
-  {
-    id: 84287,
-    title: 'The Imposter',
-    releaseDate: '2012-07-13',
-  },
-  {
-    id: 818750,
-    title: 'The In Between',
-    releaseDate: '2022-02-11',
-  },
-  {
-    id: 31682,
-    title: 'The Incredible Shrinking Man',
-    releaseDate: '1957-02-22',
-  },
-  {
-    id: 9806,
-    title: 'The Incredibles',
-    releaseDate: '2004-11-05',
-  },
-  {
-    id: 16372,
-    title: 'The Innocents',
-    releaseDate: '1961-11-24',
-  },
-  {
-    id: 9008,
-    title: 'The Insider',
-    releaseDate: '1999-10-28',
-  },
-  {
-    id: 257211,
-    title: 'The Intern',
-    releaseDate: '2015-09-23',
-  },
-  {
-    id: 250658,
-    title: "The Internet's Own Boy: The Story of Aaron Swartz",
-    releaseDate: '2014-06-27',
-  },
-  {
-    id: 566228,
-    title: 'The Inventor: Out for Blood in Silicon Valley',
-    releaseDate: '2019-01-24',
-  },
-  {
-    id: 570670,
-    title: 'The Invisible Man',
-    releaseDate: '2020-02-26',
-  },
-  {
-    id: 10787,
-    title: 'The Invisible Man',
-    releaseDate: '1933-10-31',
-  },
-  {
-    id: 398978,
-    title: 'The Irishman',
-    releaseDate: '2019-11-01',
-  },
-  {
-    id: 850165,
-    title: 'The Iron Claw',
-    releaseDate: '2023-12-21',
-  },
-  {
-    id: 10386,
-    title: 'The Iron Giant',
-    releaseDate: '1999-08-06',
-  },
-  {
-    id: 133792,
-    title: 'The Joker is Wild',
-    releaseDate: '1957-09-26',
-  },
-  {
-    id: 19931,
-    title: 'The Joy Luck Club',
-    releaseDate: '1993-09-08',
-  },
-  {
-    id: 205587,
-    title: 'The Judge',
-    releaseDate: '2014-10-08',
-  },
-  {
-    id: 9325,
-    title: 'The Jungle Book',
-    releaseDate: '1967-10-18',
-  },
-  {
-    id: 1885,
-    title: 'The Karate Kid',
-    releaseDate: '1984-06-22',
-  },
-  {
-    id: 10098,
-    title: 'The Kid',
-    releaseDate: '1921-01-21',
-  },
-  {
-    id: 14638,
-    title: 'The Killers',
-    releaseDate: '1946-08-30',
-  },
-  {
-    id: 247,
-    title: 'The Killing',
-    releaseDate: '1956-06-06',
-  },
-  {
-    id: 625,
-    title: 'The Killing Fields',
-    releaseDate: '1984-11-23',
-  },
-  {
-    id: 32040,
-    title: 'The Killing of a Chinese Bookie',
-    releaseDate: '1976-02-15',
-  },
-  {
-    id: 399057,
-    title: 'The Killing of a Sacred Deer',
-    releaseDate: '2017-10-20',
-  },
-  {
-    id: 504949,
-    title: 'The King',
-    releaseDate: '2019-10-11',
-  },
-  {
-    id: 16520,
-    title: 'The King and I',
-    releaseDate: '1956-06-29',
-  },
-  {
-    id: 262,
-    title: 'The King of Comedy',
-    releaseDate: '1982-12-18',
-  },
-  {
-    id: 13958,
-    title: 'The King of Kong: A Fistful of Quarters',
-    releaseDate: '2007-03-25',
-  },
-  {
-    id: 579583,
-    title: 'The King of Staten Island',
-    releaseDate: '2020-07-22',
-  },
-  {
-    id: 245842,
-    title: "The King's Daughter",
-    releaseDate: '2022-01-21',
-  },
-  {
-    id: 45269,
-    title: "The King's Speech",
-    releaseDate: '2010-11-26',
-  },
-  {
-    id: 454983,
-    title: 'The Kissing Booth',
-    releaseDate: '2018-05-11',
-  },
-  {
-    id: 583083,
-    title: 'The Kissing Booth 2',
-    releaseDate: '2020-07-24',
-  },
-  {
-    id: 7979,
-    title: 'The Kite Runner',
-    releaseDate: '2007-12-14',
-  },
-  {
-    id: 3086,
-    title: 'The Lady Eve',
-    releaseDate: '1941-02-25',
-  },
-  {
-    id: 3766,
-    title: 'The Lady from Shanghai',
-    releaseDate: '1947-12-24',
-  },
-  {
-    id: 940,
-    title: 'The Lady Vanishes',
-    releaseDate: '1938-10-07',
-  },
-  {
-    id: 5506,
-    title: 'The Ladykillers',
-    releaseDate: '1955-12-08',
-  },
-  {
-    id: 2044,
-    title: 'The Lake House',
-    releaseDate: '2006-06-16',
-  },
-  {
-    id: 12144,
-    title: 'The Land Before Time',
-    releaseDate: '1988-11-18',
-  },
-  {
-    id: 718867,
-    title: 'The Larva Island Movie',
-    releaseDate: '2020-07-23',
-  },
-  {
-    id: 522039,
-    title: 'The Last Black Man in San Francisco',
-    releaseDate: '2019-06-07',
-  },
-  {
-    id: 2100,
-    title: 'The Last Castle',
-    releaseDate: '2001-10-19',
-  },
-  {
-    id: 14886,
-    title: 'The Last Detail',
-    releaseDate: '1973-12-11',
-  },
-  {
-    id: 617653,
-    title: 'The Last Duel',
-    releaseDate: '2021-10-13',
-  },
-  {
-    id: 746,
-    title: 'The Last Emperor',
-    releaseDate: '1987-10-04',
-  },
-  {
-    id: 442065,
-    title: 'The Last Full Measure',
-    releaseDate: '2020-01-23',
-  },
-  {
-    id: 1523,
-    title: 'The Last King of Scotland',
-    releaseDate: '2006-09-27',
-  },
-  {
-    id: 948713,
-    title: 'The Last Kingdom: Seven Kings Must Die',
-    releaseDate: '2023-04-14',
-  },
-  {
-    id: 638449,
-    title: 'The Last Letter from Your Lover',
-    releaseDate: '2021-07-23',
-  },
-  {
-    id: 9361,
-    title: 'The Last of the Mohicans',
-    releaseDate: '1992-08-26',
-  },
-  {
-    id: 25188,
-    title: 'The Last Picture Show',
-    releaseDate: '1971-10-03',
-  },
-  {
-    id: 616,
-    title: 'The Last Samurai',
-    releaseDate: '2003-12-05',
-  },
-  {
-    id: 35690,
-    title: 'The Last Song',
-    releaseDate: '2010-03-31',
-  },
-  {
-    id: 11051,
-    title: 'The Last Temptation of Christ',
-    releaseDate: '1988-05-28',
-  },
-  {
-    id: 10150,
-    title: 'The Last Unicorn',
-    releaseDate: '1982-11-19',
-  },
-  {
-    id: 13963,
-    title: 'The Last Waltz',
-    releaseDate: '1978-04-26',
-  },
-  {
-    id: 32961,
-    title: 'The Lavender Hill Mob',
-    releaseDate: '1951-06-28',
-  },
-  {
-    id: 43650,
-    title: 'The Legend of Sleepy Hollow',
-    releaseDate: '1949-10-08',
-  },
-  {
-    id: 324849,
-    title: 'The Lego Batman Movie',
-    releaseDate: '2017-02-08',
-  },
-  {
-    id: 137106,
-    title: 'The Lego Movie',
-    releaseDate: '2014-02-06',
-  },
-  {
-    id: 449749,
-    title: 'The Leisure Seeker',
-    releaseDate: '2018-01-03',
-  },
-  {
-    id: 17801,
-    title: 'The Letter',
-    releaseDate: '1940-11-21',
-  },
-  {
-    id: 25037,
-    title: 'The Life and Death of Colonel Blimp',
-    releaseDate: '1943-07-26',
-  },
-  {
-    id: 421,
-    title: 'The Life Aquatic with Steve Zissou',
-    releaseDate: '2004-12-10',
-  },
-  {
-    id: 1254786,
-    title: 'The Life List',
-    releaseDate: '2025-03-27',
-  },
-  {
-    id: 842924,
-    title: 'The Life of Chuck',
-    releaseDate: '2025-06-05',
-  },
-  {
-    id: 11615,
-    title: 'The Life of David Gale',
-    releaseDate: '2003-02-21',
-  },
-  {
-    id: 283552,
-    title: 'The Light Between Oceans',
-    releaseDate: '2016-09-02',
-  },
-  {
-    id: 503919,
-    title: 'The Lighthouse',
-    releaseDate: '2019-09-13',
-  },
-  {
-    id: 50348,
-    title: 'The Lincoln Lawyer',
-    releaseDate: '2011-03-17',
-  },
-  {
-    id: 18988,
-    title: 'The Lion in Winter',
-    releaseDate: '1968-08-20',
-  },
-  {
-    id: 420818,
-    title: 'The Lion King',
-    releaseDate: '2019-07-12',
-  },
-  {
-    id: 8587,
-    title: 'The Lion King',
-    releaseDate: '1994-06-15',
-  },
-  {
-    id: 43802,
-    title: 'The Little Foxes',
-    releaseDate: '1941-08-29',
-  },
-  {
-    id: 1010819,
-    title: 'The Little Guy',
-    releaseDate: '2022-08-10',
-  },
-  {
-    id: 38580,
-    title: 'The Little Matchgirl',
-    releaseDate: '2006-09-07',
-  },
-  {
-    id: 10144,
-    title: 'The Little Mermaid',
-    releaseDate: '1989-11-17',
-  },
-  {
-    id: 309809,
-    title: 'The Little Prince',
-    releaseDate: '2015-07-29',
-  },
-  {
-    id: 254320,
-    title: 'The Lobster',
-    releaseDate: '2015-10-15',
-  },
-  {
-    id: 2760,
-    title: 'The Lodger: A Story of the London Fog',
-    releaseDate: '1927-02-14',
-  },
-  {
-    id: 16103,
-    title: 'The Loneliness of the Long Distance Runner',
-    releaseDate: '1962-09-20',
-  },
-  {
-    id: 14807,
-    title: 'The Long Good Friday',
-    releaseDate: '1980-11-01',
-  },
-  {
-    id: 1847,
-    title: 'The Long Goodbye',
-    releaseDate: '1973-03-08',
-  },
-  {
-    id: 51763,
-    title: 'The Long Walk Home',
-    releaseDate: '1990-12-21',
-  },
-  {
-    id: 40085,
-    title: 'The Long, Hot Summer',
-    releaseDate: '1958-05-17',
-  },
-  {
-    id: 9289,
-    title: 'The Longest Day',
-    releaseDate: '1962-09-25',
-  },
-  {
-    id: 228205,
-    title: 'The Longest Ride',
-    releaseDate: '2015-04-09',
-  },
-  {
-    id: 267480,
-    title: 'The Look of Silence',
-    releaseDate: '2014-11-13',
-  },
-  {
-    id: 120,
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    releaseDate: '2001-12-18',
-  },
-  {
-    id: 122,
-    title: 'The Lord of the Rings: The Return of the King',
-    releaseDate: '2003-12-17',
-  },
-  {
-    id: 121,
-    title: 'The Lord of the Rings: The Two Towers',
-    releaseDate: '2002-12-18',
-  },
-  {
-    id: 1547,
-    title: 'The Lost Boys',
-    releaseDate: '1987-07-31',
-  },
-  {
-    id: 1236470,
-    title: 'The Lost Bus',
-    releaseDate: '2025-09-19',
-  },
-  {
-    id: 28580,
-    title: 'The Lost Weekend',
-    releaseDate: '1945-11-29',
-  },
-  {
-    id: 410113,
-    title: 'The Loud House Movie',
-    releaseDate: '2021-08-20',
-  },
-  {
-    id: 7980,
-    title: 'The Lovely Bones',
-    releaseDate: '2009-12-26',
-  },
-  {
-    id: 77877,
-    title: 'The Lucky One',
-    releaseDate: '2012-04-19',
-  },
-  {
-    id: 4553,
-    title: 'The Machinist',
-    releaseDate: '2004-09-24',
-  },
-  {
-    id: 8094,
-    title: 'The Magdalene Sisters',
-    releaseDate: '2002-08-30',
-  },
-  {
-    id: 965,
-    title: 'The Magnificent Ambersons',
-    releaseDate: '1942-07-10',
-  },
-  {
-    id: 966,
-    title: 'The Magnificent Seven',
-    releaseDate: '1960-10-12',
-  },
-  {
-    id: 124277,
-    title: 'The Maker',
-    releaseDate: '2011-06-23',
-  },
-  {
-    id: 963,
-    title: 'The Maltese Falcon',
-    releaseDate: '1941-10-18',
-  },
-  {
-    id: 13363,
-    title: 'The Man from Earth',
-    releaseDate: '2007-06-10',
-  },
-  {
-    id: 18264,
-    title: 'The Man from Laramie',
-    releaseDate: '1955-08-19',
-  },
-  {
-    id: 203801,
-    title: 'The Man from U.N.C.L.E.',
-    releaseDate: '2015-08-13',
-  },
-  {
-    id: 17474,
-    title: 'The Man in the Moon',
-    releaseDate: '1991-09-30',
-  },
-  {
-    id: 353326,
-    title: 'The Man Who Knew Infinity',
-    releaseDate: '2016-04-08',
-  },
-  {
-    id: 574,
-    title: 'The Man Who Knew Too Much',
-    releaseDate: '1956-05-16',
-  },
-  {
-    id: 27517,
-    title: 'The Man Who Laughs',
-    releaseDate: '1928-11-04',
-  },
-  {
-    id: 11697,
-    title: 'The Man Who Shot Liberty Valance',
-    releaseDate: '1962-04-13',
-  },
-  {
-    id: 10778,
-    title: "The Man Who Wasn't There",
-    releaseDate: '2001-10-26',
-  },
-  {
-    id: 983,
-    title: 'The Man Who Would Be King',
-    releaseDate: '1975-12-03',
-  },
-  {
-    id: 541,
-    title: 'The Man with the Golden Arm',
-    releaseDate: '1955-12-26',
-  },
-  {
-    id: 982,
-    title: 'The Manchurian Candidate',
-    releaseDate: '1962-10-24',
-  },
-  {
-    id: 250480,
-    title: 'The Many Adventures of Winnie the Pooh',
-    releaseDate: '1977-03-11',
-  },
-  {
-    id: 672647,
-    title: 'The Map of Tiny Perfect Things',
-    releaseDate: '2021-02-12',
-  },
-  {
-    id: 32093,
-    title: 'The Mark of Zorro',
-    releaseDate: '1940-11-08',
-  },
-  {
-    id: 286217,
-    title: 'The Martian',
-    releaseDate: '2015-09-30',
-  },
-  {
-    id: 68722,
-    title: 'The Master',
-    releaseDate: '2012-09-14',
-  },
-  {
-    id: 603,
-    title: 'The Matrix',
-    releaseDate: '1999-03-31',
-  },
-  {
-    id: 604,
-    title: 'The Matrix Reloaded',
-    releaseDate: '2003-05-15',
-  },
-  {
-    id: 644583,
-    title: 'The Mauritanian',
-    releaseDate: '2021-02-12',
-  },
-  {
-    id: 198663,
-    title: 'The Maze Runner',
-    releaseDate: '2014-09-10',
-  },
-  {
-    id: 593643,
-    title: 'The Menu',
-    releaseDate: '2022-11-17',
-  },
-  {
-    id: 26842,
-    title: 'The Message',
-    releaseDate: '1976-03-09',
-  },
-  {
-    id: 9821,
-    title: 'The Mighty',
-    releaseDate: '1998-06-01',
-  },
-  {
-    id: 799583,
-    title: 'The Ministry of Ungentlemanly Warfare',
-    releaseDate: '2024-04-18',
-  },
-  {
-    id: 425373,
-    title: 'The Miracle Season',
-    releaseDate: '2018-04-13',
-  },
-  {
-    id: 1162,
-    title: 'The Miracle Worker',
-    releaseDate: '1962-05-23',
-  },
-  {
-    id: 11416,
-    title: 'The Mission',
-    releaseDate: '1986-09-06',
-  },
-  {
-    id: 501929,
-    title: 'The Mitchells vs. the Machines',
-    releaseDate: '2021-04-22',
-  },
-  {
-    id: 10437,
-    title: 'The Muppet Christmas Carol',
-    releaseDate: '1992-12-11',
-  },
-  {
-    id: 11176,
-    title: 'The Muppet Movie',
-    releaseDate: '1979-06-22',
-  },
-  {
-    id: 44892,
-    title: 'The Music Box',
-    releaseDate: '1932-04-16',
-  },
-  {
-    id: 13671,
-    title: 'The Music Man',
-    releaseDate: '1962-06-19',
-  },
-  {
-    id: 56401,
-    title: 'The Music Never Stopped',
-    releaseDate: '2011-03-18',
-  },
-  {
-    id: 20482,
-    title: 'The Naked City',
-    releaseDate: '1948-03-04',
-  },
-  {
-    id: 37136,
-    title: 'The Naked Gun: From the Files of Police Squad!',
-    releaseDate: '1988-12-02',
-  },
-  {
-    id: 192,
-    title: 'The Name of the Rose',
-    releaseDate: '1986-09-24',
-  },
-  {
-    id: 31713,
-    title: 'The Narrow Margin',
-    releaseDate: '1952-05-03',
-  },
-  {
-    id: 32318,
-    title: 'The Navigator',
-    releaseDate: '1924-09-28',
-  },
-  {
-    id: 9631,
-    title: 'The Negotiator',
-    releaseDate: '1998-07-29',
-  },
-  {
-    id: 43539,
-    title: 'The Next Three Days',
-    releaseDate: '2010-11-18',
-  },
-  {
-    id: 290250,
-    title: 'The Nice Guys',
-    releaseDate: '2016-05-15',
-  },
-  {
-    id: 3112,
-    title: 'The Night of the Hunter',
-    releaseDate: '1955-07-26',
-  },
-  {
-    id: 14703,
-    title: 'The Night of the Iguana',
-    releaseDate: '1964-08-06',
-  },
-  {
-    id: 400090,
-    title: 'The Nightingale',
-    releaseDate: '2018-09-23',
-  },
-  {
-    id: 9479,
-    title: 'The Nightmare Before Christmas',
-    releaseDate: '1993-10-09',
-  },
-  {
-    id: 113833,
-    title: 'The Normal Heart',
-    releaseDate: '2014-05-25',
-  },
-  {
-    id: 639933,
-    title: 'The Northman',
-    releaseDate: '2022-04-07',
-  },
-  {
-    id: 11036,
-    title: 'The Notebook',
-    releaseDate: '2004-06-25',
-  },
-  {
-    id: 27029,
-    title: "The Nun's Story",
-    releaseDate: '1959-06-18',
-  },
-  {
-    id: 11356,
-    title: 'The Odd Couple',
-    releaseDate: '1968-05-16',
-  },
-  {
-    id: 71864,
-    title: 'The Odd Life of Timothy Green',
-    releaseDate: '2012-08-15',
-  },
-  {
-    id: 547016,
-    title: 'The Old Guard',
-    releaseDate: '2020-07-09',
-  },
-  {
-    id: 72640,
-    title: 'The Old Mill',
-    releaseDate: '1937-11-05',
-  },
-  {
-    id: 970348,
-    title: 'The Old Oak',
-    releaseDate: '2023-09-29',
-  },
-  {
-    id: 794,
-    title: 'The Omen',
-    releaseDate: '1976-06-25',
-  },
-  {
-    id: 508570,
-    title: 'The One and Only Ivan',
-    releaseDate: '2020-08-21',
-  },
-  {
-    id: 1933,
-    title: 'The Others',
-    releaseDate: '2001-08-02',
-  },
-  {
-    id: 799876,
-    title: 'The Outfit',
-    releaseDate: '2022-02-25',
-  },
-  {
-    id: 10747,
-    title: 'The Outlaw Josey Wales',
-    releaseDate: '1976-06-30',
-  },
-  {
-    id: 227,
-    title: 'The Outsiders',
-    releaseDate: '1983-03-25',
-  },
-  {
-    id: 980,
-    title: 'The Ox-Bow Incident',
-    releaseDate: '1943-03-11',
-  },
-  {
-    id: 14202,
-    title: 'The Painted Veil',
-    releaseDate: '2006-12-09',
-  },
-  {
-    id: 19186,
-    title: 'The Parent Trap',
-    releaseDate: '1961-05-13',
-  },
-  {
-    id: 9820,
-    title: 'The Parent Trap',
-    releaseDate: '1998-07-28',
-  },
-  {
-    id: 10794,
-    title: 'The Party',
-    releaseDate: '1968-04-04',
-  },
-  {
-    id: 615,
-    title: 'The Passion of the Christ',
-    releaseDate: '2004-02-25',
-  },
-  {
-    id: 2024,
-    title: 'The Patriot',
-    releaseDate: '2000-06-28',
-  },
-  {
-    id: 20540,
-    title: 'The Pawnbroker',
-    releaseDate: '1965-04-20',
-  },
-  {
-    id: 463257,
-    title: 'The Peanut Butter Falcon',
-    releaseDate: '2019-08-09',
-  },
-  {
-    id: 56601,
-    title: 'The Perfect Game',
-    releaseDate: '2009-11-09',
-  },
-  {
-    id: 84892,
-    title: 'The Perks of Being a Wallflower',
-    releaseDate: '2012-09-20',
-  },
-  {
-    id: 34283,
-    title: "The Pervert's Guide to Cinema",
-    releaseDate: '2006-10-06',
-  },
-  {
-    id: 17030,
-    title: 'The Petrified Forest',
-    releaseDate: '1936-02-08',
-  },
-  {
-    id: 9833,
-    title: 'The Phantom of the Opera',
-    releaseDate: '2004-12-08',
-  },
-  {
-    id: 964,
-    title: 'The Phantom of the Opera',
-    releaseDate: '1925-06-29',
-  },
-  {
-    id: 76115,
-    title: 'The Phantom of the Opera at the Royal Albert Hall',
-    releaseDate: '2011-09-27',
-  },
-  {
-    id: 981,
-    title: 'The Philadelphia Story',
-    releaseDate: '1940-12-05',
-  },
-  {
-    id: 169881,
-    title: 'The Physician',
-    releaseDate: '2013-12-25',
-  },
-  {
-    id: 423,
-    title: 'The Pianist',
-    releaseDate: '2002-09-17',
-  },
-  {
-    id: 713,
-    title: 'The Piano',
-    releaseDate: '1993-05-18',
-  },
-  {
-    id: 16559,
-    title: 'The Picture of Dorian Gray',
-    releaseDate: '1945-03-03',
-  },
-  {
-    id: 15302,
-    title: 'The Pixar Story',
-    releaseDate: '2007-08-28',
-  },
-  {
-    id: 30060,
-    title: 'The Plague Dogs',
-    releaseDate: '1982-10-01',
-  },
-  {
-    id: 10403,
-    title: 'The Player',
-    releaseDate: '1992-05-08',
-  },
-  {
-    id: 551,
-    title: 'The Poseidon Adventure',
-    releaseDate: '1972-12-01',
-  },
-  {
-    id: 446354,
-    title: 'The Post',
-    releaseDate: '2017-12-22',
-  },
-  {
-    id: 25736,
-    title: 'The Postman Always Rings Twice',
-    releaseDate: '1946-05-02',
-  },
-  {
-    id: 379779,
-    title: 'The Present',
-    releaseDate: '2014-04-22',
-  },
-  {
-    id: 1124,
-    title: 'The Prestige',
-    releaseDate: '2006-10-17',
-  },
-  {
-    id: 9837,
-    title: 'The Prince of Egypt',
-    releaseDate: '1998-12-16',
-  },
-  {
-    id: 10198,
-    title: 'The Princess and the Frog',
-    releaseDate: '2009-12-08',
-  },
-  {
-    id: 2493,
-    title: 'The Princess Bride',
-    releaseDate: '1987-09-25',
-  },
-  {
-    id: 30197,
-    title: 'The Producers',
-    releaseDate: '1968-03-18',
-  },
-  {
-    id: 22383,
-    title: 'The Professionals',
-    releaseDate: '1966-11-01',
-  },
-  {
-    id: 411728,
-    title: 'The Professor and the Madman',
-    releaseDate: '2019-03-07',
-  },
-  {
-    id: 18240,
-    title: 'The Proposal',
-    releaseDate: '2009-06-02',
-  },
-  {
-    id: 16608,
-    title: 'The Proposition',
-    releaseDate: '2005-10-06',
-  },
-  {
-    id: 17687,
-    title: 'The Public Enemy',
-    releaseDate: '1931-04-23',
-  },
-  {
-    id: 10849,
-    title: 'The Purple Rose of Cairo',
-    releaseDate: '1985-03-01',
-  },
-  {
-    id: 1402,
-    title: 'The Pursuit of Happyness',
-    releaseDate: '2006-12-14',
-  },
-  {
-    id: 3109,
-    title: 'The Quiet Man',
-    releaseDate: '1952-07-21',
-  },
-  {
-    id: 11975,
-    title: 'The Rainmaker',
-    releaseDate: '1997-11-18',
-  },
-  {
-    id: 8055,
-    title: 'The Reader',
-    releaseDate: '2008-12-10',
-  },
-  {
-    id: 366696,
-    title: 'The Red Pill',
-    releaseDate: '2016-10-14',
-  },
-  {
-    id: 19542,
-    title: 'The Red Shoes',
-    releaseDate: '1948-09-06',
-  },
-  {
-    id: 1018648,
-    title: 'The Redeem Team',
-    releaseDate: '2022-10-07',
-  },
-  {
-    id: 1245,
-    title: 'The Remains of the Day',
-    releaseDate: '1993-11-05',
-  },
-  {
-    id: 524348,
-    title: 'The Report',
-    releaseDate: '2019-09-12',
-  },
-  {
-    id: 680058,
-    title: 'The Rescue',
-    releaseDate: '2021-10-08',
-  },
-  {
-    id: 10925,
-    title: 'The Return of the Living Dead',
-    releaseDate: '1985-04-25',
-  },
-  {
-    id: 281957,
-    title: 'The Revenant',
-    releaseDate: '2015-12-25',
-  },
-  {
-    id: 453278,
-    title: 'The Rider',
-    releaseDate: '2018-03-28',
-  },
-  {
-    id: 9549,
-    title: 'The Right Stuff',
-    releaseDate: '1983-10-20',
-  },
-  {
-    id: 1306368,
-    title: 'The Rip',
-    releaseDate: '2026-01-13',
-  },
-  {
-    id: 20766,
-    title: 'The Road',
-    releaseDate: '2009-11-25',
-  },
-  {
-    id: 10501,
-    title: 'The Road to El Dorado',
-    releaseDate: '2000-03-31',
-  },
-  {
-    id: 37698,
-    title: 'The Roaring Twenties',
-    releaseDate: '1939-10-28',
-  },
-  {
-    id: 9802,
-    title: 'The Rock',
-    releaseDate: '1996-06-07',
-  },
-  {
-    id: 36685,
-    title: 'The Rocky Horror Picture Show',
-    releaseDate: '1975-08-14',
-  },
-  {
-    id: 25527,
-    title: 'The Ron Clark Story',
-    releaseDate: '2006-08-13',
-  },
-  {
-    id: 9428,
-    title: 'The Royal Tenenbaums',
-    releaseDate: '2001-10-05',
-  },
-  {
-    id: 5923,
-    title: 'The Sand Pebbles',
-    releaseDate: '1966-12-20',
-  },
-  {
-    id: 11528,
-    title: 'The Sandlot',
-    releaseDate: '1993-04-07',
-  },
-  {
-    id: 51357,
-    title: 'The Scarecrow',
-    releaseDate: '1920-11-07',
-  },
-  {
-    id: 779782,
-    title: 'The School for Good and Evil',
-    releaseDate: '2022-10-19',
-  },
-  {
-    id: 560057,
-    title: 'The Sea Beast',
-    releaseDate: '2022-06-24',
-  },
-  {
-    id: 3114,
-    title: 'The Searchers',
-    releaseDate: '1956-05-16',
-  },
-  {
-    id: 24358,
-    title: 'The Second Renaissance Part I',
-    releaseDate: '2003-02-04',
-  },
-  {
-    id: 24362,
-    title: 'The Second Renaissance Part II',
-    releaseDate: '2003-05-05',
-  },
-  {
-    id: 11236,
-    title: 'The Secret Garden',
-    releaseDate: '1993-08-13',
-  },
-  {
-    id: 12837,
-    title: 'The Secret Life of Bees',
-    releaseDate: '2008-09-17',
-  },
-  {
-    id: 116745,
-    title: 'The Secret Life of Walter Mitty',
-    releaseDate: '2013-12-18',
-  },
-  {
-    id: 26963,
-    title: 'The Secret of Kells',
-    releaseDate: '2009-02-09',
-  },
-  {
-    id: 11704,
-    title: 'The Secret of NIMH',
-    releaseDate: '1982-06-17',
-  },
-  {
-    id: 283591,
-    title: 'The Secret Scripture',
-    releaseDate: '2017-03-23',
-  },
-  {
-    id: 550231,
-    title: 'The Secret: Dare to Dream',
-    releaseDate: '2020-04-16',
-  },
-  {
-    id: 194101,
-    title: 'The Selfish Giant',
-    releaseDate: '2013-10-25',
-  },
-  {
-    id: 42987,
-    title: 'The Servant',
-    releaseDate: '1963-11-14',
-  },
-  {
-    id: 17218,
-    title: 'The Set-Up',
-    releaseDate: '1949-03-29',
-  },
-  {
-    id: 10653,
-    title: 'The Seven Year Itch',
-    releaseDate: '1955-06-03',
-  },
-  {
-    id: 345938,
-    title: 'The Shack',
-    releaseDate: '2017-03-03',
-  },
-  {
-    id: 399055,
-    title: 'The Shape of Water',
-    releaseDate: '2017-12-01',
-  },
-  {
-    id: 278,
-    title: 'The Shawshank Redemption',
-    releaseDate: '1994-09-23',
-  },
-  {
-    id: 694,
-    title: 'The Shining',
-    releaseDate: '1980-05-23',
-  },
-  {
-    id: 12584,
-    title: 'The Shootist',
-    releaseDate: '1976-07-21',
-  },
-  {
-    id: 20334,
-    title: 'The Shop Around the Corner',
-    releaseDate: '1940-01-12',
-  },
-  {
-    id: 334517,
-    title: 'The Siege of Jadotville',
-    releaseDate: '2016-09-19',
-  },
-  {
-    id: 274,
-    title: 'The Silence of the Lambs',
-    releaseDate: '1991-02-14',
-  },
-  {
-    id: 35,
-    title: 'The Simpsons Movie',
-    releaseDate: '2007-07-25',
-  },
-  {
-    id: 1061699,
-    title: 'The Six Triple Eight',
-    releaseDate: '2024-12-06',
-  },
-  {
-    id: 745,
-    title: 'The Sixth Sense',
-    releaseDate: '1999-08-06',
-  },
-  {
-    id: 88018,
-    title: 'The Skeleton Dance',
-    releaseDate: '1929-08-29',
-  },
-  {
-    id: 13396,
-    title: 'The Snowman',
-    releaseDate: '1982-12-26',
-  },
-  {
-    id: 656690,
-    title: 'The Social Dilemma',
-    releaseDate: '2020-01-26',
-  },
-  {
-    id: 37799,
-    title: 'The Social Network',
-    releaseDate: '2010-10-01',
-  },
-  {
-    id: 16211,
-    title: 'The Sons of Katie Elder',
-    releaseDate: '1965-06-23',
-  },
-  {
-    id: 15121,
-    title: 'The Sound of Music',
-    releaseDate: '1965-03-29',
-  },
-  {
-    id: 365942,
-    title: 'The Space Between Us',
-    releaseDate: '2017-01-26',
-  },
-  {
-    id: 27452,
-    title: 'The Spiral Staircase',
-    releaseDate: '1946-01-26',
-  },
-  {
-    id: 367544,
-    title: 'The Spirit of Christmas',
-    releaseDate: '2015-11-28',
-  },
-  {
-    id: 400160,
-    title: 'The SpongeBob Movie: Sponge on the Run',
-    releaseDate: '2020-08-14',
-  },
-  {
-    id: 11836,
-    title: 'The SpongeBob SquarePants Movie',
-    releaseDate: '2004-11-19',
-  },
-  {
-    id: 13580,
-    title: 'The Spy Who Came In from the Cold',
-    releaseDate: '1965-12-16',
-  },
-  {
-    id: 2056,
-    title: 'The Station Agent',
-    releaseDate: '2003-12-05',
-  },
-  {
-    id: 9277,
-    title: 'The Sting',
-    releaseDate: '1973-12-25',
-  },
-  {
-    id: 33409,
-    title: 'The Stoning of Soraya M.',
-    releaseDate: '2009-06-26',
-  },
-  {
-    id: 404,
-    title: 'The Straight Story',
-    releaseDate: '1999-10-15',
-  },
-  {
-    id: 27033,
-    title: 'The Strange Love of Martha Ivers',
-    releaseDate: '1946-08-19',
-  },
-  {
-    id: 20246,
-    title: 'The Stranger',
-    releaseDate: '1946-06-02',
-  },
-  {
-    id: 933260,
-    title: 'The Substance',
-    releaseDate: '2024-09-07',
-  },
-  {
-    id: 436969,
-    title: 'The Suicide Squad',
-    releaseDate: '2021-07-28',
-  },
-  {
-    id: 56831,
-    title: 'The Sunset Limited',
-    releaseDate: '2011-02-12',
-  },
-  {
-    id: 502356,
-    title: 'The Super Mario Bros. Movie',
-    releaseDate: '2023-04-05',
-  },
-  {
-    id: 33564,
-    title: 'The Swimmer',
-    releaseDate: '1968-08-09',
-  },
-  {
-    id: 821881,
-    title: 'The Swimmers',
-    releaseDate: '2022-09-08',
-  },
-  {
-    id: 9078,
-    title: 'The Sword in the Stone',
-    releaseDate: '1963-12-25',
-  },
-  {
-    id: 8333,
-    title: 'The Taking of Pelham One Two Three',
-    releaseDate: '1974-10-02',
-  },
-  {
-    id: 369523,
-    title: 'The Tale',
-    releaseDate: '2018-01-20',
-  },
-  {
-    id: 1213,
-    title: 'The Talented Mr. Ripley',
-    releaseDate: '1999-12-25',
-  },
-  {
-    id: 6844,
-    title: 'The Ten Commandments',
-    releaseDate: '1956-10-05',
-  },
-  {
-    id: 594,
-    title: 'The Terminal',
-    releaseDate: '2004-06-17',
-  },
-  {
-    id: 218,
-    title: 'The Terminator',
-    releaseDate: '1984-10-26',
-  },
-  {
-    id: 30497,
-    title: 'The Texas Chain Saw Massacre',
-    releaseDate: '1974-10-11',
-  },
-  {
-    id: 266856,
-    title: 'The Theory of Everything',
-    releaseDate: '2014-11-07',
-  },
-  {
-    id: 28963,
-    title: 'The Thief of Bagdad',
-    releaseDate: '1924-03-18',
-  },
-  {
-    id: 12232,
-    title: 'The Thief of Bagdad',
-    releaseDate: '1940-02-19',
-  },
-  {
-    id: 14285,
-    title: 'The Thin Blue Line',
-    releaseDate: '1988-08-28',
-  },
-  {
-    id: 3529,
-    title: 'The Thin Man',
-    releaseDate: '1934-05-25',
-  },
-  {
-    id: 8741,
-    title: 'The Thin Red Line',
-    releaseDate: '1998-12-23',
-  },
-  {
-    id: 1091,
-    title: 'The Thing',
-    releaseDate: '1982-06-25',
-  },
-  {
-    id: 1092,
-    title: 'The Third Man',
-    releaseDate: '1949-08-31',
-  },
-  {
-    id: 1090,
-    title: 'The Thirteenth Floor',
-    releaseDate: '1999-04-16',
-  },
-  {
-    id: 8053,
-    title: 'The Three Burials of Melquiades Estrada',
-    releaseDate: '2005-11-17',
-  },
-  {
-    id: 2134,
-    title: 'The Time Machine',
-    releaseDate: '1960-05-25',
-  },
-  {
-    id: 588228,
-    title: 'The Tomorrow War',
-    releaseDate: '2021-09-03',
-  },
-  {
-    id: 5919,
-    title: 'The Towering Inferno',
-    releaseDate: '1974-12-14',
-  },
-  {
-    id: 23168,
-    title: 'The Town',
-    releaseDate: '2010-09-15',
-  },
-  {
-    id: 3482,
-    title: 'The Train',
-    releaseDate: '1964-09-24',
-  },
-  {
-    id: 1857,
-    title: 'The Transformers: The Movie',
-    releaseDate: '1986-08-08',
-  },
-  {
-    id: 3090,
-    title: 'The Treasure of the Sierra Madre',
-    releaseDate: '1948-01-15',
-  },
-  {
-    id: 556984,
-    title: 'The Trial of the Chicago 7',
-    releaseDate: '2020-09-25',
-  },
-  {
-    id: 339065,
-    title: 'The True Cost',
-    releaseDate: '2015-05-29',
-  },
-  {
-    id: 37165,
-    title: 'The Truman Show',
-    releaseDate: '1998-06-04',
-  },
-  {
-    id: 551332,
-    title: 'The Two Popes',
-    releaseDate: '2019-11-27',
-  },
-  {
-    id: 14624,
-    title: 'The Ultimate Gift',
-    releaseDate: '2007-03-09',
-  },
-  {
-    id: 1007826,
-    title: 'The Underdoggs',
-    releaseDate: '2024-01-25',
-  },
-  {
-    id: 645886,
-    title: 'The Unforgivable',
-    releaseDate: '2021-11-24',
-  },
-  {
-    id: 27503,
-    title: 'The Unknown',
-    releaseDate: '1927-05-29',
-  },
-  {
-    id: 117,
-    title: 'The Untouchables',
-    releaseDate: '1987-06-03',
-  },
-  {
-    id: 440472,
-    title: 'The Upside',
-    releaseDate: '2019-01-10',
-  },
-  {
-    id: 629,
-    title: 'The Usual Suspects',
-    releaseDate: '1995-07-19',
-  },
-  {
-    id: 810171,
-    title: 'The Valet',
-    releaseDate: '2022-05-11',
-  },
-  {
-    id: 42329,
-    title: 'The Valley of Gwangi',
-    releaseDate: '1969-06-11',
-  },
-  {
-    id: 24226,
-    title: 'The Verdict',
-    releaseDate: '1982-12-08',
-  },
-  {
-    id: 42661,
-    title: 'The Vikings',
-    releaseDate: '1958-06-11',
-  },
-  {
-    id: 1443,
-    title: 'The Virgin Suicides',
-    releaseDate: '2000-04-21',
-  },
-  {
-    id: 12473,
-    title: 'The Visitor',
-    releaseDate: '2008-02-21',
-  },
-  {
-    id: 1018645,
-    title: 'The Volcano: Rescue from Whakaari',
-    releaseDate: '2022-11-03',
-  },
-  {
-    id: 72570,
-    title: 'The Vow',
-    releaseDate: '2012-02-05',
-  },
-  {
-    id: 26508,
-    title: 'The War Game',
-    releaseDate: '1966-04-13',
-  },
-  {
-    id: 11474,
-    title: 'The Warriors',
-    releaseDate: '1979-02-01',
-  },
-  {
-    id: 59468,
-    title: 'The Way',
-    releaseDate: '2010-09-10',
-  },
-  {
-    id: 49009,
-    title: 'The Way Back',
-    releaseDate: '2010-11-22',
-  },
-  {
-    id: 147773,
-    title: 'The Way Way Back',
-    releaseDate: '2013-06-06',
-  },
-  {
-    id: 785084,
-    title: 'The Whale',
-    releaseDate: '2022-12-09',
-  },
-  {
-    id: 16307,
-    title: 'The Wicker Man',
-    releaseDate: '1973-12-06',
-  },
-  {
-    id: 340613,
-    title: 'The Wife',
-    releaseDate: '2018-08-02',
-  },
-  {
-    id: 576,
-    title: 'The Wild Bunch',
-    releaseDate: '1969-06-19',
-  },
-  {
-    id: 1184918,
-    title: 'The Wild Robot',
-    releaseDate: '2024-09-12',
-  },
-  {
-    id: 560044,
-    title: 'The Willoughbys',
-    releaseDate: '2020-04-22',
-  },
-  {
-    id: 1116,
-    title: 'The Wind That Shakes the Barley',
-    releaseDate: '2006-06-23',
-  },
-  {
-    id: 666243,
-    title: 'The Witcher: Nightmare of the Wolf',
-    releaseDate: '2021-08-22',
-  },
-  {
-    id: 630,
-    title: 'The Wizard of Oz',
-    releaseDate: '1939-08-15',
-  },
-  {
-    id: 178682,
-    title: 'The Wizards Return: Alex vs. Alex',
-    releaseDate: '2013-06-01',
-  },
-  {
-    id: 13666,
-    title: 'The Wolf Man',
-    releaseDate: '1941-12-09',
-  },
-  {
-    id: 106646,
-    title: 'The Wolf of Wall Street',
-    releaseDate: '2013-12-25',
-  },
-  {
-    id: 17136,
-    title: 'The Woman in the Window',
-    releaseDate: '1944-10-25',
-  },
-  {
-    id: 724495,
-    title: 'The Woman King',
-    releaseDate: '2022-09-16',
-  },
-  {
-    id: 22490,
-    title: 'The Women',
-    releaseDate: '1939-09-01',
-  },
-  {
-    id: 923939,
-    title: 'The Wonderful Story of Henry Sugar',
-    releaseDate: '2023-09-20',
-  },
-  {
-    id: 506281,
-    title: 'The World to Come',
-    releaseDate: '2021-02-12',
-  },
-  {
-    id: 9912,
-    title: "The World's Fastest Indian",
-    releaseDate: '2005-10-12',
-  },
-  {
-    id: 12163,
-    title: 'The Wrestler',
-    releaseDate: '2008-09-07',
-  },
-  {
-    id: 22527,
-    title: 'The Wrong Man',
-    releaseDate: '1956-12-22',
-  },
-  {
-    id: 531,
-    title: 'The Wrong Trousers',
-    releaseDate: '1993-12-17',
-  },
-  {
-    id: 28415,
-    title: 'The Yakuza',
-    releaseDate: '1974-12-21',
-  },
-  {
-    id: 13397,
-    title: 'The Year Without a Santa Claus',
-    releaseDate: '1974-12-10',
-  },
-  {
-    id: 408159,
-    title: 'The Young Offenders',
-    releaseDate: '2016-09-16',
-  },
-  {
-    id: 18320,
-    title: 'The Young Victoria',
-    releaseDate: '2009-03-04',
-  },
-  {
-    id: 467244,
-    title: 'The Zone of Interest',
-    releaseDate: '2023-12-15',
-  },
-  {
-    id: 289222,
-    title: "The Zookeeper's Wife",
-    releaseDate: '2017-03-24',
-  },
-  {
-    id: 1541,
-    title: 'Thelma & Louise',
-    releaseDate: '1991-05-24',
-  },
-  {
-    id: 375785,
-    title: 'Then Came You',
-    releaseDate: '2018-12-05',
-  },
-  {
-    id: 7345,
-    title: 'There Will Be Blood',
-    releaseDate: '2007-12-26',
-  },
-  {
-    id: 8337,
-    title: 'They Live',
-    releaseDate: '1988-11-04',
-  },
-  {
-    id: 543580,
-    title: 'They Shall Not Grow Old',
-    releaseDate: '2018-11-09',
-  },
-  {
-    id: 28145,
-    title: "They Shoot Horses, Don't They?",
-    releaseDate: '1969-12-10',
-  },
-  {
-    id: 11524,
-    title: 'Thief',
-    releaseDate: '1981-03-27',
-  },
-  {
-    id: 11973,
-    title: 'Thirteen Days',
-    releaseDate: '2000-12-25',
-  },
-  {
-    id: 698948,
-    title: 'Thirteen Lives',
-    releaseDate: '2022-07-18',
-  },
-  {
-    id: 352490,
-    title: 'This Beautiful Fantastic',
-    releaseDate: '2016-10-20',
-  },
-  {
-    id: 8092,
-    title: "This Boy's Life",
-    releaseDate: '1993-04-09',
-  },
-  {
-    id: 16070,
-    title: 'This Film Is Not Yet Rated',
-    releaseDate: '2006-01-25',
-  },
-  {
-    id: 11798,
-    title: 'This Is England',
-    releaseDate: '2007-04-27',
-  },
-  {
-    id: 13576,
-    title: 'This Is It',
-    releaseDate: '2009-10-28',
-  },
-  {
-    id: 11031,
-    title: 'This Is Spinal Tap',
-    releaseDate: '1984-03-02',
-  },
-  {
-    id: 284053,
-    title: 'Thor: Ragnarok',
-    releaseDate: '2017-10-02',
-  },
-  {
-    id: 17835,
-    title: 'Threads',
-    releaseDate: '1985-08-06',
-  },
-  {
-    id: 359940,
-    title: 'Three Billboards Outside Ebbing, Missouri',
-    releaseDate: '2017-12-01',
-  },
-  {
-    id: 11963,
-    title: 'Three Days of the Condor',
-    releaseDate: '1975-09-24',
-  },
-  {
-    id: 489988,
-    title: 'Three Identical Strangers',
-    releaseDate: '2018-06-29',
-  },
-  {
-    id: 67661,
-    title: 'Thru the Mirror',
-    releaseDate: '1936-05-30',
-  },
-  {
-    id: 986056,
-    title: 'Thunderbolts*',
-    releaseDate: '2025-04-30',
-  },
-  {
-    id: 537116,
-    title: 'tick, tick... BOOM!',
-    releaseDate: '2021-11-11',
-  },
-  {
-    id: 373072,
-    title: 'Tickled',
-    releaseDate: '2016-05-26',
-  },
-  {
-    id: 854239,
-    title: 'Till',
-    releaseDate: '2022-10-14',
-  },
-  {
-    id: 212063,
-    title: "Tim's Vermeer",
-    releaseDate: '2013-12-06',
-  },
-  {
-    id: 297270,
-    title: 'Tinker Bell and the Legend of the NeverBeast',
-    releaseDate: '2014-12-12',
-  },
-  {
-    id: 597,
-    title: 'Titanic',
-    releaseDate: '1997-12-18',
-  },
-  {
-    id: 466282,
-    title: "To All the Boys I've Loved Before",
-    releaseDate: '2018-08-17',
-  },
-  {
-    id: 614409,
-    title: 'To All the Boys: Always and Forever',
-    releaseDate: '2021-02-12',
-  },
-  {
-    id: 198,
-    title: 'To Be or Not to Be',
-    releaseDate: '1942-03-06',
-  },
-  {
-    id: 381,
-    title: 'To Catch a Thief',
-    releaseDate: '1955-08-03',
-  },
-  {
-    id: 1149947,
-    title: 'To End All War: Oppenheimer & the Atomic Bomb',
-    releaseDate: '2023-07-09',
-  },
-  {
-    id: 22584,
-    title: 'To Have and Have Not',
-    releaseDate: '1945-01-20',
-  },
-  {
-    id: 595,
-    title: 'To Kill a Mockingbird',
-    releaseDate: '1962-12-20',
-  },
-  {
-    id: 823147,
-    title: 'To Leslie',
-    releaseDate: '2022-10-07',
-  },
-  {
-    id: 9846,
-    title: 'To Live and Die in L.A.',
-    releaseDate: '1985-11-01',
-  },
-  {
-    id: 25934,
-    title: 'To Sir, with Love',
-    releaseDate: '1967-06-14',
-  },
-  {
-    id: 401104,
-    title: 'To the Bone',
-    releaseDate: '2017-01-22',
-  },
-  {
-    id: 9090,
-    title: 'To Wong Foo, Thanks for Everything! Julie Newmar',
-    releaseDate: '1995-09-08',
-  },
-  {
-    id: 1242011,
-    title: 'Together',
-    releaseDate: '2025-07-28',
-  },
-  {
-    id: 606856,
-    title: 'Togo',
-    releaseDate: '2019-12-20',
-  },
-  {
-    id: 42246,
-    title: 'Tom and Jerry: The Fast and the Furry',
-    releaseDate: '2005-09-03',
-  },
-  {
-    id: 11969,
-    title: 'Tombstone',
-    releaseDate: '1993-12-25',
-  },
-  {
-    id: 9576,
-    title: 'Tootsie',
-    releaseDate: '1982-12-17',
-  },
-  {
-    id: 744,
-    title: 'Top Gun',
-    releaseDate: '1986-05-16',
-  },
-  {
-    id: 361743,
-    title: 'Top Gun: Maverick',
-    releaseDate: '2022-05-21',
-  },
-  {
-    id: 3080,
-    title: 'Top Hat',
-    releaseDate: '1935-08-29',
-  },
-  {
-    id: 8764,
-    title: 'Top Secret!',
-    releaseDate: '1984-06-22',
-  },
-  {
-    id: 11165,
-    title: 'Tora! Tora! Tora!',
-    releaseDate: '1970-01-26',
-  },
-  {
-    id: 861,
-    title: 'Total Recall',
-    releaseDate: '1990-06-01',
-  },
-  {
-    id: 1480,
-    title: 'Touch of Evil',
-    releaseDate: '1958-03-30',
-  },
-  {
-    id: 11194,
-    title: 'Touching the Void',
-    releaseDate: '2003-09-05',
-  },
-  {
-    id: 381028,
-    title: 'Tower',
-    releaseDate: '2016-03-13',
-  },
-  {
-    id: 862,
-    title: 'Toy Story',
-    releaseDate: '1995-11-22',
-  },
-  {
-    id: 863,
-    title: 'Toy Story 2',
-    releaseDate: '1999-10-30',
-  },
-  {
-    id: 10193,
-    title: 'Toy Story 3',
-    releaseDate: '2010-06-16',
-  },
-  {
-    id: 301528,
-    title: 'Toy Story 4',
-    releaseDate: '2019-06-19',
-  },
-  {
-    id: 213121,
-    title: 'Toy Story of Terror!',
-    releaseDate: '2013-10-16',
-  },
-  {
-    id: 256835,
-    title: 'Toy Story That Time Forgot',
-    releaseDate: '2014-12-02',
-  },
-  {
-    id: 1621,
-    title: 'Trading Places',
-    releaseDate: '1983-06-07',
-  },
-  {
-    id: 1900,
-    title: 'Traffic',
-    releaseDate: '2000-12-27',
-  },
-  {
-    id: 1241983,
-    title: 'Train Dreams',
-    releaseDate: '2025-11-05',
-  },
-  {
-    id: 2034,
-    title: 'Training Day',
-    releaseDate: '2001-10-05',
-  },
-  {
-    id: 229408,
-    title: 'Training Wheels',
-    releaseDate: '2013-12-10',
-  },
-  {
-    id: 627,
-    title: 'Trainspotting',
-    releaseDate: '1996-02-23',
-  },
-  {
-    id: 698687,
-    title: 'Transformers One',
-    releaseDate: '2024-09-11',
-  },
-  {
-    id: 667538,
-    title: 'Transformers: Rise of the Beasts',
-    releaseDate: '2023-06-06',
-  },
-  {
-    id: 206563,
-    title: 'Trash',
-    releaseDate: '2014-10-09',
-  },
-  {
-    id: 9016,
-    title: 'Treasure Planet',
-    releaseDate: '2002-11-26',
-  },
-  {
-    id: 481880,
-    title: 'Trial by Fire',
-    releaseDate: '2019-05-17',
-  },
-  {
-    id: 497828,
-    title: 'Triangle of Sadness',
-    releaseDate: '2022-09-18',
-  },
-  {
-    id: 1015724,
-    title: 'Trick or Treat Scooby-Doo!',
-    releaseDate: '2022-10-04',
-  },
-  {
-    id: 730840,
-    title: 'Trollhunters: Rise of the Titans',
-    releaseDate: '2021-07-21',
-  },
-  {
-    id: 901362,
-    title: 'Trolls Band Together',
-    releaseDate: '2023-10-12',
-  },
-  {
-    id: 896221,
-    title: 'Trolls Holiday in Harmony',
-    releaseDate: '2021-11-26',
-  },
-  {
-    id: 446893,
-    title: 'Trolls World Tour',
-    releaseDate: '2020-03-11',
-  },
-  {
-    id: 195,
-    title: 'Trouble in Paradise',
-    releaseDate: '1932-10-30',
-  },
-  {
-    id: 652,
-    title: 'Troy',
-    releaseDate: '2004-05-13',
-  },
-  {
-    id: 44264,
-    title: 'True Grit',
-    releaseDate: '2010-12-22',
-  },
-  {
-    id: 17529,
-    title: 'True Grit',
-    releaseDate: '1969-06-11',
-  },
-  {
-    id: 36955,
-    title: 'True Lies',
-    releaseDate: '1994-07-15',
-  },
-  {
-    id: 319,
-    title: 'True Romance',
-    releaseDate: '1993-09-09',
-  },
-  {
-    id: 294016,
-    title: 'Trumbo',
-    releaseDate: '2015-10-27',
-  },
-  {
-    id: 46838,
-    title: 'Tucker and Dale vs. Evil',
-    releaseDate: '2010-01-22',
-  },
-  {
-    id: 21525,
-    title: 'Tupac: Resurrection',
-    releaseDate: '2003-11-14',
-  },
-  {
-    id: 508947,
-    title: 'Turning Red',
-    releaseDate: '2022-03-10',
-  },
-  {
-    id: 574451,
-    title: 'Turtles All the Way Down',
-    releaseDate: '2024-04-27',
-  },
-  {
-    id: 34003,
-    title: 'Turtles Forever',
-    releaseDate: '2009-11-21',
-  },
-  {
-    id: 63,
-    title: 'Twelve Monkeys',
-    releaseDate: '1995-01-05',
-  },
-  {
-    id: 15497,
-    title: "Twelve O'Clock High",
-    releaseDate: '1949-12-21',
-  },
-  {
-    id: 1923,
-    title: 'Twin Peaks: Fire Walk with Me',
-    releaseDate: '1992-06-03',
-  },
-  {
-    id: 587562,
-    title: 'Two by Two: Overboard!',
-    releaseDate: '2020-09-24',
-  },
-  {
-    id: 787428,
-    title: 'Two Distant Strangers',
-    releaseDate: '2020-11-20',
-  },
-  {
-    id: 5767,
-    title: 'Two for the Road',
-    releaseDate: '1967-04-27',
-  },
-  {
-    id: 76543,
-    title: 'Tyrannosaur',
-    releaseDate: '2011-10-07',
-  },
-  {
-    id: 817758,
-    title: 'TÁR',
-    releaseDate: '2022-09-23',
-  },
-  {
-    id: 829402,
-    title: 'Ultraman: Rising',
-    releaseDate: '2024-06-14',
-  },
-  {
-    id: 9741,
-    title: 'Unbreakable',
-    releaseDate: '2000-11-22',
-  },
-  {
-    id: 227306,
-    title: 'Unbroken',
-    releaseDate: '2014-12-25',
-  },
-  {
-    id: 634544,
-    title: 'Uncle Frank',
-    releaseDate: '2020-11-25',
-  },
-  {
-    id: 473033,
-    title: 'Uncut Gems',
-    releaseDate: '2019-08-30',
-  },
-  {
-    id: 15255,
-    title: 'Undisputed II: Last Man Standing',
-    releaseDate: '2006-04-11',
-  },
-  {
-    id: 38234,
-    title: 'Undisputed III: Redemption',
-    releaseDate: '2010-04-17',
-  },
-  {
-    id: 33,
-    title: 'Unforgiven',
-    releaseDate: '1992-08-07',
-  },
-  {
-    id: 9829,
-    title: 'United 93',
-    releaseDate: '2006-04-28',
-  },
-  {
-    id: 14160,
-    title: 'Up',
-    releaseDate: '2009-05-28',
-  },
-  {
-    id: 500664,
-    title: 'Upgrade',
-    releaseDate: '2018-05-31',
-  },
-  {
-    id: 1014590,
-    title: 'Upgraded',
-    releaseDate: '2024-02-07',
-  },
-  {
-    id: 671583,
-    title: 'Upside-Down Magic',
-    releaseDate: '2020-07-31',
-  },
-  {
-    id: 779047,
-    title: 'Us Again',
-    releaseDate: '2021-03-03',
-  },
-  {
-    id: 752,
-    title: 'V for Vendetta',
-    releaseDate: '2006-02-23',
-  },
-  {
-    id: 653349,
-    title: 'Vacation Friends',
-    releaseDate: '2021-08-27',
-  },
-  {
-    id: 834027,
-    title: 'Val',
-    releaseDate: '2021-07-23',
-  },
-  {
-    id: 11951,
-    title: 'Vanishing Point',
-    releaseDate: '1971-01-15',
-  },
-  {
-    id: 11109,
-    title: 'Vera Drake',
-    releaseDate: '2004-10-22',
-  },
-  {
-    id: 426,
-    title: 'Vertigo',
-    releaseDate: '1958-05-09',
-  },
-  {
-    id: 429197,
-    title: 'Vice',
-    releaseDate: '2018-12-25',
-  },
-  {
-    id: 43028,
-    title: 'Victim',
-    releaseDate: '1961-08-01',
-  },
-  {
-    id: 12614,
-    title: 'Victor/Victoria',
-    releaseDate: '1982-04-25',
-  },
-  {
-    id: 837,
-    title: 'Videodrome',
-    releaseDate: '1983-02-04',
-  },
-  {
-    id: 11773,
-    title: 'Village of the Damned',
-    releaseDate: '1960-06-16',
-  },
-  {
-    id: 32085,
-    title: 'Vincent',
-    releaseDate: '1982-10-01',
-  },
-  {
-    id: 899112,
-    title: 'Violent Night',
-    releaseDate: '2022-11-30',
-  },
-  {
-    id: 263614,
-    title: 'Virunga',
-    releaseDate: '2014-11-07',
-  },
-  {
-    id: 449406,
-    title: 'Vivo',
-    releaseDate: '2021-07-30',
-  },
-  {
-    id: 21876,
-    title: "Von Ryan's Express",
-    releaseDate: '1965-06-23',
-  },
-  {
-    id: 11206,
-    title: 'Wait Until Dark',
-    releaseDate: '1967-10-26',
-  },
-  {
-    id: 26405,
-    title: 'Wake in Fright',
-    releaseDate: '1971-07-21',
-  },
-  {
-    id: 812583,
-    title: 'Wake Up Dead Man: A Knives Out Mystery',
-    releaseDate: '2025-11-26',
-  },
-  {
-    id: 9081,
-    title: 'Waking Life',
-    releaseDate: '2001-10-19',
-  },
-  {
-    id: 10162,
-    title: 'Waking Ned',
-    releaseDate: '1998-11-20',
-  },
-  {
-    id: 69,
-    title: 'Walk the Line',
-    releaseDate: '2005-09-13',
-  },
-  {
-    id: 581420,
-    title: 'Walk. Ride. Rodeo.',
-    releaseDate: '2019-03-08',
-  },
-  {
-    id: 36040,
-    title: 'Walkabout',
-    releaseDate: '1971-07-01',
-  },
-  {
-    id: 10673,
-    title: 'Wall Street',
-    releaseDate: '1987-12-10',
-  },
-  {
-    id: 533,
-    title: 'Wallace & Gromit: The Curse of the Were-Rabbit',
-    releaseDate: '2005-09-15',
-  },
-  {
-    id: 929204,
-    title: 'Wallace & Gromit: Vengeance Most Fowl',
-    releaseDate: '2024-12-18',
-  },
-  {
-    id: 10681,
-    title: 'WALL·E',
-    releaseDate: '2008-06-22',
-  },
-  {
-    id: 281338,
-    title: 'War for the Planet of the Apes',
-    releaseDate: '2017-07-11',
-  },
-  {
-    id: 57212,
-    title: 'War Horse',
-    releaseDate: '2011-12-25',
-  },
-  {
-    id: 323272,
-    title: 'War Room',
-    releaseDate: '2015-08-28',
-  },
-  {
-    id: 1241436,
-    title: 'Warfare',
-    releaseDate: '2025-04-09',
-  },
-  {
-    id: 860,
-    title: 'WarGames',
-    releaseDate: '1983-06-03',
-  },
-  {
-    id: 1076487,
-    title: 'Warhorse One',
-    releaseDate: '2023-06-30',
-  },
-  {
-    id: 59440,
-    title: 'Warrior',
-    releaseDate: '2011-09-09',
-  },
-  {
-    id: 13183,
-    title: 'Watchmen',
-    releaseDate: '2009-03-04',
-  },
-  {
-    id: 1155058,
-    title: 'Watchmen: Chapter I',
-    releaseDate: '2024-08-12',
-  },
-  {
-    id: 1299652,
-    title: 'Watchmen: Chapter II',
-    releaseDate: '2024-11-25',
-  },
-  {
-    id: 33157,
-    title: 'Waterloo',
-    releaseDate: '1970-10-26',
-  },
-  {
-    id: 43824,
-    title: 'Waterloo Bridge',
-    releaseDate: '1940-05-17',
-  },
-  {
-    id: 11837,
-    title: 'Watership Down',
-    releaseDate: '1978-10-14',
-  },
-  {
-    id: 533444,
-    title: 'Waves',
-    releaseDate: '2019-11-15',
-  },
-  {
-    id: 25599,
-    title: 'Way Out West',
-    releaseDate: '1937-04-16',
-  },
-  {
-    id: 97690,
-    title: 'We Are Legion: The Story of the Hacktivists',
-    releaseDate: '2012-01-20',
-  },
-  {
-    id: 677638,
-    title: 'We Bare Bears: The Movie',
-    releaseDate: '2020-06-30',
-  },
-  {
-    id: 1100099,
-    title: 'We Live in Time',
-    releaseDate: '2024-10-10',
-  },
-  {
-    id: 71859,
-    title: 'We Need to Talk About Kevin',
-    releaseDate: '2011-09-28',
-  },
-  {
-    id: 10590,
-    title: 'We Were Soldiers',
-    releaseDate: '2002-03-01',
-  },
-  {
-    id: 5996,
-    title: "We're No Angels",
-    releaseDate: '1955-07-07',
-  },
-  {
-    id: 1078605,
-    title: 'Weapons',
-    releaseDate: '2025-08-04',
-  },
-  {
-    id: 79120,
-    title: 'Weekend',
-    releaseDate: '2011-10-23',
-  },
-  {
-    id: 376261,
-    title: 'Weiner',
-    releaseDate: '2016-05-20',
-  },
-  {
-    id: 11446,
-    title: 'Welcome to the Dollhouse',
-    releaseDate: '1996-03-22',
-  },
-  {
-    id: 84351,
-    title: 'West of Memphis',
-    releaseDate: '2012-11-22',
-  },
-  {
-    id: 1725,
-    title: 'West Side Story',
-    releaseDate: '1961-12-13',
-  },
-  {
-    id: 1088,
-    title: 'Whale Rider',
-    releaseDate: '2003-01-30',
-  },
-  {
-    id: 12159,
-    title: 'What Dreams May Come',
-    releaseDate: '1998-10-02',
-  },
-  {
-    id: 10242,
-    title: 'What Ever Happened to Baby Jane?',
-    releaseDate: '1962-10-31',
-  },
-  {
-    id: 406990,
-    title: 'What Happened to Monday',
-    releaseDate: '2017-08-18',
-  },
-  {
-    id: 318044,
-    title: 'What Happened, Miss Simone?',
-    releaseDate: '2015-01-22',
-  },
-  {
-    id: 127373,
-    title: 'What Maisie Knew',
-    releaseDate: '2013-05-02',
-  },
-  {
-    id: 246741,
-    title: 'What We Do in the Shadows',
-    releaseDate: '2014-06-19',
-  },
-  {
-    id: 1587,
-    title: "What's Eating Gilbert Grape",
-    releaseDate: '1993-12-17',
-  },
-  {
-    id: 15765,
-    title: "What's Love Got to Do with It",
-    releaseDate: '1993-06-09',
-  },
-  {
-    id: 53217,
-    title: "What's Opera, Doc?",
-    releaseDate: '1957-07-06',
-  },
-  {
-    id: 6949,
-    title: "What's Up, Doc?",
-    releaseDate: '1972-03-09',
-  },
-  {
-    id: 19265,
-    title: 'Whatever Works',
-    releaseDate: '2009-06-19',
-  },
-  {
-    id: 639,
-    title: 'When Harry Met Sally...',
-    releaseDate: '1989-07-12',
-  },
-  {
-    id: 10857,
-    title: 'When the Wind Blows',
-    releaseDate: '1986-10-24',
-  },
-  {
-    id: 10548,
-    title: 'When We Were Kings',
-    releaseDate: '1996-10-25',
-  },
-  {
-    id: 37659,
-    title: "When You're Strange",
-    releaseDate: '2010-04-09',
-  },
-  {
-    id: 11046,
-    title: 'Where Eagles Dare',
-    releaseDate: '1968-12-04',
-  },
-  {
-    id: 426618,
-    title: 'Where Hands Touch',
-    releaseDate: '2018-09-14',
-  },
-  {
-    id: 682507,
-    title: 'Where the Crawdads Sing',
-    releaseDate: '2022-07-14',
-  },
-  {
-    id: 10564,
-    title: 'Where the Heart Is',
-    releaseDate: '2000-04-27',
-  },
-  {
-    id: 17221,
-    title: 'Where the Sidewalk Ends',
-    releaseDate: '1950-07-07',
-  },
-  {
-    id: 352208,
-    title: 'Where to Invade Next',
-    releaseDate: '2015-12-23',
-  },
-  {
-    id: 2064,
-    title: 'While You Were Sleeping',
-    releaseDate: '1995-04-21',
-  },
-  {
-    id: 367412,
-    title: 'Whiplash',
-    releaseDate: '2013-01-18',
-  },
-  {
-    id: 244786,
-    title: 'Whiplash',
-    releaseDate: '2014-10-10',
-  },
-  {
-    id: 779816,
-    title: 'White Bird',
-    releaseDate: '2023-10-25',
-  },
-  {
-    id: 13368,
-    title: 'White Christmas',
-    releaseDate: '1954-10-14',
-  },
-  {
-    id: 15794,
-    title: 'White Heat',
-    releaseDate: '1949-09-02',
-  },
-  {
-    id: 10994,
-    title: 'White Oleander',
-    releaseDate: '2002-10-11',
-  },
-  {
-    id: 507256,
-    title: 'Whitney',
-    releaseDate: '2018-07-05',
-  },
-  {
-    id: 696157,
-    title: 'Whitney Houston: I Wanna Dance with Somebody',
-    releaseDate: '2022-12-20',
-  },
-  {
-    id: 856,
-    title: 'Who Framed Roger Rabbit',
-    releaseDate: '1988-06-22',
-  },
-  {
-    id: 13508,
-    title: 'Who Killed the Electric Car?',
-    releaseDate: '2006-08-04',
-  },
-  {
-    id: 396,
-    title: "Who's Afraid of Virginia Woolf?",
-    releaseDate: '1966-06-22',
-  },
-  {
-    id: 228970,
-    title: 'Wild',
-    releaseDate: '2014-12-05',
-  },
-  {
-    id: 483,
-    title: 'Wild at Heart',
-    releaseDate: '1990-08-17',
-  },
-  {
-    id: 847,
-    title: 'Willow',
-    releaseDate: '1988-05-20',
-  },
-  {
-    id: 252,
-    title: 'Willy Wonka & the Chocolate Factory',
-    releaseDate: '1971-06-29',
-  },
-  {
-    id: 14551,
-    title: "Winchester '73",
-    releaseDate: '1950-07-12',
-  },
-  {
-    id: 574091,
-    title: 'Wind',
-    releaseDate: '2019-12-13',
-  },
-  {
-    id: 395834,
-    title: 'Wind River',
-    releaseDate: '2017-08-03',
-  },
-  {
-    id: 28966,
-    title: 'Wings',
-    releaseDate: '1927-08-12',
-  },
-  {
-    id: 355020,
-    title: "Winter on Fire: Ukraine's Fight for Freedom",
-    releaseDate: '2015-09-03',
-  },
-  {
-    id: 1059073,
-    title: 'Winter Spring Summer or Fall',
-    releaseDate: '2024-12-27',
-  },
-  {
-    id: 550205,
-    title: 'Wish Dragon',
-    releaseDate: '2021-01-15',
-  },
-  {
-    id: 13446,
-    title: 'Withnail & I',
-    releaseDate: '1987-06-19',
-  },
-  {
-    id: 9281,
-    title: 'Witness',
-    releaseDate: '1985-02-08',
-  },
-  {
-    id: 37257,
-    title: 'Witness for the Prosecution',
-    releaseDate: '1957-12-17',
-  },
-  {
-    id: 26736,
-    title: 'Wizards of Waverly Place: The Movie',
-    releaseDate: '2009-08-28',
-  },
-  {
-    id: 441130,
-    title: 'Wolfwalkers',
-    releaseDate: '2020-10-26',
-  },
-  {
-    id: 304357,
-    title: 'Woman in Gold',
-    releaseDate: '2015-03-20',
-  },
-  {
-    id: 490003,
-    title: "Won't You Be My Neighbor?",
-    releaseDate: '2018-06-29',
-  },
-  {
-    id: 406997,
-    title: 'Wonder',
-    releaseDate: '2017-11-13',
-  },
-  {
-    id: 297762,
-    title: 'Wonder Woman',
-    releaseDate: '2017-05-30',
-  },
-  {
-    id: 15359,
-    title: 'Wonder Woman',
-    releaseDate: '2009-03-03',
-  },
-  {
-    id: 787699,
-    title: 'Wonka',
-    releaseDate: '2023-12-06',
-  },
-  {
-    id: 9459,
-    title: 'Woodstock',
-    releaseDate: '1970-03-26',
-  },
-  {
-    id: 523781,
-    title: 'Words on Bathroom Walls',
-    releaseDate: '2020-08-21',
-  },
-  {
-    id: 612706,
-    title: 'Work It',
-    releaseDate: '2020-08-07',
-  },
-  {
-    id: 303867,
-    title: 'World of Tomorrow',
-    releaseDate: '2015-01-22',
-  },
-  {
-    id: 637649,
-    title: 'Wrath of Man',
-    releaseDate: '2021-04-22',
-  },
-  {
-    id: 82690,
-    title: 'Wreck-It Ralph',
-    releaseDate: '2012-11-01',
-  },
-  {
-    id: 3084,
-    title: 'Wuthering Heights',
-    releaseDate: '1939-04-07',
-  },
-  {
-    id: 36657,
-    title: 'X-Men',
-    releaseDate: '2000-07-13',
-  },
-  {
-    id: 127585,
-    title: 'X-Men: Days of Future Past',
-    releaseDate: '2014-05-15',
-  },
-  {
-    id: 49538,
-    title: 'X-Men: First Class',
-    releaseDate: '2011-06-01',
-  },
-  {
-    id: 36658,
-    title: 'X2',
-    releaseDate: '2003-04-27',
-  },
-  {
-    id: 3087,
-    title: 'Yankee Doodle Dandy',
-    releaseDate: '1942-05-29',
-  },
-  {
-    id: 12105,
-    title: 'Yellow Submarine',
-    releaseDate: '1968-07-17',
-  },
-  {
-    id: 34106,
-    title: "You Can't Take It with You",
-    releaseDate: '1938-09-01',
-  },
-  {
-    id: 36950,
-    title: "You Don't Know Jack",
-    releaseDate: '2010-06-27',
-  },
-  {
-    id: 52758,
-    title: 'You Only Live Once',
-    releaseDate: '1937-01-23',
-  },
-  {
-    id: 290542,
-    title: "You're Not You",
-    releaseDate: '2014-10-10',
-  },
-  {
-    id: 3034,
-    title: 'Young Frankenstein',
-    releaseDate: '1974-12-15',
-  },
-  {
-    id: 43838,
-    title: 'Young Mr. Lincoln',
-    releaseDate: '1939-06-09',
-  },
-  {
-    id: 774531,
-    title: 'Young Woman and the Sea',
-    releaseDate: '2024-05-31',
-  },
-  {
-    id: 483980,
-    title: 'Z-O-M-B-I-E-S',
-    releaseDate: '2018-02-16',
-  },
-  {
-    id: 599521,
-    title: 'Z-O-M-B-I-E-S 2',
-    releaseDate: '2020-06-13',
-  },
-  {
-    id: 809107,
-    title: 'Z-O-M-B-I-E-S 3',
-    releaseDate: '2022-07-09',
-  },
-  {
-    id: 2998,
-    title: 'Zabriskie Point',
-    releaseDate: '1970-03-26',
-  },
-  {
-    id: 791373,
-    title: "Zack Snyder's Justice League",
-    releaseDate: '2021-03-18',
-  },
-  {
-    id: 13180,
-    title: 'Zeitgeist: Addendum',
-    releaseDate: '2008-10-02',
-  },
-  {
-    id: 54293,
-    title: 'Zeitgeist: Moving Forward',
-    releaseDate: '2011-01-15',
-  },
-  {
-    id: 11030,
-    title: 'Zelig',
-    releaseDate: '1983-07-15',
-  },
-  {
-    id: 380808,
-    title: 'Zero Days',
-    releaseDate: '2016-07-08',
-  },
-  {
-    id: 1949,
-    title: 'Zodiac',
-    releaseDate: '2007-03-02',
-  },
-  {
-    id: 19908,
-    title: 'Zombieland',
-    releaseDate: '2009-10-02',
-  },
-  {
-    id: 269149,
-    title: 'Zootopia',
-    releaseDate: '2016-02-11',
-  },
-  {
-    id: 1084242,
-    title: 'Zootopia 2',
-    releaseDate: '2025-11-26',
-  },
-  {
-    id: 14433,
-    title: 'Zulu',
-    releaseDate: '1964-01-22',
-  },
-  {
-    id: 464111,
-    title: 'Zygote',
-    releaseDate: '2017-07-12',
-  },
-  {
-    id: 1181678,
-    title: '¿Quieres ser mi hijo?',
-    releaseDate: '2023-09-21',
-  },
-  {
-    id: 671318,
-    title: '¿Y Cómo Es Él?',
-    releaseDate: '2022-04-07',
-  },
-];
-
-export default movies;
diff --git a/docs/data/material/components/autocomplete/server.js b/docs/data/material/components/autocomplete/server.js
deleted file mode 100644
index a7de4c662bc9ae..00000000000000
--- a/docs/data/material/components/autocomplete/server.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import movies from './movies';
-
-const PAGE_SIZE = 20;
-const FETCH_DELAY_MS = 400;
-
-/** Page of movies returned by the mock paginated search endpoint. */
-
-export function normalizeMovieQuery(value) {
-  return value.trim().toLowerCase().replace(/\s+/g, ' ');
-}
-
-function getMovieYear(movie) {
-  return movie.releaseDate.slice(0, 4);
-}
-
-export function getMovieLabel(movie) {
-  return `${movie.title} (${getMovieYear(movie)})`;
-}
-
-/**
- * Checks whether a movie matches the normalized search query.
- *
- * @param movie - Movie to compare against the query.
- * @param query - Normalized query returned by `normalizeMovieQuery`.
- * @returns `true` when the title, title with year, or display label contains the query.
- */
-function matchesMovie(movie, query) {
-  const title = normalizeMovieQuery(movie.title);
-  const titleWithYear = normalizeMovieQuery(`${movie.title} ${getMovieYear(movie)}`);
-  const label = normalizeMovieQuery(getMovieLabel(movie));
-
-  return (
-    title.includes(query) || titleWithYear.includes(query) || label.includes(query)
-  );
-}
-
-async function waitForDelay(durationMs, signal) {
-  if (signal.aborted) {
-    throw signal.reason;
-  }
-
-  await new Promise((resolve, reject) => {
-    let timeout;
-
-    const handleAbort = () => {
-      clearTimeout(timeout);
-      reject(signal.reason);
-    };
-
-    timeout = setTimeout(() => {
-      signal.removeEventListener('abort', handleAbort);
-      resolve();
-    }, durationMs);
-
-    signal.addEventListener('abort', handleAbort, { once: true });
-  });
-}
-
-/**
- * Fetches one page from the mock paginated movie endpoint.
- *
- * In a real app this would call your API, and the server would handle filtering and pagination.
- *
- * @param query - Normalized search query used to filter movies.
- * @param page - Zero-based page index to fetch.
- * @param signal - Abort signal that lets TanStack Query cancel stale in-flight requests.
- * @returns The requested page of movies and the next page index, or `null` when complete.
- */
-export async function fetchMovies(query, page, signal) {
-  await waitForDelay(FETCH_DELAY_MS, signal);
-
-  const filtered = query
-    ? movies.filter((movie) => matchesMovie(movie, query))
-    : movies;
-  const start = page * PAGE_SIZE;
-  const items = filtered.slice(start, start + PAGE_SIZE);
-  const nextPage = start + PAGE_SIZE < filtered.length ? page + 1 : null;
-
-  return { items, nextPage };
-}
diff --git a/docs/data/material/components/autocomplete/top100Films.js b/docs/data/material/components/autocomplete/top100Films.js
deleted file mode 100644
index 3226dcbc8ba7f3..00000000000000
--- a/docs/data/material/components/autocomplete/top100Films.js
+++ /dev/null
@@ -1,129 +0,0 @@
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { label: 'The Shawshank Redemption', year: 1994 },
-  { label: 'The Godfather', year: 1972 },
-  { label: 'The Godfather: Part II', year: 1974 },
-  { label: 'The Dark Knight', year: 2008 },
-  { label: '12 Angry Men', year: 1957 },
-  { label: "Schindler's List", year: 1993 },
-  { label: 'Pulp Fiction', year: 1994 },
-  {
-    label: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { label: 'The Good, the Bad and the Ugly', year: 1966 },
-  { label: 'Fight Club', year: 1999 },
-  {
-    label: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    label: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { label: 'Forrest Gump', year: 1994 },
-  { label: 'Inception', year: 2010 },
-  {
-    label: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { label: 'Goodfellas', year: 1990 },
-  { label: 'The Matrix', year: 1999 },
-  { label: 'Seven Samurai', year: 1954 },
-  {
-    label: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { label: 'City of God', year: 2002 },
-  { label: 'Se7en', year: 1995 },
-  { label: 'The Silence of the Lambs', year: 1991 },
-  { label: "It's a Wonderful Life", year: 1946 },
-  { label: 'Life Is Beautiful', year: 1997 },
-  { label: 'The Usual Suspects', year: 1995 },
-  { label: 'Léon: The Professional', year: 1994 },
-  { label: 'Spirited Away', year: 2001 },
-  { label: 'Saving Private Ryan', year: 1998 },
-  { label: 'Once Upon a Time in the West', year: 1968 },
-  { label: 'American History X', year: 1998 },
-  { label: 'Interstellar', year: 2014 },
-  { label: 'Casablanca', year: 1942 },
-  { label: 'City Lights', year: 1931 },
-  { label: 'Psycho', year: 1960 },
-  { label: 'The Green Mile', year: 1999 },
-  { label: 'The Intouchables', year: 2011 },
-  { label: 'Modern Times', year: 1936 },
-  { label: 'Raiders of the Lost Ark', year: 1981 },
-  { label: 'Rear Window', year: 1954 },
-  { label: 'The Pianist', year: 2002 },
-  { label: 'The Departed', year: 2006 },
-  { label: 'Terminator 2: Judgment Day', year: 1991 },
-  { label: 'Back to the Future', year: 1985 },
-  { label: 'Whiplash', year: 2014 },
-  { label: 'Gladiator', year: 2000 },
-  { label: 'Memento', year: 2000 },
-  { label: 'The Prestige', year: 2006 },
-  { label: 'The Lion King', year: 1994 },
-  { label: 'Apocalypse Now', year: 1979 },
-  { label: 'Alien', year: 1979 },
-  { label: 'Sunset Boulevard', year: 1950 },
-  {
-    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-    year: 1964,
-  },
-  { label: 'The Great Dictator', year: 1940 },
-  { label: 'Cinema Paradiso', year: 1988 },
-  { label: 'The Lives of Others', year: 2006 },
-  { label: 'Grave of the Fireflies', year: 1988 },
-  { label: 'Paths of Glory', year: 1957 },
-  { label: 'Django Unchained', year: 2012 },
-  { label: 'The Shining', year: 1980 },
-  { label: 'WALL·E', year: 2008 },
-  { label: 'American Beauty', year: 1999 },
-  { label: 'The Dark Knight Rises', year: 2012 },
-  { label: 'Princess Mononoke', year: 1997 },
-  { label: 'Aliens', year: 1986 },
-  { label: 'Oldboy', year: 2003 },
-  { label: 'Once Upon a Time in America', year: 1984 },
-  { label: 'Witness for the Prosecution', year: 1957 },
-  { label: 'Das Boot', year: 1981 },
-  { label: 'Citizen Kane', year: 1941 },
-  { label: 'North by Northwest', year: 1959 },
-  { label: 'Vertigo', year: 1958 },
-  {
-    label: 'Star Wars: Episode VI - Return of the Jedi',
-    year: 1983,
-  },
-  { label: 'Reservoir Dogs', year: 1992 },
-  { label: 'Braveheart', year: 1995 },
-  { label: 'M', year: 1931 },
-  { label: 'Requiem for a Dream', year: 2000 },
-  { label: 'Amélie', year: 2001 },
-  { label: 'A Clockwork Orange', year: 1971 },
-  { label: 'Like Stars on Earth', year: 2007 },
-  { label: 'Taxi Driver', year: 1976 },
-  { label: 'Lawrence of Arabia', year: 1962 },
-  { label: 'Double Indemnity', year: 1944 },
-  {
-    label: 'Eternal Sunshine of the Spotless Mind',
-    year: 2004,
-  },
-  { label: 'Amadeus', year: 1984 },
-  { label: 'To Kill a Mockingbird', year: 1962 },
-  { label: 'Toy Story 3', year: 2010 },
-  { label: 'Logan', year: 2017 },
-  { label: 'Full Metal Jacket', year: 1987 },
-  { label: 'Dangal', year: 2016 },
-  { label: 'The Sting', year: 1973 },
-  { label: '2001: A Space Odyssey', year: 1968 },
-  { label: "Singin' in the Rain", year: 1952 },
-  { label: 'Toy Story', year: 1995 },
-  { label: 'Bicycle Thieves', year: 1948 },
-  { label: 'The Kid', year: 1921 },
-  { label: 'Inglourious Basterds', year: 2009 },
-  { label: 'Snatch', year: 2000 },
-  { label: '3 Idiots', year: 2009 },
-  { label: 'Monty Python and the Holy Grail', year: 1975 },
-];
-
-export default top100Films;
diff --git a/docs/data/material/components/avatars/BackgroundLetterAvatars.js b/docs/data/material/components/avatars/BackgroundLetterAvatars.js
deleted file mode 100644
index 70096a5381cf47..00000000000000
--- a/docs/data/material/components/avatars/BackgroundLetterAvatars.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-function stringToColor(string) {
-  let hash = 0;
-  let i;
-
-  /* eslint-disable no-bitwise */
-  for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  let color = '#';
-
-  for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
-  }
-  /* eslint-enable no-bitwise */
-
-  return color;
-}
-
-function stringAvatar(name) {
-  return {
-    sx: {
-      bgcolor: stringToColor(name),
-    },
-    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
-  };
-}
-
-export default function BackgroundLetterAvatars() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview b/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview
deleted file mode 100644
index f731a3ecc789c1..00000000000000
--- a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/BadgeAvatars.js b/docs/data/material/components/avatars/BadgeAvatars.js
deleted file mode 100644
index e766d0d8983159..00000000000000
--- a/docs/data/material/components/avatars/BadgeAvatars.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Badge from '@mui/material/Badge';
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-const StyledBadge = styled(Badge)(({ theme }) => ({
-  '& .MuiBadge-badge': {
-    backgroundColor: '#44b700',
-    color: '#44b700',
-    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
-    '&::after': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      borderRadius: '50%',
-      animation: 'ripple 1.2s infinite ease-in-out',
-      border: '1px solid currentColor',
-      content: '""',
-    },
-  },
-  '@keyframes ripple': {
-    '0%': {
-      transform: 'scale(.8)',
-      opacity: 1,
-    },
-    '100%': {
-      transform: 'scale(2.4)',
-      opacity: 0,
-    },
-  },
-}));
-
-const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  width: 22,
-  height: 22,
-  border: `2px solid ${theme.palette.background.paper}`,
-}));
-
-export default function BadgeAvatars() {
-  return (
-    
-      
-        
-      
-      
-        }
-      >
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/BadgeAvatars.tsx.preview b/docs/data/material/components/avatars/BadgeAvatars.tsx.preview
deleted file mode 100644
index aea45175d98672..00000000000000
--- a/docs/data/material/components/avatars/BadgeAvatars.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-
-
-  }
->
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/CustomSurplusAvatars.js b/docs/data/material/components/avatars/CustomSurplusAvatars.js
deleted file mode 100644
index 0154cacd51933e..00000000000000
--- a/docs/data/material/components/avatars/CustomSurplusAvatars.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-
-export default function CustomSurplusAvatars() {
-  return (
-     +{surplus.toString()[0]}k}
-      total={4251}
-    >
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview b/docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview
deleted file mode 100644
index 8db3b90b5a3537..00000000000000
--- a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
- +{surplus.toString()[0]}k}
-  total={4251}
->
-  
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/FallbackAvatars.js b/docs/data/material/components/avatars/FallbackAvatars.js
deleted file mode 100644
index 21f63cdd93abef..00000000000000
--- a/docs/data/material/components/avatars/FallbackAvatars.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import { deepOrange } from '@mui/material/colors';
-
-export default function FallbackAvatars() {
-  return (
-    
-      
-        B
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/FallbackAvatars.tsx.preview b/docs/data/material/components/avatars/FallbackAvatars.tsx.preview
deleted file mode 100644
index b52d3ad51f2a0a..00000000000000
--- a/docs/data/material/components/avatars/FallbackAvatars.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-  B
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/GroupAvatars.js b/docs/data/material/components/avatars/GroupAvatars.js
deleted file mode 100644
index 70714f654e293c..00000000000000
--- a/docs/data/material/components/avatars/GroupAvatars.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-
-export default function GroupAvatars() {
-  return (
-    
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/GroupAvatars.tsx.preview b/docs/data/material/components/avatars/GroupAvatars.tsx.preview
deleted file mode 100644
index f865ffa9ae8d82..00000000000000
--- a/docs/data/material/components/avatars/GroupAvatars.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-  
-  
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/IconAvatars.js b/docs/data/material/components/avatars/IconAvatars.js
deleted file mode 100644
index 49a488cbea691c..00000000000000
--- a/docs/data/material/components/avatars/IconAvatars.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { green, pink } from '@mui/material/colors';
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import FolderIcon from '@mui/icons-material/Folder';
-import PageviewIcon from '@mui/icons-material/Pageview';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export default function IconAvatars() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/IconAvatars.tsx.preview b/docs/data/material/components/avatars/IconAvatars.tsx.preview
deleted file mode 100644
index 67b6c667b0eead..00000000000000
--- a/docs/data/material/components/avatars/IconAvatars.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  
-
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/ImageAvatars.js b/docs/data/material/components/avatars/ImageAvatars.js
deleted file mode 100644
index cd098b04762ca5..00000000000000
--- a/docs/data/material/components/avatars/ImageAvatars.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-export default function ImageAvatars() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/ImageAvatars.tsx.preview b/docs/data/material/components/avatars/ImageAvatars.tsx.preview
deleted file mode 100644
index b3b39275567a8f..00000000000000
--- a/docs/data/material/components/avatars/ImageAvatars.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/LetterAvatars.js b/docs/data/material/components/avatars/LetterAvatars.js
deleted file mode 100644
index 90d17e6675974b..00000000000000
--- a/docs/data/material/components/avatars/LetterAvatars.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import { deepOrange, deepPurple } from '@mui/material/colors';
-
-export default function LetterAvatars() {
-  return (
-    
-      H
-      N
-      OP
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/LetterAvatars.tsx.preview b/docs/data/material/components/avatars/LetterAvatars.tsx.preview
deleted file mode 100644
index 1e621d07b54fbe..00000000000000
--- a/docs/data/material/components/avatars/LetterAvatars.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-H
-N
-OP
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/SizeAvatars.js b/docs/data/material/components/avatars/SizeAvatars.js
deleted file mode 100644
index 3d2d12a5893e90..00000000000000
--- a/docs/data/material/components/avatars/SizeAvatars.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-export default function SizeAvatars() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/SizeAvatars.tsx.preview b/docs/data/material/components/avatars/SizeAvatars.tsx.preview
deleted file mode 100644
index 7acc89d41d5e54..00000000000000
--- a/docs/data/material/components/avatars/SizeAvatars.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/Spacing.js b/docs/data/material/components/avatars/Spacing.js
deleted file mode 100644
index de77dea3dc31d6..00000000000000
--- a/docs/data/material/components/avatars/Spacing.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-import Stack from '@mui/material/Stack';
-
-export default function Spacing() {
-  return (
-    
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/Spacing.tsx.preview b/docs/data/material/components/avatars/Spacing.tsx.preview
deleted file mode 100644
index 557dd187523778..00000000000000
--- a/docs/data/material/components/avatars/Spacing.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-  
-  
-  
-
-
-  
-  
-  
-
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/TotalAvatars.js b/docs/data/material/components/avatars/TotalAvatars.js
deleted file mode 100644
index 6be6b70d862df4..00000000000000
--- a/docs/data/material/components/avatars/TotalAvatars.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-
-export default function TotalAvatars() {
-  return (
-    
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/TotalAvatars.tsx.preview b/docs/data/material/components/avatars/TotalAvatars.tsx.preview
deleted file mode 100644
index ac1e5cce7ef76b..00000000000000
--- a/docs/data/material/components/avatars/TotalAvatars.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/UploadAvatars.js b/docs/data/material/components/avatars/UploadAvatars.js
deleted file mode 100644
index dc560eb8832bca..00000000000000
--- a/docs/data/material/components/avatars/UploadAvatars.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import ButtonBase from '@mui/material/ButtonBase';
-
-export default function UploadAvatars() {
-  const [avatarSrc, setAvatarSrc] = React.useState(undefined);
-
-  const handleAvatarChange = (event) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      // Read the file as a data URL
-      const reader = new FileReader();
-      reader.onload = () => {
-        setAvatarSrc(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/VariantAvatars.js b/docs/data/material/components/avatars/VariantAvatars.js
deleted file mode 100644
index 7c3669ef739264..00000000000000
--- a/docs/data/material/components/avatars/VariantAvatars.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import { deepOrange, green } from '@mui/material/colors';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export default function VariantAvatars() {
-  return (
-    
-      
-        N
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/avatars/VariantAvatars.tsx.preview b/docs/data/material/components/avatars/VariantAvatars.tsx.preview
deleted file mode 100644
index 92754efe3e4519..00000000000000
--- a/docs/data/material/components/avatars/VariantAvatars.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  N
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/avatars.md b/docs/data/material/components/avatars/avatars.md
index 91abf386256452..7f1c560dca166d 100644
--- a/docs/data/material/components/avatars/avatars.md
+++ b/docs/data/material/components/avatars/avatars.md
@@ -16,36 +16,36 @@ githubSource: packages/mui-material/src/Avatar
 
 Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component.
 
-{{"demo": "ImageAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/image/index.ts"}}
 
 ## Letter avatars
 
 Avatars containing simple characters can be created by passing a string as `children`.
 
-{{"demo": "LetterAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/letter/index.ts"}}
 
 You can use different background colors for the avatar.
 The following demo generates the color based on the name of the person.
 
-{{"demo": "BackgroundLetterAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/background-letter/index.ts"}}
 
 ## Sizes
 
 You can change the size of the avatar with the `height` and `width` CSS properties.
 
-{{"demo": "SizeAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/size/index.ts"}}
 
 ## Icon avatars
 
 Icon avatars are created by passing an icon as `children`.
 
-{{"demo": "IconAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/icon/index.ts"}}
 
 ## Variants
 
 If you need square or rounded avatars, use the `variant` prop.
 
-{{"demo": "VariantAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/variant/index.ts"}}
 
 ## Fallbacks
 
@@ -55,19 +55,19 @@ If there is an error loading the avatar image, the component falls back to an al
 - the first letter of the `alt` text
 - a generic avatar icon
 
-{{"demo": "FallbackAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/fallback/index.ts"}}
 
 ## Grouped
 
 `AvatarGroup` renders its children as a stack. Use the `max` prop to limit the number of avatars.
 
-{{"demo": "GroupAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/group/index.ts"}}
 
 ### Total avatars
 
 If you need to control the total number of avatars not shown, you can use the `total` prop.
 
-{{"demo": "TotalAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/total/index.ts"}}
 
 ### Custom surplus
 
@@ -75,18 +75,18 @@ Set the `renderSurplus` prop as a callback to customize the surplus avatar. The
 
 The `renderSurplus` prop is useful when you need to render the surplus based on the data sent from the server.
 
-{{"demo": "CustomSurplusAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/custom-surplus/index.ts"}}
 
 ### Spacing
 
 You can change the spacing between avatars using the `spacing` prop. You can use one of the presets (`"medium"`, the default, or `"small"`) or set a custom numeric value.
 
-{{"demo": "Spacing.js"}}
+{{"component": "../data/material/components/avatars/demos/spacing/index.ts"}}
 
 ## With badge
 
-{{"demo": "BadgeAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/badge/index.ts"}}
 
 ## Avatar upload
 
-{{"demo": "UploadAvatars.js"}}
+{{"component": "../data/material/components/avatars/demos/upload/index.ts"}}
diff --git a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx b/docs/data/material/components/avatars/demos/background-letter/BackgroundLetterAvatars.tsx
similarity index 94%
rename from docs/data/material/components/avatars/BackgroundLetterAvatars.tsx
rename to docs/data/material/components/avatars/demos/background-letter/BackgroundLetterAvatars.tsx
index 7135deed32890f..bb804be1038875 100644
--- a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/background-letter/BackgroundLetterAvatars.tsx
@@ -33,9 +33,11 @@ function stringAvatar(name: string) {
 export default function BackgroundLetterAvatars() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/background-letter/index.ts b/docs/data/material/components/avatars/demos/background-letter/index.ts
new file mode 100644
index 00000000000000..5527cc5b946bd5
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/background-letter/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BackgroundLetterAvatars from './BackgroundLetterAvatars';
+
+export default createDemo(import.meta.url, BackgroundLetterAvatars);
diff --git a/docs/data/material/components/avatars/BadgeAvatars.tsx b/docs/data/material/components/avatars/demos/badge/BadgeAvatars.tsx
similarity index 96%
rename from docs/data/material/components/avatars/BadgeAvatars.tsx
rename to docs/data/material/components/avatars/demos/badge/BadgeAvatars.tsx
index e766d0d8983159..673ceec83fe2d2 100644
--- a/docs/data/material/components/avatars/BadgeAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/badge/BadgeAvatars.tsx
@@ -41,6 +41,7 @@ const SmallAvatar = styled(Avatar)(({ theme }) => ({
 export default function BadgeAvatars() {
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/badge/index.ts b/docs/data/material/components/avatars/demos/badge/index.ts
new file mode 100644
index 00000000000000..4ca62a13dd9d56
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/badge/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BadgeAvatars from './BadgeAvatars';
+
+export default createDemo(import.meta.url, BadgeAvatars);
diff --git a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx b/docs/data/material/components/avatars/demos/custom-surplus/CustomSurplusAvatars.tsx
similarity index 92%
rename from docs/data/material/components/avatars/CustomSurplusAvatars.tsx
rename to docs/data/material/components/avatars/demos/custom-surplus/CustomSurplusAvatars.tsx
index 0154cacd51933e..d6a566e1039667 100644
--- a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/custom-surplus/CustomSurplusAvatars.tsx
@@ -2,6 +2,7 @@ import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 
 export default function CustomSurplusAvatars() {
+  // @focus-start @padding 1
   return (
      +{surplus.toString()[0]}k}
@@ -13,4 +14,5 @@ export default function CustomSurplusAvatars() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/avatars/demos/custom-surplus/index.ts b/docs/data/material/components/avatars/demos/custom-surplus/index.ts
new file mode 100644
index 00000000000000..6cf986d79889db
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/custom-surplus/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomSurplusAvatars from './CustomSurplusAvatars';
+
+export default createDemo(import.meta.url, CustomSurplusAvatars);
diff --git a/docs/data/material/components/avatars/FallbackAvatars.tsx b/docs/data/material/components/avatars/demos/fallback/FallbackAvatars.tsx
similarity index 91%
rename from docs/data/material/components/avatars/FallbackAvatars.tsx
rename to docs/data/material/components/avatars/demos/fallback/FallbackAvatars.tsx
index 21f63cdd93abef..8c3b10e062a903 100644
--- a/docs/data/material/components/avatars/FallbackAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/fallback/FallbackAvatars.tsx
@@ -5,6 +5,7 @@ import { deepOrange } from '@mui/material/colors';
 export default function FallbackAvatars() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/fallback/index.ts b/docs/data/material/components/avatars/demos/fallback/index.ts
new file mode 100644
index 00000000000000..f434b0197114a0
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/fallback/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FallbackAvatars from './FallbackAvatars';
+
+export default createDemo(import.meta.url, FallbackAvatars);
diff --git a/docs/data/material/components/avatars/GroupAvatars.tsx b/docs/data/material/components/avatars/demos/group/GroupAvatars.tsx
similarity index 92%
rename from docs/data/material/components/avatars/GroupAvatars.tsx
rename to docs/data/material/components/avatars/demos/group/GroupAvatars.tsx
index 70714f654e293c..81e5ecb1e9813e 100644
--- a/docs/data/material/components/avatars/GroupAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/group/GroupAvatars.tsx
@@ -2,6 +2,7 @@ import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 
 export default function GroupAvatars() {
+  // @focus-start @padding 1
   return (
     
       
@@ -11,4 +12,5 @@ export default function GroupAvatars() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/avatars/demos/group/index.ts b/docs/data/material/components/avatars/demos/group/index.ts
new file mode 100644
index 00000000000000..7fec9f0eb8b6cf
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GroupAvatars from './GroupAvatars';
+
+export default createDemo(import.meta.url, GroupAvatars);
diff --git a/docs/data/material/components/avatars/IconAvatars.tsx b/docs/data/material/components/avatars/demos/icon/IconAvatars.tsx
similarity index 92%
rename from docs/data/material/components/avatars/IconAvatars.tsx
rename to docs/data/material/components/avatars/demos/icon/IconAvatars.tsx
index 49a488cbea691c..681bcd1e8d9d3b 100644
--- a/docs/data/material/components/avatars/IconAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/icon/IconAvatars.tsx
@@ -8,6 +8,7 @@ import AssignmentIcon from '@mui/icons-material/Assignment';
 export default function IconAvatars() {
   return (
     
+      {/* @focus-start */}
       
         
       
@@ -17,6 +18,7 @@ export default function IconAvatars() {
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/icon/index.ts b/docs/data/material/components/avatars/demos/icon/index.ts
new file mode 100644
index 00000000000000..b8cf05c74bb3d0
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconAvatars from './IconAvatars';
+
+export default createDemo(import.meta.url, IconAvatars);
diff --git a/docs/data/material/components/avatars/ImageAvatars.tsx b/docs/data/material/components/avatars/demos/image/ImageAvatars.tsx
similarity index 88%
rename from docs/data/material/components/avatars/ImageAvatars.tsx
rename to docs/data/material/components/avatars/demos/image/ImageAvatars.tsx
index cd098b04762ca5..74170b08344cde 100644
--- a/docs/data/material/components/avatars/ImageAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/image/ImageAvatars.tsx
@@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack';
 export default function ImageAvatars() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/image/index.ts b/docs/data/material/components/avatars/demos/image/index.ts
new file mode 100644
index 00000000000000..6c733667d1db84
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/image/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ImageAvatars from './ImageAvatars';
+
+export default createDemo(import.meta.url, ImageAvatars);
diff --git a/docs/data/material/components/avatars/LetterAvatars.tsx b/docs/data/material/components/avatars/demos/letter/LetterAvatars.tsx
similarity index 88%
rename from docs/data/material/components/avatars/LetterAvatars.tsx
rename to docs/data/material/components/avatars/demos/letter/LetterAvatars.tsx
index 90d17e6675974b..61823c1a6d2423 100644
--- a/docs/data/material/components/avatars/LetterAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/letter/LetterAvatars.tsx
@@ -5,9 +5,11 @@ import { deepOrange, deepPurple } from '@mui/material/colors';
 export default function LetterAvatars() {
   return (
     
+      {/* @focus-start */}
       H
       N
       OP
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/letter/index.ts b/docs/data/material/components/avatars/demos/letter/index.ts
new file mode 100644
index 00000000000000..2750c6e64fb0f3
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/letter/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LetterAvatars from './LetterAvatars';
+
+export default createDemo(import.meta.url, LetterAvatars);
diff --git a/docs/data/material/components/avatars/SizeAvatars.tsx b/docs/data/material/components/avatars/demos/size/SizeAvatars.tsx
similarity index 90%
rename from docs/data/material/components/avatars/SizeAvatars.tsx
rename to docs/data/material/components/avatars/demos/size/SizeAvatars.tsx
index 3d2d12a5893e90..9aee5dac50c83b 100644
--- a/docs/data/material/components/avatars/SizeAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/size/SizeAvatars.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function SizeAvatars() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/size/index.ts b/docs/data/material/components/avatars/demos/size/index.ts
new file mode 100644
index 00000000000000..874408cdd0f085
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SizeAvatars from './SizeAvatars';
+
+export default createDemo(import.meta.url, SizeAvatars);
diff --git a/docs/data/material/components/avatars/Spacing.tsx b/docs/data/material/components/avatars/demos/spacing/Spacing.tsx
similarity index 95%
rename from docs/data/material/components/avatars/Spacing.tsx
rename to docs/data/material/components/avatars/demos/spacing/Spacing.tsx
index de77dea3dc31d6..0a0d9f5f75c9d5 100644
--- a/docs/data/material/components/avatars/Spacing.tsx
+++ b/docs/data/material/components/avatars/demos/spacing/Spacing.tsx
@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 export default function Spacing() {
   return (
     
+      {/* @focus-start */}
       
         
         
@@ -20,6 +21,7 @@ export default function Spacing() {
         
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/spacing/index.ts b/docs/data/material/components/avatars/demos/spacing/index.ts
new file mode 100644
index 00000000000000..51f6e5ec7b520b
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/spacing/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Spacing from './Spacing';
+
+export default createDemo(import.meta.url, Spacing);
diff --git a/docs/data/material/components/avatars/TotalAvatars.tsx b/docs/data/material/components/avatars/demos/total/TotalAvatars.tsx
similarity index 91%
rename from docs/data/material/components/avatars/TotalAvatars.tsx
rename to docs/data/material/components/avatars/demos/total/TotalAvatars.tsx
index 6be6b70d862df4..44037db519d216 100644
--- a/docs/data/material/components/avatars/TotalAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/total/TotalAvatars.tsx
@@ -2,6 +2,7 @@ import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 
 export default function TotalAvatars() {
+  // @focus-start @padding 1
   return (
     
       
@@ -10,4 +11,5 @@ export default function TotalAvatars() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/avatars/demos/total/index.ts b/docs/data/material/components/avatars/demos/total/index.ts
new file mode 100644
index 00000000000000..79f009a2e20c4d
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/total/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TotalAvatars from './TotalAvatars';
+
+export default createDemo(import.meta.url, TotalAvatars);
diff --git a/docs/data/material/components/avatars/UploadAvatars.tsx b/docs/data/material/components/avatars/demos/upload/UploadAvatars.tsx
similarity index 96%
rename from docs/data/material/components/avatars/UploadAvatars.tsx
rename to docs/data/material/components/avatars/demos/upload/UploadAvatars.tsx
index 35d757876c51b8..17611a133bb6ed 100644
--- a/docs/data/material/components/avatars/UploadAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/upload/UploadAvatars.tsx
@@ -3,6 +3,7 @@ import Avatar from '@mui/material/Avatar';
 import ButtonBase from '@mui/material/ButtonBase';
 
 export default function UploadAvatars() {
+  // @focus-start @padding 1
   const [avatarSrc, setAvatarSrc] = React.useState(undefined);
 
   const handleAvatarChange = (event: React.ChangeEvent) => {
@@ -50,4 +51,5 @@ export default function UploadAvatars() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/avatars/demos/upload/index.ts b/docs/data/material/components/avatars/demos/upload/index.ts
new file mode 100644
index 00000000000000..8b538549fc3575
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/upload/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UploadAvatars from './UploadAvatars';
+
+export default createDemo(import.meta.url, UploadAvatars);
diff --git a/docs/data/material/components/avatars/VariantAvatars.tsx b/docs/data/material/components/avatars/demos/variant/VariantAvatars.tsx
similarity index 90%
rename from docs/data/material/components/avatars/VariantAvatars.tsx
rename to docs/data/material/components/avatars/demos/variant/VariantAvatars.tsx
index 7c3669ef739264..45d378a71f584f 100644
--- a/docs/data/material/components/avatars/VariantAvatars.tsx
+++ b/docs/data/material/components/avatars/demos/variant/VariantAvatars.tsx
@@ -6,12 +6,14 @@ import AssignmentIcon from '@mui/icons-material/Assignment';
 export default function VariantAvatars() {
   return (
     
+      {/* @focus-start */}
       
         N
       
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/avatars/demos/variant/index.ts b/docs/data/material/components/avatars/demos/variant/index.ts
new file mode 100644
index 00000000000000..c0a7717434a126
--- /dev/null
+++ b/docs/data/material/components/avatars/demos/variant/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VariantAvatars from './VariantAvatars';
+
+export default createDemo(import.meta.url, VariantAvatars);
diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.js b/docs/data/material/components/backdrop/SimpleBackdrop.js
deleted file mode 100644
index 0e72b7ae98c595..00000000000000
--- a/docs/data/material/components/backdrop/SimpleBackdrop.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Backdrop from '@mui/material/Backdrop';
-import CircularProgress from '@mui/material/CircularProgress';
-import Button from '@mui/material/Button';
-
-export default function SimpleBackdrop() {
-  const [open, setOpen] = React.useState(false);
-  const handleClose = () => {
-    setOpen(false);
-  };
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    
    
-      
-       ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
-        open={open}
-        onClick={handleClose}
-      >
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview b/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview
deleted file mode 100644
index 0b9b3de8861de8..00000000000000
--- a/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
- ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
-  open={open}
-  onClick={handleClose}
->
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/backdrop/backdrop.md b/docs/data/material/components/backdrop/backdrop.md
index 0f932e3a56fa2c..c0530e718a5ca2 100644
--- a/docs/data/material/components/backdrop/backdrop.md
+++ b/docs/data/material/components/backdrop/backdrop.md
@@ -20,7 +20,7 @@ In its simplest form, the Backdrop component will add a dimmed layer over your a
 The demo below shows a basic Backdrop with a Circular Progress component in the foreground to indicate a loading state.
 After clicking **Show Backdrop**, you can click anywhere on the page to close it.
 
-{{"demo": "SimpleBackdrop.js"}}
+{{"component": "../data/material/components/backdrop/demos/simple/index.ts"}}
 
 ## Transitions
 
diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.tsx b/docs/data/material/components/backdrop/demos/simple/SimpleBackdrop.tsx
similarity index 93%
rename from docs/data/material/components/backdrop/SimpleBackdrop.tsx
rename to docs/data/material/components/backdrop/demos/simple/SimpleBackdrop.tsx
index 0e72b7ae98c595..f47843b2b562e2 100644
--- a/docs/data/material/components/backdrop/SimpleBackdrop.tsx
+++ b/docs/data/material/components/backdrop/demos/simple/SimpleBackdrop.tsx
@@ -14,6 +14,7 @@ export default function SimpleBackdrop() {
 
   return (
     
    
+      {/* @focus-start */}
       
        ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
@@ -22,6 +23,7 @@ export default function SimpleBackdrop() {
       >
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/backdrop/demos/simple/index.ts b/docs/data/material/components/backdrop/demos/simple/index.ts
new file mode 100644
index 00000000000000..0bd5d0d5e566f7
--- /dev/null
+++ b/docs/data/material/components/backdrop/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleBackdrop from './SimpleBackdrop';
+
+export default createDemo(import.meta.url, SimpleBackdrop);
diff --git a/docs/data/material/components/badges/AccessibleBadges.js b/docs/data/material/components/badges/AccessibleBadges.js
deleted file mode 100644
index 534768253854ed..00000000000000
--- a/docs/data/material/components/badges/AccessibleBadges.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import IconButton from '@mui/material/IconButton';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-function notificationsLabel(count) {
-  if (count === 0) {
-    return 'no notifications';
-  }
-  if (count > 99) {
-    return 'more than 99 notifications';
-  }
-  return `${count} notifications`;
-}
-
-export default function AccessibleBadges() {
-  return (
-    
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/AccessibleBadges.tsx.preview b/docs/data/material/components/badges/AccessibleBadges.tsx.preview
deleted file mode 100644
index c25da83389c0e2..00000000000000
--- a/docs/data/material/components/badges/AccessibleBadges.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/BadgeMax.js b/docs/data/material/components/badges/BadgeMax.js
deleted file mode 100644
index de0408b563b692..00000000000000
--- a/docs/data/material/components/badges/BadgeMax.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function BadgeMax() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/BadgeMax.tsx.preview b/docs/data/material/components/badges/BadgeMax.tsx.preview
deleted file mode 100644
index 00e369cb4b7c20..00000000000000
--- a/docs/data/material/components/badges/BadgeMax.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  
-
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/BadgeOverlap.js b/docs/data/material/components/badges/BadgeOverlap.js
deleted file mode 100644
index 78b60f85ad67c8..00000000000000
--- a/docs/data/material/components/badges/BadgeOverlap.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-
-const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
-const shapeCircleStyles = { borderRadius: '50%' };
-const rectangle = ;
-const circle = (
-  
-);
-
-export default function BadgeOverlap() {
-  return (
-    
-      
-        {rectangle}
-      
-      
-        {rectangle}
-      
-      
-        {circle}
-      
-      
-        {circle}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/BadgeOverlap.tsx.preview b/docs/data/material/components/badges/BadgeOverlap.tsx.preview
deleted file mode 100644
index 9319a000516096..00000000000000
--- a/docs/data/material/components/badges/BadgeOverlap.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  {rectangle}
-
-
-  {rectangle}
-
-
-  {circle}
-
-
-  {circle}
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/BadgeVisibility.js b/docs/data/material/components/badges/BadgeVisibility.js
deleted file mode 100644
index e70cd166c14d61..00000000000000
--- a/docs/data/material/components/badges/BadgeVisibility.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import MailIcon from '@mui/icons-material/Mail';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-export default function BadgeVisibility() {
-  const [count, setCount] = React.useState(1);
-  const [invisible, setInvisible] = React.useState(false);
-
-  const handleBadgeVisibility = () => {
-    setInvisible(!invisible);
-  };
-
-  return (
-     *': {
-          marginBottom: 2,
-        },
-        '& .MuiBadge-root': {
-          marginRight: 4,
-        },
-      }}
-    >
-      
    
-        
-          
-        
-        
-          
-          
-        
-      
    
-      
    
-        
-          
-        
-        }
-          label="Show Badge"
-        />
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/badges/ColorBadge.js b/docs/data/material/components/badges/ColorBadge.js
deleted file mode 100644
index b19bf74fbf8589..00000000000000
--- a/docs/data/material/components/badges/ColorBadge.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Badge from '@mui/material/Badge';
-import Stack from '@mui/material/Stack';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function ColorBadge() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/ColorBadge.tsx.preview b/docs/data/material/components/badges/ColorBadge.tsx.preview
deleted file mode 100644
index b35d11d16a8b04..00000000000000
--- a/docs/data/material/components/badges/ColorBadge.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/CustomizedBadges.js b/docs/data/material/components/badges/CustomizedBadges.js
deleted file mode 100644
index 626d8b8f23c8e4..00000000000000
--- a/docs/data/material/components/badges/CustomizedBadges.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Badge from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
-import IconButton from '@mui/material/IconButton';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-
-const StyledBadge = styled(Badge)(({ theme }) => ({
-  '& .MuiBadge-badge': {
-    right: -3,
-    top: 13,
-    border: `2px solid ${(theme.vars ?? theme).palette.background.paper}`,
-    padding: '0 4px',
-  },
-}));
-
-export default function CustomizedBadges() {
-  return (
-    
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/CustomizedBadges.tsx.preview b/docs/data/material/components/badges/CustomizedBadges.tsx.preview
deleted file mode 100644
index 6e9ddc2f1b230d..00000000000000
--- a/docs/data/material/components/badges/CustomizedBadges.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/DotBadge.js b/docs/data/material/components/badges/DotBadge.js
deleted file mode 100644
index 5cd2e1d99d6580..00000000000000
--- a/docs/data/material/components/badges/DotBadge.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function DotBadge() {
-  return (
-    
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/DotBadge.tsx.preview b/docs/data/material/components/badges/DotBadge.tsx.preview
deleted file mode 100644
index 18f911822424f2..00000000000000
--- a/docs/data/material/components/badges/DotBadge.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/ShowZeroBadge.js b/docs/data/material/components/badges/ShowZeroBadge.js
deleted file mode 100644
index 7df4e1f146aeff..00000000000000
--- a/docs/data/material/components/badges/ShowZeroBadge.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function ShowZeroBadge() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/ShowZeroBadge.tsx.preview b/docs/data/material/components/badges/ShowZeroBadge.tsx.preview
deleted file mode 100644
index b687e1c50d6796..00000000000000
--- a/docs/data/material/components/badges/ShowZeroBadge.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/SimpleBadge.js b/docs/data/material/components/badges/SimpleBadge.js
deleted file mode 100644
index e880228abd06ea..00000000000000
--- a/docs/data/material/components/badges/SimpleBadge.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function SimpleBadge() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/badges/SimpleBadge.tsx.preview b/docs/data/material/components/badges/SimpleBadge.tsx.preview
deleted file mode 100644
index 390a9496070568..00000000000000
--- a/docs/data/material/components/badges/SimpleBadge.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md
index b4e8b0ee8eb3a6..60cbb9eee82514 100644
--- a/docs/data/material/components/badges/badges.md
+++ b/docs/data/material/components/badges/badges.md
@@ -16,58 +16,58 @@ githubSource: packages/mui-material/src/Badge
 
 Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.
 
-{{"demo": "SimpleBadge.js"}}
+{{"component": "../data/material/components/badges/demos/simple/index.ts"}}
 
 ## Color
 
 Use `color` prop to apply theme palette to component.
 
-{{"demo": "ColorBadge.js"}}
+{{"component": "../data/material/components/badges/demos/color/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedBadges.js"}}
+{{"component": "../data/material/components/badges/demos/customized/index.ts"}}
 
 ## Badge visibility
 
 The visibility of badges can be controlled using the `invisible` prop.
 
-{{"demo": "BadgeVisibility.js"}}
+{{"component": "../data/material/components/badges/demos/visibility/index.ts"}}
 
 The badge hides automatically when `badgeContent` is zero. You can override this with the `showZero` prop.
 
-{{"demo": "ShowZeroBadge.js"}}
+{{"component": "../data/material/components/badges/demos/show-zero/index.ts"}}
 
 ## Maximum value
 
 You can use the `max` prop to cap the value of the badge content.
 
-{{"demo": "BadgeMax.js"}}
+{{"component": "../data/material/components/badges/demos/max/index.ts"}}
 
 ## Dot badge
 
 The `dot` prop changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.
 
-{{"demo": "DotBadge.js"}}
+{{"component": "../data/material/components/badges/demos/dot/index.ts"}}
 
 ## Badge overlap
 
 You can use the `overlap` prop to place the badge relative to the corner of the wrapped element.
 
-{{"demo": "BadgeOverlap.js"}}
+{{"component": "../data/material/components/badges/demos/overlap/index.ts"}}
 
 ## Badge alignment
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "BadgeAlignment.js", "hideToolbar": true}}
+{{"component": "../data/material/components/badges/demos/alignment/index.ts", "hideToolbar": true}}
 
 ## Accessibility
 
 You can't rely on the content of the badge to be announced correctly.
 You should provide a full description, for instance, with `aria-label`:
 
-{{"demo": "AccessibleBadges.js"}}
+{{"component": "../data/material/components/badges/demos/accessible/index.ts"}}
diff --git a/docs/data/material/components/badges/AccessibleBadges.tsx b/docs/data/material/components/badges/demos/accessible/AccessibleBadges.tsx
similarity index 92%
rename from docs/data/material/components/badges/AccessibleBadges.tsx
rename to docs/data/material/components/badges/demos/accessible/AccessibleBadges.tsx
index 87669fe95cd323..8ccb36a7b6a224 100644
--- a/docs/data/material/components/badges/AccessibleBadges.tsx
+++ b/docs/data/material/components/badges/demos/accessible/AccessibleBadges.tsx
@@ -13,6 +13,7 @@ function notificationsLabel(count: number) {
 }
 
 export default function AccessibleBadges() {
+  // @focus-start @padding 1
   return (
     
       
@@ -20,4 +21,5 @@ export default function AccessibleBadges() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/badges/demos/accessible/index.ts b/docs/data/material/components/badges/demos/accessible/index.ts
new file mode 100644
index 00000000000000..e00dbcb03e0a42
--- /dev/null
+++ b/docs/data/material/components/badges/demos/accessible/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccessibleBadges from './AccessibleBadges';
+
+export default createDemo(import.meta.url, AccessibleBadges);
diff --git a/docs/data/material/components/badges/BadgeAlignment.js b/docs/data/material/components/badges/demos/alignment/BadgeAlignment.js
similarity index 100%
rename from docs/data/material/components/badges/BadgeAlignment.js
rename to docs/data/material/components/badges/demos/alignment/BadgeAlignment.js
diff --git a/docs/data/material/components/badges/demos/alignment/index.ts b/docs/data/material/components/badges/demos/alignment/index.ts
new file mode 100644
index 00000000000000..14d980d408f494
--- /dev/null
+++ b/docs/data/material/components/badges/demos/alignment/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BadgeAlignment from './BadgeAlignment';
+
+export default createDemo(import.meta.url, BadgeAlignment);
diff --git a/docs/data/material/components/badges/ColorBadge.tsx b/docs/data/material/components/badges/demos/color/ColorBadge.tsx
similarity index 89%
rename from docs/data/material/components/badges/ColorBadge.tsx
rename to docs/data/material/components/badges/demos/color/ColorBadge.tsx
index b19bf74fbf8589..88d9e2501d68e8 100644
--- a/docs/data/material/components/badges/ColorBadge.tsx
+++ b/docs/data/material/components/badges/demos/color/ColorBadge.tsx
@@ -5,12 +5,14 @@ import MailIcon from '@mui/icons-material/Mail';
 export default function ColorBadge() {
   return (
     
+      {/* @focus-start */}
       
         
       
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/badges/demos/color/index.ts b/docs/data/material/components/badges/demos/color/index.ts
new file mode 100644
index 00000000000000..645c9d8f8e5ed3
--- /dev/null
+++ b/docs/data/material/components/badges/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorBadge from './ColorBadge';
+
+export default createDemo(import.meta.url, ColorBadge);
diff --git a/docs/data/material/components/badges/CustomizedBadges.tsx b/docs/data/material/components/badges/demos/customized/CustomizedBadges.tsx
similarity index 93%
rename from docs/data/material/components/badges/CustomizedBadges.tsx
rename to docs/data/material/components/badges/demos/customized/CustomizedBadges.tsx
index 0831ae9f4ab8bd..2aa5dba59995f7 100644
--- a/docs/data/material/components/badges/CustomizedBadges.tsx
+++ b/docs/data/material/components/badges/demos/customized/CustomizedBadges.tsx
@@ -13,6 +13,7 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
 }));
 
 export default function CustomizedBadges() {
+  // @focus-start @padding 1
   return (
     
       
@@ -20,4 +21,5 @@ export default function CustomizedBadges() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/badges/demos/customized/index.ts b/docs/data/material/components/badges/demos/customized/index.ts
new file mode 100644
index 00000000000000..17e09861aa81c5
--- /dev/null
+++ b/docs/data/material/components/badges/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedBadges from './CustomizedBadges';
+
+export default createDemo(import.meta.url, CustomizedBadges);
diff --git a/docs/data/material/components/badges/DotBadge.tsx b/docs/data/material/components/badges/demos/dot/DotBadge.tsx
similarity index 85%
rename from docs/data/material/components/badges/DotBadge.tsx
rename to docs/data/material/components/badges/demos/dot/DotBadge.tsx
index 5cd2e1d99d6580..7a114ea54d5f7f 100644
--- a/docs/data/material/components/badges/DotBadge.tsx
+++ b/docs/data/material/components/badges/demos/dot/DotBadge.tsx
@@ -5,9 +5,11 @@ import MailIcon from '@mui/icons-material/Mail';
 export default function DotBadge() {
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/badges/demos/dot/index.ts b/docs/data/material/components/badges/demos/dot/index.ts
new file mode 100644
index 00000000000000..fd8f2c6a1a92ff
--- /dev/null
+++ b/docs/data/material/components/badges/demos/dot/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DotBadge from './DotBadge';
+
+export default createDemo(import.meta.url, DotBadge);
diff --git a/docs/data/material/components/badges/BadgeMax.tsx b/docs/data/material/components/badges/demos/max/BadgeMax.tsx
similarity index 91%
rename from docs/data/material/components/badges/BadgeMax.tsx
rename to docs/data/material/components/badges/demos/max/BadgeMax.tsx
index de0408b563b692..7e306bb71868f2 100644
--- a/docs/data/material/components/badges/BadgeMax.tsx
+++ b/docs/data/material/components/badges/demos/max/BadgeMax.tsx
@@ -5,6 +5,7 @@ import MailIcon from '@mui/icons-material/Mail';
 export default function BadgeMax() {
   return (
     
+      {/* @focus-start */}
       
         
       
@@ -14,6 +15,7 @@ export default function BadgeMax() {
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/badges/demos/max/index.ts b/docs/data/material/components/badges/demos/max/index.ts
new file mode 100644
index 00000000000000..d0925e6c43cced
--- /dev/null
+++ b/docs/data/material/components/badges/demos/max/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BadgeMax from './BadgeMax';
+
+export default createDemo(import.meta.url, BadgeMax);
diff --git a/docs/data/material/components/badges/BadgeOverlap.tsx b/docs/data/material/components/badges/demos/overlap/BadgeOverlap.tsx
similarity index 94%
rename from docs/data/material/components/badges/BadgeOverlap.tsx
rename to docs/data/material/components/badges/demos/overlap/BadgeOverlap.tsx
index 02e67a6a91461e..473050cbd56b21 100644
--- a/docs/data/material/components/badges/BadgeOverlap.tsx
+++ b/docs/data/material/components/badges/demos/overlap/BadgeOverlap.tsx
@@ -11,6 +11,7 @@ const circle = (
 export default function BadgeOverlap() {
   return (
     
+      {/* @focus-start */}
       
         {rectangle}
       
@@ -23,6 +24,7 @@ export default function BadgeOverlap() {
       
         {circle}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/badges/demos/overlap/index.ts b/docs/data/material/components/badges/demos/overlap/index.ts
new file mode 100644
index 00000000000000..27c727c502d85a
--- /dev/null
+++ b/docs/data/material/components/badges/demos/overlap/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BadgeOverlap from './BadgeOverlap';
+
+export default createDemo(import.meta.url, BadgeOverlap);
diff --git a/docs/data/material/components/badges/ShowZeroBadge.tsx b/docs/data/material/components/badges/demos/show-zero/ShowZeroBadge.tsx
similarity index 89%
rename from docs/data/material/components/badges/ShowZeroBadge.tsx
rename to docs/data/material/components/badges/demos/show-zero/ShowZeroBadge.tsx
index 7df4e1f146aeff..682fa9465ac8af 100644
--- a/docs/data/material/components/badges/ShowZeroBadge.tsx
+++ b/docs/data/material/components/badges/demos/show-zero/ShowZeroBadge.tsx
@@ -5,12 +5,14 @@ import MailIcon from '@mui/icons-material/Mail';
 export default function ShowZeroBadge() {
   return (
     
+      {/* @focus-start */}
       
         
       
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/badges/demos/show-zero/index.ts b/docs/data/material/components/badges/demos/show-zero/index.ts
new file mode 100644
index 00000000000000..abbcd57dd8bf7e
--- /dev/null
+++ b/docs/data/material/components/badges/demos/show-zero/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ShowZeroBadge from './ShowZeroBadge';
+
+export default createDemo(import.meta.url, ShowZeroBadge);
diff --git a/docs/data/material/components/badges/SimpleBadge.tsx b/docs/data/material/components/badges/demos/simple/SimpleBadge.tsx
similarity index 84%
rename from docs/data/material/components/badges/SimpleBadge.tsx
rename to docs/data/material/components/badges/demos/simple/SimpleBadge.tsx
index e880228abd06ea..f163811a804671 100644
--- a/docs/data/material/components/badges/SimpleBadge.tsx
+++ b/docs/data/material/components/badges/demos/simple/SimpleBadge.tsx
@@ -2,9 +2,11 @@ import Badge from '@mui/material/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function SimpleBadge() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/badges/demos/simple/index.ts b/docs/data/material/components/badges/demos/simple/index.ts
new file mode 100644
index 00000000000000..0f687372214130
--- /dev/null
+++ b/docs/data/material/components/badges/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleBadge from './SimpleBadge';
+
+export default createDemo(import.meta.url, SimpleBadge);
diff --git a/docs/data/material/components/badges/BadgeVisibility.tsx b/docs/data/material/components/badges/demos/visibility/BadgeVisibility.tsx
similarity index 97%
rename from docs/data/material/components/badges/BadgeVisibility.tsx
rename to docs/data/material/components/badges/demos/visibility/BadgeVisibility.tsx
index e70cd166c14d61..7ba48277b4d49e 100644
--- a/docs/data/material/components/badges/BadgeVisibility.tsx
+++ b/docs/data/material/components/badges/demos/visibility/BadgeVisibility.tsx
@@ -10,6 +10,7 @@ import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 export default function BadgeVisibility() {
+  // @focus-start @padding 1
   const [count, setCount] = React.useState(1);
   const [invisible, setInvisible] = React.useState(false);
 
@@ -66,4 +67,5 @@ export default function BadgeVisibility() {
       
    
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/badges/demos/visibility/index.ts b/docs/data/material/components/badges/demos/visibility/index.ts
new file mode 100644
index 00000000000000..2f15853739a2da
--- /dev/null
+++ b/docs/data/material/components/badges/demos/visibility/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BadgeVisibility from './BadgeVisibility';
+
+export default createDemo(import.meta.url, BadgeVisibility);
diff --git a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.js b/docs/data/material/components/bottom-navigation/FixedBottomNavigation.js
deleted file mode 100644
index dae08fb8e7ff73..00000000000000
--- a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import CssBaseline from '@mui/material/CssBaseline';
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import RestoreIcon from '@mui/icons-material/Restore';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import ArchiveIcon from '@mui/icons-material/Archive';
-import Paper from '@mui/material/Paper';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import Avatar from '@mui/material/Avatar';
-
-function refreshMessages() {
-  const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
-
-  return Array.from(new Array(50)).map(
-    () => messageExamples[getRandomInt(messageExamples.length)],
-  );
-}
-
-export default function FixedBottomNavigation() {
-  const [value, setValue] = React.useState(0);
-  const ref = React.useRef(null);
-  const [messages, setMessages] = React.useState(() => refreshMessages());
-
-  React.useEffect(() => {
-    ref.current.ownerDocument.body.scrollTop = 0;
-    setMessages(refreshMessages());
-  }, [value, setMessages]);
-
-  return (
-    
-      
-      
-        {messages.map(({ primary, secondary, person }, index) => (
-          
-            
-              
-            
-            
-          
-        ))}
-      
-      
-         {
-            setValue(newValue);
-          }}
-        >
-          } />
-          } />
-          } />
-        
-      
-    
-  );
-}
-
-const messageExamples = [
-  {
-    primary: 'Brunch this week?',
-    secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
-    person: '/static/images/avatar/5.jpg',
-  },
-  {
-    primary: 'Birthday Gift',
-    secondary: `Do you have a suggestion for a good present for John on his work
-      anniversary. I am really confused & would love your thoughts on it.`,
-    person: '/static/images/avatar/1.jpg',
-  },
-  {
-    primary: 'Recipe to try',
-    secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
-    person: '/static/images/avatar/2.jpg',
-  },
-  {
-    primary: 'Yes!',
-    secondary: 'I have the tickets to the ReactConf for this year.',
-    person: '/static/images/avatar/3.jpg',
-  },
-  {
-    primary: "Doctor's Appointment",
-    secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
-    person: '/static/images/avatar/4.jpg',
-  },
-  {
-    primary: 'Discussion',
-    secondary: `Menus that are generated by the bottom app bar (such as a bottom
-      navigation drawer or overflow menu) open as bottom sheets at a higher elevation
-      than the bar.`,
-    person: '/static/images/avatar/5.jpg',
-  },
-  {
-    primary: 'Summer BBQ',
-    secondary: `Who wants to have a cookout this weekend? I just got some furniture
-      for my backyard and would love to fire up the grill.`,
-    person: '/static/images/avatar/1.jpg',
-  },
-];
diff --git a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.js b/docs/data/material/components/bottom-navigation/LabelBottomNavigation.js
deleted file mode 100644
index d0ba611915020f..00000000000000
--- a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import FolderIcon from '@mui/icons-material/Folder';
-import RestoreIcon from '@mui/icons-material/Restore';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-
-export default function LabelBottomNavigation() {
-  const [value, setValue] = React.useState('recents');
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      }
-      />
-      }
-      />
-      }
-      />
-      } />
-    
-  );
-}
diff --git a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js b/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js
deleted file mode 100644
index b85b0d7fc44573..00000000000000
--- a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import RestoreIcon from '@mui/icons-material/Restore';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-
-export default function SimpleBottomNavigation() {
-  const [value, setValue] = React.useState(0);
-
-  return (
-    
-       {
-          setValue(newValue);
-        }}
-      >
-        } />
-        } />
-        } />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview b/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview
deleted file mode 100644
index 40a0e18ddd6b14..00000000000000
--- a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
- {
-    setValue(newValue);
-  }}
->
-  } />
-  } />
-  } />
-
\ No newline at end of file
diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation.md b/docs/data/material/components/bottom-navigation/bottom-navigation.md
index 17eb5ccf2e7d0d..ebd7dbbde6866a 100644
--- a/docs/data/material/components/bottom-navigation/bottom-navigation.md
+++ b/docs/data/material/components/bottom-navigation/bottom-navigation.md
@@ -19,19 +19,19 @@ Bottom navigation bars display three to five destinations at the bottom of a scr
 
 When there are only **three** actions, display both icons and text labels at all times.
 
-{{"demo": "SimpleBottomNavigation.js", "bg": true}}
+{{"component": "../data/material/components/bottom-navigation/demos/simple/index.ts", "bg": true}}
 
 ## Bottom navigation with no label
 
 If there are **four** or **five** actions, display inactive views as icons only.
 
-{{"demo": "LabelBottomNavigation.js", "bg": true}}
+{{"component": "../data/material/components/bottom-navigation/demos/label/index.ts", "bg": true}}
 
 ## Fixed positioning
 
 This demo keeps bottom navigation fixed to the bottom, no matter the amount of content on-screen.
 
-{{"demo": "FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}}
+{{"component": "../data/material/components/bottom-navigation/demos/fixed/index.ts", "bg": true, "iframe": true, "maxWidth": 600}}
 
 ## Third-party routing library
 
diff --git a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx b/docs/data/material/components/bottom-navigation/demos/fixed/FixedBottomNavigation.tsx
similarity index 98%
rename from docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx
rename to docs/data/material/components/bottom-navigation/demos/fixed/FixedBottomNavigation.tsx
index ebeb41e2bcdcfc..c9f124fbb4555b 100644
--- a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx
+++ b/docs/data/material/components/bottom-navigation/demos/fixed/FixedBottomNavigation.tsx
@@ -22,6 +22,7 @@ function refreshMessages(): MessageExample[] {
 }
 
 export default function FixedBottomNavigation() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(0);
   const ref = React.useRef(null);
   const [messages, setMessages] = React.useState(() => refreshMessages());
@@ -59,6 +60,7 @@ export default function FixedBottomNavigation() {
       
     
   );
+  // @focus-end
 }
 
 interface MessageExample {
diff --git a/docs/data/material/components/bottom-navigation/demos/fixed/index.ts b/docs/data/material/components/bottom-navigation/demos/fixed/index.ts
new file mode 100644
index 00000000000000..079cc6795e638f
--- /dev/null
+++ b/docs/data/material/components/bottom-navigation/demos/fixed/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FixedBottomNavigation from './FixedBottomNavigation';
+
+export default createDemo(import.meta.url, FixedBottomNavigation);
diff --git a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.tsx b/docs/data/material/components/bottom-navigation/demos/label/LabelBottomNavigation.tsx
similarity index 96%
rename from docs/data/material/components/bottom-navigation/LabelBottomNavigation.tsx
rename to docs/data/material/components/bottom-navigation/demos/label/LabelBottomNavigation.tsx
index d76c2dc9b64ed1..aa460afbc70882 100644
--- a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.tsx
+++ b/docs/data/material/components/bottom-navigation/demos/label/LabelBottomNavigation.tsx
@@ -7,6 +7,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 
 export default function LabelBottomNavigation() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState('recents');
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
@@ -33,4 +34,5 @@ export default function LabelBottomNavigation() {
       } />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/bottom-navigation/demos/label/index.ts b/docs/data/material/components/bottom-navigation/demos/label/index.ts
new file mode 100644
index 00000000000000..d48e939331b9ca
--- /dev/null
+++ b/docs/data/material/components/bottom-navigation/demos/label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LabelBottomNavigation from './LabelBottomNavigation';
+
+export default createDemo(import.meta.url, LabelBottomNavigation);
diff --git a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx b/docs/data/material/components/bottom-navigation/demos/simple/SimpleBottomNavigation.tsx
similarity index 94%
rename from docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx
rename to docs/data/material/components/bottom-navigation/demos/simple/SimpleBottomNavigation.tsx
index b85b0d7fc44573..54718a0d3319e7 100644
--- a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx
+++ b/docs/data/material/components/bottom-navigation/demos/simple/SimpleBottomNavigation.tsx
@@ -11,6 +11,7 @@ export default function SimpleBottomNavigation() {
 
   return (
     
+      {/* @focus-start */}
       } />
         } />
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/bottom-navigation/demos/simple/index.ts b/docs/data/material/components/bottom-navigation/demos/simple/index.ts
new file mode 100644
index 00000000000000..a696e9d31a8cdd
--- /dev/null
+++ b/docs/data/material/components/bottom-navigation/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleBottomNavigation from './SimpleBottomNavigation';
+
+export default createDemo(import.meta.url, SimpleBottomNavigation);
diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js
deleted file mode 100644
index e849fa4e88460c..00000000000000
--- a/docs/data/material/components/box/BoxBasic.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Box from '@mui/material/Box';
-
-export default function BoxBasic() {
-  return (
-    
-      This Box renders as an HTML section element.
-    
-  );
-}
diff --git a/docs/data/material/components/box/BoxBasic.tsx.preview b/docs/data/material/components/box/BoxBasic.tsx.preview
deleted file mode 100644
index d22b5b82187b80..00000000000000
--- a/docs/data/material/components/box/BoxBasic.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-  This Box renders as an HTML section element.
diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js
deleted file mode 100644
index f02884d8c12bfe..00000000000000
--- a/docs/data/material/components/box/BoxSx.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Box from '@mui/material/Box';
-import { ThemeProvider } from '@mui/material/styles';
-
-export default function BoxSx() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index 614054aead876d..7af6e2a0a1eb2f 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -33,14 +33,14 @@ import Box from '@mui/material/Box';
 The Box component renders as a `
    ` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
 The demo below replaces the `
    ` with a `
    ` element:
 
-{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+{{"component": "../data/material/components/box/demos/basic/index.ts", "defaultCodeOpen": true }}
 
 ## Customization
 
 Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
 The demo below shows how to apply colors from the theme using this prop:
 
-{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+{{"component": "../data/material/components/box/demos/sx/index.ts", "defaultCodeOpen": true }}
 
 ## Anatomy
 
diff --git a/docs/data/material/components/box/BoxBasic.tsx b/docs/data/material/components/box/demos/basic/BoxBasic.tsx
similarity index 82%
rename from docs/data/material/components/box/BoxBasic.tsx
rename to docs/data/material/components/box/demos/basic/BoxBasic.tsx
index e849fa4e88460c..1049dd3f9f32a2 100644
--- a/docs/data/material/components/box/BoxBasic.tsx
+++ b/docs/data/material/components/box/demos/basic/BoxBasic.tsx
@@ -3,7 +3,9 @@ import Box from '@mui/material/Box';
 export default function BoxBasic() {
   return (
     
+    {/* @focus-start */}
       This Box renders as an HTML section element.
+    {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/box/demos/basic/index.ts b/docs/data/material/components/box/demos/basic/index.ts
new file mode 100644
index 00000000000000..e7fc8a5d7a159c
--- /dev/null
+++ b/docs/data/material/components/box/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BoxBasic from './BoxBasic';
+
+export default createDemo(import.meta.url, BoxBasic);
diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/demos/sx/BoxSx.tsx
similarity index 93%
rename from docs/data/material/components/box/BoxSx.tsx
rename to docs/data/material/components/box/demos/sx/BoxSx.tsx
index f02884d8c12bfe..1425d94f3a0f53 100644
--- a/docs/data/material/components/box/BoxSx.tsx
+++ b/docs/data/material/components/box/demos/sx/BoxSx.tsx
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@mui/material/styles';
 
 export default function BoxSx() {
   return (
+    // @focus-start
     
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/box/demos/sx/index.ts b/docs/data/material/components/box/demos/sx/index.ts
new file mode 100644
index 00000000000000..95440e51fe83fd
--- /dev/null
+++ b/docs/data/material/components/box/demos/sx/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BoxSx from './BoxSx';
+
+export default createDemo(import.meta.url, BoxSx);
diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js
deleted file mode 100644
index ed49640bdd0172..00000000000000
--- a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Link from '@mui/material/Link';
-
-function handleClick(event) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
-}
-
-export default function ActiveLastBreadcrumb() {
-  return (
-    
    
-      
-        
-          MUI
-        
-        
-          Core
-        
-        
-          Breadcrumbs
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js b/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js
deleted file mode 100644
index 42df205d42a1fc..00000000000000
--- a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Link from '@mui/material/Link';
-
-function handleClick(event) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
-}
-
-export default function BasicBreadcrumbs() {
-  return (
-    
    
-      
-        
-          MUI
-        
-        
-          Core
-        
-        Breadcrumbs
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview b/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview
deleted file mode 100644
index 3d841b5c6c1a53..00000000000000
--- a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-  
-    MUI
-  
-  
-    Core
-  
-  Breadcrumbs
-
\ No newline at end of file
diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js
deleted file mode 100644
index 389e158df37931..00000000000000
--- a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
-
-function handleClick(event) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
-}
-
-export default function CollapsedBreadcrumbs() {
-  return (
-    
    
-      
-        
-          Home
-        
-        
-          Catalog
-        
-        
-          Accessories
-        
-        
-          New Collection
-        
-        Belts
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview b/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview
deleted file mode 100644
index ff57d288bd7789..00000000000000
--- a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-  
-    Home
-  
-  
-    Catalog
-  
-  
-    Accessories
-  
-  
-    New Collection
-  
-  Belts
-
\ No newline at end of file
diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.js b/docs/data/material/components/breadcrumbs/CondensedWithMenu.js
deleted file mode 100644
index 58ae9446070b07..00000000000000
--- a/docs/data/material/components/breadcrumbs/CondensedWithMenu.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Link from '@mui/material/Link';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import IconButton from '@mui/material/IconButton';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-
-export default function CondensedWithMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event) => {
-    if (event) {
-      setAnchorEl(event.currentTarget);
-    }
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
-      
-        Breadcrumb 2
-        Breadcrumb 3
-        Breadcrumb 4
-      
-      
-        
-          Breadcrumb 1
-        
-        
-          
-        
-        
-          Breadcrumb 5
-        
-        
-          Breadcrumb 6
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/CustomSeparator.js b/docs/data/material/components/breadcrumbs/CustomSeparator.js
deleted file mode 100644
index c373cff2c2a49d..00000000000000
--- a/docs/data/material/components/breadcrumbs/CustomSeparator.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-
-function handleClick(event) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
-}
-
-export default function CustomSeparator() {
-  const breadcrumbs = [
-    
-      MUI
-    ,
-    
-      Core
-    ,
-    
-      Breadcrumb
-    ,
-  ];
-
-  return (
-    
-      
-        {breadcrumbs}
-      
-      
-        {breadcrumbs}
-      
-      }
-        aria-label="breadcrumb"
-      >
-        {breadcrumbs}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview b/docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview
deleted file mode 100644
index 71cc8ac133606f..00000000000000
--- a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  {breadcrumbs}
-
-
-  {breadcrumbs}
-
-}
-  aria-label="breadcrumb"
->
-  {breadcrumbs}
-
\ No newline at end of file
diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js
deleted file mode 100644
index bd36848ab6599f..00000000000000
--- a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { emphasize, styled } from '@mui/material/styles';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Chip from '@mui/material/Chip';
-import HomeIcon from '@mui/icons-material/Home';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-const StyledBreadcrumb = styled(Chip)(({ theme }) => {
-  return {
-    backgroundColor: theme.palette.grey[100],
-    height: theme.spacing(3),
-    color: (theme.vars || theme).palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
-    '&:hover, &:focus': {
-      backgroundColor: emphasize(theme.palette.grey[100], 0.06),
-      ...theme.applyStyles('dark', {
-        backgroundColor: emphasize(theme.palette.grey[800], 0.06),
-      }),
-    },
-    '&:active': {
-      boxShadow: theme.shadows[1],
-      backgroundColor: emphasize(theme.palette.grey[100], 0.12),
-      ...theme.applyStyles('dark', {
-        backgroundColor: emphasize(theme.palette.grey[800], 0.12),
-      }),
-    },
-    ...theme.applyStyles('dark', {
-      backgroundColor: theme.palette.grey[800],
-    }),
-  };
-}); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
-
-function handleClick(event) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
-}
-
-export default function CustomizedBreadcrumbs() {
-  return (
-    
    
-      
-        }
-        />
-        
-        }
-          onDelete={handleClick}
-        />
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview b/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview
deleted file mode 100644
index f20f58ec2010df..00000000000000
--- a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  }
-  />
-  
-  }
-    onDelete={handleClick}
-  />
-
\ No newline at end of file
diff --git a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js b/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js
deleted file mode 100644
index 5c11804c09fb4a..00000000000000
--- a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Link from '@mui/material/Link';
-import HomeIcon from '@mui/icons-material/Home';
-import WhatshotIcon from '@mui/icons-material/Whatshot';
-import GrainIcon from '@mui/icons-material/Grain';
-
-function handleClick(event) {
-  event.preventDefault();
-  console.info('You clicked a breadcrumb.');
-}
-
-export default function IconBreadcrumbs() {
-  return (
-    
    
-      
-        
-          
-          MUI
-        
-        
-          
-          Core
-        
-        
-          
-          Breadcrumb
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js b/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js
deleted file mode 100644
index 2b070f122b380b..00000000000000
--- a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import List from '@mui/material/List';
-import Link from '@mui/material/Link';
-
-import ListItemButton from '@mui/material/ListItemButton';
-import Collapse from '@mui/material/Collapse';
-import ListItemText from '@mui/material/ListItemText';
-import Typography from '@mui/material/Typography';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import {
-  Link as RouterLink,
-  Route,
-  Routes,
-  MemoryRouter,
-  useLocation,
-} from 'react-router';
-
-const breadcrumbNameMap = {
-  '/inbox': 'Inbox',
-  '/inbox/important': 'Important',
-  '/trash': 'Trash',
-  '/spam': 'Spam',
-  '/drafts': 'Drafts',
-};
-
-function ListItemLink(props) {
-  const { to, open, ...other } = props;
-  const primary = breadcrumbNameMap[to];
-
-  let icon = null;
-  if (open != null) {
-    icon = open ?  : ;
-  }
-
-  return (
-    
  • 
-      
-        
-        {icon}
-      
-    
    • 
-  );
-}
-
-ListItemLink.propTypes = {
-  open: PropTypes.bool,
-  to: PropTypes.string.isRequired,
-};
-
-function LinkRouter(props) {
-  return ;
-}
-
-function Page() {
-  const location = useLocation();
-  const pathnames = location.pathname.split('/').filter((x) => x);
-
-  return (
-    
-      
-        Home
-      
-      {pathnames.map((value, index) => {
-        const last = index === pathnames.length - 1;
-        const to = `/${pathnames.slice(0, index + 1).join('/')}`;
-
-        return last ? (
-          
-            {breadcrumbNameMap[to]}
-          
-        ) : (
-          
-            {breadcrumbNameMap[to]}
-          
-        );
-      })}
-    
-  );
-}
-
-export default function RouterBreadcrumbs() {
-  const [open, setOpen] = React.useState(true);
-
-  const handleClick = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  return (
-    
-      
-        
-          } />
-        
-        
-          
-            
-            
-              
-                
-              
-            
-            
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/breadcrumbs/breadcrumbs.md b/docs/data/material/components/breadcrumbs/breadcrumbs.md
index 7ee4e2062113d7..e5972ba0e60db5 100644
--- a/docs/data/material/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/material/components/breadcrumbs/breadcrumbs.md
@@ -15,44 +15,44 @@ githubSource: packages/mui-material/src/Breadcrumbs
 
 ## Basic breadcrumbs
 
-{{"demo": "BasicBreadcrumbs.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/basic/index.ts"}}
 
 ## Active last breadcrumb
 
 Keep the last breadcrumb interactive.
 
-{{"demo": "ActiveLastBreadcrumb.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/active-last/index.ts"}}
 
 ## Custom separator
 
 In the following examples, we are using two string separators and an SVG icon.
 
-{{"demo": "CustomSeparator.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/custom-separator/index.ts"}}
 
 ## Breadcrumbs with icons
 
-{{"demo": "IconBreadcrumbs.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/icon/index.ts"}}
 
 ## Collapsed breadcrumbs
 
-{{"demo": "CollapsedBreadcrumbs.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/collapsed/index.ts"}}
 
 ## Condensed with menu
 
 As an alternative, consider adding a Menu component to display the condensed links in a dropdown list:
 
-{{"demo": "CondensedWithMenu.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedBreadcrumbs.js"}}
+{{"component": "../data/material/components/breadcrumbs/demos/customized/index.ts"}}
 
 ## Integration with react-router
 
-{{"demo": "RouterBreadcrumbs.js", "bg": true}}
+{{"component": "../data/material/components/breadcrumbs/demos/router/index.ts", "bg": true}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx b/docs/data/material/components/breadcrumbs/demos/active-last/ActiveLastBreadcrumb.tsx
similarity index 94%
rename from docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx
rename to docs/data/material/components/breadcrumbs/demos/active-last/ActiveLastBreadcrumb.tsx
index a6af1a091439d3..dbc1b8ebf3ef1d 100644
--- a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/active-last/ActiveLastBreadcrumb.tsx
@@ -10,6 +10,7 @@ function handleClick(event: React.MouseEvent) {
 export default function ActiveLastBreadcrumb() {
   return (
     
    
+      {/* @focus-start */}
       
         
           MUI
@@ -32,6 +33,7 @@ export default function ActiveLastBreadcrumb() {
           Breadcrumbs
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/active-last/index.ts b/docs/data/material/components/breadcrumbs/demos/active-last/index.ts
new file mode 100644
index 00000000000000..96b7bf2f5782b7
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/active-last/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ActiveLastBreadcrumb from './ActiveLastBreadcrumb';
+
+export default createDemo(import.meta.url, ActiveLastBreadcrumb);
diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/basic/BasicBreadcrumbs.tsx
similarity index 94%
rename from docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx
rename to docs/data/material/components/breadcrumbs/demos/basic/BasicBreadcrumbs.tsx
index 05ec25b54d7b7c..57a6cf0bc62669 100644
--- a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/basic/BasicBreadcrumbs.tsx
@@ -11,6 +11,7 @@ function handleClick(event: React.MouseEvent) {
 export default function BasicBreadcrumbs() {
   return (
     
    
+      {/* @focus-start */}
       
         
           MUI
@@ -24,6 +25,7 @@ export default function BasicBreadcrumbs() {
         
         Breadcrumbs
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/basic/index.ts b/docs/data/material/components/breadcrumbs/demos/basic/index.ts
new file mode 100644
index 00000000000000..5666fa3ffd6ae7
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicBreadcrumbs from './BasicBreadcrumbs';
+
+export default createDemo(import.meta.url, BasicBreadcrumbs);
diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/collapsed/CollapsedBreadcrumbs.tsx
similarity index 94%
rename from docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx
rename to docs/data/material/components/breadcrumbs/demos/collapsed/CollapsedBreadcrumbs.tsx
index db8ced40240ecd..20936e6d1208fc 100644
--- a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/collapsed/CollapsedBreadcrumbs.tsx
@@ -11,6 +11,7 @@ function handleClick(event: React.MouseEvent) {
 export default function CollapsedBreadcrumbs() {
   return (
     
    
+      {/* @focus-start */}
       
         
           Home
@@ -26,6 +27,7 @@ export default function CollapsedBreadcrumbs() {
         
         Belts
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/collapsed/index.ts b/docs/data/material/components/breadcrumbs/demos/collapsed/index.ts
new file mode 100644
index 00000000000000..070153a211325b
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/collapsed/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CollapsedBreadcrumbs from './CollapsedBreadcrumbs';
+
+export default createDemo(import.meta.url, CollapsedBreadcrumbs);
diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/CondensedWithMenu.tsx
similarity index 97%
rename from docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx
rename to docs/data/material/components/breadcrumbs/demos/condensed-with-menu/CondensedWithMenu.tsx
index b7b2acc59e90cf..9a3ff1015713d6 100644
--- a/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/CondensedWithMenu.tsx
@@ -7,6 +7,7 @@ import IconButton from '@mui/material/IconButton';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 
 export default function CondensedWithMenu() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
 
@@ -48,4 +49,5 @@ export default function CondensedWithMenu() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts
new file mode 100644
index 00000000000000..c095aeb2807851
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CondensedWithMenu from './CondensedWithMenu';
+
+export default createDemo(import.meta.url, CondensedWithMenu);
diff --git a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx b/docs/data/material/components/breadcrumbs/demos/custom-separator/CustomSeparator.tsx
similarity index 96%
rename from docs/data/material/components/breadcrumbs/CustomSeparator.tsx
rename to docs/data/material/components/breadcrumbs/demos/custom-separator/CustomSeparator.tsx
index 32ebc9b9e476db..b2977f6d63369b 100644
--- a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/custom-separator/CustomSeparator.tsx
@@ -31,6 +31,7 @@ export default function CustomSeparator() {
 
   return (
     
+      {/* @focus-start */}
       
         {breadcrumbs}
       
@@ -43,6 +44,7 @@ export default function CustomSeparator() {
       >
         {breadcrumbs}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts b/docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts
new file mode 100644
index 00000000000000..da2befe77e1b2a
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomSeparator from './CustomSeparator';
+
+export default createDemo(import.meta.url, CustomSeparator);
diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/customized/CustomizedBreadcrumbs.tsx
similarity index 97%
rename from docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx
rename to docs/data/material/components/breadcrumbs/demos/customized/CustomizedBreadcrumbs.tsx
index 6cc65968d427e8..6e75b465b2ac2d 100644
--- a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/customized/CustomizedBreadcrumbs.tsx
@@ -38,6 +38,7 @@ function handleClick(event: React.MouseEvent) {
 export default function CustomizedBreadcrumbs() {
   return (
     
    
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/customized/index.ts b/docs/data/material/components/breadcrumbs/demos/customized/index.ts
new file mode 100644
index 00000000000000..bd80620370cf27
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedBreadcrumbs from './CustomizedBreadcrumbs';
+
+export default createDemo(import.meta.url, CustomizedBreadcrumbs);
diff --git a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/icon/IconBreadcrumbs.tsx
similarity index 96%
rename from docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx
rename to docs/data/material/components/breadcrumbs/demos/icon/IconBreadcrumbs.tsx
index ddfae110d283d6..9c8279ca6ee7de 100644
--- a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/icon/IconBreadcrumbs.tsx
@@ -14,6 +14,7 @@ function handleClick(event: React.MouseEvent) {
 export default function IconBreadcrumbs() {
   return (
     
    
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/icon/index.ts b/docs/data/material/components/breadcrumbs/demos/icon/index.ts
new file mode 100644
index 00000000000000..23bf0eb1551b8e
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconBreadcrumbs from './IconBreadcrumbs';
+
+export default createDemo(import.meta.url, IconBreadcrumbs);
diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/router/RouterBreadcrumbs.tsx
similarity index 98%
rename from docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx
rename to docs/data/material/components/breadcrumbs/demos/router/RouterBreadcrumbs.tsx
index 6e79d9904cf65e..7da81283183b56 100644
--- a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx
+++ b/docs/data/material/components/breadcrumbs/demos/router/RouterBreadcrumbs.tsx
@@ -87,6 +87,7 @@ function Page() {
 }
 
 export default function RouterBreadcrumbs() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(true);
 
   const handleClick = () => {
@@ -118,4 +119,5 @@ export default function RouterBreadcrumbs() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/breadcrumbs/demos/router/index.ts b/docs/data/material/components/breadcrumbs/demos/router/index.ts
new file mode 100644
index 00000000000000..5a70de63507905
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/demos/router/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RouterBreadcrumbs from './RouterBreadcrumbs';
+
+export default createDemo(import.meta.url, RouterBreadcrumbs);
diff --git a/docs/data/material/components/button-group/BasicButtonGroup.js b/docs/data/material/components/button-group/BasicButtonGroup.js
deleted file mode 100644
index a472c25ac46a04..00000000000000
--- a/docs/data/material/components/button-group/BasicButtonGroup.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-
-export default function BasicButtonGroup() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/BasicButtonGroup.tsx.preview b/docs/data/material/components/button-group/BasicButtonGroup.tsx.preview
deleted file mode 100644
index 4ee442de5f6e1b..00000000000000
--- a/docs/data/material/components/button-group/BasicButtonGroup.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/button-group/DisableElevation.js b/docs/data/material/components/button-group/DisableElevation.js
deleted file mode 100644
index b44f95cdafd818..00000000000000
--- a/docs/data/material/components/button-group/DisableElevation.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
-
-export default function DisableElevation() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/DisableElevation.tsx.preview b/docs/data/material/components/button-group/DisableElevation.tsx.preview
deleted file mode 100644
index 441e97f1db4130..00000000000000
--- a/docs/data/material/components/button-group/DisableElevation.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/button-group/GroupOrientation.js b/docs/data/material/components/button-group/GroupOrientation.js
deleted file mode 100644
index 01960d3454d2d4..00000000000000
--- a/docs/data/material/components/button-group/GroupOrientation.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Box from '@mui/material/Box';
-
-const buttons = [
-  ,
-  ,
-  ,
-];
-
-export default function GroupOrientation() {
-  return (
-     *': {
-          m: 1,
-        },
-      }}
-    >
-      
-        {buttons}
-      
-      
-        {buttons}
-      
-      
-        {buttons}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/GroupSizesColors.js b/docs/data/material/components/button-group/GroupSizesColors.js
deleted file mode 100644
index fcc6e993063532..00000000000000
--- a/docs/data/material/components/button-group/GroupSizesColors.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import ButtonGroup from '@mui/material/ButtonGroup';
-
-const buttons = [
-  ,
-  ,
-  ,
-];
-
-export default function GroupSizesColors() {
-  return (
-     *': {
-          m: 1,
-        },
-      }}
-    >
-      
-        {buttons}
-      
-      
-        {buttons}
-      
-      
-        {buttons}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/GroupSizesColors.tsx.preview b/docs/data/material/components/button-group/GroupSizesColors.tsx.preview
deleted file mode 100644
index 2a82ef23279d5b..00000000000000
--- a/docs/data/material/components/button-group/GroupSizesColors.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  {buttons}
-
-
-  {buttons}
-
-
-  {buttons}
-
\ No newline at end of file
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js
deleted file mode 100644
index 2d7de3f4908c44..00000000000000
--- a/docs/data/material/components/button-group/LoadingButtonGroup.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
-import SaveIcon from '@mui/icons-material/Save';
-
-export default function LoadingButtonGroup() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview
deleted file mode 100644
index a69903f1fca35c..00000000000000
--- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/button-group/SplitButton.js b/docs/data/material/components/button-group/SplitButton.js
deleted file mode 100644
index 00a23c905e853d..00000000000000
--- a/docs/data/material/components/button-group/SplitButton.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Grow from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-
-const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];
-
-export default function SplitButton() {
-  const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef(null);
-  const [selectedIndex, setSelectedIndex] = React.useState(1);
-
-  const handleClick = () => {
-    console.info(`You clicked ${options[selectedIndex]}`);
-  };
-
-  const handleMenuItemClick = (event, index) => {
-    setSelectedIndex(index);
-    setOpen(false);
-  };
-
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  return (
-    
-      
-        
-        
-      
-      
-        {({ TransitionProps, placement }) => (
-          
-            
-              
-                
-                  {options.map((option, index) => (
-                     handleMenuItemClick(event, index)}
-                    >
-                      {option}
-                    
-                  ))}
-                
-              
-            
-          
-        )}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/VariantButtonGroup.js b/docs/data/material/components/button-group/VariantButtonGroup.js
deleted file mode 100644
index c59f8cbdceeb14..00000000000000
--- a/docs/data/material/components/button-group/VariantButtonGroup.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Box from '@mui/material/Box';
-
-export default function VariantButtonGroup() {
-  return (
-     *': {
-          m: 1,
-        },
-      }}
-    >
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/button-group/VariantButtonGroup.tsx.preview b/docs/data/material/components/button-group/VariantButtonGroup.tsx.preview
deleted file mode 100644
index 263b0efaff860b..00000000000000
--- a/docs/data/material/components/button-group/VariantButtonGroup.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  
-  
-  
-
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md
index 4113d65d8eb8cb..f0e2b4032fcfa8 100644
--- a/docs/data/material/components/button-group/button-group.md
+++ b/docs/data/material/components/button-group/button-group.md
@@ -17,40 +17,40 @@ githubSource: packages/mui-material/src/ButtonGroup
 The buttons can be grouped by wrapping them with the `ButtonGroup` component.
 They need to be immediate children.
 
-{{"demo": "BasicButtonGroup.js"}}
+{{"component": "../data/material/components/button-group/demos/basic/index.ts"}}
 
 ## Button variants
 
 All the standard button variants are supported.
 
-{{"demo": "VariantButtonGroup.js"}}
+{{"component": "../data/material/components/button-group/demos/variant/index.ts"}}
 
 ## Sizes and colors
 
 The `size` and `color` props can be used to control the appearance of the button group.
 
-{{"demo": "GroupSizesColors.js"}}
+{{"component": "../data/material/components/button-group/demos/group-sizes-colors/index.ts"}}
 
 ## Vertical group
 
 The button group can be displayed vertically using the `orientation` prop.
 
-{{"demo": "GroupOrientation.js"}}
+{{"component": "../data/material/components/button-group/demos/group-orientation/index.ts"}}
 
 ## Split button
 
 `ButtonGroup` can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.
 
-{{"demo": "SplitButton.js"}}
+{{"component": "../data/material/components/button-group/demos/split-button/index.ts"}}
 
 ## Disabled elevation
 
 You can remove the elevation with the `disableElevation` prop.
 
-{{"demo": "DisableElevation.js"}}
+{{"component": "../data/material/components/button-group/demos/disable-elevation/index.ts"}}
 
 ## Loading
 
 Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions.
 
-{{"demo": "LoadingButtonGroup.js"}}
+{{"component": "../data/material/components/button-group/demos/loading/index.ts"}}
diff --git a/docs/data/material/components/button-group/BasicButtonGroup.tsx b/docs/data/material/components/button-group/demos/basic/BasicButtonGroup.tsx
similarity index 88%
rename from docs/data/material/components/button-group/BasicButtonGroup.tsx
rename to docs/data/material/components/button-group/demos/basic/BasicButtonGroup.tsx
index a472c25ac46a04..6ad9854e1c9ef0 100644
--- a/docs/data/material/components/button-group/BasicButtonGroup.tsx
+++ b/docs/data/material/components/button-group/demos/basic/BasicButtonGroup.tsx
@@ -2,6 +2,7 @@ import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
 
 export default function BasicButtonGroup() {
+  // @focus-start @padding 1
   return (
     
       
@@ -9,4 +10,5 @@ export default function BasicButtonGroup() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/button-group/demos/basic/index.ts b/docs/data/material/components/button-group/demos/basic/index.ts
new file mode 100644
index 00000000000000..abf67b4e3a4f16
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicButtonGroup from './BasicButtonGroup';
+
+export default createDemo(import.meta.url, BasicButtonGroup);
diff --git a/docs/data/material/components/button-group/DisableElevation.tsx b/docs/data/material/components/button-group/demos/disable-elevation/DisableElevation.tsx
similarity index 88%
rename from docs/data/material/components/button-group/DisableElevation.tsx
rename to docs/data/material/components/button-group/demos/disable-elevation/DisableElevation.tsx
index b44f95cdafd818..e449736e790d54 100644
--- a/docs/data/material/components/button-group/DisableElevation.tsx
+++ b/docs/data/material/components/button-group/demos/disable-elevation/DisableElevation.tsx
@@ -2,6 +2,7 @@ import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 
 export default function DisableElevation() {
+  // @focus-start @padding 1
   return (
     Two
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/button-group/demos/disable-elevation/index.ts b/docs/data/material/components/button-group/demos/disable-elevation/index.ts
new file mode 100644
index 00000000000000..24b1dfa2aadf99
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/disable-elevation/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisableElevation from './DisableElevation';
+
+export default createDemo(import.meta.url, DisableElevation);
diff --git a/docs/data/material/components/button-group/GroupOrientation.tsx b/docs/data/material/components/button-group/demos/group-orientation/GroupOrientation.tsx
similarity index 94%
rename from docs/data/material/components/button-group/GroupOrientation.tsx
rename to docs/data/material/components/button-group/demos/group-orientation/GroupOrientation.tsx
index 01960d3454d2d4..8c066745ce6c85 100644
--- a/docs/data/material/components/button-group/GroupOrientation.tsx
+++ b/docs/data/material/components/button-group/demos/group-orientation/GroupOrientation.tsx
@@ -18,6 +18,7 @@ export default function GroupOrientation() {
         },
       }}
     >
+      {/* @focus-start */}
       
         {buttons}
       
@@ -35,6 +36,7 @@ export default function GroupOrientation() {
       >
         {buttons}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/button-group/demos/group-orientation/index.ts b/docs/data/material/components/button-group/demos/group-orientation/index.ts
new file mode 100644
index 00000000000000..33bbd617be670b
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/group-orientation/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GroupOrientation from './GroupOrientation';
+
+export default createDemo(import.meta.url, GroupOrientation);
diff --git a/docs/data/material/components/button-group/GroupSizesColors.tsx b/docs/data/material/components/button-group/demos/group-sizes-colors/GroupSizesColors.tsx
similarity index 94%
rename from docs/data/material/components/button-group/GroupSizesColors.tsx
rename to docs/data/material/components/button-group/demos/group-sizes-colors/GroupSizesColors.tsx
index fcc6e993063532..3a242346fdac4d 100644
--- a/docs/data/material/components/button-group/GroupSizesColors.tsx
+++ b/docs/data/material/components/button-group/demos/group-sizes-colors/GroupSizesColors.tsx
@@ -20,6 +20,7 @@ export default function GroupSizesColors() {
         },
       }}
     >
+      {/* @focus-start */}
       
         {buttons}
       
@@ -29,6 +30,7 @@ export default function GroupSizesColors() {
       
         {buttons}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/button-group/demos/group-sizes-colors/index.ts b/docs/data/material/components/button-group/demos/group-sizes-colors/index.ts
new file mode 100644
index 00000000000000..7f68e670186948
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/group-sizes-colors/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GroupSizesColors from './GroupSizesColors';
+
+export default createDemo(import.meta.url, GroupSizesColors);
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/demos/loading/LoadingButtonGroup.tsx
similarity index 91%
rename from docs/data/material/components/button-group/LoadingButtonGroup.tsx
rename to docs/data/material/components/button-group/demos/loading/LoadingButtonGroup.tsx
index 2d7de3f4908c44..bfad064f5ef2a9 100644
--- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx
+++ b/docs/data/material/components/button-group/demos/loading/LoadingButtonGroup.tsx
@@ -3,6 +3,7 @@ import Button from '@mui/material/Button';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
+  // @focus-start @padding 1
   return (
     
       
@@ -12,4 +13,5 @@ export default function LoadingButtonGroup() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/button-group/demos/loading/index.ts b/docs/data/material/components/button-group/demos/loading/index.ts
new file mode 100644
index 00000000000000..b2f5f18899a55d
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/loading/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LoadingButtonGroup from './LoadingButtonGroup';
+
+export default createDemo(import.meta.url, LoadingButtonGroup);
diff --git a/docs/data/material/components/button-group/SplitButton.tsx b/docs/data/material/components/button-group/demos/split-button/SplitButton.tsx
similarity index 98%
rename from docs/data/material/components/button-group/SplitButton.tsx
rename to docs/data/material/components/button-group/demos/split-button/SplitButton.tsx
index a27a321268bc52..f0980fe079fcb9 100644
--- a/docs/data/material/components/button-group/SplitButton.tsx
+++ b/docs/data/material/components/button-group/demos/split-button/SplitButton.tsx
@@ -12,6 +12,7 @@ import MenuList from '@mui/material/MenuList';
 const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];
 
 export default function SplitButton() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
@@ -99,4 +100,5 @@ export default function SplitButton() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/button-group/demos/split-button/index.ts b/docs/data/material/components/button-group/demos/split-button/index.ts
new file mode 100644
index 00000000000000..86412cb88a508e
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/split-button/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SplitButton from './SplitButton';
+
+export default createDemo(import.meta.url, SplitButton);
diff --git a/docs/data/material/components/button-group/VariantButtonGroup.tsx b/docs/data/material/components/button-group/demos/variant/VariantButtonGroup.tsx
similarity index 93%
rename from docs/data/material/components/button-group/VariantButtonGroup.tsx
rename to docs/data/material/components/button-group/demos/variant/VariantButtonGroup.tsx
index c59f8cbdceeb14..e3c8cc18adb32a 100644
--- a/docs/data/material/components/button-group/VariantButtonGroup.tsx
+++ b/docs/data/material/components/button-group/demos/variant/VariantButtonGroup.tsx
@@ -14,6 +14,7 @@ export default function VariantButtonGroup() {
         },
       }}
     >
+      {/* @focus-start */}
       
         
         
@@ -24,6 +25,7 @@ export default function VariantButtonGroup() {
         
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/button-group/demos/variant/index.ts b/docs/data/material/components/button-group/demos/variant/index.ts
new file mode 100644
index 00000000000000..6873b00204605a
--- /dev/null
+++ b/docs/data/material/components/button-group/demos/variant/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VariantButtonGroup from './VariantButtonGroup';
+
+export default createDemo(import.meta.url, VariantButtonGroup);
diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.js b/docs/data/material/components/buttons/ButtonBaseDemo.js
deleted file mode 100644
index 28f79fd4672e2c..00000000000000
--- a/docs/data/material/components/buttons/ButtonBaseDemo.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import ButtonBase from '@mui/material/ButtonBase';
-import Typography from '@mui/material/Typography';
-
-const images = [
-  {
-    url: '/static/images/buttons/breakfast.jpg',
-    title: 'Breakfast',
-    width: '40%',
-  },
-  {
-    url: '/static/images/buttons/burgers.jpg',
-    title: 'Burgers',
-    width: '30%',
-  },
-  {
-    url: '/static/images/buttons/camera.jpg',
-    title: 'Camera',
-    width: '30%',
-  },
-];
-
-const ImageButton = styled(ButtonBase)(({ theme }) => ({
-  position: 'relative',
-  height: 200,
-  [theme.breakpoints.down('sm')]: {
-    width: '100% !important', // Overrides inline-style
-    height: 100,
-  },
-  '&:hover, &.Mui-focusVisible': {
-    zIndex: 1,
-    '& .MuiImageBackdrop-root': {
-      opacity: 0.15,
-    },
-    '& .MuiImageMarked-root': {
-      opacity: 0,
-    },
-    '& .MuiTypography-root': {
-      border: '4px solid currentColor',
-    },
-  },
-}));
-
-const ImageSrc = styled('span')({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  backgroundSize: 'cover',
-  backgroundPosition: 'center 40%',
-});
-
-const Image = styled('span')(({ theme }) => ({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: theme.palette.common.white,
-}));
-
-const ImageBackdrop = styled('span')(({ theme }) => ({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  backgroundColor: theme.palette.common.black,
-  opacity: 0.4,
-  transition: theme.transitions.create('opacity'),
-}));
-
-const ImageMarked = styled('span')(({ theme }) => ({
-  height: 3,
-  width: 18,
-  backgroundColor: theme.palette.common.white,
-  position: 'absolute',
-  bottom: -2,
-  left: 'calc(50% - 9px)',
-  transition: theme.transitions.create('opacity'),
-}));
-
-export default function ButtonBaseDemo() {
-  return (
-    
-      {images.map((image) => (
-        
-          
-          
-          
-             ({
-                  position: 'relative',
-                  p: 4,
-                  pt: 2,
-                  pb: `calc(${theme.spacing(1)} + 6px)`,
-                }),
-              ]}
-            >
-              {image.title}
-              
-            
-          
-        
-      ))}
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/ButtonSizes.js b/docs/data/material/components/buttons/ButtonSizes.js
deleted file mode 100644
index bba86158356837..00000000000000
--- a/docs/data/material/components/buttons/ButtonSizes.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-
-export default function ButtonSizes() {
-  return (
-    
-      
    
-        
-        
-        
-      
    
-      
    
-        
-        
-        
-      
    
-      
    
-        
-        
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/buttons/ColorButtons.js b/docs/data/material/components/buttons/ColorButtons.js
deleted file mode 100644
index f709b8cd936bad..00000000000000
--- a/docs/data/material/components/buttons/ColorButtons.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-export default function ColorButtons() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/ColorButtons.tsx.preview b/docs/data/material/components/buttons/ColorButtons.tsx.preview
deleted file mode 100644
index b69599177b1ebe..00000000000000
--- a/docs/data/material/components/buttons/ColorButtons.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/ContainedButtons.js b/docs/data/material/components/buttons/ContainedButtons.js
deleted file mode 100644
index 3e1abb3601ba7c..00000000000000
--- a/docs/data/material/components/buttons/ContainedButtons.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-
-export default function ContainedButtons() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/ContainedButtons.tsx.preview b/docs/data/material/components/buttons/ContainedButtons.tsx.preview
deleted file mode 100644
index f8903cf5ff7471..00000000000000
--- a/docs/data/material/components/buttons/ContainedButtons.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/CustomizedButtons.js b/docs/data/material/components/buttons/CustomizedButtons.js
deleted file mode 100644
index 9cad4b68782e7f..00000000000000
--- a/docs/data/material/components/buttons/CustomizedButtons.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import { purple } from '@mui/material/colors';
-
-const BootstrapButton = styled(Button)({
-  boxShadow: 'none',
-  textTransform: 'none',
-  fontSize: 16,
-  padding: '6px 12px',
-  border: '1px solid',
-  lineHeight: 1.5,
-  backgroundColor: '#0063cc',
-  borderColor: '#0063cc',
-  fontFamily: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    'Roboto',
-    '"Helvetica Neue"',
-    'Arial',
-    'sans-serif',
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(','),
-  '&:hover': {
-    backgroundColor: '#0069d9',
-    borderColor: '#0062cc',
-    boxShadow: 'none',
-  },
-  '&:active': {
-    boxShadow: 'none',
-    backgroundColor: '#0062cc',
-    borderColor: '#005cbf',
-  },
-  '&:focus': {
-    boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
-  },
-});
-
-const ColorButton = styled(Button)(({ theme }) => ({
-  color: theme.palette.getContrastText(purple[500]),
-  backgroundColor: purple[500],
-  '&:hover': {
-    backgroundColor: purple[700],
-  },
-}));
-
-export default function CustomizedButtons() {
-  return (
-    
-      Custom CSS
-      
-        Bootstrap
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/CustomizedButtons.tsx.preview b/docs/data/material/components/buttons/CustomizedButtons.tsx.preview
deleted file mode 100644
index 5cf7e960f8c4eb..00000000000000
--- a/docs/data/material/components/buttons/CustomizedButtons.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-Custom CSS
-
-  Bootstrap
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/DisableElevation.js b/docs/data/material/components/buttons/DisableElevation.js
deleted file mode 100644
index d584080b554266..00000000000000
--- a/docs/data/material/components/buttons/DisableElevation.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Button from '@mui/material/Button';
-
-export default function DisableElevation() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/DisableElevation.tsx.preview b/docs/data/material/components/buttons/DisableElevation.tsx.preview
deleted file mode 100644
index 4f12bf06dc4b44..00000000000000
--- a/docs/data/material/components/buttons/DisableElevation.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/IconButtonColors.js b/docs/data/material/components/buttons/IconButtonColors.js
deleted file mode 100644
index ed1394fc9f9524..00000000000000
--- a/docs/data/material/components/buttons/IconButtonColors.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import Fingerprint from '@mui/icons-material/Fingerprint';
-
-export default function IconButtonColors() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/IconButtonColors.tsx.preview b/docs/data/material/components/buttons/IconButtonColors.tsx.preview
deleted file mode 100644
index 6bcdaf3df3ea98..00000000000000
--- a/docs/data/material/components/buttons/IconButtonColors.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/IconButtonSizes.js b/docs/data/material/components/buttons/IconButtonSizes.js
deleted file mode 100644
index bcec185eb43480..00000000000000
--- a/docs/data/material/components/buttons/IconButtonSizes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-export default function IconButtonSizes() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/IconButtonSizes.tsx.preview b/docs/data/material/components/buttons/IconButtonSizes.tsx.preview
deleted file mode 100644
index 23d0ea732b49c7..00000000000000
--- a/docs/data/material/components/buttons/IconButtonSizes.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-
-
-  
-
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.js b/docs/data/material/components/buttons/IconButtonWithBadge.js
deleted file mode 100644
index 3132aa52ada790..00000000000000
--- a/docs/data/material/components/buttons/IconButtonWithBadge.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { styled } from '@mui/material/styles';
-import IconButton from '@mui/material/IconButton';
-import Badge, { badgeClasses } from '@mui/material/Badge';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
-
-const CartBadge = styled(Badge)`
-  & .${badgeClasses.badge} {
-    top: -12px;
-    right: -6px;
-  }
-`;
-
-export default function IconButtonWithBadge() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview
deleted file mode 100644
index aa71bce96117c6..00000000000000
--- a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/IconButtons.js b/docs/data/material/components/buttons/IconButtons.js
deleted file mode 100644
index c99c3bfd302cd5..00000000000000
--- a/docs/data/material/components/buttons/IconButtons.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import DeleteIcon from '@mui/icons-material/Delete';
-import AlarmIcon from '@mui/icons-material/Alarm';
-import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
-
-export default function IconButtons() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/IconButtons.tsx.preview b/docs/data/material/components/buttons/IconButtons.tsx.preview
deleted file mode 100644
index eb5c34920ca84a..00000000000000
--- a/docs/data/material/components/buttons/IconButtons.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-
-
-  
-
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/IconLabelButtons.js b/docs/data/material/components/buttons/IconLabelButtons.js
deleted file mode 100644
index 4e5744367a0a47..00000000000000
--- a/docs/data/material/components/buttons/IconLabelButtons.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Button from '@mui/material/Button';
-import DeleteIcon from '@mui/icons-material/Delete';
-import SendIcon from '@mui/icons-material/Send';
-import Stack from '@mui/material/Stack';
-
-export default function IconLabelButtons() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/IconLabelButtons.tsx.preview b/docs/data/material/components/buttons/IconLabelButtons.tsx.preview
deleted file mode 100644
index 3e95b56b058d53..00000000000000
--- a/docs/data/material/components/buttons/IconLabelButtons.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js
deleted file mode 100644
index c186bc6b70ba19..00000000000000
--- a/docs/data/material/components/buttons/InputFileUpload.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-
-const VisuallyHiddenInput = styled('input')({
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-  height: 1,
-  overflow: 'hidden',
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  whiteSpace: 'nowrap',
-  width: 1,
-});
-
-export default function InputFileUpload() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview
deleted file mode 100644
index c2dccf123cc789..00000000000000
--- a/docs/data/material/components/buttons/InputFileUpload.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js
deleted file mode 100644
index 62cc284949adf2..00000000000000
--- a/docs/data/material/components/buttons/LoadingButtons.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import Button from '@mui/material/Button';
-import SaveIcon from '@mui/icons-material/Save';
-import Stack from '@mui/material/Stack';
-
-export default function LoadingButtons() {
-  return (
-    
-      
-        
-        
-        
-      
-      
-      
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js
deleted file mode 100644
index 2278b2684fe7b5..00000000000000
--- a/docs/data/material/components/buttons/LoadingButtonsTransition.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import SaveIcon from '@mui/icons-material/Save';
-import SendIcon from '@mui/icons-material/Send';
-
-export default function LoadingButtonsTransition() {
-  const [loading, setLoading] = React.useState(true);
-  function handleClick() {
-    setLoading(true);
-  }
-
-  return (
-    
    
-       setLoading(!loading)}
-            name="loading"
-            color="primary"
-          />
-        }
-        label="Loading"
-      />
-       button': { m: 1 } }}>
-        
-        
-        
-        
-      
-       button': { m: 1 } }}>
-        
-        
-        
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/buttons/LoadingIconButton.js b/docs/data/material/components/buttons/LoadingIconButton.js
deleted file mode 100644
index 6778d7281d47d7..00000000000000
--- a/docs/data/material/components/buttons/LoadingIconButton.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-
-export default function LoadingIconButton() {
-  const [loading, setLoading] = React.useState(false);
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-    return () => clearTimeout(timeout);
-  });
-  return (
-    
-       setLoading(true)} loading={loading}>
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/LoadingIconButton.tsx.preview b/docs/data/material/components/buttons/LoadingIconButton.tsx.preview
deleted file mode 100644
index 9c9a8b0cbf868a..00000000000000
--- a/docs/data/material/components/buttons/LoadingIconButton.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-   setLoading(true)} loading={loading}>
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/OutlinedButtons.js b/docs/data/material/components/buttons/OutlinedButtons.js
deleted file mode 100644
index 67cc7dc7cfca39..00000000000000
--- a/docs/data/material/components/buttons/OutlinedButtons.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-
-export default function OutlinedButtons() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/OutlinedButtons.tsx.preview b/docs/data/material/components/buttons/OutlinedButtons.tsx.preview
deleted file mode 100644
index fa5532b2840b06..00000000000000
--- a/docs/data/material/components/buttons/OutlinedButtons.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/TextButtons.js b/docs/data/material/components/buttons/TextButtons.js
deleted file mode 100644
index 28e3db2b95a30d..00000000000000
--- a/docs/data/material/components/buttons/TextButtons.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-
-export default function TextButtons() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/buttons/TextButtons.tsx.preview b/docs/data/material/components/buttons/TextButtons.tsx.preview
deleted file mode 100644
index b21873401ea164..00000000000000
--- a/docs/data/material/components/buttons/TextButtons.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md
index 95bfe751bbb4f4..7d90712cbd2aa2 100644
--- a/docs/data/material/components/buttons/buttons.md
+++ b/docs/data/material/components/buttons/buttons.md
@@ -33,7 +33,7 @@ The `Button` comes with three variants: text (default), contained, and outlined.
 are typically used for less-pronounced actions, including those located: in dialogs, in cards.
 In cards, text buttons help maintain an emphasis on card content.
 
-{{"demo": "TextButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/text/index.ts"}}
 
 ### Contained button
 
@@ -41,11 +41,11 @@ In cards, text buttons help maintain an emphasis on card content.
 are high-emphasis, distinguished by their use of elevation and fill.
 They contain actions that are primary to your app.
 
-{{"demo": "ContainedButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/contained/index.ts"}}
 
 You can remove the elevation with the `disableElevation` prop.
 
-{{"demo": "DisableElevation.js"}}
+{{"component": "../data/material/components/buttons/demos/disable-elevation/index.ts"}}
 
 ### Outlined button
 
@@ -55,7 +55,7 @@ They contain actions that are important but aren't the primary action in an app.
 Outlined buttons are also a lower emphasis alternative to contained buttons,
 or a higher emphasis alternative to text buttons.
 
-{{"demo": "OutlinedButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/outlined/index.ts"}}
 
 ## Handling clicks
 
@@ -75,7 +75,7 @@ Note that the documentation [avoids](/material-ui/guides/api/#native-properties)
 
 ## Color
 
-{{"demo": "ColorButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/color/index.ts"}}
 
 In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/material-ui/customization/palette/#custom-colors) examples for more info.
 
@@ -83,13 +83,13 @@ In addition to using the default button colors, you can add custom ones, or disa
 
 For larger or smaller buttons, use the `size` prop.
 
-{{"demo": "ButtonSizes.js"}}
+{{"component": "../data/material/components/buttons/demos/sizes/index.ts"}}
 
 ## Buttons with icons and label
 
 Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.
 
-{{"demo": "IconLabelButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/icon-label/index.ts"}}
 
 ## Icon button
 
@@ -98,47 +98,47 @@ Icon buttons are commonly found in app bars and toolbars.
 Icons are also appropriate for toggle buttons that allow a single choice to be selected or
 deselected, such as adding or removing a star to an item.
 
-{{"demo": "IconButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/icon/index.ts"}}
 
 ### Sizes
 
 For larger or smaller icon buttons, use the `size` prop.
 
-{{"demo": "IconButtonSizes.js"}}
+{{"component": "../data/material/components/buttons/demos/icon-sizes/index.ts"}}
 
 ### Colors
 
 Use `color` prop to apply theme color palette to component.
 
-{{"demo": "IconButtonColors.js"}}
+{{"component": "../data/material/components/buttons/demos/icon-colors/index.ts"}}
 
 ### Loading
 
 Starting from v6.4.0, use `loading` prop to set icon buttons in a loading state and disable interactions.
 
-{{"demo": "LoadingIconButton.js"}}
+{{"component": "../data/material/components/buttons/demos/loading-icon/index.ts"}}
 
 ### Badge
 
 You can use the [`Badge`](/material-ui/react-badge/) component to add a badge to an `IconButton`.
 
-{{"demo": "IconButtonWithBadge.js"}}
+{{"component": "../data/material/components/buttons/demos/icon-with-badge/index.ts"}}
 
 ## File upload
 
 To create a file upload button, turn the button into a label using `component="label"` and then create a visually-hidden input with type `file`.
 
-{{"demo": "InputFileUpload.js"}}
+{{"component": "../data/material/components/buttons/demos/input-file-upload/index.ts"}}
 
 ## Loading
 
 Starting from v6.4.0, use the `loading` prop to set buttons in a loading state and disable interactions.
 
-{{"demo": "LoadingButtons.js"}}
+{{"component": "../data/material/components/buttons/demos/loading/index.ts"}}
 
 Toggle the loading switch to see the transition between the different states.
 
-{{"demo": "LoadingButtonsTransition.js"}}
+{{"component": "../data/material/components/buttons/demos/loading-transition/index.ts"}}
 
 :::warning
 When the `loading` prop is set to `boolean`, the loading wrapper is always present in the DOM to prevent a [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
@@ -170,7 +170,7 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) {
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedButtons.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/buttons/demos/customized/index.ts", "defaultCodeOpen": false}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/button).
 
@@ -179,7 +179,7 @@ You can learn more about this in the [overrides documentation page](/material-ui
 The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`.
 You can take advantage of this lower-level component to build custom interactions.
 
-{{"demo": "ButtonBaseDemo.js"}}
+{{"component": "../data/material/components/buttons/demos/base-demo/index.ts"}}
 
 ## Third-party routing library
 
diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.tsx b/docs/data/material/components/buttons/demos/base-demo/ButtonBaseDemo.tsx
similarity index 98%
rename from docs/data/material/components/buttons/ButtonBaseDemo.tsx
rename to docs/data/material/components/buttons/demos/base-demo/ButtonBaseDemo.tsx
index 28f79fd4672e2c..a063271e9ce738 100644
--- a/docs/data/material/components/buttons/ButtonBaseDemo.tsx
+++ b/docs/data/material/components/buttons/demos/base-demo/ButtonBaseDemo.tsx
@@ -88,6 +88,7 @@ const ImageMarked = styled('span')(({ theme }) => ({
 export default function ButtonBaseDemo() {
   return (
     
+      {/* @focus-start */}
       {images.map((image) => (
         
         
       ))}
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/base-demo/index.ts b/docs/data/material/components/buttons/demos/base-demo/index.ts
new file mode 100644
index 00000000000000..2eddcdffd17abe
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/base-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ButtonBaseDemo from './ButtonBaseDemo';
+
+export default createDemo(import.meta.url, ButtonBaseDemo);
diff --git a/docs/data/material/components/buttons/demos/basic/client.ts b/docs/data/material/components/buttons/demos/basic/client.ts
index 262420f6e96ed6..47671215a56433 100644
--- a/docs/data/material/components/buttons/demos/basic/client.ts
+++ b/docs/data/material/components/buttons/demos/basic/client.ts
@@ -1,5 +1,5 @@
 'use client';
 
-import { createDemoClient } from '@mui/internal-core-docs/utils';
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
 
 export default createDemoClient(import.meta.url);
diff --git a/docs/data/material/components/buttons/demos/basic/index.ts b/docs/data/material/components/buttons/demos/basic/index.ts
index c76df2dbb9c2b5..5cdd43bb699e7f 100644
--- a/docs/data/material/components/buttons/demos/basic/index.ts
+++ b/docs/data/material/components/buttons/demos/basic/index.ts
@@ -1,4 +1,4 @@
-import { createDemo } from '@mui/internal-core-docs/utils';
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
 import ClientProvider from './client';
 
 import BasicButtons from './BasicButtons';
diff --git a/docs/data/material/components/buttons/ColorButtons.tsx b/docs/data/material/components/buttons/demos/color/ColorButtons.tsx
similarity index 88%
rename from docs/data/material/components/buttons/ColorButtons.tsx
rename to docs/data/material/components/buttons/demos/color/ColorButtons.tsx
index f709b8cd936bad..565ed2b7123547 100644
--- a/docs/data/material/components/buttons/ColorButtons.tsx
+++ b/docs/data/material/components/buttons/demos/color/ColorButtons.tsx
@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 export default function ColorButtons() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/color/index.ts b/docs/data/material/components/buttons/demos/color/index.ts
new file mode 100644
index 00000000000000..bb49afc057a92f
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorButtons from './ColorButtons';
+
+export default createDemo(import.meta.url, ColorButtons);
diff --git a/docs/data/material/components/buttons/ContainedButtons.tsx b/docs/data/material/components/buttons/demos/contained/ContainedButtons.tsx
similarity index 89%
rename from docs/data/material/components/buttons/ContainedButtons.tsx
rename to docs/data/material/components/buttons/demos/contained/ContainedButtons.tsx
index 3e1abb3601ba7c..122fc1bc6d65f2 100644
--- a/docs/data/material/components/buttons/ContainedButtons.tsx
+++ b/docs/data/material/components/buttons/demos/contained/ContainedButtons.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function ContainedButtons() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/contained/index.ts b/docs/data/material/components/buttons/demos/contained/index.ts
new file mode 100644
index 00000000000000..5eac249c33d2a2
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/contained/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ContainedButtons from './ContainedButtons';
+
+export default createDemo(import.meta.url, ContainedButtons);
diff --git a/docs/data/material/components/buttons/CustomizedButtons.tsx b/docs/data/material/components/buttons/demos/customized/CustomizedButtons.tsx
similarity index 96%
rename from docs/data/material/components/buttons/CustomizedButtons.tsx
rename to docs/data/material/components/buttons/demos/customized/CustomizedButtons.tsx
index a2db743749c19d..eb3d942a88d5dd 100644
--- a/docs/data/material/components/buttons/CustomizedButtons.tsx
+++ b/docs/data/material/components/buttons/demos/customized/CustomizedButtons.tsx
@@ -50,10 +50,12 @@ const ColorButton = styled(Button)(({ theme }) => ({
 export default function CustomizedButtons() {
   return (
     
+      {/* @focus-start */}
       Custom CSS
       
         Bootstrap
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/customized/index.ts b/docs/data/material/components/buttons/demos/customized/index.ts
new file mode 100644
index 00000000000000..319114b2cb9217
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedButtons from './CustomizedButtons';
+
+export default createDemo(import.meta.url, CustomizedButtons);
diff --git a/docs/data/material/components/buttons/DisableElevation.tsx b/docs/data/material/components/buttons/demos/disable-elevation/DisableElevation.tsx
similarity index 81%
rename from docs/data/material/components/buttons/DisableElevation.tsx
rename to docs/data/material/components/buttons/demos/disable-elevation/DisableElevation.tsx
index d584080b554266..80f265c9d3ee9b 100644
--- a/docs/data/material/components/buttons/DisableElevation.tsx
+++ b/docs/data/material/components/buttons/demos/disable-elevation/DisableElevation.tsx
@@ -1,9 +1,11 @@
 import Button from '@mui/material/Button';
 
 export default function DisableElevation() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/buttons/demos/disable-elevation/index.ts b/docs/data/material/components/buttons/demos/disable-elevation/index.ts
new file mode 100644
index 00000000000000..24b1dfa2aadf99
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/disable-elevation/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisableElevation from './DisableElevation';
+
+export default createDemo(import.meta.url, DisableElevation);
diff --git a/docs/data/material/components/buttons/IconButtonColors.tsx b/docs/data/material/components/buttons/demos/icon-colors/IconButtonColors.tsx
similarity index 90%
rename from docs/data/material/components/buttons/IconButtonColors.tsx
rename to docs/data/material/components/buttons/demos/icon-colors/IconButtonColors.tsx
index ed1394fc9f9524..92d66ce0af7fde 100644
--- a/docs/data/material/components/buttons/IconButtonColors.tsx
+++ b/docs/data/material/components/buttons/demos/icon-colors/IconButtonColors.tsx
@@ -5,12 +5,14 @@ import Fingerprint from '@mui/icons-material/Fingerprint';
 export default function IconButtonColors() {
   return (
     
+      {/* @focus-start */}
       
         
       
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/icon-colors/index.ts b/docs/data/material/components/buttons/demos/icon-colors/index.ts
new file mode 100644
index 00000000000000..87090a82777c06
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/icon-colors/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconButtonColors from './IconButtonColors';
+
+export default createDemo(import.meta.url, IconButtonColors);
diff --git a/docs/data/material/components/buttons/IconLabelButtons.tsx b/docs/data/material/components/buttons/demos/icon-label/IconLabelButtons.tsx
similarity index 90%
rename from docs/data/material/components/buttons/IconLabelButtons.tsx
rename to docs/data/material/components/buttons/demos/icon-label/IconLabelButtons.tsx
index 4e5744367a0a47..9bc0c3ec8a4d84 100644
--- a/docs/data/material/components/buttons/IconLabelButtons.tsx
+++ b/docs/data/material/components/buttons/demos/icon-label/IconLabelButtons.tsx
@@ -6,12 +6,14 @@ import Stack from '@mui/material/Stack';
 export default function IconLabelButtons() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/icon-label/index.ts b/docs/data/material/components/buttons/demos/icon-label/index.ts
new file mode 100644
index 00000000000000..c4f977256f2c92
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/icon-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconLabelButtons from './IconLabelButtons';
+
+export default createDemo(import.meta.url, IconLabelButtons);
diff --git a/docs/data/material/components/buttons/IconButtonSizes.tsx b/docs/data/material/components/buttons/demos/icon-sizes/IconButtonSizes.tsx
similarity index 93%
rename from docs/data/material/components/buttons/IconButtonSizes.tsx
rename to docs/data/material/components/buttons/demos/icon-sizes/IconButtonSizes.tsx
index bcec185eb43480..a1b9561a372bc7 100644
--- a/docs/data/material/components/buttons/IconButtonSizes.tsx
+++ b/docs/data/material/components/buttons/demos/icon-sizes/IconButtonSizes.tsx
@@ -5,6 +5,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 export default function IconButtonSizes() {
   return (
     
+      {/* @focus-start */}
       
         
       
@@ -17,6 +18,7 @@ export default function IconButtonSizes() {
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/icon-sizes/index.ts b/docs/data/material/components/buttons/demos/icon-sizes/index.ts
new file mode 100644
index 00000000000000..53da3676f54281
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/icon-sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconButtonSizes from './IconButtonSizes';
+
+export default createDemo(import.meta.url, IconButtonSizes);
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx b/docs/data/material/components/buttons/demos/icon-with-badge/IconButtonWithBadge.tsx
similarity index 92%
rename from docs/data/material/components/buttons/IconButtonWithBadge.tsx
rename to docs/data/material/components/buttons/demos/icon-with-badge/IconButtonWithBadge.tsx
index 3132aa52ada790..c4d2f52ac5ff0e 100644
--- a/docs/data/material/components/buttons/IconButtonWithBadge.tsx
+++ b/docs/data/material/components/buttons/demos/icon-with-badge/IconButtonWithBadge.tsx
@@ -11,10 +11,12 @@ const CartBadge = styled(Badge)`
 `;
 
 export default function IconButtonWithBadge() {
+  // @focus-start @padding 1
   return (
     
       
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/buttons/demos/icon-with-badge/index.ts b/docs/data/material/components/buttons/demos/icon-with-badge/index.ts
new file mode 100644
index 00000000000000..da675df72a894b
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/icon-with-badge/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconButtonWithBadge from './IconButtonWithBadge';
+
+export default createDemo(import.meta.url, IconButtonWithBadge);
diff --git a/docs/data/material/components/buttons/IconButtons.tsx b/docs/data/material/components/buttons/demos/icon/IconButtons.tsx
similarity index 93%
rename from docs/data/material/components/buttons/IconButtons.tsx
rename to docs/data/material/components/buttons/demos/icon/IconButtons.tsx
index c99c3bfd302cd5..0455df4829d54b 100644
--- a/docs/data/material/components/buttons/IconButtons.tsx
+++ b/docs/data/material/components/buttons/demos/icon/IconButtons.tsx
@@ -7,6 +7,7 @@ import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 export default function IconButtons() {
   return (
     
+      {/* @focus-start */}
       
         
       
@@ -19,6 +20,7 @@ export default function IconButtons() {
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/icon/index.ts b/docs/data/material/components/buttons/demos/icon/index.ts
new file mode 100644
index 00000000000000..e0b970e0ab971f
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconButtons from './IconButtons';
+
+export default createDemo(import.meta.url, IconButtons);
diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/demos/input-file-upload/InputFileUpload.tsx
similarity index 94%
rename from docs/data/material/components/buttons/InputFileUpload.tsx
rename to docs/data/material/components/buttons/demos/input-file-upload/InputFileUpload.tsx
index c186bc6b70ba19..12f0ed9853a12f 100644
--- a/docs/data/material/components/buttons/InputFileUpload.tsx
+++ b/docs/data/material/components/buttons/demos/input-file-upload/InputFileUpload.tsx
@@ -15,6 +15,7 @@ const VisuallyHiddenInput = styled('input')({
 });
 
 export default function InputFileUpload() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/buttons/demos/input-file-upload/index.ts b/docs/data/material/components/buttons/demos/input-file-upload/index.ts
new file mode 100644
index 00000000000000..30c5c028d888be
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/input-file-upload/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InputFileUpload from './InputFileUpload';
+
+export default createDemo(import.meta.url, InputFileUpload);
diff --git a/docs/data/material/components/buttons/LoadingIconButton.tsx b/docs/data/material/components/buttons/demos/loading-icon/LoadingIconButton.tsx
similarity index 93%
rename from docs/data/material/components/buttons/LoadingIconButton.tsx
rename to docs/data/material/components/buttons/demos/loading-icon/LoadingIconButton.tsx
index 6778d7281d47d7..329bb27e582a9b 100644
--- a/docs/data/material/components/buttons/LoadingIconButton.tsx
+++ b/docs/data/material/components/buttons/demos/loading-icon/LoadingIconButton.tsx
@@ -11,6 +11,7 @@ export default function LoadingIconButton() {
     }, 2000);
     return () => clearTimeout(timeout);
   });
+  // @focus-start @padding 1
   return (
     
        setLoading(true)} loading={loading}>
@@ -18,4 +19,5 @@ export default function LoadingIconButton() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/buttons/demos/loading-icon/index.ts b/docs/data/material/components/buttons/demos/loading-icon/index.ts
new file mode 100644
index 00000000000000..0f665be3a32aab
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/loading-icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LoadingIconButton from './LoadingIconButton';
+
+export default createDemo(import.meta.url, LoadingIconButton);
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx b/docs/data/material/components/buttons/demos/loading-transition/LoadingButtonsTransition.tsx
similarity index 98%
rename from docs/data/material/components/buttons/LoadingButtonsTransition.tsx
rename to docs/data/material/components/buttons/demos/loading-transition/LoadingButtonsTransition.tsx
index 2278b2684fe7b5..de772d83bef0f4 100644
--- a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx
+++ b/docs/data/material/components/buttons/demos/loading-transition/LoadingButtonsTransition.tsx
@@ -7,6 +7,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import SendIcon from '@mui/icons-material/Send';
 
 export default function LoadingButtonsTransition() {
+  // @focus-start @padding 1
   const [loading, setLoading] = React.useState(true);
   function handleClick() {
     setLoading(true);
@@ -101,4 +102,5 @@ export default function LoadingButtonsTransition() {
       
     
    
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/buttons/demos/loading-transition/index.ts b/docs/data/material/components/buttons/demos/loading-transition/index.ts
new file mode 100644
index 00000000000000..ac609cde43ed94
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/loading-transition/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LoadingButtonsTransition from './LoadingButtonsTransition';
+
+export default createDemo(import.meta.url, LoadingButtonsTransition);
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/demos/loading/LoadingButtons.tsx
similarity index 96%
rename from docs/data/material/components/buttons/LoadingButtons.tsx
rename to docs/data/material/components/buttons/demos/loading/LoadingButtons.tsx
index 62cc284949adf2..facd5e0c4f2b18 100644
--- a/docs/data/material/components/buttons/LoadingButtons.tsx
+++ b/docs/data/material/components/buttons/demos/loading/LoadingButtons.tsx
@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 export default function LoadingButtons() {
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/loading/index.ts b/docs/data/material/components/buttons/demos/loading/index.ts
new file mode 100644
index 00000000000000..3a7d9c9b4e1ff1
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/loading/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LoadingButtons from './LoadingButtons';
+
+export default createDemo(import.meta.url, LoadingButtons);
diff --git a/docs/data/material/components/buttons/OutlinedButtons.tsx b/docs/data/material/components/buttons/demos/outlined/OutlinedButtons.tsx
similarity index 88%
rename from docs/data/material/components/buttons/OutlinedButtons.tsx
rename to docs/data/material/components/buttons/demos/outlined/OutlinedButtons.tsx
index 67cc7dc7cfca39..2d488c70e48b60 100644
--- a/docs/data/material/components/buttons/OutlinedButtons.tsx
+++ b/docs/data/material/components/buttons/demos/outlined/OutlinedButtons.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function OutlinedButtons() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/outlined/index.ts b/docs/data/material/components/buttons/demos/outlined/index.ts
new file mode 100644
index 00000000000000..aaf6107103f87d
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/outlined/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OutlinedButtons from './OutlinedButtons';
+
+export default createDemo(import.meta.url, OutlinedButtons);
diff --git a/docs/data/material/components/buttons/ButtonSizes.tsx b/docs/data/material/components/buttons/demos/sizes/ButtonSizes.tsx
similarity index 94%
rename from docs/data/material/components/buttons/ButtonSizes.tsx
rename to docs/data/material/components/buttons/demos/sizes/ButtonSizes.tsx
index bba86158356837..21a4632b14ac33 100644
--- a/docs/data/material/components/buttons/ButtonSizes.tsx
+++ b/docs/data/material/components/buttons/demos/sizes/ButtonSizes.tsx
@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 export default function ButtonSizes() {
   return (
     
+      {/* @focus-start */}
       
    
         
         
@@ -31,6 +32,7 @@ export default function ButtonSizes() {
           Large
         
       
    
+      {/* @focus-end */}
         
   );
 }
diff --git a/docs/data/material/components/buttons/demos/sizes/index.ts b/docs/data/material/components/buttons/demos/sizes/index.ts
new file mode 100644
index 00000000000000..16e07c0e48a62e
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ButtonSizes from './ButtonSizes';
+
+export default createDemo(import.meta.url, ButtonSizes);
diff --git a/docs/data/material/components/buttons/TextButtons.tsx b/docs/data/material/components/buttons/demos/text/TextButtons.tsx
similarity index 85%
rename from docs/data/material/components/buttons/TextButtons.tsx
rename to docs/data/material/components/buttons/demos/text/TextButtons.tsx
index 28e3db2b95a30d..86bb7665616034 100644
--- a/docs/data/material/components/buttons/TextButtons.tsx
+++ b/docs/data/material/components/buttons/demos/text/TextButtons.tsx
@@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack';
 export default function TextButtons() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/buttons/demos/text/index.ts b/docs/data/material/components/buttons/demos/text/index.ts
new file mode 100644
index 00000000000000..e09c592e54793d
--- /dev/null
+++ b/docs/data/material/components/buttons/demos/text/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TextButtons from './TextButtons';
+
+export default createDemo(import.meta.url, TextButtons);
diff --git a/docs/data/material/components/cards/ActionAreaCard.js b/docs/data/material/components/cards/ActionAreaCard.js
deleted file mode 100644
index 8f7377b910d0bb..00000000000000
--- a/docs/data/material/components/cards/ActionAreaCard.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Typography from '@mui/material/Typography';
-import CardActionArea from '@mui/material/CardActionArea';
-
-export default function ActionAreaCard() {
-  return (
-    
-      
-        
-        
-          
-            Lizard
-          
-          
-            Lizards are a widespread group of squamate reptiles, with over 6,000
-            species, ranging across all continents except Antarctica
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/cards/BasicCard.js b/docs/data/material/components/cards/BasicCard.js
deleted file mode 100644
index 91cc81c7ace6a1..00000000000000
--- a/docs/data/material/components/cards/BasicCard.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const bull = (
-  
-    •
-  
-);
-
-export default function BasicCard() {
-  return (
-    
-      
-        
-          Word of the Day
-        
-        
-          be{bull}nev{bull}o{bull}lent
-        
-        adjective
-        
-          well meaning and kindly.
-          
    
-          {'"a benevolent smile"'}
-            
-          
-      
-        
-      
-        
-  );
-}
diff --git a/docs/data/material/components/cards/ImgMediaCard.js b/docs/data/material/components/cards/ImgMediaCard.js
deleted file mode 100644
index eb95dd26f6c228..00000000000000
--- a/docs/data/material/components/cards/ImgMediaCard.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-export default function ImgMediaCard() {
-  return (
-    
-      
-      
-        
-          Lizard
-        
-        
-          Lizards are a widespread group of squamate reptiles, with over 6,000
-          species, ranging across all continents except Antarctica
-        
-      
-      
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/cards/MediaCard.js b/docs/data/material/components/cards/MediaCard.js
deleted file mode 100644
index 44d2ffe6a805cf..00000000000000
--- a/docs/data/material/components/cards/MediaCard.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-export default function MediaCard() {
-  return (
-    
-      
-      
-        
-          Lizard
-        
-        
-          Lizards are a widespread group of squamate reptiles, with over 6,000
-          species, ranging across all continents except Antarctica
-        
-      
-      
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/cards/MediaControlCard.js b/docs/data/material/components/cards/MediaControlCard.js
deleted file mode 100644
index 1c24b9a6f2ba10..00000000000000
--- a/docs/data/material/components/cards/MediaControlCard.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import SkipNextIcon from '@mui/icons-material/SkipNext';
-
-export default function MediaControlCard() {
-  const theme = useTheme();
-
-  return (
-    
-      
-        
-          
-            Live From Space
-          
-          
-            Mac Miller
-          
-        
-        
-          
-            {theme.direction === 'rtl' ?  : }
-          
-          
-            
-          
-          
-            {theme.direction === 'rtl' ?  : }
-          
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/cards/MultiActionAreaCard.js b/docs/data/material/components/cards/MultiActionAreaCard.js
deleted file mode 100644
index a88a5810dd363a..00000000000000
--- a/docs/data/material/components/cards/MultiActionAreaCard.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import CardActionArea from '@mui/material/CardActionArea';
-import CardActions from '@mui/material/CardActions';
-
-export default function MultiActionAreaCard() {
-  return (
-    
-      
-        
-        
-          
-            Lizard
-          
-          
-            Lizards are a widespread group of squamate reptiles, with over 6,000
-            species, ranging across all continents except Antarctica
-          
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/cards/OutlinedCard.js b/docs/data/material/components/cards/OutlinedCard.js
deleted file mode 100644
index fb5798a01655c9..00000000000000
--- a/docs/data/material/components/cards/OutlinedCard.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const bull = (
-  
-    •
-  
-);
-
-const card = (
-  
-    
-      
-        Word of the Day
-      
-      
-        be{bull}nev{bull}o{bull}lent
-      
-      adjective
-      
-        well meaning and kindly.
-        
    
-        {'"a benevolent smile"'}
-          
-        
-    
-      
-    
-      
-);
-
-export default function OutlinedCard() {
-  return (
-    
-      {card}
-    
-  );
-}
diff --git a/docs/data/material/components/cards/OutlinedCard.tsx.preview b/docs/data/material/components/cards/OutlinedCard.tsx.preview
deleted file mode 100644
index 4ca425a10c88cf..00000000000000
--- a/docs/data/material/components/cards/OutlinedCard.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-{card}
\ No newline at end of file
diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js
deleted file mode 100644
index 55f440144ee7a0..00000000000000
--- a/docs/data/material/components/cards/RecipeReviewCard.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardMedia from '@mui/material/CardMedia';
-import CardContent from '@mui/material/CardContent';
-import CardActions from '@mui/material/CardActions';
-import Collapse from '@mui/material/Collapse';
-import Avatar from '@mui/material/Avatar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import { red } from '@mui/material/colors';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import ShareIcon from '@mui/icons-material/Share';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-
-const ExpandMore = styled((props) => {
-  const { expand, ...other } = props;
-  return ;
-})(({ theme }) => ({
-  marginLeft: 'auto',
-  transition: theme.transitions.create('transform', {
-    duration: theme.transitions.duration.shortest,
-  }),
-  variants: [
-    {
-      props: ({ expand }) => !expand,
-      style: {
-        transform: 'rotate(0deg)',
-      },
-    },
-    {
-      props: ({ expand }) => !!expand,
-      style: {
-        transform: 'rotate(180deg)',
-      },
-    },
-  ],
-}));
-
-export default function RecipeReviewCard() {
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
-
-  return (
-    
-      
-            R
-          
-        }
-        action={
-          
-            
-          
-        }
-        title="Shrimp and Chorizo Paella"
-        subheader="September 14, 2016"
-      />
-      
-      
-        
-          This impressive paella is a perfect party dish and a fun meal to cook
-          together with your guests. Add 1 cup of frozen peas along with the mussels,
-          if you like.
-        
-      
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-      
-        
-          Method:
-          
-            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
-            aside for 10 minutes.
-          
-          
-            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
-            medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
-            occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
-            large plate and set aside, leaving chicken and chorizo in the pan. Add
-            pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
-            stirring often until thickened and fragrant, about 10 minutes. Add
-            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
-          
-          
-            Add rice and stir very gently to distribute. Top with artichokes and
-            peppers, and cook without stirring, until most of the liquid is absorbed,
-            15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
-            mussels, tucking them down into the rice, and cook again without
-            stirring, until mussels have opened and rice is just tender, 5 to 7
-            minutes more. (Discard any mussels that don't open.)
-          
-          
-            Set aside off of the heat to let rest for 10 minutes, and then serve.
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/cards/SelectActionCard.js b/docs/data/material/components/cards/SelectActionCard.js
deleted file mode 100644
index 7affd816ee9482..00000000000000
--- a/docs/data/material/components/cards/SelectActionCard.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
-import CardActionArea from '@mui/material/CardActionArea';
-
-const cards = [
-  {
-    id: 1,
-    title: 'Plants',
-    description: 'Plants are essential for all life.',
-  },
-  {
-    id: 2,
-    title: 'Animals',
-    description: 'Animals are a part of nature.',
-  },
-  {
-    id: 3,
-    title: 'Humans',
-    description: 'Humans depend on plants and animals for survival.',
-  },
-];
-
-function SelectActionCard() {
-  const [selectedCard, setSelectedCard] = React.useState(0);
-  return (
-    
-      {cards.map((card, index) => (
-        
-           setSelectedCard(index)}
-            data-active={selectedCard === index ? '' : undefined}
-            sx={{
-              height: '100%',
-              '&[data-active]': {
-                backgroundColor: 'action.selected',
-                '&:hover': {
-                  backgroundColor: 'action.selectedHover',
-                },
-              },
-            }}
-          >
-            
-              
-                {card.title}
-              
-              
-                {card.description}
-              
-            
-          
-        
-      ))}
-    
-  );
-}
-
-export default SelectActionCard;
diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md
index c843f78ff4c916..4bee03ca9f39de 100644
--- a/docs/data/material/components/cards/cards.md
+++ b/docs/data/material/components/cards/cards.md
@@ -25,7 +25,7 @@ The Material UI Card component includes several complementary utility component
 - Card Actions: an optional wrapper that groups a set of buttons.
 - Card Action Area: an optional wrapper that allows users to interact with the specified area of the Card.
 
-{{"demo": "BasicCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/basic/index.ts", "bg": true}}
 
 ## Basics
 
@@ -42,33 +42,33 @@ Although cards can support multiple actions, UI controls, and an overflow menu,
 
 Set `variant="outlined"` to render an outlined card.
 
-{{"demo": "OutlinedCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/outlined/index.ts", "bg": true}}
 
 ## Complex Interaction
 
 On desktop, card content can expand. (Click the downward chevron to view the recipe.)
 
-{{"demo": "RecipeReviewCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/recipe-review/index.ts", "bg": true}}
 
 ## Media
 
 Example of a card using an image to reinforce the content.
 
-{{"demo": "MediaCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/media/index.ts", "bg": true}}
 
 By default, we use the combination of a `
    ` element and a _background image_ to display the media. It can be problematic in some situations, for example, you might want to display a video or a responsive image. Use the `component` prop for these use cases:
 
-{{"demo": "ImgMediaCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/img-media/index.ts", "bg": true}}
 
 ## Primary action
 
 Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component.
 
-{{"demo": "ActionAreaCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/action-area/index.ts", "bg": true}}
 
 A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap.
 
-{{"demo": "MultiActionAreaCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/multi-action-area/index.ts", "bg": true}}
 
 ## UI Controls
 
@@ -76,12 +76,12 @@ Supplemental actions within the card are explicitly called out using icons, text
 
 Here's an example of a media control card.
 
-{{"demo": "MediaControlCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/media-control/index.ts", "bg": true}}
 
 ## Active state styles
 
 To customize a Card's styles when it's in an active state, you can attach a `data-active` attribute to the Card Action Area component and apply styles with the `&[data-active]` selector, as shown below:
 
-{{"demo": "SelectActionCard.js", "bg": true}}
+{{"component": "../data/material/components/cards/demos/select-action/index.ts", "bg": true}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/card).
diff --git a/docs/data/material/components/cards/ActionAreaCard.tsx b/docs/data/material/components/cards/demos/action-area/ActionAreaCard.tsx
similarity index 96%
rename from docs/data/material/components/cards/ActionAreaCard.tsx
rename to docs/data/material/components/cards/demos/action-area/ActionAreaCard.tsx
index 8f7377b910d0bb..2243ac9f662449 100644
--- a/docs/data/material/components/cards/ActionAreaCard.tsx
+++ b/docs/data/material/components/cards/demos/action-area/ActionAreaCard.tsx
@@ -6,6 +6,7 @@ import CardActionArea from '@mui/material/CardActionArea';
 
 export default function ActionAreaCard() {
   return (
+    // @focus-start
     
       
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/cards/demos/action-area/index.ts b/docs/data/material/components/cards/demos/action-area/index.ts
new file mode 100644
index 00000000000000..19fc94972b2946
--- /dev/null
+++ b/docs/data/material/components/cards/demos/action-area/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ActionAreaCard from './ActionAreaCard';
+
+export default createDemo(import.meta.url, ActionAreaCard);
diff --git a/docs/data/material/components/cards/BasicCard.tsx b/docs/data/material/components/cards/demos/basic/BasicCard.tsx
similarity index 96%
rename from docs/data/material/components/cards/BasicCard.tsx
rename to docs/data/material/components/cards/demos/basic/BasicCard.tsx
index 91cc81c7ace6a1..f3cd6b05b525aa 100644
--- a/docs/data/material/components/cards/BasicCard.tsx
+++ b/docs/data/material/components/cards/demos/basic/BasicCard.tsx
@@ -16,6 +16,7 @@ const bull = (
 
 export default function BasicCard() {
   return (
+    // @focus-start
     
       
         
@@ -35,5 +36,6 @@ export default function BasicCard() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/cards/demos/basic/index.ts b/docs/data/material/components/cards/demos/basic/index.ts
new file mode 100644
index 00000000000000..34274e9aa3b4bd
--- /dev/null
+++ b/docs/data/material/components/cards/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicCard from './BasicCard';
+
+export default createDemo(import.meta.url, BasicCard);
diff --git a/docs/data/material/components/cards/ImgMediaCard.tsx b/docs/data/material/components/cards/demos/img-media/ImgMediaCard.tsx
similarity index 96%
rename from docs/data/material/components/cards/ImgMediaCard.tsx
rename to docs/data/material/components/cards/demos/img-media/ImgMediaCard.tsx
index eb95dd26f6c228..124afdc7dcc819 100644
--- a/docs/data/material/components/cards/ImgMediaCard.tsx
+++ b/docs/data/material/components/cards/demos/img-media/ImgMediaCard.tsx
@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography';
 
 export default function ImgMediaCard() {
   return (
+    // @focus-start
     
       Learn More
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/cards/demos/img-media/index.ts b/docs/data/material/components/cards/demos/img-media/index.ts
new file mode 100644
index 00000000000000..167a66fc7cd478
--- /dev/null
+++ b/docs/data/material/components/cards/demos/img-media/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ImgMediaCard from './ImgMediaCard';
+
+export default createDemo(import.meta.url, ImgMediaCard);
diff --git a/docs/data/material/components/cards/MediaControlCard.tsx b/docs/data/material/components/cards/demos/media-control/MediaControlCard.tsx
similarity index 97%
rename from docs/data/material/components/cards/MediaControlCard.tsx
rename to docs/data/material/components/cards/demos/media-control/MediaControlCard.tsx
index 1c24b9a6f2ba10..aca2b1db49db81 100644
--- a/docs/data/material/components/cards/MediaControlCard.tsx
+++ b/docs/data/material/components/cards/demos/media-control/MediaControlCard.tsx
@@ -10,6 +10,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
 
 export default function MediaControlCard() {
+  // @focus-start @padding 1
   const theme = useTheme();
 
   return (
@@ -47,4 +48,5 @@ export default function MediaControlCard() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/cards/demos/media-control/index.ts b/docs/data/material/components/cards/demos/media-control/index.ts
new file mode 100644
index 00000000000000..e23bdbcd381fbe
--- /dev/null
+++ b/docs/data/material/components/cards/demos/media-control/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MediaControlCard from './MediaControlCard';
+
+export default createDemo(import.meta.url, MediaControlCard);
diff --git a/docs/data/material/components/cards/MediaCard.tsx b/docs/data/material/components/cards/demos/media/MediaCard.tsx
similarity index 96%
rename from docs/data/material/components/cards/MediaCard.tsx
rename to docs/data/material/components/cards/demos/media/MediaCard.tsx
index 44d2ffe6a805cf..6b7179780a2e9e 100644
--- a/docs/data/material/components/cards/MediaCard.tsx
+++ b/docs/data/material/components/cards/demos/media/MediaCard.tsx
@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography';
 
 export default function MediaCard() {
   return (
+    // @focus-start
     
       Learn More
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/cards/demos/media/index.ts b/docs/data/material/components/cards/demos/media/index.ts
new file mode 100644
index 00000000000000..6e5c097e19b28e
--- /dev/null
+++ b/docs/data/material/components/cards/demos/media/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MediaCard from './MediaCard';
+
+export default createDemo(import.meta.url, MediaCard);
diff --git a/docs/data/material/components/cards/MultiActionAreaCard.tsx b/docs/data/material/components/cards/demos/multi-action-area/MultiActionAreaCard.tsx
similarity index 96%
rename from docs/data/material/components/cards/MultiActionAreaCard.tsx
rename to docs/data/material/components/cards/demos/multi-action-area/MultiActionAreaCard.tsx
index a88a5810dd363a..f7cf93a2d4aae1 100644
--- a/docs/data/material/components/cards/MultiActionAreaCard.tsx
+++ b/docs/data/material/components/cards/demos/multi-action-area/MultiActionAreaCard.tsx
@@ -8,6 +8,7 @@ import CardActions from '@mui/material/CardActions';
 
 export default function MultiActionAreaCard() {
   return (
+    // @focus-start
     
       
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/cards/demos/multi-action-area/index.ts b/docs/data/material/components/cards/demos/multi-action-area/index.ts
new file mode 100644
index 00000000000000..274aed871940cb
--- /dev/null
+++ b/docs/data/material/components/cards/demos/multi-action-area/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultiActionAreaCard from './MultiActionAreaCard';
+
+export default createDemo(import.meta.url, MultiActionAreaCard);
diff --git a/docs/data/material/components/cards/OutlinedCard.tsx b/docs/data/material/components/cards/demos/outlined/OutlinedCard.tsx
similarity index 95%
rename from docs/data/material/components/cards/OutlinedCard.tsx
rename to docs/data/material/components/cards/demos/outlined/OutlinedCard.tsx
index fb5798a01655c9..8e83b195553acd 100644
--- a/docs/data/material/components/cards/OutlinedCard.tsx
+++ b/docs/data/material/components/cards/demos/outlined/OutlinedCard.tsx
@@ -40,7 +40,9 @@ const card = (
 export default function OutlinedCard() {
   return (
     
+      {/* @focus-start */}
       {card}
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/cards/demos/outlined/index.ts b/docs/data/material/components/cards/demos/outlined/index.ts
new file mode 100644
index 00000000000000..39d54ef14270a6
--- /dev/null
+++ b/docs/data/material/components/cards/demos/outlined/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OutlinedCard from './OutlinedCard';
+
+export default createDemo(import.meta.url, OutlinedCard);
diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/demos/recipe-review/RecipeReviewCard.tsx
similarity index 99%
rename from docs/data/material/components/cards/RecipeReviewCard.tsx
rename to docs/data/material/components/cards/demos/recipe-review/RecipeReviewCard.tsx
index 155ce4a2f94ad7..6c0a0376c3a383 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.tsx
+++ b/docs/data/material/components/cards/demos/recipe-review/RecipeReviewCard.tsx
@@ -44,6 +44,7 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
 }));
 
 export default function RecipeReviewCard() {
+  // @focus-start @padding 1
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -126,4 +127,5 @@ export default function RecipeReviewCard() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/cards/demos/recipe-review/index.ts b/docs/data/material/components/cards/demos/recipe-review/index.ts
new file mode 100644
index 00000000000000..0daafed0a32afb
--- /dev/null
+++ b/docs/data/material/components/cards/demos/recipe-review/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RecipeReviewCard from './RecipeReviewCard';
+
+export default createDemo(import.meta.url, RecipeReviewCard);
diff --git a/docs/data/material/components/cards/SelectActionCard.tsx b/docs/data/material/components/cards/demos/select-action/SelectActionCard.tsx
similarity index 100%
rename from docs/data/material/components/cards/SelectActionCard.tsx
rename to docs/data/material/components/cards/demos/select-action/SelectActionCard.tsx
diff --git a/docs/data/material/components/cards/demos/select-action/index.ts b/docs/data/material/components/cards/demos/select-action/index.ts
new file mode 100644
index 00000000000000..56dd874d2eacc8
--- /dev/null
+++ b/docs/data/material/components/cards/demos/select-action/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectActionCard from './SelectActionCard';
+
+export default createDemo(import.meta.url, SelectActionCard);
diff --git a/docs/data/material/components/checkboxes/CheckboxLabels.js b/docs/data/material/components/checkboxes/CheckboxLabels.js
deleted file mode 100644
index a21a3d1ab7e9a3..00000000000000
--- a/docs/data/material/components/checkboxes/CheckboxLabels.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-
-export default function CheckboxLabels() {
-  return (
-    
-      } label="Label" />
-      } label="Required" />
-      } label="Disabled" />
-    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview b/docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview
deleted file mode 100644
index e64bb06b581301..00000000000000
--- a/docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  } label="Label" />
-  } label="Required" />
-  } label="Disabled" />
-
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/Checkboxes.js b/docs/data/material/components/checkboxes/Checkboxes.js
deleted file mode 100644
index 358730db06c516..00000000000000
--- a/docs/data/material/components/checkboxes/Checkboxes.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Checkbox from '@mui/material/Checkbox';
-
-const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
-
-export default function Checkboxes() {
-  return (
-    
    
-      
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/Checkboxes.tsx.preview b/docs/data/material/components/checkboxes/Checkboxes.tsx.preview
deleted file mode 100644
index f18a2a018915b8..00000000000000
--- a/docs/data/material/components/checkboxes/Checkboxes.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/CheckboxesGroup.js b/docs/data/material/components/checkboxes/CheckboxesGroup.js
deleted file mode 100644
index 6c4b220ae09480..00000000000000
--- a/docs/data/material/components/checkboxes/CheckboxesGroup.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Checkbox from '@mui/material/Checkbox';
-
-export default function CheckboxesGroup() {
-  const [state, setState] = React.useState({
-    gilad: true,
-    jason: false,
-    antoine: false,
-  });
-
-  const handleChange = (event) => {
-    setState({
-      ...state,
-      [event.target.name]: event.target.checked,
-    });
-  };
-
-  const { gilad, jason, antoine } = state;
-  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
-
-  return (
-    
-      
-        Assign responsibility
-        
-          
-            }
-            label="Gilad Gray"
-          />
-          
-            }
-            label="Jason Killian"
-          />
-          
-            }
-            label="Antoine Llorca"
-          />
-        
-        Be careful
-      
-      
-        Pick two
-        
-          
-            }
-            label="Gilad Gray"
-          />
-          
-            }
-            label="Jason Killian"
-          />
-          
-            }
-            label="Antoine Llorca"
-          />
-        
-        You can display an error
-      
-    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/ColorCheckboxes.js b/docs/data/material/components/checkboxes/ColorCheckboxes.js
deleted file mode 100644
index 7b312736d1bc75..00000000000000
--- a/docs/data/material/components/checkboxes/ColorCheckboxes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { pink } from '@mui/material/colors';
-import Checkbox from '@mui/material/Checkbox';
-
-const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
-
-export default function ColorCheckboxes() {
-  return (
-    
    
-      
-      
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview b/docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview
deleted file mode 100644
index c8847ddeb726bb..00000000000000
--- a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/ControlledCheckbox.js b/docs/data/material/components/checkboxes/ControlledCheckbox.js
deleted file mode 100644
index b05c03ad39f572..00000000000000
--- a/docs/data/material/components/checkboxes/ControlledCheckbox.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import Checkbox from '@mui/material/Checkbox';
-
-export default function ControlledCheckbox() {
-  const [checked, setChecked] = React.useState(true);
-
-  const handleChange = (event) => {
-    setChecked(event.target.checked);
-  };
-
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview b/docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview
deleted file mode 100644
index 5119829a1bce91..00000000000000
--- a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.js b/docs/data/material/components/checkboxes/CustomizedCheckbox.js
deleted file mode 100644
index c811b9ade9ff50..00000000000000
--- a/docs/data/material/components/checkboxes/CustomizedCheckbox.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Checkbox from '@mui/material/Checkbox';
-
-const BpIcon = styled('span')(({ theme }) => ({
-  borderRadius: 3,
-  width: 16,
-  height: 16,
-  boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-  backgroundColor: '#f5f8fa',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-  '.Mui-focusVisible &': {
-    outline: '2px auto rgba(19,124,189,.6)',
-    outlineOffset: 2,
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#ebf1f5',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#30404d',
-    }),
-  },
-  'input:disabled ~ &': {
-    boxShadow: 'none',
-    background: 'rgba(206,217,224,.5)',
-    ...theme.applyStyles('dark', {
-      background: 'rgba(57,75,89,.5)',
-    }),
-  },
-  ...theme.applyStyles('dark', {
-    boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)',
-    backgroundColor: '#394b59',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))',
-  }),
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#137cbd',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&::before': {
-    display: 'block',
-    width: 16,
-    height: 16,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#106ba3',
-  },
-});
-
-// Inspired by blueprintjs
-function BpCheckbox(props) {
-  return (
-    }
-      icon={}
-      slotProps={{ input: { 'aria-label': 'Checkbox demo' } }}
-      {...props}
-    />
-  );
-}
-
-export default function CustomizedCheckbox() {
-  return (
-    
    
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview b/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview
deleted file mode 100644
index d35225d29db4b5..00000000000000
--- a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/FormControlLabelPosition.js b/docs/data/material/components/checkboxes/FormControlLabelPosition.js
deleted file mode 100644
index a3d974f207a801..00000000000000
--- a/docs/data/material/components/checkboxes/FormControlLabelPosition.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Checkbox from '@mui/material/Checkbox';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function FormControlLabelPosition() {
-  return (
-    
-      Label placement
-      
-        }
-          label="Bottom"
-          labelPlacement="bottom"
-        />
-        }
-          label="End"
-          labelPlacement="end"
-        />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/IconCheckboxes.js b/docs/data/material/components/checkboxes/IconCheckboxes.js
deleted file mode 100644
index 884d2b99d7b260..00000000000000
--- a/docs/data/material/components/checkboxes/IconCheckboxes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Checkbox from '@mui/material/Checkbox';
-import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
-import Favorite from '@mui/icons-material/Favorite';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
-
-const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
-
-export default function IconCheckboxes() {
-  return (
-    
    
-      } checkedIcon={} />
-      }
-        checkedIcon={}
-      />
-    
    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview b/docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview
deleted file mode 100644
index aca9faefc7c948..00000000000000
--- a/docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-} checkedIcon={} />
-}
-  checkedIcon={}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/IndeterminateCheckbox.js b/docs/data/material/components/checkboxes/IndeterminateCheckbox.js
deleted file mode 100644
index 3ada61d101d47f..00000000000000
--- a/docs/data/material/components/checkboxes/IndeterminateCheckbox.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-export default function IndeterminateCheckbox() {
-  const [checked, setChecked] = React.useState([true, false]);
-
-  const handleChange1 = (event) => {
-    setChecked([event.target.checked, event.target.checked]);
-  };
-
-  const handleChange2 = (event) => {
-    setChecked([event.target.checked, checked[1]]);
-  };
-
-  const handleChange3 = (event) => {
-    setChecked([checked[0], event.target.checked]);
-  };
-
-  const children = (
-    
-      }
-      />
-      }
-      />
-    
-  );
-
-  return (
-    
    
-      
-        }
-      />
-      {children}
-    
    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview b/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview
deleted file mode 100644
index 7f0397629cc7bb..00000000000000
--- a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-  }
-/>
-{children}
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/SizeCheckboxes.js b/docs/data/material/components/checkboxes/SizeCheckboxes.js
deleted file mode 100644
index 32bd2dd398c767..00000000000000
--- a/docs/data/material/components/checkboxes/SizeCheckboxes.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Checkbox from '@mui/material/Checkbox';
-
-const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
-
-export default function SizeCheckboxes() {
-  return (
-    
    
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview b/docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview
deleted file mode 100644
index c4bb172da180e1..00000000000000
--- a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/checkboxes/checkboxes.md b/docs/data/material/components/checkboxes/checkboxes.md
index 10d7f2042afaca..5ca978f0d9972d 100644
--- a/docs/data/material/components/checkboxes/checkboxes.md
+++ b/docs/data/material/components/checkboxes/checkboxes.md
@@ -22,33 +22,33 @@ If you have a single option, avoid using a checkbox and use an on/off switch ins
 
 ## Basic checkboxes
 
-{{"demo": "Checkboxes.js"}}
+{{"component": "../data/material/components/checkboxes/demos/checkboxes/index.ts"}}
 
 ## Label
 
 You can provide a label to the `Checkbox` thanks to the `FormControlLabel` component.
 
-{{"demo": "CheckboxLabels.js"}}
+{{"component": "../data/material/components/checkboxes/demos/labels/index.ts"}}
 
 ## Size
 
 Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes.
 
-{{"demo": "SizeCheckboxes.js"}}
+{{"component": "../data/material/components/checkboxes/demos/size/index.ts"}}
 
 ## Color
 
-{{"demo": "ColorCheckboxes.js"}}
+{{"component": "../data/material/components/checkboxes/demos/color/index.ts"}}
 
 ## Icon
 
-{{"demo": "IconCheckboxes.js"}}
+{{"component": "../data/material/components/checkboxes/demos/icon/index.ts"}}
 
 ## Controlled
 
 You can control the checkbox with the `checked` and `onChange` props:
 
-{{"demo": "ControlledCheckbox.js"}}
+{{"component": "../data/material/components/checkboxes/demos/controlled/index.ts"}}
 
 ## Indeterminate
 
@@ -58,7 +58,7 @@ Visually, there are **three** states a checkbox can be in: checked, unchecked, o
 
 You can change the indeterminate icon using the `indeterminateIcon` prop.
 
-{{"demo": "IndeterminateCheckbox.js"}}
+{{"component": "../data/material/components/checkboxes/demos/indeterminate/index.ts"}}
 
 :::warning
 When indeterminate is set, the value of the `checked` prop only impacts the form submitted values.
@@ -69,20 +69,20 @@ It has no accessibility or UX implications.
 
 `FormGroup` is a helpful wrapper used to group selection control components.
 
-{{"demo": "CheckboxesGroup.js"}}
+{{"component": "../data/material/components/checkboxes/demos/group/index.ts"}}
 
 ## Label placement
 
 You can change the placement of the label:
 
-{{"demo": "FormControlLabelPosition.js"}}
+{{"component": "../data/material/components/checkboxes/demos/form-control-label-position/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedCheckbox.js"}}
+{{"component": "../data/material/components/checkboxes/demos/customized/index.ts"}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/checkbox).
 
diff --git a/docs/data/material/components/checkboxes/Checkboxes.tsx b/docs/data/material/components/checkboxes/demos/checkboxes/Checkboxes.tsx
similarity index 87%
rename from docs/data/material/components/checkboxes/Checkboxes.tsx
rename to docs/data/material/components/checkboxes/demos/checkboxes/Checkboxes.tsx
index 358730db06c516..74eab596c24fb0 100644
--- a/docs/data/material/components/checkboxes/Checkboxes.tsx
+++ b/docs/data/material/components/checkboxes/demos/checkboxes/Checkboxes.tsx
@@ -5,10 +5,12 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
 export default function Checkboxes() {
   return (
     
    
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/checkboxes/index.ts b/docs/data/material/components/checkboxes/demos/checkboxes/index.ts
new file mode 100644
index 00000000000000..6fe0db78ad4328
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/checkboxes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Checkboxes from './Checkboxes';
+
+export default createDemo(import.meta.url, Checkboxes);
diff --git a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx b/docs/data/material/components/checkboxes/demos/color/ColorCheckboxes.tsx
similarity index 92%
rename from docs/data/material/components/checkboxes/ColorCheckboxes.tsx
rename to docs/data/material/components/checkboxes/demos/color/ColorCheckboxes.tsx
index 7b312736d1bc75..487ac823463b80 100644
--- a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx
+++ b/docs/data/material/components/checkboxes/demos/color/ColorCheckboxes.tsx
@@ -6,6 +6,7 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
 export default function ColorCheckboxes() {
   return (
     
    
+      {/* @focus-start */}
       
       
       
@@ -20,6 +21,7 @@ export default function ColorCheckboxes() {
           },
         }}
       />
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/color/index.ts b/docs/data/material/components/checkboxes/demos/color/index.ts
new file mode 100644
index 00000000000000..b92c50f9e85a89
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorCheckboxes from './ColorCheckboxes';
+
+export default createDemo(import.meta.url, ColorCheckboxes);
diff --git a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx b/docs/data/material/components/checkboxes/demos/controlled/ControlledCheckbox.tsx
similarity index 91%
rename from docs/data/material/components/checkboxes/ControlledCheckbox.tsx
rename to docs/data/material/components/checkboxes/demos/controlled/ControlledCheckbox.tsx
index 4cea1cd510dc5b..b3643d349cb782 100644
--- a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx
+++ b/docs/data/material/components/checkboxes/demos/controlled/ControlledCheckbox.tsx
@@ -8,6 +8,7 @@ export default function ControlledCheckbox() {
     setChecked(event.target.checked);
   };
 
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/checkboxes/demos/controlled/index.ts b/docs/data/material/components/checkboxes/demos/controlled/index.ts
new file mode 100644
index 00000000000000..5a46cccb770c3e
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/controlled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledCheckbox from './ControlledCheckbox';
+
+export default createDemo(import.meta.url, ControlledCheckbox);
diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx b/docs/data/material/components/checkboxes/demos/customized/CustomizedCheckbox.tsx
similarity index 97%
rename from docs/data/material/components/checkboxes/CustomizedCheckbox.tsx
rename to docs/data/material/components/checkboxes/demos/customized/CustomizedCheckbox.tsx
index 8d579371af416c..9d3e3ed0946ee2 100644
--- a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx
+++ b/docs/data/material/components/checkboxes/demos/customized/CustomizedCheckbox.tsx
@@ -68,9 +68,11 @@ function BpCheckbox(props: CheckboxProps) {
 export default function CustomizedCheckbox() {
   return (
     
    
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/customized/index.ts b/docs/data/material/components/checkboxes/demos/customized/index.ts
new file mode 100644
index 00000000000000..6fc66629304f50
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedCheckbox from './CustomizedCheckbox';
+
+export default createDemo(import.meta.url, CustomizedCheckbox);
diff --git a/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx b/docs/data/material/components/checkboxes/demos/form-control-label-position/FormControlLabelPosition.tsx
similarity index 95%
rename from docs/data/material/components/checkboxes/FormControlLabelPosition.tsx
rename to docs/data/material/components/checkboxes/demos/form-control-label-position/FormControlLabelPosition.tsx
index a3d974f207a801..dd54a0b7367f0f 100644
--- a/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx
+++ b/docs/data/material/components/checkboxes/demos/form-control-label-position/FormControlLabelPosition.tsx
@@ -6,6 +6,7 @@ import FormLabel from '@mui/material/FormLabel';
 
 export default function FormControlLabelPosition() {
   return (
+    // @focus-start
     
       Label placement
       
@@ -23,5 +24,6 @@ export default function FormControlLabelPosition() {
         />
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts b/docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts
new file mode 100644
index 00000000000000..756043e786b03f
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FormControlLabelPosition from './FormControlLabelPosition';
+
+export default createDemo(import.meta.url, FormControlLabelPosition);
diff --git a/docs/data/material/components/checkboxes/CheckboxesGroup.tsx b/docs/data/material/components/checkboxes/demos/group/CheckboxesGroup.tsx
similarity index 98%
rename from docs/data/material/components/checkboxes/CheckboxesGroup.tsx
rename to docs/data/material/components/checkboxes/demos/group/CheckboxesGroup.tsx
index ed6240a9606a74..5237f980408889 100644
--- a/docs/data/material/components/checkboxes/CheckboxesGroup.tsx
+++ b/docs/data/material/components/checkboxes/demos/group/CheckboxesGroup.tsx
@@ -8,6 +8,7 @@ import FormHelperText from '@mui/material/FormHelperText';
 import Checkbox from '@mui/material/Checkbox';
 
 export default function CheckboxesGroup() {
+  // @focus-start @padding 1
   const [state, setState] = React.useState({
     gilad: true,
     jason: false,
@@ -82,4 +83,5 @@ export default function CheckboxesGroup() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/checkboxes/demos/group/index.ts b/docs/data/material/components/checkboxes/demos/group/index.ts
new file mode 100644
index 00000000000000..b18d74358e5699
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CheckboxesGroup from './CheckboxesGroup';
+
+export default createDemo(import.meta.url, CheckboxesGroup);
diff --git a/docs/data/material/components/checkboxes/IconCheckboxes.tsx b/docs/data/material/components/checkboxes/demos/icon/IconCheckboxes.tsx
similarity index 92%
rename from docs/data/material/components/checkboxes/IconCheckboxes.tsx
rename to docs/data/material/components/checkboxes/demos/icon/IconCheckboxes.tsx
index 884d2b99d7b260..e95c74cc6f1625 100644
--- a/docs/data/material/components/checkboxes/IconCheckboxes.tsx
+++ b/docs/data/material/components/checkboxes/demos/icon/IconCheckboxes.tsx
@@ -9,12 +9,14 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
 export default function IconCheckboxes() {
   return (
     
    
+      {/* @focus-start */}
       } checkedIcon={} />
       }
         checkedIcon={}
       />
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/icon/index.ts b/docs/data/material/components/checkboxes/demos/icon/index.ts
new file mode 100644
index 00000000000000..7e42ecf39b0a3b
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconCheckboxes from './IconCheckboxes';
+
+export default createDemo(import.meta.url, IconCheckboxes);
diff --git a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx b/docs/data/material/components/checkboxes/demos/indeterminate/IndeterminateCheckbox.tsx
similarity index 96%
rename from docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx
rename to docs/data/material/components/checkboxes/demos/indeterminate/IndeterminateCheckbox.tsx
index b431061da69969..1472f82184bc98 100644
--- a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx
+++ b/docs/data/material/components/checkboxes/demos/indeterminate/IndeterminateCheckbox.tsx
@@ -33,6 +33,7 @@ export default function IndeterminateCheckbox() {
 
   return (
     
    
+      {/* @focus-start */}
       
       {children}
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/indeterminate/index.ts b/docs/data/material/components/checkboxes/demos/indeterminate/index.ts
new file mode 100644
index 00000000000000..423a5639a0443b
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/indeterminate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IndeterminateCheckbox from './IndeterminateCheckbox';
+
+export default createDemo(import.meta.url, IndeterminateCheckbox);
diff --git a/docs/data/material/components/checkboxes/CheckboxLabels.tsx b/docs/data/material/components/checkboxes/demos/labels/CheckboxLabels.tsx
similarity index 91%
rename from docs/data/material/components/checkboxes/CheckboxLabels.tsx
rename to docs/data/material/components/checkboxes/demos/labels/CheckboxLabels.tsx
index a21a3d1ab7e9a3..f36c531870ed98 100644
--- a/docs/data/material/components/checkboxes/CheckboxLabels.tsx
+++ b/docs/data/material/components/checkboxes/demos/labels/CheckboxLabels.tsx
@@ -3,6 +3,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 
 export default function CheckboxLabels() {
+  // @focus-start @padding 1
   return (
     
       } label="Label" />
@@ -10,4 +11,5 @@ export default function CheckboxLabels() {
       } label="Disabled" />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/checkboxes/demos/labels/index.ts b/docs/data/material/components/checkboxes/demos/labels/index.ts
new file mode 100644
index 00000000000000..c776624bc0768a
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/labels/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CheckboxLabels from './CheckboxLabels';
+
+export default createDemo(import.meta.url, CheckboxLabels);
diff --git a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx b/docs/data/material/components/checkboxes/demos/size/SizeCheckboxes.tsx
similarity index 89%
rename from docs/data/material/components/checkboxes/SizeCheckboxes.tsx
rename to docs/data/material/components/checkboxes/demos/size/SizeCheckboxes.tsx
index 32bd2dd398c767..2dd3b98d8d6157 100644
--- a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx
+++ b/docs/data/material/components/checkboxes/demos/size/SizeCheckboxes.tsx
@@ -5,6 +5,7 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };
 export default function SizeCheckboxes() {
   return (
     
    
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/checkboxes/demos/size/index.ts b/docs/data/material/components/checkboxes/demos/size/index.ts
new file mode 100644
index 00000000000000..b3b49c305c2823
--- /dev/null
+++ b/docs/data/material/components/checkboxes/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SizeCheckboxes from './SizeCheckboxes';
+
+export default createDemo(import.meta.url, SizeCheckboxes);
diff --git a/docs/data/material/components/chips/AvatarChips.js b/docs/data/material/components/chips/AvatarChips.js
deleted file mode 100644
index 2a8e585ba484e5..00000000000000
--- a/docs/data/material/components/chips/AvatarChips.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function AvatarChips() {
-  return (
-    
-      M} label="Avatar" />
-      }
-        label="Avatar"
-        variant="outlined"
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/chips/AvatarChips.tsx.preview b/docs/data/material/components/chips/AvatarChips.tsx.preview
deleted file mode 100644
index 23fb3c626e7538..00000000000000
--- a/docs/data/material/components/chips/AvatarChips.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-M} label="Avatar" />
-}
-  label="Avatar"
-  variant="outlined"
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/chips/BasicChips.js b/docs/data/material/components/chips/BasicChips.js
deleted file mode 100644
index d6721ac1787f96..00000000000000
--- a/docs/data/material/components/chips/BasicChips.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function BasicChips() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/BasicChips.tsx.preview b/docs/data/material/components/chips/BasicChips.tsx.preview
deleted file mode 100644
index 6aa80b6b44274c..00000000000000
--- a/docs/data/material/components/chips/BasicChips.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/ChipsArray.js b/docs/data/material/components/chips/ChipsArray.js
deleted file mode 100644
index 8accf7d5a8429f..00000000000000
--- a/docs/data/material/components/chips/ChipsArray.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Chip from '@mui/material/Chip';
-import Paper from '@mui/material/Paper';
-import TagFacesIcon from '@mui/icons-material/TagFaces';
-
-const ListItem = styled('li')(({ theme }) => ({
-  margin: theme.spacing(0.5),
-}));
-
-export default function ChipsArray() {
-  const [chipData, setChipData] = React.useState([
-    { key: 0, label: 'Angular' },
-    { key: 1, label: 'jQuery' },
-    { key: 2, label: 'Polymer' },
-    { key: 3, label: 'React' },
-    { key: 4, label: 'Vue.js' },
-  ]);
-
-  const handleDelete = (chipToDelete) => () => {
-    setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
-  };
-
-  return (
-    
-      {chipData.map((data) => {
-        let icon;
-
-        if (data.label === 'React') {
-          icon = ;
-        }
-
-        return (
-          
-            
-          
-        );
-      })}
-    
-  );
-}
diff --git a/docs/data/material/components/chips/ClickableAndDeletableChips.js b/docs/data/material/components/chips/ClickableAndDeletableChips.js
deleted file mode 100644
index 41985d055fb793..00000000000000
--- a/docs/data/material/components/chips/ClickableAndDeletableChips.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ClickableAndDeletableChips() {
-  const handleClick = () => {
-    console.info('You clicked the Chip.');
-  };
-
-  const handleDelete = () => {
-    console.info('You clicked the delete icon.');
-  };
-
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview b/docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview
deleted file mode 100644
index 8cdc03cd9125e2..00000000000000
--- a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/ClickableChips.js b/docs/data/material/components/chips/ClickableChips.js
deleted file mode 100644
index b1c7fc991928d5..00000000000000
--- a/docs/data/material/components/chips/ClickableChips.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ClickableChips() {
-  const handleClick = () => {
-    console.info('You clicked the Chip.');
-  };
-
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/ClickableChips.tsx.preview b/docs/data/material/components/chips/ClickableChips.tsx.preview
deleted file mode 100644
index e1e68e8edae4d7..00000000000000
--- a/docs/data/material/components/chips/ClickableChips.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/ClickableLinkChips.js b/docs/data/material/components/chips/ClickableLinkChips.js
deleted file mode 100644
index 2e28cd0745f611..00000000000000
--- a/docs/data/material/components/chips/ClickableLinkChips.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ClickableLinkChips() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/ClickableLinkChips.tsx.preview b/docs/data/material/components/chips/ClickableLinkChips.tsx.preview
deleted file mode 100644
index 929b6f99b224e3..00000000000000
--- a/docs/data/material/components/chips/ClickableLinkChips.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/ColorChips.js b/docs/data/material/components/chips/ColorChips.js
deleted file mode 100644
index 43b81a63988835..00000000000000
--- a/docs/data/material/components/chips/ColorChips.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ColorChips() {
-  return (
-    
-      
-        
-        
-      
-      
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/ColorChips.tsx.preview b/docs/data/material/components/chips/ColorChips.tsx.preview
deleted file mode 100644
index 46ba56daf805f8..00000000000000
--- a/docs/data/material/components/chips/ColorChips.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-  
-
-
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/CustomDeleteIconChips.js b/docs/data/material/components/chips/CustomDeleteIconChips.js
deleted file mode 100644
index c148735d0b5b30..00000000000000
--- a/docs/data/material/components/chips/CustomDeleteIconChips.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import DoneIcon from '@mui/icons-material/Done';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-export default function CustomDeleteIconChips() {
-  const handleClick = () => {
-    console.info('You clicked the Chip.');
-  };
-
-  const handleDelete = () => {
-    console.info('You clicked the delete icon.');
-  };
-
-  return (
-    
-      }
-      />
-      }
-        variant="outlined"
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview b/docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview
deleted file mode 100644
index 0aa814842a6f82..00000000000000
--- a/docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-}
-/>
-}
-  variant="outlined"
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/chips/DeletableChips.js b/docs/data/material/components/chips/DeletableChips.js
deleted file mode 100644
index 5b88d350c3a967..00000000000000
--- a/docs/data/material/components/chips/DeletableChips.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function DeletableChips() {
-  const handleDelete = () => {
-    console.info('You clicked the delete icon.');
-  };
-
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/DeletableChips.tsx.preview b/docs/data/material/components/chips/DeletableChips.tsx.preview
deleted file mode 100644
index 5cdedd6b39ecff..00000000000000
--- a/docs/data/material/components/chips/DeletableChips.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/IconChips.js b/docs/data/material/components/chips/IconChips.js
deleted file mode 100644
index 9fe5e6a1ac9b25..00000000000000
--- a/docs/data/material/components/chips/IconChips.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import FaceIcon from '@mui/icons-material/Face';
-
-export default function IconChips() {
-  return (
-    
-      } label="With Icon" />
-      } label="With Icon" variant="outlined" />
-    
-  );
-}
diff --git a/docs/data/material/components/chips/IconChips.tsx.preview b/docs/data/material/components/chips/IconChips.tsx.preview
deleted file mode 100644
index a0f528c3e8e765..00000000000000
--- a/docs/data/material/components/chips/IconChips.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-} label="With Icon" />
-} label="With Icon" variant="outlined" />
\ No newline at end of file
diff --git a/docs/data/material/components/chips/MultilineChips.js b/docs/data/material/components/chips/MultilineChips.js
deleted file mode 100644
index c7425acc1a1e16..00000000000000
--- a/docs/data/material/components/chips/MultilineChips.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Box from '@mui/material/Box';
-
-export default function MultilineChips() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/MultilineChips.tsx.preview b/docs/data/material/components/chips/MultilineChips.tsx.preview
deleted file mode 100644
index 45f16da37ca0df..00000000000000
--- a/docs/data/material/components/chips/MultilineChips.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/SizesChips.js b/docs/data/material/components/chips/SizesChips.js
deleted file mode 100644
index a98030b591886e..00000000000000
--- a/docs/data/material/components/chips/SizesChips.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function SizesChips() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/chips/SizesChips.tsx.preview b/docs/data/material/components/chips/SizesChips.tsx.preview
deleted file mode 100644
index 8870572168af8c..00000000000000
--- a/docs/data/material/components/chips/SizesChips.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md
index e9e03c284b2585..835de91bf53309 100644
--- a/docs/data/material/components/chips/chips.md
+++ b/docs/data/material/components/chips/chips.md
@@ -23,7 +23,7 @@ not shown in context.
 
 The `Chip` component supports outlined and filled styling.
 
-{{"demo": "BasicChips.js"}}
+{{"component": "../data/material/components/chips/demos/basic/index.ts"}}
 
 ## Chip actions
 
@@ -34,23 +34,23 @@ You can use the following actions.
 
 ### Clickable
 
-{{"demo": "ClickableChips.js"}}
+{{"component": "../data/material/components/chips/demos/clickable/index.ts"}}
 
 ### Deletable
 
-{{"demo": "DeletableChips.js"}}
+{{"component": "../data/material/components/chips/demos/deletable/index.ts"}}
 
 ### Clickable and deletable
 
-{{"demo": "ClickableAndDeletableChips.js"}}
+{{"component": "../data/material/components/chips/demos/clickable-and-deletable/index.ts"}}
 
 ### Clickable link
 
-{{"demo": "ClickableLinkChips.js"}}
+{{"component": "../data/material/components/chips/demos/clickable-link/index.ts"}}
 
 ### Custom delete icon
 
-{{"demo": "CustomDeleteIconChips.js"}}
+{{"component": "../data/material/components/chips/demos/custom-delete-icon/index.ts"}}
 
 ## Chip adornments
 
@@ -60,30 +60,30 @@ Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon.
 
 ### Avatar chip
 
-{{"demo": "AvatarChips.js"}}
+{{"component": "../data/material/components/chips/demos/avatar/index.ts"}}
 
 ### Icon chip
 
-{{"demo": "IconChips.js"}}
+{{"component": "../data/material/components/chips/demos/icon/index.ts"}}
 
 ## Color chip
 
 You can use the `color` prop to define a color from theme palette.
 
-{{"demo": "ColorChips.js"}}
+{{"component": "../data/material/components/chips/demos/color/index.ts"}}
 
 ## Sizes chip
 
 You can use the `size` prop to define a small Chip.
 
-{{"demo": "SizesChips.js"}}
+{{"component": "../data/material/components/chips/demos/sizes/index.ts"}}
 
 ## Multiline chip
 
 By default, Chips displays labels only in a single line.
 To have them support multiline content, use the `sx` prop to add `height:auto` to the Chip component, and `whiteSpace: normal` to the `label` styles.
 
-{{"demo": "MultilineChips.js"}}
+{{"component": "../data/material/components/chips/demos/multiline/index.ts"}}
 
 ## Chip array
 
@@ -92,11 +92,11 @@ Deleting a chip removes it from the array. Note that since no
 `onClick` prop is defined, the `Chip` can be focused, but does not
 gain depth while clicked or touched.
 
-{{"demo": "ChipsArray.js"}}
+{{"component": "../data/material/components/chips/demos/array/index.ts"}}
 
 ## Chip playground
 
-{{"demo": "ChipsPlayground.js", "hideToolbar": true}}
+{{"component": "../data/material/components/chips/demos/playground/index.ts", "hideToolbar": true}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/chips/ChipsArray.tsx b/docs/data/material/components/chips/demos/array/ChipsArray.tsx
similarity index 96%
rename from docs/data/material/components/chips/ChipsArray.tsx
rename to docs/data/material/components/chips/demos/array/ChipsArray.tsx
index 4c58adeaaf0821..a78d4ac4664add 100644
--- a/docs/data/material/components/chips/ChipsArray.tsx
+++ b/docs/data/material/components/chips/demos/array/ChipsArray.tsx
@@ -14,6 +14,7 @@ const ListItem = styled('li')(({ theme }) => ({
 }));
 
 export default function ChipsArray() {
+  // @focus-start @padding 1
   const [chipData, setChipData] = React.useState([
     { key: 0, label: 'Angular' },
     { key: 1, label: 'jQuery' },
@@ -57,4 +58,5 @@ export default function ChipsArray() {
       })}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/chips/demos/array/index.ts b/docs/data/material/components/chips/demos/array/index.ts
new file mode 100644
index 00000000000000..86c02cc7ae61f6
--- /dev/null
+++ b/docs/data/material/components/chips/demos/array/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChipsArray from './ChipsArray';
+
+export default createDemo(import.meta.url, ChipsArray);
diff --git a/docs/data/material/components/chips/AvatarChips.tsx b/docs/data/material/components/chips/demos/avatar/AvatarChips.tsx
similarity index 89%
rename from docs/data/material/components/chips/AvatarChips.tsx
rename to docs/data/material/components/chips/demos/avatar/AvatarChips.tsx
index 2a8e585ba484e5..c4cd72d6cc0848 100644
--- a/docs/data/material/components/chips/AvatarChips.tsx
+++ b/docs/data/material/components/chips/demos/avatar/AvatarChips.tsx
@@ -5,12 +5,14 @@ import Stack from '@mui/material/Stack';
 export default function AvatarChips() {
   return (
     
+      {/* @focus-start */}
       M} label="Avatar" />
       }
         label="Avatar"
         variant="outlined"
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/avatar/index.ts b/docs/data/material/components/chips/demos/avatar/index.ts
new file mode 100644
index 00000000000000..0d66211b33b300
--- /dev/null
+++ b/docs/data/material/components/chips/demos/avatar/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AvatarChips from './AvatarChips';
+
+export default createDemo(import.meta.url, AvatarChips);
diff --git a/docs/data/material/components/chips/BasicChips.tsx b/docs/data/material/components/chips/demos/basic/BasicChips.tsx
similarity index 84%
rename from docs/data/material/components/chips/BasicChips.tsx
rename to docs/data/material/components/chips/demos/basic/BasicChips.tsx
index d6721ac1787f96..be91ccdb1120ce 100644
--- a/docs/data/material/components/chips/BasicChips.tsx
+++ b/docs/data/material/components/chips/demos/basic/BasicChips.tsx
@@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack';
 export default function BasicChips() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/basic/index.ts b/docs/data/material/components/chips/demos/basic/index.ts
new file mode 100644
index 00000000000000..eb6df2757355e5
--- /dev/null
+++ b/docs/data/material/components/chips/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicChips from './BasicChips';
+
+export default createDemo(import.meta.url, BasicChips);
diff --git a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx b/docs/data/material/components/chips/demos/clickable-and-deletable/ClickableAndDeletableChips.tsx
similarity index 92%
rename from docs/data/material/components/chips/ClickableAndDeletableChips.tsx
rename to docs/data/material/components/chips/demos/clickable-and-deletable/ClickableAndDeletableChips.tsx
index 41985d055fb793..e43161f34bb90e 100644
--- a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx
+++ b/docs/data/material/components/chips/demos/clickable-and-deletable/ClickableAndDeletableChips.tsx
@@ -12,6 +12,7 @@ export default function ClickableAndDeletableChips() {
 
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/clickable-and-deletable/index.ts b/docs/data/material/components/chips/demos/clickable-and-deletable/index.ts
new file mode 100644
index 00000000000000..906666544c7a3e
--- /dev/null
+++ b/docs/data/material/components/chips/demos/clickable-and-deletable/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ClickableAndDeletableChips from './ClickableAndDeletableChips';
+
+export default createDemo(import.meta.url, ClickableAndDeletableChips);
diff --git a/docs/data/material/components/chips/ClickableLinkChips.tsx b/docs/data/material/components/chips/demos/clickable-link/ClickableLinkChips.tsx
similarity index 89%
rename from docs/data/material/components/chips/ClickableLinkChips.tsx
rename to docs/data/material/components/chips/demos/clickable-link/ClickableLinkChips.tsx
index 2e28cd0745f611..7fd2b755a45eb6 100644
--- a/docs/data/material/components/chips/ClickableLinkChips.tsx
+++ b/docs/data/material/components/chips/demos/clickable-link/ClickableLinkChips.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function ClickableLinkChips() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/clickable-link/index.ts b/docs/data/material/components/chips/demos/clickable-link/index.ts
new file mode 100644
index 00000000000000..b7b39f2093ea03
--- /dev/null
+++ b/docs/data/material/components/chips/demos/clickable-link/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ClickableLinkChips from './ClickableLinkChips';
+
+export default createDemo(import.meta.url, ClickableLinkChips);
diff --git a/docs/data/material/components/chips/ClickableChips.tsx b/docs/data/material/components/chips/demos/clickable/ClickableChips.tsx
similarity index 88%
rename from docs/data/material/components/chips/ClickableChips.tsx
rename to docs/data/material/components/chips/demos/clickable/ClickableChips.tsx
index b1c7fc991928d5..c1a0b7252affd1 100644
--- a/docs/data/material/components/chips/ClickableChips.tsx
+++ b/docs/data/material/components/chips/demos/clickable/ClickableChips.tsx
@@ -8,8 +8,10 @@ export default function ClickableChips() {
 
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/clickable/index.ts b/docs/data/material/components/chips/demos/clickable/index.ts
new file mode 100644
index 00000000000000..5412ddd6bc8880
--- /dev/null
+++ b/docs/data/material/components/chips/demos/clickable/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ClickableChips from './ClickableChips';
+
+export default createDemo(import.meta.url, ClickableChips);
diff --git a/docs/data/material/components/chips/ColorChips.tsx b/docs/data/material/components/chips/demos/color/ColorChips.tsx
similarity index 91%
rename from docs/data/material/components/chips/ColorChips.tsx
rename to docs/data/material/components/chips/demos/color/ColorChips.tsx
index 43b81a63988835..44fb10d4070a1c 100644
--- a/docs/data/material/components/chips/ColorChips.tsx
+++ b/docs/data/material/components/chips/demos/color/ColorChips.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function ColorChips() {
   return (
     
+      {/* @focus-start */}
       
         
         
@@ -12,6 +13,7 @@ export default function ColorChips() {
         
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/color/index.ts b/docs/data/material/components/chips/demos/color/index.ts
new file mode 100644
index 00000000000000..7d277f1194664e
--- /dev/null
+++ b/docs/data/material/components/chips/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorChips from './ColorChips';
+
+export default createDemo(import.meta.url, ColorChips);
diff --git a/docs/data/material/components/chips/CustomDeleteIconChips.tsx b/docs/data/material/components/chips/demos/custom-delete-icon/CustomDeleteIconChips.tsx
similarity index 93%
rename from docs/data/material/components/chips/CustomDeleteIconChips.tsx
rename to docs/data/material/components/chips/demos/custom-delete-icon/CustomDeleteIconChips.tsx
index c148735d0b5b30..96a6b3ccd775ca 100644
--- a/docs/data/material/components/chips/CustomDeleteIconChips.tsx
+++ b/docs/data/material/components/chips/demos/custom-delete-icon/CustomDeleteIconChips.tsx
@@ -14,6 +14,7 @@ export default function CustomDeleteIconChips() {
 
   return (
     
+      {/* @focus-start */}
       }
         variant="outlined"
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/custom-delete-icon/index.ts b/docs/data/material/components/chips/demos/custom-delete-icon/index.ts
new file mode 100644
index 00000000000000..fab36ec0ebcb25
--- /dev/null
+++ b/docs/data/material/components/chips/demos/custom-delete-icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomDeleteIconChips from './CustomDeleteIconChips';
+
+export default createDemo(import.meta.url, CustomDeleteIconChips);
diff --git a/docs/data/material/components/chips/DeletableChips.tsx b/docs/data/material/components/chips/demos/deletable/DeletableChips.tsx
similarity index 88%
rename from docs/data/material/components/chips/DeletableChips.tsx
rename to docs/data/material/components/chips/demos/deletable/DeletableChips.tsx
index 5b88d350c3a967..d5edefd4a4a8af 100644
--- a/docs/data/material/components/chips/DeletableChips.tsx
+++ b/docs/data/material/components/chips/demos/deletable/DeletableChips.tsx
@@ -8,8 +8,10 @@ export default function DeletableChips() {
 
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/deletable/index.ts b/docs/data/material/components/chips/demos/deletable/index.ts
new file mode 100644
index 00000000000000..bb07f6c1df6067
--- /dev/null
+++ b/docs/data/material/components/chips/demos/deletable/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DeletableChips from './DeletableChips';
+
+export default createDemo(import.meta.url, DeletableChips);
diff --git a/docs/data/material/components/chips/IconChips.tsx b/docs/data/material/components/chips/demos/icon/IconChips.tsx
similarity index 87%
rename from docs/data/material/components/chips/IconChips.tsx
rename to docs/data/material/components/chips/demos/icon/IconChips.tsx
index 9fe5e6a1ac9b25..256a64daf6acfa 100644
--- a/docs/data/material/components/chips/IconChips.tsx
+++ b/docs/data/material/components/chips/demos/icon/IconChips.tsx
@@ -5,8 +5,10 @@ import FaceIcon from '@mui/icons-material/Face';
 export default function IconChips() {
   return (
     
+      {/* @focus-start */}
       } label="With Icon" />
       } label="With Icon" variant="outlined" />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/icon/index.ts b/docs/data/material/components/chips/demos/icon/index.ts
new file mode 100644
index 00000000000000..ce90acab8618f4
--- /dev/null
+++ b/docs/data/material/components/chips/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconChips from './IconChips';
+
+export default createDemo(import.meta.url, IconChips);
diff --git a/docs/data/material/components/chips/MultilineChips.tsx b/docs/data/material/components/chips/demos/multiline/MultilineChips.tsx
similarity index 88%
rename from docs/data/material/components/chips/MultilineChips.tsx
rename to docs/data/material/components/chips/demos/multiline/MultilineChips.tsx
index c7425acc1a1e16..42fa68d2299e39 100644
--- a/docs/data/material/components/chips/MultilineChips.tsx
+++ b/docs/data/material/components/chips/demos/multiline/MultilineChips.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 export default function MultilineChips() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/multiline/index.ts b/docs/data/material/components/chips/demos/multiline/index.ts
new file mode 100644
index 00000000000000..30e69f05fd4b80
--- /dev/null
+++ b/docs/data/material/components/chips/demos/multiline/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultilineChips from './MultilineChips';
+
+export default createDemo(import.meta.url, MultilineChips);
diff --git a/docs/data/material/components/chips/ChipsPlayground.js b/docs/data/material/components/chips/demos/playground/ChipsPlayground.js
similarity index 100%
rename from docs/data/material/components/chips/ChipsPlayground.js
rename to docs/data/material/components/chips/demos/playground/ChipsPlayground.js
diff --git a/docs/data/material/components/chips/demos/playground/index.ts b/docs/data/material/components/chips/demos/playground/index.ts
new file mode 100644
index 00000000000000..f3497207b0cacb
--- /dev/null
+++ b/docs/data/material/components/chips/demos/playground/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChipsPlayground from './ChipsPlayground';
+
+export default createDemo(import.meta.url, ChipsPlayground);
diff --git a/docs/data/material/components/chips/SizesChips.tsx b/docs/data/material/components/chips/demos/sizes/SizesChips.tsx
similarity index 84%
rename from docs/data/material/components/chips/SizesChips.tsx
rename to docs/data/material/components/chips/demos/sizes/SizesChips.tsx
index a98030b591886e..85744b70710e94 100644
--- a/docs/data/material/components/chips/SizesChips.tsx
+++ b/docs/data/material/components/chips/demos/sizes/SizesChips.tsx
@@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack';
 export default function SizesChips() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/chips/demos/sizes/index.ts b/docs/data/material/components/chips/demos/sizes/index.ts
new file mode 100644
index 00000000000000..e5520f87d93c7a
--- /dev/null
+++ b/docs/data/material/components/chips/demos/sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SizesChips from './SizesChips';
+
+export default createDemo(import.meta.url, SizesChips);
diff --git a/docs/data/material/components/click-away-listener/ClickAway.js b/docs/data/material/components/click-away-listener/ClickAway.js
deleted file mode 100644
index c027baf4c76698..00000000000000
--- a/docs/data/material/components/click-away-listener/ClickAway.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-
-export default function ClickAway() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen((prev) => !prev);
-  };
-
-  const handleClickAway = () => {
-    setOpen(false);
-  };
-
-  const styles = {
-    position: 'absolute',
-    top: 28,
-    right: 0,
-    left: 0,
-    zIndex: 1,
-    border: '1px solid',
-    p: 1,
-    bgcolor: 'background.paper',
-  };
-
-  return (
-    
-      
-        
-        {open ? (
-          
-            Click me, I will stay visible until you click outside.
-          
-        ) : null}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/click-away-listener/ClickAway.tsx.preview b/docs/data/material/components/click-away-listener/ClickAway.tsx.preview
deleted file mode 100644
index fc79db57923845..00000000000000
--- a/docs/data/material/components/click-away-listener/ClickAway.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-    
-    {open ? (
-      
-        Click me, I will stay visible until you click outside.
-      
-    ) : null}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/click-away-listener/LeadingClickAway.js b/docs/data/material/components/click-away-listener/LeadingClickAway.js
deleted file mode 100644
index 51c97697e55538..00000000000000
--- a/docs/data/material/components/click-away-listener/LeadingClickAway.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-
-export default function LeadingClickAway() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen((prev) => !prev);
-  };
-
-  const handleClickAway = () => {
-    setOpen(false);
-  };
-
-  const styles = {
-    position: 'absolute',
-    top: 28,
-    right: 0,
-    left: 0,
-    zIndex: 1,
-    border: '1px solid',
-    p: 1,
-    bgcolor: 'background.paper',
-  };
-
-  return (
-    
-      
-        
-        {open ? (
-          
-            Click me, I will stay visible until you click outside.
-          
-        ) : null}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview b/docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview
deleted file mode 100644
index dc02e5bc909044..00000000000000
--- a/docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-    
-    {open ? (
-      
-        Click me, I will stay visible until you click outside.
-      
-    ) : null}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/click-away-listener/PortalClickAway.js b/docs/data/material/components/click-away-listener/PortalClickAway.js
deleted file mode 100644
index 6f4d5cd63f27c0..00000000000000
--- a/docs/data/material/components/click-away-listener/PortalClickAway.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Portal from '@mui/material/Portal';
-
-export default function PortalClickAway() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen((prev) => !prev);
-  };
-
-  const handleClickAway = () => {
-    setOpen(false);
-  };
-
-  const styles = {
-    position: 'fixed',
-    width: 200,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    border: '1px solid',
-    p: 1,
-    bgcolor: 'background.paper',
-  };
-
-  return (
-    
-      
    
-        
-        {open ? (
-          
-            
-              Click me, I will stay visible until you click outside.
-            
-          
-        ) : null}
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview b/docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview
deleted file mode 100644
index 9695afd7e4ae53..00000000000000
--- a/docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
    
-    
-    {open ? (
-      
-        
-          Click me, I will stay visible until you click outside.
-        
-      
-    ) : null}
-  
    
-    
\ No newline at end of file
diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md
index 3526a78d98e256..4dfc3bb4e955ad 100644
--- a/docs/data/material/components/click-away-listener/click-away-listener.md
+++ b/docs/data/material/components/click-away-listener/click-away-listener.md
@@ -20,7 +20,7 @@ Click-Away Listener also supports the [Portal](/material-ui/react-portal/) compo
 
 The demo below shows how to hide a menu dropdown when users click anywhere else on the page:
 
-{{"demo": "ClickAway.js"}}
+{{"component": "../data/material/components/click-away-listener/demos/click-away/index.ts"}}
 
 ## Basics
 
@@ -36,7 +36,7 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 
 The following demo uses the [Portal](/material-ui/react-portal/) component to render the dropdown into a new subtree outside of the current DOM hierarchy:
 
-{{"demo": "PortalClickAway.js"}}
+{{"component": "../data/material/components/click-away-listener/demos/portal-click-away/index.ts"}}
 
 ### Listening for leading events
 
@@ -48,7 +48,7 @@ You can set the component to listen for **leading events** (the start of a click
 When the component is set to listen for leading events, interactions with the scrollbar are ignored.
 :::
 
-{{"demo": "LeadingClickAway.js"}}
+{{"component": "../data/material/components/click-away-listener/demos/leading-click-away/index.ts"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/click-away-listener/ClickAway.tsx b/docs/data/material/components/click-away-listener/demos/click-away/ClickAway.tsx
similarity index 95%
rename from docs/data/material/components/click-away-listener/ClickAway.tsx
rename to docs/data/material/components/click-away-listener/demos/click-away/ClickAway.tsx
index a32b4872d1d2ee..c6315d08372a2e 100644
--- a/docs/data/material/components/click-away-listener/ClickAway.tsx
+++ b/docs/data/material/components/click-away-listener/demos/click-away/ClickAway.tsx
@@ -25,6 +25,7 @@ export default function ClickAway() {
     bgcolor: 'background.paper',
   };
 
+  // @focus-start @padding 1
   return (
     
       
@@ -39,4 +40,5 @@ export default function ClickAway() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/click-away-listener/demos/click-away/index.ts b/docs/data/material/components/click-away-listener/demos/click-away/index.ts
new file mode 100644
index 00000000000000..0ac7f177def12c
--- /dev/null
+++ b/docs/data/material/components/click-away-listener/demos/click-away/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ClickAway from './ClickAway';
+
+export default createDemo(import.meta.url, ClickAway);
diff --git a/docs/data/material/components/click-away-listener/LeadingClickAway.tsx b/docs/data/material/components/click-away-listener/demos/leading-click-away/LeadingClickAway.tsx
similarity index 95%
rename from docs/data/material/components/click-away-listener/LeadingClickAway.tsx
rename to docs/data/material/components/click-away-listener/demos/leading-click-away/LeadingClickAway.tsx
index ca458f203b9e17..a391113e8f5732 100644
--- a/docs/data/material/components/click-away-listener/LeadingClickAway.tsx
+++ b/docs/data/material/components/click-away-listener/demos/leading-click-away/LeadingClickAway.tsx
@@ -25,6 +25,7 @@ export default function LeadingClickAway() {
     bgcolor: 'background.paper',
   };
 
+  // @focus-start @padding 1
   return (
     
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/click-away-listener/demos/leading-click-away/index.ts b/docs/data/material/components/click-away-listener/demos/leading-click-away/index.ts
new file mode 100644
index 00000000000000..8952f20defe181
--- /dev/null
+++ b/docs/data/material/components/click-away-listener/demos/leading-click-away/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LeadingClickAway from './LeadingClickAway';
+
+export default createDemo(import.meta.url, LeadingClickAway);
diff --git a/docs/data/material/components/click-away-listener/PortalClickAway.tsx b/docs/data/material/components/click-away-listener/demos/portal-click-away/PortalClickAway.tsx
similarity index 95%
rename from docs/data/material/components/click-away-listener/PortalClickAway.tsx
rename to docs/data/material/components/click-away-listener/demos/portal-click-away/PortalClickAway.tsx
index aec80d06a02dd5..b418e400a75a8d 100644
--- a/docs/data/material/components/click-away-listener/PortalClickAway.tsx
+++ b/docs/data/material/components/click-away-listener/demos/portal-click-away/PortalClickAway.tsx
@@ -26,6 +26,7 @@ export default function PortalClickAway() {
     bgcolor: 'background.paper',
   };
 
+  // @focus-start @padding 1
   return (
     
       
    
@@ -42,4 +43,5 @@ export default function PortalClickAway() {
       
    
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts b/docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts
new file mode 100644
index 00000000000000..f61cf3899a4337
--- /dev/null
+++ b/docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PortalClickAway from './PortalClickAway';
+
+export default createDemo(import.meta.url, PortalClickAway);
diff --git a/docs/data/material/components/container/FixedContainer.js b/docs/data/material/components/container/FixedContainer.js
deleted file mode 100644
index e236f436fab16d..00000000000000
--- a/docs/data/material/components/container/FixedContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-
-export default function FixedContainer() {
-  return (
-    
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/container/FixedContainer.tsx.preview b/docs/data/material/components/container/FixedContainer.tsx.preview
deleted file mode 100644
index 9260778041e81c..00000000000000
--- a/docs/data/material/components/container/FixedContainer.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/container/SimpleContainer.js b/docs/data/material/components/container/SimpleContainer.js
deleted file mode 100644
index 0d6e4419101293..00000000000000
--- a/docs/data/material/components/container/SimpleContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-
-export default function SimpleContainer() {
-  return (
-    
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/container/SimpleContainer.tsx.preview b/docs/data/material/components/container/SimpleContainer.tsx.preview
deleted file mode 100644
index 353572318add8f..00000000000000
--- a/docs/data/material/components/container/SimpleContainer.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/container/container.md b/docs/data/material/components/container/container.md
index 9fead12bdb875d..64accd83463855 100644
--- a/docs/data/material/components/container/container.md
+++ b/docs/data/material/components/container/container.md
@@ -18,7 +18,7 @@ While containers can be nested, most layouts do not require a nested container.
 
 A fluid container width is bounded by the `maxWidth` prop value.
 
-{{"demo": "SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}}
+{{"component": "../data/material/components/container/demos/simple/index.ts", "iframe": true, "defaultCodeOpen": false}}
 
 ```jsx
 
@@ -29,7 +29,7 @@ A fluid container width is bounded by the `maxWidth` prop value.
 If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the `fixed` prop.
 The max-width matches the min-width of the current breakpoint.
 
-{{"demo": "FixedContainer.js", "iframe": true, "defaultCodeOpen": false}}
+{{"component": "../data/material/components/container/demos/fixed/index.ts", "iframe": true, "defaultCodeOpen": false}}
 
 ```jsx
 
diff --git a/docs/data/material/components/container/FixedContainer.tsx b/docs/data/material/components/container/demos/fixed/FixedContainer.tsx
similarity index 89%
rename from docs/data/material/components/container/FixedContainer.tsx
rename to docs/data/material/components/container/demos/fixed/FixedContainer.tsx
index e236f436fab16d..4041b913220644 100644
--- a/docs/data/material/components/container/FixedContainer.tsx
+++ b/docs/data/material/components/container/demos/fixed/FixedContainer.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 
 export default function FixedContainer() {
+  // @focus-start @padding 1
   return (
     
       
@@ -12,4 +13,5 @@ export default function FixedContainer() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/container/demos/fixed/index.ts b/docs/data/material/components/container/demos/fixed/index.ts
new file mode 100644
index 00000000000000..1eecaafae0bc45
--- /dev/null
+++ b/docs/data/material/components/container/demos/fixed/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FixedContainer from './FixedContainer';
+
+export default createDemo(import.meta.url, FixedContainer);
diff --git a/docs/data/material/components/container/SimpleContainer.tsx b/docs/data/material/components/container/demos/simple/SimpleContainer.tsx
similarity index 90%
rename from docs/data/material/components/container/SimpleContainer.tsx
rename to docs/data/material/components/container/demos/simple/SimpleContainer.tsx
index 0d6e4419101293..31917c2c5d7dd1 100644
--- a/docs/data/material/components/container/SimpleContainer.tsx
+++ b/docs/data/material/components/container/demos/simple/SimpleContainer.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 
 export default function SimpleContainer() {
+  // @focus-start @padding 1
   return (
     
       
@@ -12,4 +13,5 @@ export default function SimpleContainer() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/container/demos/simple/index.ts b/docs/data/material/components/container/demos/simple/index.ts
new file mode 100644
index 00000000000000..c52ce72763ff62
--- /dev/null
+++ b/docs/data/material/components/container/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleContainer from './SimpleContainer';
+
+export default createDemo(import.meta.url, SimpleContainer);
diff --git a/docs/data/material/components/dialogs/AlertDialog.js b/docs/data/material/components/dialogs/AlertDialog.js
deleted file mode 100644
index 29f272a910bc0f..00000000000000
--- a/docs/data/material/components/dialogs/AlertDialog.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-
-export default function AlertDialog() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          {"Use Google's location service?"}
-        
-        
-          
-            Let Google help apps determine location. This means sending anonymous
-            location data to Google, even when no apps are running.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/AlertDialogSlide.js b/docs/data/material/components/dialogs/AlertDialogSlide.js
deleted file mode 100644
index 22e3025be11f8c..00000000000000
--- a/docs/data/material/components/dialogs/AlertDialogSlide.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Slide from '@mui/material/Slide';
-
-const Transition = React.forwardRef(function Transition(props, ref) {
-  return ;
-});
-
-export default function AlertDialogSlide() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        {"Use Google's location service?"}
-        
-          
-            Let Google help apps determine location. This means sending anonymous
-            location data to Google, even when no apps are running.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/ConfirmationDialog.js b/docs/data/material/components/dialogs/ConfirmationDialog.js
deleted file mode 100644
index cbb6efb186acab..00000000000000
--- a/docs/data/material/components/dialogs/ConfirmationDialog.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Dialog from '@mui/material/Dialog';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const options = [
-  'None',
-  'Atria',
-  'Callisto',
-  'Dione',
-  'Ganymede',
-  'Hangouts Call',
-  'Luna',
-  'Oberon',
-  'Phobos',
-  'Pyxis',
-  'Sedna',
-  'Titania',
-  'Triton',
-  'Umbriel',
-];
-
-function ConfirmationDialogRaw(props) {
-  const { onClose, value: valueProp, open, ...other } = props;
-  const [value, setValue] = React.useState(valueProp);
-  const radioGroupRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!open) {
-      setValue(valueProp);
-    }
-  }, [valueProp, open]);
-
-  const handleEntering = () => {
-    if (radioGroupRef.current != null) {
-      radioGroupRef.current.focus();
-    }
-  };
-
-  const handleCancel = () => {
-    onClose();
-  };
-
-  const handleOk = () => {
-    onClose(value);
-  };
-
-  const handleChange = (event) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    
-      Phone Ringtone
-      
-        
-          {options.map((option) => (
-            }
-              label={option}
-            />
-          ))}
-        
-      
-      
-        
-        
-      
-    
-  );
-}
-
-ConfirmationDialogRaw.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-};
-
-export default function ConfirmationDialog() {
-  const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState('Dione');
-
-  const handleClickListItem = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (newValue) => {
-    setOpen(false);
-
-    if (newValue) {
-      setValue(newValue);
-    }
-  };
-
-  return (
-    
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js
deleted file mode 100644
index 21647d0b8d2969..00000000000000
--- a/docs/data/material/components/dialogs/CookiesBanner.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react';
-import Stack from '@mui/material/Stack';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
-import CssBaseline from '@mui/material/CssBaseline';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import Paper from '@mui/material/Paper';
-import Fade from '@mui/material/Fade';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-export default function CookiesBanner() {
-  const [bannerOpen, setBannerOpen] = React.useState(true);
-
-  const closeBanner = () => {
-    setBannerOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          
-            
-          
-        
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet.
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet.
-        
-      
-      
-        
-          
-            
-              
-                
-                  This website uses cookies
-                
-                
-                  example.com relies on cookies to improve your experience.
-                
-              
-              
-                
-                
-              
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/CustomizedDialogs.js b/docs/data/material/components/dialogs/CustomizedDialogs.js
deleted file mode 100644
index b8b39100744512..00000000000000
--- a/docs/data/material/components/dialogs/CustomizedDialogs.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import Typography from '@mui/material/Typography';
-
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
-  '& .MuiDialogContent-root': {
-    padding: theme.spacing(2),
-  },
-  '& .MuiDialogActions-root': {
-    padding: theme.spacing(1),
-  },
-}));
-
-export default function CustomizedDialogs() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          Modal title
-        
-         ({
-            position: 'absolute',
-            right: 8,
-            top: 8,
-            color: theme.palette.grey[500],
-          })}
-        >
-          
-        
-        
-          
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
-            consectetur ac, vestibulum at eros.
-          
-          
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-          
-          
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
-            ullamcorper nulla non metus auctor fringilla.
-          
-        
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/DraggableDialog.js b/docs/data/material/components/dialogs/DraggableDialog.js
deleted file mode 100644
index d4bbbc05d17136..00000000000000
--- a/docs/data/material/components/dialogs/DraggableDialog.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Paper from '@mui/material/Paper';
-import Draggable from 'react-draggable';
-
-function PaperComponent(props) {
-  const nodeRef = React.useRef(null);
-  return (
-    
-      
-    
-  );
-}
-
-export default function DraggableDialog() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          Subscribe
-        
-        
-          
-            To subscribe to this website, please enter your email address here. We
-            will send updates occasionally.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/FormDialog.js b/docs/data/material/components/dialogs/FormDialog.js
deleted file mode 100644
index c3c1996ea77bfb..00000000000000
--- a/docs/data/material/components/dialogs/FormDialog.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-
-export default function FormDialog() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const formJson = Object.fromEntries(formData.entries());
-    const email = formJson.email;
-    console.log(email);
-    handleClose();
-  };
-
-  return (
-    
-      
-      
-        Subscribe
-        
-          
-            To subscribe to this website, please enter your email address here. We
-            will send updates occasionally.
-          
-          
    
-            
-          
-        
    
-        
-          
-          
-        
-          
-        
-  );
-}
diff --git a/docs/data/material/components/dialogs/FullScreenDialog.js b/docs/data/material/components/dialogs/FullScreenDialog.js
deleted file mode 100644
index 074dc4bd39fc95..00000000000000
--- a/docs/data/material/components/dialogs/FullScreenDialog.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemButton from '@mui/material/ListItemButton';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import Slide from '@mui/material/Slide';
-
-const Transition = React.forwardRef(function Transition(props, ref) {
-  return ;
-});
-
-export default function FullScreenDialog() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          
-            
-              
-            
-            
-              Sound
-            
-            
-          
-        
-        
-          
-            
-          
-          
-          
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/MaxWidthDialog.js b/docs/data/material/components/dialogs/MaxWidthDialog.js
deleted file mode 100644
index a8dd877e803ca8..00000000000000
--- a/docs/data/material/components/dialogs/MaxWidthDialog.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import Switch from '@mui/material/Switch';
-
-export default function MaxWidthDialog() {
-  const [open, setOpen] = React.useState(false);
-  const [fullWidth, setFullWidth] = React.useState(true);
-  const [maxWidth, setMaxWidth] = React.useState('sm');
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleMaxWidthChange = (event) => {
-    setMaxWidth(
-      // @ts-expect-error autofill of arbitrary value is not handled.
-      event.target.value,
-    );
-  };
-
-  const handleFullWidthChange = (event) => {
-    setFullWidth(event.target.checked);
-  };
-
-  return (
-    
-      
-      
-        Optional sizes
-        
-          
-            You can set my maximum width and whether to adapt or not.
-          
-          
-            
-              maxWidth
-              
-            
-            
-              }
-              label="Full width"
-            />
-          
-        
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.js b/docs/data/material/components/dialogs/ResponsiveDialog.js
deleted file mode 100644
index 9245da1591a54b..00000000000000
--- a/docs/data/material/components/dialogs/ResponsiveDialog.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
-
-export default function ResponsiveDialog() {
-  const [open, setOpen] = React.useState(false);
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          {"Use Google's location service?"}
-        
-        
-          
-            Let Google help apps determine location. This means sending anonymous
-            location data to Google, even when no apps are running.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/ScrollDialog.js b/docs/data/material/components/dialogs/ScrollDialog.js
deleted file mode 100644
index 358de541a959b1..00000000000000
--- a/docs/data/material/components/dialogs/ScrollDialog.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-
-export default function ScrollDialog() {
-  const [open, setOpen] = React.useState(false);
-  const [scroll, setScroll] = React.useState('paper');
-
-  const handleClickOpen = (scrollType) => () => {
-    setOpen(true);
-    setScroll(scrollType);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const descriptionElementRef = React.useRef(null);
-  React.useEffect(() => {
-    if (open) {
-      const { current: descriptionElement } = descriptionElementRef;
-      if (descriptionElement !== null) {
-        descriptionElement.focus();
-      }
-    }
-  }, [open]);
-
-  return (
-    
-      
-      
-      
-        Subscribe
-        
-          
-            {[...new Array(50)]
-              .map(
-                () => `Cras mattis consectetur purus sit amet fermentum.
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.
-Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
-              )
-              .join('\n')}
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.js b/docs/data/material/components/dialogs/SimpleDialogDemo.js
deleted file mode 100644
index 02dc908677fc0e..00000000000000
--- a/docs/data/material/components/dialogs/SimpleDialogDemo.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import Avatar from '@mui/material/Avatar';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Dialog from '@mui/material/Dialog';
-import PersonIcon from '@mui/icons-material/Person';
-import AddIcon from '@mui/icons-material/Add';
-import Typography from '@mui/material/Typography';
-import { blue } from '@mui/material/colors';
-
-const emails = ['username@gmail.com', 'user02@gmail.com'];
-
-function SimpleDialog(props) {
-  const { onClose, selectedValue, open } = props;
-
-  const handleClose = () => {
-    onClose(selectedValue);
-  };
-
-  const handleListItemClick = (value) => {
-    onClose(value);
-  };
-
-  return (
-    
-      Set backup account
-      
-        {emails.map((email) => (
-          
-             handleListItemClick(email)}>
-              
-                
-                  
-                
-              
-              
-            
-          
-        ))}
-        
-           handleListItemClick('addAccount')}
-          >
-            
-              
-                
-              
-            
-            
-          
-        
-      
-    
-  );
-}
-
-SimpleDialog.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  selectedValue: PropTypes.string.isRequired,
-};
-
-export default function SimpleDialogDemo() {
-  const [open, setOpen] = React.useState(false);
-  const [selectedValue, setSelectedValue] = React.useState(emails[1]);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (value) => {
-    setOpen(false);
-    setSelectedValue(value);
-  };
-
-  return (
-    
    
-      
-        Selected: {selectedValue}
-      
-      
    
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview b/docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview
deleted file mode 100644
index 8f27de40a86546..00000000000000
--- a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  Selected: {selectedValue}
-
-
    
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/dialogs/AlertDialogSlide.tsx b/docs/data/material/components/dialogs/demos/alert-slide/AlertDialogSlide.tsx
similarity index 97%
rename from docs/data/material/components/dialogs/AlertDialogSlide.tsx
rename to docs/data/material/components/dialogs/demos/alert-slide/AlertDialogSlide.tsx
index 97fbc56f241983..1bb97a5a928687 100644
--- a/docs/data/material/components/dialogs/AlertDialogSlide.tsx
+++ b/docs/data/material/components/dialogs/demos/alert-slide/AlertDialogSlide.tsx
@@ -18,6 +18,7 @@ const Transition = React.forwardRef(function Transition(
 });
 
 export default function AlertDialogSlide() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -59,4 +60,5 @@ export default function AlertDialogSlide() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/alert-slide/index.ts b/docs/data/material/components/dialogs/demos/alert-slide/index.ts
new file mode 100644
index 00000000000000..b1ea48a818da7a
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/alert-slide/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AlertDialogSlide from './AlertDialogSlide';
+
+export default createDemo(import.meta.url, AlertDialogSlide);
diff --git a/docs/data/material/components/dialogs/AlertDialog.tsx b/docs/data/material/components/dialogs/demos/alert/AlertDialog.tsx
similarity index 97%
rename from docs/data/material/components/dialogs/AlertDialog.tsx
rename to docs/data/material/components/dialogs/demos/alert/AlertDialog.tsx
index 29f272a910bc0f..6cfcf746a8ee57 100644
--- a/docs/data/material/components/dialogs/AlertDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/alert/AlertDialog.tsx
@@ -7,6 +7,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
 export default function AlertDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -47,4 +48,5 @@ export default function AlertDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/alert/index.ts b/docs/data/material/components/dialogs/demos/alert/index.ts
new file mode 100644
index 00000000000000..25c9a44b979838
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/alert/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AlertDialog from './AlertDialog';
+
+export default createDemo(import.meta.url, AlertDialog);
diff --git a/docs/data/material/components/dialogs/ConfirmationDialog.tsx b/docs/data/material/components/dialogs/demos/confirmation/ConfirmationDialog.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/ConfirmationDialog.tsx
rename to docs/data/material/components/dialogs/demos/confirmation/ConfirmationDialog.tsx
index 14135ea074ff77..db6aff6282cbff 100644
--- a/docs/data/material/components/dialogs/ConfirmationDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/confirmation/ConfirmationDialog.tsx
@@ -108,6 +108,7 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
 }
 
 export default function ConfirmationDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState('Dione');
 
@@ -151,4 +152,5 @@ export default function ConfirmationDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/confirmation/index.ts b/docs/data/material/components/dialogs/demos/confirmation/index.ts
new file mode 100644
index 00000000000000..a5337a70b2f1ea
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/confirmation/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ConfirmationDialog from './ConfirmationDialog';
+
+export default createDemo(import.meta.url, ConfirmationDialog);
diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/demos/cookies-banner/CookiesBanner.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/CookiesBanner.tsx
rename to docs/data/material/components/dialogs/demos/cookies-banner/CookiesBanner.tsx
index 21647d0b8d2969..e54752d46dfb75 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.tsx
+++ b/docs/data/material/components/dialogs/demos/cookies-banner/CookiesBanner.tsx
@@ -14,6 +14,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
 export default function CookiesBanner() {
+  // @focus-start @padding 1
   const [bannerOpen, setBannerOpen] = React.useState(true);
 
   const closeBanner = () => {
@@ -103,4 +104,5 @@ export default function CookiesBanner() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/cookies-banner/index.ts b/docs/data/material/components/dialogs/demos/cookies-banner/index.ts
new file mode 100644
index 00000000000000..ea6c2bc2626cd2
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/cookies-banner/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CookiesBanner from './CookiesBanner';
+
+export default createDemo(import.meta.url, CookiesBanner);
diff --git a/docs/data/material/components/dialogs/CustomizedDialogs.tsx b/docs/data/material/components/dialogs/demos/customized/CustomizedDialogs.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/CustomizedDialogs.tsx
rename to docs/data/material/components/dialogs/demos/customized/CustomizedDialogs.tsx
index b8b39100744512..9fcf3ab9861950 100644
--- a/docs/data/material/components/dialogs/CustomizedDialogs.tsx
+++ b/docs/data/material/components/dialogs/demos/customized/CustomizedDialogs.tsx
@@ -19,6 +19,7 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 export default function CustomizedDialogs() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -77,4 +78,5 @@ export default function CustomizedDialogs() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/customized/index.ts b/docs/data/material/components/dialogs/demos/customized/index.ts
new file mode 100644
index 00000000000000..5dd54e0d59b216
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedDialogs from './CustomizedDialogs';
+
+export default createDemo(import.meta.url, CustomizedDialogs);
diff --git a/docs/data/material/components/dialogs/DraggableDialog.tsx b/docs/data/material/components/dialogs/demos/draggable/DraggableDialog.tsx
similarity index 97%
rename from docs/data/material/components/dialogs/DraggableDialog.tsx
rename to docs/data/material/components/dialogs/demos/draggable/DraggableDialog.tsx
index 61aabd875d16b4..a9142ca0ba18f9 100644
--- a/docs/data/material/components/dialogs/DraggableDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/draggable/DraggableDialog.tsx
@@ -22,6 +22,7 @@ function PaperComponent(props: PaperProps) {
 }
 
 export default function DraggableDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -61,4 +62,5 @@ export default function DraggableDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/draggable/index.ts b/docs/data/material/components/dialogs/demos/draggable/index.ts
new file mode 100644
index 00000000000000..5fc3cdb5a064bc
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/draggable/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DraggableDialog from './DraggableDialog';
+
+export default createDemo(import.meta.url, DraggableDialog);
diff --git a/docs/data/material/components/dialogs/FormDialog.tsx b/docs/data/material/components/dialogs/demos/form/FormDialog.tsx
similarity index 97%
rename from docs/data/material/components/dialogs/FormDialog.tsx
rename to docs/data/material/components/dialogs/demos/form/FormDialog.tsx
index 1071beb9faf713..c7b0976dcb47c4 100644
--- a/docs/data/material/components/dialogs/FormDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/form/FormDialog.tsx
@@ -8,6 +8,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
 export default function FormDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -62,4 +63,5 @@ export default function FormDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/form/index.ts b/docs/data/material/components/dialogs/demos/form/index.ts
new file mode 100644
index 00000000000000..5fb922bc87df9d
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/form/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FormDialog from './FormDialog';
+
+export default createDemo(import.meta.url, FormDialog);
diff --git a/docs/data/material/components/dialogs/FullScreenDialog.tsx b/docs/data/material/components/dialogs/demos/full-screen/FullScreenDialog.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/FullScreenDialog.tsx
rename to docs/data/material/components/dialogs/demos/full-screen/FullScreenDialog.tsx
index cd1e0f6c13b4a2..781c54f3b029ce 100644
--- a/docs/data/material/components/dialogs/FullScreenDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/full-screen/FullScreenDialog.tsx
@@ -23,6 +23,7 @@ const Transition = React.forwardRef(function Transition(
 });
 
 export default function FullScreenDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -79,4 +80,5 @@ export default function FullScreenDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/full-screen/index.ts b/docs/data/material/components/dialogs/demos/full-screen/index.ts
new file mode 100644
index 00000000000000..4531bd6e9b3336
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/full-screen/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FullScreenDialog from './FullScreenDialog';
+
+export default createDemo(import.meta.url, FullScreenDialog);
diff --git a/docs/data/material/components/dialogs/MaxWidthDialog.tsx b/docs/data/material/components/dialogs/demos/max-width/MaxWidthDialog.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/MaxWidthDialog.tsx
rename to docs/data/material/components/dialogs/demos/max-width/MaxWidthDialog.tsx
index a757ee817f2ced..53b37654db07e8 100644
--- a/docs/data/material/components/dialogs/MaxWidthDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/max-width/MaxWidthDialog.tsx
@@ -14,6 +14,7 @@ import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Switch from '@mui/material/Switch';
 
 export default function MaxWidthDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const [fullWidth, setFullWidth] = React.useState(true);
   const [maxWidth, setMaxWidth] = React.useState('sm');
@@ -98,4 +99,5 @@ export default function MaxWidthDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/max-width/index.ts b/docs/data/material/components/dialogs/demos/max-width/index.ts
new file mode 100644
index 00000000000000..5ddacdcc7b59c8
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/max-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MaxWidthDialog from './MaxWidthDialog';
+
+export default createDemo(import.meta.url, MaxWidthDialog);
diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.tsx b/docs/data/material/components/dialogs/demos/responsive/ResponsiveDialog.tsx
similarity index 97%
rename from docs/data/material/components/dialogs/ResponsiveDialog.tsx
rename to docs/data/material/components/dialogs/demos/responsive/ResponsiveDialog.tsx
index 9245da1591a54b..dacb4825612337 100644
--- a/docs/data/material/components/dialogs/ResponsiveDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/responsive/ResponsiveDialog.tsx
@@ -9,6 +9,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 
 export default function ResponsiveDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
@@ -52,4 +53,5 @@ export default function ResponsiveDialog() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/responsive/index.ts b/docs/data/material/components/dialogs/demos/responsive/index.ts
new file mode 100644
index 00000000000000..5da08804c1a1d9
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/responsive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ResponsiveDialog from './ResponsiveDialog';
+
+export default createDemo(import.meta.url, ResponsiveDialog);
diff --git a/docs/data/material/components/dialogs/ScrollDialog.tsx b/docs/data/material/components/dialogs/demos/scroll/ScrollDialog.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/ScrollDialog.tsx
rename to docs/data/material/components/dialogs/demos/scroll/ScrollDialog.tsx
index 5b126e4213fd9f..26d97628a60a2f 100644
--- a/docs/data/material/components/dialogs/ScrollDialog.tsx
+++ b/docs/data/material/components/dialogs/demos/scroll/ScrollDialog.tsx
@@ -7,6 +7,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
 export default function ScrollDialog() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const [scroll, setScroll] = React.useState('paper');
 
@@ -64,4 +65,5 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dialogs/demos/scroll/index.ts b/docs/data/material/components/dialogs/demos/scroll/index.ts
new file mode 100644
index 00000000000000..bf92fda8b53d67
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/scroll/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ScrollDialog from './ScrollDialog';
+
+export default createDemo(import.meta.url, ScrollDialog);
diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx b/docs/data/material/components/dialogs/demos/simple-demo/SimpleDialogDemo.tsx
similarity index 98%
rename from docs/data/material/components/dialogs/SimpleDialogDemo.tsx
rename to docs/data/material/components/dialogs/demos/simple-demo/SimpleDialogDemo.tsx
index 4b94ae17292240..12cb196fd82f75 100644
--- a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx
+++ b/docs/data/material/components/dialogs/demos/simple-demo/SimpleDialogDemo.tsx
@@ -81,6 +81,7 @@ export default function SimpleDialogDemo() {
 
   return (
     
    
+      {/* @focus-start */}
       
         Selected: {selectedValue}
       
@@ -93,6 +94,7 @@ export default function SimpleDialogDemo() {
         open={open}
         onClose={handleClose}
       />
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/dialogs/demos/simple-demo/index.ts b/docs/data/material/components/dialogs/demos/simple-demo/index.ts
new file mode 100644
index 00000000000000..9ea9c28523e6d6
--- /dev/null
+++ b/docs/data/material/components/dialogs/demos/simple-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleDialogDemo from './SimpleDialogDemo';
+
+export default createDemo(import.meta.url, SimpleDialogDemo);
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index 891e9b695db584..36ce8b84ee90e4 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -29,7 +29,7 @@ Dialogs are implemented using a collection of related components:
 - Dialog Content Text: a wrapper for text inside of ``.
 - Slide: optional [Transition](/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen.
 
-{{"demo": "SimpleDialogDemo.js"}}
+{{"component": "../data/material/components/dialogs/demos/simple-demo/index.ts"}}
 
 ## Basics
 
@@ -58,21 +58,21 @@ If a title is required:
 - Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?".
 - Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?"
 
-{{"demo": "AlertDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/alert/index.ts"}}
 
 ## Transitions
 
 You can swap out the default transition with the `slots.transition` and `slotProps.transition` props.
 The next example uses `Slide`.
 
-{{"demo": "AlertDialogSlide.js"}}
+{{"component": "../data/material/components/dialogs/demos/alert-slide/index.ts"}}
 
 ## Form dialogs
 
 Form dialogs allow users to fill out form fields within a dialog.
 For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'.
 
-{{"demo": "FormDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/form/index.ts"}}
 
 ## Customization
 
@@ -81,18 +81,18 @@ You can learn more about this in the [overrides documentation page](/material-ui
 
 The dialog has a close button added to aid usability.
 
-{{"demo": "CustomizedDialogs.js"}}
+{{"component": "../data/material/components/dialogs/demos/customized/index.ts"}}
 
 ## Full-screen dialogs
 
-{{"demo": "FullScreenDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/full-screen/index.ts"}}
 
 ## Optional sizes
 
 You can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean.
 When the `fullWidth` prop is true, the dialog will adapt based on the `maxWidth` value.
 
-{{"demo": "MaxWidthDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/max-width/index.ts"}}
 
 ## Responsive full-screen
 
@@ -109,7 +109,7 @@ function MyComponent() {
 }
 ```
 
-{{"demo": "ResponsiveDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/responsive/index.ts"}}
 
 ## Confirmation dialogs
 
@@ -118,7 +118,7 @@ For example, users can listen to multiple ringtones but only make a final select
 
 Touching "Cancel" in a confirmation dialog, cancels the action, discards any changes, and closes the dialog.
 
-{{"demo": "ConfirmationDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/confirmation/index.ts"}}
 
 ## Non-modal dialog
 
@@ -127,7 +127,7 @@ Visit [the Nielsen Norman Group article](https://www.nngroup.com/articles/modal-
 
 The demo below shows a persistent cookie banner, a common non-modal dialog use case.
 
-{{"demo": "CookiesBanner.js", "iframe": true}}
+{{"component": "../data/material/components/dialogs/demos/cookies-banner/index.ts", "iframe": true}}
 
 ## Draggable dialog
 
@@ -135,7 +135,7 @@ You can create a draggable dialog by using [react-draggable](https://github.com/
 To do so, you can pass the imported `Draggable` component as the `PaperComponent` of the `Dialog` component.
 This will make the entire dialog draggable.
 
-{{"demo": "DraggableDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/draggable/index.ts"}}
 
 ## Scrolling long content
 
@@ -146,7 +146,7 @@ When dialogs become too long for the user's viewport or device, they scroll.
 
 Try the demo below to see what we mean:
 
-{{"demo": "ScrollDialog.js"}}
+{{"component": "../data/material/components/dialogs/demos/scroll/index.ts"}}
 
 ## Performance
 
diff --git a/docs/data/material/components/dividers/DividerText.js b/docs/data/material/components/dividers/DividerText.js
deleted file mode 100644
index 526b54c4e0336e..00000000000000
--- a/docs/data/material/components/dividers/DividerText.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Divider from '@mui/material/Divider';
-import Chip from '@mui/material/Chip';
-
-const Root = styled('div')(({ theme }) => ({
-  width: '100%',
-  ...theme.typography.body2,
-  color: (theme.vars || theme).palette.text.secondary,
-  '& > :not(style) ~ :not(style)': {
-    marginTop: theme.spacing(2),
-  },
-}));
-
-export default function DividerText() {
-  const content = (
-    
    {`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`}
    
-  );
-
-  return (
-    
-      {content}
-      CENTER
-      {content}
-      LEFT
-      {content}
-      RIGHT
-      {content}
-      
-        
-      
-      {content}
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/DividerText.tsx.preview b/docs/data/material/components/dividers/DividerText.tsx.preview
deleted file mode 100644
index 5d7891ff1a12d9..00000000000000
--- a/docs/data/material/components/dividers/DividerText.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-  {content}
-  CENTER
-  {content}
-  LEFT
-  {content}
-  RIGHT
-  {content}
-  
-    
-  
-  {content}
-
\ No newline at end of file
diff --git a/docs/data/material/components/dividers/DividerVariants.js b/docs/data/material/components/dividers/DividerVariants.js
deleted file mode 100644
index b87c6067078956..00000000000000
--- a/docs/data/material/components/dividers/DividerVariants.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import Divider from '@mui/material/Divider';
-
-const style = {
-  py: 0,
-  width: '100%',
-  maxWidth: 360,
-  borderRadius: 2,
-  border: '1px solid',
-  borderColor: 'divider',
-  backgroundColor: 'background.paper',
-};
-
-export default function DividerVariants() {
-  return (
-    
-      
-        
-      
-      
-      
-        
-      
-      
-      
-        
-      
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/FlexDivider.js b/docs/data/material/components/dividers/FlexDivider.js
deleted file mode 100644
index 65e082ceff217e..00000000000000
--- a/docs/data/material/components/dividers/FlexDivider.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-
-export default function FlexDivider() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/FlexDivider.tsx.preview b/docs/data/material/components/dividers/FlexDivider.tsx.preview
deleted file mode 100644
index 36aa2cb757ab2d..00000000000000
--- a/docs/data/material/components/dividers/FlexDivider.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/dividers/IntroDivider.js b/docs/data/material/components/dividers/IntroDivider.js
deleted file mode 100644
index 5dadd02ed6fc74..00000000000000
--- a/docs/data/material/components/dividers/IntroDivider.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Card from '@mui/material/Card';
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-
-export default function IntroDivider() {
-  return (
-    
-      
-        
-          
-            Toothbrush
-          
-          
-            $4.50
-          
-        
-        
-          Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
-          just down the hall.
-        
-      
-      
-      
-        
-          Select type
-        
-        
-          
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/ListDividers.js b/docs/data/material/components/dividers/ListDividers.js
deleted file mode 100644
index 220999c59fdaac..00000000000000
--- a/docs/data/material/components/dividers/ListDividers.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import Divider from '@mui/material/Divider';
-
-const style = {
-  p: 0,
-  width: '100%',
-  maxWidth: 360,
-  borderRadius: 2,
-  border: '1px solid',
-  borderColor: 'divider',
-  backgroundColor: 'background.paper',
-};
-
-export default function ListDividers() {
-  return (
-    
-      
-        
-      
-      
-      
-        
-      
-      
-      
-        
-      
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.js b/docs/data/material/components/dividers/VerticalDividerMiddle.js
deleted file mode 100644
index 4a5c8c0dd74578..00000000000000
--- a/docs/data/material/components/dividers/VerticalDividerMiddle.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Card from '@mui/material/Card';
-import Divider, { dividerClasses } from '@mui/material/Divider';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-
-export default function VerticalDividerMiddle() {
-  return (
-    
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/VerticalDividers.js b/docs/data/material/components/dividers/VerticalDividers.js
deleted file mode 100644
index d2c4435f51adda..00000000000000
--- a/docs/data/material/components/dividers/VerticalDividers.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import Box from '@mui/material/Box';
-import Divider, { dividerClasses } from '@mui/material/Divider';
-
-export default function VerticalDividers() {
-  return (
-    
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx.preview b/docs/data/material/components/dividers/VerticalDividers.tsx.preview
deleted file mode 100644
index 9821ca88280805..00000000000000
--- a/docs/data/material/components/dividers/VerticalDividers.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/dividers/FlexDivider.tsx b/docs/data/material/components/dividers/demos/flex/FlexDivider.tsx
similarity index 93%
rename from docs/data/material/components/dividers/FlexDivider.tsx
rename to docs/data/material/components/dividers/demos/flex/FlexDivider.tsx
index 65e082ceff217e..595436a4c8c5b0 100644
--- a/docs/data/material/components/dividers/FlexDivider.tsx
+++ b/docs/data/material/components/dividers/demos/flex/FlexDivider.tsx
@@ -19,9 +19,11 @@ export default function FlexDivider() {
         },
       }}
     >
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/dividers/demos/flex/index.ts b/docs/data/material/components/dividers/demos/flex/index.ts
new file mode 100644
index 00000000000000..b55e40b2fe498a
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/flex/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FlexDivider from './FlexDivider';
+
+export default createDemo(import.meta.url, FlexDivider);
diff --git a/docs/data/material/components/dividers/IntroDivider.tsx b/docs/data/material/components/dividers/demos/intro/IntroDivider.tsx
similarity index 97%
rename from docs/data/material/components/dividers/IntroDivider.tsx
rename to docs/data/material/components/dividers/demos/intro/IntroDivider.tsx
index 5dadd02ed6fc74..6d6f99103d023b 100644
--- a/docs/data/material/components/dividers/IntroDivider.tsx
+++ b/docs/data/material/components/dividers/demos/intro/IntroDivider.tsx
@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography';
 
 export default function IntroDivider() {
   return (
+    // @focus-start
     
       
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/dividers/demos/intro/index.ts b/docs/data/material/components/dividers/demos/intro/index.ts
new file mode 100644
index 00000000000000..e04eb66a0550e5
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/intro/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IntroDivider from './IntroDivider';
+
+export default createDemo(import.meta.url, IntroDivider);
diff --git a/docs/data/material/components/dividers/ListDividers.tsx b/docs/data/material/components/dividers/demos/list/ListDividers.tsx
similarity index 95%
rename from docs/data/material/components/dividers/ListDividers.tsx
rename to docs/data/material/components/dividers/demos/list/ListDividers.tsx
index 220999c59fdaac..bf17d704e7d695 100644
--- a/docs/data/material/components/dividers/ListDividers.tsx
+++ b/docs/data/material/components/dividers/demos/list/ListDividers.tsx
@@ -15,6 +15,7 @@ const style = {
 
 export default function ListDividers() {
   return (
+    // @focus-start
     
       
         
@@ -32,5 +33,6 @@ export default function ListDividers() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/dividers/demos/list/index.ts b/docs/data/material/components/dividers/demos/list/index.ts
new file mode 100644
index 00000000000000..362aaf85c2779e
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/list/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ListDividers from './ListDividers';
+
+export default createDemo(import.meta.url, ListDividers);
diff --git a/docs/data/material/components/dividers/DividerText.tsx b/docs/data/material/components/dividers/demos/text/DividerText.tsx
similarity index 94%
rename from docs/data/material/components/dividers/DividerText.tsx
rename to docs/data/material/components/dividers/demos/text/DividerText.tsx
index 526b54c4e0336e..d28963e9511990 100644
--- a/docs/data/material/components/dividers/DividerText.tsx
+++ b/docs/data/material/components/dividers/demos/text/DividerText.tsx
@@ -16,6 +16,7 @@ export default function DividerText() {
     
    {`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`}
    
   );
 
+  // @focus-start @padding 1
   return (
     
       {content}
@@ -31,4 +32,5 @@ export default function DividerText() {
       {content}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/dividers/demos/text/index.ts b/docs/data/material/components/dividers/demos/text/index.ts
new file mode 100644
index 00000000000000..a4c79ecf4a67d5
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/text/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DividerText from './DividerText';
+
+export default createDemo(import.meta.url, DividerText);
diff --git a/docs/data/material/components/dividers/DividerVariants.tsx b/docs/data/material/components/dividers/demos/variants/DividerVariants.tsx
similarity index 96%
rename from docs/data/material/components/dividers/DividerVariants.tsx
rename to docs/data/material/components/dividers/demos/variants/DividerVariants.tsx
index b87c6067078956..e6ded345d566c3 100644
--- a/docs/data/material/components/dividers/DividerVariants.tsx
+++ b/docs/data/material/components/dividers/demos/variants/DividerVariants.tsx
@@ -15,6 +15,7 @@ const style = {
 
 export default function DividerVariants() {
   return (
+    // @focus-start
     
       
         
@@ -32,5 +33,6 @@ export default function DividerVariants() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/dividers/demos/variants/index.ts b/docs/data/material/components/dividers/demos/variants/index.ts
new file mode 100644
index 00000000000000..2b14fdc6dc8c69
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/variants/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DividerVariants from './DividerVariants';
+
+export default createDemo(import.meta.url, DividerVariants);
diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx b/docs/data/material/components/dividers/demos/vertical-middle/VerticalDividerMiddle.tsx
similarity index 95%
rename from docs/data/material/components/dividers/VerticalDividerMiddle.tsx
rename to docs/data/material/components/dividers/demos/vertical-middle/VerticalDividerMiddle.tsx
index 4a5c8c0dd74578..2bede827b688cb 100644
--- a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx
+++ b/docs/data/material/components/dividers/demos/vertical-middle/VerticalDividerMiddle.tsx
@@ -7,6 +7,7 @@ import FormatBoldIcon from '@mui/icons-material/FormatBold';
 
 export default function VerticalDividerMiddle() {
   return (
+    // @focus-start
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/dividers/demos/vertical-middle/index.ts b/docs/data/material/components/dividers/demos/vertical-middle/index.ts
new file mode 100644
index 00000000000000..12b5288e6cd0c8
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/vertical-middle/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalDividerMiddle from './VerticalDividerMiddle';
+
+export default createDemo(import.meta.url, VerticalDividerMiddle);
diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx b/docs/data/material/components/dividers/demos/vertical/VerticalDividers.tsx
similarity index 95%
rename from docs/data/material/components/dividers/VerticalDividers.tsx
rename to docs/data/material/components/dividers/demos/vertical/VerticalDividers.tsx
index d2c4435f51adda..2eb9901a3eafa0 100644
--- a/docs/data/material/components/dividers/VerticalDividers.tsx
+++ b/docs/data/material/components/dividers/demos/vertical/VerticalDividers.tsx
@@ -24,11 +24,13 @@ export default function VerticalDividers() {
         },
       }}
     >
+      {/* @focus-start */}
       
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/dividers/demos/vertical/index.ts b/docs/data/material/components/dividers/demos/vertical/index.ts
new file mode 100644
index 00000000000000..e59abcf8b0e65f
--- /dev/null
+++ b/docs/data/material/components/dividers/demos/vertical/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalDividers from './VerticalDividers';
+
+export default createDemo(import.meta.url, VerticalDividers);
diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md
index 8d48da3eee1c8b..df31a977af3c93 100644
--- a/docs/data/material/components/dividers/dividers.md
+++ b/docs/data/material/components/dividers/dividers.md
@@ -17,7 +17,7 @@ githubSource: packages/mui-material/src/Divider
 
 The Material UI Divider component renders as a dark gray `
    ` by default, and features several useful props for quick style adjustments.
 
-{{"demo": "IntroDivider.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/intro/index.ts", "bg": true}}
 
 ## Basics
 
@@ -29,25 +29,25 @@ import Divider from '@mui/material/Divider';
 
 The Divider component supports three variants: `fullWidth` (default), `inset`, and `middle`.
 
-{{"demo": "DividerVariants.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/variants/index.ts", "bg": true}}
 
 ### Orientation
 
 Use the `orientation` prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a `
    ` with the corresponding accessibility attributes instead of `
    ` to adhere to the WAI-ARIA [spec](https://www.w3.org/TR/wai-aria-1.2/#separator).
 
-{{"demo": "VerticalDividers.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/vertical/index.ts", "bg": true}}
 
 ### Flex item
 
 Use the `flexItem` prop to display the Divider when it's being used in a flex container.
 
-{{"demo": "FlexDivider.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/flex/index.ts", "bg": true}}
 
 ### With children
 
 Use the `textAlign` prop to align elements that are wrapped by the Divider.
 
-{{"demo": "DividerText.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/text/index.ts", "bg": true}}
 
 ## Customization
 
@@ -55,13 +55,13 @@ Use the `textAlign` prop to align elements that are wrapped by the Divider.
 
 When using the Divider to separate items in a List, use the `component` prop to render it as an `
  • `—otherwise it won't be a valid HTML element.
 
-{{"demo": "ListDividers.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/list/index.ts", "bg": true}}
 
 ### Icon grouping
 
 The demo below shows how to combine the props `variant="middle"` and `orientation="vertical"`.
 
-{{"demo": "VerticalDividerMiddle.js", "bg": true}}
+{{"component": "../data/material/components/dividers/demos/vertical-middle/index.ts", "bg": true}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.js b/docs/data/material/components/drawers/AnchorTemporaryDrawer.js
deleted file mode 100644
index 0c539ab6419e93..00000000000000
--- a/docs/data/material/components/drawers/AnchorTemporaryDrawer.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function AnchorTemporaryDrawer() {
-  const [state, setState] = React.useState({
-    top: false,
-    left: false,
-    bottom: false,
-    right: false,
-  });
-
-  const toggleDrawer = (anchor, open) => (event) => {
-    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
-      return;
-    }
-
-    setState({ ...state, [anchor]: open });
-  };
-
-  const list = (anchor) => (
-    
-      
-        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-      
-      
-        {['All mail', 'Trash', 'Spam'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-    
-  );
-
-  return (
-    
    
-      {['left', 'right', 'top', 'bottom'].map((anchor) => (
-        
-          
-          
-            {list(anchor)}
-          
-        
-      ))}
-    
    
-  );
-}
diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview
deleted file mode 100644
index 245f5229aeddb8..00000000000000
--- a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
-  
-    
-    
-      {list(anchor)}
-    
-  
-))}
\ No newline at end of file
diff --git a/docs/data/material/components/drawers/ClippedDrawer.js b/docs/data/material/components/drawers/ClippedDrawer.js
deleted file mode 100644
index e8d6bd1fa637f1..00000000000000
--- a/docs/data/material/components/drawers/ClippedDrawer.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import AppBar from '@mui/material/AppBar';
-import CssBaseline from '@mui/material/CssBaseline';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-const drawerWidth = 240;
-
-export default function ClippedDrawer() {
-  return (
-    
-      
-       theme.zIndex.drawer + 1 }}>
-        
-          
-            Clipped drawer
-          
-        
-      
-      
-        
-        
-          
-            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-              
-                
-                  
-                    {index % 2 === 0 ?  : }
-                  
-                  
-                
-              
-            ))}
-          
-          
-          
-            {['All mail', 'Trash', 'Spam'].map((text, index) => (
-              
-                
-                  
-                    {index % 2 === 0 ?  : }
-                  
-                  
-                
-              
-            ))}
-          
-        
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js
deleted file mode 100644
index f0eb1af7c2b6a4..00000000000000
--- a/docs/data/material/components/drawers/MiniDrawer.js
+++ /dev/null
@@ -1,281 +0,0 @@
-import * as React from 'react';
-import { styled, useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import MuiDrawer from '@mui/material/Drawer';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import CssBaseline from '@mui/material/CssBaseline';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-const drawerWidth = 240;
-
-const openedMixin = (theme) => ({
-  width: drawerWidth,
-  transition: theme.transitions.create('width', {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.enteringScreen,
-  }),
-  overflowX: 'hidden',
-});
-
-const closedMixin = (theme) => ({
-  transition: theme.transitions.create('width', {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  overflowX: 'hidden',
-  width: `calc(${theme.spacing(7)} + 1px)`,
-  [theme.breakpoints.up('sm')]: {
-    width: `calc(${theme.spacing(8)} + 1px)`,
-  },
-});
-
-const DrawerHeader = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  padding: theme.spacing(0, 1),
-  // necessary for content to be below app bar
-  ...theme.mixins.toolbar,
-}));
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme }) => ({
-  zIndex: theme.zIndex.drawer + 1,
-  transition: theme.transitions.create(['width', 'margin'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  variants: [
-    {
-      props: ({ open }) => open,
-      style: {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-      },
-    },
-  ],
-}));
-
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme }) => ({
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: 'nowrap',
-    boxSizing: 'border-box',
-    variants: [
-      {
-        props: ({ open }) => open,
-        style: {
-          ...openedMixin(theme),
-          '& .MuiDrawer-paper': openedMixin(theme),
-        },
-      },
-      {
-        props: ({ open }) => !open,
-        style: {
-          ...closedMixin(theme),
-          '& .MuiDrawer-paper': closedMixin(theme),
-        },
-      },
-    ],
-  }),
-);
-
-export default function MiniDrawer() {
-  const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          
-            
-          
-          
-            Mini variant drawer
-          
-        
-      
-      
-        
-          
-            {theme.direction === 'rtl' ?  : }
-          
-        
-        
-        
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-        
-        
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.js b/docs/data/material/components/drawers/PermanentDrawerLeft.js
deleted file mode 100644
index 81c7ac61a581ea..00000000000000
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import CssBaseline from '@mui/material/CssBaseline';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-const drawerWidth = 240;
-
-export default function PermanentDrawerLeft() {
-  return (
-    
-      
-      
-        
-          
-            Permanent drawer
-          
-        
-      
-      
-        
-        
-        
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-        
-        
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.js b/docs/data/material/components/drawers/PermanentDrawerRight.js
deleted file mode 100644
index 804664167d2ff5..00000000000000
--- a/docs/data/material/components/drawers/PermanentDrawerRight.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import CssBaseline from '@mui/material/CssBaseline';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-const drawerWidth = 240;
-
-export default function PermanentDrawerRight() {
-  return (
-    
-      
-      
-        
-          
-            Permanent drawer
-          
-        
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
-      
-        
-        
-        
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-        
-        
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js
deleted file mode 100644
index 51b3fae3fab40c..00000000000000
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import * as React from 'react';
-import { styled, useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import CssBaseline from '@mui/material/CssBaseline';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-const drawerWidth = 240;
-
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme }) => ({
-    flexGrow: 1,
-    padding: theme.spacing(3),
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    marginLeft: `-${drawerWidth}px`,
-    variants: [
-      {
-        props: ({ open }) => open,
-        style: {
-          transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-          }),
-          marginLeft: 0,
-        },
-      },
-    ],
-  }),
-);
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme }) => ({
-  transition: theme.transitions.create(['margin', 'width'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  variants: [
-    {
-      props: ({ open }) => open,
-      style: {
-        width: `calc(100% - ${drawerWidth}px)`,
-        marginLeft: `${drawerWidth}px`,
-        transition: theme.transitions.create(['margin', 'width'], {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-      },
-    },
-  ],
-}));
-
-const DrawerHeader = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  padding: theme.spacing(0, 1),
-  // necessary for content to be below app bar
-  ...theme.mixins.toolbar,
-  justifyContent: 'flex-end',
-}));
-
-export default function PersistentDrawerLeft() {
-  const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          
-            
-          
-          
-            Persistent drawer
-          
-        
-      
-      
-        
-          
-            {theme.direction === 'ltr' ?  : }
-          
-        
-        
-        
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-        
-        
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-      
-      
    
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js
deleted file mode 100644
index 9ef70a919c400a..00000000000000
--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ /dev/null
@@ -1,193 +0,0 @@
-import * as React from 'react';
-import { styled, useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import CssBaseline from '@mui/material/CssBaseline';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-const drawerWidth = 240;
-
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme }) => ({
-    flexGrow: 1,
-    padding: theme.spacing(3),
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    marginRight: -drawerWidth,
-    /**
-     * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
-     * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
-     * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
-     * proper interaction with the underlying content.
-     */
-    position: 'relative',
-    variants: [
-      {
-        props: ({ open }) => open,
-        style: {
-          transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-          }),
-          marginRight: 0,
-        },
-      },
-    ],
-  }),
-);
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme }) => ({
-  transition: theme.transitions.create(['margin', 'width'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  variants: [
-    {
-      props: ({ open }) => open,
-      style: {
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['margin', 'width'], {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-        marginRight: drawerWidth,
-      },
-    },
-  ],
-}));
-
-const DrawerHeader = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  padding: theme.spacing(0, 1),
-  // necessary for content to be below app bar
-  ...theme.mixins.toolbar,
-  justifyContent: 'flex-start',
-}));
-
-export default function PersistentDrawerRight() {
-  const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          
-            Persistent drawer
-          
-          
-            
-          
-        
-      
-      
    
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
    
-      
-        
-          
-            {theme.direction === 'rtl' ?  : }
-          
-        
-        
-        
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-        
-        
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            
-              
-                
-                  {index % 2 === 0 ?  : }
-                
-                
-              
-            
-          ))}
-        
-      
-        
-  );
-}
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
deleted file mode 100644
index 94a20757fba1db..00000000000000
--- a/docs/data/material/components/drawers/ResponsiveDrawer.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
-import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import MailIcon from '@mui/icons-material/Mail';
-import MenuIcon from '@mui/icons-material/Menu';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-
-const drawerWidth = 240;
-
-function ResponsiveDrawer(props) {
-  const { window } = props;
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [isClosing, setIsClosing] = React.useState(false);
-
-  const handleDrawerClose = () => {
-    setIsClosing(true);
-    setMobileOpen(false);
-  };
-
-  const handleDrawerTransitionEnd = () => {
-    setIsClosing(false);
-  };
-
-  const handleDrawerToggle = () => {
-    if (!isClosing) {
-      setMobileOpen(!mobileOpen);
-    }
-  };
-
-  const drawer = (
-    
    
-      
-      
-      
-        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-      
-      
-        {['All mail', 'Trash', 'Spam'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-    
    
-  );
-
-  // Remove this const when copying and pasting into your project.
-  const container = window !== undefined ? () => window().document.body : undefined;
-
-  return (
-    
-      
-      
-        
-          
-            
-          
-          
-            Responsive drawer
-          
-        
-      
-      
-        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
-        
-          {drawer}
-        
-        
-          {drawer}
-        
-      
-      
-        
-        
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
-          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-          sapien faucibus et molestie ac.
-        
-        
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
-          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        
-      
-    
-  );
-}
-
-ResponsiveDrawer.propTypes = {
-  /**
-   * Injected by the documentation to work in an iframe.
-   * Remove this when copying and pasting into your project.
-   */
-  window: PropTypes.func,
-};
-
-export default ResponsiveDrawer;
diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
deleted file mode 100644
index f2c18f6853c889..00000000000000
--- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Global } from '@emotion/react';
-import { styled } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { grey } from '@mui/material/colors';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import Skeleton from '@mui/material/Skeleton';
-import Typography from '@mui/material/Typography';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-
-const drawerBleeding = 56;
-
-const Root = styled('div')(({ theme }) => ({
-  height: '100%',
-  backgroundColor: grey[100],
-  ...theme.applyStyles('dark', {
-    backgroundColor: (theme.vars || theme).palette.background.default,
-  }),
-}));
-
-const StyledBox = styled('div')(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.applyStyles('dark', {
-    backgroundColor: grey[800],
-  }),
-}));
-
-const Puller = styled('div')(({ theme }) => ({
-  width: 30,
-  height: 6,
-  backgroundColor: grey[300],
-  borderRadius: 3,
-  position: 'absolute',
-  top: 8,
-  left: 'calc(50% - 15px)',
-  ...theme.applyStyles('dark', {
-    backgroundColor: grey[900],
-  }),
-}));
-
-function SwipeableEdgeDrawer(props) {
-  const { window } = props;
-  const [open, setOpen] = React.useState(false);
-
-  const toggleDrawer = (newOpen) => () => {
-    setOpen(newOpen);
-  };
-
-  // This is used only for the example
-  const container = window !== undefined ? () => window().document.body : undefined;
-
-  return (
-    
-      
-       .MuiPaper-root': {
-            height: `calc(50% - ${drawerBleeding}px)`,
-            overflow: 'visible',
-          },
-        }}
-      />
-      
-        
-      
-      
-        
-          
-          51 results
-        
-        
-          
-        
-      
-    
-  );
-}
-
-SwipeableEdgeDrawer.propTypes = {
-  /**
-   * Injected by the documentation to work in an iframe.
-   * You won't need it on your project.
-   */
-  window: PropTypes.func,
-};
-
-export default SwipeableEdgeDrawer;
diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js b/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js
deleted file mode 100644
index b26834605b226a..00000000000000
--- a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function SwipeableTemporaryDrawer() {
-  const [state, setState] = React.useState({
-    top: false,
-    left: false,
-    bottom: false,
-    right: false,
-  });
-
-  const toggleDrawer = (anchor, open) => (event) => {
-    if (
-      event &&
-      event.type === 'keydown' &&
-      (event.key === 'Tab' || event.key === 'Shift')
-    ) {
-      return;
-    }
-
-    setState({ ...state, [anchor]: open });
-  };
-
-  const list = (anchor) => (
-    
-      
-        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-      
-      
-        {['All mail', 'Trash', 'Spam'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-    
-  );
-
-  return (
-    
    
-      {['left', 'right', 'top', 'bottom'].map((anchor) => (
-        
-          
-          
-            {list(anchor)}
-          
-        
-      ))}
-    
    
-  );
-}
diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview
deleted file mode 100644
index 9d1db86ace412e..00000000000000
--- a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
-  
-    
-    
-      {list(anchor)}
-    
-  
-))}
\ No newline at end of file
diff --git a/docs/data/material/components/drawers/TemporaryDrawer.js b/docs/data/material/components/drawers/TemporaryDrawer.js
deleted file mode 100644
index 55cc4b06d2d935..00000000000000
--- a/docs/data/material/components/drawers/TemporaryDrawer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-
-export default function TemporaryDrawer() {
-  const [open, setOpen] = React.useState(false);
-
-  const toggleDrawer = (newOpen) => () => {
-    setOpen(newOpen);
-  };
-
-  const DrawerList = (
-    
-      
-        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-      
-      
-        {['All mail', 'Trash', 'Spam'].map((text, index) => (
-          
-            
-              
-                {index % 2 === 0 ?  : }
-              
-              
-            
-          
-        ))}
-      
-    
-  );
-
-  return (
-    
    
-      
-      
-        {DrawerList}
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview
deleted file mode 100644
index 9a79963627fa1d..00000000000000
--- a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-  {DrawerList}
-
\ No newline at end of file
diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx b/docs/data/material/components/drawers/demos/anchor-temporary/AnchorTemporaryDrawer.tsx
similarity index 98%
rename from docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx
rename to docs/data/material/components/drawers/demos/anchor-temporary/AnchorTemporaryDrawer.tsx
index a6f333aa9edc4d..338f4ed8a67a3b 100644
--- a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/anchor-temporary/AnchorTemporaryDrawer.tsx
@@ -72,6 +72,7 @@ export default function AnchorTemporaryDrawer() {
 
   return (
     
    
+      {/* @focus-start */}
       {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
         
           
@@ -84,6 +85,7 @@ export default function AnchorTemporaryDrawer() {
           
         
       ))}
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/drawers/demos/anchor-temporary/index.ts b/docs/data/material/components/drawers/demos/anchor-temporary/index.ts
new file mode 100644
index 00000000000000..35b0efe94dc558
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/anchor-temporary/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AnchorTemporaryDrawer from './AnchorTemporaryDrawer';
+
+export default createDemo(import.meta.url, AnchorTemporaryDrawer);
diff --git a/docs/data/material/components/drawers/ClippedDrawer.tsx b/docs/data/material/components/drawers/demos/clipped/ClippedDrawer.tsx
similarity index 98%
rename from docs/data/material/components/drawers/ClippedDrawer.tsx
rename to docs/data/material/components/drawers/demos/clipped/ClippedDrawer.tsx
index e8d6bd1fa637f1..988be0ba266f4b 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/clipped/ClippedDrawer.tsx
@@ -18,6 +18,7 @@ const drawerWidth = 240;
 export default function ClippedDrawer() {
   return (
     
+      {/* @focus-start */}
       
        theme.zIndex.drawer + 1 }}>
         
@@ -93,6 +94,7 @@ export default function ClippedDrawer() {
           posuere sollicitudin aliquam ultrices sagittis orci a.
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/drawers/demos/clipped/index.ts b/docs/data/material/components/drawers/demos/clipped/index.ts
new file mode 100644
index 00000000000000..fbce2b5673615a
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/clipped/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ClippedDrawer from './ClippedDrawer';
+
+export default createDemo(import.meta.url, ClippedDrawer);
diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/demos/mini/MiniDrawer.tsx
similarity index 99%
rename from docs/data/material/components/drawers/MiniDrawer.tsx
rename to docs/data/material/components/drawers/demos/mini/MiniDrawer.tsx
index a70bf205f5c256..90a81ff9fbb075 100644
--- a/docs/data/material/components/drawers/MiniDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/mini/MiniDrawer.tsx
@@ -104,6 +104,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
 );
 
 export default function MiniDrawer() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -282,4 +283,5 @@ export default function MiniDrawer() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/drawers/demos/mini/index.ts b/docs/data/material/components/drawers/demos/mini/index.ts
new file mode 100644
index 00000000000000..37d69b97006c79
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/mini/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MiniDrawer from './MiniDrawer';
+
+export default createDemo(import.meta.url, MiniDrawer);
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx b/docs/data/material/components/drawers/demos/permanent-left/PermanentDrawerLeft.tsx
similarity index 98%
rename from docs/data/material/components/drawers/PermanentDrawerLeft.tsx
rename to docs/data/material/components/drawers/demos/permanent-left/PermanentDrawerLeft.tsx
index 81c7ac61a581ea..89c47d5ccfc6b1 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/demos/permanent-left/PermanentDrawerLeft.tsx
@@ -18,6 +18,7 @@ const drawerWidth = 240;
 export default function PermanentDrawerLeft() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/drawers/demos/permanent-left/index.ts b/docs/data/material/components/drawers/demos/permanent-left/index.ts
new file mode 100644
index 00000000000000..9c6f6706ca75ad
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/permanent-left/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PermanentDrawerLeft from './PermanentDrawerLeft';
+
+export default createDemo(import.meta.url, PermanentDrawerLeft);
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.tsx b/docs/data/material/components/drawers/demos/permanent-right/PermanentDrawerRight.tsx
similarity index 98%
rename from docs/data/material/components/drawers/PermanentDrawerRight.tsx
rename to docs/data/material/components/drawers/demos/permanent-right/PermanentDrawerRight.tsx
index 804664167d2ff5..24ad00f7c30b20 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/demos/permanent-right/PermanentDrawerRight.tsx
@@ -18,6 +18,7 @@ const drawerWidth = 240;
 export default function PermanentDrawerRight() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/drawers/demos/permanent-right/index.ts b/docs/data/material/components/drawers/demos/permanent-right/index.ts
new file mode 100644
index 00000000000000..53ee0d757e575a
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/permanent-right/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PermanentDrawerRight from './PermanentDrawerRight';
+
+export default createDemo(import.meta.url, PermanentDrawerRight);
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/demos/persistent-left/PersistentDrawerLeft.tsx
similarity index 99%
rename from docs/data/material/components/drawers/PersistentDrawerLeft.tsx
rename to docs/data/material/components/drawers/demos/persistent-left/PersistentDrawerLeft.tsx
index 84e7902ba327f0..b245b503265027 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/demos/persistent-left/PersistentDrawerLeft.tsx
@@ -81,6 +81,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }));
 
 export default function PersistentDrawerLeft() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -193,4 +194,5 @@ export default function PersistentDrawerLeft() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/drawers/demos/persistent-left/index.ts b/docs/data/material/components/drawers/demos/persistent-left/index.ts
new file mode 100644
index 00000000000000..5721f06bfacd44
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/persistent-left/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PersistentDrawerLeft from './PersistentDrawerLeft';
+
+export default createDemo(import.meta.url, PersistentDrawerLeft);
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/demos/persistent-right/PersistentDrawerRight.tsx
similarity index 99%
rename from docs/data/material/components/drawers/PersistentDrawerRight.tsx
rename to docs/data/material/components/drawers/demos/persistent-right/PersistentDrawerRight.tsx
index 78746b5478ac6e..ba9db5dc58750d 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/demos/persistent-right/PersistentDrawerRight.tsx
@@ -88,6 +88,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }));
 
 export default function PersistentDrawerRight() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -194,4 +195,5 @@ export default function PersistentDrawerRight() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/drawers/demos/persistent-right/index.ts b/docs/data/material/components/drawers/demos/persistent-right/index.ts
new file mode 100644
index 00000000000000..9d85d2009a8434
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/persistent-right/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PersistentDrawerRight from './PersistentDrawerRight';
+
+export default createDemo(import.meta.url, PersistentDrawerRight);
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/demos/responsive/ResponsiveDrawer.tsx
similarity index 99%
rename from docs/data/material/components/drawers/ResponsiveDrawer.tsx
rename to docs/data/material/components/drawers/demos/responsive/ResponsiveDrawer.tsx
index abd4df47889566..c6e095227d1938 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/responsive/ResponsiveDrawer.tsx
@@ -27,6 +27,7 @@ interface Props {
 }
 
 export default function ResponsiveDrawer(props: Props) {
+  // @focus-start @padding 1
   const { window } = props;
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const [isClosing, setIsClosing] = React.useState(false);
@@ -176,4 +177,5 @@ export default function ResponsiveDrawer(props: Props) {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/drawers/demos/responsive/index.ts b/docs/data/material/components/drawers/demos/responsive/index.ts
new file mode 100644
index 00000000000000..f532387fce7355
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/responsive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ResponsiveDrawer from './ResponsiveDrawer';
+
+export default createDemo(import.meta.url, ResponsiveDrawer);
diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx b/docs/data/material/components/drawers/demos/swipeable-edge/SwipeableEdgeDrawer.tsx
similarity index 98%
rename from docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
rename to docs/data/material/components/drawers/demos/swipeable-edge/SwipeableEdgeDrawer.tsx
index a247bdd170515a..224a97e936a454 100644
--- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/swipeable-edge/SwipeableEdgeDrawer.tsx
@@ -48,6 +48,7 @@ const Puller = styled('div')(({ theme }) => ({
 }));
 
 export default function SwipeableEdgeDrawer(props: Props) {
+  // @focus-start @padding 1
   const { window } = props;
   const [open, setOpen] = React.useState(false);
 
@@ -102,4 +103,5 @@ export default function SwipeableEdgeDrawer(props: Props) {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/drawers/demos/swipeable-edge/index.ts b/docs/data/material/components/drawers/demos/swipeable-edge/index.ts
new file mode 100644
index 00000000000000..128d25a968edfd
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/swipeable-edge/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SwipeableEdgeDrawer from './SwipeableEdgeDrawer';
+
+export default createDemo(import.meta.url, SwipeableEdgeDrawer);
diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx b/docs/data/material/components/drawers/demos/swipeable-temporary/SwipeableTemporaryDrawer.tsx
similarity index 98%
rename from docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx
rename to docs/data/material/components/drawers/demos/swipeable-temporary/SwipeableTemporaryDrawer.tsx
index 94e8a5bb06260e..e53b74fda24fb7 100644
--- a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/swipeable-temporary/SwipeableTemporaryDrawer.tsx
@@ -73,6 +73,7 @@ export default function SwipeableTemporaryDrawer() {
 
   return (
     
    
+      {/* @focus-start */}
       {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
         
           
@@ -86,6 +87,7 @@ export default function SwipeableTemporaryDrawer() {
           
         
       ))}
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/drawers/demos/swipeable-temporary/index.ts b/docs/data/material/components/drawers/demos/swipeable-temporary/index.ts
new file mode 100644
index 00000000000000..5ab806ba98236f
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/swipeable-temporary/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SwipeableTemporaryDrawer from './SwipeableTemporaryDrawer';
+
+export default createDemo(import.meta.url, SwipeableTemporaryDrawer);
diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx b/docs/data/material/components/drawers/demos/temporary/TemporaryDrawer.tsx
similarity index 97%
rename from docs/data/material/components/drawers/TemporaryDrawer.tsx
rename to docs/data/material/components/drawers/demos/temporary/TemporaryDrawer.tsx
index 65bf707c0a93e7..04c7edca8ed859 100644
--- a/docs/data/material/components/drawers/TemporaryDrawer.tsx
+++ b/docs/data/material/components/drawers/demos/temporary/TemporaryDrawer.tsx
@@ -50,10 +50,12 @@ export default function TemporaryDrawer() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
         {DrawerList}
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/drawers/demos/temporary/index.ts b/docs/data/material/components/drawers/demos/temporary/index.ts
new file mode 100644
index 00000000000000..74c8a1938383db
--- /dev/null
+++ b/docs/data/material/components/drawers/demos/temporary/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TemporaryDrawer from './TemporaryDrawer';
+
+export default createDemo(import.meta.url, TemporaryDrawer);
diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md
index 74531f438b997e..a8576cc6012120 100644
--- a/docs/data/material/components/drawers/drawers.md
+++ b/docs/data/material/components/drawers/drawers.md
@@ -24,7 +24,7 @@ Temporary navigation drawers can toggle open or closed. Closed by default, the d
 The Drawer can be cancelled by clicking the overlay or pressing the Esc key.
 It closes when an item is selected, handled by controlling the `open` prop.
 
-{{"demo": "TemporaryDrawer.js"}}
+{{"component": "../data/material/components/drawers/demos/temporary/index.ts"}}
 
 ### Anchor
 
@@ -32,7 +32,7 @@ Use the `anchor` prop to specify which side of the screen the Drawer should orig
 
 The default value is `left`.
 
-{{"demo": "AnchorTemporaryDrawer.js"}}
+{{"component": "../data/material/components/drawers/demos/anchor-temporary/index.ts"}}
 
 ### Swipeable
 
@@ -42,7 +42,7 @@ This component comes with a 2 kB gzipped payload overhead.
 Some low-end mobile devices won't be able to follow the fingers at 60 FPS.
 You can use the `disableBackdropTransition` prop to help.
 
-{{"demo": "SwipeableTemporaryDrawer.js"}}
+{{"component": "../data/material/components/drawers/demos/swipeable-temporary/index.ts"}}
 
 The following properties are used in this documentation website for optimal usability of the component:
 
@@ -66,7 +66,7 @@ You can configure the `SwipeableDrawer` to have a visible edge when closed.
 If you are on a desktop, you can toggle the drawer with the "OPEN" button.
 If you are on mobile, you can open the demo in CodeSandbox ("edit" icon) and swipe.
 
-{{"demo": "SwipeableEdgeDrawer.js", "iframe": true, "disableLiveEdit": true, "height": 400, "maxWidth": 300}}
+{{"component": "../data/material/components/drawers/demos/swipeable-edge/index.ts", "iframe": true, "disableLiveEdit": true, "height": 400, "maxWidth": 300}}
 
 ### Keep mounted
 
@@ -93,7 +93,7 @@ Use `slots.transition` and `slotProps.transition` to replace it with another tra
 
 You can use the `temporary` variant to display a drawer for small screens and `permanent` for a drawer for wider screens.
 
-{{"demo": "ResponsiveDrawer.js", "iframe": true, "disableLiveEdit": true}}
+{{"component": "../data/material/components/drawers/demos/responsive/index.ts", "iframe": true, "disableLiveEdit": true}}
 
 ## Persistent drawer
 
@@ -107,9 +107,9 @@ When the drawer is outside of the page grid and opens, the drawer forces other c
 Persistent navigation drawers are acceptable for all sizes larger than mobile.
 They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.
 
-{{"demo": "PersistentDrawerLeft.js", "iframe": true}}
+{{"component": "../data/material/components/drawers/demos/persistent-left/index.ts", "iframe": true}}
 
-{{"demo": "PersistentDrawerRight.js", "iframe": true}}
+{{"component": "../data/material/components/drawers/demos/persistent-right/index.ts", "iframe": true}}
 
 ## Mini variant drawer
 
@@ -119,7 +119,7 @@ When expanded, it appears as the standard persistent navigation drawer.
 
 The mini variant is recommended for apps sections that need quick selection access alongside content.
 
-{{"demo": "MiniDrawer.js", "iframe": true}}
+{{"component": "../data/material/components/drawers/demos/mini/index.ts", "iframe": true}}
 
 ## Permanent drawer
 
@@ -131,12 +131,12 @@ Permanent navigation drawers are the **recommended default for desktop**.
 
 Apps focused on information consumption that use a left-to-right hierarchy.
 
-{{"demo": "PermanentDrawerLeft.js", "iframe": true}}
+{{"component": "../data/material/components/drawers/demos/permanent-left/index.ts", "iframe": true}}
 
-{{"demo": "PermanentDrawerRight.js", "iframe": true}}
+{{"component": "../data/material/components/drawers/demos/permanent-right/index.ts", "iframe": true}}
 
 ### Clipped under the app bar
 
 Apps focused on productivity that require balance across the screen.
 
-{{"demo": "ClippedDrawer.js", "iframe": true}}
+{{"component": "../data/material/components/drawers/demos/clipped/index.ts", "iframe": true}}
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js b/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js
deleted file mode 100644
index 5183158712b997..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Box from '@mui/material/Box';
-import Fab from '@mui/material/Fab';
-import NavigationIcon from '@mui/icons-material/Navigation';
-
-export default function FloatingActionButtonExtendedSize() {
-  return (
-     :not(style)': { m: 1 } }}>
-      
-        
-        Extended
-      
-      
-        
-        Extended
-      
-      
-        
-        Extended
-      
-    
-  );
-}
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview b/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview
deleted file mode 100644
index 8fd7b14b9adcc8..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-  Extended
-
-
-  
-  Extended
-
-
-  
-  Extended
-
\ No newline at end of file
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.js b/docs/data/material/components/floating-action-button/FloatingActionButtonSize.js
deleted file mode 100644
index c384cece050f53..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Box from '@mui/material/Box';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
-
-export default function FloatingActionButtonSize() {
-  return (
-     :not(style)': { m: 1 } }}>
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview b/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview
deleted file mode 100644
index fb3cea362f87e6..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  
-
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js b/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js
deleted file mode 100644
index c8313b1319066e..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
-import Zoom from '@mui/material/Zoom';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
-import EditIcon from '@mui/icons-material/Edit';
-import UpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { green } from '@mui/material/colors';
-import Box from '@mui/material/Box';
-
-function TabPanel(props) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    
-  );
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
-function a11yProps(index) {
-  return {
-    id: `action-tab-${index}`,
-    'aria-controls': `action-tabpanel-${index}`,
-  };
-}
-
-const fabStyle = {
-  position: 'absolute',
-  bottom: 16,
-  right: 16,
-};
-
-const fabGreenStyle = {
-  color: 'common.white',
-  bgcolor: green[500],
-  '&:hover': {
-    bgcolor: green[600],
-  },
-};
-
-export default function FloatingActionButtonZoom() {
-  const theme = useTheme();
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  const transitionDuration = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen,
-  };
-
-  const fabs = [
-    {
-      color: 'primary',
-      sx: fabStyle,
-      icon: ,
-      label: 'Add',
-    },
-    {
-      color: 'secondary',
-      sx: fabStyle,
-      icon: ,
-      label: 'Edit',
-    },
-    {
-      color: 'inherit',
-      sx: { ...fabStyle, ...fabGreenStyle },
-      icon: ,
-      label: 'Expand',
-    },
-  ];
-
-  return (
-    
-      
-        
-          
-          
-          
-        
-      
-      
-        Item One
-      
-      
-        Item Two
-      
-      
-        Item Three
-      
-      {fabs.map((fab, index) => (
-        
-          
-            {fab.icon}
-          
-        
-      ))}
-    
-  );
-}
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtons.js b/docs/data/material/components/floating-action-button/FloatingActionButtons.js
deleted file mode 100644
index b7e88c57ee92bf..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtons.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Box from '@mui/material/Box';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
-import EditIcon from '@mui/icons-material/Edit';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import NavigationIcon from '@mui/icons-material/Navigation';
-
-export default function FloatingActionButtons() {
-  return (
-     :not(style)': { m: 1 } }}>
-      
-        
-      
-      
-        
-      
-      
-        
-        Navigate
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview b/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview
deleted file mode 100644
index eefdddcd6bd7e0..00000000000000
--- a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-  
-
-
-  
-
-
-  
-  Navigate
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx b/docs/data/material/components/floating-action-button/demos/extended-size/FloatingActionButtonExtendedSize.tsx
similarity index 92%
rename from docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx
rename to docs/data/material/components/floating-action-button/demos/extended-size/FloatingActionButtonExtendedSize.tsx
index 5183158712b997..47b1c4f161cf14 100644
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx
+++ b/docs/data/material/components/floating-action-button/demos/extended-size/FloatingActionButtonExtendedSize.tsx
@@ -5,6 +5,7 @@ import NavigationIcon from '@mui/icons-material/Navigation';
 export default function FloatingActionButtonExtendedSize() {
   return (
      :not(style)': { m: 1 } }}>
+      {/* @focus-start */}
       
         
         Extended
@@ -17,6 +18,7 @@ export default function FloatingActionButtonExtendedSize() {
         
         Extended
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/floating-action-button/demos/extended-size/index.ts b/docs/data/material/components/floating-action-button/demos/extended-size/index.ts
new file mode 100644
index 00000000000000..f8c3870afcef4d
--- /dev/null
+++ b/docs/data/material/components/floating-action-button/demos/extended-size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FloatingActionButtonExtendedSize from './FloatingActionButtonExtendedSize';
+
+export default createDemo(import.meta.url, FloatingActionButtonExtendedSize);
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/FloatingActionButtons.tsx
similarity index 93%
rename from docs/data/material/components/floating-action-button/FloatingActionButtons.tsx
rename to docs/data/material/components/floating-action-button/demos/floating-action-buttons/FloatingActionButtons.tsx
index b7e88c57ee92bf..32cadf6b05312f 100644
--- a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx
+++ b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/FloatingActionButtons.tsx
@@ -8,6 +8,7 @@ import NavigationIcon from '@mui/icons-material/Navigation';
 export default function FloatingActionButtons() {
   return (
      :not(style)': { m: 1 } }}>
+      {/* @focus-start */}
       
         
       
@@ -21,6 +22,7 @@ export default function FloatingActionButtons() {
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts
new file mode 100644
index 00000000000000..6ee351186a6929
--- /dev/null
+++ b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FloatingActionButtons from './FloatingActionButtons';
+
+export default createDemo(import.meta.url, FloatingActionButtons);
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx b/docs/data/material/components/floating-action-button/demos/size/FloatingActionButtonSize.tsx
similarity index 90%
rename from docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx
rename to docs/data/material/components/floating-action-button/demos/size/FloatingActionButtonSize.tsx
index c384cece050f53..e343c0adf232c0 100644
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx
+++ b/docs/data/material/components/floating-action-button/demos/size/FloatingActionButtonSize.tsx
@@ -5,6 +5,7 @@ import AddIcon from '@mui/icons-material/Add';
 export default function FloatingActionButtonSize() {
   return (
      :not(style)': { m: 1 } }}>
+      {/* @focus-start */}
       
         
       
@@ -14,6 +15,7 @@ export default function FloatingActionButtonSize() {
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/floating-action-button/demos/size/index.ts b/docs/data/material/components/floating-action-button/demos/size/index.ts
new file mode 100644
index 00000000000000..93ec01680e400f
--- /dev/null
+++ b/docs/data/material/components/floating-action-button/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FloatingActionButtonSize from './FloatingActionButtonSize';
+
+export default createDemo(import.meta.url, FloatingActionButtonSize);
diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx b/docs/data/material/components/floating-action-button/demos/zoom/FloatingActionButtonZoom.tsx
similarity index 98%
rename from docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx
rename to docs/data/material/components/floating-action-button/demos/zoom/FloatingActionButtonZoom.tsx
index 0af35b2bfa8565..2acfe34973bfda 100644
--- a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx
+++ b/docs/data/material/components/floating-action-button/demos/zoom/FloatingActionButtonZoom.tsx
@@ -59,6 +59,7 @@ const fabGreenStyle = {
 };
 
 export default function FloatingActionButtonZoom() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [value, setValue] = React.useState(0);
 
@@ -141,4 +142,5 @@ export default function FloatingActionButtonZoom() {
       ))}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/floating-action-button/demos/zoom/index.ts b/docs/data/material/components/floating-action-button/demos/zoom/index.ts
new file mode 100644
index 00000000000000..ff5f343edfae82
--- /dev/null
+++ b/docs/data/material/components/floating-action-button/demos/zoom/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FloatingActionButtonZoom from './FloatingActionButtonZoom';
+
+export default createDemo(import.meta.url, FloatingActionButtonZoom);
diff --git a/docs/data/material/components/floating-action-button/floating-action-button.md b/docs/data/material/components/floating-action-button/floating-action-button.md
index cd565f8dfc8949..61703c47e9397f 100644
--- a/docs/data/material/components/floating-action-button/floating-action-button.md
+++ b/docs/data/material/components/floating-action-button/floating-action-button.md
@@ -21,15 +21,15 @@ Only one component is recommended per screen to represent the most common action
 
 ## Basic FAB
 
-{{"demo": "FloatingActionButtons.js"}}
+{{"component": "../data/material/components/floating-action-button/demos/floating-action-buttons/index.ts"}}
 
 ## Size
 
 By default, the size is `large`. Use the `size` prop for smaller floating action buttons.
 
-{{"demo": "FloatingActionButtonSize.js"}}
+{{"component": "../data/material/components/floating-action-button/demos/size/index.ts"}}
 
-{{"demo": "FloatingActionButtonExtendedSize.js"}}
+{{"component": "../data/material/components/floating-action-button/demos/extended-size/index.ts"}}
 
 ## Animation
 
@@ -42,4 +42,4 @@ The Zoom transition can be used to achieve this. Note that since both the exitin
 animations are triggered at the same time, we use `enterDelay` to allow the outgoing Floating Action Button's
 animation to finish before the new one enters.
 
-{{"demo": "FloatingActionButtonZoom.js", "bg": true}}
+{{"component": "../data/material/components/floating-action-button/demos/zoom/index.ts", "bg": true}}
diff --git a/docs/data/material/components/grid/AutoGrid.js b/docs/data/material/components/grid/AutoGrid.js
deleted file mode 100644
index d5e720e1412422..00000000000000
--- a/docs/data/material/components/grid/AutoGrid.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function AutoGrid() {
-  return (
-    
-      
-        
-          size=grow
-        
-        
-          size=6
-        
-        
-          size=grow
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/AutoGrid.tsx.preview b/docs/data/material/components/grid/AutoGrid.tsx.preview
deleted file mode 100644
index 422f5122eb59a6..00000000000000
--- a/docs/data/material/components/grid/AutoGrid.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-  
-    size=grow
-  
-  
-    size=6
-  
-  
-    size=grow
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/BasicGrid.js b/docs/data/material/components/grid/BasicGrid.js
deleted file mode 100644
index 3f508ee2f1ae0b..00000000000000
--- a/docs/data/material/components/grid/BasicGrid.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function BasicGrid() {
-  return (
-    
-      
-        
-          size=8
-        
-        
-          size=4
-        
-        
-          size=4
-        
-        
-          size=8
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/BasicGrid.tsx.preview b/docs/data/material/components/grid/BasicGrid.tsx.preview
deleted file mode 100644
index 94df5430aefb49..00000000000000
--- a/docs/data/material/components/grid/BasicGrid.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    size=8
-  
-  
-    size=4
-  
-  
-    size=4
-  
-  
-    size=8
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/CenteredElementGrid.js b/docs/data/material/components/grid/CenteredElementGrid.js
deleted file mode 100644
index 0f5fa14c9da4a8..00000000000000
--- a/docs/data/material/components/grid/CenteredElementGrid.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-
-export default function CenteredElementGrid() {
-  return (
-    
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/ColumnLayoutInsideGrid.js b/docs/data/material/components/grid/ColumnLayoutInsideGrid.js
deleted file mode 100644
index 97944a56346868..00000000000000
--- a/docs/data/material/components/grid/ColumnLayoutInsideGrid.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function ColumnLayoutInsideGrid() {
-  return (
-    
-      
-        
-          
-            Column 1 - Row 1
-            Column 1 - Row 2
-            Column 1 - Row 3
-          
-        
-        
-          Column 2
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview b/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview
deleted file mode 100644
index 14c49db798e79f..00000000000000
--- a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-    
-      Column 1 - Row 1
-      Column 1 - Row 2
-      Column 1 - Row 3
-    
-  
-  
-    Column 2
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/ColumnsGrid.js b/docs/data/material/components/grid/ColumnsGrid.js
deleted file mode 100644
index 6adb4f0de58d5f..00000000000000
--- a/docs/data/material/components/grid/ColumnsGrid.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function ColumnsGrid() {
-  return (
-    
-      
-        
-          size=8
-        
-        
-          size=8
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/ColumnsGrid.tsx.preview b/docs/data/material/components/grid/ColumnsGrid.tsx.preview
deleted file mode 100644
index 25d454075c6863..00000000000000
--- a/docs/data/material/components/grid/ColumnsGrid.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-    size=8
-  
-  
-    size=8
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/FullBorderedGrid.js b/docs/data/material/components/grid/FullBorderedGrid.js
deleted file mode 100644
index b516e9032275a3..00000000000000
--- a/docs/data/material/components/grid/FullBorderedGrid.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-
-export default function FullBorderedGrid() {
-  return (
-    
-       div': {
-            borderRight: 'var(--Grid-borderWidth) solid',
-            borderBottom: 'var(--Grid-borderWidth) solid',
-            borderColor: 'divider',
-          },
-        }}
-      >
-        {[...Array(6)].map((_, index) => (
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/FullWidthGrid.js b/docs/data/material/components/grid/FullWidthGrid.js
deleted file mode 100644
index be186d30f5bbb8..00000000000000
--- a/docs/data/material/components/grid/FullWidthGrid.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function FullWidthGrid() {
-  return (
-    
-      
-        
-          xs=6 md=8
-        
-        
-          xs=6 md=4
-        
-        
-          xs=6 md=4
-        
-        
-          xs=6 md=8
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/FullWidthGrid.tsx.preview b/docs/data/material/components/grid/FullWidthGrid.tsx.preview
deleted file mode 100644
index 255782d9b57349..00000000000000
--- a/docs/data/material/components/grid/FullWidthGrid.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    xs=6 md=8
-  
-  
-    xs=6 md=4
-  
-  
-    xs=6 md=4
-  
-  
-    xs=6 md=8
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/HalfBorderedGrid.js b/docs/data/material/components/grid/HalfBorderedGrid.js
deleted file mode 100644
index a26a26dba0f398..00000000000000
--- a/docs/data/material/components/grid/HalfBorderedGrid.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-
-export default function HalfBorderedGrid() {
-  const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 };
-  return (
-    
-       ({
-          '--Grid-borderWidth': '1px',
-          borderTop: 'var(--Grid-borderWidth) solid',
-          borderColor: 'divider',
-          '& > div': {
-            borderRight: 'var(--Grid-borderWidth) solid',
-            borderBottom: 'var(--Grid-borderWidth) solid',
-            borderColor: 'divider',
-            ...Object.keys(colWidth).reduce(
-              (result, key) => ({
-                ...result,
-                [`&:nth-of-type(${12 / colWidth[key]}n)`]: {
-                  [theme.breakpoints.only(key)]: {
-                    borderRight: 'none',
-                  },
-                },
-              }),
-              {},
-            ),
-          },
-        })}
-      >
-        {[...Array(6)].map((_, index) => (
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/InteractiveGrid.js b/docs/data/material/components/grid/InteractiveGrid.js
deleted file mode 100644
index 5f904add0d1fe7..00000000000000
--- a/docs/data/material/components/grid/InteractiveGrid.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import * as React from 'react';
-import Grid from '@mui/material/Grid';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import Paper from '@mui/material/Paper';
-import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode';
-
-export default function InteractiveGrid() {
-  const [direction, setDirection] = React.useState('row');
-  const [justifyContent, setJustifyContent] = React.useState('center');
-  const [alignItems, setAlignItems] = React.useState('center');
-
-  const jsx = `
-
-`;
-
-  return (
-    
-      
-        
-          {[0, 1, 2].map((value) => (
-            
-               ({
-                  p: 2,
-                  backgroundColor: '#fff',
-                  height: '100%',
-                  color: 'text.secondary',
-                  pt: `${(value + 1) * 10}px`,
-                  pb: `${(value + 1) * 10}px`,
-                  ...theme.applyStyles('dark', {
-                    backgroundColor: '#1A2027',
-                  }),
-                })}
-              >
-                {`Cell ${value + 1}`}
-              
-            
-          ))}
-        
-      
-      
-        
-          
-            
-              
-                direction
-                 {
-                    setDirection(event.target.value);
-                  }}
-                >
-                  } label="row" />
-                  }
-                    label="row-reverse"
-                  />
-                
-              
-            
-            
-              
-                justifyContent
-                 {
-                    setJustifyContent(event.target.value);
-                  }}
-                >
-                  }
-                    label="flex-start"
-                  />
-                  }
-                    label="center"
-                  />
-                  }
-                    label="flex-end"
-                  />
-                  }
-                    label="space-between"
-                  />
-                  }
-                    label="space-around"
-                  />
-                  }
-                    label="space-evenly"
-                  />
-                
-              
-            
-            
-              
-                alignItems
-                 {
-                    setAlignItems(event.target.value);
-                  }}
-                >
-                  }
-                    label="flex-start"
-                  />
-                  }
-                    label="center"
-                  />
-                  }
-                    label="flex-end"
-                  />
-                  }
-                    label="stretch"
-                  />
-                  }
-                    label="baseline"
-                  />
-                
-              
-            
-          
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/NestedGrid.js b/docs/data/material/components/grid/NestedGrid.js
deleted file mode 100644
index 8d92b226f3723a..00000000000000
--- a/docs/data/material/components/grid/NestedGrid.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function NestedGrid() {
-  return (
-    
-      
-        
-          Email subscribe section
-        
-        
-          
-            
-              
-                Category A
-              
-              
-                
  • Link 1.1
    • 
-                
  • Link 1.2
    • 
-                
  • Link 1.3
    • 
-              
-            
-          
-          
-            
-              
-                Category B
-              
-              
-                
  • Link 2.1
    • 
-                
  • Link 2.2
    • 
-                
  • Link 2.3
    • 
-                  
-                
-              
-          
-            
-              
-                Category C
-              
-              
-                
  • Link 3.1
    • 
-                
  • Link 3.2
    • 
-                
  • Link 3.3
    • 
-                  
-                
-              
-          
-            
-              
-                Category D
-              
-              
-                
  • Link 4.1
    • 
-                
  • Link 4.2
    • 
-                
  • Link 4.3
    • 
-                  
-                
-              
-        
-        
-          
-            © Copyright
-          
-          
-            
-              Link A
-            
-            
-              Link B
-            
-            
-              Link C
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/NestedGridColumns.js b/docs/data/material/components/grid/NestedGridColumns.js
deleted file mode 100644
index 1e9f23d290708a..00000000000000
--- a/docs/data/material/components/grid/NestedGridColumns.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function NestedGridColumns() {
-  return (
-    
-      
-        
-          size=8/24
-        
-        
-          
-            nested size=12/24
-          
-          
-            nested size=12/24
-          
-        
-        
-          size=8/24
-        
-        
-          
-            nested size=6/12
-          
-          
-            nested size=6/12
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/OffsetGrid.js b/docs/data/material/components/grid/OffsetGrid.js
deleted file mode 100644
index 26b9b7f12e83ff..00000000000000
--- a/docs/data/material/components/grid/OffsetGrid.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function OffsetGrid() {
-  return (
-    
-      
-        1
-      
-      
-        2
-      
-      
-        3
-      
-      
-        4
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/OffsetGrid.tsx.preview b/docs/data/material/components/grid/OffsetGrid.tsx.preview
deleted file mode 100644
index 946759cedfe43c..00000000000000
--- a/docs/data/material/components/grid/OffsetGrid.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    1
-  
-  
-    2
-  
-  
-    3
-  
-  
-    4
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/ResponsiveGrid.js b/docs/data/material/components/grid/ResponsiveGrid.js
deleted file mode 100644
index 500e7bf1c50193..00000000000000
--- a/docs/data/material/components/grid/ResponsiveGrid.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(2),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function ResponsiveGrid() {
-  return (
-    
-      
-        {Array.from(Array(6)).map((_, index) => (
-          
-            {index + 1}
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/ResponsiveGrid.tsx.preview b/docs/data/material/components/grid/ResponsiveGrid.tsx.preview
deleted file mode 100644
index b960ec563a5e61..00000000000000
--- a/docs/data/material/components/grid/ResponsiveGrid.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-  {Array.from(Array(6)).map((_, index) => (
-    
-      {index + 1}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.js b/docs/data/material/components/grid/RowAndColumnSpacing.js
deleted file mode 100644
index c61f32fb9a2580..00000000000000
--- a/docs/data/material/components/grid/RowAndColumnSpacing.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Box from '@mui/material/Box';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function RowAndColumnSpacing() {
-  return (
-    
-      
-        
-          1
-        
-        
-          2
-        
-        
-          3
-        
-        
-          4
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview b/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview
deleted file mode 100644
index 83d7265a44d051..00000000000000
--- a/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    1
-  
-  
-    2
-  
-  
-    3
-  
-  
-    4
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/SpacingGrid.js b/docs/data/material/components/grid/SpacingGrid.js
deleted file mode 100644
index bf2c4f496a21ed..00000000000000
--- a/docs/data/material/components/grid/SpacingGrid.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import Paper from '@mui/material/Paper';
-import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode';
-
-export default function SpacingGrid() {
-  const [spacing, setSpacing] = React.useState(2);
-
-  const handleChange = (event) => {
-    setSpacing(Number(event.target.value));
-  };
-
-  const jsx = `
-
-`;
-
-  return (
-    
-      
-        {[0, 1, 2].map((value) => (
-          
-             ({
-                height: 140,
-                width: 100,
-                backgroundColor: '#fff',
-                ...theme.applyStyles('dark', {
-                  backgroundColor: '#1A2027',
-                }),
-              })}
-            />
-          
-        ))}
-      
-      
-        
-          spacing
-          
-            {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
-              }
-                label={value.toString()}
-              />
-            ))}
-          
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/VariableWidthGrid.js b/docs/data/material/components/grid/VariableWidthGrid.js
deleted file mode 100644
index 0c7c188076f4ad..00000000000000
--- a/docs/data/material/components/grid/VariableWidthGrid.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function VariableWidthGrid() {
-  return (
-    
-      
-        
-          size=auto
-        
-        
-          size=6
-        
-        
-          size=grow
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/grid/VariableWidthGrid.tsx.preview b/docs/data/material/components/grid/VariableWidthGrid.tsx.preview
deleted file mode 100644
index e88443265d2ec0..00000000000000
--- a/docs/data/material/components/grid/VariableWidthGrid.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-  
-    size=auto
-  
-  
-    size=6
-  
-  
-    size=grow
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid/AutoGrid.tsx b/docs/data/material/components/grid/demos/auto/AutoGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/AutoGrid.tsx
rename to docs/data/material/components/grid/demos/auto/AutoGrid.tsx
index d5e720e1412422..3eed5ffe9ae5df 100644
--- a/docs/data/material/components/grid/AutoGrid.tsx
+++ b/docs/data/material/components/grid/demos/auto/AutoGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function AutoGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           size=grow
@@ -28,6 +29,7 @@ export default function AutoGrid() {
           size=grow
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/auto/index.ts b/docs/data/material/components/grid/demos/auto/index.ts
new file mode 100644
index 00000000000000..d7a1a589155e8a
--- /dev/null
+++ b/docs/data/material/components/grid/demos/auto/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AutoGrid from './AutoGrid';
+
+export default createDemo(import.meta.url, AutoGrid);
diff --git a/docs/data/material/components/grid/BasicGrid.tsx b/docs/data/material/components/grid/demos/basic/BasicGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/BasicGrid.tsx
rename to docs/data/material/components/grid/demos/basic/BasicGrid.tsx
index 3f508ee2f1ae0b..13125531ad2acb 100644
--- a/docs/data/material/components/grid/BasicGrid.tsx
+++ b/docs/data/material/components/grid/demos/basic/BasicGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function BasicGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           size=8
@@ -31,6 +32,7 @@ export default function BasicGrid() {
           size=8
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/basic/index.ts b/docs/data/material/components/grid/demos/basic/index.ts
new file mode 100644
index 00000000000000..c996a9680a8af6
--- /dev/null
+++ b/docs/data/material/components/grid/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicGrid from './BasicGrid';
+
+export default createDemo(import.meta.url, BasicGrid);
diff --git a/docs/data/material/components/grid/CenteredElementGrid.tsx b/docs/data/material/components/grid/demos/centered-element/CenteredElementGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/CenteredElementGrid.tsx
rename to docs/data/material/components/grid/demos/centered-element/CenteredElementGrid.tsx
index 0f5fa14c9da4a8..a18deab3589997 100644
--- a/docs/data/material/components/grid/CenteredElementGrid.tsx
+++ b/docs/data/material/components/grid/demos/centered-element/CenteredElementGrid.tsx
@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid';
 export default function CenteredElementGrid() {
   return (
     
+      {/* @focus-start */}
       
         
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/centered-element/index.ts b/docs/data/material/components/grid/demos/centered-element/index.ts
new file mode 100644
index 00000000000000..491dec85a44c08
--- /dev/null
+++ b/docs/data/material/components/grid/demos/centered-element/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CenteredElementGrid from './CenteredElementGrid';
+
+export default createDemo(import.meta.url, CenteredElementGrid);
diff --git a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx b/docs/data/material/components/grid/demos/column-layout-inside/ColumnLayoutInsideGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx
rename to docs/data/material/components/grid/demos/column-layout-inside/ColumnLayoutInsideGrid.tsx
index 97944a56346868..8ded310a959926 100644
--- a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx
+++ b/docs/data/material/components/grid/demos/column-layout-inside/ColumnLayoutInsideGrid.tsx
@@ -18,6 +18,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function ColumnLayoutInsideGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           
@@ -30,6 +31,7 @@ export default function ColumnLayoutInsideGrid() {
           Column 2
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/column-layout-inside/index.ts b/docs/data/material/components/grid/demos/column-layout-inside/index.ts
new file mode 100644
index 00000000000000..96f774e92b3264
--- /dev/null
+++ b/docs/data/material/components/grid/demos/column-layout-inside/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColumnLayoutInsideGrid from './ColumnLayoutInsideGrid';
+
+export default createDemo(import.meta.url, ColumnLayoutInsideGrid);
diff --git a/docs/data/material/components/grid/ColumnsGrid.tsx b/docs/data/material/components/grid/demos/columns/ColumnsGrid.tsx
similarity index 93%
rename from docs/data/material/components/grid/ColumnsGrid.tsx
rename to docs/data/material/components/grid/demos/columns/ColumnsGrid.tsx
index 6adb4f0de58d5f..b9beebd7524782 100644
--- a/docs/data/material/components/grid/ColumnsGrid.tsx
+++ b/docs/data/material/components/grid/demos/columns/ColumnsGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function ColumnsGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           size=8
@@ -25,6 +26,7 @@ export default function ColumnsGrid() {
           size=8
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/columns/index.ts b/docs/data/material/components/grid/demos/columns/index.ts
new file mode 100644
index 00000000000000..22e0388f3e3fe0
--- /dev/null
+++ b/docs/data/material/components/grid/demos/columns/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColumnsGrid from './ColumnsGrid';
+
+export default createDemo(import.meta.url, ColumnsGrid);
diff --git a/docs/data/material/components/grid/FullBorderedGrid.tsx b/docs/data/material/components/grid/demos/full-bordered/FullBorderedGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/FullBorderedGrid.tsx
rename to docs/data/material/components/grid/demos/full-bordered/FullBorderedGrid.tsx
index b516e9032275a3..62445d043c3f30 100644
--- a/docs/data/material/components/grid/FullBorderedGrid.tsx
+++ b/docs/data/material/components/grid/demos/full-bordered/FullBorderedGrid.tsx
@@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid';
 export default function FullBorderedGrid() {
   return (
     
+      {/* @focus-start */}
       
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/full-bordered/index.ts b/docs/data/material/components/grid/demos/full-bordered/index.ts
new file mode 100644
index 00000000000000..8cd2c782d9541d
--- /dev/null
+++ b/docs/data/material/components/grid/demos/full-bordered/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FullBorderedGrid from './FullBorderedGrid';
+
+export default createDemo(import.meta.url, FullBorderedGrid);
diff --git a/docs/data/material/components/grid/FullWidthGrid.tsx b/docs/data/material/components/grid/demos/full-width/FullWidthGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/FullWidthGrid.tsx
rename to docs/data/material/components/grid/demos/full-width/FullWidthGrid.tsx
index be186d30f5bbb8..a569651a547ea2 100644
--- a/docs/data/material/components/grid/FullWidthGrid.tsx
+++ b/docs/data/material/components/grid/demos/full-width/FullWidthGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function FullWidthGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           xs=6 md=8
@@ -31,6 +32,7 @@ export default function FullWidthGrid() {
           xs=6 md=8
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/full-width/index.ts b/docs/data/material/components/grid/demos/full-width/index.ts
new file mode 100644
index 00000000000000..3b5f5f2365f8aa
--- /dev/null
+++ b/docs/data/material/components/grid/demos/full-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FullWidthGrid from './FullWidthGrid';
+
+export default createDemo(import.meta.url, FullWidthGrid);
diff --git a/docs/data/material/components/grid/HalfBorderedGrid.tsx b/docs/data/material/components/grid/demos/half-bordered/HalfBorderedGrid.tsx
similarity index 96%
rename from docs/data/material/components/grid/HalfBorderedGrid.tsx
rename to docs/data/material/components/grid/demos/half-bordered/HalfBorderedGrid.tsx
index 938b43e06ed82a..a8d697ddd5e0f6 100644
--- a/docs/data/material/components/grid/HalfBorderedGrid.tsx
+++ b/docs/data/material/components/grid/demos/half-bordered/HalfBorderedGrid.tsx
@@ -2,6 +2,7 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 
 export default function HalfBorderedGrid() {
+  // @focus-start @padding 1
   const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 } as const;
   return (
     
@@ -35,4 +36,5 @@ export default function HalfBorderedGrid() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/grid/demos/half-bordered/index.ts b/docs/data/material/components/grid/demos/half-bordered/index.ts
new file mode 100644
index 00000000000000..8768f53686f609
--- /dev/null
+++ b/docs/data/material/components/grid/demos/half-bordered/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HalfBorderedGrid from './HalfBorderedGrid';
+
+export default createDemo(import.meta.url, HalfBorderedGrid);
diff --git a/docs/data/material/components/grid/InteractiveGrid.tsx b/docs/data/material/components/grid/demos/interactive/InteractiveGrid.tsx
similarity index 99%
rename from docs/data/material/components/grid/InteractiveGrid.tsx
rename to docs/data/material/components/grid/demos/interactive/InteractiveGrid.tsx
index 72b579b1c68133..66e0ac2f6beb65 100644
--- a/docs/data/material/components/grid/InteractiveGrid.tsx
+++ b/docs/data/material/components/grid/demos/interactive/InteractiveGrid.tsx
@@ -24,6 +24,7 @@ type GridJustification =
   | 'space-evenly';
 
 export default function InteractiveGrid() {
+  // @focus-start @padding 1
   const [direction, setDirection] = React.useState('row');
   const [justifyContent, setJustifyContent] =
     React.useState('center');
@@ -193,4 +194,5 @@ export default function InteractiveGrid() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/grid/demos/interactive/index.ts b/docs/data/material/components/grid/demos/interactive/index.ts
new file mode 100644
index 00000000000000..dd42c47bc67995
--- /dev/null
+++ b/docs/data/material/components/grid/demos/interactive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InteractiveGrid from './InteractiveGrid';
+
+export default createDemo(import.meta.url, InteractiveGrid);
diff --git a/docs/data/material/components/grid/NestedGridColumns.tsx b/docs/data/material/components/grid/demos/nested-columns/NestedGridColumns.tsx
similarity index 95%
rename from docs/data/material/components/grid/NestedGridColumns.tsx
rename to docs/data/material/components/grid/demos/nested-columns/NestedGridColumns.tsx
index 1e9f23d290708a..92764c83463418 100644
--- a/docs/data/material/components/grid/NestedGridColumns.tsx
+++ b/docs/data/material/components/grid/demos/nested-columns/NestedGridColumns.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function NestedGridColumns() {
   return (
     
+      {/* @focus-start */}
       
         
           size=8/24
@@ -41,6 +42,7 @@ export default function NestedGridColumns() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/nested-columns/index.ts b/docs/data/material/components/grid/demos/nested-columns/index.ts
new file mode 100644
index 00000000000000..e3456278cdc403
--- /dev/null
+++ b/docs/data/material/components/grid/demos/nested-columns/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NestedGridColumns from './NestedGridColumns';
+
+export default createDemo(import.meta.url, NestedGridColumns);
diff --git a/docs/data/material/components/grid/NestedGrid.tsx b/docs/data/material/components/grid/demos/nested/NestedGrid.tsx
similarity index 98%
rename from docs/data/material/components/grid/NestedGrid.tsx
rename to docs/data/material/components/grid/demos/nested/NestedGrid.tsx
index 8d92b226f3723a..cb040b4117ad1a 100644
--- a/docs/data/material/components/grid/NestedGrid.tsx
+++ b/docs/data/material/components/grid/demos/nested/NestedGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function NestedGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           Email subscribe section
@@ -109,6 +110,7 @@ export default function NestedGrid() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/nested/index.ts b/docs/data/material/components/grid/demos/nested/index.ts
new file mode 100644
index 00000000000000..dd4e708966a385
--- /dev/null
+++ b/docs/data/material/components/grid/demos/nested/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NestedGrid from './NestedGrid';
+
+export default createDemo(import.meta.url, NestedGrid);
diff --git a/docs/data/material/components/grid/OffsetGrid.tsx b/docs/data/material/components/grid/demos/offset/OffsetGrid.tsx
similarity index 95%
rename from docs/data/material/components/grid/OffsetGrid.tsx
rename to docs/data/material/components/grid/demos/offset/OffsetGrid.tsx
index 26b9b7f12e83ff..e9bbbbdac6778d 100644
--- a/docs/data/material/components/grid/OffsetGrid.tsx
+++ b/docs/data/material/components/grid/demos/offset/OffsetGrid.tsx
@@ -14,6 +14,7 @@ const Item = styled(Paper)(({ theme }) => ({
 }));
 
 export default function OffsetGrid() {
+  // @focus-start @padding 1
   return (
     
       
@@ -30,4 +31,5 @@ export default function OffsetGrid() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/grid/demos/offset/index.ts b/docs/data/material/components/grid/demos/offset/index.ts
new file mode 100644
index 00000000000000..2f98d88440c947
--- /dev/null
+++ b/docs/data/material/components/grid/demos/offset/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OffsetGrid from './OffsetGrid';
+
+export default createDemo(import.meta.url, OffsetGrid);
diff --git a/docs/data/material/components/grid/ResponsiveGrid.tsx b/docs/data/material/components/grid/demos/responsive/ResponsiveGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/ResponsiveGrid.tsx
rename to docs/data/material/components/grid/demos/responsive/ResponsiveGrid.tsx
index 500e7bf1c50193..da628f5dd8d75f 100644
--- a/docs/data/material/components/grid/ResponsiveGrid.tsx
+++ b/docs/data/material/components/grid/demos/responsive/ResponsiveGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function ResponsiveGrid() {
   return (
     
+      {/* @focus-start */}
       
         {Array.from(Array(6)).map((_, index) => (
           
@@ -24,6 +25,7 @@ export default function ResponsiveGrid() {
           
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/responsive/index.ts b/docs/data/material/components/grid/demos/responsive/index.ts
new file mode 100644
index 00000000000000..b053e5d63f1963
--- /dev/null
+++ b/docs/data/material/components/grid/demos/responsive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ResponsiveGrid from './ResponsiveGrid';
+
+export default createDemo(import.meta.url, ResponsiveGrid);
diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.tsx b/docs/data/material/components/grid/demos/row-and-column-spacing/RowAndColumnSpacing.tsx
similarity index 94%
rename from docs/data/material/components/grid/RowAndColumnSpacing.tsx
rename to docs/data/material/components/grid/demos/row-and-column-spacing/RowAndColumnSpacing.tsx
index c61f32fb9a2580..48de5132dbcefc 100644
--- a/docs/data/material/components/grid/RowAndColumnSpacing.tsx
+++ b/docs/data/material/components/grid/demos/row-and-column-spacing/RowAndColumnSpacing.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function RowAndColumnSpacing() {
   return (
     
+      {/* @focus-start */}
       
         
           1
@@ -31,6 +32,7 @@ export default function RowAndColumnSpacing() {
           4
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/row-and-column-spacing/index.ts b/docs/data/material/components/grid/demos/row-and-column-spacing/index.ts
new file mode 100644
index 00000000000000..5e2149edb4d8be
--- /dev/null
+++ b/docs/data/material/components/grid/demos/row-and-column-spacing/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RowAndColumnSpacing from './RowAndColumnSpacing';
+
+export default createDemo(import.meta.url, RowAndColumnSpacing);
diff --git a/docs/data/material/components/grid/SpacingGrid.tsx b/docs/data/material/components/grid/demos/spacing/SpacingGrid.tsx
similarity index 97%
rename from docs/data/material/components/grid/SpacingGrid.tsx
rename to docs/data/material/components/grid/demos/spacing/SpacingGrid.tsx
index 9d7e5691ec78ce..9ae12cb042e861 100644
--- a/docs/data/material/components/grid/SpacingGrid.tsx
+++ b/docs/data/material/components/grid/demos/spacing/SpacingGrid.tsx
@@ -10,6 +10,7 @@ import Paper from '@mui/material/Paper';
 import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode';
 
 export default function SpacingGrid() {
+  // @focus-start @padding 1
   const [spacing, setSpacing] = React.useState(2);
 
   const handleChange = (event: React.ChangeEvent) => {
@@ -71,4 +72,5 @@ export default function SpacingGrid() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/grid/demos/spacing/index.ts b/docs/data/material/components/grid/demos/spacing/index.ts
new file mode 100644
index 00000000000000..583ff095c68bcd
--- /dev/null
+++ b/docs/data/material/components/grid/demos/spacing/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SpacingGrid from './SpacingGrid';
+
+export default createDemo(import.meta.url, SpacingGrid);
diff --git a/docs/data/material/components/grid/VariableWidthGrid.tsx b/docs/data/material/components/grid/demos/variable-width/VariableWidthGrid.tsx
similarity index 94%
rename from docs/data/material/components/grid/VariableWidthGrid.tsx
rename to docs/data/material/components/grid/demos/variable-width/VariableWidthGrid.tsx
index 0c7c188076f4ad..c8be0e536c2a7b 100644
--- a/docs/data/material/components/grid/VariableWidthGrid.tsx
+++ b/docs/data/material/components/grid/demos/variable-width/VariableWidthGrid.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function VariableWidthGrid() {
   return (
     
+      {/* @focus-start */}
       
         
           size=auto
@@ -28,6 +29,7 @@ export default function VariableWidthGrid() {
           size=grow
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/grid/demos/variable-width/index.ts b/docs/data/material/components/grid/demos/variable-width/index.ts
new file mode 100644
index 00000000000000..ed1f6637bc8521
--- /dev/null
+++ b/docs/data/material/components/grid/demos/variable-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VariableWidthGrid from './VariableWidthGrid';
+
+export default createDemo(import.meta.url, VariableWidthGrid);
diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md
index 60f9586bc98aaf..153859fa452ca5 100644
--- a/docs/data/material/components/grid/grid.md
+++ b/docs/data/material/components/grid/grid.md
@@ -46,7 +46,7 @@ Use the `container` prop to create a grid container that wraps the grid items (t
 Column widths are integer values between 1 and 12.
 For example, an item with `size={6}` occupies half of the grid container's width.
 
-{{"demo": "BasicGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/basic/index.ts", "bg": true}}
 
 ### Multiple breakpoints
 
@@ -56,7 +56,7 @@ Width values apply to all wider breakpoints, and larger breakpoints override tho
 For example, a component with `size={{ xs: 12, sm: 6 }}` occupies the entire viewport width when the viewport is [less than 600 pixels wide](/material-ui/customization/breakpoints/#default-breakpoints).
 When the viewport grows beyond this size, the component occupies half of the total width—six columns rather than 12.
 
-{{"demo": "FullWidthGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/full-width/index.ts", "bg": true}}
 
 ## Spacing
 
@@ -66,21 +66,21 @@ The prop is converted into a CSS property using the [`theme.spacing()`](/materia
 
 The following demo illustrates the use of the `spacing` prop:
 
-{{"demo": "SpacingGrid.js", "bg": true, "hideToolbar": true}}
+{{"component": "../data/material/components/grid/demos/spacing/index.ts", "bg": true, "hideToolbar": true}}
 
 ### Row and column spacing
 
 The `rowSpacing` and `columnSpacing` props let you specify row and column gaps independently of one another.
 They behave similarly to the `row-gap` and `column-gap` properties of [CSS Grid](/system/grid/#row-gap-column-gap).
 
-{{"demo": "RowAndColumnSpacing.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/row-and-column-spacing/index.ts", "bg": true}}
 
 ## Responsive values
 
 You can set prop values to change when a given breakpoint is active.
 For instance, we can implement Material Design's [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo:
 
-{{"demo": "ResponsiveGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/responsive/index.ts", "bg": true}}
 
 Responsive values are supported by:
 
@@ -96,21 +96,21 @@ Responsive values are supported by:
 
 Below is an interactive demo that lets you explore the visual results of the different settings:
 
-{{"demo": "InteractiveGrid.js", "hideToolbar": true, "bg": true}}
+{{"component": "../data/material/components/grid/demos/interactive/index.ts", "hideToolbar": true, "bg": true}}
 
 ## Auto-layout
 
 The auto-layout feature gives equal space to all items present.
 When you set the width of one item, the others will automatically resize to match it.
 
-{{"demo": "AutoGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/auto/index.ts", "bg": true}}
 
 ### Variable width content
 
 When a breakpoint's value is given as `"auto"`, then a column's size will automatically adjust to match the width of its content.
 The demo below shows how this works:
 
-{{"demo": "VariableWidthGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/variable-width/index.ts", "bg": true}}
 
 ## Nested grid
 
@@ -134,19 +134,19 @@ Note that a nested grid container should be a direct child of another grid conta
 
 A nested grid container inherits the row and column spacing from its parent unless the `spacing` prop is specified to the instance.
 
-{{"demo": "NestedGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/nested/index.ts", "bg": true}}
 
 ### Inheriting columns
 
 A nested grid container inherits the columns from its parent unless the `columns` prop is specified to the instance.
 
-{{"demo": "NestedGridColumns.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/nested-columns/index.ts", "bg": true}}
 
 ## Columns
 
 Use the `columns` prop to change the default number of columns (12) in the grid, as shown below:
 
-{{"demo": "ColumnsGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/columns/index.ts", "bg": true}}
 
 ## Offset
 
@@ -158,7 +158,7 @@ This props accepts:
 
 The demo below illustrates how to use the offset props:
 
-{{"demo": "OffsetGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/offset/index.ts", "bg": true}}
 
 ## Custom breakpoints
 
@@ -226,7 +226,7 @@ declare module '@mui/system' {
 To center a grid item's content, specify `display="flex"` directly on the item.
 Then use `justifyContent` and/or `alignItems` to adjust the position of the content, as shown below:
 
-{{"demo": "CenteredElementGrid.js", "bg": true}}
+{{"component": "../data/material/components/grid/demos/centered-element/index.ts", "bg": true}}
 
 :::warning
 Using the `container` prop does not work in this situation because the grid container is designed exclusively to wrap grid items.
@@ -235,11 +235,11 @@ It cannot wrap other elements.
 
 ### Full border
 
-{{"demo": "FullBorderedGrid.js"}}
+{{"component": "../data/material/components/grid/demos/full-bordered/index.ts"}}
 
 ### Half border
 
-{{"demo": "HalfBorderedGrid.js"}}
+{{"component": "../data/material/components/grid/demos/half-bordered/index.ts"}}
 
 ## Limitations
 
@@ -250,4 +250,4 @@ The Grid component is specifically designed to subdivide a layout into columns,
 You should not use the Grid component on its own to stack layout elements vertically.
 Instead, you should use the [Stack component](/material-ui/react-stack/) inside of a Grid to create vertical layouts as shown below:
 
-{{"demo": "ColumnLayoutInsideGrid.js"}}
+{{"component": "../data/material/components/grid/demos/column-layout-inside/index.ts"}}
diff --git a/docs/data/material/components/icons/CreateSvgIcon.js b/docs/data/material/components/icons/CreateSvgIcon.js
deleted file mode 100644
index e19985430ce663..00000000000000
--- a/docs/data/material/components/icons/CreateSvgIcon.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Stack from '@mui/material/Stack';
-import { createSvgIcon } from '@mui/material/utils';
-
-const HomeIcon = createSvgIcon(
-  ,
-  'Home',
-);
-
-const PlusIcon = createSvgIcon(
-  // credit: plus icon from https://heroicons.com
-  
-    
-  ,
-  'Plus',
-);
-
-export default function CreateSvgIcon() {
-  return (
-    
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx.preview b/docs/data/material/components/icons/CreateSvgIcon.tsx.preview
deleted file mode 100644
index f7d39e80460db9..00000000000000
--- a/docs/data/material/components/icons/CreateSvgIcon.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.js b/docs/data/material/components/icons/FontAwesomeIcon.js
deleted file mode 100644
index 95b0dda7e369f4..00000000000000
--- a/docs/data/material/components/icons/FontAwesomeIcon.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { loadCSS } from 'fg-loadcss';
-import Stack from '@mui/material/Stack';
-import { green } from '@mui/material/colors';
-import Icon from '@mui/material/Icon';
-
-export default function FontAwesomeIcon() {
-  React.useEffect(() => {
-    const node = loadCSS(
-      'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
-      // Inject before JSS
-      document.querySelector('#font-awesome-css') || document.head.firstChild,
-    );
-
-    return () => {
-      node.parentNode.removeChild(node);
-    };
-  }, []);
-
-  return (
-    
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.tsx.preview b/docs/data/material/components/icons/FontAwesomeIcon.tsx.preview
deleted file mode 100644
index e8fcf1ceb7f8b1..00000000000000
--- a/docs/data/material/components/icons/FontAwesomeIcon.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.js b/docs/data/material/components/icons/FontAwesomeIconSize.js
deleted file mode 100644
index 7aa4e5fcc5e49c..00000000000000
--- a/docs/data/material/components/icons/FontAwesomeIconSize.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { loadCSS } from 'fg-loadcss';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
-import Icon from '@mui/material/Icon';
-import MdPhone from '@mui/icons-material/Phone';
-import Chip from '@mui/material/Chip';
-
-const theme = createTheme({
-  components: {
-    MuiIcon: {
-      styleOverrides: {
-        root: {
-          // Match 24px = 3 * 2 + 1.125 * 16
-          boxSizing: 'content-box',
-          padding: 3,
-          fontSize: '1.125rem',
-        },
-      },
-    },
-  },
-});
-
-export default function FontAwesomeIconSize() {
-  React.useEffect(() => {
-    const node = loadCSS(
-      'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
-      // Inject before JSS
-      document.querySelector('#font-awesome-css') || document.head.firstChild,
-    );
-
-    return () => {
-      node.parentNode.removeChild(node);
-    };
-  }, []);
-
-  return (
-    
-      
-        } label="Call me" />
-        } label="Call me" />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview b/docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview
deleted file mode 100644
index c7360ee433455f..00000000000000
--- a/docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-  } label="Call me" />
-  } label="Call me" />
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/Icons.js b/docs/data/material/components/icons/Icons.js
deleted file mode 100644
index f0c5758a290ef7..00000000000000
--- a/docs/data/material/components/icons/Icons.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Stack from '@mui/material/Stack';
-import { green } from '@mui/material/colors';
-import Icon from '@mui/material/Icon';
-
-export default function Icons() {
-  return (
-    
-      add_circle
-      add_circle
-      add_circle
-      add_circle
-      add_circle
-    
-  );
-}
diff --git a/docs/data/material/components/icons/Icons.tsx.preview b/docs/data/material/components/icons/Icons.tsx.preview
deleted file mode 100644
index 27c109ce20eaf2..00000000000000
--- a/docs/data/material/components/icons/Icons.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-add_circle
-add_circle
-add_circle
-add_circle
-add_circle
\ No newline at end of file
diff --git a/docs/data/material/components/icons/SvgIconChildren.js b/docs/data/material/components/icons/SvgIconChildren.js
deleted file mode 100644
index bdf033d36916bc..00000000000000
--- a/docs/data/material/components/icons/SvgIconChildren.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import SvgIcon from '@mui/material/SvgIcon';
-
-export default function SvgIconChildren() {
-  return (
-    
-      {/* credit: cog icon from https://heroicons.com */}
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/SvgIconChildren.tsx.preview b/docs/data/material/components/icons/SvgIconChildren.tsx.preview
deleted file mode 100644
index a64abc81772664..00000000000000
--- a/docs/data/material/components/icons/SvgIconChildren.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  {/* credit: cog icon from https://heroicons.com */}
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/SvgIconsColor.js b/docs/data/material/components/icons/SvgIconsColor.js
deleted file mode 100644
index 1501eaf3391ad1..00000000000000
--- a/docs/data/material/components/icons/SvgIconsColor.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Stack from '@mui/material/Stack';
-import { pink } from '@mui/material/colors';
-import SvgIcon from '@mui/material/SvgIcon';
-
-function HomeIcon(props) {
-  return (
-    
-      
-    
-  );
-}
-
-export default function SvgIconsColor() {
-  return (
-    
-      
-      
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/SvgIconsColor.tsx.preview b/docs/data/material/components/icons/SvgIconsColor.tsx.preview
deleted file mode 100644
index bddc1fd64c3ecd..00000000000000
--- a/docs/data/material/components/icons/SvgIconsColor.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/SvgIconsSize.js b/docs/data/material/components/icons/SvgIconsSize.js
deleted file mode 100644
index 87b91aad4afa02..00000000000000
--- a/docs/data/material/components/icons/SvgIconsSize.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Stack from '@mui/material/Stack';
-import SvgIcon from '@mui/material/SvgIcon';
-
-function HomeIcon(props) {
-  return (
-    
-      
-    
-  );
-}
-
-export default function SvgIconsSize() {
-  return (
-    
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/SvgIconsSize.tsx.preview b/docs/data/material/components/icons/SvgIconsSize.tsx.preview
deleted file mode 100644
index e3f3f8a51de838..00000000000000
--- a/docs/data/material/components/icons/SvgIconsSize.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/SvgMaterialIcons.js b/docs/data/material/components/icons/SvgMaterialIcons.js
deleted file mode 100644
index 73f2a9796f04a5..00000000000000
--- a/docs/data/material/components/icons/SvgMaterialIcons.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
-import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
-import DeleteSharpIcon from '@mui/icons-material/DeleteSharp';
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import DeleteForeverOutlinedIcon from '@mui/icons-material/DeleteForeverOutlined';
-import DeleteForeverRoundedIcon from '@mui/icons-material/DeleteForeverRounded';
-import DeleteForeverTwoToneIcon from '@mui/icons-material/DeleteForeverTwoTone';
-import DeleteForeverSharpIcon from '@mui/icons-material/DeleteForeverSharp';
-import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
-import FourKIcon from '@mui/icons-material/FourK';
-import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty';
-
-export default function SvgMaterialIcons() {
-  return (
-    
-      
-        
-          Filled
-        
-        
-          
-          
-        
-        
-          Outlined
-        
-        
-          
-          
-        
-        
-          Rounded
-        
-        
-          
-          
-        
-        
-          Two Tone
-        
-        
-          
-          
-        
-        
-          Sharp
-        
-        
-          
-          
-        
-        
-          Edge-cases
-        
-        
-          
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/icons/TwoToneIcons.js b/docs/data/material/components/icons/TwoToneIcons.js
deleted file mode 100644
index 3343d558513980..00000000000000
--- a/docs/data/material/components/icons/TwoToneIcons.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useTheme } from '@mui/material/styles';
-import Icon from '@mui/material/Icon';
-
-const useIsDarkMode = () => {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-};
-
-export default function TwoToneIcons() {
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    
-      add_circle
-    
-  );
-}
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx.preview b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
deleted file mode 100644
index cb8e32dc53f440..00000000000000
--- a/docs/data/material/components/icons/TwoToneIcons.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  add_circle
-
\ No newline at end of file
diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx b/docs/data/material/components/icons/demos/create-svg/CreateSvgIcon.tsx
similarity index 92%
rename from docs/data/material/components/icons/CreateSvgIcon.tsx
rename to docs/data/material/components/icons/demos/create-svg/CreateSvgIcon.tsx
index e19985430ce663..ef3d3f23d8c18d 100644
--- a/docs/data/material/components/icons/CreateSvgIcon.tsx
+++ b/docs/data/material/components/icons/demos/create-svg/CreateSvgIcon.tsx
@@ -17,10 +17,12 @@ const PlusIcon = createSvgIcon(
 export default function CreateSvgIcon() {
   return (
     
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/create-svg/index.ts b/docs/data/material/components/icons/demos/create-svg/index.ts
new file mode 100644
index 00000000000000..383c8ca44ad695
--- /dev/null
+++ b/docs/data/material/components/icons/demos/create-svg/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CreateSvgIcon from './CreateSvgIcon';
+
+export default createDemo(import.meta.url, CreateSvgIcon);
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.tsx b/docs/data/material/components/icons/demos/font-awesome-size/FontAwesomeIconSize.tsx
similarity index 95%
rename from docs/data/material/components/icons/FontAwesomeIconSize.tsx
rename to docs/data/material/components/icons/demos/font-awesome-size/FontAwesomeIconSize.tsx
index faf9294140aba3..1b9e2599016d62 100644
--- a/docs/data/material/components/icons/FontAwesomeIconSize.tsx
+++ b/docs/data/material/components/icons/demos/font-awesome-size/FontAwesomeIconSize.tsx
@@ -37,10 +37,12 @@ export default function FontAwesomeIconSize() {
 
   return (
     
+      {/* @focus-start */}
       
         } label="Call me" />
         } label="Call me" />
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/font-awesome-size/index.ts b/docs/data/material/components/icons/demos/font-awesome-size/index.ts
new file mode 100644
index 00000000000000..00deaa32c85bcf
--- /dev/null
+++ b/docs/data/material/components/icons/demos/font-awesome-size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FontAwesomeIconSize from './FontAwesomeIconSize';
+
+export default createDemo(import.meta.url, FontAwesomeIconSize);
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.tsx b/docs/data/material/components/icons/demos/font-awesome/FontAwesomeIcon.tsx
similarity index 95%
rename from docs/data/material/components/icons/FontAwesomeIcon.tsx
rename to docs/data/material/components/icons/demos/font-awesome/FontAwesomeIcon.tsx
index fcb3304d718288..7fe0f73d197610 100644
--- a/docs/data/material/components/icons/FontAwesomeIcon.tsx
+++ b/docs/data/material/components/icons/demos/font-awesome/FontAwesomeIcon.tsx
@@ -20,6 +20,7 @@ export default function FontAwesomeIcon() {
 
   return (
     
+      {/* @focus-start */}
       
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/font-awesome/index.ts b/docs/data/material/components/icons/demos/font-awesome/index.ts
new file mode 100644
index 00000000000000..47142865b42359
--- /dev/null
+++ b/docs/data/material/components/icons/demos/font-awesome/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FontAwesomeIcon from './FontAwesomeIcon';
+
+export default createDemo(import.meta.url, FontAwesomeIcon);
diff --git a/docs/data/material/components/icons/Icons.tsx b/docs/data/material/components/icons/demos/icons/Icons.tsx
similarity index 89%
rename from docs/data/material/components/icons/Icons.tsx
rename to docs/data/material/components/icons/demos/icons/Icons.tsx
index f0c5758a290ef7..a0edadc1b3ef1d 100644
--- a/docs/data/material/components/icons/Icons.tsx
+++ b/docs/data/material/components/icons/demos/icons/Icons.tsx
@@ -5,11 +5,13 @@ import Icon from '@mui/material/Icon';
 export default function Icons() {
   return (
     
+      {/* @focus-start */}
       add_circle
       add_circle
       add_circle
       add_circle
       add_circle
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/icons/index.ts b/docs/data/material/components/icons/demos/icons/index.ts
new file mode 100644
index 00000000000000..dae6a222b9fddf
--- /dev/null
+++ b/docs/data/material/components/icons/demos/icons/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Icons from './Icons';
+
+export default createDemo(import.meta.url, Icons);
diff --git a/docs/data/material/components/icons/SvgIconChildren.tsx b/docs/data/material/components/icons/demos/svg-children/SvgIconChildren.tsx
similarity index 94%
rename from docs/data/material/components/icons/SvgIconChildren.tsx
rename to docs/data/material/components/icons/demos/svg-children/SvgIconChildren.tsx
index bdf033d36916bc..1251afba56bbdb 100644
--- a/docs/data/material/components/icons/SvgIconChildren.tsx
+++ b/docs/data/material/components/icons/demos/svg-children/SvgIconChildren.tsx
@@ -1,6 +1,7 @@
 import SvgIcon from '@mui/material/SvgIcon';
 
 export default function SvgIconChildren() {
+  // @focus-start @padding 1
   return (
     
       {/* credit: cog icon from https://heroicons.com */}
@@ -13,4 +14,5 @@ export default function SvgIconChildren() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/icons/demos/svg-children/index.ts b/docs/data/material/components/icons/demos/svg-children/index.ts
new file mode 100644
index 00000000000000..505c190cee5b14
--- /dev/null
+++ b/docs/data/material/components/icons/demos/svg-children/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SvgIconChildren from './SvgIconChildren';
+
+export default createDemo(import.meta.url, SvgIconChildren);
diff --git a/docs/data/material/components/icons/SvgIconsColor.tsx b/docs/data/material/components/icons/demos/svg-color/SvgIconsColor.tsx
similarity index 92%
rename from docs/data/material/components/icons/SvgIconsColor.tsx
rename to docs/data/material/components/icons/demos/svg-color/SvgIconsColor.tsx
index 731b9dbd5032b4..1826ff91438ff7 100644
--- a/docs/data/material/components/icons/SvgIconsColor.tsx
+++ b/docs/data/material/components/icons/demos/svg-color/SvgIconsColor.tsx
@@ -13,6 +13,7 @@ function HomeIcon(props: SvgIconProps) {
 export default function SvgIconsColor() {
   return (
     
+      {/* @focus-start */}
       
       
       
@@ -20,6 +21,7 @@ export default function SvgIconsColor() {
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/svg-color/index.ts b/docs/data/material/components/icons/demos/svg-color/index.ts
new file mode 100644
index 00000000000000..6d26f82a2676cc
--- /dev/null
+++ b/docs/data/material/components/icons/demos/svg-color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SvgIconsColor from './SvgIconsColor';
+
+export default createDemo(import.meta.url, SvgIconsColor);
diff --git a/docs/data/material/components/icons/SvgMaterialIcons.tsx b/docs/data/material/components/icons/demos/svg-material/SvgMaterialIcons.tsx
similarity index 97%
rename from docs/data/material/components/icons/SvgMaterialIcons.tsx
rename to docs/data/material/components/icons/demos/svg-material/SvgMaterialIcons.tsx
index 73f2a9796f04a5..4a3e23a4e49613 100644
--- a/docs/data/material/components/icons/SvgMaterialIcons.tsx
+++ b/docs/data/material/components/icons/demos/svg-material/SvgMaterialIcons.tsx
@@ -18,6 +18,7 @@ import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty';
 export default function SvgMaterialIcons() {
   return (
     
+      {/* @focus-start */}
       
         
           Filled
@@ -63,6 +64,7 @@ export default function SvgMaterialIcons() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/svg-material/index.ts b/docs/data/material/components/icons/demos/svg-material/index.ts
new file mode 100644
index 00000000000000..6eed83145c53ae
--- /dev/null
+++ b/docs/data/material/components/icons/demos/svg-material/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SvgMaterialIcons from './SvgMaterialIcons';
+
+export default createDemo(import.meta.url, SvgMaterialIcons);
diff --git a/docs/data/material/components/icons/SvgIconsSize.tsx b/docs/data/material/components/icons/demos/svg-size/SvgIconsSize.tsx
similarity index 91%
rename from docs/data/material/components/icons/SvgIconsSize.tsx
rename to docs/data/material/components/icons/demos/svg-size/SvgIconsSize.tsx
index 304a06ce26d142..34b3f39534220e 100644
--- a/docs/data/material/components/icons/SvgIconsSize.tsx
+++ b/docs/data/material/components/icons/demos/svg-size/SvgIconsSize.tsx
@@ -12,10 +12,12 @@ function HomeIcon(props: SvgIconProps) {
 export default function SvgIconsSize() {
   return (
     
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/icons/demos/svg-size/index.ts b/docs/data/material/components/icons/demos/svg-size/index.ts
new file mode 100644
index 00000000000000..aa0434f8832d8c
--- /dev/null
+++ b/docs/data/material/components/icons/demos/svg-size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SvgIconsSize from './SvgIconsSize';
+
+export default createDemo(import.meta.url, SvgIconsSize);
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx b/docs/data/material/components/icons/demos/two-tone/TwoToneIcons.tsx
similarity index 90%
rename from docs/data/material/components/icons/TwoToneIcons.tsx
rename to docs/data/material/components/icons/demos/two-tone/TwoToneIcons.tsx
index 3343d558513980..05ae6250bb8e14 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx
+++ b/docs/data/material/components/icons/demos/two-tone/TwoToneIcons.tsx
@@ -9,6 +9,7 @@ const useIsDarkMode = () => {
 export default function TwoToneIcons() {
   const isDarkMode = useIsDarkMode();
 
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/icons/demos/two-tone/index.ts b/docs/data/material/components/icons/demos/two-tone/index.ts
new file mode 100644
index 00000000000000..2af0f441e1de1f
--- /dev/null
+++ b/docs/data/material/components/icons/demos/two-tone/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TwoToneIcons from './TwoToneIcons';
+
+export default createDemo(import.meta.url, TwoToneIcons);
diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
index 9b31f7b752d703..e724f3e8a4a369 100644
--- a/docs/data/material/components/icons/icons.md
+++ b/docs/data/material/components/icons/icons.md
@@ -79,7 +79,7 @@ Each Material icon also has a "theme": Filled (default), Outlined, Rounded, Two-
 The Material Design guidelines name the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@mui/icons-material` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`.
 :::
 
-{{"demo": "SvgMaterialIcons.js"}}
+{{"component": "../data/material/components/icons/demos/svg-material/index.ts"}}
 
 ## SvgIcon
 
@@ -93,15 +93,15 @@ This component extends the native `` element:
 - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop.
 - It supports `` element as a child so you can copy and paste your SVG directly to `SvgIcon` component.
 
-{{"demo": "SvgIconChildren.js"}}
+{{"component": "../data/material/components/icons/demos/svg-children/index.ts"}}
 
 ### Color
 
-{{"demo": "SvgIconsColor.js"}}
+{{"component": "../data/material/components/icons/demos/svg-color/index.ts"}}
 
 ### Size
 
-{{"demo": "SvgIconsSize.js"}}
+{{"component": "../data/material/components/icons/demos/svg-size/index.ts"}}
 
 ### Component prop
 
@@ -161,7 +161,7 @@ const PlusIcon = createSvgIcon(
 );
 ```
 
-{{"demo": "CreateSvgIcon.js"}}
+{{"component": "../data/material/components/icons/demos/create-svg/index.ts"}}
 
 ### Other libraries
 
@@ -201,7 +201,7 @@ All you need to do is load the font, for instance, via Google Web Fonts:
 />
 ```
 
-{{"demo": "Icons.js"}}
+{{"component": "../data/material/components/icons/demos/icons/index.ts"}}
 
 ### Custom font
 
@@ -218,7 +218,7 @@ import Icon from '@mui/material/Icon';
 />;
 ```
 
-{{"demo": "TwoToneIcons.js"}}
+{{"component": "../data/material/components/icons/demos/two-tone/index.ts"}}
 
 #### Global base class name
 
@@ -248,7 +248,7 @@ Then, you can use the two-tone font directly:
 
 [Font Awesome](https://fontawesome.com/icons) can be used with the `Icon` component as follows:
 
-{{"demo": "FontAwesomeIcon.js"}}
+{{"component": "../data/material/components/icons/demos/font-awesome/index.ts"}}
 
 Note that the Font Awesome icons weren't designed like the Material Icons (compare the two previous demos).
 The fa icons are cropped to use all the space available. You can adjust for this with a global override:
@@ -270,7 +270,7 @@ const theme = createTheme({
 });
 ```
 
-{{"demo": "FontAwesomeIconSize.js"}}
+{{"component": "../data/material/components/icons/demos/font-awesome-size/index.ts"}}
 
 ## Font vs. SVGs: Which approach to use?
 
diff --git a/docs/data/material/components/image-list/CustomImageList.js b/docs/data/material/components/image-list/CustomImageList.js
deleted file mode 100644
index ba38c5381c653b..00000000000000
--- a/docs/data/material/components/image-list/CustomImageList.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-import IconButton from '@mui/material/IconButton';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
-
-function srcset(image, width, height, rows = 1, cols = 1) {
-  return {
-    src: `${image}?w=${width * cols}&h=${height * rows}&fit=crop&auto=format`,
-    srcSet: `${image}?w=${width * cols}&h=${
-      height * rows
-    }&fit=crop&auto=format&dpr=2 2x`,
-  };
-}
-
-export default function CustomImageList() {
-  return (
-    
-      {itemData.map((item) => {
-        const cols = item.featured ? 2 : 1;
-        const rows = item.featured ? 2 : 1;
-
-        return (
-          
-            {item.title}
-            
-                  
-                
-              }
-              actionPosition="left"
-            />
-          
-        );
-      })}
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-    author: '@bkristastucchio',
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-    author: '@rollelflex_graphy726',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-    author: '@helloimnik',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-    author: '@nolanissac',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-    author: '@hjrc33',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-    author: '@arwinneil',
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-    author: '@tjdragotta',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-    author: '@katie_wasserman',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-    author: '@silverdalex',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-    author: '@shelleypauls',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-    author: '@peterlaster',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-    author: '@southside_customs',
-  },
-];
diff --git a/docs/data/material/components/image-list/MasonryImageList.js b/docs/data/material/components/image-list/MasonryImageList.js
deleted file mode 100644
index 7924de334be790..00000000000000
--- a/docs/data/material/components/image-list/MasonryImageList.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Box from '@mui/material/Box';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-export default function MasonryImageList() {
-  return (
-    
-      
-        {itemData.map((item) => (
-          
-            {item.title}
-          
-        ))}
-      
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
-    title: 'Bed',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
-    title: 'Books',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
-    title: 'Sink',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
-    title: 'Kitchen',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
-    title: 'Blinds',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
-    title: 'Chairs',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
-    title: 'Laptop',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
-    title: 'Doors',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
-    title: 'Coffee',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
-    title: 'Storage',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
-    title: 'Candle',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
-    title: 'Coffee table',
-  },
-];
diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx.preview b/docs/data/material/components/image-list/MasonryImageList.tsx.preview
deleted file mode 100644
index a56d1725430767..00000000000000
--- a/docs/data/material/components/image-list/MasonryImageList.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  {itemData.map((item) => (
-    
-      {item.title}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/image-list/QuiltedImageList.js b/docs/data/material/components/image-list/QuiltedImageList.js
deleted file mode 100644
index 38125a4ceaf58e..00000000000000
--- a/docs/data/material/components/image-list/QuiltedImageList.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-function srcset(image, size, rows = 1, cols = 1) {
-  return {
-    src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
-    srcSet: `${image}?w=${size * cols}&h=${
-      size * rows
-    }&fit=crop&auto=format&dpr=2 2x`,
-  };
-}
-
-export default function QuiltedImageList() {
-  return (
-    
-      {itemData.map((item) => (
-        
-          {item.title}
-        
-      ))}
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-    rows: 2,
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-    author: '@arwinneil',
-    rows: 2,
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-    rows: 2,
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-    cols: 2,
-  },
-];
diff --git a/docs/data/material/components/image-list/QuiltedImageList.tsx.preview b/docs/data/material/components/image-list/QuiltedImageList.tsx.preview
deleted file mode 100644
index 31f3094d62fa54..00000000000000
--- a/docs/data/material/components/image-list/QuiltedImageList.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  {itemData.map((item) => (
-    
-      {item.title}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/image-list/StandardImageList.js b/docs/data/material/components/image-list/StandardImageList.js
deleted file mode 100644
index b214bb9c68d093..00000000000000
--- a/docs/data/material/components/image-list/StandardImageList.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-export default function StandardImageList() {
-  return (
-    
-      {itemData.map((item) => (
-        
-          {item.title}
-        
-      ))}
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-  },
-];
diff --git a/docs/data/material/components/image-list/StandardImageList.tsx.preview b/docs/data/material/components/image-list/StandardImageList.tsx.preview
deleted file mode 100644
index 613d25ded6ca18..00000000000000
--- a/docs/data/material/components/image-list/StandardImageList.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  {itemData.map((item) => (
-    
-      {item.title}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.js b/docs/data/material/components/image-list/TitlebarBelowImageList.js
deleted file mode 100644
index f85329767ce86a..00000000000000
--- a/docs/data/material/components/image-list/TitlebarBelowImageList.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-
-export default function TitlebarBelowImageList() {
-  return (
-    
-      {itemData.map((item) => (
-        
-          {item.title}
-          by: {item.author}}
-            position="below"
-          />
-        
-      ))}
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-    author: '@bkristastucchio',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-    author: '@rollelflex_graphy726',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-    author: '@helloimnik',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-    author: '@nolanissac',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-    author: '@hjrc33',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-    author: '@arwinneil',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-    author: '@tjdragotta',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-    author: '@katie_wasserman',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-    author: '@silverdalex',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-    author: '@shelleypauls',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-    author: '@peterlaster',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-    author: '@southside_customs',
-  },
-];
diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
deleted file mode 100644
index 8fd466ec3332bd..00000000000000
--- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import Box from '@mui/material/Box';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-
-export default function TitlebarBelowMasonryImageList() {
-  return (
-    
-      
-        {itemData.map((item) => (
-          
-            {item.title}
-            
-          
-        ))}
-      
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
-    title: 'Bed',
-    author: 'swabdesign',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
-    title: 'Books',
-    author: 'Pavel Nekoranec',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
-    title: 'Sink',
-    author: 'Charles Deluvio',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
-    title: 'Kitchen',
-    author: 'Christian Mackie',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
-    title: 'Blinds',
-    author: 'Darren Richardson',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
-    title: 'Chairs',
-    author: 'Taylor Simpson',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
-    title: 'Laptop',
-    author: 'Ben Kolde',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
-    title: 'Doors',
-    author: 'Philipp Berndt',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
-    title: 'Coffee',
-    author: 'Jen P.',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
-    title: 'Storage',
-    author: 'Douglas Sheppard',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
-    title: 'Candle',
-    author: 'Fi Bell',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
-    title: 'Coffee table',
-    author: 'Hutomo Abrianto',
-  },
-];
diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
deleted file mode 100644
index b58e789212f8cd..00000000000000
--- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-  {itemData.map((item) => (
-    
-      {item.title}
-      
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/image-list/TitlebarImageList.js b/docs/data/material/components/image-list/TitlebarImageList.js
deleted file mode 100644
index a12f2908a8ebef..00000000000000
--- a/docs/data/material/components/image-list/TitlebarImageList.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-import ListSubheader from '@mui/material/ListSubheader';
-import IconButton from '@mui/material/IconButton';
-import InfoIcon from '@mui/icons-material/Info';
-
-export default function TitlebarImageList() {
-  return (
-    
-      
-        December
-      
-      {itemData.map((item) => (
-        
-          {item.title}
-          
-                
-              
-            }
-          />
-        
-      ))}
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-    author: '@bkristastucchio',
-    rows: 2,
-    cols: 2,
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-    author: '@rollelflex_graphy726',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-    author: '@helloimnik',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-    author: '@nolanissac',
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-    author: '@hjrc33',
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-    author: '@arwinneil',
-    rows: 2,
-    cols: 2,
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-    author: '@tjdragotta',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-    author: '@katie_wasserman',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-    author: '@silverdalex',
-    rows: 2,
-    cols: 2,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-    author: '@shelleypauls',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-    author: '@peterlaster',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-    author: '@southside_customs',
-    cols: 2,
-  },
-];
diff --git a/docs/data/material/components/image-list/WovenImageList.js b/docs/data/material/components/image-list/WovenImageList.js
deleted file mode 100644
index 0f7853629fa3eb..00000000000000
--- a/docs/data/material/components/image-list/WovenImageList.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-export default function WovenImageList() {
-  return (
-    
-      {itemData.map((item) => (
-        
-          {item.title}
-        
-      ))}
-    
-  );
-}
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
-    title: 'Bed',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
-    title: 'Kitchen',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
-    title: 'Sink',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
-    title: 'Books',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
-    title: 'Chairs',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
-    title: 'Candle',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
-    title: 'Laptop',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
-    title: 'Doors',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
-    title: 'Coffee',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
-    title: 'Storage',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
-    title: 'Coffee table',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
-    title: 'Blinds',
-  },
-];
diff --git a/docs/data/material/components/image-list/WovenImageList.tsx.preview b/docs/data/material/components/image-list/WovenImageList.tsx.preview
deleted file mode 100644
index 329a1d42b3511a..00000000000000
--- a/docs/data/material/components/image-list/WovenImageList.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  {itemData.map((item) => (
-    
-      {item.title}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/image-list/CustomImageList.tsx b/docs/data/material/components/image-list/demos/custom/CustomImageList.tsx
similarity index 98%
rename from docs/data/material/components/image-list/CustomImageList.tsx
rename to docs/data/material/components/image-list/demos/custom/CustomImageList.tsx
index 6de3ad156ac350..92e710e55bed4f 100644
--- a/docs/data/material/components/image-list/CustomImageList.tsx
+++ b/docs/data/material/components/image-list/demos/custom/CustomImageList.tsx
@@ -15,6 +15,7 @@ function srcset(image: string, width: number, height: number, rows = 1, cols = 1
 
 export default function CustomImageList() {
   return (
+    // @focus-start
     
+    // @focus-end
   );
 }
 
diff --git a/docs/data/material/components/image-list/demos/custom/index.ts b/docs/data/material/components/image-list/demos/custom/index.ts
new file mode 100644
index 00000000000000..63cf92e3cd5397
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/custom/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomImageList from './CustomImageList';
+
+export default createDemo(import.meta.url, CustomImageList);
diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx b/docs/data/material/components/image-list/demos/masonry/MasonryImageList.tsx
similarity index 97%
rename from docs/data/material/components/image-list/MasonryImageList.tsx
rename to docs/data/material/components/image-list/demos/masonry/MasonryImageList.tsx
index 7924de334be790..d0dbd61d1e24da 100644
--- a/docs/data/material/components/image-list/MasonryImageList.tsx
+++ b/docs/data/material/components/image-list/demos/masonry/MasonryImageList.tsx
@@ -5,6 +5,7 @@ import ImageListItem from '@mui/material/ImageListItem';
 export default function MasonryImageList() {
   return (
     
+      {/* @focus-start */}
       
         {itemData.map((item) => (
           
@@ -17,6 +18,7 @@ export default function MasonryImageList() {
           
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/image-list/demos/masonry/index.ts b/docs/data/material/components/image-list/demos/masonry/index.ts
new file mode 100644
index 00000000000000..780531f74dce5f
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/masonry/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MasonryImageList from './MasonryImageList';
+
+export default createDemo(import.meta.url, MasonryImageList);
diff --git a/docs/data/material/components/image-list/QuiltedImageList.tsx b/docs/data/material/components/image-list/demos/quilted/QuiltedImageList.tsx
similarity index 98%
rename from docs/data/material/components/image-list/QuiltedImageList.tsx
rename to docs/data/material/components/image-list/demos/quilted/QuiltedImageList.tsx
index f567b2d448155e..7be3a508e32a27 100644
--- a/docs/data/material/components/image-list/QuiltedImageList.tsx
+++ b/docs/data/material/components/image-list/demos/quilted/QuiltedImageList.tsx
@@ -11,6 +11,7 @@ function srcset(image: string, size: number, rows = 1, cols = 1) {
 }
 
 export default function QuiltedImageList() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
 
 const itemData = [
diff --git a/docs/data/material/components/image-list/demos/quilted/index.ts b/docs/data/material/components/image-list/demos/quilted/index.ts
new file mode 100644
index 00000000000000..87c6a0afba3d83
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/quilted/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import QuiltedImageList from './QuiltedImageList';
+
+export default createDemo(import.meta.url, QuiltedImageList);
diff --git a/docs/data/material/components/image-list/StandardImageList.tsx b/docs/data/material/components/image-list/demos/standard/StandardImageList.tsx
similarity index 97%
rename from docs/data/material/components/image-list/StandardImageList.tsx
rename to docs/data/material/components/image-list/demos/standard/StandardImageList.tsx
index b214bb9c68d093..6e666697256f43 100644
--- a/docs/data/material/components/image-list/StandardImageList.tsx
+++ b/docs/data/material/components/image-list/demos/standard/StandardImageList.tsx
@@ -2,6 +2,7 @@ import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
 
 export default function StandardImageList() {
+  // @focus-start @padding 1
   return (
     
       {itemData.map((item) => (
@@ -16,6 +17,7 @@ export default function StandardImageList() {
       ))}
     
   );
+  // @focus-end
 }
 
 const itemData = [
diff --git a/docs/data/material/components/image-list/demos/standard/index.ts b/docs/data/material/components/image-list/demos/standard/index.ts
new file mode 100644
index 00000000000000..9e328ab4d38574
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/standard/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StandardImageList from './StandardImageList';
+
+export default createDemo(import.meta.url, StandardImageList);
diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx b/docs/data/material/components/image-list/demos/titlebar-below-masonry/TitlebarBelowMasonryImageList.tsx
similarity index 97%
rename from docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
rename to docs/data/material/components/image-list/demos/titlebar-below-masonry/TitlebarBelowMasonryImageList.tsx
index 8fd466ec3332bd..e442d915e15be9 100644
--- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
+++ b/docs/data/material/components/image-list/demos/titlebar-below-masonry/TitlebarBelowMasonryImageList.tsx
@@ -6,6 +6,7 @@ import ImageListItemBar from '@mui/material/ImageListItemBar';
 export default function TitlebarBelowMasonryImageList() {
   return (
     
+      {/* @focus-start */}
       
         {itemData.map((item) => (
           
@@ -19,6 +20,7 @@ export default function TitlebarBelowMasonryImageList() {
           
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts b/docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts
new file mode 100644
index 00000000000000..cdf59591e74cc9
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TitlebarBelowMasonryImageList from './TitlebarBelowMasonryImageList';
+
+export default createDemo(import.meta.url, TitlebarBelowMasonryImageList);
diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx b/docs/data/material/components/image-list/demos/titlebar-below/TitlebarBelowImageList.tsx
similarity index 98%
rename from docs/data/material/components/image-list/TitlebarBelowImageList.tsx
rename to docs/data/material/components/image-list/demos/titlebar-below/TitlebarBelowImageList.tsx
index f85329767ce86a..346a23486975ed 100644
--- a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx
+++ b/docs/data/material/components/image-list/demos/titlebar-below/TitlebarBelowImageList.tsx
@@ -4,6 +4,7 @@ import ImageListItemBar from '@mui/material/ImageListItemBar';
 
 export default function TitlebarBelowImageList() {
   return (
+    // @focus-start
     
       {itemData.map((item) => (
         
@@ -21,6 +22,7 @@ export default function TitlebarBelowImageList() {
         
       ))}
     
+    // @focus-end
   );
 }
 
diff --git a/docs/data/material/components/image-list/demos/titlebar-below/index.ts b/docs/data/material/components/image-list/demos/titlebar-below/index.ts
new file mode 100644
index 00000000000000..957c58e28521e6
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/titlebar-below/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TitlebarBelowImageList from './TitlebarBelowImageList';
+
+export default createDemo(import.meta.url, TitlebarBelowImageList);
diff --git a/docs/data/material/components/image-list/TitlebarImageList.tsx b/docs/data/material/components/image-list/demos/titlebar/TitlebarImageList.tsx
similarity index 98%
rename from docs/data/material/components/image-list/TitlebarImageList.tsx
rename to docs/data/material/components/image-list/demos/titlebar/TitlebarImageList.tsx
index a12f2908a8ebef..54495fed68c153 100644
--- a/docs/data/material/components/image-list/TitlebarImageList.tsx
+++ b/docs/data/material/components/image-list/demos/titlebar/TitlebarImageList.tsx
@@ -7,6 +7,7 @@ import InfoIcon from '@mui/icons-material/Info';
 
 export default function TitlebarImageList() {
   return (
+    // @focus-start
     
       
         December
@@ -34,6 +35,7 @@ export default function TitlebarImageList() {
         
       ))}
     
+    // @focus-end
   );
 }
 
diff --git a/docs/data/material/components/image-list/demos/titlebar/index.ts b/docs/data/material/components/image-list/demos/titlebar/index.ts
new file mode 100644
index 00000000000000..c170d78a12a233
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/titlebar/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TitlebarImageList from './TitlebarImageList';
+
+export default createDemo(import.meta.url, TitlebarImageList);
diff --git a/docs/data/material/components/image-list/WovenImageList.tsx b/docs/data/material/components/image-list/demos/woven/WovenImageList.tsx
similarity index 97%
rename from docs/data/material/components/image-list/WovenImageList.tsx
rename to docs/data/material/components/image-list/demos/woven/WovenImageList.tsx
index 0f7853629fa3eb..49688978643dda 100644
--- a/docs/data/material/components/image-list/WovenImageList.tsx
+++ b/docs/data/material/components/image-list/demos/woven/WovenImageList.tsx
@@ -2,6 +2,7 @@ import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
 
 export default function WovenImageList() {
+  // @focus-start @padding 1
   return (
     
       {itemData.map((item) => (
@@ -16,6 +17,7 @@ export default function WovenImageList() {
       ))}
     
   );
+  // @focus-end
 }
 
 const itemData = [
diff --git a/docs/data/material/components/image-list/demos/woven/index.ts b/docs/data/material/components/image-list/demos/woven/index.ts
new file mode 100644
index 00000000000000..2b47c0e3965294
--- /dev/null
+++ b/docs/data/material/components/image-list/demos/woven/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import WovenImageList from './WovenImageList';
+
+export default createDemo(import.meta.url, WovenImageList);
diff --git a/docs/data/material/components/image-list/image-list.md b/docs/data/material/components/image-list/image-list.md
index 8272088eefdccb..2396093be04829 100644
--- a/docs/data/material/components/image-list/image-list.md
+++ b/docs/data/material/components/image-list/image-list.md
@@ -19,46 +19,46 @@ Image lists represent a collection of items in a repeated pattern. They help imp
 
 Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and spacing.
 
-{{"demo": "StandardImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/standard/index.ts"}}
 
 ## Quilted image list
 
 Quilted image lists emphasize certain items over others in a collection. They create hierarchy using varied container sizes and ratios.
 
-{{"demo": "QuiltedImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/quilted/index.ts"}}
 
 ## Woven image list
 
 Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content.
 
-{{"demo": "WovenImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/woven/index.ts"}}
 
 ## Masonry image list
 
 Masonry image lists use dynamically sized container heights that reflect the aspect ratio of each image. This image list is best used for browsing uncropped peer content.
 
-{{"demo": "MasonryImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/masonry/index.ts"}}
 
 ## Image list with title bars
 
 This example demonstrates the use of the `ImageListItemBar` to add an overlay to each item.
 The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`.
 
-{{"demo": "TitlebarImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/titlebar/index.ts"}}
 
 ### Title bar below image (standard)
 
 The title bar can be placed below the image.
 
-{{"demo": "TitlebarBelowImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/titlebar-below/index.ts"}}
 
 ### Title bar below image (masonry)
 
-{{"demo": "TitlebarBelowMasonryImageList.js"}}
+{{"component": "../data/material/components/image-list/demos/titlebar-below-masonry/index.ts"}}
 
 ## Custom image list
 
 In this example the items have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`.
 The secondary action `IconButton` is positioned on the left. The `gap` prop is used to adjust the gap between items.
 
-{{"demo": "CustomImageList.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/image-list/demos/custom/index.ts", "defaultCodeOpen": false}}
diff --git a/docs/data/material/components/links/ButtonLink.js b/docs/data/material/components/links/ButtonLink.js
deleted file mode 100644
index 1c3872b5bf4bc3..00000000000000
--- a/docs/data/material/components/links/ButtonLink.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Link from '@mui/material/Link';
-
-export default function ButtonLink() {
-  return (
-     {
-        console.info("I'm a button.");
-      }}
-    >
-      Button Link
-    
-  );
-}
diff --git a/docs/data/material/components/links/ButtonLink.tsx.preview b/docs/data/material/components/links/ButtonLink.tsx.preview
deleted file mode 100644
index 3c6eaed9713e66..00000000000000
--- a/docs/data/material/components/links/ButtonLink.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
- {
-    console.info("I'm a button.");
-  }}
->
-  Button Link
-
\ No newline at end of file
diff --git a/docs/data/material/components/links/Links.js b/docs/data/material/components/links/Links.js
deleted file mode 100644
index 44d3be3712deee..00000000000000
--- a/docs/data/material/components/links/Links.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-
-const preventDefault = (event) => event.preventDefault();
-
-export default function Links() {
-  return (
-     :not(style) ~ :not(style)': {
-          ml: 2,
-        },
-      }}
-      onClick={preventDefault}
-    >
-      Link
-      
-        {'color="inherit"'}
-      
-      
-        {'variant="body2"'}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/links/Links.tsx.preview b/docs/data/material/components/links/Links.tsx.preview
deleted file mode 100644
index 642167ec32d212..00000000000000
--- a/docs/data/material/components/links/Links.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-Link
-
-  {'color="inherit"'}
-
-
-  {'variant="body2"'}
-
\ No newline at end of file
diff --git a/docs/data/material/components/links/UnderlineLink.js b/docs/data/material/components/links/UnderlineLink.js
deleted file mode 100644
index 5fe1efc0f3ce4f..00000000000000
--- a/docs/data/material/components/links/UnderlineLink.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-
-const preventDefault = (event) => event.preventDefault();
-
-export default function UnderlineLink() {
-  return (
-     :not(style) ~ :not(style)': {
-          ml: 2,
-        },
-      }}
-      onClick={preventDefault}
-    >
-      
-        {'underline="none"'}
-      
-      
-        {'underline="hover"'}
-      
-      
-        {'underline="always"'}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/links/UnderlineLink.tsx.preview b/docs/data/material/components/links/UnderlineLink.tsx.preview
deleted file mode 100644
index 1b943da67a2490..00000000000000
--- a/docs/data/material/components/links/UnderlineLink.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  {'underline="none"'}
-
-
-  {'underline="hover"'}
-
-
-  {'underline="always"'}
-
\ No newline at end of file
diff --git a/docs/data/material/components/links/ButtonLink.tsx b/docs/data/material/components/links/demos/button/ButtonLink.tsx
similarity index 85%
rename from docs/data/material/components/links/ButtonLink.tsx
rename to docs/data/material/components/links/demos/button/ButtonLink.tsx
index 1c3872b5bf4bc3..0da8131b5f5490 100644
--- a/docs/data/material/components/links/ButtonLink.tsx
+++ b/docs/data/material/components/links/demos/button/ButtonLink.tsx
@@ -1,6 +1,7 @@
 import Link from '@mui/material/Link';
 
 export default function ButtonLink() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/links/demos/button/index.ts b/docs/data/material/components/links/demos/button/index.ts
new file mode 100644
index 00000000000000..795cd611f2df98
--- /dev/null
+++ b/docs/data/material/components/links/demos/button/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ButtonLink from './ButtonLink';
+
+export default createDemo(import.meta.url, ButtonLink);
diff --git a/docs/data/material/components/links/Links.tsx b/docs/data/material/components/links/demos/links/Links.tsx
similarity index 92%
rename from docs/data/material/components/links/Links.tsx
rename to docs/data/material/components/links/demos/links/Links.tsx
index eefeeb0cf82bae..f678ca28201cbd 100644
--- a/docs/data/material/components/links/Links.tsx
+++ b/docs/data/material/components/links/demos/links/Links.tsx
@@ -15,6 +15,7 @@ export default function Links() {
       }}
       onClick={preventDefault}
     >
+      {/* @focus-start */}
       Link
       
         {'color="inherit"'}
@@ -22,6 +23,7 @@ export default function Links() {
       
         {'variant="body2"'}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/links/demos/links/index.ts b/docs/data/material/components/links/demos/links/index.ts
new file mode 100644
index 00000000000000..e622cb0ebabcfd
--- /dev/null
+++ b/docs/data/material/components/links/demos/links/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Links from './Links';
+
+export default createDemo(import.meta.url, Links);
diff --git a/docs/data/material/components/links/UnderlineLink.tsx b/docs/data/material/components/links/demos/underline/UnderlineLink.tsx
similarity index 93%
rename from docs/data/material/components/links/UnderlineLink.tsx
rename to docs/data/material/components/links/demos/underline/UnderlineLink.tsx
index 7b3b274e6c7576..3f2a400e809f87 100644
--- a/docs/data/material/components/links/UnderlineLink.tsx
+++ b/docs/data/material/components/links/demos/underline/UnderlineLink.tsx
@@ -18,6 +18,7 @@ export default function UnderlineLink() {
       }}
       onClick={preventDefault}
     >
+      {/* @focus-start */}
       
         {'underline="none"'}
       
@@ -27,6 +28,7 @@ export default function UnderlineLink() {
       
         {'underline="always"'}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/links/demos/underline/index.ts b/docs/data/material/components/links/demos/underline/index.ts
new file mode 100644
index 00000000000000..acbfe91b913ce4
--- /dev/null
+++ b/docs/data/material/components/links/demos/underline/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UnderlineLink from './UnderlineLink';
+
+export default createDemo(import.meta.url, UnderlineLink);
diff --git a/docs/data/material/components/links/links.md b/docs/data/material/components/links/links.md
index 19dc6c12734655..f5200a8dedc287 100644
--- a/docs/data/material/components/links/links.md
+++ b/docs/data/material/components/links/links.md
@@ -16,7 +16,7 @@ githubSource: packages/mui-material/src/Link
 
 The Link component is built on top of the [Typography](/material-ui/api/typography/) component, meaning that you can use its props.
 
-{{"demo": "Links.js"}}
+{{"component": "../data/material/components/links/demos/links/index.ts"}}
 
 However, the Link component has some different default props than the Typography component:
 
@@ -27,7 +27,7 @@ However, the Link component has some different default props than the Typography
 
 The `underline` prop can be used to set the underline behavior. The default is `always`.
 
-{{"demo": "UnderlineLink.js"}}
+{{"component": "../data/material/components/links/demos/underline/index.ts"}}
 
 ## Security
 
@@ -54,7 +54,7 @@ Here is a [more detailed guide](/material-ui/integrations/routing/#link).
 - If a link doesn't have a meaningful href, [it should be rendered using a `
-      
-        Profile
-        My account
-        Logout
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/ContextMenu.js b/docs/data/material/components/menus/ContextMenu.js
deleted file mode 100644
index 7ccec3ddf1bd87..00000000000000
--- a/docs/data/material/components/menus/ContextMenu.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from '@mui/material/Typography';
-
-export default function ContextMenu() {
-  const [contextMenu, setContextMenu] = React.useState(null);
-
-  const handleContextMenu = (event) => {
-    event.preventDefault();
-
-    setContextMenu(
-      contextMenu === null
-        ? {
-            mouseX: event.clientX + 2,
-            mouseY: event.clientY - 6,
-          }
-        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
-          // Other native context menus might behave different.
-          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
-          null,
-    );
-
-    // Prevent text selection lost after opening the context menu on Safari and Firefox
-    const selection = document.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-
-      setTimeout(() => {
-        selection.addRange(range);
-      });
-    }
-  };
-
-  const handleClose = () => {
-    setContextMenu(null);
-  };
-
-  return (
-    
    
-      
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,
-        bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum
-        vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor
-        porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis
-        vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus
-        massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit
-        amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus
-        consequat. Suspendisse lacinia tellus a libero volutpat maximus.
-      
-      
-        Copy
-        Print
-        Highlight
-        Email
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/CustomizedMenus.js b/docs/data/material/components/menus/CustomizedMenus.js
deleted file mode 100644
index 4cbae94457099d..00000000000000
--- a/docs/data/material/components/menus/CustomizedMenus.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import EditIcon from '@mui/icons-material/Edit';
-import Divider from '@mui/material/Divider';
-import ArchiveIcon from '@mui/icons-material/Archive';
-import FileCopyIcon from '@mui/icons-material/FileCopy';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-
-const StyledMenu = styled((props) => (
-  
-))(({ theme }) => ({
-  '& .MuiPaper-root': {
-    borderRadius: 6,
-    marginTop: theme.spacing(1),
-    minWidth: 180,
-    color: 'rgb(55, 65, 81)',
-    boxShadow:
-      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
-    '& .MuiMenu-list': {
-      padding: '4px 0',
-    },
-    '& .MuiMenuItem-root': {
-      '& .MuiSvgIcon-root': {
-        fontSize: 18,
-        color: theme.palette.text.secondary,
-        marginRight: theme.spacing(1.5),
-        ...theme.applyStyles('dark', {
-          color: 'inherit',
-        }),
-      },
-      '&:active': {
-        backgroundColor: alpha(
-          theme.palette.primary.main,
-          theme.palette.action.selectedOpacity,
-        ),
-      },
-    },
-    ...theme.applyStyles('dark', {
-      color: theme.palette.grey[300],
-    }),
-  },
-}));
-
-export default function CustomizedMenus() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
    
-      
-      
-        
-          
-          Edit
-        
-        
-          
-          Duplicate
-        
-        
-        
-          
-          Archive
-        
-        
-          
-          More
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/DenseMenu.js b/docs/data/material/components/menus/DenseMenu.js
deleted file mode 100644
index e37081dc34732e..00000000000000
--- a/docs/data/material/components/menus/DenseMenu.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Paper from '@mui/material/Paper';
-import Divider from '@mui/material/Divider';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Check from '@mui/icons-material/Check';
-
-export default function DenseMenu() {
-  return (
-    
-      
-        
-          Single
-        
-        
-          1.15
-        
-        
-          Double
-        
-        
-          
-            
-          
-          Custom: 1.2
-        
-        
-        
-          Add space before paragraph
-        
-        
-          Add space after paragraph
-        
-        
-        
-          Custom spacing…
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/menus/FadeMenu.js b/docs/data/material/components/menus/FadeMenu.js
deleted file mode 100644
index 549b30995aae68..00000000000000
--- a/docs/data/material/components/menus/FadeMenu.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Fade from '@mui/material/Fade';
-
-export default function FadeMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
    
-      
-      
-        Profile
-        My account
-        Logout
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/GroupedMenu.js b/docs/data/material/components/menus/GroupedMenu.js
deleted file mode 100644
index fc3dc3ad5c9665..00000000000000
--- a/docs/data/material/components/menus/GroupedMenu.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import ListSubheader from '@mui/material/ListSubheader';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import { styled } from '@mui/material/styles';
-
-const StyledListHeader = styled(ListSubheader)({
-  backgroundImage: 'var(--Paper-overlay)',
-});
-
-export default function GroupedMenu() {
-  const id = React.useId();
-  const buttonId = `${id}-button`;
-  const menuId = `${id}-menu`;
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
    
-      
-      
-        Category 1
-        Option 1
-        Option 2
-        Category 2
-        Option 3
-        Option 4
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/IconMenu.js b/docs/data/material/components/menus/IconMenu.js
deleted file mode 100644
index edb78c615296d9..00000000000000
--- a/docs/data/material/components/menus/IconMenu.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Divider from '@mui/material/Divider';
-import Paper from '@mui/material/Paper';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Typography from '@mui/material/Typography';
-import ContentCut from '@mui/icons-material/ContentCut';
-import ContentCopy from '@mui/icons-material/ContentCopy';
-import ContentPaste from '@mui/icons-material/ContentPaste';
-import Cloud from '@mui/icons-material/Cloud';
-
-export default function IconMenu() {
-  return (
-    
-      
-        
-          
-            
-          
-          Cut
-          
-            ⌘X
-          
-        
-        
-          
-            
-          
-          Copy
-          
-            ⌘C
-          
-        
-        
-          
-            
-          
-          Paste
-          
-            ⌘V
-          
-        
-        
-        
-          
-            
-          
-          Web Clipboard
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/menus/LongMenu.js b/docs/data/material/components/menus/LongMenu.js
deleted file mode 100644
index 5bb73eed149cb6..00000000000000
--- a/docs/data/material/components/menus/LongMenu.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-
-const options = [
-  'None',
-  'Atria',
-  'Callisto',
-  'Dione',
-  'Ganymede',
-  'Hangouts Call',
-  'Luna',
-  'Oberon',
-  'Phobos',
-  'Pyxis',
-  'Sedna',
-  'Titania',
-  'Triton',
-  'Umbriel',
-];
-
-const ITEM_HEIGHT = 48;
-
-export default function LongMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
    
-      
-        
-      
-      
-        {options.map((option) => (
-          
-            {option}
-          
-        ))}
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/MenuListComposition.js b/docs/data/material/components/menus/MenuListComposition.js
deleted file mode 100644
index e07381c3336d2e..00000000000000
--- a/docs/data/material/components/menus/MenuListComposition.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Grow from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import Stack from '@mui/material/Stack';
-
-export default function MenuListComposition() {
-  const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef(null);
-
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  function handleListKeyDown(event) {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-      setOpen(false);
-    } else if (event.key === 'Escape') {
-      setOpen(false);
-    }
-  }
-
-  // return focus to the button when we transitioned from !open -> open
-  const prevOpen = React.useRef(open);
-  React.useEffect(() => {
-    if (prevOpen.current === true && open === false) {
-      anchorRef.current.focus();
-    }
-
-    prevOpen.current = open;
-  }, [open]);
-
-  return (
-    
-      
-        
-          Profile
-          My account
-          Logout
-        
-      
-      
    
-        
-        
-          {({ TransitionProps, placement }) => (
-            
-              
-                
-                  
-                    Profile
-                    My account
-                    Logout
-                  
-                
-              
-            
-          )}
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/menus/MenuPopupState.js b/docs/data/material/components/menus/MenuPopupState.js
deleted file mode 100644
index 5dd429ebecf4e2..00000000000000
--- a/docs/data/material/components/menus/MenuPopupState.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
-
-export default function MenuPopupState() {
-  return (
-    
-      {(popupState) => (
-        
-          
-          
-            Profile
-            My account
-            Logout
-          
-        
-      )}
-    
-  );
-}
diff --git a/docs/data/material/components/menus/MenuPopupState.tsx.preview b/docs/data/material/components/menus/MenuPopupState.tsx.preview
deleted file mode 100644
index 163e35dcc37a0c..00000000000000
--- a/docs/data/material/components/menus/MenuPopupState.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  {(popupState) => (
-    
-      
-      
-        Profile
-        My account
-        Logout
-      
-    
-  )}
-
\ No newline at end of file
diff --git a/docs/data/material/components/menus/PositionedMenu.js b/docs/data/material/components/menus/PositionedMenu.js
deleted file mode 100644
index d664cec05e5737..00000000000000
--- a/docs/data/material/components/menus/PositionedMenu.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-
-export default function PositionedMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
    
-      
-      
-        Profile
-        My account
-        Logout
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/SimpleListMenu.js b/docs/data/material/components/menus/SimpleListMenu.js
deleted file mode 100644
index 32931375e5aa35..00000000000000
--- a/docs/data/material/components/menus/SimpleListMenu.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import MenuItem from '@mui/material/MenuItem';
-import Menu from '@mui/material/Menu';
-
-const options = [
-  'Show some love to MUI',
-  'Show all notification content',
-  'Hide sensitive notification content',
-  'Hide all notification content',
-];
-
-export default function SimpleListMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [selectedIndex, setSelectedIndex] = React.useState(1);
-  const open = Boolean(anchorEl);
-  const handleClickListItem = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuItemClick = (event, index) => {
-    setSelectedIndex(index);
-    setAnchorEl(null);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    
    
-      
-        
-          
-        
-      
-      
-        {options.map((option, index) => (
-           handleMenuItemClick(event, index)}
-          >
-            {option}
-          
-        ))}
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/menus/TypographyMenu.js b/docs/data/material/components/menus/TypographyMenu.js
deleted file mode 100644
index 54837639eb0e3d..00000000000000
--- a/docs/data/material/components/menus/TypographyMenu.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import Paper from '@mui/material/Paper';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Typography from '@mui/material/Typography';
-import DraftsIcon from '@mui/icons-material/Drafts';
-import SendIcon from '@mui/icons-material/Send';
-import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
-
-export default function TypographyMenu() {
-  return (
-    
-      
-        
-          
-            
-          
-          A short message
-        
-        
-          
-            
-          
-          A very long text that overflows
-        
-        
-          
-            
-          
-          
-            A very long text that overflows
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/menus/AccountMenu.tsx b/docs/data/material/components/menus/demos/account/AccountMenu.tsx
similarity index 98%
rename from docs/data/material/components/menus/AccountMenu.tsx
rename to docs/data/material/components/menus/demos/account/AccountMenu.tsx
index dc5b87f33863e8..13d1777261a298 100644
--- a/docs/data/material/components/menus/AccountMenu.tsx
+++ b/docs/data/material/components/menus/demos/account/AccountMenu.tsx
@@ -13,6 +13,7 @@ import Settings from '@mui/icons-material/Settings';
 import Logout from '@mui/icons-material/Logout';
 
 export default function AccountMenu() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent) => {
@@ -104,4 +105,5 @@ export default function AccountMenu() {
           
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/account/index.ts b/docs/data/material/components/menus/demos/account/index.ts
new file mode 100644
index 00000000000000..fcecccc4076a9f
--- /dev/null
+++ b/docs/data/material/components/menus/demos/account/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccountMenu from './AccountMenu';
+
+export default createDemo(import.meta.url, AccountMenu);
diff --git a/docs/data/material/components/menus/BasicMenu.tsx b/docs/data/material/components/menus/demos/basic/BasicMenu.tsx
similarity index 96%
rename from docs/data/material/components/menus/BasicMenu.tsx
rename to docs/data/material/components/menus/demos/basic/BasicMenu.tsx
index ea70ef23026202..b690a5c9138bc6 100644
--- a/docs/data/material/components/menus/BasicMenu.tsx
+++ b/docs/data/material/components/menus/demos/basic/BasicMenu.tsx
@@ -4,6 +4,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
 export default function BasicMenu() {
+  // @focus-start @padding 1
   const id = React.useId();
   const buttonId = `${id}-button`;
   const menuId = `${id}-menu`;
@@ -44,4 +45,5 @@ export default function BasicMenu() {
       
     
    
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/basic/index.ts b/docs/data/material/components/menus/demos/basic/index.ts
new file mode 100644
index 00000000000000..ace657af46d6ab
--- /dev/null
+++ b/docs/data/material/components/menus/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicMenu from './BasicMenu';
+
+export default createDemo(import.meta.url, BasicMenu);
diff --git a/docs/data/material/components/menus/ContextMenu.tsx b/docs/data/material/components/menus/demos/context/ContextMenu.tsx
similarity index 98%
rename from docs/data/material/components/menus/ContextMenu.tsx
rename to docs/data/material/components/menus/demos/context/ContextMenu.tsx
index 394ad859584d11..e57b086cbc1c16 100644
--- a/docs/data/material/components/menus/ContextMenu.tsx
+++ b/docs/data/material/components/menus/demos/context/ContextMenu.tsx
@@ -4,6 +4,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 
 export default function ContextMenu() {
+  // @focus-start @padding 1
   const [contextMenu, setContextMenu] = React.useState<{
     mouseX: number;
     mouseY: number;
@@ -68,4 +69,5 @@ export default function ContextMenu() {
       
     
    
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/context/index.ts b/docs/data/material/components/menus/demos/context/index.ts
new file mode 100644
index 00000000000000..7f77dacaff15b5
--- /dev/null
+++ b/docs/data/material/components/menus/demos/context/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ContextMenu from './ContextMenu';
+
+export default createDemo(import.meta.url, ContextMenu);
diff --git a/docs/data/material/components/menus/CustomizedMenus.tsx b/docs/data/material/components/menus/demos/customized/CustomizedMenus.tsx
similarity index 98%
rename from docs/data/material/components/menus/CustomizedMenus.tsx
rename to docs/data/material/components/menus/demos/customized/CustomizedMenus.tsx
index 46a8823ffc118c..00050291ef105a 100644
--- a/docs/data/material/components/menus/CustomizedMenus.tsx
+++ b/docs/data/material/components/menus/demos/customized/CustomizedMenus.tsx
@@ -57,6 +57,7 @@ const StyledMenu = styled((props: MenuProps) => (
 }));
 
 export default function CustomizedMenus() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent) => {
@@ -111,4 +112,5 @@ export default function CustomizedMenus() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/customized/index.ts b/docs/data/material/components/menus/demos/customized/index.ts
new file mode 100644
index 00000000000000..899dba0d960ca2
--- /dev/null
+++ b/docs/data/material/components/menus/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedMenus from './CustomizedMenus';
+
+export default createDemo(import.meta.url, CustomizedMenus);
diff --git a/docs/data/material/components/menus/DenseMenu.tsx b/docs/data/material/components/menus/demos/dense/DenseMenu.tsx
similarity index 97%
rename from docs/data/material/components/menus/DenseMenu.tsx
rename to docs/data/material/components/menus/demos/dense/DenseMenu.tsx
index e37081dc34732e..fc969ac9cb9434 100644
--- a/docs/data/material/components/menus/DenseMenu.tsx
+++ b/docs/data/material/components/menus/demos/dense/DenseMenu.tsx
@@ -8,6 +8,7 @@ import Check from '@mui/icons-material/Check';
 
 export default function DenseMenu() {
   return (
+    // @focus-start
     
       
         
@@ -38,5 +39,6 @@ export default function DenseMenu() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/menus/demos/dense/index.ts b/docs/data/material/components/menus/demos/dense/index.ts
new file mode 100644
index 00000000000000..28d1be8d4ee70d
--- /dev/null
+++ b/docs/data/material/components/menus/demos/dense/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DenseMenu from './DenseMenu';
+
+export default createDemo(import.meta.url, DenseMenu);
diff --git a/docs/data/material/components/menus/FadeMenu.tsx b/docs/data/material/components/menus/demos/fade/FadeMenu.tsx
similarity index 96%
rename from docs/data/material/components/menus/FadeMenu.tsx
rename to docs/data/material/components/menus/demos/fade/FadeMenu.tsx
index 7a0655425bbb67..ef46485aac76c0 100644
--- a/docs/data/material/components/menus/FadeMenu.tsx
+++ b/docs/data/material/components/menus/demos/fade/FadeMenu.tsx
@@ -5,6 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Fade from '@mui/material/Fade';
 
 export default function FadeMenu() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent) => {
@@ -43,4 +44,5 @@ export default function FadeMenu() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/fade/index.ts b/docs/data/material/components/menus/demos/fade/index.ts
new file mode 100644
index 00000000000000..748b04e026c913
--- /dev/null
+++ b/docs/data/material/components/menus/demos/fade/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FadeMenu from './FadeMenu';
+
+export default createDemo(import.meta.url, FadeMenu);
diff --git a/docs/data/material/components/menus/GroupedMenu.tsx b/docs/data/material/components/menus/demos/grouped/GroupedMenu.tsx
similarity index 97%
rename from docs/data/material/components/menus/GroupedMenu.tsx
rename to docs/data/material/components/menus/demos/grouped/GroupedMenu.tsx
index cb32bdad2b0256..dfbda5cacb8624 100644
--- a/docs/data/material/components/menus/GroupedMenu.tsx
+++ b/docs/data/material/components/menus/demos/grouped/GroupedMenu.tsx
@@ -10,6 +10,7 @@ const StyledListHeader = styled(ListSubheader)({
 });
 
 export default function GroupedMenu() {
+  // @focus-start @padding 1
   const id = React.useId();
   const buttonId = `${id}-button`;
   const menuId = `${id}-menu`;
@@ -56,4 +57,5 @@ export default function GroupedMenu() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/grouped/index.ts b/docs/data/material/components/menus/demos/grouped/index.ts
new file mode 100644
index 00000000000000..af8fe8a8c597e1
--- /dev/null
+++ b/docs/data/material/components/menus/demos/grouped/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GroupedMenu from './GroupedMenu';
+
+export default createDemo(import.meta.url, GroupedMenu);
diff --git a/docs/data/material/components/menus/IconMenu.tsx b/docs/data/material/components/menus/demos/icon/IconMenu.tsx
similarity index 97%
rename from docs/data/material/components/menus/IconMenu.tsx
rename to docs/data/material/components/menus/demos/icon/IconMenu.tsx
index edb78c615296d9..ae4a82da7f58a9 100644
--- a/docs/data/material/components/menus/IconMenu.tsx
+++ b/docs/data/material/components/menus/demos/icon/IconMenu.tsx
@@ -12,6 +12,7 @@ import Cloud from '@mui/icons-material/Cloud';
 
 export default function IconMenu() {
   return (
+    // @focus-start
     
       
         
@@ -50,5 +51,6 @@ export default function IconMenu() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/menus/demos/icon/index.ts b/docs/data/material/components/menus/demos/icon/index.ts
new file mode 100644
index 00000000000000..a3b8ad7c31f5d5
--- /dev/null
+++ b/docs/data/material/components/menus/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconMenu from './IconMenu';
+
+export default createDemo(import.meta.url, IconMenu);
diff --git a/docs/data/material/components/menus/MenuListComposition.tsx b/docs/data/material/components/menus/demos/list-composition/MenuListComposition.tsx
similarity index 98%
rename from docs/data/material/components/menus/MenuListComposition.tsx
rename to docs/data/material/components/menus/demos/list-composition/MenuListComposition.tsx
index b90632cac28cd5..ccfa18eba57d95 100644
--- a/docs/data/material/components/menus/MenuListComposition.tsx
+++ b/docs/data/material/components/menus/demos/list-composition/MenuListComposition.tsx
@@ -9,6 +9,7 @@ import MenuList from '@mui/material/MenuList';
 import Stack from '@mui/material/Stack';
 
 export default function MenuListComposition() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
 
@@ -102,4 +103,5 @@ export default function MenuListComposition() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/list-composition/index.ts b/docs/data/material/components/menus/demos/list-composition/index.ts
new file mode 100644
index 00000000000000..3d587f506d19d6
--- /dev/null
+++ b/docs/data/material/components/menus/demos/list-composition/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MenuListComposition from './MenuListComposition';
+
+export default createDemo(import.meta.url, MenuListComposition);
diff --git a/docs/data/material/components/menus/LongMenu.tsx b/docs/data/material/components/menus/demos/long/LongMenu.tsx
similarity index 97%
rename from docs/data/material/components/menus/LongMenu.tsx
rename to docs/data/material/components/menus/demos/long/LongMenu.tsx
index 6b203951b684f5..e173c52c5d092c 100644
--- a/docs/data/material/components/menus/LongMenu.tsx
+++ b/docs/data/material/components/menus/demos/long/LongMenu.tsx
@@ -24,6 +24,7 @@ const options = [
 const ITEM_HEIGHT = 48;
 
 export default function LongMenu() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent) => {
@@ -70,4 +71,5 @@ export default function LongMenu() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/long/index.ts b/docs/data/material/components/menus/demos/long/index.ts
new file mode 100644
index 00000000000000..f8959147508821
--- /dev/null
+++ b/docs/data/material/components/menus/demos/long/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LongMenu from './LongMenu';
+
+export default createDemo(import.meta.url, LongMenu);
diff --git a/docs/data/material/components/menus/MenuPopupState.tsx b/docs/data/material/components/menus/demos/popup-state/MenuPopupState.tsx
similarity index 94%
rename from docs/data/material/components/menus/MenuPopupState.tsx
rename to docs/data/material/components/menus/demos/popup-state/MenuPopupState.tsx
index 5dd429ebecf4e2..b02e5a8d56723f 100644
--- a/docs/data/material/components/menus/MenuPopupState.tsx
+++ b/docs/data/material/components/menus/demos/popup-state/MenuPopupState.tsx
@@ -5,6 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
 
 export default function MenuPopupState() {
+  // @focus-start @padding 1
   return (
     
       {(popupState) => (
@@ -21,4 +22,5 @@ export default function MenuPopupState() {
       )}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/popup-state/index.ts b/docs/data/material/components/menus/demos/popup-state/index.ts
new file mode 100644
index 00000000000000..712f0b8a48c834
--- /dev/null
+++ b/docs/data/material/components/menus/demos/popup-state/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MenuPopupState from './MenuPopupState';
+
+export default createDemo(import.meta.url, MenuPopupState);
diff --git a/docs/data/material/components/menus/PositionedMenu.tsx b/docs/data/material/components/menus/demos/positioned/PositionedMenu.tsx
similarity index 96%
rename from docs/data/material/components/menus/PositionedMenu.tsx
rename to docs/data/material/components/menus/demos/positioned/PositionedMenu.tsx
index 5a2e9d903f2ef5..b977b0c8d7497f 100644
--- a/docs/data/material/components/menus/PositionedMenu.tsx
+++ b/docs/data/material/components/menus/demos/positioned/PositionedMenu.tsx
@@ -4,6 +4,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
 export default function PositionedMenu() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent) => {
@@ -45,4 +46,5 @@ export default function PositionedMenu() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/positioned/index.ts b/docs/data/material/components/menus/demos/positioned/index.ts
new file mode 100644
index 00000000000000..21edbeab142fc2
--- /dev/null
+++ b/docs/data/material/components/menus/demos/positioned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PositionedMenu from './PositionedMenu';
+
+export default createDemo(import.meta.url, PositionedMenu);
diff --git a/docs/data/material/components/menus/SimpleListMenu.tsx b/docs/data/material/components/menus/demos/simple-list/SimpleListMenu.tsx
similarity index 97%
rename from docs/data/material/components/menus/SimpleListMenu.tsx
rename to docs/data/material/components/menus/demos/simple-list/SimpleListMenu.tsx
index 31688998e0333c..94467738bd15c6 100644
--- a/docs/data/material/components/menus/SimpleListMenu.tsx
+++ b/docs/data/material/components/menus/demos/simple-list/SimpleListMenu.tsx
@@ -13,6 +13,7 @@ const options = [
 ];
 
 export default function SimpleListMenu() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
   const open = Boolean(anchorEl);
@@ -78,4 +79,5 @@ export default function SimpleListMenu() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/menus/demos/simple-list/index.ts b/docs/data/material/components/menus/demos/simple-list/index.ts
new file mode 100644
index 00000000000000..d76b93eefa1e03
--- /dev/null
+++ b/docs/data/material/components/menus/demos/simple-list/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleListMenu from './SimpleListMenu';
+
+export default createDemo(import.meta.url, SimpleListMenu);
diff --git a/docs/data/material/components/menus/TypographyMenu.tsx b/docs/data/material/components/menus/demos/typography/TypographyMenu.tsx
similarity index 96%
rename from docs/data/material/components/menus/TypographyMenu.tsx
rename to docs/data/material/components/menus/demos/typography/TypographyMenu.tsx
index 54837639eb0e3d..b30911b730cb6e 100644
--- a/docs/data/material/components/menus/TypographyMenu.tsx
+++ b/docs/data/material/components/menus/demos/typography/TypographyMenu.tsx
@@ -9,6 +9,7 @@ import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
 
 export default function TypographyMenu() {
   return (
+    // @focus-start
     
       
         
@@ -33,5 +34,6 @@ export default function TypographyMenu() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/menus/demos/typography/index.ts b/docs/data/material/components/menus/demos/typography/index.ts
new file mode 100644
index 00000000000000..218e5a98001cb9
--- /dev/null
+++ b/docs/data/material/components/menus/demos/typography/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TypographyMenu from './TypographyMenu';
+
+export default createDemo(import.meta.url, TypographyMenu);
diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md
index 9ae8536ade0a43..b1c77bd4ea8961 100644
--- a/docs/data/material/components/menus/menus.md
+++ b/docs/data/material/components/menus/menus.md
@@ -30,19 +30,19 @@ A basic menu opens over the anchor element by default (this option can be [chang
 
 You should configure the component so that selecting an option immediately confirms it and closes the menu, as shown in the demo below.
 
-{{"demo": "BasicMenu.js"}}
+{{"component": "../data/material/components/menus/demos/basic/index.ts"}}
 
 ## Icon menu
 
 In desktop viewport, padding is increased to give more space to the menu.
 
-{{"demo": "IconMenu.js", "bg": true}}
+{{"component": "../data/material/components/menus/demos/icon/index.ts", "bg": true}}
 
 ## Dense menu
 
 For the menu that has long list and long text, you can use the `dense` prop to reduce the padding and text size.
 
-{{"demo": "DenseMenu.js", "bg": true}}
+{{"component": "../data/material/components/menus/demos/dense/index.ts", "bg": true}}
 
 ## Selected menu
 
@@ -50,14 +50,14 @@ If used for item selection, when opened, simple menus places the initial focus o
 The currently selected menu item is set using the `selected` prop (from [ListItem](/material-ui/api/list-item/)).
 To use a selected menu item without impacting the initial focus, set the `variant` prop to "menu".
 
-{{"demo": "SimpleListMenu.js"}}
+{{"component": "../data/material/components/menus/demos/simple-list/index.ts"}}
 
 ## Positioned menu
 
 Because the `Menu` component uses the `Popover` component to position itself, you can use the same [positioning props](/material-ui/react-popover/#anchor-playground) to position it.
 For instance, you can display the menu on top of the anchor:
 
-{{"demo": "PositionedMenu.js"}}
+{{"component": "../data/material/components/menus/demos/positioned/index.ts"}}
 
 ## Composition with Menu List
 
@@ -67,20 +67,20 @@ But you might want to use a different positioning strategy, or prefer not to blo
 The Menu List component lets you compose your own menu for these kinds of use cases—its primary purpose is to handle focus.
 See the demo below for an example of composition that uses Menu List and replaces the Menu's default Popover with a Popper component instead:
 
-{{"demo": "MenuListComposition.js", "bg": true}}
+{{"component": "../data/material/components/menus/demos/list-composition/index.ts", "bg": true}}
 
 ## Account menu
 
 `Menu` content can be mixed with other components like `Avatar`.
 
-{{"demo": "AccountMenu.js"}}
+{{"component": "../data/material/components/menus/demos/account/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedMenus.js"}}
+{{"component": "../data/material/components/menus/demos/customized/index.ts"}}
 
 The `MenuItem` is a wrapper around `ListItem` with some additional styles.
 You can use the same list composition features with the `MenuItem` component:
@@ -91,32 +91,32 @@ You can use the same list composition features with the `MenuItem` component:
 
 If the height of a menu prevents all menu items from being displayed, the menu can scroll internally.
 
-{{"demo": "LongMenu.js"}}
+{{"component": "../data/material/components/menus/demos/long/index.ts"}}
 
 ## Limitations
 
 There is [a flexbox bug](https://issues.chromium.org/issues/40344463) that prevents `text-overflow: ellipsis` from working in a flexbox layout.
 You can use the `Typography` component with `noWrap` to workaround this issue:
 
-{{"demo": "TypographyMenu.js", "bg": true}}
+{{"component": "../data/material/components/menus/demos/typography/index.ts", "bg": true}}
 
 ## Change transition
 
 Use `slots.transition` and `slotProps.transition` to use a different transition.
 
-{{"demo": "FadeMenu.js"}}
+{{"component": "../data/material/components/menus/demos/fade/index.ts"}}
 
 ## Context menu
 
 Here is an example of a context menu. (Right click to open.)
 
-{{"demo": "ContextMenu.js"}}
+{{"component": "../data/material/components/menus/demos/context/index.ts"}}
 
 ## Grouped Menu
 
 Display categories with the `ListSubheader` component.
 
-{{"demo": "GroupedMenu.js"}}
+{{"component": "../data/material/components/menus/demos/grouped/index.ts"}}
 
 ## Supplementary projects
 
@@ -129,4 +129,4 @@ For more advanced use cases you might be able to take advantage of:
 
 The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.
 
-{{"demo": "MenuPopupState.js"}}
+{{"component": "../data/material/components/menus/demos/popup-state/index.ts"}}
diff --git a/docs/data/material/components/modal/BasicModal.js b/docs/data/material/components/modal/BasicModal.js
deleted file mode 100644
index d65efec6408e85..00000000000000
--- a/docs/data/material/components/modal/BasicModal.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import Modal from '@mui/material/Modal';
-
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-};
-
-export default function BasicModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    
    
-      
-      
-        
-          
-            Text in a modal
-          
-          
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/modal/BasicModal.tsx.preview b/docs/data/material/components/modal/BasicModal.tsx.preview
deleted file mode 100644
index 2ef5a0e2b515dd..00000000000000
--- a/docs/data/material/components/modal/BasicModal.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-  
-    
-      Text in a modal
-    
-    
-      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/modal/KeepMountedModal.js b/docs/data/material/components/modal/KeepMountedModal.js
deleted file mode 100644
index d1c3187539a07c..00000000000000
--- a/docs/data/material/components/modal/KeepMountedModal.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-};
-
-export default function KeepMountedModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    
    
-      
-      
-        
-          
-            Text in a modal
-          
-          
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/modal/NestedModal.js b/docs/data/material/components/modal/NestedModal.js
deleted file mode 100644
index ba0d00593d26e3..00000000000000
--- a/docs/data/material/components/modal/NestedModal.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import Button from '@mui/material/Button';
-
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  pt: 2,
-  px: 4,
-  pb: 3,
-};
-
-function ChildModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-      
-        
-          
    Text in a child modal
    
-          
    
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-          
    
-          
-            
-          
-        
-  );
-}
-
-export default function NestedModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
    
-      
-      
-        
-          
    Text in a modal
    
-          
    
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          
    
-          
-            
-          
-    
    
-  );
-}
diff --git a/docs/data/material/components/modal/NestedModal.tsx.preview b/docs/data/material/components/modal/NestedModal.tsx.preview
deleted file mode 100644
index d18728f01466ed..00000000000000
--- a/docs/data/material/components/modal/NestedModal.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-  
-    
    Text in a modal
    
-    
    
-      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-    
    
-    
-      
-    
\ No newline at end of file
diff --git a/docs/data/material/components/modal/ServerModal.js b/docs/data/material/components/modal/ServerModal.js
deleted file mode 100644
index 9fc6526b8e55f8..00000000000000
--- a/docs/data/material/components/modal/ServerModal.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react';
-import Modal from '@mui/material/Modal';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-export default function ServerModal() {
-  const rootRef = React.useRef(null);
-
-  return (
-    
-       rootRef.current}
-      >
-         ({
-            position: 'relative',
-            width: 400,
-            bgcolor: 'background.paper',
-            border: '2px solid #000',
-            boxShadow: theme.shadows[5],
-            p: 4,
-          })}
-        >
-          
-            Server-side modal
-          
-          
-            If you disable JavaScript, you will still see me.
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/modal/SpringModal.js b/docs/data/material/components/modal/SpringModal.js
deleted file mode 100644
index bb012c520d0357..00000000000000
--- a/docs/data/material/components/modal/SpringModal.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Backdrop from '@mui/material/Backdrop';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import { useSpring, animated } from '@react-spring/web';
-
-const Fade = React.forwardRef(function Fade(props, ref) {
-  const {
-    children,
-    in: open,
-    onClick,
-    onEnter,
-    onExited,
-    ownerState,
-    ...other
-  } = props;
-  const style = useSpring({
-    from: { opacity: 0 },
-    to: { opacity: open ? 1 : 0 },
-    onStart: () => {
-      if (open && onEnter) {
-        onEnter(null, true);
-      }
-    },
-    onRest: () => {
-      if (!open && onExited) {
-        onExited(null, true);
-      }
-    },
-  });
-
-  return (
-    
-      {React.cloneElement(children, { onClick })}
-    
-  );
-});
-
-Fade.propTypes = {
-  children: PropTypes.element.isRequired,
-  in: PropTypes.bool,
-  onClick: PropTypes.any,
-  onEnter: PropTypes.func,
-  onExited: PropTypes.func,
-  ownerState: PropTypes.any,
-};
-
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-};
-
-export default function SpringModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    
    
-      
-      
-        
-          
-            
-              Text in a modal
-            
-            
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/modal/TransitionsModal.js b/docs/data/material/components/modal/TransitionsModal.js
deleted file mode 100644
index 8a2304e534bb0b..00000000000000
--- a/docs/data/material/components/modal/TransitionsModal.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import Backdrop from '@mui/material/Backdrop';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import Fade from '@mui/material/Fade';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-};
-
-export default function TransitionsModal() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    
    
-      
-      
-        
-          
-            
-              Text in a modal
-            
-            
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/modal/BasicModal.tsx b/docs/data/material/components/modal/demos/basic/BasicModal.tsx
similarity index 95%
rename from docs/data/material/components/modal/BasicModal.tsx
rename to docs/data/material/components/modal/demos/basic/BasicModal.tsx
index d65efec6408e85..45c94227f3aa74 100644
--- a/docs/data/material/components/modal/BasicModal.tsx
+++ b/docs/data/material/components/modal/demos/basic/BasicModal.tsx
@@ -23,6 +23,7 @@ export default function BasicModal() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/modal/demos/basic/index.ts b/docs/data/material/components/modal/demos/basic/index.ts
new file mode 100644
index 00000000000000..b5bbaa26c7a72e
--- /dev/null
+++ b/docs/data/material/components/modal/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicModal from './BasicModal';
+
+export default createDemo(import.meta.url, BasicModal);
diff --git a/docs/data/material/components/modal/KeepMountedModal.tsx b/docs/data/material/components/modal/demos/keep-mounted/KeepMountedModal.tsx
similarity index 96%
rename from docs/data/material/components/modal/KeepMountedModal.tsx
rename to docs/data/material/components/modal/demos/keep-mounted/KeepMountedModal.tsx
index d1c3187539a07c..8b839b4a579af2 100644
--- a/docs/data/material/components/modal/KeepMountedModal.tsx
+++ b/docs/data/material/components/modal/demos/keep-mounted/KeepMountedModal.tsx
@@ -17,6 +17,7 @@ const style = {
 };
 
 export default function KeepMountedModal() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -42,4 +43,5 @@ export default function KeepMountedModal() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/modal/demos/keep-mounted/index.ts b/docs/data/material/components/modal/demos/keep-mounted/index.ts
new file mode 100644
index 00000000000000..f9f97564672a46
--- /dev/null
+++ b/docs/data/material/components/modal/demos/keep-mounted/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import KeepMountedModal from './KeepMountedModal';
+
+export default createDemo(import.meta.url, KeepMountedModal);
diff --git a/docs/data/material/components/modal/NestedModal.tsx b/docs/data/material/components/modal/demos/nested/NestedModal.tsx
similarity index 97%
rename from docs/data/material/components/modal/NestedModal.tsx
rename to docs/data/material/components/modal/demos/nested/NestedModal.tsx
index ba0d00593d26e3..e247d7fcd7bb3e 100644
--- a/docs/data/material/components/modal/NestedModal.tsx
+++ b/docs/data/material/components/modal/demos/nested/NestedModal.tsx
@@ -58,6 +58,7 @@ export default function NestedModal() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/modal/demos/nested/index.ts b/docs/data/material/components/modal/demos/nested/index.ts
new file mode 100644
index 00000000000000..accd5079db684a
--- /dev/null
+++ b/docs/data/material/components/modal/demos/nested/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NestedModal from './NestedModal';
+
+export default createDemo(import.meta.url, NestedModal);
diff --git a/docs/data/material/components/modal/ServerModal.tsx b/docs/data/material/components/modal/demos/server/ServerModal.tsx
similarity index 96%
rename from docs/data/material/components/modal/ServerModal.tsx
rename to docs/data/material/components/modal/demos/server/ServerModal.tsx
index 7663a97cecf15a..fd487b254cbf69 100644
--- a/docs/data/material/components/modal/ServerModal.tsx
+++ b/docs/data/material/components/modal/demos/server/ServerModal.tsx
@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 
 export default function ServerModal() {
+  // @focus-start @padding 1
   const rootRef = React.useRef(null);
 
   return (
@@ -51,4 +52,5 @@ export default function ServerModal() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/modal/demos/server/index.ts b/docs/data/material/components/modal/demos/server/index.ts
new file mode 100644
index 00000000000000..a33438bea71cc5
--- /dev/null
+++ b/docs/data/material/components/modal/demos/server/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ServerModal from './ServerModal';
+
+export default createDemo(import.meta.url, ServerModal);
diff --git a/docs/data/material/components/modal/SpringModal.tsx b/docs/data/material/components/modal/demos/spring/SpringModal.tsx
similarity index 98%
rename from docs/data/material/components/modal/SpringModal.tsx
rename to docs/data/material/components/modal/demos/spring/SpringModal.tsx
index 03c1f05d28b3e8..41afa0fbde23bc 100644
--- a/docs/data/material/components/modal/SpringModal.tsx
+++ b/docs/data/material/components/modal/demos/spring/SpringModal.tsx
@@ -60,6 +60,7 @@ const style = {
 };
 
 export default function SpringModal() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -91,4 +92,5 @@ export default function SpringModal() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/modal/demos/spring/index.ts b/docs/data/material/components/modal/demos/spring/index.ts
new file mode 100644
index 00000000000000..461290f29f748a
--- /dev/null
+++ b/docs/data/material/components/modal/demos/spring/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SpringModal from './SpringModal';
+
+export default createDemo(import.meta.url, SpringModal);
diff --git a/docs/data/material/components/modal/TransitionsModal.tsx b/docs/data/material/components/modal/demos/transitions/TransitionsModal.tsx
similarity index 97%
rename from docs/data/material/components/modal/TransitionsModal.tsx
rename to docs/data/material/components/modal/demos/transitions/TransitionsModal.tsx
index 8a2304e534bb0b..8ed0ffbbb81891 100644
--- a/docs/data/material/components/modal/TransitionsModal.tsx
+++ b/docs/data/material/components/modal/demos/transitions/TransitionsModal.tsx
@@ -19,6 +19,7 @@ const style = {
 };
 
 export default function TransitionsModal() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -52,4 +53,5 @@ export default function TransitionsModal() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/modal/demos/transitions/index.ts b/docs/data/material/components/modal/demos/transitions/index.ts
new file mode 100644
index 00000000000000..d282aa4196e48f
--- /dev/null
+++ b/docs/data/material/components/modal/demos/transitions/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransitionsModal from './TransitionsModal';
+
+export default createDemo(import.meta.url, TransitionsModal);
diff --git a/docs/data/material/components/modal/modal.md b/docs/data/material/components/modal/modal.md
index 33493b2c9ea0c0..e2f60b19d86b76 100644
--- a/docs/data/material/components/modal/modal.md
+++ b/docs/data/material/components/modal/modal.md
@@ -39,7 +39,7 @@ Modal is a lower-level construct that is leveraged by the following components:
 
 ## Basic modal
 
-{{"demo": "BasicModal.js"}}
+{{"component": "../data/material/components/modal/demos/basic/index.ts"}}
 
 Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
 
@@ -47,7 +47,7 @@ Notice that you can disable the outline (often blue or gold) with the `outline:
 
 Modals can be nested, for example a select within a dialog, but stacking of more than two modals, or any two modals with a backdrop is discouraged.
 
-{{"demo": "NestedModal.js"}}
+{{"component": "../data/material/components/modal/demos/nested/index.ts"}}
 
 ## Transitions
 
@@ -62,11 +62,11 @@ This component should respect the following conditions:
 
 Modal has built-in support for [react-transition-group](https://github.com/reactjs/react-transition-group).
 
-{{"demo": "TransitionsModal.js"}}
+{{"component": "../data/material/components/modal/demos/transitions/index.ts"}}
 
 Alternatively, you can use [react-spring](https://github.com/pmndrs/react-spring).
 
-{{"demo": "SpringModal.js"}}
+{{"component": "../data/material/components/modal/demos/spring/index.ts"}}
 
 ## Performance
 
@@ -78,7 +78,7 @@ it might be a good idea to change this default behavior by enabling the `keepMou
 
 ```
 
-{{"demo": "KeepMountedModal.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/modal/demos/keep-mounted/index.ts", "defaultCodeOpen": false}}
 
 As with any performance optimization, this is not a silver bullet.
 Be sure to identify bottlenecks first, and then try out these optimization strategies.
@@ -88,7 +88,7 @@ Be sure to identify bottlenecks first, and then try out these optimization strat
 React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://react.dev/reference/react-dom/createPortal) API on the server.
 In order to display the modal, you need to disable the portal feature with the `disablePortal` prop:
 
-{{"demo": "ServerModal.js"}}
+{{"component": "../data/material/components/modal/demos/server/index.ts"}}
 
 ## Limitations
 
diff --git a/docs/data/material/components/no-ssr/FrameDeferring.js b/docs/data/material/components/no-ssr/FrameDeferring.js
deleted file mode 100644
index 12bb991d7c4bf5..00000000000000
--- a/docs/data/material/components/no-ssr/FrameDeferring.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import NoSsr from '@mui/material/NoSsr';
-
-function LargeTree() {
-  return Array.from(new Array(5000)).map((_, index) => .);
-}
-
-export default function FrameDeferring() {
-  const [state, setState] = React.useState({
-    open: false,
-    defer: false,
-  });
-
-  return (
-    
    
-      
-      
    
-      
-      
    
-      
    
-      
-        {state.open ? (
-          
-            
    Outside NoSsr
    
-            
-              .....Inside NoSsr
-              
-            
-              
-        ) : null}
-          
-    
    
-  );
-}
diff --git a/docs/data/material/components/no-ssr/SimpleNoSsr.js b/docs/data/material/components/no-ssr/SimpleNoSsr.js
deleted file mode 100644
index a707f142936b87..00000000000000
--- a/docs/data/material/components/no-ssr/SimpleNoSsr.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import NoSsr from '@mui/material/NoSsr';
-import Box from '@mui/material/Box';
-
-export default function SimpleNoSsr() {
-  return (
-    
    
-      
-        Server and Client
-      
-      
-        
-          Client only
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview b/docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview
deleted file mode 100644
index a8a7f332c0e2b7..00000000000000
--- a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  Server and Client
-
-
-  
-    Client only
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/no-ssr/FrameDeferring.tsx b/docs/data/material/components/no-ssr/demos/frame-deferring/FrameDeferring.tsx
similarity index 96%
rename from docs/data/material/components/no-ssr/FrameDeferring.tsx
rename to docs/data/material/components/no-ssr/demos/frame-deferring/FrameDeferring.tsx
index 0026a85acf4bea..5bf4c049779e20 100644
--- a/docs/data/material/components/no-ssr/FrameDeferring.tsx
+++ b/docs/data/material/components/no-ssr/demos/frame-deferring/FrameDeferring.tsx
@@ -7,6 +7,7 @@ function LargeTree(): any {
 }
 
 export default function FrameDeferring() {
+  // @focus-start @padding 1
   const [state, setState] = React.useState({
     open: false,
     defer: false,
@@ -52,4 +53,5 @@ export default function FrameDeferring() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/no-ssr/demos/frame-deferring/index.ts b/docs/data/material/components/no-ssr/demos/frame-deferring/index.ts
new file mode 100644
index 00000000000000..edc5b07b34baf2
--- /dev/null
+++ b/docs/data/material/components/no-ssr/demos/frame-deferring/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FrameDeferring from './FrameDeferring';
+
+export default createDemo(import.meta.url, FrameDeferring);
diff --git a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx b/docs/data/material/components/no-ssr/demos/simple/SimpleNoSsr.tsx
similarity index 89%
rename from docs/data/material/components/no-ssr/SimpleNoSsr.tsx
rename to docs/data/material/components/no-ssr/demos/simple/SimpleNoSsr.tsx
index a707f142936b87..ca832dd5f7c7ff 100644
--- a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx
+++ b/docs/data/material/components/no-ssr/demos/simple/SimpleNoSsr.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 export default function SimpleNoSsr() {
   return (
     
    
+      {/* @focus-start */}
       
         Server and Client
       
@@ -14,6 +15,7 @@ export default function SimpleNoSsr() {
           Client only
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/no-ssr/demos/simple/index.ts b/docs/data/material/components/no-ssr/demos/simple/index.ts
new file mode 100644
index 00000000000000..b7e03ea29d9c0a
--- /dev/null
+++ b/docs/data/material/components/no-ssr/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleNoSsr from './SimpleNoSsr';
+
+export default createDemo(import.meta.url, SimpleNoSsr);
diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md
index b1af9967999b90..92e7e21fbfd7c6 100644
--- a/docs/data/material/components/no-ssr/no-ssr.md
+++ b/docs/data/material/components/no-ssr/no-ssr.md
@@ -23,7 +23,7 @@ This can be useful in a variety of situations, including:
 
 The demo below illustrates how this component works:
 
-{{"demo": "SimpleNoSsr.js"}}
+{{"component": "../data/material/components/no-ssr/demos/simple/index.ts"}}
 
 ## Basics
 
@@ -41,7 +41,7 @@ You can also use No-SSR to delay the rendering of specific components on the cli
 
 The following demo shows how to use the `defer` prop to prioritize rendering the rest of the app outside of what is nested within No-SSR:
 
-{{"demo": "FrameDeferring.js"}}
+{{"component": "../data/material/components/no-ssr/demos/frame-deferring/index.ts"}}
 
 :::warning
 When using No-SSR in this way, React applies [two commits](https://react.dev/learn/render-and-commit) instead of one.
diff --git a/docs/data/material/components/number-field/FieldDemo.js b/docs/data/material/components/number-field/FieldDemo.js
deleted file mode 100644
index 7368ee645d2a69..00000000000000
--- a/docs/data/material/components/number-field/FieldDemo.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import NumberField from './components/NumberField';
-
-export default function FieldDemo() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/number-field/FieldDemo.tsx.preview b/docs/data/material/components/number-field/FieldDemo.tsx.preview
deleted file mode 100644
index 0c7c714c1af82d..00000000000000
--- a/docs/data/material/components/number-field/FieldDemo.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/number-field/SpinnerDemo.js b/docs/data/material/components/number-field/SpinnerDemo.js
deleted file mode 100644
index 626b59e807598a..00000000000000
--- a/docs/data/material/components/number-field/SpinnerDemo.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import NumberSpinner from './components/NumberSpinner';
-
-export default function SpinnerDemo() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/number-field/SpinnerDemo.tsx.preview b/docs/data/material/components/number-field/SpinnerDemo.tsx.preview
deleted file mode 100644
index 1eaf1dcfe23c9d..00000000000000
--- a/docs/data/material/components/number-field/SpinnerDemo.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/number-field/components/NumberField.js b/docs/data/material/components/number-field/components/NumberField.js
deleted file mode 100644
index 64583e566e7133..00000000000000
--- a/docs/data/material/components/number-field/components/NumberField.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
-import IconButton from '@mui/material/IconButton';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputAdornment from '@mui/material/InputAdornment';
-import InputLabel from '@mui/material/InputLabel';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-
-/**
- * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
- */
-function SSRInitialFilled(_) {
-  return null;
-}
-SSRInitialFilled.muiName = 'Input';
-
-function NumberField({ id: idProp, label, error, size = 'medium', ...other }) {
-  let id = React.useId();
-  if (idProp) {
-    id = idProp;
-  }
-  return (
-     (
-        
-          {props.children}
-        
-      )}
-    >
-      
-      {label}
-       (
-          
-                }
-                >
-                  
-                
-
-                }
-                >
-                  
-                
-              
-            }
-            sx={{ pr: 0 }}
-          />
-        )}
-      />
-      
-        Enter value between 10 and 40
-      
-    
-  );
-}
-
-NumberField.propTypes = {
-  error: PropTypes.bool,
-  /**
-   * The id of the input element.
-   */
-  id: PropTypes.string,
-  label: PropTypes.node,
-  size: PropTypes.oneOf(['medium', 'small']),
-};
-
-export default NumberField;
diff --git a/docs/data/material/components/number-field/components/NumberSpinner.js b/docs/data/material/components/number-field/components/NumberSpinner.js
deleted file mode 100644
index 14a5de9d6a5574..00000000000000
--- a/docs/data/material/components/number-field/components/NumberSpinner.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import OpenInFullIcon from '@mui/icons-material/OpenInFull';
-
-function NumberSpinner({ id: idProp, label, error, size = 'medium', ...other }) {
-  let id = React.useId();
-  if (idProp) {
-    id = idProp;
-  }
-  return (
-     (
-        
-          {props.children}
-        
-      )}
-    >
-      
-        }
-      >
-        
-          {label}
-        
-        
-          
-        
-      
-      
-        
-          }
-        >
-          
-        
-
-         (
-            
-          )}
-        />
-        
-          }
-        >
-          
-        
-      
-    
-  );
-}
-
-NumberSpinner.propTypes = {
-  error: PropTypes.bool,
-  /**
-   * The id of the input element.
-   */
-  id: PropTypes.string,
-  label: PropTypes.node,
-  /**
-   * The minimum value of the input element.
-   */
-  min: PropTypes.number,
-  size: PropTypes.oneOf(['medium', 'small']),
-};
-
-export default NumberSpinner;
diff --git a/docs/data/material/components/number-field/FieldDemo.tsx b/docs/data/material/components/number-field/demos/field-demo/FieldDemo.tsx
similarity index 83%
rename from docs/data/material/components/number-field/FieldDemo.tsx
rename to docs/data/material/components/number-field/demos/field-demo/FieldDemo.tsx
index 7368ee645d2a69..5807114ec6549c 100644
--- a/docs/data/material/components/number-field/FieldDemo.tsx
+++ b/docs/data/material/components/number-field/demos/field-demo/FieldDemo.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import NumberField from './components/NumberField';
+import NumberField from "./NumberField";
 
 export default function FieldDemo() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/number-field/components/NumberField.tsx b/docs/data/material/components/number-field/demos/field-demo/NumberField.tsx
similarity index 98%
rename from docs/data/material/components/number-field/components/NumberField.tsx
rename to docs/data/material/components/number-field/demos/field-demo/NumberField.tsx
index 9dfcf922eb0c0f..9cbc887160a992 100644
--- a/docs/data/material/components/number-field/components/NumberField.tsx
+++ b/docs/data/material/components/number-field/demos/field-demo/NumberField.tsx
@@ -28,6 +28,7 @@ export default function NumberField({
   size?: 'small' | 'medium';
   error?: boolean;
 }) {
+  // @focus-start @padding 1
   let id = React.useId();
   if (idProp) {
     id = idProp;
@@ -111,4 +112,5 @@ export default function NumberField({
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/number-field/demos/field-demo/index.ts b/docs/data/material/components/number-field/demos/field-demo/index.ts
new file mode 100644
index 00000000000000..b53a75cce26435
--- /dev/null
+++ b/docs/data/material/components/number-field/demos/field-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FieldDemo from './FieldDemo';
+
+export default createDemo(import.meta.url, FieldDemo);
diff --git a/docs/data/material/components/number-field/components/NumberSpinner.tsx b/docs/data/material/components/number-field/demos/spinner-demo/NumberSpinner.tsx
similarity index 98%
rename from docs/data/material/components/number-field/components/NumberSpinner.tsx
rename to docs/data/material/components/number-field/demos/spinner-demo/NumberSpinner.tsx
index 324f6b3f7964dd..5b0adc303809f3 100644
--- a/docs/data/material/components/number-field/components/NumberSpinner.tsx
+++ b/docs/data/material/components/number-field/demos/spinner-demo/NumberSpinner.tsx
@@ -20,6 +20,7 @@ export default function NumberSpinner({
   size?: 'small' | 'medium';
   error?: boolean;
 }) {
+  // @focus-start @padding 1
   let id = React.useId();
   if (idProp) {
     id = idProp;
@@ -148,4 +149,5 @@ export default function NumberSpinner({
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/number-field/SpinnerDemo.tsx b/docs/data/material/components/number-field/demos/spinner-demo/SpinnerDemo.tsx
similarity index 85%
rename from docs/data/material/components/number-field/SpinnerDemo.tsx
rename to docs/data/material/components/number-field/demos/spinner-demo/SpinnerDemo.tsx
index 626b59e807598a..9e251487bd8235 100644
--- a/docs/data/material/components/number-field/SpinnerDemo.tsx
+++ b/docs/data/material/components/number-field/demos/spinner-demo/SpinnerDemo.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import NumberSpinner from './components/NumberSpinner';
+import NumberSpinner from "./NumberSpinner";
 
 export default function SpinnerDemo() {
   return (
@@ -12,6 +12,7 @@ export default function SpinnerDemo() {
         justifyContent: 'center',
       }}
     >
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/number-field/demos/spinner-demo/index.ts b/docs/data/material/components/number-field/demos/spinner-demo/index.ts
new file mode 100644
index 00000000000000..24e9009e87baf1
--- /dev/null
+++ b/docs/data/material/components/number-field/demos/spinner-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SpinnerDemo from './SpinnerDemo';
+
+export default createDemo(import.meta.url, SpinnerDemo);
diff --git a/docs/data/material/components/number-field/number-field.md b/docs/data/material/components/number-field/number-field.md
index ae837f5d6436d3..f22fab8ce3224e 100644
--- a/docs/data/material/components/number-field/number-field.md
+++ b/docs/data/material/components/number-field/number-field.md
@@ -48,14 +48,14 @@ yarn add @base-ui/react
 The outlined field uses the same building-block components as Material UI's outlined `TextField`—`FormControl`, `OutlinedInput`, `InputLabel`, and `FormHelperText`—with end adornments for the increment and decrement buttons.
 See [Text Field—Components](/material-ui/react-text-field/#components) for more details.
 
-{{"demo": "FieldDemo.js"}}
+{{"component": "../data/material/components/number-field/demos/field-demo/index.ts"}}
 
 ## Spinner field
 
 For the spinner field component, the increment and decrement buttons are placed next to the outlined input.
 This is ideal for touch devices and narrow ranges of values.
 
-{{"demo": "SpinnerDemo.js"}}
+{{"component": "../data/material/components/number-field/demos/spinner-demo/index.ts"}}
 
 ## Base UI API
 
diff --git a/docs/data/material/components/pagination/BasicPagination.js b/docs/data/material/components/pagination/BasicPagination.js
deleted file mode 100644
index 11d5885528adf6..00000000000000
--- a/docs/data/material/components/pagination/BasicPagination.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function BasicPagination() {
-  return (
-    
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/BasicPagination.tsx.preview b/docs/data/material/components/pagination/BasicPagination.tsx.preview
deleted file mode 100644
index e32005c97eebfe..00000000000000
--- a/docs/data/material/components/pagination/BasicPagination.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/CustomIcons.js b/docs/data/material/components/pagination/CustomIcons.js
deleted file mode 100644
index ac465677357e59..00000000000000
--- a/docs/data/material/components/pagination/CustomIcons.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import PaginationItem from '@mui/material/PaginationItem';
-import Stack from '@mui/material/Stack';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-
-export default function CustomIcons() {
-  return (
-    
-       (
-          
-        )}
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/CustomIcons.tsx.preview b/docs/data/material/components/pagination/CustomIcons.tsx.preview
deleted file mode 100644
index dc248b16b36278..00000000000000
--- a/docs/data/material/components/pagination/CustomIcons.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
- (
-    
-  )}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationButtons.js b/docs/data/material/components/pagination/PaginationButtons.js
deleted file mode 100644
index 1f07e27fdaeac9..00000000000000
--- a/docs/data/material/components/pagination/PaginationButtons.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationButtons() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationButtons.tsx.preview b/docs/data/material/components/pagination/PaginationButtons.tsx.preview
deleted file mode 100644
index d4f3b3312f4839..00000000000000
--- a/docs/data/material/components/pagination/PaginationButtons.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationControlled.js b/docs/data/material/components/pagination/PaginationControlled.js
deleted file mode 100644
index 9e7404ec0422d2..00000000000000
--- a/docs/data/material/components/pagination/PaginationControlled.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationControlled() {
-  const [page, setPage] = React.useState(1);
-  const handleChange = (event, value) => {
-    setPage(value);
-  };
-
-  return (
-    
-      Page: {page}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationControlled.tsx.preview b/docs/data/material/components/pagination/PaginationControlled.tsx.preview
deleted file mode 100644
index b3cc9eb0e2b1c2..00000000000000
--- a/docs/data/material/components/pagination/PaginationControlled.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-Page: {page}
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationLink.js b/docs/data/material/components/pagination/PaginationLink.js
deleted file mode 100644
index bc52b3a5de18e4..00000000000000
--- a/docs/data/material/components/pagination/PaginationLink.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router';
-import Pagination from '@mui/material/Pagination';
-import PaginationItem from '@mui/material/PaginationItem';
-
-function Content() {
-  const location = useLocation();
-  const query = new URLSearchParams(location.search);
-  const page = parseInt(query.get('page') || '1', 10);
-  return (
-     (
-        
-      )}
-    />
-  );
-}
-
-export default function PaginationLink() {
-  return (
-    
-      
-        } />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationLink.tsx.preview b/docs/data/material/components/pagination/PaginationLink.tsx.preview
deleted file mode 100644
index 25701dd44750c9..00000000000000
--- a/docs/data/material/components/pagination/PaginationLink.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-    } />
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationOutlined.js b/docs/data/material/components/pagination/PaginationOutlined.js
deleted file mode 100644
index 63ca021e9ef448..00000000000000
--- a/docs/data/material/components/pagination/PaginationOutlined.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationOutlined() {
-  return (
-    
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationOutlined.tsx.preview b/docs/data/material/components/pagination/PaginationOutlined.tsx.preview
deleted file mode 100644
index 9735159ed2c6fc..00000000000000
--- a/docs/data/material/components/pagination/PaginationOutlined.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationRanges.js b/docs/data/material/components/pagination/PaginationRanges.js
deleted file mode 100644
index bfff73f9465774..00000000000000
--- a/docs/data/material/components/pagination/PaginationRanges.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationRanges() {
-  return (
-    
-      
-       {/* Default ranges */}
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationRanges.tsx.preview b/docs/data/material/components/pagination/PaginationRanges.tsx.preview
deleted file mode 100644
index 4689414bd4e16a..00000000000000
--- a/docs/data/material/components/pagination/PaginationRanges.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
- {/* Default ranges */}
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationRounded.js b/docs/data/material/components/pagination/PaginationRounded.js
deleted file mode 100644
index c9edb52be900ae..00000000000000
--- a/docs/data/material/components/pagination/PaginationRounded.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationRounded() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationRounded.tsx.preview b/docs/data/material/components/pagination/PaginationRounded.tsx.preview
deleted file mode 100644
index 42a90978c1ac03..00000000000000
--- a/docs/data/material/components/pagination/PaginationRounded.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/PaginationSize.js b/docs/data/material/components/pagination/PaginationSize.js
deleted file mode 100644
index 5106cfb136f909..00000000000000
--- a/docs/data/material/components/pagination/PaginationSize.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationSize() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/PaginationSize.tsx.preview b/docs/data/material/components/pagination/PaginationSize.tsx.preview
deleted file mode 100644
index e9a96f630a3dd8..00000000000000
--- a/docs/data/material/components/pagination/PaginationSize.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/TablePaginationDemo.js b/docs/data/material/components/pagination/TablePaginationDemo.js
deleted file mode 100644
index e76af075c3a4be..00000000000000
--- a/docs/data/material/components/pagination/TablePaginationDemo.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import TablePagination from '@mui/material/TablePagination';
-
-export default function TablePaginationDemo() {
-  const [page, setPage] = React.useState(2);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/TablePaginationDemo.tsx.preview b/docs/data/material/components/pagination/TablePaginationDemo.tsx.preview
deleted file mode 100644
index 960b6db3263d2c..00000000000000
--- a/docs/data/material/components/pagination/TablePaginationDemo.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/pagination/UsePagination.js b/docs/data/material/components/pagination/UsePagination.js
deleted file mode 100644
index dfca24c73e5be3..00000000000000
--- a/docs/data/material/components/pagination/UsePagination.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import usePagination from '@mui/material/usePagination';
-import { styled } from '@mui/material/styles';
-
-const List = styled('ul')({
-  listStyle: 'none',
-  padding: 0,
-  margin: 0,
-  display: 'flex',
-});
-
-export default function UsePagination() {
-  const { items } = usePagination({
-    count: 10,
-  });
-
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/pagination/BasicPagination.tsx b/docs/data/material/components/pagination/demos/basic/BasicPagination.tsx
similarity index 87%
rename from docs/data/material/components/pagination/BasicPagination.tsx
rename to docs/data/material/components/pagination/demos/basic/BasicPagination.tsx
index 11d5885528adf6..a69888f388da7b 100644
--- a/docs/data/material/components/pagination/BasicPagination.tsx
+++ b/docs/data/material/components/pagination/demos/basic/BasicPagination.tsx
@@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack';
 export default function BasicPagination() {
   return (
     
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/basic/index.ts b/docs/data/material/components/pagination/demos/basic/index.ts
new file mode 100644
index 00000000000000..424382382fb096
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicPagination from './BasicPagination';
+
+export default createDemo(import.meta.url, BasicPagination);
diff --git a/docs/data/material/components/pagination/PaginationButtons.tsx b/docs/data/material/components/pagination/demos/buttons/PaginationButtons.tsx
similarity index 85%
rename from docs/data/material/components/pagination/PaginationButtons.tsx
rename to docs/data/material/components/pagination/demos/buttons/PaginationButtons.tsx
index 1f07e27fdaeac9..89546863c49b76 100644
--- a/docs/data/material/components/pagination/PaginationButtons.tsx
+++ b/docs/data/material/components/pagination/demos/buttons/PaginationButtons.tsx
@@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack';
 export default function PaginationButtons() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/buttons/index.ts b/docs/data/material/components/pagination/demos/buttons/index.ts
new file mode 100644
index 00000000000000..3700f0d9dd322c
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/buttons/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationButtons from './PaginationButtons';
+
+export default createDemo(import.meta.url, PaginationButtons);
diff --git a/docs/data/material/components/pagination/PaginationControlled.tsx b/docs/data/material/components/pagination/demos/controlled/PaginationControlled.tsx
similarity index 91%
rename from docs/data/material/components/pagination/PaginationControlled.tsx
rename to docs/data/material/components/pagination/demos/controlled/PaginationControlled.tsx
index 8bd3bfba3b7f26..4eae0c81d1501f 100644
--- a/docs/data/material/components/pagination/PaginationControlled.tsx
+++ b/docs/data/material/components/pagination/demos/controlled/PaginationControlled.tsx
@@ -11,8 +11,10 @@ export default function PaginationControlled() {
 
   return (
     
+      {/* @focus-start */}
       Page: {page}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/controlled/index.ts b/docs/data/material/components/pagination/demos/controlled/index.ts
new file mode 100644
index 00000000000000..711de669ce2335
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/controlled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationControlled from './PaginationControlled';
+
+export default createDemo(import.meta.url, PaginationControlled);
diff --git a/docs/data/material/components/pagination/CustomIcons.tsx b/docs/data/material/components/pagination/demos/custom-icons/CustomIcons.tsx
similarity index 91%
rename from docs/data/material/components/pagination/CustomIcons.tsx
rename to docs/data/material/components/pagination/demos/custom-icons/CustomIcons.tsx
index ac465677357e59..66456dece61051 100644
--- a/docs/data/material/components/pagination/CustomIcons.tsx
+++ b/docs/data/material/components/pagination/demos/custom-icons/CustomIcons.tsx
@@ -7,6 +7,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 export default function CustomIcons() {
   return (
     
+      {/* @focus-start */}
        (
@@ -16,6 +17,7 @@ export default function CustomIcons() {
           />
         )}
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/custom-icons/index.ts b/docs/data/material/components/pagination/demos/custom-icons/index.ts
new file mode 100644
index 00000000000000..d7011c14101d84
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/custom-icons/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomIcons from './CustomIcons';
+
+export default createDemo(import.meta.url, CustomIcons);
diff --git a/docs/data/material/components/pagination/PaginationLink.tsx b/docs/data/material/components/pagination/demos/link/PaginationLink.tsx
similarity index 94%
rename from docs/data/material/components/pagination/PaginationLink.tsx
rename to docs/data/material/components/pagination/demos/link/PaginationLink.tsx
index bc52b3a5de18e4..1bad3cb3da1945 100644
--- a/docs/data/material/components/pagination/PaginationLink.tsx
+++ b/docs/data/material/components/pagination/demos/link/PaginationLink.tsx
@@ -22,6 +22,7 @@ function Content() {
 }
 
 export default function PaginationLink() {
+  // @focus-start @padding 1
   return (
     
       
@@ -29,4 +30,5 @@ export default function PaginationLink() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/pagination/demos/link/index.ts b/docs/data/material/components/pagination/demos/link/index.ts
new file mode 100644
index 00000000000000..2db92feb0ea744
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/link/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationLink from './PaginationLink';
+
+export default createDemo(import.meta.url, PaginationLink);
diff --git a/docs/data/material/components/pagination/PaginationOutlined.tsx b/docs/data/material/components/pagination/demos/outlined/PaginationOutlined.tsx
similarity index 89%
rename from docs/data/material/components/pagination/PaginationOutlined.tsx
rename to docs/data/material/components/pagination/demos/outlined/PaginationOutlined.tsx
index 63ca021e9ef448..b62b05938f0654 100644
--- a/docs/data/material/components/pagination/PaginationOutlined.tsx
+++ b/docs/data/material/components/pagination/demos/outlined/PaginationOutlined.tsx
@@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack';
 export default function PaginationOutlined() {
   return (
     
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/outlined/index.ts b/docs/data/material/components/pagination/demos/outlined/index.ts
new file mode 100644
index 00000000000000..205c80ff2e66b1
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/outlined/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationOutlined from './PaginationOutlined';
+
+export default createDemo(import.meta.url, PaginationOutlined);
diff --git a/docs/data/material/components/pagination/PaginationRanges.tsx b/docs/data/material/components/pagination/demos/ranges/PaginationRanges.tsx
similarity index 90%
rename from docs/data/material/components/pagination/PaginationRanges.tsx
rename to docs/data/material/components/pagination/demos/ranges/PaginationRanges.tsx
index bfff73f9465774..b63a4e2b33b6ea 100644
--- a/docs/data/material/components/pagination/PaginationRanges.tsx
+++ b/docs/data/material/components/pagination/demos/ranges/PaginationRanges.tsx
@@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack';
 export default function PaginationRanges() {
   return (
     
+      {/* @focus-start */}
       
        {/* Default ranges */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/ranges/index.ts b/docs/data/material/components/pagination/demos/ranges/index.ts
new file mode 100644
index 00000000000000..1daeb72ce9129f
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/ranges/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationRanges from './PaginationRanges';
+
+export default createDemo(import.meta.url, PaginationRanges);
diff --git a/docs/data/material/components/pagination/PaginationRounded.tsx b/docs/data/material/components/pagination/demos/rounded/PaginationRounded.tsx
similarity index 85%
rename from docs/data/material/components/pagination/PaginationRounded.tsx
rename to docs/data/material/components/pagination/demos/rounded/PaginationRounded.tsx
index c9edb52be900ae..17d586d7c9d3c2 100644
--- a/docs/data/material/components/pagination/PaginationRounded.tsx
+++ b/docs/data/material/components/pagination/demos/rounded/PaginationRounded.tsx
@@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack';
 export default function PaginationRounded() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/rounded/index.ts b/docs/data/material/components/pagination/demos/rounded/index.ts
new file mode 100644
index 00000000000000..f66f31f22c0605
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/rounded/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationRounded from './PaginationRounded';
+
+export default createDemo(import.meta.url, PaginationRounded);
diff --git a/docs/data/material/components/pagination/PaginationSize.tsx b/docs/data/material/components/pagination/demos/size/PaginationSize.tsx
similarity index 85%
rename from docs/data/material/components/pagination/PaginationSize.tsx
rename to docs/data/material/components/pagination/demos/size/PaginationSize.tsx
index 5106cfb136f909..817a607dc2effc 100644
--- a/docs/data/material/components/pagination/PaginationSize.tsx
+++ b/docs/data/material/components/pagination/demos/size/PaginationSize.tsx
@@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack';
 export default function PaginationSize() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/pagination/demos/size/index.ts b/docs/data/material/components/pagination/demos/size/index.ts
new file mode 100644
index 00000000000000..74cb8e23caccbe
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PaginationSize from './PaginationSize';
+
+export default createDemo(import.meta.url, PaginationSize);
diff --git a/docs/data/material/components/pagination/TablePaginationDemo.tsx b/docs/data/material/components/pagination/demos/table-demo/TablePaginationDemo.tsx
similarity index 94%
rename from docs/data/material/components/pagination/TablePaginationDemo.tsx
rename to docs/data/material/components/pagination/demos/table-demo/TablePaginationDemo.tsx
index 876237975d5e12..ba9986a8409593 100644
--- a/docs/data/material/components/pagination/TablePaginationDemo.tsx
+++ b/docs/data/material/components/pagination/demos/table-demo/TablePaginationDemo.tsx
@@ -19,6 +19,7 @@ export default function TablePaginationDemo() {
     setPage(0);
   };
 
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/pagination/demos/table-demo/index.ts b/docs/data/material/components/pagination/demos/table-demo/index.ts
new file mode 100644
index 00000000000000..ea39ffabbffd85
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/table-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TablePaginationDemo from './TablePaginationDemo';
+
+export default createDemo(import.meta.url, TablePaginationDemo);
diff --git a/docs/data/material/components/pagination/UsePagination.tsx b/docs/data/material/components/pagination/demos/use/UsePagination.tsx
similarity index 96%
rename from docs/data/material/components/pagination/UsePagination.tsx
rename to docs/data/material/components/pagination/demos/use/UsePagination.tsx
index dfca24c73e5be3..98f8b1166f218d 100644
--- a/docs/data/material/components/pagination/UsePagination.tsx
+++ b/docs/data/material/components/pagination/demos/use/UsePagination.tsx
@@ -9,6 +9,7 @@ const List = styled('ul')({
 });
 
 export default function UsePagination() {
+  // @focus-start @padding 1
   const { items } = usePagination({
     count: 10,
   });
@@ -46,4 +47,5 @@ export default function UsePagination() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/pagination/demos/use/index.ts b/docs/data/material/components/pagination/demos/use/index.ts
new file mode 100644
index 00000000000000..0f490e9013df22
--- /dev/null
+++ b/docs/data/material/components/pagination/demos/use/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UsePagination from './UsePagination';
+
+export default createDemo(import.meta.url, UsePagination);
diff --git a/docs/data/material/components/pagination/pagination.md b/docs/data/material/components/pagination/pagination.md
index 302568bf23f159..4c2e25c16e672d 100644
--- a/docs/data/material/components/pagination/pagination.md
+++ b/docs/data/material/components/pagination/pagination.md
@@ -14,45 +14,45 @@ githubSource: packages/mui-material/src/Pagination
 
 ## Basic pagination
 
-{{"demo": "BasicPagination.js"}}
+{{"component": "../data/material/components/pagination/demos/basic/index.ts"}}
 
 ## Outlined pagination
 
-{{"demo": "PaginationOutlined.js"}}
+{{"component": "../data/material/components/pagination/demos/outlined/index.ts"}}
 
 ## Rounded pagination
 
-{{"demo": "PaginationRounded.js"}}
+{{"component": "../data/material/components/pagination/demos/rounded/index.ts"}}
 
 ## Pagination size
 
-{{"demo": "PaginationSize.js"}}
+{{"component": "../data/material/components/pagination/demos/size/index.ts"}}
 
 ## Buttons
 
 You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons.
 
-{{"demo": "PaginationButtons.js"}}
+{{"component": "../data/material/components/pagination/demos/buttons/index.ts"}}
 
 ## Custom icons
 
 It's possible to customize the control icons.
 
-{{"demo": "CustomIcons.js"}}
+{{"component": "../data/material/components/pagination/demos/custom-icons/index.ts"}}
 
 ## Pagination ranges
 
 You can specify how many digits to display either side of current page with the `siblingCount` prop, and adjacent to the start and end page number with the `boundaryCount` prop.
 
-{{"demo": "PaginationRanges.js"}}
+{{"component": "../data/material/components/pagination/demos/ranges/index.ts"}}
 
 ## Controlled pagination
 
-{{"demo": "PaginationControlled.js"}}
+{{"component": "../data/material/components/pagination/demos/controlled/index.ts"}}
 
 ## Router integration
 
-{{"demo": "PaginationLink.js"}}
+{{"component": "../data/material/components/pagination/demos/link/index.ts"}}
 
 ## `usePagination`
 
@@ -65,7 +65,7 @@ The Pagination component is built on this hook.
 import usePagination from '@mui/material/usePagination';
 ```
 
-{{"demo": "UsePagination.js"}}
+{{"component": "../data/material/components/pagination/demos/use/index.ts"}}
 
 ## Table pagination
 
@@ -74,7 +74,7 @@ It's preferred in contexts where SEO is important, for instance, a blog.
 
 For the pagination of a large set of tabular data, you should use the `TablePagination` component.
 
-{{"demo": "TablePaginationDemo.js"}}
+{{"component": "../data/material/components/pagination/demos/table-demo/index.ts"}}
 
 :::warning
 Note that the `Pagination` page prop starts at 1 to match the requirement of including the value in the URL, while the `TablePagination` page prop starts at 0 to match the requirement of zero-based JavaScript arrays that come with rendering a lot of tabular data.
diff --git a/docs/data/material/components/paper/Elevation.js b/docs/data/material/components/paper/Elevation.js
deleted file mode 100644
index 4428a1c77a28f7..00000000000000
--- a/docs/data/material/components/paper/Elevation.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Box from '@mui/material/Box';
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
-
-const Item = styled(Paper)(({ theme }) => ({
-  ...theme.typography.body2,
-  textAlign: 'center',
-  color: theme.palette.text.secondary,
-  height: 60,
-  lineHeight: '60px',
-}));
-
-const darkTheme = createTheme({ palette: { mode: 'dark' } });
-const lightTheme = createTheme({ palette: { mode: 'light' } });
-
-export default function Elevation() {
-  return (
-    
-      
-        {[lightTheme, darkTheme].map((theme, index) => (
-          
-            
-              
-                {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => (
-                  
-                    {`elevation=${elevation}`}
-                  
-                ))}
-              
-            
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/paper/SimplePaper.js b/docs/data/material/components/paper/SimplePaper.js
deleted file mode 100644
index 48dfdc91ca12f6..00000000000000
--- a/docs/data/material/components/paper/SimplePaper.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-
-export default function SimplePaper() {
-  return (
-     :not(style)': {
-          m: 1,
-          width: 128,
-          height: 128,
-        },
-      }}
-    >
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/paper/SimplePaper.tsx.preview b/docs/data/material/components/paper/SimplePaper.tsx.preview
deleted file mode 100644
index 8cb24f550d9835..00000000000000
--- a/docs/data/material/components/paper/SimplePaper.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/paper/SquareCorners.js b/docs/data/material/components/paper/SquareCorners.js
deleted file mode 100644
index 76e8d1cb133b13..00000000000000
--- a/docs/data/material/components/paper/SquareCorners.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Paper from '@mui/material/Paper';
-import { styled } from '@mui/material/styles';
-
-const DemoPaper = styled(Paper)(({ theme }) => ({
-  width: 120,
-  height: 120,
-  padding: theme.spacing(2),
-  ...theme.typography.body2,
-  textAlign: 'center',
-}));
-
-export default function SquareCorners() {
-  return (
-    
-      rounded corners
-      square corners
-    
-  );
-}
diff --git a/docs/data/material/components/paper/SquareCorners.tsx.preview b/docs/data/material/components/paper/SquareCorners.tsx.preview
deleted file mode 100644
index 5bf5b6adf2dce1..00000000000000
--- a/docs/data/material/components/paper/SquareCorners.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-rounded corners
-square corners
\ No newline at end of file
diff --git a/docs/data/material/components/paper/Variants.js b/docs/data/material/components/paper/Variants.js
deleted file mode 100644
index 41cc2ea10ef3ad..00000000000000
--- a/docs/data/material/components/paper/Variants.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Paper from '@mui/material/Paper';
-import { styled } from '@mui/material/styles';
-
-const DemoPaper = styled(Paper)(({ theme }) => ({
-  width: 120,
-  height: 120,
-  padding: theme.spacing(2),
-  ...theme.typography.body2,
-  textAlign: 'center',
-}));
-
-export default function Variants() {
-  return (
-    
-      default variant
-      outlined variant
-    
-  );
-}
diff --git a/docs/data/material/components/paper/Variants.tsx.preview b/docs/data/material/components/paper/Variants.tsx.preview
deleted file mode 100644
index fc9f6c8dcb4854..00000000000000
--- a/docs/data/material/components/paper/Variants.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-default variant
-outlined variant
\ No newline at end of file
diff --git a/docs/data/material/components/paper/Elevation.tsx b/docs/data/material/components/paper/demos/elevation/Elevation.tsx
similarity index 96%
rename from docs/data/material/components/paper/Elevation.tsx
rename to docs/data/material/components/paper/demos/elevation/Elevation.tsx
index 4428a1c77a28f7..a14905089cb7e2 100644
--- a/docs/data/material/components/paper/Elevation.tsx
+++ b/docs/data/material/components/paper/demos/elevation/Elevation.tsx
@@ -17,6 +17,7 @@ const lightTheme = createTheme({ palette: { mode: 'light' } });
 export default function Elevation() {
   return (
     
+      {/* @focus-start */}
       
         {[lightTheme, darkTheme].map((theme, index) => (
           
@@ -41,6 +42,7 @@ export default function Elevation() {
           
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/paper/demos/elevation/index.ts b/docs/data/material/components/paper/demos/elevation/index.ts
new file mode 100644
index 00000000000000..95ab969dc0b718
--- /dev/null
+++ b/docs/data/material/components/paper/demos/elevation/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Elevation from './Elevation';
+
+export default createDemo(import.meta.url, Elevation);
diff --git a/docs/data/material/components/paper/SimplePaper.tsx b/docs/data/material/components/paper/demos/simple/SimplePaper.tsx
similarity index 88%
rename from docs/data/material/components/paper/SimplePaper.tsx
rename to docs/data/material/components/paper/demos/simple/SimplePaper.tsx
index 48dfdc91ca12f6..bff7f0fd6981a8 100644
--- a/docs/data/material/components/paper/SimplePaper.tsx
+++ b/docs/data/material/components/paper/demos/simple/SimplePaper.tsx
@@ -14,9 +14,11 @@ export default function SimplePaper() {
         },
       }}
     >
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/paper/demos/simple/index.ts b/docs/data/material/components/paper/demos/simple/index.ts
new file mode 100644
index 00000000000000..61929de6712c51
--- /dev/null
+++ b/docs/data/material/components/paper/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimplePaper from './SimplePaper';
+
+export default createDemo(import.meta.url, SimplePaper);
diff --git a/docs/data/material/components/paper/SquareCorners.tsx b/docs/data/material/components/paper/demos/square-corners/SquareCorners.tsx
similarity index 90%
rename from docs/data/material/components/paper/SquareCorners.tsx
rename to docs/data/material/components/paper/demos/square-corners/SquareCorners.tsx
index 76e8d1cb133b13..fb758d73dc4bc4 100644
--- a/docs/data/material/components/paper/SquareCorners.tsx
+++ b/docs/data/material/components/paper/demos/square-corners/SquareCorners.tsx
@@ -13,8 +13,10 @@ const DemoPaper = styled(Paper)(({ theme }) => ({
 export default function SquareCorners() {
   return (
     
+      {/* @focus-start */}
       rounded corners
       square corners
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/paper/demos/square-corners/index.ts b/docs/data/material/components/paper/demos/square-corners/index.ts
new file mode 100644
index 00000000000000..7ee8aba6caf53a
--- /dev/null
+++ b/docs/data/material/components/paper/demos/square-corners/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SquareCorners from './SquareCorners';
+
+export default createDemo(import.meta.url, SquareCorners);
diff --git a/docs/data/material/components/paper/Variants.tsx b/docs/data/material/components/paper/demos/variants/Variants.tsx
similarity index 91%
rename from docs/data/material/components/paper/Variants.tsx
rename to docs/data/material/components/paper/demos/variants/Variants.tsx
index 41cc2ea10ef3ad..009d6ca8a7ef27 100644
--- a/docs/data/material/components/paper/Variants.tsx
+++ b/docs/data/material/components/paper/demos/variants/Variants.tsx
@@ -13,8 +13,10 @@ const DemoPaper = styled(Paper)(({ theme }) => ({
 export default function Variants() {
   return (
     
+      {/* @focus-start */}
       default variant
       outlined variant
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/paper/demos/variants/index.ts b/docs/data/material/components/paper/demos/variants/index.ts
new file mode 100644
index 00000000000000..961e786210539c
--- /dev/null
+++ b/docs/data/material/components/paper/demos/variants/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Variants from './Variants';
+
+export default createDemo(import.meta.url, Variants);
diff --git a/docs/data/material/components/paper/paper.md b/docs/data/material/components/paper/paper.md
index 5f8da4d0972fc9..831d21aed41e2e 100644
--- a/docs/data/material/components/paper/paper.md
+++ b/docs/data/material/components/paper/paper.md
@@ -25,7 +25,7 @@ The Paper component is ideally suited for designs that follow [Material Design's
 If you just need a generic container, you may prefer to use the [Box](/material-ui/react-box/) or [Container](/material-ui/react-container/) components.
 :::
 
-{{"demo": "SimplePaper.js", "bg": true}}
+{{"component": "../data/material/components/paper/demos/simple/index.ts", "bg": true}}
 
 ## Component
 
@@ -50,20 +50,20 @@ The aforementioned dark mode behavior can lead to confusion when overriding the
 To override it, you must either use a new background value, or customize the values for both `background-color` and `background-image`.
 :::
 
-{{"demo": "Elevation.js", "bg": "outlined"}}
+{{"component": "../data/material/components/paper/demos/elevation/index.ts", "bg": "outlined"}}
 
 ### Variants
 
 Set the `variant` prop to `"outlined"` for a flat, outlined Paper with no shadows:
 
-{{"demo": "Variants.js", "bg": true}}
+{{"component": "../data/material/components/paper/demos/variants/index.ts", "bg": true}}
 
 ### Corners
 
 The Paper component features rounded corners by default.
 Add the `square` prop for square corners:
 
-{{"demo": "SquareCorners.js", "bg": true}}
+{{"component": "../data/material/components/paper/demos/square-corners/index.ts", "bg": true}}
 
 ## Anatomy
 
diff --git a/docs/data/material/components/popover/BasicPopover.js b/docs/data/material/components/popover/BasicPopover.js
deleted file mode 100644
index 0c75a9d1795d44..00000000000000
--- a/docs/data/material/components/popover/BasicPopover.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import Popover from '@mui/material/Popover';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-export default function BasicPopover() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'simple-popover' : undefined;
-
-  return (
-    
    
-      
-      
-        The content of the Popover.
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popover/BasicPopover.tsx.preview b/docs/data/material/components/popover/BasicPopover.tsx.preview
deleted file mode 100644
index 73c923e1cfaf71..00000000000000
--- a/docs/data/material/components/popover/BasicPopover.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-  The content of the Popover.
-
\ No newline at end of file
diff --git a/docs/data/material/components/popover/MouseHoverPopover.js b/docs/data/material/components/popover/MouseHoverPopover.js
deleted file mode 100644
index 83a57ffd90aa62..00000000000000
--- a/docs/data/material/components/popover/MouseHoverPopover.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import Popover from '@mui/material/Popover';
-import Typography from '@mui/material/Typography';
-
-export default function MouseHoverPopover() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handlePopoverOpen = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-
-  return (
-    
    
-      
-        Hover with a Popover.
-      
-      
-        I use Popover.
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popover/PopoverPopupState.js b/docs/data/material/components/popover/PopoverPopupState.js
deleted file mode 100644
index 376fd5acc4c3d4..00000000000000
--- a/docs/data/material/components/popover/PopoverPopupState.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import Popover from '@mui/material/Popover';
-import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
-
-export default function PopoverPopupState() {
-  return (
-    
-      {(popupState) => (
-        
    
-          
-          
-            The content of the Popover.
-          
-        
    
-      )}
-        
-  );
-}
diff --git a/docs/data/material/components/popover/VirtualElementPopover.js b/docs/data/material/components/popover/VirtualElementPopover.js
deleted file mode 100644
index afec24bcba3a58..00000000000000
--- a/docs/data/material/components/popover/VirtualElementPopover.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import Popover from '@mui/material/Popover';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-
-export default function VirtualElementPopover() {
-  const [open, setOpen] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleMouseUp = () => {
-    const selection = window.getSelection();
-
-    // Skip if selection has a length of 0
-    if (!selection || selection.anchorOffset === selection.focusOffset) {
-      return;
-    }
-
-    const getBoundingClientRect = () => {
-      return selection.getRangeAt(0).getBoundingClientRect();
-    };
-
-    setOpen(true);
-
-    setAnchorEl({ getBoundingClientRect, nodeType: 1 });
-  };
-
-  const id = open ? 'virtual-element-popover' : undefined;
-
-  return (
-    
    
-      
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,
-        bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum
-        vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor
-        porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis
-        vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus
-        massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit
-        amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus
-        consequat. Suspendisse lacinia tellus a libero volutpat maximus.
-      
-      
-        
-          The content of the Popover.
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popover/AnchorPlayground.js b/docs/data/material/components/popover/demos/anchor-playground/AnchorPlayground.js
similarity index 100%
rename from docs/data/material/components/popover/AnchorPlayground.js
rename to docs/data/material/components/popover/demos/anchor-playground/AnchorPlayground.js
diff --git a/docs/data/material/components/popover/demos/anchor-playground/index.ts b/docs/data/material/components/popover/demos/anchor-playground/index.ts
new file mode 100644
index 00000000000000..f3204769ff3254
--- /dev/null
+++ b/docs/data/material/components/popover/demos/anchor-playground/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AnchorPlayground from './AnchorPlayground';
+
+export default createDemo(import.meta.url, AnchorPlayground);
diff --git a/docs/data/material/components/popover/BasicPopover.tsx b/docs/data/material/components/popover/demos/basic/BasicPopover.tsx
similarity index 95%
rename from docs/data/material/components/popover/BasicPopover.tsx
rename to docs/data/material/components/popover/demos/basic/BasicPopover.tsx
index 5ee41b9d09d527..9e87e94d759f08 100644
--- a/docs/data/material/components/popover/BasicPopover.tsx
+++ b/docs/data/material/components/popover/demos/basic/BasicPopover.tsx
@@ -19,6 +19,7 @@ export default function BasicPopover() {
 
   return (
     
    
+      {/* @focus-start */}
       
@@ -34,6 +35,7 @@ export default function BasicPopover() {
       >
         The content of the Popover.
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/popover/demos/basic/index.ts b/docs/data/material/components/popover/demos/basic/index.ts
new file mode 100644
index 00000000000000..95c428ca6bd8e0
--- /dev/null
+++ b/docs/data/material/components/popover/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicPopover from './BasicPopover';
+
+export default createDemo(import.meta.url, BasicPopover);
diff --git a/docs/data/material/components/popover/MouseHoverPopover.tsx b/docs/data/material/components/popover/demos/mouse-hover/MouseHoverPopover.tsx
similarity index 96%
rename from docs/data/material/components/popover/MouseHoverPopover.tsx
rename to docs/data/material/components/popover/demos/mouse-hover/MouseHoverPopover.tsx
index 2891baf1863157..03e8e3ce333a86 100644
--- a/docs/data/material/components/popover/MouseHoverPopover.tsx
+++ b/docs/data/material/components/popover/demos/mouse-hover/MouseHoverPopover.tsx
@@ -3,6 +3,7 @@ import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 
 export default function MouseHoverPopover() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handlePopoverOpen = (event: React.MouseEvent) => {
@@ -45,4 +46,5 @@ export default function MouseHoverPopover() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/popover/demos/mouse-hover/index.ts b/docs/data/material/components/popover/demos/mouse-hover/index.ts
new file mode 100644
index 00000000000000..4ad2edbe3c1278
--- /dev/null
+++ b/docs/data/material/components/popover/demos/mouse-hover/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MouseHoverPopover from './MouseHoverPopover';
+
+export default createDemo(import.meta.url, MouseHoverPopover);
diff --git a/docs/data/material/components/popover/PopoverPopupState.tsx b/docs/data/material/components/popover/demos/popup-state/PopoverPopupState.tsx
similarity index 96%
rename from docs/data/material/components/popover/PopoverPopupState.tsx
rename to docs/data/material/components/popover/demos/popup-state/PopoverPopupState.tsx
index 376fd5acc4c3d4..0212188dd1f619 100644
--- a/docs/data/material/components/popover/PopoverPopupState.tsx
+++ b/docs/data/material/components/popover/demos/popup-state/PopoverPopupState.tsx
@@ -5,6 +5,7 @@ import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 
 export default function PopoverPopupState() {
   return (
+    // @focus-start
     
       {(popupState) => (
         
    
@@ -27,5 +28,6 @@ export default function PopoverPopupState() {
         
    
       )}
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/popover/demos/popup-state/index.ts b/docs/data/material/components/popover/demos/popup-state/index.ts
new file mode 100644
index 00000000000000..b44e0bcd067fd8
--- /dev/null
+++ b/docs/data/material/components/popover/demos/popup-state/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PopoverPopupState from './PopoverPopupState';
+
+export default createDemo(import.meta.url, PopoverPopupState);
diff --git a/docs/data/material/components/popover/VirtualElementPopover.tsx b/docs/data/material/components/popover/demos/virtual-element/VirtualElementPopover.tsx
similarity index 97%
rename from docs/data/material/components/popover/VirtualElementPopover.tsx
rename to docs/data/material/components/popover/demos/virtual-element/VirtualElementPopover.tsx
index 61a483445def78..823f22018a8b88 100644
--- a/docs/data/material/components/popover/VirtualElementPopover.tsx
+++ b/docs/data/material/components/popover/demos/virtual-element/VirtualElementPopover.tsx
@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 
 export default function VirtualElementPopover() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -56,4 +57,5 @@ export default function VirtualElementPopover() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/popover/demos/virtual-element/index.ts b/docs/data/material/components/popover/demos/virtual-element/index.ts
new file mode 100644
index 00000000000000..756086fcbc0d0c
--- /dev/null
+++ b/docs/data/material/components/popover/demos/virtual-element/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VirtualElementPopover from './VirtualElementPopover';
+
+export default createDemo(import.meta.url, VirtualElementPopover);
diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md
index b222ad53ef57bc..4d18424758af95 100644
--- a/docs/data/material/components/popover/popover.md
+++ b/docs/data/material/components/popover/popover.md
@@ -19,7 +19,7 @@ Things to know when using the `Popover` component:
 
 ## Basic Popover
 
-{{"demo": "BasicPopover.js"}}
+{{"component": "../data/material/components/popover/demos/basic/index.ts"}}
 
 ## Anchor playground
 
@@ -29,13 +29,13 @@ When it is `anchorPosition`, the component will, instead of `anchorEl`,
 refer to the `anchorPosition` prop which you can adjust to set
 the position of the popover.
 
-{{"demo": "AnchorPlayground.js", "hideToolbar": true}}
+{{"component": "../data/material/components/popover/demos/anchor-playground/index.ts", "hideToolbar": true}}
 
 ## Mouse hover interaction
 
 This demo demonstrates how to use the `Popover` component with `mouseenter` and `mouseleave` events to achieve popover behavior.
 
-{{"demo": "MouseHoverPopover.js"}}
+{{"component": "../data/material/components/popover/demos/mouse-hover/index.ts"}}
 
 ## Virtual element
 
@@ -51,7 +51,7 @@ interface PopoverVirtualElement {
 
 Highlight part of the text to see the popover:
 
-{{"demo": "VirtualElementPopover.js"}}
+{{"component": "../data/material/components/popover/demos/virtual-element/index.ts"}}
 
 For more information on the virtual element's properties, see the following resources:
 
@@ -80,4 +80,4 @@ For more advanced use cases, you might be able to take advantage of:
 
 The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover state for you in most cases.
 
-{{"demo": "PopoverPopupState.js"}}
+{{"component": "../data/material/components/popover/demos/popup-state/index.ts"}}
diff --git a/docs/data/material/components/popper/PopperPopupState.js b/docs/data/material/components/popper/PopperPopupState.js
deleted file mode 100644
index 46100f8ca6f0ce..00000000000000
--- a/docs/data/material/components/popper/PopperPopupState.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import Popper from '@mui/material/Popper';
-import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state';
-import Fade from '@mui/material/Fade';
-import Paper from '@mui/material/Paper';
-
-export default function PopperPopupState() {
-  return (
-    
-      {(popupState) => (
-        
    
-          
-          
-            {({ TransitionProps }) => (
-              
-                
-                  The content of the Popper.
-                
-              
-            )}
-          
-        
    
-      )}
-        
-  );
-}
diff --git a/docs/data/material/components/popper/PositionedPopper.js b/docs/data/material/components/popper/PositionedPopper.js
deleted file mode 100644
index 1976cb0f757214..00000000000000
--- a/docs/data/material/components/popper/PositionedPopper.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Popper from '@mui/material/Popper';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import Fade from '@mui/material/Fade';
-import Paper from '@mui/material/Paper';
-
-export default function PositionedPopper() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
-  const [placement, setPlacement] = React.useState();
-
-  const handleClick = (newPlacement) => (event) => {
-    setAnchorEl(event.currentTarget);
-    setOpen((prev) => placement !== newPlacement || !prev);
-    setPlacement(newPlacement);
-  };
-
-  return (
-    
-      
-        {({ TransitionProps }) => (
-          
-            
-              The content of the Popper.
-            
-          
-        )}
-      
-      
-        
-        
-        
-      
-      
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-      
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/popper/SimplePopper.js b/docs/data/material/components/popper/SimplePopper.js
deleted file mode 100644
index d001adba4a3f41..00000000000000
--- a/docs/data/material/components/popper/SimplePopper.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Popper from '@mui/material/Popper';
-
-export default function SimplePopper() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'simple-popper' : undefined;
-
-  return (
-    
    
-      
-      
-        
-          The content of the Popper.
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popper/SimplePopper.tsx.preview b/docs/data/material/components/popper/SimplePopper.tsx.preview
deleted file mode 100644
index a344e00a2e734a..00000000000000
--- a/docs/data/material/components/popper/SimplePopper.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-  
-    The content of the Popper.
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/popper/SpringPopper.js b/docs/data/material/components/popper/SpringPopper.js
deleted file mode 100644
index c86ecf815a0454..00000000000000
--- a/docs/data/material/components/popper/SpringPopper.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Popper from '@mui/material/Popper';
-import { useSpring, animated } from '@react-spring/web';
-
-const Fade = React.forwardRef(function Fade(props, ref) {
-  const { in: open, children, onEnter, onExited, ...other } = props;
-  const style = useSpring({
-    from: { opacity: 0 },
-    to: { opacity: open ? 1 : 0 },
-    onStart: () => {
-      if (open && onEnter) {
-        onEnter();
-      }
-    },
-    onRest: () => {
-      if (!open && onExited) {
-        onExited();
-      }
-    },
-  });
-
-  return (
-    
-      {children}
-    
-  );
-});
-
-Fade.propTypes = {
-  children: PropTypes.element,
-  in: PropTypes.bool,
-  onEnter: PropTypes.func,
-  onExited: PropTypes.func,
-};
-
-export default function SpringPopper() {
-  const [open, setOpen] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-    setOpen((previousOpen) => !previousOpen);
-  };
-
-  const canBeOpen = open && Boolean(anchorEl);
-  const id = canBeOpen ? 'spring-popper' : undefined;
-
-  return (
-    
    
-      
-      
-        {({ TransitionProps }) => (
-          
-            
-              The content of the Popper.
-            
-          
-        )}
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popper/SpringPopper.tsx.preview b/docs/data/material/components/popper/SpringPopper.tsx.preview
deleted file mode 100644
index 7dbf85d6411e6f..00000000000000
--- a/docs/data/material/components/popper/SpringPopper.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-  {({ TransitionProps }) => (
-    
-      
-        The content of the Popper.
-      
-    
-  )}
-
\ No newline at end of file
diff --git a/docs/data/material/components/popper/TransitionsPopper.js b/docs/data/material/components/popper/TransitionsPopper.js
deleted file mode 100644
index 28f24c7bba8b64..00000000000000
--- a/docs/data/material/components/popper/TransitionsPopper.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Popper from '@mui/material/Popper';
-import Fade from '@mui/material/Fade';
-
-export default function TransitionsPopper() {
-  const [open, setOpen] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-    setOpen((previousOpen) => !previousOpen);
-  };
-
-  const canBeOpen = open && Boolean(anchorEl);
-  const id = canBeOpen ? 'transition-popper' : undefined;
-
-  return (
-    
    
-      
-      
-        {({ TransitionProps }) => (
-          
-            
-              The content of the Popper.
-            
-          
-        )}
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popper/TransitionsPopper.tsx.preview b/docs/data/material/components/popper/TransitionsPopper.tsx.preview
deleted file mode 100644
index 489db41e08f70b..00000000000000
--- a/docs/data/material/components/popper/TransitionsPopper.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-  {({ TransitionProps }) => (
-    
-      
-        The content of the Popper.
-      
-    
-  )}
-
\ No newline at end of file
diff --git a/docs/data/material/components/popper/VirtualElementPopper.js b/docs/data/material/components/popper/VirtualElementPopper.js
deleted file mode 100644
index 3139f86d717134..00000000000000
--- a/docs/data/material/components/popper/VirtualElementPopper.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import Popper from '@mui/material/Popper';
-import Typography from '@mui/material/Typography';
-import Fade from '@mui/material/Fade';
-import Paper from '@mui/material/Paper';
-
-export default function VirtualElementPopper() {
-  const [open, setOpen] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const previousAnchorElPosition = React.useRef(undefined);
-
-  React.useEffect(() => {
-    if (anchorEl) {
-      if (typeof anchorEl === 'object') {
-        previousAnchorElPosition.current = anchorEl.getBoundingClientRect();
-      } else {
-        previousAnchorElPosition.current = anchorEl().getBoundingClientRect();
-      }
-    }
-  }, [anchorEl]);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleMouseUp = () => {
-    const selection = window.getSelection();
-
-    // Resets when the selection has a length of 0
-    if (!selection || selection.anchorOffset === selection.focusOffset) {
-      handleClose();
-      return;
-    }
-
-    const getBoundingClientRect = () => {
-      if (selection.rangeCount === 0 && previousAnchorElPosition.current) {
-        setOpen(false);
-        return previousAnchorElPosition.current;
-      }
-      return selection.getRangeAt(0).getBoundingClientRect();
-    };
-
-    setOpen(true);
-
-    setAnchorEl({ getBoundingClientRect });
-  };
-
-  const id = open ? 'virtual-element-popper' : undefined;
-
-  return (
-    
    
-      
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,
-        bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum
-        vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor
-        porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis
-        vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus
-        massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit
-        amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus
-        consequat. Suspendisse lacinia tellus a libero volutpat maximus.
-      
-      
-        {({ TransitionProps }) => (
-          
-            
-              The content of the Popper.
-            
-          
-        )}
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/popper/PopperPopupState.tsx b/docs/data/material/components/popper/demos/popup-state/PopperPopupState.tsx
similarity index 96%
rename from docs/data/material/components/popper/PopperPopupState.tsx
rename to docs/data/material/components/popper/demos/popup-state/PopperPopupState.tsx
index 46100f8ca6f0ce..c9f93e68ed78ad 100644
--- a/docs/data/material/components/popper/PopperPopupState.tsx
+++ b/docs/data/material/components/popper/demos/popup-state/PopperPopupState.tsx
@@ -7,6 +7,7 @@ import Paper from '@mui/material/Paper';
 
 export default function PopperPopupState() {
   return (
+    // @focus-start
     
       {(popupState) => (
         
    
@@ -25,5 +26,6 @@ export default function PopperPopupState() {
         
    
       )}
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/popper/demos/popup-state/index.ts b/docs/data/material/components/popper/demos/popup-state/index.ts
new file mode 100644
index 00000000000000..d1b1d8b518851c
--- /dev/null
+++ b/docs/data/material/components/popper/demos/popup-state/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PopperPopupState from './PopperPopupState';
+
+export default createDemo(import.meta.url, PopperPopupState);
diff --git a/docs/data/material/components/popper/PositionedPopper.tsx b/docs/data/material/components/popper/demos/positioned/PositionedPopper.tsx
similarity index 98%
rename from docs/data/material/components/popper/PositionedPopper.tsx
rename to docs/data/material/components/popper/demos/positioned/PositionedPopper.tsx
index c9ff67a9d17822..11474adbd7b218 100644
--- a/docs/data/material/components/popper/PositionedPopper.tsx
+++ b/docs/data/material/components/popper/demos/positioned/PositionedPopper.tsx
@@ -8,6 +8,7 @@ import Fade from '@mui/material/Fade';
 import Paper from '@mui/material/Paper';
 
 export default function PositionedPopper() {
+  // @focus-start @padding 1
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [open, setOpen] = React.useState(false);
   const [placement, setPlacement] = React.useState();
@@ -62,4 +63,5 @@ export default function PositionedPopper() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/popper/demos/positioned/index.ts b/docs/data/material/components/popper/demos/positioned/index.ts
new file mode 100644
index 00000000000000..5cb748bd2b7d4a
--- /dev/null
+++ b/docs/data/material/components/popper/demos/positioned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PositionedPopper from './PositionedPopper';
+
+export default createDemo(import.meta.url, PositionedPopper);
diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/demos/scroll-playground/ScrollPlayground.js
similarity index 100%
rename from docs/data/material/components/popper/ScrollPlayground.js
rename to docs/data/material/components/popper/demos/scroll-playground/ScrollPlayground.js
diff --git a/docs/data/material/components/popper/demos/scroll-playground/index.ts b/docs/data/material/components/popper/demos/scroll-playground/index.ts
new file mode 100644
index 00000000000000..18978148311f4a
--- /dev/null
+++ b/docs/data/material/components/popper/demos/scroll-playground/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ScrollPlayground from './ScrollPlayground';
+
+export default createDemo(import.meta.url, ScrollPlayground);
diff --git a/docs/data/material/components/popper/SimplePopper.tsx b/docs/data/material/components/popper/demos/simple/SimplePopper.tsx
similarity index 93%
rename from docs/data/material/components/popper/SimplePopper.tsx
rename to docs/data/material/components/popper/demos/simple/SimplePopper.tsx
index 4770d36c0f34ac..5b34ba7f239acc 100644
--- a/docs/data/material/components/popper/SimplePopper.tsx
+++ b/docs/data/material/components/popper/demos/simple/SimplePopper.tsx
@@ -14,6 +14,7 @@ export default function SimplePopper() {
 
   return (
     
    
+      {/* @focus-start */}
       
@@ -22,6 +23,7 @@ export default function SimplePopper() {
           The content of the Popper.
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/popper/demos/simple/index.ts b/docs/data/material/components/popper/demos/simple/index.ts
new file mode 100644
index 00000000000000..344258ad0ce17f
--- /dev/null
+++ b/docs/data/material/components/popper/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimplePopper from './SimplePopper';
+
+export default createDemo(import.meta.url, SimplePopper);
diff --git a/docs/data/material/components/popper/SpringPopper.tsx b/docs/data/material/components/popper/demos/spring/SpringPopper.tsx
similarity index 97%
rename from docs/data/material/components/popper/SpringPopper.tsx
rename to docs/data/material/components/popper/demos/spring/SpringPopper.tsx
index 636bedcfc229c1..d85ab8ac878c4c 100644
--- a/docs/data/material/components/popper/SpringPopper.tsx
+++ b/docs/data/material/components/popper/demos/spring/SpringPopper.tsx
@@ -48,6 +48,7 @@ export default function SpringPopper() {
 
   return (
     
    
+      {/* @focus-start */}
       
@@ -60,6 +61,7 @@ export default function SpringPopper() {
           
         )}
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/popper/demos/spring/index.ts b/docs/data/material/components/popper/demos/spring/index.ts
new file mode 100644
index 00000000000000..b86c6421031f09
--- /dev/null
+++ b/docs/data/material/components/popper/demos/spring/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SpringPopper from './SpringPopper';
+
+export default createDemo(import.meta.url, SpringPopper);
diff --git a/docs/data/material/components/popper/TransitionsPopper.tsx b/docs/data/material/components/popper/demos/transitions/TransitionsPopper.tsx
similarity index 95%
rename from docs/data/material/components/popper/TransitionsPopper.tsx
rename to docs/data/material/components/popper/demos/transitions/TransitionsPopper.tsx
index f3eb24fd787fb7..197742510ef459 100644
--- a/docs/data/material/components/popper/TransitionsPopper.tsx
+++ b/docs/data/material/components/popper/demos/transitions/TransitionsPopper.tsx
@@ -17,6 +17,7 @@ export default function TransitionsPopper() {
 
   return (
     
    
+      {/* @focus-start */}
       
@@ -29,6 +30,7 @@ export default function TransitionsPopper() {
           
         )}
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/popper/demos/transitions/index.ts b/docs/data/material/components/popper/demos/transitions/index.ts
new file mode 100644
index 00000000000000..1cb1d678f26570
--- /dev/null
+++ b/docs/data/material/components/popper/demos/transitions/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransitionsPopper from './TransitionsPopper';
+
+export default createDemo(import.meta.url, TransitionsPopper);
diff --git a/docs/data/material/components/popper/VirtualElementPopper.tsx b/docs/data/material/components/popper/demos/virtual-element/VirtualElementPopper.tsx
similarity index 98%
rename from docs/data/material/components/popper/VirtualElementPopper.tsx
rename to docs/data/material/components/popper/demos/virtual-element/VirtualElementPopper.tsx
index 634a940c4445aa..7f8526d7cf486b 100644
--- a/docs/data/material/components/popper/VirtualElementPopper.tsx
+++ b/docs/data/material/components/popper/demos/virtual-element/VirtualElementPopper.tsx
@@ -5,6 +5,7 @@ import Fade from '@mui/material/Fade';
 import Paper from '@mui/material/Paper';
 
 export default function VirtualElementPopper() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -77,4 +78,5 @@ export default function VirtualElementPopper() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/popper/demos/virtual-element/index.ts b/docs/data/material/components/popper/demos/virtual-element/index.ts
new file mode 100644
index 00000000000000..16134d92ffffda
--- /dev/null
+++ b/docs/data/material/components/popper/demos/virtual-element/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VirtualElementPopper from './VirtualElementPopper';
+
+export default createDemo(import.meta.url, VirtualElementPopper);
diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md
index 085b2266e9454a..5f0260c8b45946 100644
--- a/docs/data/material/components/popper/popper.md
+++ b/docs/data/material/components/popper/popper.md
@@ -26,7 +26,7 @@ Some important features of the Popper component:
 
 ## Basic Popper
 
-{{"demo": "SimplePopper.js"}}
+{{"component": "../data/material/components/popper/demos/simple/index.ts"}}
 
 ## Transitions
 
@@ -40,19 +40,19 @@ This component should respect the following conditions:
 
 Popper has built-in support for [react-transition-group](https://github.com/reactjs/react-transition-group).
 
-{{"demo": "TransitionsPopper.js"}}
+{{"component": "../data/material/components/popper/demos/transitions/index.ts"}}
 
 Alternatively, you can use [react-spring](https://github.com/pmndrs/react-spring).
 
-{{"demo": "SpringPopper.js"}}
+{{"component": "../data/material/components/popper/demos/spring/index.ts"}}
 
 ## Positioned popper
 
-{{"demo": "PositionedPopper.js"}}
+{{"component": "../data/material/components/popper/demos/positioned/index.ts"}}
 
 ## Scroll playground
 
-{{"demo": "ScrollPlayground.js", "hideToolbar": true, "bg": true}}
+{{"component": "../data/material/components/popper/demos/scroll-playground/index.ts", "hideToolbar": true, "bg": true}}
 
 ## Virtual element
 
@@ -61,7 +61,7 @@ You need to create an object shaped like the [`VirtualElement`](https://popper.j
 
 Highlight part of the text to see the popper:
 
-{{"demo": "VirtualElementPopper.js"}}
+{{"component": "../data/material/components/popper/demos/virtual-element/index.ts"}}
 
 ## Supplementary projects
 
@@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of:
 
 The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper state for you in most cases.
 
-{{"demo": "PopperPopupState.js"}}
+{{"component": "../data/material/components/popper/demos/popup-state/index.ts"}}
diff --git a/docs/data/material/components/portal/SimplePortal.js b/docs/data/material/components/portal/SimplePortal.js
deleted file mode 100644
index 2f36c6b139184c..00000000000000
--- a/docs/data/material/components/portal/SimplePortal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Portal from '@mui/material/Portal';
-import { Box } from '@mui/system';
-
-export default function SimplePortal() {
-  const [show, setShow] = React.useState(false);
-  const container = React.useRef(null);
-
-  const handleClick = () => {
-    setShow(!show);
-  };
-
-  return (
-    
    
-      
-      
-        It looks like I will render here.
-        {show ? (
-           container.current}>
-            But I actually render here!
-          
-        ) : null}
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/portal/SimplePortal.tsx.preview b/docs/data/material/components/portal/SimplePortal.tsx.preview
deleted file mode 100644
index 8d96c108b1317b..00000000000000
--- a/docs/data/material/components/portal/SimplePortal.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-  It looks like I will render here.
-  {show ? (
-     container.current!}>
-      But I actually render here!
-    
-  ) : null}
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/portal/SimplePortal.tsx b/docs/data/material/components/portal/demos/simple/SimplePortal.tsx
similarity index 93%
rename from docs/data/material/components/portal/SimplePortal.tsx
rename to docs/data/material/components/portal/demos/simple/SimplePortal.tsx
index f7927816df8f9c..81cd1bb132f711 100644
--- a/docs/data/material/components/portal/SimplePortal.tsx
+++ b/docs/data/material/components/portal/demos/simple/SimplePortal.tsx
@@ -12,6 +12,7 @@ export default function SimplePortal() {
 
   return (
     
    
+      {/* @focus-start */}
       
@@ -24,6 +25,7 @@ export default function SimplePortal() {
         ) : null}
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/portal/demos/simple/index.ts b/docs/data/material/components/portal/demos/simple/index.ts
new file mode 100644
index 00000000000000..92348b0bc9c344
--- /dev/null
+++ b/docs/data/material/components/portal/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimplePortal from './SimplePortal';
+
+export default createDemo(import.meta.url, SimplePortal);
diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md
index 81cae85118dc81..23569b194ec276 100644
--- a/docs/data/material/components/portal/portal.md
+++ b/docs/data/material/components/portal/portal.md
@@ -27,7 +27,7 @@ The Portal component accepts a `container` prop that passes a `ref` to the DOM n
 
 The following demo shows how a `` nested within a Portal can be appended to a node outside of the Portal's DOM hierarchy—click **Mount children** to see how it behaves:
 
-{{"demo": "SimplePortal.js"}}
+{{"component": "../data/material/components/portal/demos/simple/index.ts"}}
 
 ## Basics
 
diff --git a/docs/data/material/components/progress/CircularColor.js b/docs/data/material/components/progress/CircularColor.js
deleted file mode 100644
index 797c052f7b8db0..00000000000000
--- a/docs/data/material/components/progress/CircularColor.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularColor() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularColor.tsx.preview b/docs/data/material/components/progress/CircularColor.tsx.preview
deleted file mode 100644
index ef32897dac8f97..00000000000000
--- a/docs/data/material/components/progress/CircularColor.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularCustomScale.js b/docs/data/material/components/progress/CircularCustomScale.js
deleted file mode 100644
index 4c1634a3fb50de..00000000000000
--- a/docs/data/material/components/progress/CircularCustomScale.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularCustomScale() {
-  const [progress, setProgress] = React.useState(10);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress >= 20 ? 10 : prevProgress + 2));
-    }, 800);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularCustomScale.tsx.preview b/docs/data/material/components/progress/CircularCustomScale.tsx.preview
deleted file mode 100644
index a7c766ecf33d4c..00000000000000
--- a/docs/data/material/components/progress/CircularCustomScale.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularDeterminate.js b/docs/data/material/components/progress/CircularDeterminate.js
deleted file mode 100644
index 4bf66e0a3f8813..00000000000000
--- a/docs/data/material/components/progress/CircularDeterminate.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularDeterminate() {
-  const [progress, setProgress] = React.useState(0);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
-    }, 800);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularDeterminate.tsx.preview b/docs/data/material/components/progress/CircularDeterminate.tsx.preview
deleted file mode 100644
index c34d4c06f49798..00000000000000
--- a/docs/data/material/components/progress/CircularDeterminate.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularEnableTrack.js b/docs/data/material/components/progress/CircularEnableTrack.js
deleted file mode 100644
index ce7c55fe32de31..00000000000000
--- a/docs/data/material/components/progress/CircularEnableTrack.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularEnableTrack() {
-  const [progress, setProgress] = React.useState(0);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
-    }, 800);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularEnableTrack.tsx.preview b/docs/data/material/components/progress/CircularEnableTrack.tsx.preview
deleted file mode 100644
index 5a19e342c3f3b8..00000000000000
--- a/docs/data/material/components/progress/CircularEnableTrack.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularIndeterminate.js b/docs/data/material/components/progress/CircularIndeterminate.js
deleted file mode 100644
index b111b101ad0aae..00000000000000
--- a/docs/data/material/components/progress/CircularIndeterminate.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import CircularProgress from '@mui/material/CircularProgress';
-import Box from '@mui/material/Box';
-
-export default function CircularIndeterminate() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularIndeterminate.tsx.preview b/docs/data/material/components/progress/CircularIndeterminate.tsx.preview
deleted file mode 100644
index cd47d3bb3ca74b..00000000000000
--- a/docs/data/material/components/progress/CircularIndeterminate.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularIntegration.js b/docs/data/material/components/progress/CircularIntegration.js
deleted file mode 100644
index 5cf2773d615ffc..00000000000000
--- a/docs/data/material/components/progress/CircularIntegration.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import { green } from '@mui/material/colors';
-import Button from '@mui/material/Button';
-import Fab from '@mui/material/Fab';
-import CheckIcon from '@mui/icons-material/Check';
-import SaveIcon from '@mui/icons-material/Save';
-
-export default function CircularIntegration() {
-  const [loading, setLoading] = React.useState(false);
-  const [success, setSuccess] = React.useState(false);
-  const timer = React.useRef(undefined);
-
-  const buttonSx = {
-    ...(success && {
-      bgcolor: green[500],
-      '&:hover': {
-        bgcolor: green[700],
-      },
-    }),
-  };
-
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
-
-  const handleButtonClick = () => {
-    if (!loading) {
-      setSuccess(false);
-      setLoading(true);
-      timer.current = setTimeout(() => {
-        setSuccess(true);
-        setLoading(false);
-      }, 2000);
-    }
-  };
-
-  return (
-    
-      
-        
-          {success ?  : }
-        
-        {loading && (
-          
-        )}
-      
-      
-        
-        {loading && (
-          
-        )}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularSize.js b/docs/data/material/components/progress/CircularSize.js
deleted file mode 100644
index 278f82571a17f3..00000000000000
--- a/docs/data/material/components/progress/CircularSize.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularSize() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/CircularSize.tsx.preview b/docs/data/material/components/progress/CircularSize.tsx.preview
deleted file mode 100644
index 71677644573bb3..00000000000000
--- a/docs/data/material/components/progress/CircularSize.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularUnderLoad.js b/docs/data/material/components/progress/CircularUnderLoad.js
deleted file mode 100644
index 7fe1d62f352a8f..00000000000000
--- a/docs/data/material/components/progress/CircularUnderLoad.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularUnderLoad() {
-  return ;
-}
diff --git a/docs/data/material/components/progress/CircularUnderLoad.tsx.preview b/docs/data/material/components/progress/CircularUnderLoad.tsx.preview
deleted file mode 100644
index 8131e8d407196f..00000000000000
--- a/docs/data/material/components/progress/CircularUnderLoad.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularWithValueLabel.js b/docs/data/material/components/progress/CircularWithValueLabel.js
deleted file mode 100644
index fbb9d0b12882f8..00000000000000
--- a/docs/data/material/components/progress/CircularWithValueLabel.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import CircularProgress from '@mui/material/CircularProgress';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-function CircularProgressWithLabel(props) {
-  return (
-    
-      
-      
-        
-          {`${Math.round(props.value)}%`}
-        
-      
-    
-  );
-}
-
-CircularProgressWithLabel.propTypes = {
-  /**
-   * The value of the progress indicator for the determinate variant.
-   * Value between `min` and `max`.
-   * @default props.min ?? 0
-   */
-  value: PropTypes.number.isRequired,
-};
-
-export default function CircularWithValueLabel() {
-  const [progress, setProgress] = React.useState(10);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
-    }, 800);
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return ;
-}
diff --git a/docs/data/material/components/progress/CircularWithValueLabel.tsx.preview b/docs/data/material/components/progress/CircularWithValueLabel.tsx.preview
deleted file mode 100644
index 52f3070a137d9b..00000000000000
--- a/docs/data/material/components/progress/CircularWithValueLabel.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CustomizedProgressBars.js b/docs/data/material/components/progress/CustomizedProgressBars.js
deleted file mode 100644
index b6f4e9e13bed99..00000000000000
--- a/docs/data/material/components/progress/CustomizedProgressBars.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
-import CircularProgress, {
-  circularProgressClasses,
-} from '@mui/material/CircularProgress';
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 5,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[200],
-    ...theme.applyStyles('dark', {
-      backgroundColor: theme.palette.grey[800],
-    }),
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 5,
-    backgroundColor: '#1a90ff',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#308fe8',
-    }),
-  },
-}));
-
-// Inspired by the former Facebook spinners.
-function FacebookCircularProgress(props) {
-  return (
-     ({
-        color: '#1a90ff',
-        animationDuration: '550ms',
-        [`& .${circularProgressClasses.circle}`]: {
-          strokeLinecap: 'round',
-        },
-        [`& .${circularProgressClasses.track}`]: {
-          opacity: 1,
-          stroke: (theme.vars || theme).palette.grey[200],
-          ...theme.applyStyles('dark', {
-            stroke: (theme.vars || theme).palette.grey[800],
-          }),
-        },
-        ...theme.applyStyles('dark', {
-          color: '#308fe8',
-        }),
-      })}
-      size={40}
-      thickness={4}
-      aria-label="Loading…"
-      {...props}
-    />
-  );
-}
-
-// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221
-
-function GradientCircularProgress() {
-  return (
-    
-      
-        
-          
-            
-            
-          
-        
-      
-      
-    
-  );
-}
-export default function CustomizedProgressBars() {
-  return (
-    
-      
-      
-      
    
-      
-        
-  );
-}
diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview b/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview
deleted file mode 100644
index e900e636bf88f8..00000000000000
--- a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
    
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/DelayingAppearance.js b/docs/data/material/components/progress/DelayingAppearance.js
deleted file mode 100644
index 3ae33bd7a2dd5f..00000000000000
--- a/docs/data/material/components/progress/DelayingAppearance.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Fade from '@mui/material/Fade';
-import Button from '@mui/material/Button';
-import CircularProgress from '@mui/material/CircularProgress';
-import Typography from '@mui/material/Typography';
-
-export default function DelayingAppearance() {
-  const [loading, setLoading] = React.useState(false);
-  const [query, setQuery] = React.useState('idle');
-  const timerRef = React.useRef(undefined);
-
-  React.useEffect(
-    () => () => {
-      clearTimeout(timerRef.current);
-    },
-    [],
-  );
-
-  const handleClickLoading = () => {
-    setLoading((prevLoading) => !prevLoading);
-  };
-
-  const handleClickQuery = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
-    if (query !== 'idle') {
-      setQuery('idle');
-      return;
-    }
-
-    setQuery('progress');
-    timerRef.current = setTimeout(() => {
-      setQuery('success');
-    }, 2000);
-  };
-
-  return (
-    
-      
-        
-          
-        
-      
-      
-      
-        {query === 'success' ? (
-          Success!
-        ) : (
-          
-            
-          
-        )}
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearBuffer.js b/docs/data/material/components/progress/LinearBuffer.js
deleted file mode 100644
index ad1582954900ef..00000000000000
--- a/docs/data/material/components/progress/LinearBuffer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import LinearProgress from '@mui/material/LinearProgress';
-
-export default function LinearBuffer() {
-  const [progress, setProgress] = React.useState(0);
-  const [buffer, setBuffer] = React.useState(10);
-
-  const progressRef = React.useRef(() => {});
-  React.useEffect(() => {
-    progressRef.current = () => {
-      if (progress === 100) {
-        setProgress(0);
-        setBuffer(10);
-      } else {
-        setProgress(progress + 1);
-        if (buffer < 100 && progress % 5 === 0) {
-          const newBuffer = buffer + 1 + Math.random() * 10;
-          setBuffer(newBuffer > 100 ? 100 : newBuffer);
-        }
-      }
-    };
-  });
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      progressRef.current();
-    }, 100);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearBuffer.tsx.preview b/docs/data/material/components/progress/LinearBuffer.tsx.preview
deleted file mode 100644
index 190e5d9bddfc68..00000000000000
--- a/docs/data/material/components/progress/LinearBuffer.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/LinearColor.js b/docs/data/material/components/progress/LinearColor.js
deleted file mode 100644
index 97bc1b44967c1f..00000000000000
--- a/docs/data/material/components/progress/LinearColor.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Stack from '@mui/material/Stack';
-import LinearProgress from '@mui/material/LinearProgress';
-
-export default function LinearColor() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearColor.tsx.preview b/docs/data/material/components/progress/LinearColor.tsx.preview
deleted file mode 100644
index 498ddbaa1d77b7..00000000000000
--- a/docs/data/material/components/progress/LinearColor.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/LinearDeterminate.js b/docs/data/material/components/progress/LinearDeterminate.js
deleted file mode 100644
index 1e1f7967a5d27a..00000000000000
--- a/docs/data/material/components/progress/LinearDeterminate.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import LinearProgress from '@mui/material/LinearProgress';
-
-export default function LinearDeterminate() {
-  const [progress, setProgress] = React.useState(0);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((oldProgress) => {
-        if (oldProgress === 100) {
-          return 0;
-        }
-        const diff = Math.random() * 10;
-        return Math.min(oldProgress + diff, 100);
-      });
-    }, 500);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearDeterminate.tsx.preview b/docs/data/material/components/progress/LinearDeterminate.tsx.preview
deleted file mode 100644
index 7650306943e164..00000000000000
--- a/docs/data/material/components/progress/LinearDeterminate.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/LinearIndeterminate.js b/docs/data/material/components/progress/LinearIndeterminate.js
deleted file mode 100644
index eb76b58f630e47..00000000000000
--- a/docs/data/material/components/progress/LinearIndeterminate.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Box from '@mui/material/Box';
-import LinearProgress from '@mui/material/LinearProgress';
-
-export default function LinearIndeterminate() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearIndeterminate.tsx.preview b/docs/data/material/components/progress/LinearIndeterminate.tsx.preview
deleted file mode 100644
index 95249d733f051e..00000000000000
--- a/docs/data/material/components/progress/LinearIndeterminate.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/LinearQuery.js b/docs/data/material/components/progress/LinearQuery.js
deleted file mode 100644
index 4785ca8d14b3cd..00000000000000
--- a/docs/data/material/components/progress/LinearQuery.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Box from '@mui/material/Box';
-import LinearProgress from '@mui/material/LinearProgress';
-
-export default function LinearQuery() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearQuery.tsx.preview b/docs/data/material/components/progress/LinearQuery.tsx.preview
deleted file mode 100644
index b14a4d9082d17d..00000000000000
--- a/docs/data/material/components/progress/LinearQuery.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/LinearWithAriaValueText.js b/docs/data/material/components/progress/LinearWithAriaValueText.js
deleted file mode 100644
index 3aa59fda652f93..00000000000000
--- a/docs/data/material/components/progress/LinearWithAriaValueText.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import LinearProgress from '@mui/material/LinearProgress';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-function LinearProgressWithLabelAndValue({ max, min, value, ...rest }) {
-  const progressText = `Elevator at floor ${value} out of ${max}.`;
-  const progressId = React.useId();
-  return (
-    
    
-      
-        Elevator status
-      
-      
-        
-          
-        
-        
-          
-            {progressText}
-          
-        
-      
-    
    
-  );
-}
-
-LinearProgressWithLabelAndValue.propTypes = {
-  /**
-   * The maximum value for the progress indicator for the determinate and buffer variants.
-   * @default 100
-   */
-  max: PropTypes.number.isRequired,
-  /**
-   * The minimum value for the progress indicator for the determinate and buffer variants.
-   * @default 0
-   */
-  min: PropTypes.number.isRequired,
-  /**
-   * The value of the progress indicator for the determinate and buffer variants.
-   * Value between `min` and `max`.
-   */
-  value: PropTypes.number.isRequired,
-};
-
-export default function LinearWithAriaValueText() {
-  const [progress, setProgress] = React.useState(1);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress >= 10 ? 1 : prevProgress + 1));
-    }, 800);
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview b/docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview
deleted file mode 100644
index 1595531620a5ba..00000000000000
--- a/docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/LinearWithValueLabel.js b/docs/data/material/components/progress/LinearWithValueLabel.js
deleted file mode 100644
index da8e5aa0169a36..00000000000000
--- a/docs/data/material/components/progress/LinearWithValueLabel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import LinearProgress from '@mui/material/LinearProgress';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-function LinearProgressWithLabelAndValue(props) {
-  const progressId = React.useId();
-  return (
-    
    
-      
-        Uploading photos…
-      
-      
-        
-          
-        
-        
-          
-            {`${Math.round(props.value)}%`}
-          
-        
-      
-    
    
-  );
-}
-
-LinearProgressWithLabelAndValue.propTypes = {
-  /**
-   * The value of the progress indicator for the determinate and buffer variants.
-   * Value between `min` and `max`.
-   */
-  value: PropTypes.number.isRequired,
-};
-
-export default function LinearWithValueLabel() {
-  const [progress, setProgress] = React.useState(10);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10));
-    }, 800);
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/progress/LinearWithValueLabel.tsx.preview b/docs/data/material/components/progress/LinearWithValueLabel.tsx.preview
deleted file mode 100644
index 62528e5a310292..00000000000000
--- a/docs/data/material/components/progress/LinearWithValueLabel.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/progress/CircularColor.tsx b/docs/data/material/components/progress/demos/circular-color/CircularColor.tsx
similarity index 89%
rename from docs/data/material/components/progress/CircularColor.tsx
rename to docs/data/material/components/progress/demos/circular-color/CircularColor.tsx
index 797c052f7b8db0..029abc9d677615 100644
--- a/docs/data/material/components/progress/CircularColor.tsx
+++ b/docs/data/material/components/progress/demos/circular-color/CircularColor.tsx
@@ -4,9 +4,11 @@ import CircularProgress from '@mui/material/CircularProgress';
 export default function CircularColor() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/circular-color/index.ts b/docs/data/material/components/progress/demos/circular-color/index.ts
new file mode 100644
index 00000000000000..84074844bf7db5
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularColor from './CircularColor';
+
+export default createDemo(import.meta.url, CircularColor);
diff --git a/docs/data/material/components/progress/CircularCustomScale.tsx b/docs/data/material/components/progress/demos/circular-custom-scale/CircularCustomScale.tsx
similarity index 92%
rename from docs/data/material/components/progress/CircularCustomScale.tsx
rename to docs/data/material/components/progress/demos/circular-custom-scale/CircularCustomScale.tsx
index 4c1634a3fb50de..1dd769a924ba71 100644
--- a/docs/data/material/components/progress/CircularCustomScale.tsx
+++ b/docs/data/material/components/progress/demos/circular-custom-scale/CircularCustomScale.tsx
@@ -14,6 +14,7 @@ export default function CircularCustomScale() {
     };
   }, []);
 
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/progress/demos/circular-custom-scale/index.ts b/docs/data/material/components/progress/demos/circular-custom-scale/index.ts
new file mode 100644
index 00000000000000..715004a44831fd
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-custom-scale/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularCustomScale from './CircularCustomScale';
+
+export default createDemo(import.meta.url, CircularCustomScale);
diff --git a/docs/data/material/components/progress/CircularDeterminate.tsx b/docs/data/material/components/progress/demos/circular-determinate/CircularDeterminate.tsx
similarity index 95%
rename from docs/data/material/components/progress/CircularDeterminate.tsx
rename to docs/data/material/components/progress/demos/circular-determinate/CircularDeterminate.tsx
index 4bf66e0a3f8813..3e4f08787b88c0 100644
--- a/docs/data/material/components/progress/CircularDeterminate.tsx
+++ b/docs/data/material/components/progress/demos/circular-determinate/CircularDeterminate.tsx
@@ -17,6 +17,7 @@ export default function CircularDeterminate() {
 
   return (
     
+      {/* @focus-start */}
       
       
       
@@ -26,6 +27,7 @@ export default function CircularDeterminate() {
         value={progress}
         aria-label="Export data"
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/circular-determinate/index.ts b/docs/data/material/components/progress/demos/circular-determinate/index.ts
new file mode 100644
index 00000000000000..cf1bbd4a3341e9
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-determinate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularDeterminate from './CircularDeterminate';
+
+export default createDemo(import.meta.url, CircularDeterminate);
diff --git a/docs/data/material/components/progress/CircularEnableTrack.tsx b/docs/data/material/components/progress/demos/circular-enable-track/CircularEnableTrack.tsx
similarity index 95%
rename from docs/data/material/components/progress/CircularEnableTrack.tsx
rename to docs/data/material/components/progress/demos/circular-enable-track/CircularEnableTrack.tsx
index ce7c55fe32de31..4874f483c3ef6c 100644
--- a/docs/data/material/components/progress/CircularEnableTrack.tsx
+++ b/docs/data/material/components/progress/demos/circular-enable-track/CircularEnableTrack.tsx
@@ -17,6 +17,7 @@ export default function CircularEnableTrack() {
 
   return (
     
+      {/* @focus-start */}
       
       
       
@@ -33,6 +34,7 @@ export default function CircularEnableTrack() {
         value={progress}
         aria-label="Upload photos"
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/circular-enable-track/index.ts b/docs/data/material/components/progress/demos/circular-enable-track/index.ts
new file mode 100644
index 00000000000000..355389ff57553a
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-enable-track/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularEnableTrack from './CircularEnableTrack';
+
+export default createDemo(import.meta.url, CircularEnableTrack);
diff --git a/docs/data/material/components/progress/CircularIndeterminate.tsx b/docs/data/material/components/progress/demos/circular-indeterminate/CircularIndeterminate.tsx
similarity index 83%
rename from docs/data/material/components/progress/CircularIndeterminate.tsx
rename to docs/data/material/components/progress/demos/circular-indeterminate/CircularIndeterminate.tsx
index b111b101ad0aae..8003bb178ef169 100644
--- a/docs/data/material/components/progress/CircularIndeterminate.tsx
+++ b/docs/data/material/components/progress/demos/circular-indeterminate/CircularIndeterminate.tsx
@@ -4,7 +4,9 @@ import Box from '@mui/material/Box';
 export default function CircularIndeterminate() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/circular-indeterminate/index.ts b/docs/data/material/components/progress/demos/circular-indeterminate/index.ts
new file mode 100644
index 00000000000000..513b0fbcac5bc0
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-indeterminate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularIndeterminate from './CircularIndeterminate';
+
+export default createDemo(import.meta.url, CircularIndeterminate);
diff --git a/docs/data/material/components/progress/CircularIntegration.tsx b/docs/data/material/components/progress/demos/circular-integration/CircularIntegration.tsx
similarity index 98%
rename from docs/data/material/components/progress/CircularIntegration.tsx
rename to docs/data/material/components/progress/demos/circular-integration/CircularIntegration.tsx
index 911e106765a6e0..c4d6088ad5646e 100644
--- a/docs/data/material/components/progress/CircularIntegration.tsx
+++ b/docs/data/material/components/progress/demos/circular-integration/CircularIntegration.tsx
@@ -8,6 +8,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function CircularIntegration() {
+  // @focus-start @padding 1
   const [loading, setLoading] = React.useState(false);
   const [success, setSuccess] = React.useState(false);
   const timer = React.useRef>(undefined);
@@ -89,4 +90,5 @@ export default function CircularIntegration() {
           
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/progress/demos/circular-integration/index.ts b/docs/data/material/components/progress/demos/circular-integration/index.ts
new file mode 100644
index 00000000000000..ae3c7a85a94253
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-integration/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularIntegration from './CircularIntegration';
+
+export default createDemo(import.meta.url, CircularIntegration);
diff --git a/docs/data/material/components/progress/CircularSize.tsx b/docs/data/material/components/progress/demos/circular-size/CircularSize.tsx
similarity index 89%
rename from docs/data/material/components/progress/CircularSize.tsx
rename to docs/data/material/components/progress/demos/circular-size/CircularSize.tsx
index 278f82571a17f3..22fa61b8d3ae32 100644
--- a/docs/data/material/components/progress/CircularSize.tsx
+++ b/docs/data/material/components/progress/demos/circular-size/CircularSize.tsx
@@ -4,9 +4,11 @@ import CircularProgress from '@mui/material/CircularProgress';
 export default function CircularSize() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/circular-size/index.ts b/docs/data/material/components/progress/demos/circular-size/index.ts
new file mode 100644
index 00000000000000..8bf554284feb37
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularSize from './CircularSize';
+
+export default createDemo(import.meta.url, CircularSize);
diff --git a/docs/data/material/components/progress/CircularUnderLoad.tsx b/docs/data/material/components/progress/demos/circular-under-load/CircularUnderLoad.tsx
similarity index 54%
rename from docs/data/material/components/progress/CircularUnderLoad.tsx
rename to docs/data/material/components/progress/demos/circular-under-load/CircularUnderLoad.tsx
index 7fe1d62f352a8f..b3f82cd112d97c 100644
--- a/docs/data/material/components/progress/CircularUnderLoad.tsx
+++ b/docs/data/material/components/progress/demos/circular-under-load/CircularUnderLoad.tsx
@@ -1,5 +1,8 @@
 import CircularProgress from '@mui/material/CircularProgress';
 
 export default function CircularUnderLoad() {
-  return ;
+  return (
+    // @focus
+    
+  );
 }
diff --git a/docs/data/material/components/progress/demos/circular-under-load/index.ts b/docs/data/material/components/progress/demos/circular-under-load/index.ts
new file mode 100644
index 00000000000000..a09bc82085e77d
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-under-load/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularUnderLoad from './CircularUnderLoad';
+
+export default createDemo(import.meta.url, CircularUnderLoad);
diff --git a/docs/data/material/components/progress/CircularWithValueLabel.tsx b/docs/data/material/components/progress/demos/circular-with-value-label/CircularWithValueLabel.tsx
similarity index 96%
rename from docs/data/material/components/progress/CircularWithValueLabel.tsx
rename to docs/data/material/components/progress/demos/circular-with-value-label/CircularWithValueLabel.tsx
index 5b97eb3a7ecdb1..f3dcb859a083e8 100644
--- a/docs/data/material/components/progress/CircularWithValueLabel.tsx
+++ b/docs/data/material/components/progress/demos/circular-with-value-label/CircularWithValueLabel.tsx
@@ -38,6 +38,7 @@ function CircularProgressWithLabel(
 }
 
 export default function CircularWithValueLabel() {
+  // @focus-start @padding 1
   const [progress, setProgress] = React.useState(10);
 
   React.useEffect(() => {
@@ -50,4 +51,5 @@ export default function CircularWithValueLabel() {
   }, []);
 
   return ;
+  // @focus-end
 }
diff --git a/docs/data/material/components/progress/demos/circular-with-value-label/index.ts b/docs/data/material/components/progress/demos/circular-with-value-label/index.ts
new file mode 100644
index 00000000000000..ee583c5a9e2e33
--- /dev/null
+++ b/docs/data/material/components/progress/demos/circular-with-value-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CircularWithValueLabel from './CircularWithValueLabel';
+
+export default createDemo(import.meta.url, CircularWithValueLabel);
diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx b/docs/data/material/components/progress/demos/customized-bars/CustomizedProgressBars.tsx
similarity index 98%
rename from docs/data/material/components/progress/CustomizedProgressBars.tsx
rename to docs/data/material/components/progress/demos/customized-bars/CustomizedProgressBars.tsx
index c6fd5802600c41..e05ef1a92caf56 100644
--- a/docs/data/material/components/progress/CustomizedProgressBars.tsx
+++ b/docs/data/material/components/progress/demos/customized-bars/CustomizedProgressBars.tsx
@@ -79,6 +79,7 @@ function GradientCircularProgress() {
 export default function CustomizedProgressBars() {
   return (
     
+      {/* @focus-start */}
       
       
       
    
@@ -87,6 +88,7 @@ export default function CustomizedProgressBars() {
         value={50}
         aria-label="Export data"
       />
+      {/* @focus-end */}
         
   );
 }
diff --git a/docs/data/material/components/progress/demos/customized-bars/index.ts b/docs/data/material/components/progress/demos/customized-bars/index.ts
new file mode 100644
index 00000000000000..ac943203dfdaad
--- /dev/null
+++ b/docs/data/material/components/progress/demos/customized-bars/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedProgressBars from './CustomizedProgressBars';
+
+export default createDemo(import.meta.url, CustomizedProgressBars);
diff --git a/docs/data/material/components/progress/DelayingAppearance.tsx b/docs/data/material/components/progress/demos/delaying-appearance/DelayingAppearance.tsx
similarity index 97%
rename from docs/data/material/components/progress/DelayingAppearance.tsx
rename to docs/data/material/components/progress/demos/delaying-appearance/DelayingAppearance.tsx
index ba0523d1d4f2c1..1030673feb3492 100644
--- a/docs/data/material/components/progress/DelayingAppearance.tsx
+++ b/docs/data/material/components/progress/demos/delaying-appearance/DelayingAppearance.tsx
@@ -6,6 +6,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 
 export default function DelayingAppearance() {
+  // @focus-start @padding 1
   const [loading, setLoading] = React.useState(false);
   const [query, setQuery] = React.useState('idle');
   const timerRef = React.useRef>(undefined);
@@ -73,4 +74,5 @@ export default function DelayingAppearance() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/progress/demos/delaying-appearance/index.ts b/docs/data/material/components/progress/demos/delaying-appearance/index.ts
new file mode 100644
index 00000000000000..71a7024e284ff4
--- /dev/null
+++ b/docs/data/material/components/progress/demos/delaying-appearance/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DelayingAppearance from './DelayingAppearance';
+
+export default createDemo(import.meta.url, DelayingAppearance);
diff --git a/docs/data/material/components/progress/LinearBuffer.tsx b/docs/data/material/components/progress/demos/linear-buffer/LinearBuffer.tsx
similarity index 95%
rename from docs/data/material/components/progress/LinearBuffer.tsx
rename to docs/data/material/components/progress/demos/linear-buffer/LinearBuffer.tsx
index ad1582954900ef..fc5ecfbd95e136 100644
--- a/docs/data/material/components/progress/LinearBuffer.tsx
+++ b/docs/data/material/components/progress/demos/linear-buffer/LinearBuffer.tsx
@@ -34,12 +34,14 @@ export default function LinearBuffer() {
 
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-buffer/index.ts b/docs/data/material/components/progress/demos/linear-buffer/index.ts
new file mode 100644
index 00000000000000..db0a29b4c98ed8
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-buffer/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearBuffer from './LinearBuffer';
+
+export default createDemo(import.meta.url, LinearBuffer);
diff --git a/docs/data/material/components/progress/LinearColor.tsx b/docs/data/material/components/progress/demos/linear-color/LinearColor.tsx
similarity index 89%
rename from docs/data/material/components/progress/LinearColor.tsx
rename to docs/data/material/components/progress/demos/linear-color/LinearColor.tsx
index 97bc1b44967c1f..520bc911ceca3b 100644
--- a/docs/data/material/components/progress/LinearColor.tsx
+++ b/docs/data/material/components/progress/demos/linear-color/LinearColor.tsx
@@ -4,9 +4,11 @@ import LinearProgress from '@mui/material/LinearProgress';
 export default function LinearColor() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-color/index.ts b/docs/data/material/components/progress/demos/linear-color/index.ts
new file mode 100644
index 00000000000000..5eff4f566ef5c0
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearColor from './LinearColor';
+
+export default createDemo(import.meta.url, LinearColor);
diff --git a/docs/data/material/components/progress/LinearDeterminate.tsx b/docs/data/material/components/progress/demos/linear-determinate/LinearDeterminate.tsx
similarity index 93%
rename from docs/data/material/components/progress/LinearDeterminate.tsx
rename to docs/data/material/components/progress/demos/linear-determinate/LinearDeterminate.tsx
index 1e1f7967a5d27a..d38c96ae3d8e2d 100644
--- a/docs/data/material/components/progress/LinearDeterminate.tsx
+++ b/docs/data/material/components/progress/demos/linear-determinate/LinearDeterminate.tsx
@@ -23,11 +23,13 @@ export default function LinearDeterminate() {
 
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-determinate/index.ts b/docs/data/material/components/progress/demos/linear-determinate/index.ts
new file mode 100644
index 00000000000000..b2ad170120ec84
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-determinate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearDeterminate from './LinearDeterminate';
+
+export default createDemo(import.meta.url, LinearDeterminate);
diff --git a/docs/data/material/components/progress/LinearIndeterminate.tsx b/docs/data/material/components/progress/demos/linear-indeterminate/LinearIndeterminate.tsx
similarity index 83%
rename from docs/data/material/components/progress/LinearIndeterminate.tsx
rename to docs/data/material/components/progress/demos/linear-indeterminate/LinearIndeterminate.tsx
index eb76b58f630e47..83a6504ede14bd 100644
--- a/docs/data/material/components/progress/LinearIndeterminate.tsx
+++ b/docs/data/material/components/progress/demos/linear-indeterminate/LinearIndeterminate.tsx
@@ -4,7 +4,9 @@ import LinearProgress from '@mui/material/LinearProgress';
 export default function LinearIndeterminate() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-indeterminate/index.ts b/docs/data/material/components/progress/demos/linear-indeterminate/index.ts
new file mode 100644
index 00000000000000..2fd9587fddb5c0
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-indeterminate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearIndeterminate from './LinearIndeterminate';
+
+export default createDemo(import.meta.url, LinearIndeterminate);
diff --git a/docs/data/material/components/progress/LinearQuery.tsx b/docs/data/material/components/progress/demos/linear-query/LinearQuery.tsx
similarity index 83%
rename from docs/data/material/components/progress/LinearQuery.tsx
rename to docs/data/material/components/progress/demos/linear-query/LinearQuery.tsx
index 4785ca8d14b3cd..d6ff63f3a9a460 100644
--- a/docs/data/material/components/progress/LinearQuery.tsx
+++ b/docs/data/material/components/progress/demos/linear-query/LinearQuery.tsx
@@ -4,7 +4,9 @@ import LinearProgress from '@mui/material/LinearProgress';
 export default function LinearQuery() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-query/index.ts b/docs/data/material/components/progress/demos/linear-query/index.ts
new file mode 100644
index 00000000000000..5cbf55851e6649
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-query/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearQuery from './LinearQuery';
+
+export default createDemo(import.meta.url, LinearQuery);
diff --git a/docs/data/material/components/progress/LinearWithAriaValueText.tsx b/docs/data/material/components/progress/demos/linear-with-aria-value-text/LinearWithAriaValueText.tsx
similarity index 97%
rename from docs/data/material/components/progress/LinearWithAriaValueText.tsx
rename to docs/data/material/components/progress/demos/linear-with-aria-value-text/LinearWithAriaValueText.tsx
index 0ec123cad46176..17be30e616cb13 100644
--- a/docs/data/material/components/progress/LinearWithAriaValueText.tsx
+++ b/docs/data/material/components/progress/demos/linear-with-aria-value-text/LinearWithAriaValueText.tsx
@@ -63,7 +63,9 @@ export default function LinearWithAriaValueText() {
 
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts b/docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts
new file mode 100644
index 00000000000000..40f14d55cf850d
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearWithAriaValueText from './LinearWithAriaValueText';
+
+export default createDemo(import.meta.url, LinearWithAriaValueText);
diff --git a/docs/data/material/components/progress/LinearWithValueLabel.tsx b/docs/data/material/components/progress/demos/linear-with-value-label/LinearWithValueLabel.tsx
similarity index 96%
rename from docs/data/material/components/progress/LinearWithValueLabel.tsx
rename to docs/data/material/components/progress/demos/linear-with-value-label/LinearWithValueLabel.tsx
index e7362decef5287..7ca4518e7212c7 100644
--- a/docs/data/material/components/progress/LinearWithValueLabel.tsx
+++ b/docs/data/material/components/progress/demos/linear-with-value-label/LinearWithValueLabel.tsx
@@ -44,7 +44,9 @@ export default function LinearWithValueLabel() {
 
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/progress/demos/linear-with-value-label/index.ts b/docs/data/material/components/progress/demos/linear-with-value-label/index.ts
new file mode 100644
index 00000000000000..facbf45b6557cb
--- /dev/null
+++ b/docs/data/material/components/progress/demos/linear-with-value-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LinearWithValueLabel from './LinearWithValueLabel';
+
+export default createDemo(import.meta.url, LinearWithValueLabel);
diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md
index 40e8e38bdc6ed7..b14a9013f81ecf 100644
--- a/docs/data/material/components/progress/progress.md
+++ b/docs/data/material/components/progress/progress.md
@@ -26,45 +26,45 @@ The animations of the components rely on CSS as much as possible to work even be
 
 The default version of CircularProgress renders an indeterminate spinner.
 
-{{"demo": "CircularIndeterminate.js"}}
+{{"component": "../data/material/components/progress/demos/circular-indeterminate/index.ts"}}
 
 ### Circular color
 
-{{"demo": "CircularColor.js"}}
+{{"component": "../data/material/components/progress/demos/circular-color/index.ts"}}
 
 ### Circular size
 
-{{"demo": "CircularSize.js"}}
+{{"component": "../data/material/components/progress/demos/circular-size/index.ts"}}
 
 ### Circular determinate
 
 To specify the loading progress of an operation, use the `determinate` value for the `variant` prop. To show the actual progress, use the `value` prop.
 
-{{"demo": "CircularDeterminate.js"}}
+{{"component": "../data/material/components/progress/demos/circular-determinate/index.ts"}}
 
 ### Circular custom scale
 
 By default, progress values are expected in the 0–100 range. You can customize this range by using the `min` and `max` props.
 
-{{"demo": "CircularCustomScale.js"}}
+{{"component": "../data/material/components/progress/demos/circular-custom-scale/index.ts"}}
 
 ### Circular track
 
 To have the circular track always visible, pass the `enableTrackSlot` prop.
 
-{{"demo": "CircularEnableTrack.js"}}
+{{"component": "../data/material/components/progress/demos/circular-enable-track/index.ts"}}
 
 ### Interactive integration
 
 The following examples show how to integrate the CircularProgress with the Button and FAB components, creating loading states that can be triggered by user actions.
 
-{{"demo": "CircularIntegration.js"}}
+{{"component": "../data/material/components/progress/demos/circular-integration/index.ts"}}
 
 ### Circular with label
 
 The example shows how to integrate the visual progress value with the CircularProgress component.
 
-{{"demo": "CircularWithValueLabel.js"}}
+{{"component": "../data/material/components/progress/demos/circular-with-value-label/index.ts"}}
 
 ## Linear
 
@@ -72,48 +72,48 @@ The example shows how to integrate the visual progress value with the CircularPr
 
 LinearProgress shows an indeterminate progress bar by default.
 
-{{"demo": "LinearIndeterminate.js"}}
+{{"component": "../data/material/components/progress/demos/linear-indeterminate/index.ts"}}
 
 ### Linear query
 
 To reverse the direction of the indeterminate animation, use the `query` value for the `variant` prop.
 
-{{"demo": "LinearQuery.js"}}
+{{"component": "../data/material/components/progress/demos/linear-query/index.ts"}}
 
 ### Linear color
 
-{{"demo": "LinearColor.js"}}
+{{"component": "../data/material/components/progress/demos/linear-color/index.ts"}}
 
 ### Linear determinate
 
 To show the progress on the loading bar, use the `determinate` value for the `variant` prop, along with the `value` prop.
 
-{{"demo": "LinearDeterminate.js"}}
+{{"component": "../data/material/components/progress/demos/linear-determinate/index.ts"}}
 
 ### Linear buffer
 
 Use the `buffer` value for the `variant` prop to show a buffer progress alongside the actual progress value. The `valueBuffer` prop should be greater than the `value` prop.
 
-{{"demo": "LinearBuffer.js"}}
+{{"component": "../data/material/components/progress/demos/linear-buffer/index.ts"}}
 
 ### Linear with label
 
 The progress `value` can also be displayed alongside the progress bar.
 
-{{"demo": "LinearWithValueLabel.js"}}
+{{"component": "../data/material/components/progress/demos/linear-with-value-label/index.ts"}}
 
 ### Linear with custom value text
 
 By default, the progress value is read by assistive technology as percentages. Use `aria-valuetext` when the progress value does not involve percentages.
 
-{{"demo": "LinearWithAriaValueText.js"}}
+{{"component": "../data/material/components/progress/demos/linear-with-aria-value-text/index.ts"}}
 
 ## Customization
 
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedProgressBars.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/progress/demos/customized-bars/index.ts", "defaultCodeOpen": false}}
 
 ## Delaying appearance
 
@@ -122,7 +122,7 @@ The ripple effect of the `ButtonBase` component ensures that the user feels that
 Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second.
 After 1.0 second, you can display a loader to keep user's flow of thought uninterrupted.
 
-{{"demo": "DelayingAppearance.js"}}
+{{"component": "../data/material/components/progress/demos/delaying-appearance/index.ts"}}
 
 ## Accessibility
 
@@ -142,7 +142,7 @@ You should run processor intensive operations in a web worker or by batch in ord
 When it's not possible, you can leverage the `disableShrink` prop to mitigate the issue.
 See [this issue](https://github.com/mui/material-ui/issues/10327).
 
-{{"demo": "CircularUnderLoad.js"}}
+{{"component": "../data/material/components/progress/demos/circular-under-load/index.ts"}}
 
 ### High frequency updates
 
diff --git a/docs/data/material/components/radio-buttons/ColorRadioButtons.js b/docs/data/material/components/radio-buttons/ColorRadioButtons.js
deleted file mode 100644
index 0c18596d524934..00000000000000
--- a/docs/data/material/components/radio-buttons/ColorRadioButtons.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { pink } from '@mui/material/colors';
-import Radio from '@mui/material/Radio';
-
-export default function ColorRadioButtons() {
-  const [selectedValue, setSelectedValue] = React.useState('a');
-
-  const handleChange = (event) => {
-    setSelectedValue(event.target.value);
-  };
-
-  const controlProps = (item) => ({
-    checked: selectedValue === item,
-    onChange: handleChange,
-    value: item,
-    name: 'color-radio-button-demo',
-    inputProps: { 'aria-label': item },
-  });
-
-  return (
-    
    
-      
-      
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview b/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview
deleted file mode 100644
index 044dec01c2ca27..00000000000000
--- a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js
deleted file mode 100644
index fd589fe57156c8..00000000000000
--- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function ControlledRadioButtonsGroup() {
-  const id = React.useId();
-  const [value, setValue] = React.useState('female');
-
-  const handleChange = (event) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    
-      Gender
-      
-        } label="Female" />
-        } label="Male" />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview
deleted file mode 100644
index a55cc2986e65c0..00000000000000
--- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  Gender
-  
-    } label="Female" />
-    } label="Male" />
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.js b/docs/data/material/components/radio-buttons/CustomizedRadios.js
deleted file mode 100644
index 53a8b995395947..00000000000000
--- a/docs/data/material/components/radio-buttons/CustomizedRadios.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-const BpIcon = styled('span')(({ theme }) => ({
-  borderRadius: '50%',
-  width: 16,
-  height: 16,
-  boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-  backgroundColor: '#f5f8fa',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-  '.Mui-focusVisible &': {
-    outline: '2px auto rgba(19,124,189,.6)',
-    outlineOffset: 2,
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#ebf1f5',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#30404d',
-    }),
-  },
-  'input:disabled ~ &': {
-    boxShadow: 'none',
-    background: 'rgba(206,217,224,.5)',
-    ...theme.applyStyles('dark', {
-      background: 'rgba(57,75,89,.5)',
-    }),
-    '@media (forced-colors: active)': {
-      outline: '1px solid GrayText',
-    },
-  },
-  '@media (forced-colors: active)': {
-    outline: '1px solid ButtonText',
-  },
-  ...theme.applyStyles('dark', {
-    boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)',
-    backgroundColor: '#394b59',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))',
-  }),
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#137cbd',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&::before': {
-    display: 'block',
-    width: 16,
-    height: 16,
-    backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
-    content: '""',
-    '@media (forced-colors: active)': {
-      backgroundImage: 'none',
-      backgroundColor: 'ButtonText',
-      borderRadius: '50%',
-      width: 8,
-      height: 8,
-      margin: 4,
-    },
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#106ba3',
-  },
-  '@media (forced-colors: active)': {
-    outline: '2px solid ButtonText',
-  },
-});
-
-// Inspired by blueprintjs
-function BpRadio(props) {
-  return (
-    }
-      icon={}
-      {...props}
-    />
-  );
-}
-
-export default function CustomizedRadios() {
-  const id = React.useId();
-  return (
-    
-      Gender
-      
-        } label="Female" />
-        } label="Male" />
-        } label="Other" />
-        }
-          label="(Disabled option)"
-        />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/ErrorRadios.js b/docs/data/material/components/radio-buttons/ErrorRadios.js
deleted file mode 100644
index 0538ab507112ba..00000000000000
--- a/docs/data/material/components/radio-buttons/ErrorRadios.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormLabel from '@mui/material/FormLabel';
-import Button from '@mui/material/Button';
-
-export default function ErrorRadios() {
-  const id = React.useId();
-  const [value, setValue] = React.useState('');
-  const [error, setError] = React.useState(false);
-  const [helperText, setHelperText] = React.useState('Choose wisely');
-
-  const handleRadioChange = (event) => {
-    setValue(event.target.value);
-    setError(false);
-    setHelperText('Choose wisely');
-  };
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-
-    if (value === 'best') {
-      setHelperText('You got it!');
-      setError(false);
-    } else if (value === 'worst') {
-      setHelperText('Sorry, wrong answer!');
-      setError(true);
-    } else {
-      setHelperText('Please select an option.');
-      setError(true);
-    }
-  };
-
-  return (
-    
    
-      
-        Pop quiz: MUI is...
-        
-          } label="The best!" />
-          } label="The worst." />
-        
-        {helperText}
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js
deleted file mode 100644
index 16cfec6691e334..00000000000000
--- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function FormControlLabelPlacement() {
-  const id = React.useId();
-  return (
-    
-      Label placement
-      
-        }
-          label="Bottom"
-          labelPlacement="bottom"
-        />
-        } label="End" />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/RadioButtons.js b/docs/data/material/components/radio-buttons/RadioButtons.js
deleted file mode 100644
index ecfc8d4104a4c0..00000000000000
--- a/docs/data/material/components/radio-buttons/RadioButtons.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-
-export default function RadioButtons() {
-  const [selectedValue, setSelectedValue] = React.useState('a');
-
-  const handleChange = (event) => {
-    setSelectedValue(event.target.value);
-  };
-
-  return (
-    
    
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/RadioButtons.tsx.preview b/docs/data/material/components/radio-buttons/RadioButtons.tsx.preview
deleted file mode 100644
index 49c7808d7f1f1f..00000000000000
--- a/docs/data/material/components/radio-buttons/RadioButtons.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.js b/docs/data/material/components/radio-buttons/RadioButtonsGroup.js
deleted file mode 100644
index f79ba69a7a6176..00000000000000
--- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function RadioButtonsGroup() {
-  const id = React.useId();
-  return (
-    
-      Gender
-      
-        } label="Female" />
-        } label="Male" />
-        } label="Other" />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview
deleted file mode 100644
index 4a3e55b4d7fd41..00000000000000
--- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  Gender
-  
-    } label="Female" />
-    } label="Male" />
-    } label="Other" />
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js
deleted file mode 100644
index 17a38345157dc1..00000000000000
--- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function RowRadioButtonsGroup() {
-  const id = React.useId();
-  return (
-    
-      Gender
-      
-        } label="Female" />
-        } label="Male" />
-        } label="Other" />
-        }
-          label="other"
-        />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview
deleted file mode 100644
index 02735d38677625..00000000000000
--- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  Gender
-  
-    } label="Female" />
-    } label="Male" />
-    } label="Other" />
-    }
-      label="other"
-    />
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/SizeRadioButtons.js b/docs/data/material/components/radio-buttons/SizeRadioButtons.js
deleted file mode 100644
index 02a9ca4f90498c..00000000000000
--- a/docs/data/material/components/radio-buttons/SizeRadioButtons.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-
-export default function SizeRadioButtons() {
-  const [selectedValue, setSelectedValue] = React.useState('a');
-  const handleChange = (event) => {
-    setSelectedValue(event.target.value);
-  };
-
-  const controlProps = (item) => ({
-    checked: selectedValue === item,
-    onChange: handleChange,
-    value: item,
-    name: 'size-radio-button-demo',
-    inputProps: { 'aria-label': item },
-  });
-
-  return (
-    
    
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview b/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview
deleted file mode 100644
index cbff2af0924935..00000000000000
--- a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.js b/docs/data/material/components/radio-buttons/UseRadioGroup.js
deleted file mode 100644
index fb55ea63850606..00000000000000
--- a/docs/data/material/components/radio-buttons/UseRadioGroup.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Radio from '@mui/material/Radio';
-
-const StyledFormControlLabel = styled((props) => )(
-  ({ theme }) => ({
-    variants: [
-      {
-        props: { checked: true },
-        style: {
-          '.MuiFormControlLabel-label': {
-            color: theme.palette.primary.main,
-          },
-        },
-      },
-    ],
-  }),
-);
-
-function MyFormControlLabel(props) {
-  const radioGroup = useRadioGroup();
-
-  let checked = false;
-
-  if (radioGroup) {
-    checked = radioGroup.value === props.value;
-  }
-
-  return ;
-}
-
-MyFormControlLabel.propTypes = {
-  /**
-   * The value of the component.
-   */
-  value: PropTypes.any,
-};
-
-export default function UseRadioGroup() {
-  return (
-    
-      } />
-      } />
-    
-  );
-}
diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview b/docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview
deleted file mode 100644
index 990455a38ca53b..00000000000000
--- a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-  } />
-  } />
-
\ No newline at end of file
diff --git a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx b/docs/data/material/components/radio-buttons/demos/color/ColorRadioButtons.tsx
similarity index 94%
rename from docs/data/material/components/radio-buttons/ColorRadioButtons.tsx
rename to docs/data/material/components/radio-buttons/demos/color/ColorRadioButtons.tsx
index f01f5dd5ec82e5..b6d2b5adb58997 100644
--- a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx
+++ b/docs/data/material/components/radio-buttons/demos/color/ColorRadioButtons.tsx
@@ -19,6 +19,7 @@ export default function ColorRadioButtons() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
       
@@ -32,6 +33,7 @@ export default function ColorRadioButtons() {
           },
         }}
       />
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/radio-buttons/demos/color/index.ts b/docs/data/material/components/radio-buttons/demos/color/index.ts
new file mode 100644
index 00000000000000..de6dc03b35dec6
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorRadioButtons from './ColorRadioButtons';
+
+export default createDemo(import.meta.url, ColorRadioButtons);
diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/demos/controlled-group/ControlledRadioButtonsGroup.tsx
similarity index 95%
rename from docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx
rename to docs/data/material/components/radio-buttons/demos/controlled-group/ControlledRadioButtonsGroup.tsx
index 7845fb14516c9b..6f934f351c799b 100644
--- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx
+++ b/docs/data/material/components/radio-buttons/demos/controlled-group/ControlledRadioButtonsGroup.tsx
@@ -13,6 +13,7 @@ export default function ControlledRadioButtonsGroup() {
     setValue((event.target as HTMLInputElement).value);
   };
 
+  // @focus-start @padding 1
   return (
     
       Gender
@@ -27,4 +28,5 @@ export default function ControlledRadioButtonsGroup() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/controlled-group/index.ts b/docs/data/material/components/radio-buttons/demos/controlled-group/index.ts
new file mode 100644
index 00000000000000..fe5b1dabbd3c72
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/controlled-group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledRadioButtonsGroup from './ControlledRadioButtonsGroup';
+
+export default createDemo(import.meta.url, ControlledRadioButtonsGroup);
diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx b/docs/data/material/components/radio-buttons/demos/customized-radios/CustomizedRadios.tsx
similarity index 98%
rename from docs/data/material/components/radio-buttons/CustomizedRadios.tsx
rename to docs/data/material/components/radio-buttons/demos/customized-radios/CustomizedRadios.tsx
index d49a4e06dee0af..a027cde5e0cf08 100644
--- a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx
+++ b/docs/data/material/components/radio-buttons/demos/customized-radios/CustomizedRadios.tsx
@@ -83,6 +83,7 @@ function BpRadio(props: RadioProps) {
 }
 
 export default function CustomizedRadios() {
+  // @focus-start @padding 1
   const id = React.useId();
   return (
     
@@ -104,4 +105,5 @@ export default function CustomizedRadios() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/customized-radios/index.ts b/docs/data/material/components/radio-buttons/demos/customized-radios/index.ts
new file mode 100644
index 00000000000000..819439d937c807
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/customized-radios/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedRadios from './CustomizedRadios';
+
+export default createDemo(import.meta.url, CustomizedRadios);
diff --git a/docs/data/material/components/radio-buttons/ErrorRadios.tsx b/docs/data/material/components/radio-buttons/demos/error-radios/ErrorRadios.tsx
similarity index 97%
rename from docs/data/material/components/radio-buttons/ErrorRadios.tsx
rename to docs/data/material/components/radio-buttons/demos/error-radios/ErrorRadios.tsx
index 7f3e3968cf8d5f..65911a6a1ee0ae 100644
--- a/docs/data/material/components/radio-buttons/ErrorRadios.tsx
+++ b/docs/data/material/components/radio-buttons/demos/error-radios/ErrorRadios.tsx
@@ -8,6 +8,7 @@ import FormLabel from '@mui/material/FormLabel';
 import Button from '@mui/material/Button';
 
 export default function ErrorRadios() {
+  // @focus-start @padding 1
   const id = React.useId();
   const [value, setValue] = React.useState('');
   const [error, setError] = React.useState(false);
@@ -54,4 +55,5 @@ export default function ErrorRadios() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/error-radios/index.ts b/docs/data/material/components/radio-buttons/demos/error-radios/index.ts
new file mode 100644
index 00000000000000..27c20920ee451a
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/error-radios/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ErrorRadios from './ErrorRadios';
+
+export default createDemo(import.meta.url, ErrorRadios);
diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/FormControlLabelPlacement.tsx
similarity index 95%
rename from docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx
rename to docs/data/material/components/radio-buttons/demos/form-control-label-placement/FormControlLabelPlacement.tsx
index 16cfec6691e334..b2a3f2bc180b14 100644
--- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx
+++ b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/FormControlLabelPlacement.tsx
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 
 export default function FormControlLabelPlacement() {
+  // @focus-start @padding 1
   const id = React.useId();
   return (
     
@@ -26,4 +27,5 @@ export default function FormControlLabelPlacement() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts
new file mode 100644
index 00000000000000..c0abe4e0da313e
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FormControlLabelPlacement from './FormControlLabelPlacement';
+
+export default createDemo(import.meta.url, FormControlLabelPlacement);
diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/demos/group/RadioButtonsGroup.tsx
similarity index 95%
rename from docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx
rename to docs/data/material/components/radio-buttons/demos/group/RadioButtonsGroup.tsx
index f79ba69a7a6176..0154537f700f55 100644
--- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx
+++ b/docs/data/material/components/radio-buttons/demos/group/RadioButtonsGroup.tsx
@@ -7,6 +7,7 @@ import FormLabel from '@mui/material/FormLabel';
 
 export default function RadioButtonsGroup() {
   const id = React.useId();
+  // @focus-start @padding 1
   return (
     
       Gender
@@ -21,4 +22,5 @@ export default function RadioButtonsGroup() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/group/index.ts b/docs/data/material/components/radio-buttons/demos/group/index.ts
new file mode 100644
index 00000000000000..eec6230836462f
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RadioButtonsGroup from './RadioButtonsGroup';
+
+export default createDemo(import.meta.url, RadioButtonsGroup);
diff --git a/docs/data/material/components/radio-buttons/RadioButtons.tsx b/docs/data/material/components/radio-buttons/demos/radio-buttons/RadioButtons.tsx
similarity index 93%
rename from docs/data/material/components/radio-buttons/RadioButtons.tsx
rename to docs/data/material/components/radio-buttons/demos/radio-buttons/RadioButtons.tsx
index cdf3cb8c95137f..4501874983c3b8 100644
--- a/docs/data/material/components/radio-buttons/RadioButtons.tsx
+++ b/docs/data/material/components/radio-buttons/demos/radio-buttons/RadioButtons.tsx
@@ -10,6 +10,7 @@ export default function RadioButtons() {
 
   return (
     
    
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts b/docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts
new file mode 100644
index 00000000000000..003a3c253de64f
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RadioButtons from './RadioButtons';
+
+export default createDemo(import.meta.url, RadioButtons);
diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/demos/row-group/RowRadioButtonsGroup.tsx
similarity index 95%
rename from docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx
rename to docs/data/material/components/radio-buttons/demos/row-group/RowRadioButtonsGroup.tsx
index 17a38345157dc1..271774a88e785e 100644
--- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx
+++ b/docs/data/material/components/radio-buttons/demos/row-group/RowRadioButtonsGroup.tsx
@@ -7,6 +7,7 @@ import FormLabel from '@mui/material/FormLabel';
 
 export default function RowRadioButtonsGroup() {
   const id = React.useId();
+  // @focus-start @padding 1
   return (
     
       Gender
@@ -23,4 +24,5 @@ export default function RowRadioButtonsGroup() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/row-group/index.ts b/docs/data/material/components/radio-buttons/demos/row-group/index.ts
new file mode 100644
index 00000000000000..17d5763989a06f
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/row-group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RowRadioButtonsGroup from './RowRadioButtonsGroup';
+
+export default createDemo(import.meta.url, RowRadioButtonsGroup);
diff --git a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx b/docs/data/material/components/radio-buttons/demos/size/SizeRadioButtons.tsx
similarity index 93%
rename from docs/data/material/components/radio-buttons/SizeRadioButtons.tsx
rename to docs/data/material/components/radio-buttons/demos/size/SizeRadioButtons.tsx
index 2f39da5d669e17..1044130ba1c87a 100644
--- a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx
+++ b/docs/data/material/components/radio-buttons/demos/size/SizeRadioButtons.tsx
@@ -17,6 +17,7 @@ export default function SizeRadioButtons() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/radio-buttons/demos/size/index.ts b/docs/data/material/components/radio-buttons/demos/size/index.ts
new file mode 100644
index 00000000000000..56dca4f6d7beed
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SizeRadioButtons from './SizeRadioButtons';
+
+export default createDemo(import.meta.url, SizeRadioButtons);
diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx b/docs/data/material/components/radio-buttons/demos/use-radio-group/UseRadioGroup.tsx
similarity index 96%
rename from docs/data/material/components/radio-buttons/UseRadioGroup.tsx
rename to docs/data/material/components/radio-buttons/demos/use-radio-group/UseRadioGroup.tsx
index 44f486f8d0b5a7..3288d77e8635e0 100644
--- a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx
+++ b/docs/data/material/components/radio-buttons/demos/use-radio-group/UseRadioGroup.tsx
@@ -37,10 +37,12 @@ function MyFormControlLabel(props: FormControlLabelProps) {
 }
 
 export default function UseRadioGroup() {
+  // @focus-start @padding 1
   return (
     
       } />
       } />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts b/docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts
new file mode 100644
index 00000000000000..78a70dfc21ebeb
--- /dev/null
+++ b/docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UseRadioGroup from './UseRadioGroup';
+
+export default createDemo(import.meta.url, UseRadioGroup);
diff --git a/docs/data/material/components/radio-buttons/radio-buttons.md b/docs/data/material/components/radio-buttons/radio-buttons.md
index 0b74ddae5b3c2b..1bbdfeab6d0674 100644
--- a/docs/data/material/components/radio-buttons/radio-buttons.md
+++ b/docs/data/material/components/radio-buttons/radio-buttons.md
@@ -23,54 +23,54 @@ Radio buttons should have the most commonly used option selected by default.
 
 `RadioGroup` is a helpful wrapper used to group `Radio` components that provides an easier API, and proper keyboard accessibility to the group.
 
-{{"demo": "RadioButtonsGroup.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/group/index.ts"}}
 
 ### Direction
 
 To lay out the buttons horizontally, set the `row` prop:
 
-{{"demo": "RowRadioButtonsGroup.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/row-group/index.ts"}}
 
 ### Controlled
 
 You can control the radio with the `value` and `onChange` props:
 
-{{"demo": "ControlledRadioButtonsGroup.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/controlled-group/index.ts"}}
 
 ## Standalone radio buttons
 
 `Radio` can also be used standalone, without the RadioGroup wrapper.
 
-{{"demo": "RadioButtons.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/radio-buttons/index.ts"}}
 
 ## Size
 
 Use the `size` prop or customize the font size of the svg icons to change the size of the radios.
 
-{{"demo": "SizeRadioButtons.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/size/index.ts"}}
 
 ## Color
 
-{{"demo": "ColorRadioButtons.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/color/index.ts"}}
 
 ## Label placement
 
 You can change the placement of the label with the `FormControlLabel` component's `labelPlacement` prop:
 
-{{"demo": "FormControlLabelPlacement.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/form-control-label-placement/index.ts"}}
 
 ## Show error
 
 In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:
 
-{{"demo": "ErrorRadios.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/error-radios/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedRadios.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/customized-radios/index.ts"}}
 
 ## `useRadioGroup`
 
@@ -94,7 +94,7 @@ import { useRadioGroup } from '@mui/material/RadioGroup';
 
 #### Example
 
-{{"demo": "UseRadioGroup.js"}}
+{{"component": "../data/material/components/radio-buttons/demos/use-radio-group/index.ts"}}
 
 ## When to use
 
diff --git a/docs/data/material/components/rating/BasicRating.js b/docs/data/material/components/rating/BasicRating.js
deleted file mode 100644
index 637eff13f24f63..00000000000000
--- a/docs/data/material/components/rating/BasicRating.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-import Typography from '@mui/material/Typography';
-
-export default function BasicRating() {
-  const [value, setValue] = React.useState(2);
-
-  return (
-     legend': { mt: 2 } }}>
-      Controlled
-       {
-          setValue(newValue);
-        }}
-      />
-      Uncontrolled
-       {
-          console.log(newValue);
-        }}
-        defaultValue={2}
-      />
-      Read only
-      
-      Disabled
-      
-      No rating given
-      
-    
-  );
-}
diff --git a/docs/data/material/components/rating/CustomizedRating.js b/docs/data/material/components/rating/CustomizedRating.js
deleted file mode 100644
index a88cf26440cc30..00000000000000
--- a/docs/data/material/components/rating/CustomizedRating.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-import Typography from '@mui/material/Typography';
-
-const StyledRating = styled(Rating)({
-  '& .MuiRating-iconFilled': {
-    color: '#ff6d75',
-  },
-  '& .MuiRating-iconHover': {
-    color: '#ff3d47',
-  },
-});
-
-export default function CustomizedRating() {
-  return (
-     legend': { mt: 2 } }}>
-      Custom icon and color
-       `${value} Heart${value !== 1 ? 's' : ''}`}
-        precision={0.5}
-        icon={}
-        emptyIcon={}
-      />
-      10 stars
-      
-    
-  );
-}
diff --git a/docs/data/material/components/rating/CustomizedRating.tsx.preview b/docs/data/material/components/rating/CustomizedRating.tsx.preview
deleted file mode 100644
index af39623d881110..00000000000000
--- a/docs/data/material/components/rating/CustomizedRating.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-Custom icon and color
- `${value} Heart${value !== 1 ? 's' : ''}`}
-  precision={0.5}
-  icon={}
-  emptyIcon={}
-/>
-10 stars
-
\ No newline at end of file
diff --git a/docs/data/material/components/rating/HalfRating.js b/docs/data/material/components/rating/HalfRating.js
deleted file mode 100644
index 004627b5d5b3e0..00000000000000
--- a/docs/data/material/components/rating/HalfRating.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Rating from '@mui/material/Rating';
-import Stack from '@mui/material/Stack';
-
-export default function HalfRating() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/rating/HalfRating.tsx.preview b/docs/data/material/components/rating/HalfRating.tsx.preview
deleted file mode 100644
index ad7fdd68e84898..00000000000000
--- a/docs/data/material/components/rating/HalfRating.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/rating/HoverRating.js b/docs/data/material/components/rating/HoverRating.js
deleted file mode 100644
index 4b7d7738e2a0c4..00000000000000
--- a/docs/data/material/components/rating/HoverRating.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import Rating from '@mui/material/Rating';
-import Box from '@mui/material/Box';
-import StarIcon from '@mui/icons-material/Star';
-
-const labels = {
-  0.5: 'Useless',
-  1: 'Useless+',
-  1.5: 'Poor',
-  2: 'Poor+',
-  2.5: 'Ok',
-  3: 'Ok+',
-  3.5: 'Good',
-  4: 'Good+',
-  4.5: 'Excellent',
-  5: 'Excellent+',
-};
-
-function getLabelText(value) {
-  return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
-}
-
-export default function HoverRating() {
-  const [value, setValue] = React.useState(2);
-  const [hover, setHover] = React.useState(-1);
-
-  return (
-    
-       {
-          setValue(newValue);
-        }}
-        onChangeActive={(event, newHover) => {
-          setHover(newHover);
-        }}
-        emptyIcon={}
-      />
-      {value !== null && (
-        {labels[hover !== -1 ? hover : value]}
-      )}
-    
-  );
-}
diff --git a/docs/data/material/components/rating/HoverRating.tsx.preview b/docs/data/material/components/rating/HoverRating.tsx.preview
deleted file mode 100644
index 8f7aff0c844e42..00000000000000
--- a/docs/data/material/components/rating/HoverRating.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
- {
-    setValue(newValue);
-  }}
-  onChangeActive={(event, newHover) => {
-    setHover(newHover);
-  }}
-  emptyIcon={}
-/>
-{value !== null && (
-  {labels[hover !== -1 ? hover : value]}
-)}
\ No newline at end of file
diff --git a/docs/data/material/components/rating/RadioGroupRating.js b/docs/data/material/components/rating/RadioGroupRating.js
deleted file mode 100644
index 03368836cbe8e8..00000000000000
--- a/docs/data/material/components/rating/RadioGroupRating.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Rating from '@mui/material/Rating';
-import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
-import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';
-import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
-import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAltOutlined';
-import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
-
-const StyledRating = styled(Rating)(({ theme }) => ({
-  '& .MuiRating-iconEmpty .MuiSvgIcon-root': {
-    color: (theme.vars || theme).palette.action.disabled,
-  },
-}));
-
-const customIcons = {
-  1: {
-    icon: ,
-    label: 'Very Dissatisfied',
-  },
-  2: {
-    icon: ,
-    label: 'Dissatisfied',
-  },
-  3: {
-    icon: ,
-    label: 'Neutral',
-  },
-  4: {
-    icon: ,
-    label: 'Satisfied',
-  },
-  5: {
-    icon: ,
-    label: 'Very Satisfied',
-  },
-};
-
-function IconContainer(props) {
-  const { value, ...other } = props;
-  return {customIcons[value].icon};
-}
-
-IconContainer.propTypes = {
-  value: PropTypes.number.isRequired,
-};
-
-export default function RadioGroupRating() {
-  return (
-     customIcons[value].label}
-      slotProps={{ icon: { component: IconContainer } }}
-      highlightSelectedOnly
-    />
-  );
-}
diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx.preview b/docs/data/material/components/rating/RadioGroupRating.tsx.preview
deleted file mode 100644
index 264aa41d532cb5..00000000000000
--- a/docs/data/material/components/rating/RadioGroupRating.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
- customIcons[value].label}
-  slotProps={{ icon: { component: IconContainer } }}
-  highlightSelectedOnly
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/rating/RatingSize.js b/docs/data/material/components/rating/RatingSize.js
deleted file mode 100644
index 158434315e1eff..00000000000000
--- a/docs/data/material/components/rating/RatingSize.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Rating from '@mui/material/Rating';
-import Stack from '@mui/material/Stack';
-
-export default function RatingSize() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/rating/RatingSize.tsx.preview b/docs/data/material/components/rating/RatingSize.tsx.preview
deleted file mode 100644
index 829b917f8a812b..00000000000000
--- a/docs/data/material/components/rating/RatingSize.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/rating/TextRating.js b/docs/data/material/components/rating/TextRating.js
deleted file mode 100644
index e7259c4885122f..00000000000000
--- a/docs/data/material/components/rating/TextRating.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-import StarIcon from '@mui/icons-material/Star';
-
-const labels = {
-  0.5: 'Useless',
-  1: 'Useless+',
-  1.5: 'Poor',
-  2: 'Poor+',
-  2.5: 'Ok',
-  3: 'Ok+',
-  3.5: 'Good',
-  4: 'Good+',
-  4.5: 'Excellent',
-  5: 'Excellent+',
-};
-
-export default function TextRating() {
-  const value = 3.5;
-
-  return (
-    
-      }
-      />
-      {labels[value]}
-    
-  );
-}
diff --git a/docs/data/material/components/rating/TextRating.tsx.preview b/docs/data/material/components/rating/TextRating.tsx.preview
deleted file mode 100644
index 6420fad826c8c9..00000000000000
--- a/docs/data/material/components/rating/TextRating.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-}
-/>
-{labels[value]}
\ No newline at end of file
diff --git a/docs/data/material/components/rating/BasicRating.tsx b/docs/data/material/components/rating/demos/basic/BasicRating.tsx
similarity index 96%
rename from docs/data/material/components/rating/BasicRating.tsx
rename to docs/data/material/components/rating/demos/basic/BasicRating.tsx
index 56c463b687612e..b9bae29d47a64d 100644
--- a/docs/data/material/components/rating/BasicRating.tsx
+++ b/docs/data/material/components/rating/demos/basic/BasicRating.tsx
@@ -4,6 +4,7 @@ import Rating from '@mui/material/Rating';
 import Typography from '@mui/material/Typography';
 
 export default function BasicRating() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(2);
 
   return (
@@ -32,4 +33,5 @@ export default function BasicRating() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/rating/demos/basic/index.ts b/docs/data/material/components/rating/demos/basic/index.ts
new file mode 100644
index 00000000000000..95d02c2cd13828
--- /dev/null
+++ b/docs/data/material/components/rating/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicRating from './BasicRating';
+
+export default createDemo(import.meta.url, BasicRating);
diff --git a/docs/data/material/components/rating/CustomizedRating.tsx b/docs/data/material/components/rating/demos/customized/CustomizedRating.tsx
similarity index 95%
rename from docs/data/material/components/rating/CustomizedRating.tsx
rename to docs/data/material/components/rating/demos/customized/CustomizedRating.tsx
index 1f747576af63ed..50ab4d6cfbaba2 100644
--- a/docs/data/material/components/rating/CustomizedRating.tsx
+++ b/docs/data/material/components/rating/demos/customized/CustomizedRating.tsx
@@ -17,6 +17,7 @@ const StyledRating = styled(Rating)({
 export default function CustomizedRating() {
   return (
      legend': { mt: 2 } }}>
+      {/* @focus-start */}
       Custom icon and color
       
       10 stars
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/rating/demos/customized/index.ts b/docs/data/material/components/rating/demos/customized/index.ts
new file mode 100644
index 00000000000000..f779ffcb057ced
--- /dev/null
+++ b/docs/data/material/components/rating/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedRating from './CustomizedRating';
+
+export default createDemo(import.meta.url, CustomizedRating);
diff --git a/docs/data/material/components/rating/HalfRating.tsx b/docs/data/material/components/rating/demos/half/HalfRating.tsx
similarity index 86%
rename from docs/data/material/components/rating/HalfRating.tsx
rename to docs/data/material/components/rating/demos/half/HalfRating.tsx
index 004627b5d5b3e0..2eaad6a7dc2d98 100644
--- a/docs/data/material/components/rating/HalfRating.tsx
+++ b/docs/data/material/components/rating/demos/half/HalfRating.tsx
@@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack';
 export default function HalfRating() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/rating/demos/half/index.ts b/docs/data/material/components/rating/demos/half/index.ts
new file mode 100644
index 00000000000000..c3a01b1190ffaa
--- /dev/null
+++ b/docs/data/material/components/rating/demos/half/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HalfRating from './HalfRating';
+
+export default createDemo(import.meta.url, HalfRating);
diff --git a/docs/data/material/components/rating/HoverRating.tsx b/docs/data/material/components/rating/demos/hover/HoverRating.tsx
similarity index 95%
rename from docs/data/material/components/rating/HoverRating.tsx
rename to docs/data/material/components/rating/demos/hover/HoverRating.tsx
index a282d886c314c2..ec0ca2edbb923b 100644
--- a/docs/data/material/components/rating/HoverRating.tsx
+++ b/docs/data/material/components/rating/demos/hover/HoverRating.tsx
@@ -26,6 +26,7 @@ export default function HoverRating() {
 
   return (
     
+      {/* @focus-start */}
       {labels[hover !== -1 ? hover : value]}
       )}
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/rating/demos/hover/index.ts b/docs/data/material/components/rating/demos/hover/index.ts
new file mode 100644
index 00000000000000..f02e899c2f6e79
--- /dev/null
+++ b/docs/data/material/components/rating/demos/hover/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HoverRating from './HoverRating';
+
+export default createDemo(import.meta.url, HoverRating);
diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx b/docs/data/material/components/rating/demos/radio-group/RadioGroupRating.tsx
similarity index 97%
rename from docs/data/material/components/rating/RadioGroupRating.tsx
rename to docs/data/material/components/rating/demos/radio-group/RadioGroupRating.tsx
index 92cf8dc3cbeb3d..a5606bb2370973 100644
--- a/docs/data/material/components/rating/RadioGroupRating.tsx
+++ b/docs/data/material/components/rating/demos/radio-group/RadioGroupRating.tsx
@@ -47,6 +47,7 @@ function IconContainer(props: IconContainerProps) {
 }
 
 export default function RadioGroupRating() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/rating/demos/radio-group/index.ts b/docs/data/material/components/rating/demos/radio-group/index.ts
new file mode 100644
index 00000000000000..76e6e6a03fd36b
--- /dev/null
+++ b/docs/data/material/components/rating/demos/radio-group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RadioGroupRating from './RadioGroupRating';
+
+export default createDemo(import.meta.url, RadioGroupRating);
diff --git a/docs/data/material/components/rating/RatingSize.tsx b/docs/data/material/components/rating/demos/size/RatingSize.tsx
similarity index 87%
rename from docs/data/material/components/rating/RatingSize.tsx
rename to docs/data/material/components/rating/demos/size/RatingSize.tsx
index 158434315e1eff..2667dc36736d89 100644
--- a/docs/data/material/components/rating/RatingSize.tsx
+++ b/docs/data/material/components/rating/demos/size/RatingSize.tsx
@@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack';
 export default function RatingSize() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/rating/demos/size/index.ts b/docs/data/material/components/rating/demos/size/index.ts
new file mode 100644
index 00000000000000..d524344bc665f1
--- /dev/null
+++ b/docs/data/material/components/rating/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RatingSize from './RatingSize';
+
+export default createDemo(import.meta.url, RatingSize);
diff --git a/docs/data/material/components/rating/TextRating.tsx b/docs/data/material/components/rating/demos/text/TextRating.tsx
similarity index 93%
rename from docs/data/material/components/rating/TextRating.tsx
rename to docs/data/material/components/rating/demos/text/TextRating.tsx
index 9850ca0a0b657f..7e6d2abf6e3754 100644
--- a/docs/data/material/components/rating/TextRating.tsx
+++ b/docs/data/material/components/rating/demos/text/TextRating.tsx
@@ -20,6 +20,7 @@ export default function TextRating() {
 
   return (
     
+      {/* @focus-start */}
       }
       />
       {labels[value]}
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/rating/demos/text/index.ts b/docs/data/material/components/rating/demos/text/index.ts
new file mode 100644
index 00000000000000..b139e1d08d73d8
--- /dev/null
+++ b/docs/data/material/components/rating/demos/text/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TextRating from './TextRating';
+
+export default createDemo(import.meta.url, TextRating);
diff --git a/docs/data/material/components/rating/rating.md b/docs/data/material/components/rating/rating.md
index 36ed71c49af02c..c39bbd3d9671d3 100644
--- a/docs/data/material/components/rating/rating.md
+++ b/docs/data/material/components/rating/rating.md
@@ -15,40 +15,40 @@ githubSource: packages/mui-material/src/Rating
 
 ## Basic rating
 
-{{"demo": "BasicRating.js"}}
+{{"component": "../data/material/components/rating/demos/basic/index.ts"}}
 
 ## Rating precision
 
 The rating can display any float number with the `value` prop.
 Use the `precision` prop to define the minimum increment value change allowed.
 
-{{"demo": "HalfRating.js"}}
+{{"component": "../data/material/components/rating/demos/half/index.ts"}}
 
 ## Hover feedback
 
 You can display a label on hover to help the user pick the correct rating value.
 The demo uses the `onChangeActive` prop.
 
-{{"demo": "HoverRating.js"}}
+{{"component": "../data/material/components/rating/demos/hover/index.ts"}}
 
 ## Sizes
 
 For larger or smaller ratings use the `size` prop.
 
-{{"demo": "RatingSize.js"}}
+{{"component": "../data/material/components/rating/demos/size/index.ts"}}
 
 ## Customization
 
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedRating.js"}}
+{{"component": "../data/material/components/rating/demos/customized/index.ts"}}
 
 ## Radio group
 
 The rating is implemented with a radio group, set `highlightSelectedOnly` to restore the natural behavior.
 
-{{"demo": "RadioGroupRating.js"}}
+{{"component": "../data/material/components/rating/demos/radio-group/index.ts"}}
 
 ## Accessibility
 
@@ -63,7 +63,7 @@ The accessibility of this component relies on:
 - A visually distinct appearance for the rating icons.
   By default, the rating component uses both a difference of color and shape (filled and empty icons) to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to meet [WCAG 2.2 Success Criterion 1.4.1](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html).
 
-{{"demo": "TextRating.js"}}
+{{"component": "../data/material/components/rating/demos/text/index.ts"}}
 
 ### ARIA
 
diff --git a/docs/data/material/components/selects/BasicSelect.js b/docs/data/material/components/selects/BasicSelect.js
deleted file mode 100644
index 376005e57f5c77..00000000000000
--- a/docs/data/material/components/selects/BasicSelect.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function BasicSelect() {
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  return (
-    
-      
-        Age
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/selects/BasicSelect.tsx.preview b/docs/data/material/components/selects/BasicSelect.tsx.preview
deleted file mode 100644
index 2294528ef8b6f5..00000000000000
--- a/docs/data/material/components/selects/BasicSelect.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  Age
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/selects/ControlledOpenSelect.js b/docs/data/material/components/selects/ControlledOpenSelect.js
deleted file mode 100644
index 80071d0d4cca4e..00000000000000
--- a/docs/data/material/components/selects/ControlledOpenSelect.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Button from '@mui/material/Button';
-
-export default function ControlledOpenSelect() {
-  const [age, setAge] = React.useState('');
-  const [open, setOpen] = React.useState(false);
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    
    
-      
-      
-        Age
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/CustomizedSelects.js b/docs/data/material/components/selects/CustomizedSelects.js
deleted file mode 100644
index 8e75004d9ebab7..00000000000000
--- a/docs/data/material/components/selects/CustomizedSelects.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import NativeSelect from '@mui/material/NativeSelect';
-import InputBase from '@mui/material/InputBase';
-
-const BootstrapInput = styled(InputBase)(({ theme }) => ({
-  'label + &': {
-    marginTop: theme.spacing(3),
-  },
-  '& .MuiInputBase-input': {
-    borderRadius: 4,
-    position: 'relative',
-    backgroundColor: (theme.vars ?? theme).palette.background.paper,
-    border: '1px solid #ced4da',
-    fontSize: 16,
-    padding: '10px 26px 10px 12px',
-    transition: theme.transitions.create(['border-color', 'box-shadow']),
-    // Use the system font instead of the default Roboto font.
-    fontFamily: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-    ].join(','),
-    '&:focus': {
-      borderRadius: 4,
-      borderColor: '#80bdff',
-      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
-    },
-  },
-}));
-
-export default function CustomizedSelects() {
-  const textboxId = React.useId();
-  const selectId = React.useId();
-  const nativeId = React.useId();
-  const [age, setAge] = React.useState('');
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-  return (
-    
    
-      
-        Age
-        
-      
-      
-        Age
-        
-      
-      
-        Age
-        }
-        >
-          
-          
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/DialogSelect.js b/docs/data/material/components/selects/DialogSelect.js
deleted file mode 100644
index 5387e53d5c16bc..00000000000000
--- a/docs/data/material/components/selects/DialogSelect.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import InputLabel from '@mui/material/InputLabel';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function DialogSelect() {
-  const nativeId = React.useId();
-  const selectId = React.useId();
-  const [open, setOpen] = React.useState(false);
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(Number(event.target.value) || '');
-  };
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDialogClose = (_event, reason) => {
-    if (!['backdropClick', 'escapeKeyDown'].includes(reason)) {
-      setOpen(false);
-    }
-  };
-
-  const handleActionButtonClick = () => {
-    setOpen(false);
-  };
-
-  return (
-    
    
-      
-      
-        Fill the form
-        
-          
-            
-              Age
-              
-            
-            
-              Age
-              
-            
-          
-        
-        
-          
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/GroupedSelect.js b/docs/data/material/components/selects/GroupedSelect.js
deleted file mode 100644
index 3bab115a72ce57..00000000000000
--- a/docs/data/material/components/selects/GroupedSelect.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import ListSubheader from '@mui/material/ListSubheader';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function GroupedSelect() {
-  const nativeId = React.useId();
-  const id = React.useId();
-  return (
-    
    
-      
-        Grouping
-        
-      
-      
-        
-          Grouping
-        
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/MultipleSelect.js b/docs/data/material/components/selects/MultipleSelect.js
deleted file mode 100644
index f09250077f32d8..00000000000000
--- a/docs/data/material/components/selects/MultipleSelect.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  slotProps: {
-    paper: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  },
-};
-
-const names = [
-  'Oliver Hansen',
-  'Van Henry',
-  'April Tucker',
-  'Ralph Hubbard',
-  'Omar Alexander',
-  'Carlos Abbott',
-  'Miriam Wagner',
-  'Bradley Wilkerson',
-  'Virginia Andrews',
-  'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
-  return {
-    fontWeight: personName.includes(name)
-      ? theme.typography.fontWeightMedium
-      : theme.typography.fontWeightRegular,
-  };
-}
-
-export default function MultipleSelect() {
-  const theme = useTheme();
-  const [personName, setPersonName] = React.useState([]);
-
-  const handleChange = (event) => {
-    const {
-      target: { value },
-    } = event;
-    setPersonName(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-
-  return (
-    
    
-      
-        Name
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/MultipleSelectCheckmarks.js b/docs/data/material/components/selects/MultipleSelectCheckmarks.js
deleted file mode 100644
index a6f9b6f76da66a..00000000000000
--- a/docs/data/material/components/selects/MultipleSelectCheckmarks.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import ListItemText from '@mui/material/ListItemText';
-import Select from '@mui/material/Select';
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  slotProps: {
-    paper: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  },
-};
-
-const names = [
-  'Oliver Hansen',
-  'Van Henry',
-  'April Tucker',
-  'Ralph Hubbard',
-  'Omar Alexander',
-  'Carlos Abbott',
-  'Miriam Wagner',
-  'Bradley Wilkerson',
-  'Virginia Andrews',
-  'Kelly Snyder',
-];
-
-export default function MultipleSelectCheckmarks() {
-  const [personName, setPersonName] = React.useState([]);
-
-  const handleChange = (event) => {
-    const {
-      target: { value },
-    } = event;
-    setPersonName(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-
-  return (
-    
    
-      
-        Tag
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/MultipleSelectChip.js b/docs/data/material/components/selects/MultipleSelectChip.js
deleted file mode 100644
index e533d6ac94cfd0..00000000000000
--- a/docs/data/material/components/selects/MultipleSelectChip.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Chip from '@mui/material/Chip';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  slotProps: {
-    paper: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  },
-};
-
-const names = [
-  'Oliver Hansen',
-  'Van Henry',
-  'April Tucker',
-  'Ralph Hubbard',
-  'Omar Alexander',
-  'Carlos Abbott',
-  'Miriam Wagner',
-  'Bradley Wilkerson',
-  'Virginia Andrews',
-  'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
-  return {
-    fontWeight: personName.includes(name)
-      ? theme.typography.fontWeightMedium
-      : theme.typography.fontWeightRegular,
-  };
-}
-
-export default function MultipleSelectChip() {
-  const theme = useTheme();
-  const [personName, setPersonName] = React.useState([]);
-
-  const handleChange = (event) => {
-    const {
-      target: { value },
-    } = event;
-    setPersonName(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-
-  return (
-    
    
-      
-        Chip
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/MultipleSelectNative.js b/docs/data/material/components/selects/MultipleSelectNative.js
deleted file mode 100644
index f89e64d6d3942c..00000000000000
--- a/docs/data/material/components/selects/MultipleSelectNative.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-const names = [
-  'Oliver Hansen',
-  'Van Henry',
-  'April Tucker',
-  'Ralph Hubbard',
-  'Omar Alexander',
-  'Carlos Abbott',
-  'Miriam Wagner',
-  'Bradley Wilkerson',
-  'Virginia Andrews',
-  'Kelly Snyder',
-];
-
-export default function MultipleSelectNative() {
-  const id = React.useId();
-  const [personName, setPersonName] = React.useState([]);
-  const handleChangeMultiple = (event) => {
-    const { options } = event.target;
-    const value = [];
-    for (let i = 0, l = options.length; i < l; i += 1) {
-      if (options[i].selected) {
-        value.push(options[i].value);
-      }
-    }
-    setPersonName(value);
-  };
-
-  return (
-    
    
-      
-        
-          Native
-        
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/MultipleSelectPlaceholder.js b/docs/data/material/components/selects/MultipleSelectPlaceholder.js
deleted file mode 100644
index 44d5ce4068e10b..00000000000000
--- a/docs/data/material/components/selects/MultipleSelectPlaceholder.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  slotProps: {
-    paper: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  },
-};
-
-const names = [
-  'Oliver Hansen',
-  'Van Henry',
-  'April Tucker',
-  'Ralph Hubbard',
-  'Omar Alexander',
-  'Carlos Abbott',
-  'Miriam Wagner',
-  'Bradley Wilkerson',
-  'Virginia Andrews',
-  'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
-  return {
-    fontWeight: personName.includes(name)
-      ? theme.typography.fontWeightMedium
-      : theme.typography.fontWeightRegular,
-  };
-}
-
-export default function MultipleSelectPlaceholder() {
-  const theme = useTheme();
-  const [personName, setPersonName] = React.useState([]);
-
-  const handleChange = (event) => {
-    const {
-      target: { value },
-    } = event;
-    setPersonName(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-
-  return (
-    
    
-      
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/NativeSelectDemo.js b/docs/data/material/components/selects/NativeSelectDemo.js
deleted file mode 100644
index 8ffbec6206cc5b..00000000000000
--- a/docs/data/material/components/selects/NativeSelectDemo.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import NativeSelect from '@mui/material/NativeSelect';
-
-export default function NativeSelectDemo() {
-  const id = React.useId();
-  return (
-    
-      
-        
-          Age
-        
-        
-          
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/selects/NativeSelectDemo.tsx.preview b/docs/data/material/components/selects/NativeSelectDemo.tsx.preview
deleted file mode 100644
index c6ef912aff766b..00000000000000
--- a/docs/data/material/components/selects/NativeSelectDemo.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-    Age
-  
-  
-    
-    
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/selects/SelectAutoWidth.js b/docs/data/material/components/selects/SelectAutoWidth.js
deleted file mode 100644
index 0d56a041c980f4..00000000000000
--- a/docs/data/material/components/selects/SelectAutoWidth.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function SelectAutoWidth() {
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  return (
-    
    
-      
-        Age
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/SelectLabels.js b/docs/data/material/components/selects/SelectLabels.js
deleted file mode 100644
index 8078421b06cca1..00000000000000
--- a/docs/data/material/components/selects/SelectLabels.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function SelectLabels() {
-  const id = React.useId();
-  const noLabelId = React.useId();
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  return (
-    
    
-      
-        Age
-        
-        
-          Visible label and helper text
-        
-      
-      
-        
-        
-          aria-label and helper text
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/SelectOtherProps.js b/docs/data/material/components/selects/SelectOtherProps.js
deleted file mode 100644
index ce504047f1b3e6..00000000000000
--- a/docs/data/material/components/selects/SelectOtherProps.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function SelectOtherProps() {
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  return (
-    
    
-      
-        Age
-        
-        Disabled
-      
-      
-        Age
-        
-        Error
-      
-      
-        Age
-        
-        Read only
-      
-      
-        Age
-        
-        Required
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/SelectSmall.js b/docs/data/material/components/selects/SelectSmall.js
deleted file mode 100644
index 99d073e5ed2a93..00000000000000
--- a/docs/data/material/components/selects/SelectSmall.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function SelectSmall() {
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  return (
-    
-      Age
-      
-    
-  );
-}
diff --git a/docs/data/material/components/selects/SelectVariants.js b/docs/data/material/components/selects/SelectVariants.js
deleted file mode 100644
index 43b1c546860cc4..00000000000000
--- a/docs/data/material/components/selects/SelectVariants.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function SelectVariants() {
-  const [age, setAge] = React.useState('');
-
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
-
-  return (
-    
    
-      
-        Age
-        
-      
-      
-        Age
-        
-      
-      
-        Age
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/selects/SelectAutoWidth.tsx b/docs/data/material/components/selects/demos/auto-width/SelectAutoWidth.tsx
similarity index 96%
rename from docs/data/material/components/selects/SelectAutoWidth.tsx
rename to docs/data/material/components/selects/demos/auto-width/SelectAutoWidth.tsx
index 8f0c8a7acb3d96..5a0c175c249404 100644
--- a/docs/data/material/components/selects/SelectAutoWidth.tsx
+++ b/docs/data/material/components/selects/demos/auto-width/SelectAutoWidth.tsx
@@ -5,6 +5,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function SelectAutoWidth() {
+  // @focus-start @padding 1
   const [age, setAge] = React.useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -33,4 +34,5 @@ export default function SelectAutoWidth() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/auto-width/index.ts b/docs/data/material/components/selects/demos/auto-width/index.ts
new file mode 100644
index 00000000000000..84163d992b1056
--- /dev/null
+++ b/docs/data/material/components/selects/demos/auto-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectAutoWidth from './SelectAutoWidth';
+
+export default createDemo(import.meta.url, SelectAutoWidth);
diff --git a/docs/data/material/components/selects/BasicSelect.tsx b/docs/data/material/components/selects/demos/basic/BasicSelect.tsx
similarity index 95%
rename from docs/data/material/components/selects/BasicSelect.tsx
rename to docs/data/material/components/selects/demos/basic/BasicSelect.tsx
index 58b3a21499fc30..bc9853e883c757 100644
--- a/docs/data/material/components/selects/BasicSelect.tsx
+++ b/docs/data/material/components/selects/demos/basic/BasicSelect.tsx
@@ -14,6 +14,7 @@ export default function BasicSelect() {
 
   return (
     
+      {/* @focus-start */}
       
         Age
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/selects/demos/basic/index.ts b/docs/data/material/components/selects/demos/basic/index.ts
new file mode 100644
index 00000000000000..44adc51d871353
--- /dev/null
+++ b/docs/data/material/components/selects/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicSelect from './BasicSelect';
+
+export default createDemo(import.meta.url, BasicSelect);
diff --git a/docs/data/material/components/selects/ControlledOpenSelect.tsx b/docs/data/material/components/selects/demos/controlled-open/ControlledOpenSelect.tsx
similarity index 97%
rename from docs/data/material/components/selects/ControlledOpenSelect.tsx
rename to docs/data/material/components/selects/demos/controlled-open/ControlledOpenSelect.tsx
index 82ed200bd00093..b5448d7eb5d156 100644
--- a/docs/data/material/components/selects/ControlledOpenSelect.tsx
+++ b/docs/data/material/components/selects/demos/controlled-open/ControlledOpenSelect.tsx
@@ -6,6 +6,7 @@ import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Button from '@mui/material/Button';
 
 export default function ControlledOpenSelect() {
+  // @focus-start @padding 1
   const [age, setAge] = React.useState('');
   const [open, setOpen] = React.useState(false);
 
@@ -48,4 +49,5 @@ export default function ControlledOpenSelect() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/controlled-open/index.ts b/docs/data/material/components/selects/demos/controlled-open/index.ts
new file mode 100644
index 00000000000000..94cdcd1bca1fa5
--- /dev/null
+++ b/docs/data/material/components/selects/demos/controlled-open/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledOpenSelect from './ControlledOpenSelect';
+
+export default createDemo(import.meta.url, ControlledOpenSelect);
diff --git a/docs/data/material/components/selects/CustomizedSelects.tsx b/docs/data/material/components/selects/demos/customized/CustomizedSelects.tsx
similarity index 98%
rename from docs/data/material/components/selects/CustomizedSelects.tsx
rename to docs/data/material/components/selects/demos/customized/CustomizedSelects.tsx
index b184257ca42b24..ae45069dbc5baa 100644
--- a/docs/data/material/components/selects/CustomizedSelects.tsx
+++ b/docs/data/material/components/selects/demos/customized/CustomizedSelects.tsx
@@ -41,6 +41,7 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 }));
 
 export default function CustomizedSelects() {
+  // @focus-start @padding 1
   const textboxId = React.useId();
   const selectId = React.useId();
   const nativeId = React.useId();
@@ -87,4 +88,5 @@ export default function CustomizedSelects() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/customized/index.ts b/docs/data/material/components/selects/demos/customized/index.ts
new file mode 100644
index 00000000000000..266e429ff0fe58
--- /dev/null
+++ b/docs/data/material/components/selects/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedSelects from './CustomizedSelects';
+
+export default createDemo(import.meta.url, CustomizedSelects);
diff --git a/docs/data/material/components/selects/DialogSelect.tsx b/docs/data/material/components/selects/demos/dialog/DialogSelect.tsx
similarity index 98%
rename from docs/data/material/components/selects/DialogSelect.tsx
rename to docs/data/material/components/selects/demos/dialog/DialogSelect.tsx
index 1b28ae0d519277..91c0a8365d2a9c 100644
--- a/docs/data/material/components/selects/DialogSelect.tsx
+++ b/docs/data/material/components/selects/demos/dialog/DialogSelect.tsx
@@ -12,6 +12,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function DialogSelect() {
+  // @focus-start @padding 1
   const nativeId = React.useId();
   const selectId = React.useId();
   const [open, setOpen] = React.useState(false);
@@ -85,4 +86,5 @@ export default function DialogSelect() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/dialog/index.ts b/docs/data/material/components/selects/demos/dialog/index.ts
new file mode 100644
index 00000000000000..5740df4a1dfbea
--- /dev/null
+++ b/docs/data/material/components/selects/demos/dialog/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DialogSelect from './DialogSelect';
+
+export default createDemo(import.meta.url, DialogSelect);
diff --git a/docs/data/material/components/selects/GroupedSelect.tsx b/docs/data/material/components/selects/demos/grouped/GroupedSelect.tsx
similarity index 97%
rename from docs/data/material/components/selects/GroupedSelect.tsx
rename to docs/data/material/components/selects/demos/grouped/GroupedSelect.tsx
index 3bab115a72ce57..4c6dc10795195a 100644
--- a/docs/data/material/components/selects/GroupedSelect.tsx
+++ b/docs/data/material/components/selects/demos/grouped/GroupedSelect.tsx
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 
 export default function GroupedSelect() {
+  // @focus-start @padding 1
   const nativeId = React.useId();
   const id = React.useId();
   return (
@@ -49,4 +50,5 @@ export default function GroupedSelect() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/grouped/index.ts b/docs/data/material/components/selects/demos/grouped/index.ts
new file mode 100644
index 00000000000000..4b060cac68adc3
--- /dev/null
+++ b/docs/data/material/components/selects/demos/grouped/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GroupedSelect from './GroupedSelect';
+
+export default createDemo(import.meta.url, GroupedSelect);
diff --git a/docs/data/material/components/selects/SelectLabels.tsx b/docs/data/material/components/selects/demos/labels/SelectLabels.tsx
similarity index 97%
rename from docs/data/material/components/selects/SelectLabels.tsx
rename to docs/data/material/components/selects/demos/labels/SelectLabels.tsx
index e5ca89ea7dd93d..1ab00736c2546b 100644
--- a/docs/data/material/components/selects/SelectLabels.tsx
+++ b/docs/data/material/components/selects/demos/labels/SelectLabels.tsx
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function SelectLabels() {
+  // @focus-start @padding 1
   const id = React.useId();
   const noLabelId = React.useId();
   const [age, setAge] = React.useState('');
@@ -58,4 +59,5 @@ export default function SelectLabels() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/labels/index.ts b/docs/data/material/components/selects/demos/labels/index.ts
new file mode 100644
index 00000000000000..dba847e6f40c59
--- /dev/null
+++ b/docs/data/material/components/selects/demos/labels/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectLabels from './SelectLabels';
+
+export default createDemo(import.meta.url, SelectLabels);
diff --git a/docs/data/material/components/selects/MultipleSelectCheckmarks.tsx b/docs/data/material/components/selects/demos/multiple-checkmarks/MultipleSelectCheckmarks.tsx
similarity index 98%
rename from docs/data/material/components/selects/MultipleSelectCheckmarks.tsx
rename to docs/data/material/components/selects/demos/multiple-checkmarks/MultipleSelectCheckmarks.tsx
index 6ff1f7b844c82f..6756cef83b3cc5 100644
--- a/docs/data/material/components/selects/MultipleSelectCheckmarks.tsx
+++ b/docs/data/material/components/selects/demos/multiple-checkmarks/MultipleSelectCheckmarks.tsx
@@ -35,6 +35,7 @@ const names = [
 ];
 
 export default function MultipleSelectCheckmarks() {
+  // @focus-start @padding 1
   const [personName, setPersonName] = React.useState([]);
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -79,4 +80,5 @@ export default function MultipleSelectCheckmarks() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/multiple-checkmarks/index.ts b/docs/data/material/components/selects/demos/multiple-checkmarks/index.ts
new file mode 100644
index 00000000000000..a91afb52b9c901
--- /dev/null
+++ b/docs/data/material/components/selects/demos/multiple-checkmarks/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultipleSelectCheckmarks from './MultipleSelectCheckmarks';
+
+export default createDemo(import.meta.url, MultipleSelectCheckmarks);
diff --git a/docs/data/material/components/selects/MultipleSelectChip.tsx b/docs/data/material/components/selects/demos/multiple-chip/MultipleSelectChip.tsx
similarity index 98%
rename from docs/data/material/components/selects/MultipleSelectChip.tsx
rename to docs/data/material/components/selects/demos/multiple-chip/MultipleSelectChip.tsx
index a41405f9215bc6..ace7cba6ec78cf 100644
--- a/docs/data/material/components/selects/MultipleSelectChip.tsx
+++ b/docs/data/material/components/selects/demos/multiple-chip/MultipleSelectChip.tsx
@@ -43,6 +43,7 @@ function getStyles(name: string, personName: readonly string[], theme: Theme) {
 }
 
 export default function MultipleSelectChip() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [personName, setPersonName] = React.useState([]);
 
@@ -89,4 +90,5 @@ export default function MultipleSelectChip() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/multiple-chip/index.ts b/docs/data/material/components/selects/demos/multiple-chip/index.ts
new file mode 100644
index 00000000000000..618fcff244d4a3
--- /dev/null
+++ b/docs/data/material/components/selects/demos/multiple-chip/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultipleSelectChip from './MultipleSelectChip';
+
+export default createDemo(import.meta.url, MultipleSelectChip);
diff --git a/docs/data/material/components/selects/MultipleSelectNative.tsx b/docs/data/material/components/selects/demos/multiple-native/MultipleSelectNative.tsx
similarity index 97%
rename from docs/data/material/components/selects/MultipleSelectNative.tsx
rename to docs/data/material/components/selects/demos/multiple-native/MultipleSelectNative.tsx
index c3d217b37d5f94..a4cd7923e3582c 100644
--- a/docs/data/material/components/selects/MultipleSelectNative.tsx
+++ b/docs/data/material/components/selects/demos/multiple-native/MultipleSelectNative.tsx
@@ -17,6 +17,7 @@ const names = [
 ];
 
 export default function MultipleSelectNative() {
+  // @focus-start @padding 1
   const id = React.useId();
   const [personName, setPersonName] = React.useState([]);
   const handleChangeMultiple = (event: React.ChangeEvent) => {
@@ -56,4 +57,5 @@ export default function MultipleSelectNative() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/multiple-native/index.ts b/docs/data/material/components/selects/demos/multiple-native/index.ts
new file mode 100644
index 00000000000000..0c49d6d54cbd3b
--- /dev/null
+++ b/docs/data/material/components/selects/demos/multiple-native/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultipleSelectNative from './MultipleSelectNative';
+
+export default createDemo(import.meta.url, MultipleSelectNative);
diff --git a/docs/data/material/components/selects/MultipleSelectPlaceholder.tsx b/docs/data/material/components/selects/demos/multiple-placeholder/MultipleSelectPlaceholder.tsx
similarity index 98%
rename from docs/data/material/components/selects/MultipleSelectPlaceholder.tsx
rename to docs/data/material/components/selects/demos/multiple-placeholder/MultipleSelectPlaceholder.tsx
index a98fbeac55b217..0ce3415ade5b36 100644
--- a/docs/data/material/components/selects/MultipleSelectPlaceholder.tsx
+++ b/docs/data/material/components/selects/demos/multiple-placeholder/MultipleSelectPlaceholder.tsx
@@ -40,6 +40,7 @@ function getStyles(name: string, personName: readonly string[], theme: Theme) {
 }
 
 export default function MultipleSelectPlaceholder() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [personName, setPersonName] = React.useState([]);
 
@@ -88,4 +89,5 @@ export default function MultipleSelectPlaceholder() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/multiple-placeholder/index.ts b/docs/data/material/components/selects/demos/multiple-placeholder/index.ts
new file mode 100644
index 00000000000000..1b086e2e4f8b31
--- /dev/null
+++ b/docs/data/material/components/selects/demos/multiple-placeholder/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultipleSelectPlaceholder from './MultipleSelectPlaceholder';
+
+export default createDemo(import.meta.url, MultipleSelectPlaceholder);
diff --git a/docs/data/material/components/selects/MultipleSelect.tsx b/docs/data/material/components/selects/demos/multiple/MultipleSelect.tsx
similarity index 97%
rename from docs/data/material/components/selects/MultipleSelect.tsx
rename to docs/data/material/components/selects/demos/multiple/MultipleSelect.tsx
index 3040a713c096d9..7659af5dc996f7 100644
--- a/docs/data/material/components/selects/MultipleSelect.tsx
+++ b/docs/data/material/components/selects/demos/multiple/MultipleSelect.tsx
@@ -41,6 +41,7 @@ function getStyles(name: string, personName: string[], theme: Theme) {
 }
 
 export default function MultipleSelect() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [personName, setPersonName] = React.useState([]);
 
@@ -80,4 +81,5 @@ export default function MultipleSelect() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/multiple/index.ts b/docs/data/material/components/selects/demos/multiple/index.ts
new file mode 100644
index 00000000000000..fa127730feb633
--- /dev/null
+++ b/docs/data/material/components/selects/demos/multiple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultipleSelect from './MultipleSelect';
+
+export default createDemo(import.meta.url, MultipleSelect);
diff --git a/docs/data/material/components/selects/NativeSelectDemo.tsx b/docs/data/material/components/selects/demos/native-demo/NativeSelectDemo.tsx
similarity index 94%
rename from docs/data/material/components/selects/NativeSelectDemo.tsx
rename to docs/data/material/components/selects/demos/native-demo/NativeSelectDemo.tsx
index 8ffbec6206cc5b..2fcc3c5dbf3a6b 100644
--- a/docs/data/material/components/selects/NativeSelectDemo.tsx
+++ b/docs/data/material/components/selects/demos/native-demo/NativeSelectDemo.tsx
@@ -8,6 +8,7 @@ export default function NativeSelectDemo() {
   const id = React.useId();
   return (
     
+      {/* @focus-start */}
       
         
           Age
@@ -24,6 +25,7 @@ export default function NativeSelectDemo() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/selects/demos/native-demo/index.ts b/docs/data/material/components/selects/demos/native-demo/index.ts
new file mode 100644
index 00000000000000..9e23e00dfe0cb5
--- /dev/null
+++ b/docs/data/material/components/selects/demos/native-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NativeSelectDemo from './NativeSelectDemo';
+
+export default createDemo(import.meta.url, NativeSelectDemo);
diff --git a/docs/data/material/components/selects/SelectOtherProps.tsx b/docs/data/material/components/selects/demos/other-props/SelectOtherProps.tsx
similarity index 98%
rename from docs/data/material/components/selects/SelectOtherProps.tsx
rename to docs/data/material/components/selects/demos/other-props/SelectOtherProps.tsx
index 38720f7494f56b..c320199d7775cd 100644
--- a/docs/data/material/components/selects/SelectOtherProps.tsx
+++ b/docs/data/material/components/selects/demos/other-props/SelectOtherProps.tsx
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function SelectOtherProps() {
+  // @focus-start @padding 1
   const [age, setAge] = React.useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -90,4 +91,5 @@ export default function SelectOtherProps() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/other-props/index.ts b/docs/data/material/components/selects/demos/other-props/index.ts
new file mode 100644
index 00000000000000..1e4c6318885f13
--- /dev/null
+++ b/docs/data/material/components/selects/demos/other-props/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectOtherProps from './SelectOtherProps';
+
+export default createDemo(import.meta.url, SelectOtherProps);
diff --git a/docs/data/material/components/selects/SelectSmall.tsx b/docs/data/material/components/selects/demos/small/SelectSmall.tsx
similarity index 95%
rename from docs/data/material/components/selects/SelectSmall.tsx
rename to docs/data/material/components/selects/demos/small/SelectSmall.tsx
index 0e0f6c78b985bd..7d19fc0a789695 100644
--- a/docs/data/material/components/selects/SelectSmall.tsx
+++ b/docs/data/material/components/selects/demos/small/SelectSmall.tsx
@@ -5,6 +5,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function SelectSmall() {
+  // @focus-start @padding 1
   const [age, setAge] = React.useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -30,4 +31,5 @@ export default function SelectSmall() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/small/index.ts b/docs/data/material/components/selects/demos/small/index.ts
new file mode 100644
index 00000000000000..2e5fefbf0d6dd5
--- /dev/null
+++ b/docs/data/material/components/selects/demos/small/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectSmall from './SelectSmall';
+
+export default createDemo(import.meta.url, SelectSmall);
diff --git a/docs/data/material/components/selects/SelectVariants.tsx b/docs/data/material/components/selects/demos/variants/SelectVariants.tsx
similarity index 98%
rename from docs/data/material/components/selects/SelectVariants.tsx
rename to docs/data/material/components/selects/demos/variants/SelectVariants.tsx
index 023429903898e6..1dfc8201df9547 100644
--- a/docs/data/material/components/selects/SelectVariants.tsx
+++ b/docs/data/material/components/selects/demos/variants/SelectVariants.tsx
@@ -5,6 +5,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 export default function SelectVariants() {
+  // @focus-start @padding 1
   const [age, setAge] = React.useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -64,4 +65,5 @@ export default function SelectVariants() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/selects/demos/variants/index.ts b/docs/data/material/components/selects/demos/variants/index.ts
new file mode 100644
index 00000000000000..6b84059b64e61c
--- /dev/null
+++ b/docs/data/material/components/selects/demos/variants/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectVariants from './SelectVariants';
+
+export default createDemo(import.meta.url, SelectVariants);
diff --git a/docs/data/material/components/selects/selects.md b/docs/data/material/components/selects/selects.md
index c7f4de1697f402..3f45e76aa8a3cf 100644
--- a/docs/data/material/components/selects/selects.md
+++ b/docs/data/material/components/selects/selects.md
@@ -18,7 +18,7 @@ githubSource: packages/mui-material/src/Select
 
 Menus are positioned under their emitting elements, unless they are close to the bottom of the viewport.
 
-{{"demo": "BasicSelect.js"}}
+{{"component": "../data/material/components/selects/demos/basic/index.ts"}}
 
 ## Advanced features
 
@@ -39,7 +39,7 @@ Unlike input components, the `placeholder` prop is not available in Select. To a
 
 ### Variants
 
-{{"demo": "SelectVariants.js"}}
+{{"component": "../data/material/components/selects/demos/variants/index.ts"}}
 
 :::warning
 Note that when using FormControl with the outlined variant of the Select, you need to provide a label in two places: in the InputLabel component and in the `label` prop of the Select component (see the above demo). This is needed for the label floating animation to work correctly.
@@ -49,26 +49,26 @@ Note that when using FormControl with the outlined variant of the Select, you ne
 
 Select always needs an accessible name. This can come from an associated visible label, such as an `InputLabel` linked to the `Select` with `labelId` or from adding an `aria-label` prop to the input element props (`inputProps`). If more information is needed, provide a helper text element and link it to the `Select` using `aria-describedby`.
 
-{{"demo": "SelectLabels.js"}}
+{{"component": "../data/material/components/selects/demos/labels/index.ts"}}
 
 ### Auto width
 
-{{"demo": "SelectAutoWidth.js"}}
+{{"component": "../data/material/components/selects/demos/auto-width/index.ts"}}
 
 ### Small Size
 
-{{"demo": "SelectSmall.js"}}
+{{"component": "../data/material/components/selects/demos/small/index.ts"}}
 
 ### Other props
 
-{{"demo": "SelectOtherProps.js"}}
+{{"component": "../data/material/components/selects/demos/other-props/index.ts"}}
 
 ## Native select
 
 As the user experience can be improved on mobile using the native select of the platform,
 we allow such pattern.
 
-{{"demo": "NativeSelectDemo.js"}}
+{{"component": "../data/material/components/selects/demos/native-demo/index.ts"}}
 
 ## TextField
 
@@ -84,7 +84,7 @@ The first step is to style the `InputBase` component.
 Once it's styled, you can either use it directly as a text field or provide it to the select `input` prop to have a `select` field.
 Notice that the `"standard"` variant is easier to customize, since it does not wrap the contents in a `fieldset`/`legend` markup.
 
-{{"demo": "CustomizedSelects.js"}}
+{{"component": "../data/material/components/selects/demos/customized/index.ts"}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/select).
 
@@ -97,25 +97,25 @@ Like with the single selection, you can pull out the new value by accessing `eve
 
 ### Default
 
-{{"demo": "MultipleSelect.js"}}
+{{"component": "../data/material/components/selects/demos/multiple/index.ts"}}
 
 ### Selection indicators
 
 This example demonstrates how icons are used to indicate the selection state of each item in the listbox.
 
-{{"demo": "MultipleSelectCheckmarks.js"}}
+{{"component": "../data/material/components/selects/demos/multiple-checkmarks/index.ts"}}
 
 ### Chip
 
-{{"demo": "MultipleSelectChip.js"}}
+{{"component": "../data/material/components/selects/demos/multiple-chip/index.ts"}}
 
 ### Placeholder
 
-{{"demo": "MultipleSelectPlaceholder.js"}}
+{{"component": "../data/material/components/selects/demos/multiple-placeholder/index.ts"}}
 
 ### Native
 
-{{"demo": "MultipleSelectNative.js"}}
+{{"component": "../data/material/components/selects/demos/multiple-native/index.ts"}}
 
 ## Controlling the open state
 
@@ -129,19 +129,19 @@ You can control the open state of the select with the `open` prop. Alternatively
 Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
 
-{{"demo": "ControlledOpenSelect.js"}}
+{{"component": "../data/material/components/selects/demos/controlled-open/index.ts"}}
 
 ## With a dialog
 
 While it's discouraged by the Material Design guidelines, you can use a select inside a dialog.
 
-{{"demo": "DialogSelect.js"}}
+{{"component": "../data/material/components/selects/demos/dialog/index.ts"}}
 
 ## Grouping
 
 Display categories with the `ListSubheader` component or the native `` element.
 
-{{"demo": "GroupedSelect.js"}}
+{{"component": "../data/material/components/selects/demos/grouped/index.ts"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/skeleton/Animations.js b/docs/data/material/components/skeleton/Animations.js
deleted file mode 100644
index 8ad3465e7493c2..00000000000000
--- a/docs/data/material/components/skeleton/Animations.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Box from '@mui/material/Box';
-import Skeleton from '@mui/material/Skeleton';
-
-export default function Animations() {
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/skeleton/Animations.tsx.preview b/docs/data/material/components/skeleton/Animations.tsx.preview
deleted file mode 100644
index 182e0436a1c966..00000000000000
--- a/docs/data/material/components/skeleton/Animations.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js
deleted file mode 100644
index 3d32456125fa77..00000000000000
--- a/docs/data/material/components/skeleton/Facebook.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Avatar from '@mui/material/Avatar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import Skeleton from '@mui/material/Skeleton';
-
-function Media(props) {
-  const { loading = false } = props;
-
-  return (
-    
-      
-          ) : (
-            
-          )
-        }
-        action={
-          loading ? null : (
-            
-              
-            
-          )
-        }
-        title={
-          loading ? (
-            
-          ) : (
-            'Ted'
-          )
-        }
-        subheader={
-          loading ? (
-            
-          ) : (
-            '5 hours ago'
-          )
-        }
-      />
-      {loading ? (
-        
-      ) : (
-        
-      )}
-      
-        {loading ? (
-          
-            
-            
-          
-        ) : (
-          
-            {
-              "Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:"
-            }
-          
-        )}
-      
-    
-  );
-}
-
-Media.propTypes = {
-  loading: PropTypes.bool,
-};
-
-export default function Facebook() {
-  return (
-    
    
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/skeleton/Facebook.tsx.preview b/docs/data/material/components/skeleton/Facebook.tsx.preview
deleted file mode 100644
index 98c81533a5154d..00000000000000
--- a/docs/data/material/components/skeleton/Facebook.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.js b/docs/data/material/components/skeleton/SkeletonChildren.js
deleted file mode 100644
index 4e95d3f09d3e1e..00000000000000
--- a/docs/data/material/components/skeleton/SkeletonChildren.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
-import Grid from '@mui/material/Grid';
-import Skeleton from '@mui/material/Skeleton';
-
-const Image = styled('img')({
-  width: '100%',
-});
-
-function SkeletonChildrenDemo(props) {
-  const { loading = false } = props;
-
-  return (
-    
    
-      
-        
-          {loading ? (
-            
-              
-            
-          ) : (
-            
-          )}
-        
-        
-          {loading ? (
-            
-              .
-            
-          ) : (
-            Ted
-          )}
-        
-      
-      {loading ? (
-        
-          
    
-        
-      ) : (
-        
-      )}
-    
    
-  );
-}
-
-SkeletonChildrenDemo.propTypes = {
-  loading: PropTypes.bool,
-};
-
-export default function SkeletonChildren() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview b/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview
deleted file mode 100644
index 0463b633476667..00000000000000
--- a/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-    
-  
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js
deleted file mode 100644
index 3d1abfa95cddd8..00000000000000
--- a/docs/data/material/components/skeleton/SkeletonColor.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Skeleton from '@mui/material/Skeleton';
-import Box from '@mui/material/Box';
-
-export default function SkeletonColor() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
deleted file mode 100644
index 47ff5795e47d3c..00000000000000
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/SkeletonTypography.js b/docs/data/material/components/skeleton/SkeletonTypography.js
deleted file mode 100644
index 4baf0ecb5943c9..00000000000000
--- a/docs/data/material/components/skeleton/SkeletonTypography.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Typography from '@mui/material/Typography';
-import PropTypes from 'prop-types';
-import Skeleton from '@mui/material/Skeleton';
-import Grid from '@mui/material/Grid';
-
-const variants = ['h1', 'h3', 'body1', 'caption'];
-
-function TypographyDemo(props) {
-  const { loading = false } = props;
-
-  return (
-    
    
-      {variants.map((variant) => (
-        
-          {loading ?  : variant}
-        
-      ))}
-    
    
-  );
-}
-
-TypographyDemo.propTypes = {
-  loading: PropTypes.bool,
-};
-
-export default function SkeletonTypography() {
-  return (
-    
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview b/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview
deleted file mode 100644
index 06037c529af923..00000000000000
--- a/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-    
-  
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
deleted file mode 100644
index 1ba6576f1aaec2..00000000000000
--- a/docs/data/material/components/skeleton/Variants.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Variants() {
-  return (
-    
-      {/* For variant="text", adjust the height via font-size */}
-      
-      {/* For other variants, adjust the size with `width` and `height` */}
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/skeleton/Variants.tsx.preview b/docs/data/material/components/skeleton/Variants.tsx.preview
deleted file mode 100644
index 8b1bb76eaa17b2..00000000000000
--- a/docs/data/material/components/skeleton/Variants.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-{/* For variant="text", adjust the height via font-size */}
-
-
-{/* For other variants, adjust the size with `width` and `height` */}
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js
deleted file mode 100644
index 83da2af1317673..00000000000000
--- a/docs/data/material/components/skeleton/YouTube.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import Grid from '@mui/material/Grid';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Skeleton from '@mui/material/Skeleton';
-
-const data = [
-  {
-    src: 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ',
-    title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
-    channel: 'Don Diablo',
-    views: '396k views',
-    createdAt: 'a week ago',
-  },
-  {
-    src: 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA',
-    title: 'Queen - Greatest Hits',
-    channel: 'Queen Official',
-    views: '40M views',
-    createdAt: '3 years ago',
-  },
-  {
-    src: 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw',
-    title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
-    channel: 'Calvin Harris',
-    views: '130M views',
-    createdAt: '10 months ago',
-  },
-];
-
-function Media(props) {
-  const { loading = false } = props;
-
-  return (
-    
-      {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
-        
-          {item ? (
-            {item.title}
-          ) : (
-            
-          )}
-          {item ? (
-            
-              
-                {item.title}
-              
-              
-                {item.channel}
-              
-              
-                {`${item.views} • ${item.createdAt}`}
-              
-            
-          ) : (
-            
-              
-              
-            
-          )}
-        
-      ))}
-    
-  );
-}
-
-Media.propTypes = {
-  loading: PropTypes.bool,
-};
-
-export default function YouTube() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/skeleton/YouTube.tsx.preview b/docs/data/material/components/skeleton/YouTube.tsx.preview
deleted file mode 100644
index 98c81533a5154d..00000000000000
--- a/docs/data/material/components/skeleton/YouTube.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Animations.tsx b/docs/data/material/components/skeleton/demos/animations/Animations.tsx
similarity index 84%
rename from docs/data/material/components/skeleton/Animations.tsx
rename to docs/data/material/components/skeleton/demos/animations/Animations.tsx
index 8ad3465e7493c2..33ab8e02dad07e 100644
--- a/docs/data/material/components/skeleton/Animations.tsx
+++ b/docs/data/material/components/skeleton/demos/animations/Animations.tsx
@@ -4,9 +4,11 @@ import Skeleton from '@mui/material/Skeleton';
 export default function Animations() {
   return (
     
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/skeleton/demos/animations/index.ts b/docs/data/material/components/skeleton/demos/animations/index.ts
new file mode 100644
index 00000000000000..efb668dc586452
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/animations/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Animations from './Animations';
+
+export default createDemo(import.meta.url, Animations);
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/demos/children/SkeletonChildren.tsx
similarity index 97%
rename from docs/data/material/components/skeleton/SkeletonChildren.tsx
rename to docs/data/material/components/skeleton/demos/children/SkeletonChildren.tsx
index 166f2082e57a8c..bebce8a4992c69 100644
--- a/docs/data/material/components/skeleton/SkeletonChildren.tsx
+++ b/docs/data/material/components/skeleton/demos/children/SkeletonChildren.tsx
@@ -49,6 +49,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
 }
 
 export default function SkeletonChildren() {
+  // @focus-start @padding 1
   return (
     
       
@@ -59,4 +60,5 @@ export default function SkeletonChildren() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/skeleton/demos/children/index.ts b/docs/data/material/components/skeleton/demos/children/index.ts
new file mode 100644
index 00000000000000..c9d34b9b166be3
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/children/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SkeletonChildren from './SkeletonChildren';
+
+export default createDemo(import.meta.url, SkeletonChildren);
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/demos/color/SkeletonColor.tsx
similarity index 89%
rename from docs/data/material/components/skeleton/SkeletonColor.tsx
rename to docs/data/material/components/skeleton/demos/color/SkeletonColor.tsx
index 3d1abfa95cddd8..ae1329e27e9fcb 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx
+++ b/docs/data/material/components/skeleton/demos/color/SkeletonColor.tsx
@@ -12,12 +12,14 @@ export default function SkeletonColor() {
         justifyContent: 'center',
       }}
     >
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/skeleton/demos/color/index.ts b/docs/data/material/components/skeleton/demos/color/index.ts
new file mode 100644
index 00000000000000..947d55d69a4c9e
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SkeletonColor from './SkeletonColor';
+
+export default createDemo(import.meta.url, SkeletonColor);
diff --git a/docs/data/material/components/skeleton/Facebook.tsx b/docs/data/material/components/skeleton/demos/facebook/Facebook.tsx
similarity index 98%
rename from docs/data/material/components/skeleton/Facebook.tsx
rename to docs/data/material/components/skeleton/demos/facebook/Facebook.tsx
index dd5ff4e4c68eb1..9dd03e46136b43 100644
--- a/docs/data/material/components/skeleton/Facebook.tsx
+++ b/docs/data/material/components/skeleton/demos/facebook/Facebook.tsx
@@ -87,8 +87,10 @@ function Media(props: MediaProps) {
 export default function Facebook() {
   return (
     
    
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/skeleton/demos/facebook/index.ts b/docs/data/material/components/skeleton/demos/facebook/index.ts
new file mode 100644
index 00000000000000..88f2ddc8e12f29
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/facebook/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Facebook from './Facebook';
+
+export default createDemo(import.meta.url, Facebook);
diff --git a/docs/data/material/components/skeleton/SkeletonTypography.tsx b/docs/data/material/components/skeleton/demos/typography/SkeletonTypography.tsx
similarity index 94%
rename from docs/data/material/components/skeleton/SkeletonTypography.tsx
rename to docs/data/material/components/skeleton/demos/typography/SkeletonTypography.tsx
index f6b9b1bba8748b..bad6144a86b768 100644
--- a/docs/data/material/components/skeleton/SkeletonTypography.tsx
+++ b/docs/data/material/components/skeleton/demos/typography/SkeletonTypography.tsx
@@ -24,6 +24,7 @@ function TypographyDemo(props: { loading?: boolean }) {
 }
 
 export default function SkeletonTypography() {
+  // @focus-start @padding 1
   return (
     
       
@@ -34,4 +35,5 @@ export default function SkeletonTypography() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/skeleton/demos/typography/index.ts b/docs/data/material/components/skeleton/demos/typography/index.ts
new file mode 100644
index 00000000000000..2182d27a34df05
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/typography/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SkeletonTypography from './SkeletonTypography';
+
+export default createDemo(import.meta.url, SkeletonTypography);
diff --git a/docs/data/material/components/skeleton/Variants.tsx b/docs/data/material/components/skeleton/demos/variants/Variants.tsx
similarity index 91%
rename from docs/data/material/components/skeleton/Variants.tsx
rename to docs/data/material/components/skeleton/demos/variants/Variants.tsx
index 5d3af8094b8851..6fc4ac14286837 100644
--- a/docs/data/material/components/skeleton/Variants.tsx
+++ b/docs/data/material/components/skeleton/demos/variants/Variants.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 export default function Variants() {
   return (
     
+      {/* @focus-start */}
       {/* For variant="text", adjust the height via font-size */}
       
 
@@ -11,6 +12,7 @@ export default function Variants() {
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/skeleton/demos/variants/index.ts b/docs/data/material/components/skeleton/demos/variants/index.ts
new file mode 100644
index 00000000000000..961e786210539c
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/variants/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Variants from './Variants';
+
+export default createDemo(import.meta.url, Variants);
diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/demos/you-tube/YouTube.tsx
similarity index 97%
rename from docs/data/material/components/skeleton/YouTube.tsx
rename to docs/data/material/components/skeleton/demos/you-tube/YouTube.tsx
index ac2edaed9dad57..09f5309e26e0cf 100644
--- a/docs/data/material/components/skeleton/YouTube.tsx
+++ b/docs/data/material/components/skeleton/demos/you-tube/YouTube.tsx
@@ -77,8 +77,10 @@ function Media(props: MediaProps) {
 export default function YouTube() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/skeleton/demos/you-tube/index.ts b/docs/data/material/components/skeleton/demos/you-tube/index.ts
new file mode 100644
index 00000000000000..a3910a4014abc4
--- /dev/null
+++ b/docs/data/material/components/skeleton/demos/you-tube/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import YouTube from './YouTube';
+
+export default createDemo(import.meta.url, YouTube);
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
index c5ba8a847ea1f1..54872e3af097fd 100644
--- a/docs/data/material/components/skeleton/skeleton.md
+++ b/docs/data/material/components/skeleton/skeleton.md
@@ -43,21 +43,21 @@ The component supports 4 shape variants:
 - `text` (default): represents a single line of text (you can adjust the height via font size).
 - `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
 
-{{"demo": "Variants.js"}}
+{{"component": "../data/material/components/skeleton/demos/variants/index.ts"}}
 
 ## Animations
 
 By default, the skeleton pulsates, but you can change the animation to a wave or disable it entirely.
 
-{{"demo": "Animations.js"}}
+{{"component": "../data/material/components/skeleton/demos/animations/index.ts"}}
 
 ### Pulsate example
 
-{{"demo": "YouTube.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/skeleton/demos/you-tube/index.ts", "defaultCodeOpen": false}}
 
 ### Wave example
 
-{{"demo": "Facebook.js", "defaultCodeOpen": false, "bg": true}}
+{{"component": "../data/material/components/skeleton/demos/facebook/index.ts", "defaultCodeOpen": false, "bg": true}}
 
 ## Inferring dimensions
 
@@ -69,7 +69,7 @@ It works well when it comes to typography as its height is set using `em` units.
 {loading ?  : 'h1'}
 ```
 
-{{"demo": "SkeletonTypography.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/skeleton/demos/typography/index.ts", "defaultCodeOpen": false}}
 
 But when it comes to other components, you may not want to repeat the width and
 height. In these instances, you can pass `children` and it will
@@ -85,14 +85,14 @@ loading ? (
 );
 ```
 
-{{"demo": "SkeletonChildren.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/skeleton/demos/children/index.ts", "defaultCodeOpen": false}}
 
 ## Color
 
 The color of the component can be customized by changing its `background-color` CSS property.
 This is especially useful when on a black background (as the skeleton will otherwise be invisible).
 
-{{"demo": "SkeletonColor.js", "bg": "inline"}}
+{{"component": "../data/material/components/skeleton/demos/color/index.ts", "bg": "inline"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/slider/ColorSlider.js b/docs/data/material/components/slider/ColorSlider.js
deleted file mode 100644
index dae7fd90359e5a..00000000000000
--- a/docs/data/material/components/slider/ColorSlider.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function ColorSlider() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/ColorSlider.tsx.preview b/docs/data/material/components/slider/ColorSlider.tsx.preview
deleted file mode 100644
index b7b178746431e4..00000000000000
--- a/docs/data/material/components/slider/ColorSlider.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/ContinuousSlider.js b/docs/data/material/components/slider/ContinuousSlider.js
deleted file mode 100644
index ffaeea46d1e1b3..00000000000000
--- a/docs/data/material/components/slider/ContinuousSlider.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Slider from '@mui/material/Slider';
-import VolumeDown from '@mui/icons-material/VolumeDown';
-import VolumeUp from '@mui/icons-material/VolumeUp';
-
-export default function ContinuousSlider() {
-  const [value, setValue] = React.useState(30);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/ContinuousSlider.tsx.preview b/docs/data/material/components/slider/ContinuousSlider.tsx.preview
deleted file mode 100644
index 7a74aebbc99028..00000000000000
--- a/docs/data/material/components/slider/ContinuousSlider.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-  
-  
-  
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/CustomMarks.js b/docs/data/material/components/slider/CustomMarks.js
deleted file mode 100644
index f32f5f9c3e2075..00000000000000
--- a/docs/data/material/components/slider/CustomMarks.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-import Typography from '@mui/material/Typography';
-
-const MAX = 100;
-const MIN = 0;
-const marks = [
-  {
-    value: MIN,
-    label: '',
-  },
-  {
-    value: MAX,
-    label: '',
-  },
-];
-
-export default function CustomMarks() {
-  const [val, setVal] = React.useState(MIN);
-  const handleChange = (_, newValue) => {
-    setVal(newValue);
-  };
-
-  return (
-    
-      
-      
-         setVal(MIN)}
-          sx={{ cursor: 'pointer' }}
-        >
-          {MIN} min
-        
-         setVal(MAX)}
-          sx={{ cursor: 'pointer' }}
-        >
-          {MAX} max
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js
deleted file mode 100644
index c3292d12ff1419..00000000000000
--- a/docs/data/material/components/slider/CustomizedSlider.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Slider, { SliderThumb } from '@mui/material/Slider';
-import { styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import Box from '@mui/material/Box';
-
-function ValueLabelComponent(props) {
-  const { children, value } = props;
-
-  return (
-    
-      {children}
-    
-  );
-}
-
-ValueLabelComponent.propTypes = {
-  children: PropTypes.element.isRequired,
-  value: PropTypes.node,
-};
-
-const iOSBoxShadow =
-  '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)';
-
-const IOSSlider = styled(Slider)(({ theme }) => ({
-  color: '#007bff',
-  height: 5,
-  padding: '15px 0',
-  '& .MuiSlider-thumb': {
-    height: 20,
-    width: 20,
-    backgroundColor: '#fff',
-    boxShadow: '0 0 2px 0px rgba(0, 0, 0, 0.1)',
-    '&:focus, &:hover, &.Mui-active': {
-      boxShadow: '0px 0px 3px 1px rgba(0, 0, 0, 0.1)',
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        boxShadow: iOSBoxShadow,
-      },
-    },
-    '&:before': {
-      boxShadow:
-        '0px 0px 1px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.12)',
-    },
-  },
-  '& .MuiSlider-valueLabel': {
-    fontSize: 12,
-    fontWeight: 'normal',
-    top: -6,
-    backgroundColor: 'unset',
-    color: theme.palette.text.primary,
-    '&::before': {
-      display: 'none',
-    },
-    '& *': {
-      background: 'transparent',
-      color: '#000',
-      ...theme.applyStyles('dark', {
-        color: '#fff',
-      }),
-    },
-  },
-  '& .MuiSlider-track': {
-    border: 'none',
-    height: 5,
-  },
-  '& .MuiSlider-rail': {
-    opacity: 0.5,
-    boxShadow: 'inset 0px 0px 4px -2px #000',
-    backgroundColor: '#d0d0d0',
-  },
-  ...theme.applyStyles('dark', {
-    color: '#0a84ff',
-  }),
-}));
-
-const PrettoSlider = styled(Slider)({
-  color: '#52af77',
-  height: 8,
-  '& .MuiSlider-track': {
-    border: 'none',
-  },
-  '& .MuiSlider-thumb': {
-    height: 24,
-    width: 24,
-    backgroundColor: '#fff',
-    border: '2px solid currentColor',
-    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
-      boxShadow: 'inherit',
-    },
-    '&::before': {
-      display: 'none',
-    },
-  },
-  '& .MuiSlider-valueLabel': {
-    lineHeight: 1.2,
-    fontSize: 12,
-    background: 'unset',
-    padding: 0,
-    width: 32,
-    height: 32,
-    borderRadius: '50% 50% 50% 0',
-    backgroundColor: '#52af77',
-    transformOrigin: 'bottom left',
-    transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
-    '&::before': { display: 'none' },
-    '&.MuiSlider-valueLabelOpen': {
-      transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
-    },
-    '& > *': {
-      transform: 'rotate(45deg)',
-    },
-  },
-});
-
-const AirbnbSlider = styled(Slider)(({ theme }) => ({
-  color: '#3a8589',
-  height: 3,
-  padding: '13px 0',
-  '& .MuiSlider-thumb': {
-    height: 27,
-    width: 27,
-    backgroundColor: '#fff',
-    border: '1px solid currentColor',
-    '&:hover': {
-      boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
-    },
-    '& .airbnb-bar': {
-      height: 9,
-      width: 1,
-      backgroundColor: 'currentColor',
-      marginLeft: 1,
-      marginRight: 1,
-    },
-  },
-  '& .MuiSlider-track': {
-    height: 3,
-  },
-  '& .MuiSlider-rail': {
-    color: '#d8d8d8',
-    opacity: 1,
-    height: 3,
-    ...theme.applyStyles('dark', {
-      color: '#bfbfbf',
-      opacity: undefined,
-    }),
-  },
-}));
-
-function AirbnbThumbComponent(props) {
-  const { children, ...other } = props;
-  return (
-    
-      {children}
-      
-      
-      
-    
-  );
-}
-
-AirbnbThumbComponent.propTypes = {
-  children: PropTypes.node,
-};
-
-export default function CustomizedSlider() {
-  return (
-    
-      iOS
-      
-      
-      pretto.fr
-      
-      
-      Tooltip value label
-      
-      
-      Airbnb
-       (index === 0 ? 'Minimum price' : 'Maximum price')}
-        defaultValue={[20, 40]}
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/slider/DiscreteSlider.js b/docs/data/material/components/slider/DiscreteSlider.js
deleted file mode 100644
index 9b9970a3ab01aa..00000000000000
--- a/docs/data/material/components/slider/DiscreteSlider.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSlider() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/DiscreteSlider.tsx.preview b/docs/data/material/components/slider/DiscreteSlider.tsx.preview
deleted file mode 100644
index 44207ee5458b9e..00000000000000
--- a/docs/data/material/components/slider/DiscreteSlider.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/DiscreteSliderLabel.js b/docs/data/material/components/slider/DiscreteSliderLabel.js
deleted file mode 100644
index 78324e4faec0e7..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderLabel.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderLabel() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview b/docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview
deleted file mode 100644
index a087f58db02bd7..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/DiscreteSliderMarks.js b/docs/data/material/components/slider/DiscreteSliderMarks.js
deleted file mode 100644
index 46b6ca397b9e91..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderMarks.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderMarks() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview b/docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview
deleted file mode 100644
index e2a243d029e4c5..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/DiscreteSliderSteps.js b/docs/data/material/components/slider/DiscreteSliderSteps.js
deleted file mode 100644
index 4809b0601f25a5..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderSteps.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderSteps() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview b/docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview
deleted file mode 100644
index 2c1a1ca41eeeda..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/DiscreteSliderValues.js b/docs/data/material/components/slider/DiscreteSliderValues.js
deleted file mode 100644
index 8537e6d63d0347..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderValues.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderValues() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/DiscreteSliderValues.tsx.preview b/docs/data/material/components/slider/DiscreteSliderValues.tsx.preview
deleted file mode 100644
index 6b150f284a051f..00000000000000
--- a/docs/data/material/components/slider/DiscreteSliderValues.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/InputSlider.js b/docs/data/material/components/slider/InputSlider.js
deleted file mode 100644
index 55fd60e3efecb1..00000000000000
--- a/docs/data/material/components/slider/InputSlider.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-import MuiInput from '@mui/material/Input';
-import VolumeUp from '@mui/icons-material/VolumeUp';
-
-const Input = styled(MuiInput)`
-  width: 42px;
-`;
-
-export default function InputSlider() {
-  const [value, setValue] = React.useState(30);
-
-  const handleSliderChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  const handleInputChange = (event) => {
-    setValue(event.target.value === '' ? 0 : Number(event.target.value));
-  };
-
-  const handleBlur = () => {
-    if (value < 0) {
-      setValue(0);
-    } else if (value > 100) {
-      setValue(100);
-    }
-  };
-
-  return (
-    
-      
-        Volume
-      
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/MinimumDistanceSlider.js b/docs/data/material/components/slider/MinimumDistanceSlider.js
deleted file mode 100644
index 2bc6e4341d8063..00000000000000
--- a/docs/data/material/components/slider/MinimumDistanceSlider.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-const minDistance = 10;
-
-export default function MinimumDistanceSlider() {
-  const [value1, setValue1] = React.useState([20, 37]);
-
-  const handleChange1 = (event, newValue, activeThumb) => {
-    if (activeThumb === 0) {
-      setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
-    } else {
-      setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]);
-    }
-  };
-
-  const [value2, setValue2] = React.useState([20, 37]);
-
-  const handleChange2 = (event, newValue, activeThumb) => {
-    if (newValue[1] - newValue[0] < minDistance) {
-      if (activeThumb === 0) {
-        const clamped = Math.min(newValue[0], 100 - minDistance);
-        setValue2([clamped, clamped + minDistance]);
-      } else {
-        const clamped = Math.max(newValue[1], minDistance);
-        setValue2([clamped - minDistance, clamped]);
-      }
-    } else {
-      setValue2(newValue);
-    }
-  };
-
-  return (
-    
-       'Minimum distance'}
-        value={value1}
-        onChange={handleChange1}
-        valueLabelDisplay="auto"
-        getAriaValueText={valuetext}
-        disableSwap
-      />
-       'Minimum distance shift'}
-        value={value2}
-        onChange={handleChange2}
-        valueLabelDisplay="auto"
-        getAriaValueText={valuetext}
-        disableSwap
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview b/docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview
deleted file mode 100644
index cb6e409f5ab4e9..00000000000000
--- a/docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
- 'Minimum distance'}
-  value={value1}
-  onChange={handleChange1}
-  valueLabelDisplay="auto"
-  getAriaValueText={valuetext}
-  disableSwap
-/>
- 'Minimum distance shift'}
-  value={value2}
-  onChange={handleChange2}
-  valueLabelDisplay="auto"
-  getAriaValueText={valuetext}
-  disableSwap
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js
deleted file mode 100644
index 145bbc2beed973..00000000000000
--- a/docs/data/material/components/slider/MusicPlayerSlider.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import PauseRounded from '@mui/icons-material/PauseRounded';
-import PlayArrowRounded from '@mui/icons-material/PlayArrowRounded';
-import FastForwardRounded from '@mui/icons-material/FastForwardRounded';
-import FastRewindRounded from '@mui/icons-material/FastRewindRounded';
-import VolumeUpRounded from '@mui/icons-material/VolumeUpRounded';
-import VolumeDownRounded from '@mui/icons-material/VolumeDownRounded';
-
-const WallPaper = styled('div')({
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0,
-  overflow: 'hidden',
-  background: 'linear-gradient(rgb(255, 38, 142) 0%, rgb(255, 105, 79) 100%)',
-  transition: 'all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s',
-  '&::before': {
-    content: '""',
-    width: '140%',
-    height: '140%',
-    position: 'absolute',
-    top: '-40%',
-    right: '-50%',
-    background:
-      'radial-gradient(at center center, rgb(62, 79, 249) 0%, rgba(62, 79, 249, 0) 64%)',
-  },
-  '&::after': {
-    content: '""',
-    width: '140%',
-    height: '140%',
-    position: 'absolute',
-    bottom: '-50%',
-    left: '-30%',
-    background:
-      'radial-gradient(at center center, rgb(247, 237, 225) 0%, rgba(247, 237, 225, 0) 70%)',
-    transform: 'rotate(30deg)',
-  },
-});
-
-const Widget = styled('div')(({ theme }) => ({
-  padding: 16,
-  borderRadius: 16,
-  width: 343,
-  maxWidth: '100%',
-  margin: 'auto',
-  position: 'relative',
-  zIndex: 1,
-  backgroundColor: 'rgba(255,255,255,0.4)',
-  backdropFilter: 'blur(40px)',
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'rgba(0,0,0,0.6)',
-  }),
-}));
-
-const CoverImage = styled('div')({
-  width: 100,
-  height: 100,
-  objectFit: 'cover',
-  overflow: 'hidden',
-  flexShrink: 0,
-  borderRadius: 8,
-  backgroundColor: 'rgba(0,0,0,0.08)',
-  '& > img': {
-    width: '100%',
-  },
-});
-
-const TinyText = styled(Typography)({
-  fontSize: '0.75rem',
-  opacity: 0.38,
-  fontWeight: 500,
-  letterSpacing: 0.2,
-});
-
-export default function MusicPlayerSlider() {
-  const duration = 200; // seconds
-  const [position, setPosition] = React.useState(32);
-  const [paused, setPaused] = React.useState(false);
-  function formatDuration(value) {
-    const minute = Math.floor(value / 60);
-    const secondLeft = value - minute * 60;
-    return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`;
-  }
-  return (
-    
-      
-        
-          
-            can't win - Chilling Sunday
-          
-          
-            
-              Jun Pulse
-            
-            
-              คนเก่าเขาทำไว้ดี (Can't win)
-            
-            
-              Chilling Sunday — คนเก่าเขาทำไว้ดี
-            
-          
-        
-         setPosition(value)}
-          sx={(t) => ({
-            color: 'rgba(0,0,0,0.87)',
-            height: 4,
-            '& .MuiSlider-thumb': {
-              width: 8,
-              height: 8,
-              transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
-              '&::before': {
-                boxShadow: '0 2px 12px 0 rgba(0,0,0,0.4)',
-              },
-              '&:hover, &.Mui-focusVisible': {
-                boxShadow: `0px 0px 0px 8px ${'rgb(0 0 0 / 16%)'}`,
-                ...t.applyStyles('dark', {
-                  boxShadow: `0px 0px 0px 8px ${'rgb(255 255 255 / 16%)'}`,
-                }),
-              },
-              '&.Mui-active': {
-                width: 20,
-                height: 20,
-              },
-            },
-            '& .MuiSlider-rail': {
-              opacity: 0.28,
-            },
-            ...t.applyStyles('dark', {
-              color: '#fff',
-            }),
-          })}
-        />
-        
-          {formatDuration(position)}
-          -{formatDuration(duration - position)}
-        
-         ({
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            mt: -1,
-            '& svg': {
-              color: '#000',
-              ...theme.applyStyles('dark', {
-                color: '#fff',
-              }),
-            },
-          })}
-        >
-          
-            
-          
-           setPaused(!paused)}
-          >
-            {paused ? (
-              
-            ) : (
-              
-            )}
-          
-          
-            
-          
-        
-         ({
-            alignItems: 'center',
-            mb: 1,
-            px: 1,
-            '& > svg': {
-              color: 'rgba(0,0,0,0.4)',
-              ...theme.applyStyles('dark', {
-                color: 'rgba(255,255,255,0.4)',
-              }),
-            },
-          })}
-        >
-          
-           ({
-              color: 'rgba(0,0,0,0.87)',
-              '& .MuiSlider-track': {
-                border: 'none',
-              },
-              '& .MuiSlider-thumb': {
-                width: 24,
-                height: 24,
-                backgroundColor: '#fff',
-                '&::before': {
-                  boxShadow: '0 4px 8px rgba(0,0,0,0.4)',
-                },
-                '&:hover, &.Mui-focusVisible, &.Mui-active': {
-                  boxShadow: 'none',
-                },
-              },
-              ...t.applyStyles('dark', {
-                color: '#fff',
-              }),
-            })}
-          />
-          
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/NonLinearSlider.js b/docs/data/material/components/slider/NonLinearSlider.js
deleted file mode 100644
index 8937e8972f9475..00000000000000
--- a/docs/data/material/components/slider/NonLinearSlider.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-
-function valueLabelFormat(value) {
-  const units = ['KB', 'MB', 'GB', 'TB'];
-
-  let unitIndex = 0;
-  let scaledValue = value;
-
-  while (scaledValue >= 1024 && unitIndex < units.length - 1) {
-    unitIndex += 1;
-    scaledValue /= 1024;
-  }
-
-  return `${scaledValue} ${units[unitIndex]}`;
-}
-
-function calculateValue(value) {
-  return 2 ** value;
-}
-
-export default function NonLinearSlider() {
-  const [value, setValue] = React.useState(10);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        Storage: {valueLabelFormat(calculateValue(value))}
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/NonLinearSlider.tsx.preview b/docs/data/material/components/slider/NonLinearSlider.tsx.preview
deleted file mode 100644
index c3477a0865bf1d..00000000000000
--- a/docs/data/material/components/slider/NonLinearSlider.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-  Storage: {valueLabelFormat(calculateValue(value))}
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/RangeSlider.js b/docs/data/material/components/slider/RangeSlider.js
deleted file mode 100644
index 3b80e96778bdbb..00000000000000
--- a/docs/data/material/components/slider/RangeSlider.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function RangeSlider() {
-  const [value, setValue] = React.useState([20, 37]);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-       'Temperature range'}
-        value={value}
-        onChange={handleChange}
-        valueLabelDisplay="auto"
-        getAriaValueText={valuetext}
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/slider/RangeSlider.tsx.preview b/docs/data/material/components/slider/RangeSlider.tsx.preview
deleted file mode 100644
index 208db139a37cd2..00000000000000
--- a/docs/data/material/components/slider/RangeSlider.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
- 'Temperature range'}
-  value={value}
-  onChange={handleChange}
-  valueLabelDisplay="auto"
-  getAriaValueText={valuetext}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/slider/SliderSizes.js b/docs/data/material/components/slider/SliderSizes.js
deleted file mode 100644
index 85c868e49f46fb..00000000000000
--- a/docs/data/material/components/slider/SliderSizes.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-export default function SliderSizes() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/SliderSizes.tsx.preview b/docs/data/material/components/slider/SliderSizes.tsx.preview
deleted file mode 100644
index f1bfcf4b0f9a13..00000000000000
--- a/docs/data/material/components/slider/SliderSizes.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/slider/TrackFalseSlider.js b/docs/data/material/components/slider/TrackFalseSlider.js
deleted file mode 100644
index d9923a1adcb930..00000000000000
--- a/docs/data/material/components/slider/TrackFalseSlider.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-
-const Separator = styled('div')(
-  ({ theme }) => `
-  height: ${theme.spacing(3)};
-`,
-);
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function TrackFalseSlider() {
-  const id = React.useId();
-  const rangeId = React.useId();
-  return (
-    
-      
-        Removed track
-      
-      
-      
-      
-        Removed track range slider
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/TrackInvertedSlider.js b/docs/data/material/components/slider/TrackInvertedSlider.js
deleted file mode 100644
index 3dc2d778e26927..00000000000000
--- a/docs/data/material/components/slider/TrackInvertedSlider.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-
-const Separator = styled('div')(
-  ({ theme }) => `
-  height: ${theme.spacing(3)};
-`,
-);
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function TrackInvertedSlider() {
-  return (
-    
-      
-        Inverted track
-      
-      
-      
-      
-        Inverted track range
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/slider/VerticalSlider.js b/docs/data/material/components/slider/VerticalSlider.js
deleted file mode 100644
index 1e25716ca13ba3..00000000000000
--- a/docs/data/material/components/slider/VerticalSlider.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Slider from '@mui/material/Slider';
-
-export default function VerticalSlider() {
-  return (
-    
-      
-      
-       'Temperature'}
-        orientation="vertical"
-        getAriaValueText={getAriaValueText}
-        defaultValue={[20, 37]}
-        valueLabelDisplay="auto"
-        marks={marks}
-      />
-    
-  );
-}
-
-function getAriaValueText(value) {
-  return `${value}°C`;
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
diff --git a/docs/data/material/components/slider/ColorSlider.tsx b/docs/data/material/components/slider/demos/color/ColorSlider.tsx
similarity index 88%
rename from docs/data/material/components/slider/ColorSlider.tsx
rename to docs/data/material/components/slider/demos/color/ColorSlider.tsx
index 58d6d40badc927..f3f053f4141530 100644
--- a/docs/data/material/components/slider/ColorSlider.tsx
+++ b/docs/data/material/components/slider/demos/color/ColorSlider.tsx
@@ -8,12 +8,14 @@ function valuetext(value: number) {
 export default function ColorSlider() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/color/index.ts b/docs/data/material/components/slider/demos/color/index.ts
new file mode 100644
index 00000000000000..5378fa4cbef5fc
--- /dev/null
+++ b/docs/data/material/components/slider/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorSlider from './ColorSlider';
+
+export default createDemo(import.meta.url, ColorSlider);
diff --git a/docs/data/material/components/slider/ContinuousSlider.tsx b/docs/data/material/components/slider/demos/continuous/ContinuousSlider.tsx
similarity index 93%
rename from docs/data/material/components/slider/ContinuousSlider.tsx
rename to docs/data/material/components/slider/demos/continuous/ContinuousSlider.tsx
index f9dee3cebed908..afa1941f13d51f 100644
--- a/docs/data/material/components/slider/ContinuousSlider.tsx
+++ b/docs/data/material/components/slider/demos/continuous/ContinuousSlider.tsx
@@ -14,12 +14,14 @@ export default function ContinuousSlider() {
 
   return (
     
+      {/* @focus-start */}
       
         
         
         
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/continuous/index.ts b/docs/data/material/components/slider/demos/continuous/index.ts
new file mode 100644
index 00000000000000..c0cdbf54ee11be
--- /dev/null
+++ b/docs/data/material/components/slider/demos/continuous/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ContinuousSlider from './ContinuousSlider';
+
+export default createDemo(import.meta.url, ContinuousSlider);
diff --git a/docs/data/material/components/slider/CustomMarks.tsx b/docs/data/material/components/slider/demos/custom-marks/CustomMarks.tsx
similarity index 96%
rename from docs/data/material/components/slider/CustomMarks.tsx
rename to docs/data/material/components/slider/demos/custom-marks/CustomMarks.tsx
index b5824e51201cf7..4bcdc1b0246c38 100644
--- a/docs/data/material/components/slider/CustomMarks.tsx
+++ b/docs/data/material/components/slider/demos/custom-marks/CustomMarks.tsx
@@ -17,6 +17,7 @@ const marks = [
 ];
 
 export default function CustomMarks() {
+  // @focus-start @padding 1
   const [val, setVal] = React.useState(MIN);
   const handleChange = (_: Event, newValue: number) => {
     setVal(newValue);
@@ -51,4 +52,5 @@ export default function CustomMarks() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/slider/demos/custom-marks/index.ts b/docs/data/material/components/slider/demos/custom-marks/index.ts
new file mode 100644
index 00000000000000..493bdbd5c98007
--- /dev/null
+++ b/docs/data/material/components/slider/demos/custom-marks/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomMarks from './CustomMarks';
+
+export default createDemo(import.meta.url, CustomMarks);
diff --git a/docs/data/material/components/slider/CustomizedSlider.tsx b/docs/data/material/components/slider/demos/customized/CustomizedSlider.tsx
similarity index 98%
rename from docs/data/material/components/slider/CustomizedSlider.tsx
rename to docs/data/material/components/slider/demos/customized/CustomizedSlider.tsx
index e0e788c8d6a89f..f4071f475a33a1 100644
--- a/docs/data/material/components/slider/CustomizedSlider.tsx
+++ b/docs/data/material/components/slider/demos/customized/CustomizedSlider.tsx
@@ -160,6 +160,7 @@ function AirbnbThumbComponent(props: AirbnbThumbComponentProps) {
 export default function CustomizedSlider() {
   return (
     
+      {/* @focus-start */}
       iOS
       
       
@@ -186,6 +187,7 @@ export default function CustomizedSlider() {
         getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')}
         defaultValue={[20, 40]}
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/customized/index.ts b/docs/data/material/components/slider/demos/customized/index.ts
new file mode 100644
index 00000000000000..6488b576d92a5f
--- /dev/null
+++ b/docs/data/material/components/slider/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedSlider from './CustomizedSlider';
+
+export default createDemo(import.meta.url, CustomizedSlider);
diff --git a/docs/data/material/components/slider/DiscreteSliderLabel.tsx b/docs/data/material/components/slider/demos/discrete-label/DiscreteSliderLabel.tsx
similarity index 92%
rename from docs/data/material/components/slider/DiscreteSliderLabel.tsx
rename to docs/data/material/components/slider/demos/discrete-label/DiscreteSliderLabel.tsx
index 17ec1dcf44f1ba..519d272d2208ae 100644
--- a/docs/data/material/components/slider/DiscreteSliderLabel.tsx
+++ b/docs/data/material/components/slider/demos/discrete-label/DiscreteSliderLabel.tsx
@@ -27,6 +27,7 @@ function valuetext(value: number) {
 export default function DiscreteSliderLabel() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/discrete-label/index.ts b/docs/data/material/components/slider/demos/discrete-label/index.ts
new file mode 100644
index 00000000000000..b42745adccae48
--- /dev/null
+++ b/docs/data/material/components/slider/demos/discrete-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DiscreteSliderLabel from './DiscreteSliderLabel';
+
+export default createDemo(import.meta.url, DiscreteSliderLabel);
diff --git a/docs/data/material/components/slider/DiscreteSliderMarks.tsx b/docs/data/material/components/slider/demos/discrete-marks/DiscreteSliderMarks.tsx
similarity index 92%
rename from docs/data/material/components/slider/DiscreteSliderMarks.tsx
rename to docs/data/material/components/slider/demos/discrete-marks/DiscreteSliderMarks.tsx
index f51938c55f49c3..d156ff252509ad 100644
--- a/docs/data/material/components/slider/DiscreteSliderMarks.tsx
+++ b/docs/data/material/components/slider/demos/discrete-marks/DiscreteSliderMarks.tsx
@@ -27,6 +27,7 @@ function valuetext(value: number) {
 export default function DiscreteSliderMarks() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/discrete-marks/index.ts b/docs/data/material/components/slider/demos/discrete-marks/index.ts
new file mode 100644
index 00000000000000..de91aece80c108
--- /dev/null
+++ b/docs/data/material/components/slider/demos/discrete-marks/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DiscreteSliderMarks from './DiscreteSliderMarks';
+
+export default createDemo(import.meta.url, DiscreteSliderMarks);
diff --git a/docs/data/material/components/slider/DiscreteSliderSteps.tsx b/docs/data/material/components/slider/demos/discrete-steps/DiscreteSliderSteps.tsx
similarity index 90%
rename from docs/data/material/components/slider/DiscreteSliderSteps.tsx
rename to docs/data/material/components/slider/demos/discrete-steps/DiscreteSliderSteps.tsx
index ecb8f24503e49e..ac3565c7852a83 100644
--- a/docs/data/material/components/slider/DiscreteSliderSteps.tsx
+++ b/docs/data/material/components/slider/demos/discrete-steps/DiscreteSliderSteps.tsx
@@ -8,6 +8,7 @@ function valuetext(value: number) {
 export default function DiscreteSliderSteps() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/discrete-steps/index.ts b/docs/data/material/components/slider/demos/discrete-steps/index.ts
new file mode 100644
index 00000000000000..f8faa0409aeda0
--- /dev/null
+++ b/docs/data/material/components/slider/demos/discrete-steps/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DiscreteSliderSteps from './DiscreteSliderSteps';
+
+export default createDemo(import.meta.url, DiscreteSliderSteps);
diff --git a/docs/data/material/components/slider/DiscreteSliderValues.tsx b/docs/data/material/components/slider/demos/discrete-values/DiscreteSliderValues.tsx
similarity index 92%
rename from docs/data/material/components/slider/DiscreteSliderValues.tsx
rename to docs/data/material/components/slider/demos/discrete-values/DiscreteSliderValues.tsx
index 71caa8ed1f554b..1702ae6f9deca6 100644
--- a/docs/data/material/components/slider/DiscreteSliderValues.tsx
+++ b/docs/data/material/components/slider/demos/discrete-values/DiscreteSliderValues.tsx
@@ -27,6 +27,7 @@ function valuetext(value: number) {
 export default function DiscreteSliderValues() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/discrete-values/index.ts b/docs/data/material/components/slider/demos/discrete-values/index.ts
new file mode 100644
index 00000000000000..570bb4c231c12e
--- /dev/null
+++ b/docs/data/material/components/slider/demos/discrete-values/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DiscreteSliderValues from './DiscreteSliderValues';
+
+export default createDemo(import.meta.url, DiscreteSliderValues);
diff --git a/docs/data/material/components/slider/DiscreteSlider.tsx b/docs/data/material/components/slider/demos/discrete/DiscreteSlider.tsx
similarity index 91%
rename from docs/data/material/components/slider/DiscreteSlider.tsx
rename to docs/data/material/components/slider/demos/discrete/DiscreteSlider.tsx
index e32e9ce436844d..8f8a628c5f5b6a 100644
--- a/docs/data/material/components/slider/DiscreteSlider.tsx
+++ b/docs/data/material/components/slider/demos/discrete/DiscreteSlider.tsx
@@ -8,6 +8,7 @@ function valuetext(value: number) {
 export default function DiscreteSlider() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/discrete/index.ts b/docs/data/material/components/slider/demos/discrete/index.ts
new file mode 100644
index 00000000000000..1ff665968d92d2
--- /dev/null
+++ b/docs/data/material/components/slider/demos/discrete/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DiscreteSlider from './DiscreteSlider';
+
+export default createDemo(import.meta.url, DiscreteSlider);
diff --git a/docs/data/material/components/slider/InputSlider.tsx b/docs/data/material/components/slider/demos/input/InputSlider.tsx
similarity index 97%
rename from docs/data/material/components/slider/InputSlider.tsx
rename to docs/data/material/components/slider/demos/input/InputSlider.tsx
index c6820349ffe53a..4bd5c2ae4bc5a0 100644
--- a/docs/data/material/components/slider/InputSlider.tsx
+++ b/docs/data/material/components/slider/demos/input/InputSlider.tsx
@@ -12,6 +12,7 @@ const Input = styled(MuiInput)`
 `;
 
 export default function InputSlider() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(30);
 
   const handleSliderChange = (event: Event, newValue: number) => {
@@ -64,4 +65,5 @@ export default function InputSlider() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/slider/demos/input/index.ts b/docs/data/material/components/slider/demos/input/index.ts
new file mode 100644
index 00000000000000..c70938775d0dcf
--- /dev/null
+++ b/docs/data/material/components/slider/demos/input/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InputSlider from './InputSlider';
+
+export default createDemo(import.meta.url, InputSlider);
diff --git a/docs/data/material/components/slider/MinimumDistanceSlider.tsx b/docs/data/material/components/slider/demos/minimum-distance/MinimumDistanceSlider.tsx
similarity index 96%
rename from docs/data/material/components/slider/MinimumDistanceSlider.tsx
rename to docs/data/material/components/slider/demos/minimum-distance/MinimumDistanceSlider.tsx
index db05d4a176e7ed..75fb9744a58400 100644
--- a/docs/data/material/components/slider/MinimumDistanceSlider.tsx
+++ b/docs/data/material/components/slider/demos/minimum-distance/MinimumDistanceSlider.tsx
@@ -37,6 +37,7 @@ export default function MinimumDistanceSlider() {
 
   return (
     
+      {/* @focus-start */}
        'Minimum distance'}
         value={value1}
@@ -53,6 +54,7 @@ export default function MinimumDistanceSlider() {
         getAriaValueText={valuetext}
         disableSwap
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/minimum-distance/index.ts b/docs/data/material/components/slider/demos/minimum-distance/index.ts
new file mode 100644
index 00000000000000..d9a885819c1b0b
--- /dev/null
+++ b/docs/data/material/components/slider/demos/minimum-distance/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MinimumDistanceSlider from './MinimumDistanceSlider';
+
+export default createDemo(import.meta.url, MinimumDistanceSlider);
diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/demos/music-player/MusicPlayerSlider.tsx
similarity index 99%
rename from docs/data/material/components/slider/MusicPlayerSlider.tsx
rename to docs/data/material/components/slider/demos/music-player/MusicPlayerSlider.tsx
index ad4bda4ce4bec0..c677d2d40a5468 100644
--- a/docs/data/material/components/slider/MusicPlayerSlider.tsx
+++ b/docs/data/material/components/slider/demos/music-player/MusicPlayerSlider.tsx
@@ -80,6 +80,7 @@ const TinyText = styled(Typography)({
 });
 
 export default function MusicPlayerSlider() {
+  // @focus-start @padding 1
   const duration = 200; // seconds
   const [position, setPosition] = React.useState(32);
   const [paused, setPaused] = React.useState(false);
@@ -238,4 +239,5 @@ export default function MusicPlayerSlider() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/slider/demos/music-player/index.ts b/docs/data/material/components/slider/demos/music-player/index.ts
new file mode 100644
index 00000000000000..4ec31589718121
--- /dev/null
+++ b/docs/data/material/components/slider/demos/music-player/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MusicPlayerSlider from './MusicPlayerSlider';
+
+export default createDemo(import.meta.url, MusicPlayerSlider);
diff --git a/docs/data/material/components/slider/NonLinearSlider.tsx b/docs/data/material/components/slider/demos/non-linear/NonLinearSlider.tsx
similarity index 95%
rename from docs/data/material/components/slider/NonLinearSlider.tsx
rename to docs/data/material/components/slider/demos/non-linear/NonLinearSlider.tsx
index 78acb2fc23eaaf..09dc6b9a17d8cd 100644
--- a/docs/data/material/components/slider/NonLinearSlider.tsx
+++ b/docs/data/material/components/slider/demos/non-linear/NonLinearSlider.tsx
@@ -30,6 +30,7 @@ export default function NonLinearSlider() {
 
   return (
     
+      {/* @focus-start */}
       
         Storage: {valueLabelFormat(calculateValue(value))}
       
@@ -45,6 +46,7 @@ export default function NonLinearSlider() {
         valueLabelDisplay="auto"
         aria-labelledby="non-linear-slider"
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/non-linear/index.ts b/docs/data/material/components/slider/demos/non-linear/index.ts
new file mode 100644
index 00000000000000..a6cffa3a666c7b
--- /dev/null
+++ b/docs/data/material/components/slider/demos/non-linear/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NonLinearSlider from './NonLinearSlider';
+
+export default createDemo(import.meta.url, NonLinearSlider);
diff --git a/docs/data/material/components/slider/RangeSlider.tsx b/docs/data/material/components/slider/demos/range/RangeSlider.tsx
similarity index 92%
rename from docs/data/material/components/slider/RangeSlider.tsx
rename to docs/data/material/components/slider/demos/range/RangeSlider.tsx
index 988e57190c08c4..ff2c5f5b67c59c 100644
--- a/docs/data/material/components/slider/RangeSlider.tsx
+++ b/docs/data/material/components/slider/demos/range/RangeSlider.tsx
@@ -15,6 +15,7 @@ export default function RangeSlider() {
 
   return (
     
+      {/* @focus-start */}
        'Temperature range'}
         value={value}
@@ -22,6 +23,7 @@ export default function RangeSlider() {
         valueLabelDisplay="auto"
         getAriaValueText={valuetext}
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/range/index.ts b/docs/data/material/components/slider/demos/range/index.ts
new file mode 100644
index 00000000000000..2612aa2f59695c
--- /dev/null
+++ b/docs/data/material/components/slider/demos/range/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RangeSlider from './RangeSlider';
+
+export default createDemo(import.meta.url, RangeSlider);
diff --git a/docs/data/material/components/slider/SliderSizes.tsx b/docs/data/material/components/slider/demos/sizes/SliderSizes.tsx
similarity index 88%
rename from docs/data/material/components/slider/SliderSizes.tsx
rename to docs/data/material/components/slider/demos/sizes/SliderSizes.tsx
index 85c868e49f46fb..d52a47435a1fa2 100644
--- a/docs/data/material/components/slider/SliderSizes.tsx
+++ b/docs/data/material/components/slider/demos/sizes/SliderSizes.tsx
@@ -4,6 +4,7 @@ import Slider from '@mui/material/Slider';
 export default function SliderSizes() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/sizes/index.ts b/docs/data/material/components/slider/demos/sizes/index.ts
new file mode 100644
index 00000000000000..e5bfa3070bae59
--- /dev/null
+++ b/docs/data/material/components/slider/demos/sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SliderSizes from './SliderSizes';
+
+export default createDemo(import.meta.url, SliderSizes);
diff --git a/docs/data/material/components/slider/TrackFalseSlider.tsx b/docs/data/material/components/slider/demos/track-false/TrackFalseSlider.tsx
similarity index 96%
rename from docs/data/material/components/slider/TrackFalseSlider.tsx
rename to docs/data/material/components/slider/demos/track-false/TrackFalseSlider.tsx
index 06ccb2f9cd7a49..7dbd5f00cc2ff2 100644
--- a/docs/data/material/components/slider/TrackFalseSlider.tsx
+++ b/docs/data/material/components/slider/demos/track-false/TrackFalseSlider.tsx
@@ -34,6 +34,7 @@ function valuetext(value: number) {
 }
 
 export default function TrackFalseSlider() {
+  // @focus-start @padding 1
   const id = React.useId();
   const rangeId = React.useId();
   return (
@@ -61,4 +62,5 @@ export default function TrackFalseSlider() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/slider/demos/track-false/index.ts b/docs/data/material/components/slider/demos/track-false/index.ts
new file mode 100644
index 00000000000000..2c81a6440dfad4
--- /dev/null
+++ b/docs/data/material/components/slider/demos/track-false/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TrackFalseSlider from './TrackFalseSlider';
+
+export default createDemo(import.meta.url, TrackFalseSlider);
diff --git a/docs/data/material/components/slider/TrackInvertedSlider.tsx b/docs/data/material/components/slider/demos/track-inverted/TrackInvertedSlider.tsx
similarity index 95%
rename from docs/data/material/components/slider/TrackInvertedSlider.tsx
rename to docs/data/material/components/slider/demos/track-inverted/TrackInvertedSlider.tsx
index 7937b89d66ddc7..e38b692d4c3772 100644
--- a/docs/data/material/components/slider/TrackInvertedSlider.tsx
+++ b/docs/data/material/components/slider/demos/track-inverted/TrackInvertedSlider.tsx
@@ -35,6 +35,7 @@ function valuetext(value: number) {
 export default function TrackInvertedSlider() {
   return (
     
+      {/* @focus-start */}
       
         Inverted track
       
@@ -56,6 +57,7 @@ export default function TrackInvertedSlider() {
         defaultValue={[20, 37]}
         marks={marks}
       />
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/track-inverted/index.ts b/docs/data/material/components/slider/demos/track-inverted/index.ts
new file mode 100644
index 00000000000000..86fbec71b16d60
--- /dev/null
+++ b/docs/data/material/components/slider/demos/track-inverted/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TrackInvertedSlider from './TrackInvertedSlider';
+
+export default createDemo(import.meta.url, TrackInvertedSlider);
diff --git a/docs/data/material/components/slider/VerticalSlider.tsx b/docs/data/material/components/slider/demos/vertical/VerticalSlider.tsx
similarity index 95%
rename from docs/data/material/components/slider/VerticalSlider.tsx
rename to docs/data/material/components/slider/demos/vertical/VerticalSlider.tsx
index fe1c321ca43906..5d3fe72e40c698 100644
--- a/docs/data/material/components/slider/VerticalSlider.tsx
+++ b/docs/data/material/components/slider/demos/vertical/VerticalSlider.tsx
@@ -4,6 +4,7 @@ import Slider from '@mui/material/Slider';
 export default function VerticalSlider() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/slider/demos/vertical/index.ts b/docs/data/material/components/slider/demos/vertical/index.ts
new file mode 100644
index 00000000000000..eb728d8d9b5f55
--- /dev/null
+++ b/docs/data/material/components/slider/demos/vertical/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalSlider from './VerticalSlider';
+
+export default createDemo(import.meta.url, VerticalSlider);
diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md
index 3c9306f6cbfb95..38ce99bfdf0e13 100644
--- a/docs/data/material/components/slider/slider.md
+++ b/docs/data/material/components/slider/slider.md
@@ -20,51 +20,51 @@ Sliders reflect a range of values along a bar, from which users may select a sin
 
 Continuous sliders allow users to select a value along a subjective range.
 
-{{"demo": "ContinuousSlider.js"}}
+{{"component": "../data/material/components/slider/demos/continuous/index.ts"}}
 
 ## Sizes
 
 For smaller slider, use the prop `size="small"`.
 
-{{"demo": "SliderSizes.js"}}
+{{"component": "../data/material/components/slider/demos/sizes/index.ts"}}
 
 ## Discrete sliders
 
 Discrete sliders can be adjusted to a specific value by referencing its value indicator.
 You can generate a mark for each step with `marks={true}`.
 
-{{"demo": "DiscreteSlider.js"}}
+{{"component": "../data/material/components/slider/demos/discrete/index.ts"}}
 
 ### Small steps
 
 You can change the default step increment.
 Make sure to adjust the `shiftStep` prop (the granularity with which the slider can step when using Page Up/Down or Shift + Arrow Up/Down) to a value divisible by the `step`.
 
-{{"demo": "DiscreteSliderSteps.js"}}
+{{"component": "../data/material/components/slider/demos/discrete-steps/index.ts"}}
 
 ### Custom marks
 
 You can have custom marks by providing a rich array to the `marks` prop.
 
-{{"demo": "DiscreteSliderMarks.js"}}
+{{"component": "../data/material/components/slider/demos/discrete-marks/index.ts"}}
 
 ### Restricted values
 
 You can restrict the selectable values to those provided with the `marks` prop with `step={null}`.
 
-{{"demo": "DiscreteSliderValues.js"}}
+{{"component": "../data/material/components/slider/demos/discrete-values/index.ts"}}
 
 ### Label always visible
 
 You can force the thumb label to be always visible with `valueLabelDisplay="on"`.
 
-{{"demo": "DiscreteSliderLabel.js"}}
+{{"component": "../data/material/components/slider/demos/discrete-label/index.ts"}}
 
 ## Range slider
 
 The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop.
 
-{{"demo": "RangeSlider.js"}}
+{{"component": "../data/material/components/slider/demos/range/index.ts"}}
 
 ### Minimum distance
 
@@ -72,34 +72,34 @@ You can enforce a minimum distance between values in the `onChange` event handle
 By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with the `disableSwap` prop.
 If you want the range to shift when reaching minimum distance, you can utilize the `activeThumb` parameter in `onChange`.
 
-{{"demo": "MinimumDistanceSlider.js"}}
+{{"component": "../data/material/components/slider/demos/minimum-distance/index.ts"}}
 
 ## Slider with input field
 
 In this example, an input allows a discrete value to be set.
 
-{{"demo": "InputSlider.js"}}
+{{"component": "../data/material/components/slider/demos/input/index.ts"}}
 
 ## Color
 
-{{"demo": "ColorSlider.js"}}
+{{"component": "../data/material/components/slider/demos/color/index.ts"}}
 
 ## Customization
 
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedSlider.js"}}
+{{"component": "../data/material/components/slider/demos/customized/index.ts"}}
 
 ### Music player
 
-{{"demo": "MusicPlayerSlider.js", "bg": "inline"}}
+{{"component": "../data/material/components/slider/demos/music-player/index.ts", "bg": "inline"}}
 
 ## Vertical sliders
 
 Set the `orientation` prop to `"vertical"` to create vertical sliders. The thumb will track vertical movement instead of horizontal movement.
 
-{{"demo": "VerticalSlider.js"}}
+{{"component": "../data/material/components/slider/demos/vertical/index.ts"}}
 
 :::warning
 Chrome versions below 124 implement `aria-orientation` incorrectly for vertical sliders and expose them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841))
@@ -118,7 +118,7 @@ The `-webkit-appearance: slider-vertical` CSS property can be used to correct th
 
 You can customize your slider by adding and repositioning marks for minimum and maximum values.
 
-{{"demo": "CustomMarks.js"}}
+{{"component": "../data/material/components/slider/demos/custom-marks/index.ts"}}
 
 ## Track
 
@@ -128,13 +128,13 @@ The track shows the range available for user selection.
 
 The track can be turned off with `track={false}`.
 
-{{"demo": "TrackFalseSlider.js"}}
+{{"component": "../data/material/components/slider/demos/track-false/index.ts"}}
 
 ### Inverted track
 
 The track can be inverted with `track="inverted"`.
 
-{{"demo": "TrackInvertedSlider.js"}}
+{{"component": "../data/material/components/slider/demos/track-inverted/index.ts"}}
 
 ## Non-linear scale
 
@@ -143,7 +143,7 @@ You can use the `scale` prop to represent the `value` on a different scale.
 In the following demo, the value _x_ represents the value _2^x_.
 Increasing _x_ by one increases the represented value by factor _2_.
 
-{{"demo": "NonLinearSlider.js"}}
+{{"component": "../data/material/components/slider/demos/non-linear/index.ts"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/snackbars/AutohideSnackbar.js b/docs/data/material/components/snackbars/AutohideSnackbar.js
deleted file mode 100644
index 1e33edb45cdc2f..00000000000000
--- a/docs/data/material/components/snackbars/AutohideSnackbar.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-
-export default function AutohideSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  return (
-    
    
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview b/docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview
deleted file mode 100644
index a0c6adacc9eb6e..00000000000000
--- a/docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/ConsecutiveSnackbars.js b/docs/data/material/components/snackbars/ConsecutiveSnackbars.js
deleted file mode 100644
index 3328ba085e5484..00000000000000
--- a/docs/data/material/components/snackbars/ConsecutiveSnackbars.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-
-export default function ConsecutiveSnackbars() {
-  const [snackPack, setSnackPack] = React.useState([]);
-  const [open, setOpen] = React.useState(false);
-  const [messageInfo, setMessageInfo] = React.useState(undefined);
-
-  React.useEffect(() => {
-    if (snackPack.length && !messageInfo) {
-      // Set a new snack when we don't have an active one
-      setMessageInfo({ ...snackPack[0] });
-      setSnackPack((prev) => prev.slice(1));
-      setOpen(true);
-    } else if (snackPack.length && messageInfo && open) {
-      // Close an active snack when a new one is added
-      setOpen(false);
-    }
-  }, [snackPack, messageInfo, open]);
-
-  const handleClick = (message) => () => {
-    setSnackPack((prev) => [...prev, { message, key: new Date().getTime() }]);
-  };
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    setOpen(false);
-  };
-
-  const handleExited = () => {
-    setMessageInfo(undefined);
-  };
-
-  return (
-    
    
-      
-      
-      
-            
-            
-              
-            
-          
-        }
-      />
-    
    
-  );
-}
diff --git a/docs/data/material/components/snackbars/CustomizedSnackbars.js b/docs/data/material/components/snackbars/CustomizedSnackbars.js
deleted file mode 100644
index 6e2ea3b2f718a7..00000000000000
--- a/docs/data/material/components/snackbars/CustomizedSnackbars.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-
-export default function CustomizedSnackbars() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  return (
-    
    
-      
-      
-        
-          This is a success Alert inside a Snackbar!
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview b/docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview
deleted file mode 100644
index 21e1e8f052c0ff..00000000000000
--- a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-  
-    This is a success Alert inside a Snackbar!
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.js b/docs/data/material/components/snackbars/DirectionSnackbar.js
deleted file mode 100644
index 4cb3f89fd55f45..00000000000000
--- a/docs/data/material/components/snackbars/DirectionSnackbar.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import Slide from '@mui/material/Slide';
-
-function TransitionLeft(props) {
-  return ;
-}
-
-function TransitionUp(props) {
-  return ;
-}
-
-function TransitionRight(props) {
-  return ;
-}
-
-function TransitionDown(props) {
-  return ;
-}
-
-export default function DirectionSnackbar() {
-  const [open, setOpen] = React.useState(false);
-  const [transition, setTransition] = React.useState(undefined);
-
-  const handleClick = (Transition) => () => {
-    setTransition(() => Transition);
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-          
-        
-        
-          
-        
-      
-      
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.tsx b/docs/data/material/components/snackbars/DirectionSnackbar.tsx
deleted file mode 100644
index 2957aac5a35d2f..00000000000000
--- a/docs/data/material/components/snackbars/DirectionSnackbar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import Slide, { SlideProps } from '@mui/material/Slide';
-
-type TransitionProps = Omit;
-
-function TransitionLeft(props: TransitionProps) {
-  return ;
-}
-
-function TransitionUp(props: TransitionProps) {
-  return ;
-}
-
-function TransitionRight(props: TransitionProps) {
-  return ;
-}
-
-function TransitionDown(props: TransitionProps) {
-  return ;
-}
-
-export default function DirectionSnackbar() {
-  const [open, setOpen] = React.useState(false);
-  const [transition, setTransition] = React.useState<
-    React.ComponentType | undefined
-  >(undefined);
-
-  const handleClick = (Transition: React.ComponentType) => () => {
-    setTransition(() => Transition);
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-          
-        
-        
-          
-        
-      
-      
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.js b/docs/data/material/components/snackbars/FabIntegrationSnackbar.js
deleted file mode 100644
index 034f858be59943..00000000000000
--- a/docs/data/material/components/snackbars/FabIntegrationSnackbar.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import CssBaseline from '@mui/material/CssBaseline';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
-import Snackbar from '@mui/material/Snackbar';
-
-export default function FabIntegrationSnackbar() {
-  return (
-    
-      
-       ({
-          body: { backgroundColor: theme.palette.background.paper },
-        })}
-      />
-      
    
-        
-          
-            
-              
-            
-            
-              App bar
-            
-          
-        
-         ({
-            position: 'absolute',
-            bottom: theme.spacing(2),
-            right: theme.spacing(2),
-          })}
-        >
-          
-        
-        
-              Undo
-            
-          }
-          sx={{ bottom: { xs: 90, sm: 0 } }}
-        />
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.js b/docs/data/material/components/snackbars/IntegrationNotistack.js
deleted file mode 100644
index c74275de543c1c..00000000000000
--- a/docs/data/material/components/snackbars/IntegrationNotistack.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import { SnackbarProvider, useSnackbar } from 'notistack';
-
-function MyApp() {
-  const { enqueueSnackbar } = useSnackbar();
-
-  const handleClick = () => {
-    enqueueSnackbar('I love snacks.');
-  };
-
-  const handleClickVariant = (variant) => () => {
-    // variant could be success, error, warning, info, or default
-    enqueueSnackbar('This is a success message!', { variant });
-  };
-
-  return (
-    
-      
-      
-    
-  );
-}
-
-export default function IntegrationNotistack() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview b/docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview
deleted file mode 100644
index 45d30592df5d8d..00000000000000
--- a/docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/LongTextSnackbar.js b/docs/data/material/components/snackbars/LongTextSnackbar.js
deleted file mode 100644
index eb68859a6ca90b..00000000000000
--- a/docs/data/material/components/snackbars/LongTextSnackbar.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import SnackbarContent from '@mui/material/SnackbarContent';
-
-const action = (
-  
-);
-
-export default function LongTextSnackbar() {
-  return (
-    
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.js b/docs/data/material/components/snackbars/PositionedSnackbar.js
deleted file mode 100644
index c170cb55f53969..00000000000000
--- a/docs/data/material/components/snackbars/PositionedSnackbar.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-
-export default function PositionedSnackbar() {
-  const [state, setState] = React.useState({
-    open: false,
-    vertical: 'top',
-    horizontal: 'center',
-  });
-  const { vertical, horizontal, open } = state;
-
-  const handleClick = (newState) => () => {
-    setState({ ...newState, open: true });
-  };
-
-  const handleClose = () => {
-    setState({ ...state, open: false });
-  };
-
-  const buttons = (
-    
-      
-        
-      
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-      
-        
-      
-    
-  );
-
-  return (
-    
-      {buttons}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview b/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview
deleted file mode 100644
index 3d15bac005fa10..00000000000000
--- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-{buttons}
-
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/SimpleSnackbar.js b/docs/data/material/components/snackbars/SimpleSnackbar.js
deleted file mode 100644
index 301b5888d295f5..00000000000000
--- a/docs/data/material/components/snackbars/SimpleSnackbar.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-
-export default function SimpleSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const action = (
-    
-      
-      
-        
-      
-    
-  );
-
-  return (
-    
    
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview b/docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview
deleted file mode 100644
index 323a3b0d99288a..00000000000000
--- a/docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.js b/docs/data/material/components/snackbars/TransitionsSnackbar.js
deleted file mode 100644
index 538a37f32ce465..00000000000000
--- a/docs/data/material/components/snackbars/TransitionsSnackbar.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import Fade from '@mui/material/Fade';
-import Slide from '@mui/material/Slide';
-import Grow from '@mui/material/Grow';
-
-function SlideTransition(props) {
-  return ;
-}
-
-function GrowTransition(props) {
-  return ;
-}
-
-export default function TransitionsSnackbar() {
-  const [state, setState] = React.useState({
-    open: false,
-    Transition: Fade,
-  });
-
-  const handleClick = (Transition) => () => {
-    setState({
-      open: true,
-      Transition,
-    });
-  };
-
-  const handleClose = () => {
-    setState({
-      ...state,
-      open: false,
-    });
-  };
-
-  return (
-    
    
-      
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview b/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview
deleted file mode 100644
index 9682f78977d3f7..00000000000000
--- a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/AutohideSnackbar.tsx b/docs/data/material/components/snackbars/demos/autohide/AutohideSnackbar.tsx
similarity index 93%
rename from docs/data/material/components/snackbars/AutohideSnackbar.tsx
rename to docs/data/material/components/snackbars/demos/autohide/AutohideSnackbar.tsx
index b5fd1f75e775b0..3a8b969b641928 100644
--- a/docs/data/material/components/snackbars/AutohideSnackbar.tsx
+++ b/docs/data/material/components/snackbars/demos/autohide/AutohideSnackbar.tsx
@@ -22,6 +22,7 @@ export default function AutohideSnackbar() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/autohide/index.ts b/docs/data/material/components/snackbars/demos/autohide/index.ts
new file mode 100644
index 00000000000000..9c4377f42746d8
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/autohide/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AutohideSnackbar from './AutohideSnackbar';
+
+export default createDemo(import.meta.url, AutohideSnackbar);
diff --git a/docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx b/docs/data/material/components/snackbars/demos/consecutive/ConsecutiveSnackbars.tsx
similarity index 98%
rename from docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx
rename to docs/data/material/components/snackbars/demos/consecutive/ConsecutiveSnackbars.tsx
index 22d29214f9ced5..4e277cad657b1c 100644
--- a/docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx
+++ b/docs/data/material/components/snackbars/demos/consecutive/ConsecutiveSnackbars.tsx
@@ -10,6 +10,7 @@ export interface SnackbarMessage {
 }
 
 export default function ConsecutiveSnackbars() {
+  // @focus-start @padding 1
   const [snackPack, setSnackPack] = React.useState([]);
   const [open, setOpen] = React.useState(false);
   const [messageInfo, setMessageInfo] = React.useState(
@@ -75,4 +76,5 @@ export default function ConsecutiveSnackbars() {
       />
     
    
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/snackbars/demos/consecutive/index.ts b/docs/data/material/components/snackbars/demos/consecutive/index.ts
new file mode 100644
index 00000000000000..15fa5d50258be1
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/consecutive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ConsecutiveSnackbars from './ConsecutiveSnackbars';
+
+export default createDemo(import.meta.url, ConsecutiveSnackbars);
diff --git a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx b/docs/data/material/components/snackbars/demos/customized/CustomizedSnackbars.tsx
similarity index 94%
rename from docs/data/material/components/snackbars/CustomizedSnackbars.tsx
rename to docs/data/material/components/snackbars/demos/customized/CustomizedSnackbars.tsx
index 912af5eae4927d..c6995a9b064c78 100644
--- a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx
+++ b/docs/data/material/components/snackbars/demos/customized/CustomizedSnackbars.tsx
@@ -23,6 +23,7 @@ export default function CustomizedSnackbars() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/customized/index.ts b/docs/data/material/components/snackbars/demos/customized/index.ts
new file mode 100644
index 00000000000000..8c0543160f19fa
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedSnackbars from './CustomizedSnackbars';
+
+export default createDemo(import.meta.url, CustomizedSnackbars);
diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx b/docs/data/material/components/snackbars/demos/fab-integration/FabIntegrationSnackbar.tsx
similarity index 97%
rename from docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx
rename to docs/data/material/components/snackbars/demos/fab-integration/FabIntegrationSnackbar.tsx
index 034f858be59943..f04e7121c457f9 100644
--- a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx
+++ b/docs/data/material/components/snackbars/demos/fab-integration/FabIntegrationSnackbar.tsx
@@ -14,6 +14,7 @@ import Snackbar from '@mui/material/Snackbar';
 export default function FabIntegrationSnackbar() {
   return (
     
+      {/* @focus-start */}
       
        ({
@@ -64,6 +65,7 @@ export default function FabIntegrationSnackbar() {
           sx={{ bottom: { xs: 90, sm: 0 } }}
         />
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/fab-integration/index.ts b/docs/data/material/components/snackbars/demos/fab-integration/index.ts
new file mode 100644
index 00000000000000..370ccadf0983d5
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/fab-integration/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FabIntegrationSnackbar from './FabIntegrationSnackbar';
+
+export default createDemo(import.meta.url, FabIntegrationSnackbar);
diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.tsx b/docs/data/material/components/snackbars/demos/integration-notistack/IntegrationNotistack.tsx
similarity index 94%
rename from docs/data/material/components/snackbars/IntegrationNotistack.tsx
rename to docs/data/material/components/snackbars/demos/integration-notistack/IntegrationNotistack.tsx
index 0f4ffa9baaf149..9f61a89f27ed72 100644
--- a/docs/data/material/components/snackbars/IntegrationNotistack.tsx
+++ b/docs/data/material/components/snackbars/demos/integration-notistack/IntegrationNotistack.tsx
@@ -23,9 +23,11 @@ function MyApp() {
 }
 
 export default function IntegrationNotistack() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/snackbars/demos/integration-notistack/index.ts b/docs/data/material/components/snackbars/demos/integration-notistack/index.ts
new file mode 100644
index 00000000000000..cb0881da127c43
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/integration-notistack/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IntegrationNotistack from './IntegrationNotistack';
+
+export default createDemo(import.meta.url, IntegrationNotistack);
diff --git a/docs/data/material/components/snackbars/LongTextSnackbar.tsx b/docs/data/material/components/snackbars/demos/long-text/LongTextSnackbar.tsx
similarity index 94%
rename from docs/data/material/components/snackbars/LongTextSnackbar.tsx
rename to docs/data/material/components/snackbars/demos/long-text/LongTextSnackbar.tsx
index eb68859a6ca90b..eebf686e892d18 100644
--- a/docs/data/material/components/snackbars/LongTextSnackbar.tsx
+++ b/docs/data/material/components/snackbars/demos/long-text/LongTextSnackbar.tsx
@@ -11,6 +11,7 @@ const action = (
 export default function LongTextSnackbar() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/long-text/index.ts b/docs/data/material/components/snackbars/demos/long-text/index.ts
new file mode 100644
index 00000000000000..076ac8b9bdb201
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/long-text/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LongTextSnackbar from './LongTextSnackbar';
+
+export default createDemo(import.meta.url, LongTextSnackbar);
diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx b/docs/data/material/components/snackbars/demos/positioned/PositionedSnackbar.tsx
similarity index 97%
rename from docs/data/material/components/snackbars/PositionedSnackbar.tsx
rename to docs/data/material/components/snackbars/demos/positioned/PositionedSnackbar.tsx
index 98941a590d6762..89c5ff9df97765 100644
--- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx
+++ b/docs/data/material/components/snackbars/demos/positioned/PositionedSnackbar.tsx
@@ -63,6 +63,7 @@ export default function PositionedSnackbar() {
 
   return (
     
+      {/* @focus-start */}
       {buttons}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/positioned/index.ts b/docs/data/material/components/snackbars/demos/positioned/index.ts
new file mode 100644
index 00000000000000..9436d6db216708
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/positioned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PositionedSnackbar from './PositionedSnackbar';
+
+export default createDemo(import.meta.url, PositionedSnackbar);
diff --git a/docs/data/material/components/snackbars/SimpleSnackbar.tsx b/docs/data/material/components/snackbars/demos/simple/SimpleSnackbar.tsx
similarity index 95%
rename from docs/data/material/components/snackbars/SimpleSnackbar.tsx
rename to docs/data/material/components/snackbars/demos/simple/SimpleSnackbar.tsx
index bf0aed8afdd95b..a135e4de40551c 100644
--- a/docs/data/material/components/snackbars/SimpleSnackbar.tsx
+++ b/docs/data/material/components/snackbars/demos/simple/SimpleSnackbar.tsx
@@ -40,6 +40,7 @@ export default function SimpleSnackbar() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/simple/index.ts b/docs/data/material/components/snackbars/demos/simple/index.ts
new file mode 100644
index 00000000000000..b962b838c271a6
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/simple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleSnackbar from './SimpleSnackbar';
+
+export default createDemo(import.meta.url, SimpleSnackbar);
diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx b/docs/data/material/components/snackbars/demos/transitions/TransitionsSnackbar.tsx
similarity index 96%
rename from docs/data/material/components/snackbars/TransitionsSnackbar.tsx
rename to docs/data/material/components/snackbars/demos/transitions/TransitionsSnackbar.tsx
index f8430b4a4aa106..0b4c770519273e 100644
--- a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx
+++ b/docs/data/material/components/snackbars/demos/transitions/TransitionsSnackbar.tsx
@@ -51,6 +51,7 @@ export default function TransitionsSnackbar() {
 
   return (
     
    
+      {/* @focus-start */}
       
       
       
@@ -62,6 +63,7 @@ export default function TransitionsSnackbar() {
         key={state.Transition.name}
         autoHideDuration={1200}
       />
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/snackbars/demos/transitions/index.ts b/docs/data/material/components/snackbars/demos/transitions/index.ts
new file mode 100644
index 00000000000000..8fe452f5381285
--- /dev/null
+++ b/docs/data/material/components/snackbars/demos/transitions/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransitionsSnackbar from './TransitionsSnackbar';
+
+export default createDemo(import.meta.url, TransitionsSnackbar);
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index f6f26b2a7e4cb3..5147e6167e360f 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -19,7 +19,7 @@ githubSource: packages/mui-material/src/Snackbar
 The Snackbar component appears temporarily and floats above the UI to provide users with (non-critical) updates on an app's processes.
 The demo below, inspired by Google Keep, shows a basic Snackbar with a text element and two actions:
 
-{{"demo": "SimpleSnackbar.js"}}
+{{"component": "../data/material/components/snackbars/demos/simple/index.ts"}}
 
 ### Usage
 
@@ -39,7 +39,7 @@ import Snackbar from '@mui/material/Snackbar';
 
 Use the `anchorOrigin` prop to control the Snackbar's position on the screen.
 
-{{"demo": "PositionedSnackbar.js"}}
+{{"component": "../data/material/components/snackbars/demos/positioned/index.ts"}}
 
 ### Content
 
@@ -49,7 +49,7 @@ import SnackbarContent from '@mui/material/SnackbarContent';
 
 Use the Snackbar Content component to add text and actions to the Snackbar.
 
-{{"demo": "LongTextSnackbar.js"}}
+{{"component": "../data/material/components/snackbars/demos/long-text/index.ts"}}
 
 ### Automatic dismiss
 
@@ -57,13 +57,13 @@ Use the `autoHideDuration` prop to automatically trigger the Snackbar's `onClose
 
 Make sure to [provide sufficient time](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html) for the user to process the information displayed on it.
 
-{{"demo": "AutohideSnackbar.js"}}
+{{"component": "../data/material/components/snackbars/demos/autohide/index.ts"}}
 
 ### Transitions
 
 Use `slots.transition` and `slotProps.transition` to change the transition of the Snackbar from [Grow](/material-ui/transitions/#grow) (the default) to others such as [Slide](/material-ui/transitions/#slide).
 
-{{"demo": "TransitionsSnackbar.js"}}
+{{"component": "../data/material/components/snackbars/demos/transitions/index.ts"}}
 
 ## Customization
 
@@ -88,13 +88,13 @@ If you would like to prevent the default onClickAway behavior, you can set the e
 
 Use an Alert inside a Snackbar for messages that communicate a certain severity.
 
-{{"demo": "CustomizedSnackbars.js"}}
+{{"component": "../data/material/components/snackbars/demos/customized/index.ts"}}
 
 ### Use with Floating Action Buttons
 
 If you're using a [Floating Action Button](/material-ui/react-floating-action-button/) on mobile, Material Design recommends positioning snackbars directly above it, as shown in the demo below:
 
-{{"demo": "FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}}
+{{"component": "../data/material/components/snackbars/demos/fab-integration/index.ts", "iframe": true, "maxWidth": 400}}
 
 ## Common examples
 
@@ -102,7 +102,7 @@ If you're using a [Floating Action Button](/material-ui/react-floating-action-bu
 
 This demo shows how to display multiple Snackbars without stacking them by using a consecutive animation.
 
-{{"demo": "ConsecutiveSnackbars.js"}}
+{{"component": "../data/material/components/snackbars/demos/consecutive/index.ts"}}
 
 ## Supplementary components
 
@@ -114,7 +114,7 @@ This demo shows how to display multiple Snackbars without stacking them by using
 With an imperative API, [notistack](https://github.com/iamhosseindhv/notistack) lets you vertically stack multiple Snackbars without having to handle their open and close states.
 Even though this is discouraged in the Material Design guidelines, it is still a common pattern.
 
-{{"demo": "IntegrationNotistack.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/snackbars/demos/integration-notistack/index.ts", "defaultCodeOpen": false}}
 
 :::warning
 Note that notistack prevents Snackbars from being [closed by pressing Escape](#accessibility).
diff --git a/docs/data/material/components/speed-dial/BasicSpeedDial.js b/docs/data/material/components/speed-dial/BasicSpeedDial.js
deleted file mode 100644
index 2c9c28e576c8e9..00000000000000
--- a/docs/data/material/components/speed-dial/BasicSpeedDial.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Box from '@mui/material/Box';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
-import SaveIcon from '@mui/icons-material/Save';
-import PrintIcon from '@mui/icons-material/Print';
-import ShareIcon from '@mui/icons-material/Share';
-
-const actions = [
-  { icon: , name: 'Copy' },
-  { icon: , name: 'Save' },
-  { icon: , name: 'Print' },
-  { icon: , name: 'Share' },
-];
-
-export default function BasicSpeedDial() {
-  return (
-    
-      }
-      >
-        {actions.map((action) => (
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js b/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js
deleted file mode 100644
index 56f606cd1b4c23..00000000000000
--- a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
-import SaveIcon from '@mui/icons-material/Save';
-import PrintIcon from '@mui/icons-material/Print';
-import ShareIcon from '@mui/icons-material/Share';
-
-const actions = [
-  { icon: , name: 'Copy' },
-  { icon: , name: 'Save' },
-  { icon: , name: 'Print' },
-  { icon: , name: 'Share' },
-];
-
-export default function ControlledOpenSpeedDial() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    
-      }
-        onClose={handleClose}
-        onOpen={handleOpen}
-        open={open}
-      >
-        {actions.map((action) => (
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/speed-dial/OpenIconSpeedDial.js b/docs/data/material/components/speed-dial/OpenIconSpeedDial.js
deleted file mode 100644
index 84a0c5417f6217..00000000000000
--- a/docs/data/material/components/speed-dial/OpenIconSpeedDial.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Box from '@mui/material/Box';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
-import SaveIcon from '@mui/icons-material/Save';
-import PrintIcon from '@mui/icons-material/Print';
-import ShareIcon from '@mui/icons-material/Share';
-import EditIcon from '@mui/icons-material/Edit';
-
-const actions = [
-  { icon: , name: 'Copy' },
-  { icon: , name: 'Save' },
-  { icon: , name: 'Print' },
-  { icon: , name: 'Share' },
-];
-
-export default function OpenIconSpeedDial() {
-  return (
-    
-      } />}
-      >
-        {actions.map((action) => (
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.js b/docs/data/material/components/speed-dial/PlaygroundSpeedDial.js
deleted file mode 100644
index 41ab636415daed..00000000000000
--- a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import Switch from '@mui/material/Switch';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
-import SaveIcon from '@mui/icons-material/Save';
-import PrintIcon from '@mui/icons-material/Print';
-import ShareIcon from '@mui/icons-material/Share';
-
-const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
-  position: 'absolute',
-  '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-  '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
-    top: theme.spacing(2),
-    left: theme.spacing(2),
-  },
-}));
-
-const actions = [
-  { icon: , name: 'Copy' },
-  { icon: , name: 'Save' },
-  { icon: , name: 'Print' },
-  { icon: , name: 'Share' },
-];
-
-export default function PlaygroundSpeedDial() {
-  const [direction, setDirection] = React.useState('up');
-  const [hidden, setHidden] = React.useState(false);
-
-  const handleDirectionChange = (event) => {
-    setDirection(event.target.value);
-  };
-
-  const handleHiddenChange = (event) => {
-    setHidden(event.target.checked);
-  };
-
-  return (
-    
-      
-        }
-        label="Hidden"
-      />
-      
-        Direction
-        
-          } label="Up" />
-          } label="Right" />
-          } label="Down" />
-          } label="Left" />
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js b/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js
deleted file mode 100644
index 15a928bfd57fca..00000000000000
--- a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Backdrop from '@mui/material/Backdrop';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
-import SaveIcon from '@mui/icons-material/Save';
-import PrintIcon from '@mui/icons-material/Print';
-import ShareIcon from '@mui/icons-material/Share';
-
-const actions = [
-  { icon: , name: 'Copy' },
-  { icon: , name: 'Save' },
-  { icon: , name: 'Print' },
-  { icon: , name: 'Share' },
-];
-
-export default function SpeedDialTooltipOpen() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    
-      
-      }
-        onClose={handleClose}
-        onOpen={handleOpen}
-        open={open}
-      >
-        {actions.map((action) => (
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/speed-dial/BasicSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/basic/BasicSpeedDial.tsx
similarity index 95%
rename from docs/data/material/components/speed-dial/BasicSpeedDial.tsx
rename to docs/data/material/components/speed-dial/demos/basic/BasicSpeedDial.tsx
index 2c9c28e576c8e9..4ab34b19dcea59 100644
--- a/docs/data/material/components/speed-dial/BasicSpeedDial.tsx
+++ b/docs/data/material/components/speed-dial/demos/basic/BasicSpeedDial.tsx
@@ -17,6 +17,7 @@ const actions = [
 export default function BasicSpeedDial() {
   return (
     
+      {/* @focus-start */}
       
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/speed-dial/demos/basic/index.ts b/docs/data/material/components/speed-dial/demos/basic/index.ts
new file mode 100644
index 00000000000000..1df137f537bc0a
--- /dev/null
+++ b/docs/data/material/components/speed-dial/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicSpeedDial from './BasicSpeedDial';
+
+export default createDemo(import.meta.url, BasicSpeedDial);
diff --git a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/controlled-open/ControlledOpenSpeedDial.tsx
similarity index 97%
rename from docs/data/material/components/speed-dial/ControlledOpenSpeedDial.tsx
rename to docs/data/material/components/speed-dial/demos/controlled-open/ControlledOpenSpeedDial.tsx
index 56f606cd1b4c23..871e986fdb6a97 100644
--- a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.tsx
+++ b/docs/data/material/components/speed-dial/demos/controlled-open/ControlledOpenSpeedDial.tsx
@@ -16,6 +16,7 @@ const actions = [
 ];
 
 export default function ControlledOpenSpeedDial() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -45,4 +46,5 @@ export default function ControlledOpenSpeedDial() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/speed-dial/demos/controlled-open/index.ts b/docs/data/material/components/speed-dial/demos/controlled-open/index.ts
new file mode 100644
index 00000000000000..709fa070ed6a69
--- /dev/null
+++ b/docs/data/material/components/speed-dial/demos/controlled-open/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledOpenSpeedDial from './ControlledOpenSpeedDial';
+
+export default createDemo(import.meta.url, ControlledOpenSpeedDial);
diff --git a/docs/data/material/components/speed-dial/OpenIconSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/open-icon/OpenIconSpeedDial.tsx
similarity index 96%
rename from docs/data/material/components/speed-dial/OpenIconSpeedDial.tsx
rename to docs/data/material/components/speed-dial/demos/open-icon/OpenIconSpeedDial.tsx
index 84a0c5417f6217..6483191ac12ccf 100644
--- a/docs/data/material/components/speed-dial/OpenIconSpeedDial.tsx
+++ b/docs/data/material/components/speed-dial/demos/open-icon/OpenIconSpeedDial.tsx
@@ -18,6 +18,7 @@ const actions = [
 export default function OpenIconSpeedDial() {
   return (
     
+      {/* @focus-start */}
       
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/speed-dial/demos/open-icon/index.ts b/docs/data/material/components/speed-dial/demos/open-icon/index.ts
new file mode 100644
index 00000000000000..7b5e85dbfa9000
--- /dev/null
+++ b/docs/data/material/components/speed-dial/demos/open-icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OpenIconSpeedDial from './OpenIconSpeedDial';
+
+export default createDemo(import.meta.url, OpenIconSpeedDial);
diff --git a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/playground/PlaygroundSpeedDial.tsx
similarity index 98%
rename from docs/data/material/components/speed-dial/PlaygroundSpeedDial.tsx
rename to docs/data/material/components/speed-dial/demos/playground/PlaygroundSpeedDial.tsx
index a740a1fa2bddf4..95ab80ece98ef6 100644
--- a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.tsx
+++ b/docs/data/material/components/speed-dial/demos/playground/PlaygroundSpeedDial.tsx
@@ -35,6 +35,7 @@ const actions = [
 ];
 
 export default function PlaygroundSpeedDial() {
+  // @focus-start @padding 1
   const [direction, setDirection] =
     React.useState('up');
   const [hidden, setHidden] = React.useState(false);
@@ -94,4 +95,5 @@ export default function PlaygroundSpeedDial() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/speed-dial/demos/playground/index.ts b/docs/data/material/components/speed-dial/demos/playground/index.ts
new file mode 100644
index 00000000000000..b5140c205da8c6
--- /dev/null
+++ b/docs/data/material/components/speed-dial/demos/playground/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PlaygroundSpeedDial from './PlaygroundSpeedDial';
+
+export default createDemo(import.meta.url, PlaygroundSpeedDial);
diff --git a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.tsx b/docs/data/material/components/speed-dial/demos/tooltip-open/SpeedDialTooltipOpen.tsx
similarity index 97%
rename from docs/data/material/components/speed-dial/SpeedDialTooltipOpen.tsx
rename to docs/data/material/components/speed-dial/demos/tooltip-open/SpeedDialTooltipOpen.tsx
index 15a928bfd57fca..d80337a4647df8 100644
--- a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.tsx
+++ b/docs/data/material/components/speed-dial/demos/tooltip-open/SpeedDialTooltipOpen.tsx
@@ -17,6 +17,7 @@ const actions = [
 ];
 
 export default function SpeedDialTooltipOpen() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -48,4 +49,5 @@ export default function SpeedDialTooltipOpen() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/speed-dial/demos/tooltip-open/index.ts b/docs/data/material/components/speed-dial/demos/tooltip-open/index.ts
new file mode 100644
index 00000000000000..c4b861b4d9e887
--- /dev/null
+++ b/docs/data/material/components/speed-dial/demos/tooltip-open/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SpeedDialTooltipOpen from './SpeedDialTooltipOpen';
+
+export default createDemo(import.meta.url, SpeedDialTooltipOpen);
diff --git a/docs/data/material/components/speed-dial/speed-dial.md b/docs/data/material/components/speed-dial/speed-dial.md
index bb13c916cc39e2..41eefb69326463 100644
--- a/docs/data/material/components/speed-dial/speed-dial.md
+++ b/docs/data/material/components/speed-dial/speed-dial.md
@@ -20,24 +20,24 @@ If more than six actions are needed, something other than a FAB should be used t
 
 The floating action button can display related actions.
 
-{{"demo": "BasicSpeedDial.js"}}
+{{"component": "../data/material/components/speed-dial/demos/basic/index.ts"}}
 
 ## Playground
 
-{{"demo": "PlaygroundSpeedDial.js"}}
+{{"component": "../data/material/components/speed-dial/demos/playground/index.ts"}}
 
 ## Controlled speed dial
 
 The open state of the component can be controlled with the `open`/`onOpen`/`onClose` props.
 
-{{"demo": "ControlledOpenSpeedDial.js"}}
+{{"component": "../data/material/components/speed-dial/demos/controlled-open/index.ts"}}
 
 ## Custom close icon
 
 You can provide an alternate icon for the closed and open states using the `icon` and `openIcon` props
 of the `SpeedDialIcon` component.
 
-{{"demo": "OpenIconSpeedDial.js"}}
+{{"component": "../data/material/components/speed-dial/demos/open-icon/index.ts"}}
 
 ## Persistent action tooltips
 
@@ -45,7 +45,7 @@ The SpeedDialActions tooltips can be displayed persistently so that users don't
 
 It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the prop.
 
-{{"demo": "SpeedDialTooltipOpen.js"}}
+{{"component": "../data/material/components/speed-dial/demos/tooltip-open/index.ts"}}
 
 ## Transitions
 
diff --git a/docs/data/material/components/stack/BasicStack.js b/docs/data/material/components/stack/BasicStack.js
deleted file mode 100644
index 4c10a398f585b1..00000000000000
--- a/docs/data/material/components/stack/BasicStack.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function BasicStack() {
-  return (
-    
-      
-        Item 1
-        Item 2
-        Item 3
-      
-    
-  );
-}
diff --git a/docs/data/material/components/stack/BasicStack.tsx.preview b/docs/data/material/components/stack/BasicStack.tsx.preview
deleted file mode 100644
index fc62473153d42e..00000000000000
--- a/docs/data/material/components/stack/BasicStack.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  Item 1
-  Item 2
-  Item 3
-
\ No newline at end of file
diff --git a/docs/data/material/components/stack/DirectionStack.js b/docs/data/material/components/stack/DirectionStack.js
deleted file mode 100644
index 8ed5e4215d21d7..00000000000000
--- a/docs/data/material/components/stack/DirectionStack.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function DirectionStack() {
-  return (
-    
    
-      
-        Item 1
-        Item 2
-        Item 3
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/stack/DirectionStack.tsx.preview b/docs/data/material/components/stack/DirectionStack.tsx.preview
deleted file mode 100644
index 0b432fbd09105e..00000000000000
--- a/docs/data/material/components/stack/DirectionStack.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  Item 1
-  Item 2
-  Item 3
-
\ No newline at end of file
diff --git a/docs/data/material/components/stack/DividerStack.js b/docs/data/material/components/stack/DividerStack.js
deleted file mode 100644
index fb56191fa7aeb9..00000000000000
--- a/docs/data/material/components/stack/DividerStack.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Divider from '@mui/material/Divider';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function DividerStack() {
-  return (
-    
    
-      }
-        spacing={2}
-      >
-        Item 1
-        Item 2
-        Item 3
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/stack/DividerStack.tsx.preview b/docs/data/material/components/stack/DividerStack.tsx.preview
deleted file mode 100644
index 6dff777f9c51cf..00000000000000
--- a/docs/data/material/components/stack/DividerStack.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-}
-  spacing={2}
->
-  Item 1
-  Item 2
-  Item 3
-
\ No newline at end of file
diff --git a/docs/data/material/components/stack/FlexboxGapStack.js b/docs/data/material/components/stack/FlexboxGapStack.js
deleted file mode 100644
index 3d9e1bb6bd523b..00000000000000
--- a/docs/data/material/components/stack/FlexboxGapStack.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  flexGrow: 1,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function FlexboxGapStack() {
-  return (
-    
-      
-        Item 1
-        Item 2
-        Long content
-      
-    
-  );
-}
diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx.preview b/docs/data/material/components/stack/FlexboxGapStack.tsx.preview
deleted file mode 100644
index 28eef419d3034b..00000000000000
--- a/docs/data/material/components/stack/FlexboxGapStack.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  Item 1
-  Item 2
-  Long content
-
\ No newline at end of file
diff --git a/docs/data/material/components/stack/InteractiveStack.js b/docs/data/material/components/stack/InteractiveStack.js
deleted file mode 100644
index 8730dbce62e7d5..00000000000000
--- a/docs/data/material/components/stack/InteractiveStack.js
+++ /dev/null
@@ -1,201 +0,0 @@
-import * as React from 'react';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import Stack from '@mui/material/Stack';
-import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode';
-
-export default function InteractiveStack() {
-  const [direction, setDirection] = React.useState('row');
-  const [justifyContent, setJustifyContent] = React.useState('center');
-  const [alignItems, setAlignItems] = React.useState('center');
-  const [spacing, setSpacing] = React.useState(2);
-
-  const jsx = `
-
-`;
-
-  return (
-    
-      
-        {[0, 1, 2].map((value) => (
-           ({
-              p: 2,
-              pt: value + 1,
-              pb: value + 1,
-              color: 'text.secondary',
-              typography: 'body2',
-              backgroundColor: '#fff',
-              ...theme.applyStyles('dark', {
-                backgroundColor: '#1A2027',
-              }),
-            })}
-          >
-            {`Item ${value + 1}`}
-          
-        ))}
-      
-      
-        
-          
-            
-              direction
-               {
-                  setDirection(event.target.value);
-                }}
-              >
-                } label="row" />
-                }
-                  label="row-reverse"
-                />
-                }
-                  label="column"
-                />
-                }
-                  label="column-reverse"
-                />
-              
-            
-          
-          
-            
-              alignItems
-               {
-                  setAlignItems(event.target.value);
-                }}
-              >
-                }
-                  label="flex-start"
-                />
-                }
-                  label="center"
-                />
-                }
-                  label="flex-end"
-                />
-                }
-                  label="stretch"
-                />
-                }
-                  label="baseline"
-                />
-              
-            
-          
-          
-            
-              justifyContent
-               {
-                  setJustifyContent(event.target.value);
-                }}
-              >
-                }
-                  label="flex-start"
-                />
-                }
-                  label="center"
-                />
-                }
-                  label="flex-end"
-                />
-                }
-                  label="space-between"
-                />
-                }
-                  label="space-around"
-                />
-                }
-                  label="space-evenly"
-                />
-              
-            
-          
-          
-            
-              spacing
-               {
-                  setSpacing(Number(event.target.value));
-                }}
-              >
-                {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
-                  }
-                    label={value}
-                  />
-                ))}
-              
-            
-          
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/stack/ResponsiveStack.js b/docs/data/material/components/stack/ResponsiveStack.js
deleted file mode 100644
index 8748fc90e12fb1..00000000000000
--- a/docs/data/material/components/stack/ResponsiveStack.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-export default function ResponsiveStack() {
-  return (
-    
    
-      
-        Item 1
-        Item 2
-        Item 3
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/stack/ResponsiveStack.tsx.preview b/docs/data/material/components/stack/ResponsiveStack.tsx.preview
deleted file mode 100644
index 86c8eaeab63109..00000000000000
--- a/docs/data/material/components/stack/ResponsiveStack.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  Item 1
-  Item 2
-  Item 3
-
\ No newline at end of file
diff --git a/docs/data/material/components/stack/ZeroWidthStack.js b/docs/data/material/components/stack/ZeroWidthStack.js
deleted file mode 100644
index 11d05a932b5e22..00000000000000
--- a/docs/data/material/components/stack/ZeroWidthStack.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-
-const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor: '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  color: (theme.vars ?? theme).palette.text.secondary,
-  maxWidth: 400,
-  ...theme.applyStyles('dark', {
-    backgroundColor: '#1A2027',
-  }),
-}));
-
-const message = `Truncation should be conditionally applicable on this long line of text
- as this is a much longer line than what the container can support.`;
-
-export default function ZeroWidthStack() {
-  return (
-    
-      
-        
-          W
-          {message}
-        
-      
-      
-        
-          
-            W
-          
-          
-            {message}
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/stack/ZeroWidthStack.tsx.preview b/docs/data/material/components/stack/ZeroWidthStack.tsx.preview
deleted file mode 100644
index b920913909ceaa..00000000000000
--- a/docs/data/material/components/stack/ZeroWidthStack.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-    W
-    {message}
-  
-
-
-  
-    
-      W
-    
-    
-      {message}
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/stack/BasicStack.tsx b/docs/data/material/components/stack/demos/basic/BasicStack.tsx
similarity index 92%
rename from docs/data/material/components/stack/BasicStack.tsx
rename to docs/data/material/components/stack/demos/basic/BasicStack.tsx
index 4c10a398f585b1..2f65d29b30c356 100644
--- a/docs/data/material/components/stack/BasicStack.tsx
+++ b/docs/data/material/components/stack/demos/basic/BasicStack.tsx
@@ -17,11 +17,13 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function BasicStack() {
   return (
     
+      {/* @focus-start */}
       
         Item 1
         Item 2
         Item 3
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/stack/demos/basic/index.ts b/docs/data/material/components/stack/demos/basic/index.ts
new file mode 100644
index 00000000000000..cba1e239f986e0
--- /dev/null
+++ b/docs/data/material/components/stack/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicStack from './BasicStack';
+
+export default createDemo(import.meta.url, BasicStack);
diff --git a/docs/data/material/components/stack/DirectionStack.tsx b/docs/data/material/components/stack/demos/direction/DirectionStack.tsx
similarity index 92%
rename from docs/data/material/components/stack/DirectionStack.tsx
rename to docs/data/material/components/stack/demos/direction/DirectionStack.tsx
index 8ed5e4215d21d7..cd3d3be2a4a360 100644
--- a/docs/data/material/components/stack/DirectionStack.tsx
+++ b/docs/data/material/components/stack/demos/direction/DirectionStack.tsx
@@ -16,11 +16,13 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function DirectionStack() {
   return (
     
    
+      {/* @focus-start */}
       
         Item 1
         Item 2
         Item 3
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/stack/demos/direction/index.ts b/docs/data/material/components/stack/demos/direction/index.ts
new file mode 100644
index 00000000000000..3b34fbadfbeb8c
--- /dev/null
+++ b/docs/data/material/components/stack/demos/direction/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DirectionStack from './DirectionStack';
+
+export default createDemo(import.meta.url, DirectionStack);
diff --git a/docs/data/material/components/stack/DividerStack.tsx b/docs/data/material/components/stack/demos/divider/DividerStack.tsx
similarity index 93%
rename from docs/data/material/components/stack/DividerStack.tsx
rename to docs/data/material/components/stack/demos/divider/DividerStack.tsx
index fb56191fa7aeb9..a5f1b09c13beb4 100644
--- a/docs/data/material/components/stack/DividerStack.tsx
+++ b/docs/data/material/components/stack/demos/divider/DividerStack.tsx
@@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function DividerStack() {
   return (
     
    
+      {/* @focus-start */}
       }
@@ -26,6 +27,7 @@ export default function DividerStack() {
         Item 2
         Item 3
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/stack/demos/divider/index.ts b/docs/data/material/components/stack/demos/divider/index.ts
new file mode 100644
index 00000000000000..0a09282055dd9b
--- /dev/null
+++ b/docs/data/material/components/stack/demos/divider/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DividerStack from './DividerStack';
+
+export default createDemo(import.meta.url, DividerStack);
diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx b/docs/data/material/components/stack/demos/flexbox-gap/FlexboxGapStack.tsx
similarity index 93%
rename from docs/data/material/components/stack/FlexboxGapStack.tsx
rename to docs/data/material/components/stack/demos/flexbox-gap/FlexboxGapStack.tsx
index 3d9e1bb6bd523b..bd5f61fa338ad5 100644
--- a/docs/data/material/components/stack/FlexboxGapStack.tsx
+++ b/docs/data/material/components/stack/demos/flexbox-gap/FlexboxGapStack.tsx
@@ -18,6 +18,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function FlexboxGapStack() {
   return (
     
+      {/* @focus-start */}
       Item 2
         Long content
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/stack/demos/flexbox-gap/index.ts b/docs/data/material/components/stack/demos/flexbox-gap/index.ts
new file mode 100644
index 00000000000000..93ff13a13565ec
--- /dev/null
+++ b/docs/data/material/components/stack/demos/flexbox-gap/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FlexboxGapStack from './FlexboxGapStack';
+
+export default createDemo(import.meta.url, FlexboxGapStack);
diff --git a/docs/data/material/components/stack/InteractiveStack.tsx b/docs/data/material/components/stack/demos/interactive/InteractiveStack.tsx
similarity index 99%
rename from docs/data/material/components/stack/InteractiveStack.tsx
rename to docs/data/material/components/stack/demos/interactive/InteractiveStack.tsx
index b73eaffc963168..16dfd45de624db 100644
--- a/docs/data/material/components/stack/InteractiveStack.tsx
+++ b/docs/data/material/components/stack/demos/interactive/InteractiveStack.tsx
@@ -10,6 +10,7 @@ import Stack, { StackProps } from '@mui/material/Stack';
 import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode';
 
 export default function InteractiveStack() {
+  // @focus-start @padding 1
   const [direction, setDirection] = React.useState('row');
   const [justifyContent, setJustifyContent] = React.useState('center');
   const [alignItems, setAlignItems] = React.useState('center');
@@ -198,4 +199,5 @@ export default function InteractiveStack() {
       
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/stack/demos/interactive/index.ts b/docs/data/material/components/stack/demos/interactive/index.ts
new file mode 100644
index 00000000000000..27085b57c29834
--- /dev/null
+++ b/docs/data/material/components/stack/demos/interactive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InteractiveStack from './InteractiveStack';
+
+export default createDemo(import.meta.url, InteractiveStack);
diff --git a/docs/data/material/components/stack/ResponsiveStack.tsx b/docs/data/material/components/stack/demos/responsive/ResponsiveStack.tsx
similarity index 93%
rename from docs/data/material/components/stack/ResponsiveStack.tsx
rename to docs/data/material/components/stack/demos/responsive/ResponsiveStack.tsx
index 8748fc90e12fb1..a29709cf63862e 100644
--- a/docs/data/material/components/stack/ResponsiveStack.tsx
+++ b/docs/data/material/components/stack/demos/responsive/ResponsiveStack.tsx
@@ -16,6 +16,7 @@ const Item = styled(Paper)(({ theme }) => ({
 export default function ResponsiveStack() {
   return (
     
    
+      {/* @focus-start */}
       Item 2
         Item 3
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/stack/demos/responsive/index.ts b/docs/data/material/components/stack/demos/responsive/index.ts
new file mode 100644
index 00000000000000..b10cdefd6ac9d5
--- /dev/null
+++ b/docs/data/material/components/stack/demos/responsive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ResponsiveStack from './ResponsiveStack';
+
+export default createDemo(import.meta.url, ResponsiveStack);
diff --git a/docs/data/material/components/stack/ZeroWidthStack.tsx b/docs/data/material/components/stack/demos/zero-width/ZeroWidthStack.tsx
similarity index 96%
rename from docs/data/material/components/stack/ZeroWidthStack.tsx
rename to docs/data/material/components/stack/demos/zero-width/ZeroWidthStack.tsx
index 11d05a932b5e22..07897efa78a712 100644
--- a/docs/data/material/components/stack/ZeroWidthStack.tsx
+++ b/docs/data/material/components/stack/demos/zero-width/ZeroWidthStack.tsx
@@ -23,6 +23,7 @@ const message = `Truncation should be conditionally applicable on this long line
 export default function ZeroWidthStack() {
   return (
     
+      {/* @focus-start */}
       
         
           W
@@ -39,6 +40,7 @@ export default function ZeroWidthStack() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/stack/demos/zero-width/index.ts b/docs/data/material/components/stack/demos/zero-width/index.ts
new file mode 100644
index 00000000000000..0475c3cb7f41d5
--- /dev/null
+++ b/docs/data/material/components/stack/demos/zero-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ZeroWidthStack from './ZeroWidthStack';
+
+export default createDemo(import.meta.url, ZeroWidthStack);
diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md
index ecee7a0b1a5f00..310cc190d4889e 100644
--- a/docs/data/material/components/stack/stack.md
+++ b/docs/data/material/components/stack/stack.md
@@ -32,7 +32,7 @@ Use the `spacing` prop to control the space between children.
 The spacing value can be any number, including decimals, or a string.
 (The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.)
 
-{{"demo": "BasicStack.js", "bg": true}}
+{{"component": "../data/material/components/stack/demos/basic/index.ts", "bg": true}}
 
 ### Stack vs. Grid
 
@@ -43,20 +43,20 @@ The spacing value can be any number, including decimals, or a string.
 By default, Stack arranges items vertically in a column.
 Use the `direction` prop to position items horizontally in a row:
 
-{{"demo": "DirectionStack.js", "bg": true}}
+{{"component": "../data/material/components/stack/demos/direction/index.ts", "bg": true}}
 
 ## Dividers
 
 Use the `divider` prop to insert an element between each child.
 This works particularly well with the [Divider](/material-ui/react-divider/) component, as shown below:
 
-{{"demo": "DividerStack.js", "bg": true}}
+{{"component": "../data/material/components/stack/demos/divider/index.ts", "bg": true}}
 
 ## Responsive values
 
 You can switch the `direction` or `spacing` values based on the active breakpoint.
 
-{{"demo": "ResponsiveStack.js", "bg": true}}
+{{"component": "../data/material/components/stack/demos/responsive/index.ts", "bg": true}}
 
 ## Flexbox gap
 
@@ -66,7 +66,7 @@ It removes the [known limitations](#limitations) of the default implementation t
 
 We recommend checking the [support percentage](https://caniuse.com/?search=flex%20gap) before using it.
 
-{{"demo": "FlexboxGapStack.js", "bg": true}}
+{{"component": "../data/material/components/stack/demos/flexbox-gap/index.ts", "bg": true}}
 
 To set the prop to all stack instances, create a theme with default props:
 
@@ -97,7 +97,7 @@ function App() {
 
 Below is an interactive demo that lets you explore the visual results of the different settings:
 
-{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}}
+{{"component": "../data/material/components/stack/demos/interactive/index.ts", "hideToolbar": true, "bg": true}}
 
 ## Customization
 
@@ -146,7 +146,7 @@ In order for the item to stay within the container you need to set `min-width: 0
   
 ```
 
-{{"demo": "ZeroWidthStack.js", "bg": true}}
+{{"component": "../data/material/components/stack/demos/zero-width/index.ts", "bg": true}}
 
 ## Anatomy
 
diff --git a/docs/data/material/components/steppers/CustomizedSteppers.js b/docs/data/material/components/steppers/CustomizedSteppers.js
deleted file mode 100644
index f8b86949bed8a8..00000000000000
--- a/docs/data/material/components/steppers/CustomizedSteppers.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import Check from '@mui/icons-material/Check';
-import SettingsIcon from '@mui/icons-material/Settings';
-import GroupAddIcon from '@mui/icons-material/GroupAdd';
-import VideoLabelIcon from '@mui/icons-material/VideoLabel';
-import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
-
-const QontoConnector = styled(StepConnector)(({ theme }) => ({
-  [`&.${stepConnectorClasses.alternativeLabel}`]: {
-    top: 10,
-    left: 'calc(-50% + 16px)',
-    right: 'calc(50% + 16px)',
-  },
-  [`&.${stepConnectorClasses.active}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      borderColor: '#784af4',
-    },
-  },
-  [`&.${stepConnectorClasses.completed}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      borderColor: '#784af4',
-    },
-  },
-  [`& .${stepConnectorClasses.line}`]: {
-    borderColor: '#eaeaf0',
-    borderTopWidth: 3,
-    borderRadius: 1,
-    ...theme.applyStyles('dark', {
-      borderColor: theme.palette.grey[800],
-    }),
-  },
-}));
-
-const QontoStepIconRoot = styled('div')(({ theme }) => ({
-  color: '#eaeaf0',
-  display: 'flex',
-  height: 22,
-  alignItems: 'center',
-  '& .QontoStepIcon-completedIcon': {
-    color: '#784af4',
-    zIndex: 1,
-    fontSize: 18,
-  },
-  '& .QontoStepIcon-circle': {
-    width: 8,
-    height: 8,
-    borderRadius: '50%',
-    backgroundColor: 'currentColor',
-  },
-  ...theme.applyStyles('dark', {
-    color: theme.palette.grey[700],
-  }),
-  variants: [
-    {
-      props: ({ ownerState }) => ownerState.active,
-      style: {
-        color: '#784af4',
-      },
-    },
-  ],
-}));
-
-function QontoStepIcon(props) {
-  const { active, completed, className } = props;
-
-  return (
-    
-      {completed ? (
-        
-      ) : (
-        
    
-      )}
-    
-  );
-}
-
-QontoStepIcon.propTypes = {
-  /**
-   * Whether this step is active.
-   * @default false
-   */
-  active: PropTypes.bool,
-  className: PropTypes.string,
-  /**
-   * Mark the step as completed. Is passed to child components.
-   * @default false
-   */
-  completed: PropTypes.bool,
-};
-
-const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
-  [`&.${stepConnectorClasses.alternativeLabel}`]: {
-    top: 22,
-  },
-  [`&.${stepConnectorClasses.active}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      backgroundImage:
-        'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
-    },
-  },
-  [`&.${stepConnectorClasses.completed}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      backgroundImage:
-        'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
-    },
-  },
-  [`& .${stepConnectorClasses.line}`]: {
-    height: 3,
-    border: 0,
-    backgroundColor: '#eaeaf0',
-    borderRadius: 1,
-    ...theme.applyStyles('dark', {
-      backgroundColor: theme.palette.grey[800],
-    }),
-  },
-}));
-
-const ColorlibStepIconRoot = styled('div')(({ theme }) => ({
-  backgroundColor: '#ccc',
-  zIndex: 1,
-  color: '#fff',
-  width: 50,
-  height: 50,
-  display: 'flex',
-  borderRadius: '50%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  ...theme.applyStyles('dark', {
-    backgroundColor: theme.palette.grey[700],
-  }),
-  variants: [
-    {
-      props: ({ ownerState }) => ownerState.active,
-      style: {
-        backgroundImage:
-          'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
-        boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
-      },
-    },
-    {
-      props: ({ ownerState }) => ownerState.completed,
-      style: {
-        backgroundImage:
-          'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
-      },
-    },
-  ],
-}));
-
-function ColorlibStepIcon(props) {
-  const { active, completed, className } = props;
-
-  const icons = {
-    1: ,
-    2: ,
-    3: ,
-  };
-
-  return (
-    
-      {icons[String(props.icon)]}
-    
-  );
-}
-
-ColorlibStepIcon.propTypes = {
-  /**
-   * Whether this step is active.
-   * @default false
-   */
-  active: PropTypes.bool,
-  className: PropTypes.string,
-  /**
-   * Mark the step as completed. Is passed to child components.
-   * @default false
-   */
-  completed: PropTypes.bool,
-  /**
-   * The label displayed in the step icon.
-   */
-  icon: PropTypes.node,
-};
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function CustomizedSteppers() {
-  return (
-    
-      }>
-        {steps.map((label) => (
-          
-            {label}
-          
-        ))}
-      
-      }>
-        {steps.map((label) => (
-          
-            {label}
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx.preview b/docs/data/material/components/steppers/CustomizedSteppers.tsx.preview
deleted file mode 100644
index 5448dc5701c1a4..00000000000000
--- a/docs/data/material/components/steppers/CustomizedSteppers.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-}>
-  {steps.map((label) => (
-    
-      {label}
-    
-  ))}
-
-}>
-  {steps.map((label) => (
-    
-      {label}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/steppers/DotsMobileStepper.js b/docs/data/material/components/steppers/DotsMobileStepper.js
deleted file mode 100644
index 43010553bb60aa..00000000000000
--- a/docs/data/material/components/steppers/DotsMobileStepper.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import MobileStepper from '@mui/material/MobileStepper';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-
-const steps = 6;
-
-export default function DotsMobileStepper() {
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = React.useState(0);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const nextButtonRef = React.useRef(null);
-  const backButtonRef = React.useRef(null);
-  const previousActiveStepRef = React.useRef(activeStep);
-
-  // Manage focus when the active step changes.
-  React.useEffect(() => {
-    const previousActiveStep = previousActiveStepRef.current;
-    previousActiveStepRef.current = activeStep;
-
-    if (activeStep === 0 && previousActiveStep === 1) {
-      // If the user is going back to the first step, focus the "Next" button.
-      nextButtonRef.current.focus();
-      return;
-    }
-    if (activeStep === steps - 1 && previousActiveStep === steps - 2) {
-      // If the user is going to the last step, focus the "Back" button.
-      backButtonRef.current.focus();
-    }
-  }, [activeStep]);
-
-  return (
-    
-          Next
-          {theme.direction === 'rtl' ? (
-            
-          ) : (
-            
-          )}
-        
-      }
-      backButton={
-        
-      }
-    />
-  );
-}
diff --git a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js
deleted file mode 100644
index 47c0714a8a6edd..00000000000000
--- a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-
-const steps = [
-  'Select master blaster campaign settings',
-  'Create an ad group',
-  'Create an ad',
-];
-
-export default function HorizontalLinearAlternativeLabelStepper() {
-  return (
-    
-      
-        {steps.map((label) => (
-          
-            {label}
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview b/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview
deleted file mode 100644
index f56572d3978e78..00000000000000
--- a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-  {steps.map((label) => (
-    
-      {label}
-    
-  ))}
-
\ No newline at end of file
diff --git a/docs/data/material/components/steppers/HorizontalLinearStepper.js b/docs/data/material/components/steppers/HorizontalLinearStepper.js
deleted file mode 100644
index 86a9e45eb6b50e..00000000000000
--- a/docs/data/material/components/steppers/HorizontalLinearStepper.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function HorizontalLinearStepper() {
-  const [activeStep, setActiveStep] = React.useState(0);
-  const [skipped, setSkipped] = React.useState(new Set());
-
-  const isStepOptional = React.useCallback((step) => {
-    return step === 1;
-  }, []);
-
-  const isStepSkipped = (step) => {
-    return skipped.has(step);
-  };
-
-  const handleNext = () => {
-    let newSkipped = skipped;
-    if (isStepSkipped(activeStep)) {
-      newSkipped = new Set(newSkipped.values());
-      newSkipped.delete(activeStep);
-    }
-
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    setSkipped(newSkipped);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleSkip = () => {
-    if (!isStepOptional(activeStep)) {
-      // You probably want to guard against something like this,
-      // it should never occur unless someone's actively trying to break something.
-      throw new Error("You can't skip a step that isn't optional.");
-    }
-
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    setSkipped((prevSkipped) => {
-      const newSkipped = new Set(prevSkipped.values());
-      newSkipped.add(activeStep);
-      return newSkipped;
-    });
-  };
-
-  const handleReset = () => {
-    setActiveStep(0);
-  };
-
-  const previousActiveStepRef = React.useRef(activeStep);
-  const resetButtonRef = React.useRef(null);
-  const nextButtonRef = React.useRef(null);
-
-  // Manage focus when the active step changes.
-  React.useEffect(() => {
-    const previousActiveStep = previousActiveStepRef.current;
-    previousActiveStepRef.current = activeStep;
-
-    if (activeStep === steps.length) {
-      // If the user has completed all steps and hits "Finish", focus the "Reset" button.
-      resetButtonRef.current.focus();
-      return;
-    }
-    if (activeStep === 0 && previousActiveStep === steps.length) {
-      // If the user has completed all steps and hits "Reset", focus the "Next" button.
-      nextButtonRef.current.focus();
-      return;
-    }
-    if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) {
-      // If the user hits "Skip" and the next step is not optional, focus the "Next" button.
-      nextButtonRef.current.focus();
-    }
-  }, [activeStep, isStepOptional]);
-
-  return (
-    
-      
-        {steps.map((label, index) => {
-          const stepProps = {};
-          const labelProps = {};
-          if (isStepOptional(index)) {
-            labelProps.optional = (
-              Optional
-            );
-          }
-          if (isStepSkipped(index)) {
-            stepProps.completed = false;
-          }
-          return (
-            
-              {label}
-            
-          );
-        })}
-      
-      {activeStep === steps.length ? (
-        
-          
-            All steps completed - you're finished
-          
-          
-            
-            
-          
-        
-      ) : (
-        
-          Step {activeStep + 1}
-          
-            
-            
-            {isStepOptional(activeStep) && (
-              
-            )}
-            
-          
-        
-      )}
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/HorizontalNonLinearStepper.js b/docs/data/material/components/steppers/HorizontalNonLinearStepper.js
deleted file mode 100644
index a9a026c7006617..00000000000000
--- a/docs/data/material/components/steppers/HorizontalNonLinearStepper.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepButton from '@mui/material/StepButton';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function HorizontalNonLinearStepper() {
-  const [activeStep, setActiveStep] = React.useState(0);
-  const [completed, setCompleted] = React.useState({});
-
-  const totalSteps = steps.length;
-  const completedSteps = Object.keys(completed).length;
-  const isLastStep = activeStep === totalSteps - 1;
-  const allStepsCompleted = completedSteps === totalSteps;
-
-  const handleNext = () => {
-    const newActiveStep =
-      isLastStep && !allStepsCompleted
-        ? // It's the last step, but not all steps have been completed,
-          // find the first step that has not been completed
-          steps.findIndex((_step, i) => !(i in completed))
-        : activeStep + 1;
-    setActiveStep(newActiveStep);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleStep = (step) => () => {
-    setActiveStep(step);
-  };
-
-  const handleComplete = () => {
-    setCompleted({
-      ...completed,
-      [activeStep]: true,
-    });
-    handleNext();
-  };
-
-  const handleReset = () => {
-    setActiveStep(0);
-    setCompleted({});
-  };
-
-  const resetButtonRef = React.useRef(null);
-  const nextButtonRef = React.useRef(null);
-  const previousActiveStepRef = React.useRef(activeStep);
-  const previousCompletedRef = React.useRef(completed);
-
-  // Manage focus when the completed steps change.
-  React.useEffect(() => {
-    const previousCompleted = previousCompletedRef.current;
-    previousCompletedRef.current = completed;
-
-    if (allStepsCompleted) {
-      // If the user has completed all steps and hits "Finish", focus the "Reset" button.
-      resetButtonRef.current.focus();
-      return;
-    }
-
-    if (
-      Object.keys(completed).length === 0 &&
-      Object.keys(previousCompleted).length !== 0
-    ) {
-      // If the user has completed all steps and hits "Reset", focus the "Next" button.
-      nextButtonRef.current.focus();
-    }
-  }, [completed, allStepsCompleted]);
-
-  // Manage focus when the active step changes.
-  React.useEffect(() => {
-    if (activeStep === 0 && previousActiveStepRef.current === 1) {
-      // If the user navigated to first step via "Back" button, focus the "Next" button.
-      nextButtonRef.current.focus();
-    }
-
-    previousActiveStepRef.current = activeStep;
-  }, [activeStep]);
-
-  return (
-    
-      
-        {steps.map((label, index) => (
-          
-            
-              {label}
-            
-          
-        ))}
-      
-      
    
-        {allStepsCompleted ? (
-          
-            
-              All steps completed - you're finished
-            
-            
-              
-              
-            
-          
-        ) : (
-          
-            
-              Step {activeStep + 1}
-            
-            
-              
-              
-              
-              {activeStep !== steps.length &&
-                (completed[activeStep] ? (
-                  
-                    Step {activeStep + 1} already completed
-                  
-                ) : (
-                  
-                ))}
-            
-          
-        )}
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/steppers/HorizontalStepperWithError.js b/docs/data/material/components/steppers/HorizontalStepperWithError.js
deleted file mode 100644
index 3827ba627ea271..00000000000000
--- a/docs/data/material/components/steppers/HorizontalStepperWithError.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import Typography from '@mui/material/Typography';
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function HorizontalStepperWithError() {
-  const isStepFailed = (step) => {
-    return step === 1;
-  };
-
-  return (
-    
-      
-        {steps.map((label, index) => {
-          const labelProps = {};
-          if (isStepFailed(index)) {
-            labelProps.optional = (
-              
-                Alert message
-              
-            );
-
-            labelProps.error = true;
-          }
-
-          return (
-            
-              {label}
-            
-          );
-        })}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/ProgressMobileStepper.js b/docs/data/material/components/steppers/ProgressMobileStepper.js
deleted file mode 100644
index 68e89fe7d468f1..00000000000000
--- a/docs/data/material/components/steppers/ProgressMobileStepper.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import MobileStepper from '@mui/material/MobileStepper';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-
-export default function ProgressMobileStepper() {
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = React.useState(0);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const nextButtonRef = React.useRef(null);
-  const backButtonRef = React.useRef(null);
-  const previousActiveStepRef = React.useRef(activeStep);
-
-  // Manage focus when the active step changes.
-  React.useEffect(() => {
-    const previousActiveStep = previousActiveStepRef.current;
-
-    if (activeStep === 0 && previousActiveStep === 1) {
-      // If the user is going back to the first step, focus the "Next" button.
-      nextButtonRef.current.focus();
-    } else if (activeStep === 5 && previousActiveStep === 4) {
-      // If the user is going to the last step, focus the "Back" button.
-      backButtonRef.current.focus();
-    }
-
-    previousActiveStepRef.current = activeStep;
-  }, [activeStep]);
-
-  return (
-    
-          Next
-          {theme.direction === 'rtl' ? (
-            
-          ) : (
-            
-          )}
-        
-      }
-      backButton={
-        
-      }
-    />
-  );
-}
diff --git a/docs/data/material/components/steppers/TextMobileStepper.js b/docs/data/material/components/steppers/TextMobileStepper.js
deleted file mode 100644
index 93e03baf878be7..00000000000000
--- a/docs/data/material/components/steppers/TextMobileStepper.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
-import MobileStepper from '@mui/material/MobileStepper';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-
-const steps = [
-  {
-    label: 'Select campaign settings',
-    description: `For each ad campaign that you create, you can control how much
-              you're willing to spend on clicks and conversions, which networks
-              and geographical locations you want your ads to show on, and more.`,
-  },
-  {
-    label: 'Create an ad group',
-    description:
-      'An ad group contains one or more ads which target a shared set of keywords.',
-  },
-  {
-    label: 'Create an ad',
-    description: `Try out different ad text to see what brings in the most customers,
-              and learn how to enhance your ads using features like ad extensions.
-              If you run into any problems with your ads, find out how to tell if
-              they're running and how to resolve approval issues.`,
-  },
-];
-
-export default function TextMobileStepper() {
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = React.useState(0);
-  const maxSteps = steps.length;
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const nextButtonRef = React.useRef(null);
-  const backButtonRef = React.useRef(null);
-  const previousActiveStepRef = React.useRef(activeStep);
-
-  // Manage focus when the active step changes.
-  React.useEffect(() => {
-    const previousActiveStep = previousActiveStepRef.current;
-    previousActiveStepRef.current = activeStep;
-
-    if (activeStep === 0 && previousActiveStep === 1) {
-      // If the user is going back to the first step, focus the "Next" button.
-      nextButtonRef.current.focus();
-      return;
-    }
-
-    if (activeStep === maxSteps - 1 && previousActiveStep === maxSteps - 2) {
-      // If the user is going to the last step, focus the "Back" button.
-      backButtonRef.current.focus();
-    }
-  }, [activeStep, maxSteps]);
-
-  return (
-    
-      
-        {steps[activeStep].label}
-      
-      
-        {steps[activeStep].description}
-      
-      
-            Next
-            {theme.direction === 'rtl' ? (
-              
-            ) : (
-              
-            )}
-          
-        }
-        backButton={
-          
-        }
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js b/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js
deleted file mode 100644
index ac340f4e8715cb..00000000000000
--- a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import StepContent from '@mui/material/StepContent';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-
-const steps = [
-  {
-    label: 'Select campaign settings',
-    description: `For each ad campaign that you create, you can control how much
-              you're willing to spend on clicks and conversions, which networks
-              and geographical locations you want your ads to show on, and more.`,
-  },
-  {
-    label: 'Create an ad group',
-    description:
-      'An ad group contains one or more ads which target a shared set of keywords.',
-  },
-  {
-    label: 'Create an ad',
-    description: `Try out different ad text to see what brings in the most customers,
-              and learn how to enhance your ads using features like ad extensions.
-              If you run into any problems with your ads, find out how to tell if
-              they're running and how to resolve approval issues.`,
-  },
-];
-
-export default function VerticalLinearAlternativeLabelStepper() {
-  const [activeStep, setActiveStep] = React.useState(0);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleReset = () => {
-    setActiveStep(0);
-  };
-
-  return (
-    
-      
-        {steps.map((step, index) => (
-          
-            Last step
-                ) : null
-              }
-            >
-              {step.label}
-            
-            
-              {step.description}
-              
-                
-                
-              
-            
-          
-        ))}
-      
-      {activeStep === steps.length && (
-        
-          All steps completed - you're finished
-          
-        
-      )}
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.js b/docs/data/material/components/steppers/VerticalLinearStepper.js
deleted file mode 100644
index 0b5f81e987795c..00000000000000
--- a/docs/data/material/components/steppers/VerticalLinearStepper.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import StepContent from '@mui/material/StepContent';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-
-const steps = [
-  {
-    label: 'Select campaign settings',
-    description: `For each ad campaign that you create, you can control how much
-              you're willing to spend on clicks and conversions, which networks
-              and geographical locations you want your ads to show on, and more.`,
-  },
-  {
-    label: 'Create an ad group',
-    description:
-      'An ad group contains one or more ads which target a shared set of keywords.',
-  },
-  {
-    label: 'Create an ad',
-    description: `Try out different ad text to see what brings in the most customers,
-              and learn how to enhance your ads using features like ad extensions.
-              If you run into any problems with your ads, find out how to tell if
-              they're running and how to resolve approval issues.`,
-  },
-];
-
-export default function VerticalLinearStepper() {
-  const [activeStep, setActiveStep] = React.useState(0);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleReset = () => {
-    setActiveStep(0);
-  };
-
-  const previousActiveStepRef = React.useRef(activeStep);
-  const continueButtonRef = React.useRef(null);
-  const backButtonRef = React.useRef(null);
-  const resetButtonRef = React.useRef(null);
-
-  // Manage focus when the active step changes.
-  React.useEffect(() => {
-    const previousActiveStep = previousActiveStepRef.current;
-    previousActiveStepRef.current = activeStep;
-
-    // If the user is going forward.
-    if (previousActiveStep < activeStep) {
-      if (activeStep === steps.length) {
-        // If the user has completed all steps and hits "Finish", focus the "Reset" button.
-        resetButtonRef.current.focus();
-      } else {
-        // Focus the "Continue" button otherwise.
-        continueButtonRef.current.focus();
-      }
-      return;
-    }
-    // Otherwise, the user is going back.
-
-    if (activeStep === 0) {
-      // If the user hit "Back" on the second step, or hit "Reset", focus the "Continue" button.
-      continueButtonRef.current.focus();
-      return;
-    }
-
-    // Focus the "Back" button otherwise.
-    backButtonRef.current.focus();
-  }, [activeStep]);
-
-  return (
-    
-      
-        {steps.map((step, index) => (
-          
-            Last step
-                ) : null
-              }
-            >
-              {step.label}
-            
-            
-              {step.description}
-              
-                
-                {index !== 0 && (
-                  
-                )}
-              
-            
-          
-        ))}
-      
-      {activeStep === steps.length && (
-        
-          All steps completed - you're finished
-          
-        
-      )}
-    
-  );
-}
diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx b/docs/data/material/components/steppers/demos/customized/CustomizedSteppers.tsx
similarity index 99%
rename from docs/data/material/components/steppers/CustomizedSteppers.tsx
rename to docs/data/material/components/steppers/demos/customized/CustomizedSteppers.tsx
index de27716a81a489..090dd79039c142 100644
--- a/docs/data/material/components/steppers/CustomizedSteppers.tsx
+++ b/docs/data/material/components/steppers/demos/customized/CustomizedSteppers.tsx
@@ -164,6 +164,7 @@ const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']
 export default function CustomizedSteppers() {
   return (
     
+      {/* @focus-start */}
       }>
         {steps.map((label) => (
           
@@ -178,6 +179,7 @@ export default function CustomizedSteppers() {
           
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/steppers/demos/customized/index.ts b/docs/data/material/components/steppers/demos/customized/index.ts
new file mode 100644
index 00000000000000..f91f4ec6b03b89
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedSteppers from './CustomizedSteppers';
+
+export default createDemo(import.meta.url, CustomizedSteppers);
diff --git a/docs/data/material/components/steppers/DotsMobileStepper.tsx b/docs/data/material/components/steppers/demos/dots-mobile/DotsMobileStepper.tsx
similarity index 98%
rename from docs/data/material/components/steppers/DotsMobileStepper.tsx
rename to docs/data/material/components/steppers/demos/dots-mobile/DotsMobileStepper.tsx
index b7fe84f9502011..e36b50cf42177c 100644
--- a/docs/data/material/components/steppers/DotsMobileStepper.tsx
+++ b/docs/data/material/components/steppers/demos/dots-mobile/DotsMobileStepper.tsx
@@ -8,6 +8,7 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 const steps = 6;
 
 export default function DotsMobileStepper() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
 
@@ -83,4 +84,5 @@ export default function DotsMobileStepper() {
       }
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/dots-mobile/index.ts b/docs/data/material/components/steppers/demos/dots-mobile/index.ts
new file mode 100644
index 00000000000000..78827f1513cdc2
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/dots-mobile/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DotsMobileStepper from './DotsMobileStepper';
+
+export default createDemo(import.meta.url, DotsMobileStepper);
diff --git a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/HorizontalLinearAlternativeLabelStepper.tsx
similarity index 92%
rename from docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx
rename to docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/HorizontalLinearAlternativeLabelStepper.tsx
index 47c0714a8a6edd..35b5c92b370463 100644
--- a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx
+++ b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/HorizontalLinearAlternativeLabelStepper.tsx
@@ -12,6 +12,7 @@ const steps = [
 export default function HorizontalLinearAlternativeLabelStepper() {
   return (
     
+      {/* @focus-start */}
       
         {steps.map((label) => (
           
@@ -19,6 +20,7 @@ export default function HorizontalLinearAlternativeLabelStepper() {
           
         ))}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts
new file mode 100644
index 00000000000000..8039d4abfa162d
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HorizontalLinearAlternativeLabelStepper from './HorizontalLinearAlternativeLabelStepper';
+
+export default createDemo(import.meta.url, HorizontalLinearAlternativeLabelStepper);
diff --git a/docs/data/material/components/steppers/HorizontalLinearStepper.tsx b/docs/data/material/components/steppers/demos/horizontal-linear/HorizontalLinearStepper.tsx
similarity index 99%
rename from docs/data/material/components/steppers/HorizontalLinearStepper.tsx
rename to docs/data/material/components/steppers/demos/horizontal-linear/HorizontalLinearStepper.tsx
index 66a788090f93d9..5472bd6e0347bc 100644
--- a/docs/data/material/components/steppers/HorizontalLinearStepper.tsx
+++ b/docs/data/material/components/steppers/demos/horizontal-linear/HorizontalLinearStepper.tsx
@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography';
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalLinearStepper() {
+  // @focus-start @padding 1
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set());
 
@@ -140,4 +141,5 @@ export default function HorizontalLinearStepper() {
       )}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/horizontal-linear/index.ts b/docs/data/material/components/steppers/demos/horizontal-linear/index.ts
new file mode 100644
index 00000000000000..2d88251ca10c83
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/horizontal-linear/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HorizontalLinearStepper from './HorizontalLinearStepper';
+
+export default createDemo(import.meta.url, HorizontalLinearStepper);
diff --git a/docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx b/docs/data/material/components/steppers/demos/horizontal-non-linear/HorizontalNonLinearStepper.tsx
similarity index 99%
rename from docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx
rename to docs/data/material/components/steppers/demos/horizontal-non-linear/HorizontalNonLinearStepper.tsx
index b88260f4b7a3c9..3c76be02e2d707 100644
--- a/docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx
+++ b/docs/data/material/components/steppers/demos/horizontal-non-linear/HorizontalNonLinearStepper.tsx
@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography';
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalNonLinearStepper() {
+  // @focus-start @padding 1
   const [activeStep, setActiveStep] = React.useState(0);
   const [completed, setCompleted] = React.useState<{
     [k: number]: boolean;
@@ -147,4 +148,5 @@ export default function HorizontalNonLinearStepper() {
       
    
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts b/docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts
new file mode 100644
index 00000000000000..9c6f56a14d8a7d
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HorizontalNonLinearStepper from './HorizontalNonLinearStepper';
+
+export default createDemo(import.meta.url, HorizontalNonLinearStepper);
diff --git a/docs/data/material/components/steppers/HorizontalStepperWithError.tsx b/docs/data/material/components/steppers/demos/horizontal-with-error/HorizontalStepperWithError.tsx
similarity index 96%
rename from docs/data/material/components/steppers/HorizontalStepperWithError.tsx
rename to docs/data/material/components/steppers/demos/horizontal-with-error/HorizontalStepperWithError.tsx
index 47b41eefe0c176..14a69174d0c399 100644
--- a/docs/data/material/components/steppers/HorizontalStepperWithError.tsx
+++ b/docs/data/material/components/steppers/demos/horizontal-with-error/HorizontalStepperWithError.tsx
@@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography';
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalStepperWithError() {
+  // @focus-start @padding 1
   const isStepFailed = (step: number) => {
     return step === 1;
   };
@@ -38,4 +39,5 @@ export default function HorizontalStepperWithError() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/horizontal-with-error/index.ts b/docs/data/material/components/steppers/demos/horizontal-with-error/index.ts
new file mode 100644
index 00000000000000..820ac5a202c027
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/horizontal-with-error/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HorizontalStepperWithError from './HorizontalStepperWithError';
+
+export default createDemo(import.meta.url, HorizontalStepperWithError);
diff --git a/docs/data/material/components/steppers/ProgressMobileStepper.tsx b/docs/data/material/components/steppers/demos/progress-mobile/ProgressMobileStepper.tsx
similarity index 98%
rename from docs/data/material/components/steppers/ProgressMobileStepper.tsx
rename to docs/data/material/components/steppers/demos/progress-mobile/ProgressMobileStepper.tsx
index 0115ca7793ea78..0315a17a4842ed 100644
--- a/docs/data/material/components/steppers/ProgressMobileStepper.tsx
+++ b/docs/data/material/components/steppers/demos/progress-mobile/ProgressMobileStepper.tsx
@@ -6,6 +6,7 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 
 export default function ProgressMobileStepper() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
 
@@ -80,4 +81,5 @@ export default function ProgressMobileStepper() {
       }
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/progress-mobile/index.ts b/docs/data/material/components/steppers/demos/progress-mobile/index.ts
new file mode 100644
index 00000000000000..50ffbe9c952000
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/progress-mobile/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ProgressMobileStepper from './ProgressMobileStepper';
+
+export default createDemo(import.meta.url, ProgressMobileStepper);
diff --git a/docs/data/material/components/steppers/TextMobileStepper.tsx b/docs/data/material/components/steppers/demos/text-mobile/TextMobileStepper.tsx
similarity index 98%
rename from docs/data/material/components/steppers/TextMobileStepper.tsx
rename to docs/data/material/components/steppers/demos/text-mobile/TextMobileStepper.tsx
index cc5cc9731206ab..e980f4c5e5ee5d 100644
--- a/docs/data/material/components/steppers/TextMobileStepper.tsx
+++ b/docs/data/material/components/steppers/demos/text-mobile/TextMobileStepper.tsx
@@ -30,6 +30,7 @@ const steps = [
 ];
 
 export default function TextMobileStepper() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
   const maxSteps = steps.length;
@@ -119,4 +120,5 @@ export default function TextMobileStepper() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/text-mobile/index.ts b/docs/data/material/components/steppers/demos/text-mobile/index.ts
new file mode 100644
index 00000000000000..c7b6e1983a02c3
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/text-mobile/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TextMobileStepper from './TextMobileStepper';
+
+export default createDemo(import.meta.url, TextMobileStepper);
diff --git a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.tsx b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/VerticalLinearAlternativeLabelStepper.tsx
similarity index 98%
rename from docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.tsx
rename to docs/data/material/components/steppers/demos/vertical-linear-alternative-label/VerticalLinearAlternativeLabelStepper.tsx
index ac340f4e8715cb..99477849f6f9ee 100644
--- a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.tsx
+++ b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/VerticalLinearAlternativeLabelStepper.tsx
@@ -30,6 +30,7 @@ const steps = [
 ];
 
 export default function VerticalLinearAlternativeLabelStepper() {
+  // @focus-start @padding 1
   const [activeStep, setActiveStep] = React.useState(0);
 
   const handleNext = () => {
@@ -90,4 +91,5 @@ export default function VerticalLinearAlternativeLabelStepper() {
       )}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts
new file mode 100644
index 00000000000000..22b08bc41c47aa
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalLinearAlternativeLabelStepper from './VerticalLinearAlternativeLabelStepper';
+
+export default createDemo(import.meta.url, VerticalLinearAlternativeLabelStepper);
diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.tsx b/docs/data/material/components/steppers/demos/vertical-linear/VerticalLinearStepper.tsx
similarity index 98%
rename from docs/data/material/components/steppers/VerticalLinearStepper.tsx
rename to docs/data/material/components/steppers/demos/vertical-linear/VerticalLinearStepper.tsx
index f173cdef88866a..b8f7d020ca58fc 100644
--- a/docs/data/material/components/steppers/VerticalLinearStepper.tsx
+++ b/docs/data/material/components/steppers/demos/vertical-linear/VerticalLinearStepper.tsx
@@ -30,6 +30,7 @@ const steps = [
 ];
 
 export default function VerticalLinearStepper() {
+  // @focus-start @padding 1
   const [activeStep, setActiveStep] = React.useState(0);
 
   const handleNext = () => {
@@ -126,4 +127,5 @@ export default function VerticalLinearStepper() {
       )}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/steppers/demos/vertical-linear/index.ts b/docs/data/material/components/steppers/demos/vertical-linear/index.ts
new file mode 100644
index 00000000000000..4f16df2bceac3a
--- /dev/null
+++ b/docs/data/material/components/steppers/demos/vertical-linear/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalLinearStepper from './VerticalLinearStepper';
+
+export default createDemo(import.meta.url, VerticalLinearStepper);
diff --git a/docs/data/material/components/steppers/steppers.md b/docs/data/material/components/steppers/steppers.md
index 97d2408251170e..fb9dea200a3fd0 100644
--- a/docs/data/material/components/steppers/steppers.md
+++ b/docs/data/material/components/steppers/steppers.md
@@ -60,7 +60,7 @@ The `Stepper` can be controlled by passing the current step index (zero-based) a
 
 This example also shows the use of an optional step by placing the `optional` prop on the second `Step` component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set `completed={false}` to signify that even though the active step index has gone beyond the optional step, it's not actually complete.
 
-{{"demo": "HorizontalLinearStepper.js"}}
+{{"component": "../data/material/components/steppers/demos/horizontal-linear/index.ts"}}
 
 ### Non-linear
 
@@ -74,36 +74,36 @@ determine when all steps are completed (or even if they need to be completed).
 
 Actionable steps mean that they control the content update of a section. From an accessibility standpoint, this means that each `StepButton` requires an `aria-controls` attribute pointing at the content section element.
 
-{{"demo": "HorizontalNonLinearStepper.js"}}
+{{"component": "../data/material/components/steppers/demos/horizontal-non-linear/index.ts"}}
 
 ### Alternative label
 
 Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
 
-{{"demo": "HorizontalLinearAlternativeLabelStepper.js"}}
+{{"component": "../data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts"}}
 
 ### Error step
 
-{{"demo": "HorizontalStepperWithError.js"}}
+{{"component": "../data/material/components/steppers/demos/horizontal-with-error/index.ts"}}
 
 ### Customized horizontal stepper
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedSteppers.js"}}
+{{"component": "../data/material/components/steppers/demos/customized/index.ts"}}
 
 ## Vertical stepper
 
 Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the features of the horizontal stepper can be implemented.
 
-{{"demo": "VerticalLinearStepper.js"}}
+{{"component": "../data/material/components/steppers/demos/vertical-linear/index.ts"}}
 
 ### Alternative label
 
 Use `alternativeLabel` prop on the vertical `Stepper` component to reverse the placement of the label and content.
 
-{{"demo": "VerticalLinearAlternativeLabelStepper.js"}}
+{{"component": "../data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts"}}
 
 ## Transition
 
@@ -129,16 +129,16 @@ The mobile stepper supports three variants to display progress through the avail
 
 The current step and total number of steps are displayed as text.
 
-{{"demo": "TextMobileStepper.js", "bg": true}}
+{{"component": "../data/material/components/steppers/demos/text-mobile/index.ts", "bg": true}}
 
 ### Dots
 
 Use dots when the number of steps is small.
 
-{{"demo": "DotsMobileStepper.js", "bg": true}}
+{{"component": "../data/material/components/steppers/demos/dots-mobile/index.ts", "bg": true}}
 
 ### Progress
 
 Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
 
-{{"demo": "ProgressMobileStepper.js", "bg": true}}
+{{"component": "../data/material/components/steppers/demos/progress-mobile/index.ts", "bg": true}}
diff --git a/docs/data/material/components/switches/BasicSwitches.js b/docs/data/material/components/switches/BasicSwitches.js
deleted file mode 100644
index 19469eb9ed2647..00000000000000
--- a/docs/data/material/components/switches/BasicSwitches.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Switch from '@mui/material/Switch';
-
-const label = { slotProps: { input: { 'aria-label': 'Switch demo' } } };
-
-export default function BasicSwitches() {
-  return (
-    
    
-      
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/switches/BasicSwitches.tsx.preview b/docs/data/material/components/switches/BasicSwitches.tsx.preview
deleted file mode 100644
index 98e1020e8367a0..00000000000000
--- a/docs/data/material/components/switches/BasicSwitches.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/switches/ColorSwitches.js b/docs/data/material/components/switches/ColorSwitches.js
deleted file mode 100644
index 5cfac499452c89..00000000000000
--- a/docs/data/material/components/switches/ColorSwitches.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { alpha, styled } from '@mui/material/styles';
-import { pink } from '@mui/material/colors';
-import Switch from '@mui/material/Switch';
-
-const PinkSwitch = styled(Switch)(({ theme }) => ({
-  '& .MuiSwitch-switchBase.Mui-checked': {
-    color: pink[600],
-    '&:hover': {
-      backgroundColor: alpha(pink[600], theme.palette.action.hoverOpacity),
-    },
-  },
-  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-    backgroundColor: pink[600],
-  },
-}));
-
-const label = { slotProps: { input: { 'aria-label': 'Color switch demo' } } };
-
-export default function ColorSwitches() {
-  return (
-    
    
-      
-      
-      
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/switches/ColorSwitches.tsx.preview b/docs/data/material/components/switches/ColorSwitches.tsx.preview
deleted file mode 100644
index b99a931dc275d3..00000000000000
--- a/docs/data/material/components/switches/ColorSwitches.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/switches/ControlledSwitches.js b/docs/data/material/components/switches/ControlledSwitches.js
deleted file mode 100644
index 60c65ea47ce4f0..00000000000000
--- a/docs/data/material/components/switches/ControlledSwitches.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import Switch from '@mui/material/Switch';
-
-export default function ControlledSwitches() {
-  const [checked, setChecked] = React.useState(true);
-
-  const handleChange = (event) => {
-    setChecked(event.target.checked);
-  };
-
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/switches/ControlledSwitches.tsx.preview b/docs/data/material/components/switches/ControlledSwitches.tsx.preview
deleted file mode 100644
index 2cc4ae088f2569..00000000000000
--- a/docs/data/material/components/switches/ControlledSwitches.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/switches/CustomizedSwitches.js b/docs/data/material/components/switches/CustomizedSwitches.js
deleted file mode 100644
index f4b1de73f582ac..00000000000000
--- a/docs/data/material/components/switches/CustomizedSwitches.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import { styled } from '@mui/material/styles';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-
-const MaterialUISwitch = styled(Switch)(({ theme }) => ({
-  width: 62,
-  height: 34,
-  padding: 7,
-  '& .MuiSwitch-switchBase': {
-    margin: 1,
-    padding: 0,
-    transform: 'translateX(6px)',
-    '&.Mui-checked': {
-      color: '#fff',
-      transform: 'translateX(22px)',
-      '& .MuiSwitch-thumb:before': {
-        backgroundImage: `url('data:image/svg+xml;utf8,')`,
-      },
-      '& + .MuiSwitch-track': {
-        opacity: 1,
-        backgroundColor: '#aab4be',
-        ...theme.applyStyles('dark', {
-          backgroundColor: '#8796A5',
-        }),
-      },
-    },
-  },
-  '& .MuiSwitch-thumb': {
-    backgroundColor: '#001e3c',
-    width: 32,
-    height: 32,
-    '&::before': {
-      content: "''",
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      left: 0,
-      top: 0,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      backgroundImage: `url('data:image/svg+xml;utf8,')`,
-    },
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#003892',
-    }),
-  },
-  '& .MuiSwitch-track': {
-    opacity: 1,
-    backgroundColor: '#aab4be',
-    borderRadius: 20 / 2,
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#8796A5',
-    }),
-  },
-}));
-
-const Android12Switch = styled(Switch)(({ theme }) => ({
-  padding: 8,
-  '& .MuiSwitch-track': {
-    borderRadius: 22 / 2,
-    '&::before, &::after': {
-      content: '""',
-      position: 'absolute',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      width: 16,
-      height: 16,
-    },
-    '&::before': {
-      backgroundImage: `url('data:image/svg+xml;utf8,')`,
-      left: 12,
-    },
-    '&::after': {
-      backgroundImage: `url('data:image/svg+xml;utf8,')`,
-      right: 12,
-    },
-  },
-  '& .MuiSwitch-thumb': {
-    boxShadow: 'none',
-    width: 16,
-    height: 16,
-    margin: 2,
-  },
-}));
-
-const IOSSwitch = styled((props) => (
-  
-))(({ theme }) => ({
-  width: 42,
-  height: 26,
-  padding: 0,
-  '& .MuiSwitch-switchBase': {
-    padding: 0,
-    margin: 2,
-    transitionDuration: '300ms',
-    '&.Mui-checked': {
-      transform: 'translateX(16px)',
-      color: '#fff',
-      '& + .MuiSwitch-track': {
-        backgroundColor: '#65C466',
-        opacity: 1,
-        border: 0,
-        ...theme.applyStyles('dark', {
-          backgroundColor: '#2ECA45',
-        }),
-      },
-      '&.Mui-disabled + .MuiSwitch-track': {
-        opacity: 0.5,
-      },
-    },
-    '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#33cf4d',
-      border: '6px solid #fff',
-    },
-    '&.Mui-disabled .MuiSwitch-thumb': {
-      color: theme.palette.grey[100],
-      ...theme.applyStyles('dark', {
-        color: theme.palette.grey[600],
-      }),
-    },
-    '&.Mui-disabled + .MuiSwitch-track': {
-      opacity: 0.7,
-      ...theme.applyStyles('dark', {
-        opacity: 0.3,
-      }),
-    },
-  },
-  '& .MuiSwitch-thumb': {
-    boxSizing: 'border-box',
-    width: 22,
-    height: 22,
-  },
-  '& .MuiSwitch-track': {
-    borderRadius: 26 / 2,
-    backgroundColor: '#E9E9EA',
-    opacity: 1,
-    transition: theme.transitions.create(['background-color'], {
-      duration: 500,
-    }),
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#39393D',
-    }),
-  },
-}));
-
-const AntSwitch = styled(Switch)(({ theme }) => ({
-  width: 28,
-  height: 16,
-  padding: 0,
-  display: 'flex',
-  '&:active': {
-    '& .MuiSwitch-thumb': {
-      width: 15,
-    },
-    '& .MuiSwitch-switchBase.Mui-checked': {
-      transform: 'translateX(9px)',
-    },
-  },
-  '& .MuiSwitch-switchBase': {
-    padding: 2,
-    '&.Mui-checked': {
-      transform: 'translateX(12px)',
-      color: '#fff',
-      '& + .MuiSwitch-track': {
-        opacity: 1,
-        backgroundColor: '#1890ff',
-        ...theme.applyStyles('dark', {
-          backgroundColor: '#177ddc',
-        }),
-      },
-    },
-  },
-  '& .MuiSwitch-thumb': {
-    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    transition: theme.transitions.create(['width'], {
-      duration: 200,
-    }),
-  },
-  '& .MuiSwitch-track': {
-    borderRadius: 16 / 2,
-    opacity: 1,
-    backgroundColor: 'rgba(0,0,0,.25)',
-    boxSizing: 'border-box',
-    ...theme.applyStyles('dark', {
-      backgroundColor: 'rgba(255,255,255,.35)',
-    }),
-  },
-}));
-
-export default function CustomizedSwitches() {
-  return (
-    
-      }
-        label="MUI switch"
-      />
-      }
-        label="Android 12"
-      />
-      }
-        label="iOS style"
-      />
-      
-        Off
-        
-        On
-      
-    
-  );
-}
diff --git a/docs/data/material/components/switches/FormControlLabelPosition.js b/docs/data/material/components/switches/FormControlLabelPosition.js
deleted file mode 100644
index e495a03d166352..00000000000000
--- a/docs/data/material/components/switches/FormControlLabelPosition.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Switch from '@mui/material/Switch';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function FormControlLabelPosition() {
-  return (
-    
-      Label placement
-      
-        }
-          label="Bottom"
-          labelPlacement="bottom"
-        />
-        }
-          label="End"
-          labelPlacement="end"
-        />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/switches/SwitchLabels.js b/docs/data/material/components/switches/SwitchLabels.js
deleted file mode 100644
index cbf52187d034ea..00000000000000
--- a/docs/data/material/components/switches/SwitchLabels.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-
-export default function SwitchLabels() {
-  return (
-    
-      } label="Label" />
-      } label="Required" />
-      } label="Disabled" />
-    
-  );
-}
diff --git a/docs/data/material/components/switches/SwitchLabels.tsx.preview b/docs/data/material/components/switches/SwitchLabels.tsx.preview
deleted file mode 100644
index f388391917b436..00000000000000
--- a/docs/data/material/components/switches/SwitchLabels.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  } label="Label" />
-  } label="Required" />
-  } label="Disabled" />
-
\ No newline at end of file
diff --git a/docs/data/material/components/switches/SwitchesGroup.js b/docs/data/material/components/switches/SwitchesGroup.js
deleted file mode 100644
index c8a5fb6be247d6..00000000000000
--- a/docs/data/material/components/switches/SwitchesGroup.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Switch from '@mui/material/Switch';
-
-export default function SwitchesGroup() {
-  const [state, setState] = React.useState({
-    gilad: true,
-    jason: false,
-    antoine: true,
-  });
-
-  const handleChange = (event) => {
-    setState({
-      ...state,
-      [event.target.name]: event.target.checked,
-    });
-  };
-
-  return (
-    
-      Assign responsibility
-      
-        
-          }
-          label="Gilad Gray"
-        />
-        
-          }
-          label="Jason Killian"
-        />
-        
-          }
-          label="Antoine Llorca"
-        />
-      
-      Be careful
-    
-  );
-}
diff --git a/docs/data/material/components/switches/SwitchesSize.js b/docs/data/material/components/switches/SwitchesSize.js
deleted file mode 100644
index 84138b49a13dc7..00000000000000
--- a/docs/data/material/components/switches/SwitchesSize.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Switch from '@mui/material/Switch';
-
-const label = { slotProps: { input: { 'aria-label': 'Size switch demo' } } };
-
-export default function SwitchesSize() {
-  return (
-    
    
-      
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/switches/SwitchesSize.tsx.preview b/docs/data/material/components/switches/SwitchesSize.tsx.preview
deleted file mode 100644
index 1e1aacb66d7735..00000000000000
--- a/docs/data/material/components/switches/SwitchesSize.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/switches/BasicSwitches.tsx b/docs/data/material/components/switches/demos/basic/BasicSwitches.tsx
similarity index 87%
rename from docs/data/material/components/switches/BasicSwitches.tsx
rename to docs/data/material/components/switches/demos/basic/BasicSwitches.tsx
index 19469eb9ed2647..268dd5e12ae47a 100644
--- a/docs/data/material/components/switches/BasicSwitches.tsx
+++ b/docs/data/material/components/switches/demos/basic/BasicSwitches.tsx
@@ -5,10 +5,12 @@ const label = { slotProps: { input: { 'aria-label': 'Switch demo' } } };
 export default function BasicSwitches() {
   return (
     
    
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/switches/demos/basic/index.ts b/docs/data/material/components/switches/demos/basic/index.ts
new file mode 100644
index 00000000000000..319a208efc169f
--- /dev/null
+++ b/docs/data/material/components/switches/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicSwitches from './BasicSwitches';
+
+export default createDemo(import.meta.url, BasicSwitches);
diff --git a/docs/data/material/components/switches/ColorSwitches.tsx b/docs/data/material/components/switches/demos/color/ColorSwitches.tsx
similarity index 94%
rename from docs/data/material/components/switches/ColorSwitches.tsx
rename to docs/data/material/components/switches/demos/color/ColorSwitches.tsx
index 5cfac499452c89..0c88f4ec6f016a 100644
--- a/docs/data/material/components/switches/ColorSwitches.tsx
+++ b/docs/data/material/components/switches/demos/color/ColorSwitches.tsx
@@ -19,11 +19,13 @@ const label = { slotProps: { input: { 'aria-label': 'Color switch demo' } } };
 export default function ColorSwitches() {
   return (
     
    
+      {/* @focus-start */}
       
       
       
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/switches/demos/color/index.ts b/docs/data/material/components/switches/demos/color/index.ts
new file mode 100644
index 00000000000000..0ace0045face2e
--- /dev/null
+++ b/docs/data/material/components/switches/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorSwitches from './ColorSwitches';
+
+export default createDemo(import.meta.url, ColorSwitches);
diff --git a/docs/data/material/components/switches/ControlledSwitches.tsx b/docs/data/material/components/switches/demos/controlled/ControlledSwitches.tsx
similarity index 90%
rename from docs/data/material/components/switches/ControlledSwitches.tsx
rename to docs/data/material/components/switches/demos/controlled/ControlledSwitches.tsx
index 7094e6da0b9567..35f89de5cae7af 100644
--- a/docs/data/material/components/switches/ControlledSwitches.tsx
+++ b/docs/data/material/components/switches/demos/controlled/ControlledSwitches.tsx
@@ -8,6 +8,7 @@ export default function ControlledSwitches() {
     setChecked(event.target.checked);
   };
 
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/switches/demos/controlled/index.ts b/docs/data/material/components/switches/demos/controlled/index.ts
new file mode 100644
index 00000000000000..afd3d371af1065
--- /dev/null
+++ b/docs/data/material/components/switches/demos/controlled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledSwitches from './ControlledSwitches';
+
+export default createDemo(import.meta.url, ControlledSwitches);
diff --git a/docs/data/material/components/switches/CustomizedSwitches.tsx b/docs/data/material/components/switches/demos/customized/CustomizedSwitches.tsx
similarity index 99%
rename from docs/data/material/components/switches/CustomizedSwitches.tsx
rename to docs/data/material/components/switches/demos/customized/CustomizedSwitches.tsx
index d5352f9fe96484..e5843cea5cd1e7 100644
--- a/docs/data/material/components/switches/CustomizedSwitches.tsx
+++ b/docs/data/material/components/switches/demos/customized/CustomizedSwitches.tsx
@@ -203,6 +203,7 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
 
 export default function CustomizedSwitches() {
   return (
+    // @focus-start
     
       }
@@ -225,5 +226,6 @@ export default function CustomizedSwitches() {
         On
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/switches/demos/customized/index.ts b/docs/data/material/components/switches/demos/customized/index.ts
new file mode 100644
index 00000000000000..8517b5a79ff65f
--- /dev/null
+++ b/docs/data/material/components/switches/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedSwitches from './CustomizedSwitches';
+
+export default createDemo(import.meta.url, CustomizedSwitches);
diff --git a/docs/data/material/components/switches/FormControlLabelPosition.tsx b/docs/data/material/components/switches/demos/form-control-label-position/FormControlLabelPosition.tsx
similarity index 95%
rename from docs/data/material/components/switches/FormControlLabelPosition.tsx
rename to docs/data/material/components/switches/demos/form-control-label-position/FormControlLabelPosition.tsx
index e495a03d166352..b1200a5f48abb7 100644
--- a/docs/data/material/components/switches/FormControlLabelPosition.tsx
+++ b/docs/data/material/components/switches/demos/form-control-label-position/FormControlLabelPosition.tsx
@@ -6,6 +6,7 @@ import FormLabel from '@mui/material/FormLabel';
 
 export default function FormControlLabelPosition() {
   return (
+    // @focus-start
     
       Label placement
       
@@ -23,5 +24,6 @@ export default function FormControlLabelPosition() {
         />
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/switches/demos/form-control-label-position/index.ts b/docs/data/material/components/switches/demos/form-control-label-position/index.ts
new file mode 100644
index 00000000000000..756043e786b03f
--- /dev/null
+++ b/docs/data/material/components/switches/demos/form-control-label-position/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FormControlLabelPosition from './FormControlLabelPosition';
+
+export default createDemo(import.meta.url, FormControlLabelPosition);
diff --git a/docs/data/material/components/switches/SwitchesGroup.tsx b/docs/data/material/components/switches/demos/group/SwitchesGroup.tsx
similarity index 97%
rename from docs/data/material/components/switches/SwitchesGroup.tsx
rename to docs/data/material/components/switches/demos/group/SwitchesGroup.tsx
index 9b06493499dfa7..dfd5220a6a57a4 100644
--- a/docs/data/material/components/switches/SwitchesGroup.tsx
+++ b/docs/data/material/components/switches/demos/group/SwitchesGroup.tsx
@@ -7,6 +7,7 @@ import FormHelperText from '@mui/material/FormHelperText';
 import Switch from '@mui/material/Switch';
 
 export default function SwitchesGroup() {
+  // @focus-start @padding 1
   const [state, setState] = React.useState({
     gilad: true,
     jason: false,
@@ -46,4 +47,5 @@ export default function SwitchesGroup() {
       Be careful
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/switches/demos/group/index.ts b/docs/data/material/components/switches/demos/group/index.ts
new file mode 100644
index 00000000000000..f60678e1c77590
--- /dev/null
+++ b/docs/data/material/components/switches/demos/group/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SwitchesGroup from './SwitchesGroup';
+
+export default createDemo(import.meta.url, SwitchesGroup);
diff --git a/docs/data/material/components/switches/SwitchLabels.tsx b/docs/data/material/components/switches/demos/labels/SwitchLabels.tsx
similarity index 91%
rename from docs/data/material/components/switches/SwitchLabels.tsx
rename to docs/data/material/components/switches/demos/labels/SwitchLabels.tsx
index cbf52187d034ea..f5ad9eea706114 100644
--- a/docs/data/material/components/switches/SwitchLabels.tsx
+++ b/docs/data/material/components/switches/demos/labels/SwitchLabels.tsx
@@ -3,6 +3,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 
 export default function SwitchLabels() {
+  // @focus-start @padding 1
   return (
     
       } label="Label" />
@@ -10,4 +11,5 @@ export default function SwitchLabels() {
       } label="Disabled" />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/switches/demos/labels/index.ts b/docs/data/material/components/switches/demos/labels/index.ts
new file mode 100644
index 00000000000000..f01ebe016ce0f1
--- /dev/null
+++ b/docs/data/material/components/switches/demos/labels/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SwitchLabels from './SwitchLabels';
+
+export default createDemo(import.meta.url, SwitchLabels);
diff --git a/docs/data/material/components/switches/SwitchesSize.tsx b/docs/data/material/components/switches/demos/size/SwitchesSize.tsx
similarity index 85%
rename from docs/data/material/components/switches/SwitchesSize.tsx
rename to docs/data/material/components/switches/demos/size/SwitchesSize.tsx
index 84138b49a13dc7..194a13679163a4 100644
--- a/docs/data/material/components/switches/SwitchesSize.tsx
+++ b/docs/data/material/components/switches/demos/size/SwitchesSize.tsx
@@ -5,8 +5,10 @@ const label = { slotProps: { input: { 'aria-label': 'Size switch demo' } } };
 export default function SwitchesSize() {
   return (
     
    
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/switches/demos/size/index.ts b/docs/data/material/components/switches/demos/size/index.ts
new file mode 100644
index 00000000000000..01da1e8693120b
--- /dev/null
+++ b/docs/data/material/components/switches/demos/size/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SwitchesSize from './SwitchesSize';
+
+export default createDemo(import.meta.url, SwitchesSize);
diff --git a/docs/data/material/components/switches/switches.md b/docs/data/material/components/switches/switches.md
index e1488a93cff8a7..ddc2e5496c947a 100644
--- a/docs/data/material/components/switches/switches.md
+++ b/docs/data/material/components/switches/switches.md
@@ -19,43 +19,43 @@ should be made clear from the corresponding inline label.
 
 ## Basic switches
 
-{{"demo": "BasicSwitches.js"}}
+{{"component": "../data/material/components/switches/demos/basic/index.ts"}}
 
 ## Label
 
 You can provide a label to the `Switch` thanks to the `FormControlLabel` component.
 
-{{"demo": "SwitchLabels.js"}}
+{{"component": "../data/material/components/switches/demos/labels/index.ts"}}
 
 ## Size
 
 Use the `size` prop to change the size of the switch.
 
-{{"demo": "SwitchesSize.js"}}
+{{"component": "../data/material/components/switches/demos/size/index.ts"}}
 
 ## Color
 
-{{"demo": "ColorSwitches.js"}}
+{{"component": "../data/material/components/switches/demos/color/index.ts"}}
 
 ## Controlled
 
 You can control the switch with the `checked` and `onChange` props:
 
-{{"demo": "ControlledSwitches.js"}}
+{{"component": "../data/material/components/switches/demos/controlled/index.ts"}}
 
 ## Switches with FormGroup
 
 `FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API.
 However, you are encouraged to use [Checkboxes](/material-ui/react-checkbox/) instead if multiple related controls are required. (See: [When to use](#when-to-use)).
 
-{{"demo": "SwitchesGroup.js"}}
+{{"component": "../data/material/components/switches/demos/group/index.ts"}}
 
 ## Customization
 
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedSwitches.js"}}
+{{"component": "../data/material/components/switches/demos/customized/index.ts"}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/switch).
 
@@ -63,7 +63,7 @@ You can learn more about this in the [overrides documentation page](/material-ui
 
 You can change the placement of the label:
 
-{{"demo": "FormControlLabelPosition.js"}}
+{{"component": "../data/material/components/switches/demos/form-control-label-position/index.ts"}}
 
 ## When to use
 
diff --git a/docs/data/material/components/table/AccessibleTable.js b/docs/data/material/components/table/AccessibleTable.js
deleted file mode 100644
index a5e0501a62a407..00000000000000
--- a/docs/data/material/components/table/AccessibleTable.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-function createData(name, calories, fat, carbs, protein) {
-  return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-];
-
-export default function AccessibleTable() {
-  return (
-    
-      
-        
-        
-          
-            Dessert (100g serving)
-            Calories
-            Fat (g)
-            Carbs (g)
-            Protein (g)
-          
-        
-        
-          {rows.map((row) => (
-            
-              
-                {row.name}
-              
-              {row.calories}
-              {row.fat}
-              {row.carbs}
-              {row.protein}
-            
-          ))}
-        
-      
    A basic table example with a caption
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/BasicTable.js b/docs/data/material/components/table/BasicTable.js
deleted file mode 100644
index 19627070c15b56..00000000000000
--- a/docs/data/material/components/table/BasicTable.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-function createData(name, calories, fat, carbs, protein) {
-  return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
-export default function BasicTable() {
-  return (
-    
-      
-        
-          
-            Dessert (100g serving)
-            Calories
-            Fat (g)
-            Carbs (g)
-            Protein (g)
-          
-        
-        
-          {rows.map((row) => (
-            
-              
-                {row.name}
-              
-              {row.calories}
-              {row.fat}
-              {row.carbs}
-              {row.protein}
-            
-          ))}
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/CollapsibleTable.js b/docs/data/material/components/table/CollapsibleTable.js
deleted file mode 100644
index 09f05d9a720190..00000000000000
--- a/docs/data/material/components/table/CollapsibleTable.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-
-function createData(name, calories, fat, carbs, protein, price) {
-  return {
-    name,
-    calories,
-    fat,
-    carbs,
-    protein,
-    price,
-    history: [
-      {
-        date: '2020-01-05',
-        customerId: '11091700',
-        amount: 3,
-      },
-      {
-        date: '2020-01-02',
-        customerId: 'Anonymous',
-        amount: 1,
-      },
-    ],
-  };
-}
-
-function Row(props) {
-  const { row } = props;
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    
-       *': { borderBottom: 'unset' } }}>
-        
-           setOpen(!open)}
-          >
-            {open ?  : }
-          
-        
-        
-          {row.name}
-        
-        {row.calories}
-        {row.fat}
-        {row.carbs}
-        {row.protein}
-      
-      
-        
-          
-            
-              
-                History
-              
-              
-                
-                  
-                    Date
-                    Customer
-                    Amount
-                    Total price ($)
-                  
-                
-                
-                  {row.history.map((historyRow) => (
-                    
-                      
-                        {historyRow.date}
-                      
-                      {historyRow.customerId}
-                      {historyRow.amount}
-                      
-                        {Math.round(historyRow.amount * row.price * 100) / 100}
-                      
-                    
-                  ))}
-                
-              
    
-                
-              
-            
-          
-        
-  );
-}
-
-Row.propTypes = {
-  row: PropTypes.shape({
-    calories: PropTypes.number.isRequired,
-    carbs: PropTypes.number.isRequired,
-    fat: PropTypes.number.isRequired,
-    history: PropTypes.arrayOf(
-      PropTypes.shape({
-        amount: PropTypes.number.isRequired,
-        customerId: PropTypes.string.isRequired,
-        date: PropTypes.string.isRequired,
-      }),
-    ).isRequired,
-    name: PropTypes.string.isRequired,
-    price: PropTypes.number.isRequired,
-    protein: PropTypes.number.isRequired,
-  }).isRequired,
-};
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
-  createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
-  createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
-  createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
-];
-
-export default function CollapsibleTable() {
-  return (
-    
-      
-        
-          
-            
-            Dessert (100g serving)
-            Calories
-            Fat (g)
-            Carbs (g)
-            Protein (g)
-          
-        
-        
-          {rows.map((row) => (
-            
-          ))}
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/ColumnGroupingTable.js b/docs/data/material/components/table/ColumnGroupingTable.js
deleted file mode 100644
index da3cb161550c78..00000000000000
--- a/docs/data/material/components/table/ColumnGroupingTable.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as React from 'react';
-import Paper from '@mui/material/Paper';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-
-const columns = [
-  { id: 'name', label: 'Name', minWidth: 170 },
-  { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
-  {
-    id: 'population',
-    label: 'Population',
-    minWidth: 170,
-    align: 'right',
-    format: (value) => value.toLocaleString('en-US'),
-  },
-  {
-    id: 'size',
-    label: 'Size\u00a0(km\u00b2)',
-    minWidth: 170,
-    align: 'right',
-    format: (value) => value.toLocaleString('en-US'),
-  },
-  {
-    id: 'density',
-    label: 'Density',
-    minWidth: 170,
-    align: 'right',
-    format: (value) => value.toFixed(2),
-  },
-];
-
-function createData(name, code, population, size) {
-  const density = population / size;
-  return { name, code, population, size, density };
-}
-
-const rows = [
-  createData('India', 'IN', 1324171354, 3287263),
-  createData('China', 'CN', 1403500365, 9596961),
-  createData('Italy', 'IT', 60483973, 301340),
-  createData('United States', 'US', 327167434, 9833520),
-  createData('Canada', 'CA', 37602103, 9984670),
-  createData('Australia', 'AU', 25475400, 7692024),
-  createData('Germany', 'DE', 83019200, 357578),
-  createData('Ireland', 'IE', 4857000, 70273),
-  createData('Mexico', 'MX', 126577691, 1972550),
-  createData('Japan', 'JP', 126317000, 377973),
-  createData('France', 'FR', 67022000, 640679),
-  createData('United Kingdom', 'GB', 67545757, 242495),
-  createData('Russia', 'RU', 146793744, 17098246),
-  createData('Nigeria', 'NG', 200962417, 923768),
-  createData('Brazil', 'BR', 210147125, 8515767),
-];
-
-export default function ColumnGroupingTable() {
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-  };
-
-  return (
-    
-      
-        
-          
-            
-              
-                Country
-              
-              
-                Details
-              
-            
-            
-              {columns.map((column) => (
-                
-                  {column.label}
-                
-              ))}
-            
-          
-          
-            {rows
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row) => {
-                return (
-                  
-                    {columns.map((column) => {
-                      const value = row[column.id];
-                      return (
-                        
-                          {column.format && typeof value === 'number'
-                            ? column.format(value)
-                            : value}
-                        
-                      );
-                    })}
-                  
-                );
-              })}
-          
-        
    
-          
-      
-        
-  );
-}
diff --git a/docs/data/material/components/table/CustomPaginationActionsTable.js b/docs/data/material/components/table/CustomPaginationActionsTable.js
deleted file mode 100644
index f3eafc5c9acbf8..00000000000000
--- a/docs/data/material/components/table/CustomPaginationActionsTable.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableFooter from '@mui/material/TableFooter';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-import IconButton from '@mui/material/IconButton';
-import FirstPageIcon from '@mui/icons-material/FirstPage';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import LastPageIcon from '@mui/icons-material/LastPage';
-
-function TablePaginationActions(props) {
-  const theme = useTheme();
-  const { count, page, rowsPerPage, onPageChange } = props;
-
-  const handleFirstPageButtonClick = (event) => {
-    onPageChange(event, 0);
-  };
-
-  const handleBackButtonClick = (event) => {
-    onPageChange(event, page - 1);
-  };
-
-  const handleNextButtonClick = (event) => {
-    onPageChange(event, page + 1);
-  };
-
-  const handleLastPageButtonClick = (event) => {
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-  };
-
-  return (
-    
-      
-        {theme.direction === 'rtl' ?  : }
-      
-      
-        {theme.direction === 'rtl' ?  : }
-      
-      = Math.ceil(count / rowsPerPage) - 1}
-        aria-label="next page"
-      >
-        {theme.direction === 'rtl' ?  : }
-      
-      = Math.ceil(count / rowsPerPage) - 1}
-        aria-label="last page"
-      >
-        {theme.direction === 'rtl' ?  : }
-      
-    
-  );
-}
-
-TablePaginationActions.propTypes = {
-  count: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-  page: PropTypes.number.isRequired,
-  rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, calories, fat) {
-  return { name, calories, fat };
-}
-
-const rows = [
-  createData('Cupcake', 305, 3.7),
-  createData('Donut', 452, 25.0),
-  createData('Eclair', 262, 16.0),
-  createData('Frozen yoghurt', 159, 6.0),
-  createData('Gingerbread', 356, 16.0),
-  createData('Honeycomb', 408, 3.2),
-  createData('Ice cream sandwich', 237, 9.0),
-  createData('Jelly Bean', 375, 0.0),
-  createData('KitKat', 518, 26.0),
-  createData('Lollipop', 392, 0.2),
-  createData('Marshmallow', 318, 0),
-  createData('Nougat', 360, 19.0),
-  createData('Oreo', 437, 18.0),
-].sort((a, b) => (a.calories < b.calories ? -1 : 1));
-
-export default function CustomPaginationActionsTable() {
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows =
-    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  return (
-    
-      
-        
-          {(rowsPerPage > 0
-            ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            : rows
-          ).map((row) => (
-            
-              
-                {row.name}
-              
-              
-                {row.calories}
-              
-              
-                {row.fat}
-              
-            
-          ))}
-          {emptyRows > 0 && (
-            
-              
-            
-          )}
-        
-        
-          
-            
-          
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/CustomizedTables.js b/docs/data/material/components/table/CustomizedTables.js
deleted file mode 100644
index fae643fd8fee02..00000000000000
--- a/docs/data/material/components/table/CustomizedTables.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell, { tableCellClasses } from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  [`&.${tableCellClasses.head}`]: {
-    backgroundColor: theme.palette.common.black,
-    color: theme.palette.common.white,
-  },
-  [`&.${tableCellClasses.body}`]: {
-    fontSize: 14,
-  },
-}));
-
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover,
-  },
-  // hide last border
-  '&:last-child td, &:last-child th': {
-    border: 0,
-  },
-}));
-
-function createData(name, calories, fat, carbs, protein) {
-  return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
-export default function CustomizedTables() {
-  return (
-    
-      
-        
-          
-            Dessert (100g serving)
-            Calories
-            Fat (g)
-            Carbs (g)
-            Protein (g)
-          
-        
-        
-          {rows.map((row) => (
-            
-              
-                {row.name}
-              
-              {row.calories}
-              {row.fat}
-              {row.carbs}
-              {row.protein}
-            
-          ))}
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/DataTable.js b/docs/data/material/components/table/DataTable.js
deleted file mode 100644
index ef6cce4dc18388..00000000000000
--- a/docs/data/material/components/table/DataTable.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DataGrid } from '@mui/x-data-grid';
-import Paper from '@mui/material/Paper';
-
-const columns = [
-  { field: 'id', headerName: 'ID', width: 70 },
-  { field: 'firstName', headerName: 'First name', width: 130 },
-  { field: 'lastName', headerName: 'Last name', width: 130 },
-  {
-    field: 'age',
-    headerName: 'Age',
-    type: 'number',
-    width: 90,
-  },
-  {
-    field: 'fullName',
-    headerName: 'Full name',
-    description: 'This column has a value getter and is not sortable.',
-    sortable: false,
-    width: 160,
-    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
-  },
-];
-
-const rows = [
-  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
-  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
-  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
-  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
-  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
-  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
-  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
-  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
-  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
-];
-
-const paginationModel = { page: 0, pageSize: 5 };
-
-export default function DataTable() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/table/DataTable.tsx.preview b/docs/data/material/components/table/DataTable.tsx.preview
deleted file mode 100644
index 876664a4a842c2..00000000000000
--- a/docs/data/material/components/table/DataTable.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/table/DenseTable.js b/docs/data/material/components/table/DenseTable.js
deleted file mode 100644
index 7b7a626bd3dc7b..00000000000000
--- a/docs/data/material/components/table/DenseTable.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-function createData(name, calories, fat, carbs, protein) {
-  return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
-export default function DenseTable() {
-  return (
-    
-      
-        
-          
-            Dessert (100g serving)
-            Calories
-            Fat (g)
-            Carbs (g)
-            Protein (g)
-          
-        
-        
-          {rows.map((row) => (
-            
-              
-                {row.name}
-              
-              {row.calories}
-              {row.fat}
-              {row.carbs}
-              {row.protein}
-            
-          ))}
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/EnhancedTable.js b/docs/data/material/components/table/EnhancedTable.js
deleted file mode 100644
index c6e0bf0a170cc2..00000000000000
--- a/docs/data/material/components/table/EnhancedTable.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import Checkbox from '@mui/material/Checkbox';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import DeleteIcon from '@mui/icons-material/Delete';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import { visuallyHidden } from '@mui/utils';
-
-function createData(id, name, calories, fat, carbs, protein) {
-  return {
-    id,
-    name,
-    calories,
-    fat,
-    carbs,
-    protein,
-  };
-}
-
-const rows = [
-  createData(1, 'Cupcake', 305, 3.7, 67, 4.3),
-  createData(2, 'Donut', 452, 25.0, 51, 4.9),
-  createData(3, 'Eclair', 262, 16.0, 24, 6.0),
-  createData(4, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData(5, 'Gingerbread', 356, 16.0, 49, 3.9),
-  createData(6, 'Honeycomb', 408, 3.2, 87, 6.5),
-  createData(7, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData(8, 'Jelly Bean', 375, 0.0, 94, 0.0),
-  createData(9, 'KitKat', 518, 26.0, 65, 7.0),
-  createData(10, 'Lollipop', 392, 0.2, 98, 0.0),
-  createData(11, 'Marshmallow', 318, 0, 81, 2.0),
-  createData(12, 'Nougat', 360, 19.0, 9, 37.0),
-  createData(13, 'Oreo', 437, 18.0, 63, 4.0),
-];
-
-function descendingComparator(a, b, orderBy) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
-}
-
-function getComparator(order, orderBy) {
-  return order === 'desc'
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-const headCells = [
-  {
-    id: 'name',
-    numeric: false,
-    disablePadding: true,
-    label: 'Dessert (100g serving)',
-  },
-  {
-    id: 'calories',
-    numeric: true,
-    disablePadding: false,
-    label: 'Calories',
-  },
-  {
-    id: 'fat',
-    numeric: true,
-    disablePadding: false,
-    label: 'Fat (g)',
-  },
-  {
-    id: 'carbs',
-    numeric: true,
-    disablePadding: false,
-    label: 'Carbs (g)',
-  },
-  {
-    id: 'protein',
-    numeric: true,
-    disablePadding: false,
-    label: 'Protein (g)',
-  },
-];
-
-function EnhancedTableHead(props) {
-  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
-    props;
-  const createSortHandler = (property) => (event) => {
-    onRequestSort(event, property);
-  };
-
-  return (
-    
-      
-        
-           0 && numSelected < rowCount}
-            checked={rowCount > 0 && numSelected === rowCount}
-            onChange={onSelectAllClick}
-            slotProps={{
-              input: { 'aria-label': 'select all desserts' },
-            }}
-          />
-        
-        {headCells.map((headCell) => (
-          
-            
-              {headCell.label}
-              {orderBy === headCell.id ? (
-                
-                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                
-              ) : null}
-            
-          
-        ))}
-      
-    
-  );
-}
-
-EnhancedTableHead.propTypes = {
-  numSelected: PropTypes.number.isRequired,
-  onRequestSort: PropTypes.func.isRequired,
-  onSelectAllClick: PropTypes.func.isRequired,
-  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
-  orderBy: PropTypes.string.isRequired,
-  rowCount: PropTypes.number.isRequired,
-};
-
-function EnhancedTableToolbar(props) {
-  const { numSelected } = props;
-  return (
-     0 && {
-          bgcolor: (theme) =>
-            alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-        },
-      ]}
-    >
-      {numSelected > 0 ? (
-        
-          {numSelected} selected
-        
-      ) : (
-        
-          Nutrition
-        
-      )}
-      {numSelected > 0 ? (
-        
-          
-            
-          
-        
-      ) : (
-        
-          
-            
-          
-        
-      )}
-    
-  );
-}
-
-EnhancedTableToolbar.propTypes = {
-  numSelected: PropTypes.number.isRequired,
-};
-
-export default function EnhancedTable() {
-  const [order, setOrder] = React.useState('asc');
-  const [orderBy, setOrderBy] = React.useState('calories');
-  const [selected, setSelected] = React.useState([]);
-  const [page, setPage] = React.useState(0);
-  const [dense, setDense] = React.useState(false);
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
-
-  const handleSelectAllClick = (event) => {
-    if (event.target.checked) {
-      const newSelected = rows.map((n) => n.id);
-      setSelected(newSelected);
-      return;
-    }
-    setSelected([]);
-  };
-
-  const handleClick = (event, id) => {
-    const selectedIndex = selected.indexOf(id);
-    let newSelected = [];
-
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(
-        selected.slice(0, selectedIndex),
-        selected.slice(selectedIndex + 1),
-      );
-    }
-    setSelected(newSelected);
-  };
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleChangeDense = (event) => {
-    setDense(event.target.checked);
-  };
-
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows =
-    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
-  const visibleRows = React.useMemo(
-    () =>
-      [...rows]
-        .sort(getComparator(order, orderBy))
-        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-    [order, orderBy, page, rowsPerPage],
-  );
-
-  return (
-    
-      
-        
-        
-          
-            
-            
-              {visibleRows.map((row, index) => {
-                const isItemSelected = selected.includes(row.id);
-                const labelId = `enhanced-table-checkbox-${index}`;
-
-                return (
-                   handleClick(event, row.id)}
-                    role="checkbox"
-                    aria-checked={isItemSelected}
-                    tabIndex={-1}
-                    key={row.id}
-                    selected={isItemSelected}
-                    sx={{ cursor: 'pointer' }}
-                  >
-                    
-                      
-                    
-                    
-                      {row.name}
-                    
-                    {row.calories}
-                    {row.fat}
-                    {row.carbs}
-                    {row.protein}
-                  
-                );
-              })}
-              {emptyRows > 0 && (
-                
-                  
-                
-              )}
-            
-          
    
-            
-        
-          
-      }
-        label="Dense padding"
-      />
-        
-  );
-}
diff --git a/docs/data/material/components/table/ReactVirtualizedTable.js b/docs/data/material/components/table/ReactVirtualizedTable.js
deleted file mode 100644
index edf07da6576333..00000000000000
--- a/docs/data/material/components/table/ReactVirtualizedTable.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as React from 'react';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-import { TableVirtuoso } from 'react-virtuoso';
-import Chance from 'chance';
-
-const chance = new Chance(42);
-
-function createData(id) {
-  return {
-    id,
-    firstName: chance.first(),
-    lastName: chance.last(),
-    age: chance.age(),
-    phone: chance.phone(),
-    state: chance.state({ full: true }),
-  };
-}
-
-const columns = [
-  {
-    width: 100,
-    label: 'First Name',
-    dataKey: 'firstName',
-  },
-  {
-    width: 100,
-    label: 'Last Name',
-    dataKey: 'lastName',
-  },
-  {
-    width: 50,
-    label: 'Age',
-    dataKey: 'age',
-    numeric: true,
-  },
-  {
-    width: 110,
-    label: 'State',
-    dataKey: 'state',
-  },
-  {
-    width: 130,
-    label: 'Phone Number',
-    dataKey: 'phone',
-  },
-];
-
-const rows = Array.from({ length: 200 }, (_, index) => createData(index));
-
-const VirtuosoTableComponents = {
-  Scroller: React.forwardRef((props, ref) => (
-    
-  )),
-  Table: (props) => (
-    
-  ),
-  TableHead: React.forwardRef((props, ref) => ),
-  TableRow,
-  TableBody: React.forwardRef((props, ref) => ),
-};
-
-function fixedHeaderContent() {
-  return (
-    
-      {columns.map((column) => (
-        
-          {column.label}
-        
-      ))}
-    
-  );
-}
-
-function rowContent(_index, row) {
-  return (
-    
-      {columns.map((column) => (
-        
-          {row[column.dataKey]}
-        
-      ))}
-    
-  );
-}
-
-export default function ReactVirtualizedTable() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx.preview b/docs/data/material/components/table/ReactVirtualizedTable.tsx.preview
deleted file mode 100644
index 4d83b69f40940f..00000000000000
--- a/docs/data/material/components/table/ReactVirtualizedTable.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/table/SpanningTable.js b/docs/data/material/components/table/SpanningTable.js
deleted file mode 100644
index 0eb6085abc3d21..00000000000000
--- a/docs/data/material/components/table/SpanningTable.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-const TAX_RATE = 0.07;
-
-function ccyFormat(num) {
-  return `${num.toFixed(2)}`;
-}
-
-function priceRow(qty, unit) {
-  return qty * unit;
-}
-
-function createRow(desc, qty, unit) {
-  const price = priceRow(qty, unit);
-  return { desc, qty, unit, price };
-}
-
-function subtotal(items) {
-  return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
-}
-
-const rows = [
-  createRow('Paperclips (Box)', 100, 1.15),
-  createRow('Paper (Case)', 10, 45.99),
-  createRow('Waste Basket', 2, 17.99),
-];
-
-const invoiceSubtotal = subtotal(rows);
-const invoiceTaxes = TAX_RATE * invoiceSubtotal;
-const invoiceTotal = invoiceTaxes + invoiceSubtotal;
-
-export default function SpanningTable() {
-  return (
-    
-      
    
-        
-          
-            
-              Details
-            
-            Price
-          
-          
-            Desc
-            Qty.
-            Unit
-            Sum
-          
-        
-        
-          {rows.map((row) => (
-            
-              {row.desc}
-              {row.qty}
-              {row.unit}
-              {ccyFormat(row.price)}
-            
-          ))}
-          
-            
-            Subtotal
-            {ccyFormat(invoiceSubtotal)}
-          
-          
-            Tax
-            {`${(TAX_RATE * 100).toFixed(0)} %`}
-            {ccyFormat(invoiceTaxes)}
-          
-          
-            Total
-            {ccyFormat(invoiceTotal)}
-          
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/table/StickyHeadTable.js b/docs/data/material/components/table/StickyHeadTable.js
deleted file mode 100644
index 7b0fa4f20e1a95..00000000000000
--- a/docs/data/material/components/table/StickyHeadTable.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import * as React from 'react';
-import Paper from '@mui/material/Paper';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-
-const columns = [
-  { id: 'name', label: 'Name', minWidth: 170 },
-  { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
-  {
-    id: 'population',
-    label: 'Population',
-    minWidth: 170,
-    align: 'right',
-    format: (value) => value.toLocaleString('en-US'),
-  },
-  {
-    id: 'size',
-    label: 'Size\u00a0(km\u00b2)',
-    minWidth: 170,
-    align: 'right',
-    format: (value) => value.toLocaleString('en-US'),
-  },
-  {
-    id: 'density',
-    label: 'Density',
-    minWidth: 170,
-    align: 'right',
-    format: (value) => value.toFixed(2),
-  },
-];
-
-function createData(name, code, population, size) {
-  const density = population / size;
-  return { name, code, population, size, density };
-}
-
-const rows = [
-  createData('India', 'IN', 1324171354, 3287263),
-  createData('China', 'CN', 1403500365, 9596961),
-  createData('Italy', 'IT', 60483973, 301340),
-  createData('United States', 'US', 327167434, 9833520),
-  createData('Canada', 'CA', 37602103, 9984670),
-  createData('Australia', 'AU', 25475400, 7692024),
-  createData('Germany', 'DE', 83019200, 357578),
-  createData('Ireland', 'IE', 4857000, 70273),
-  createData('Mexico', 'MX', 126577691, 1972550),
-  createData('Japan', 'JP', 126317000, 377973),
-  createData('France', 'FR', 67022000, 640679),
-  createData('United Kingdom', 'GB', 67545757, 242495),
-  createData('Russia', 'RU', 146793744, 17098246),
-  createData('Nigeria', 'NG', 200962417, 923768),
-  createData('Brazil', 'BR', 210147125, 8515767),
-];
-
-export default function StickyHeadTable() {
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-  };
-
-  return (
-    
-      
-        
-          
-            
-              {columns.map((column) => (
-                
-                  {column.label}
-                
-              ))}
-            
-          
-          
-            {rows
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row) => {
-                return (
-                  
-                    {columns.map((column) => {
-                      const value = row[column.id];
-                      return (
-                        
-                          {column.format && typeof value === 'number'
-                            ? column.format(value)
-                            : value}
-                        
-                      );
-                    })}
-                  
-                );
-              })}
-          
-        
    
-          
-      
-        
-  );
-}
diff --git a/docs/data/material/components/table/AccessibleTable.tsx b/docs/data/material/components/table/demos/accessible/AccessibleTable.tsx
similarity index 97%
rename from docs/data/material/components/table/AccessibleTable.tsx
rename to docs/data/material/components/table/demos/accessible/AccessibleTable.tsx
index 8d425f85a6b8a4..43d7d610b34fb5 100644
--- a/docs/data/material/components/table/AccessibleTable.tsx
+++ b/docs/data/material/components/table/demos/accessible/AccessibleTable.tsx
@@ -24,6 +24,7 @@ const rows = [
 
 export default function AccessibleTable() {
   return (
+    // @focus-start
     
       
@@ -51,5 +52,6 @@ export default function AccessibleTable() {
         
    
         A basic table example with a caption
       
    
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/table/demos/accessible/index.ts b/docs/data/material/components/table/demos/accessible/index.ts
new file mode 100644
index 00000000000000..1b282903503c76
--- /dev/null
+++ b/docs/data/material/components/table/demos/accessible/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccessibleTable from './AccessibleTable';
+
+export default createDemo(import.meta.url, AccessibleTable);
diff --git a/docs/data/material/components/table/BasicTable.tsx b/docs/data/material/components/table/demos/basic/BasicTable.tsx
similarity index 98%
rename from docs/data/material/components/table/BasicTable.tsx
rename to docs/data/material/components/table/demos/basic/BasicTable.tsx
index 1b9af02ccac519..d70c6b556b779a 100644
--- a/docs/data/material/components/table/BasicTable.tsx
+++ b/docs/data/material/components/table/demos/basic/BasicTable.tsx
@@ -26,6 +26,7 @@ const rows = [
 
 export default function BasicTable() {
   return (
+    // @focus-start
     
       
@@ -55,5 +56,6 @@ export default function BasicTable() {
         
       
    
         
    
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/table/demos/basic/index.ts b/docs/data/material/components/table/demos/basic/index.ts
new file mode 100644
index 00000000000000..6e4f0b9d862243
--- /dev/null
+++ b/docs/data/material/components/table/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicTable from './BasicTable';
+
+export default createDemo(import.meta.url, BasicTable);
diff --git a/docs/data/material/components/table/CollapsibleTable.tsx b/docs/data/material/components/table/demos/collapsible/CollapsibleTable.tsx
similarity index 99%
rename from docs/data/material/components/table/CollapsibleTable.tsx
rename to docs/data/material/components/table/demos/collapsible/CollapsibleTable.tsx
index bc906b577d6d7c..81e80262daf664 100644
--- a/docs/data/material/components/table/CollapsibleTable.tsx
+++ b/docs/data/material/components/table/demos/collapsible/CollapsibleTable.tsx
@@ -114,6 +114,7 @@ const rows = [
 ];
 export default function CollapsibleTable() {
   return (
+    // @focus-start
     
       
@@ -133,5 +134,6 @@ export default function CollapsibleTable() {
         
       
    
         
    
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/table/demos/collapsible/index.ts b/docs/data/material/components/table/demos/collapsible/index.ts
new file mode 100644
index 00000000000000..fdde225c654e3b
--- /dev/null
+++ b/docs/data/material/components/table/demos/collapsible/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CollapsibleTable from './CollapsibleTable';
+
+export default createDemo(import.meta.url, CollapsibleTable);
diff --git a/docs/data/material/components/table/ColumnGroupingTable.tsx b/docs/data/material/components/table/demos/column-grouping/ColumnGroupingTable.tsx
similarity index 99%
rename from docs/data/material/components/table/ColumnGroupingTable.tsx
rename to docs/data/material/components/table/demos/column-grouping/ColumnGroupingTable.tsx
index acac568bc0f84d..196a1297dd7d4b 100644
--- a/docs/data/material/components/table/ColumnGroupingTable.tsx
+++ b/docs/data/material/components/table/demos/column-grouping/ColumnGroupingTable.tsx
@@ -79,6 +79,7 @@ const rows = [
 ];
 
 export default function ColumnGroupingTable() {
+  // @focus-start @padding 1
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
@@ -149,4 +150,5 @@ export default function ColumnGroupingTable() {
       />
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/table/demos/column-grouping/index.ts b/docs/data/material/components/table/demos/column-grouping/index.ts
new file mode 100644
index 00000000000000..7616689dda3c89
--- /dev/null
+++ b/docs/data/material/components/table/demos/column-grouping/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColumnGroupingTable from './ColumnGroupingTable';
+
+export default createDemo(import.meta.url, ColumnGroupingTable);
diff --git a/docs/data/material/components/table/CustomPaginationActionsTable.tsx b/docs/data/material/components/table/demos/custom-pagination-actions/CustomPaginationActionsTable.tsx
similarity index 99%
rename from docs/data/material/components/table/CustomPaginationActionsTable.tsx
rename to docs/data/material/components/table/demos/custom-pagination-actions/CustomPaginationActionsTable.tsx
index df40a5df9f2f58..6e322e911f4ee9 100644
--- a/docs/data/material/components/table/CustomPaginationActionsTable.tsx
+++ b/docs/data/material/components/table/demos/custom-pagination-actions/CustomPaginationActionsTable.tsx
@@ -102,6 +102,7 @@ const rows = [
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
 export default function CustomPaginationActionsTable() {
+  // @focus-start @padding 1
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
@@ -174,4 +175,5 @@ export default function CustomPaginationActionsTable() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/table/demos/custom-pagination-actions/index.ts b/docs/data/material/components/table/demos/custom-pagination-actions/index.ts
new file mode 100644
index 00000000000000..e8ab74ab57f204
--- /dev/null
+++ b/docs/data/material/components/table/demos/custom-pagination-actions/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomPaginationActionsTable from './CustomPaginationActionsTable';
+
+export default createDemo(import.meta.url, CustomPaginationActionsTable);
diff --git a/docs/data/material/components/table/CustomizedTables.tsx b/docs/data/material/components/table/demos/customized/CustomizedTables.tsx
similarity index 98%
rename from docs/data/material/components/table/CustomizedTables.tsx
rename to docs/data/material/components/table/demos/customized/CustomizedTables.tsx
index cf937f9359be58..90293d78181ae8 100644
--- a/docs/data/material/components/table/CustomizedTables.tsx
+++ b/docs/data/material/components/table/demos/customized/CustomizedTables.tsx
@@ -47,6 +47,7 @@ const rows = [
 
 export default function CustomizedTables() {
   return (
+    // @focus-start
     
       
@@ -73,5 +74,6 @@ export default function CustomizedTables() {
         
       
    
         
    
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/table/demos/customized/index.ts b/docs/data/material/components/table/demos/customized/index.ts
new file mode 100644
index 00000000000000..0100ff51724409
--- /dev/null
+++ b/docs/data/material/components/table/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedTables from './CustomizedTables';
+
+export default createDemo(import.meta.url, CustomizedTables);
diff --git a/docs/data/material/components/table/DataTable.tsx b/docs/data/material/components/table/demos/data/DataTable.tsx
similarity index 97%
rename from docs/data/material/components/table/DataTable.tsx
rename to docs/data/material/components/table/demos/data/DataTable.tsx
index 7deb0ece8e298e..eb29b224fabf37 100644
--- a/docs/data/material/components/table/DataTable.tsx
+++ b/docs/data/material/components/table/demos/data/DataTable.tsx
@@ -36,6 +36,7 @@ const rows = [
 const paginationModel = { page: 0, pageSize: 5 };
 
 export default function DataTable() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/table/demos/data/index.ts b/docs/data/material/components/table/demos/data/index.ts
new file mode 100644
index 00000000000000..49bbf167b673e6
--- /dev/null
+++ b/docs/data/material/components/table/demos/data/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DataTable from './DataTable';
+
+export default createDemo(import.meta.url, DataTable);
diff --git a/docs/data/material/components/table/DenseTable.tsx b/docs/data/material/components/table/demos/dense/DenseTable.tsx
similarity index 98%
rename from docs/data/material/components/table/DenseTable.tsx
rename to docs/data/material/components/table/demos/dense/DenseTable.tsx
index 5272f9dbc71a34..fed1805e960db1 100644
--- a/docs/data/material/components/table/DenseTable.tsx
+++ b/docs/data/material/components/table/demos/dense/DenseTable.tsx
@@ -26,6 +26,7 @@ const rows = [
 
 export default function DenseTable() {
   return (
+    // @focus-start
     
       
@@ -55,5 +56,6 @@ export default function DenseTable() {
         
       
    
         
    
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/table/demos/dense/index.ts b/docs/data/material/components/table/demos/dense/index.ts
new file mode 100644
index 00000000000000..1847dc304ce912
--- /dev/null
+++ b/docs/data/material/components/table/demos/dense/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DenseTable from './DenseTable';
+
+export default createDemo(import.meta.url, DenseTable);
diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/demos/enhanced/EnhancedTable.tsx
similarity index 99%
rename from docs/data/material/components/table/EnhancedTable.tsx
rename to docs/data/material/components/table/demos/enhanced/EnhancedTable.tsx
index cc80746fb2eb33..6d784f9849d7f9 100644
--- a/docs/data/material/components/table/EnhancedTable.tsx
+++ b/docs/data/material/components/table/demos/enhanced/EnhancedTable.tsx
@@ -240,6 +240,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
   );
 }
 export default function EnhancedTable() {
+  // @focus-start @padding 1
   const [order, setOrder] = React.useState('asc');
   const [orderBy, setOrderBy] = React.useState('calories');
   const [selected, setSelected] = React.useState([]);
@@ -395,4 +396,5 @@ export default function EnhancedTable() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/table/demos/enhanced/index.ts b/docs/data/material/components/table/demos/enhanced/index.ts
new file mode 100644
index 00000000000000..698ac95e4dd901
--- /dev/null
+++ b/docs/data/material/components/table/demos/enhanced/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import EnhancedTable from './EnhancedTable';
+
+export default createDemo(import.meta.url, EnhancedTable);
diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx b/docs/data/material/components/table/demos/react-virtualized/ReactVirtualizedTable.tsx
similarity index 98%
rename from docs/data/material/components/table/ReactVirtualizedTable.tsx
rename to docs/data/material/components/table/demos/react-virtualized/ReactVirtualizedTable.tsx
index 6b041710cdc85c..a6d2f565bf6a7d 100644
--- a/docs/data/material/components/table/ReactVirtualizedTable.tsx
+++ b/docs/data/material/components/table/demos/react-virtualized/ReactVirtualizedTable.tsx
@@ -119,6 +119,7 @@ function rowContent(_index: number, row: Data) {
 }
 
 export default function ReactVirtualizedTable() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/table/demos/react-virtualized/index.ts b/docs/data/material/components/table/demos/react-virtualized/index.ts
new file mode 100644
index 00000000000000..a0bbea0eb611fb
--- /dev/null
+++ b/docs/data/material/components/table/demos/react-virtualized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ReactVirtualizedTable from './ReactVirtualizedTable';
+
+export default createDemo(import.meta.url, ReactVirtualizedTable);
diff --git a/docs/data/material/components/table/SpanningTable.tsx b/docs/data/material/components/table/demos/spanning/SpanningTable.tsx
similarity index 98%
rename from docs/data/material/components/table/SpanningTable.tsx
rename to docs/data/material/components/table/demos/spanning/SpanningTable.tsx
index bcc3a80dfcb154..c1e2c403e672ea 100644
--- a/docs/data/material/components/table/SpanningTable.tsx
+++ b/docs/data/material/components/table/demos/spanning/SpanningTable.tsx
@@ -44,6 +44,7 @@ const invoiceTotal = invoiceTaxes + invoiceSubtotal;
 
 export default function SpanningTable() {
   return (
+    // @focus-start
     
       
@@ -86,5 +87,6 @@ export default function SpanningTable() {
         
       
    
         
    
         
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/table/demos/spanning/index.ts b/docs/data/material/components/table/demos/spanning/index.ts
new file mode 100644
index 00000000000000..c3f0960ee25e11
--- /dev/null
+++ b/docs/data/material/components/table/demos/spanning/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SpanningTable from './SpanningTable';
+
+export default createDemo(import.meta.url, SpanningTable);
diff --git a/docs/data/material/components/table/StickyHeadTable.tsx b/docs/data/material/components/table/demos/sticky-head/StickyHeadTable.tsx
similarity index 98%
rename from docs/data/material/components/table/StickyHeadTable.tsx
rename to docs/data/material/components/table/demos/sticky-head/StickyHeadTable.tsx
index 5b05434875d19b..a121a5cd964340 100644
--- a/docs/data/material/components/table/StickyHeadTable.tsx
+++ b/docs/data/material/components/table/demos/sticky-head/StickyHeadTable.tsx
@@ -79,6 +79,7 @@ const rows = [
 ];
 
 export default function StickyHeadTable() {
+  // @focus-start @padding 1
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
@@ -141,4 +142,5 @@ export default function StickyHeadTable() {
       />
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/table/demos/sticky-head/index.ts b/docs/data/material/components/table/demos/sticky-head/index.ts
new file mode 100644
index 00000000000000..48b95575fbdc56
--- /dev/null
+++ b/docs/data/material/components/table/demos/sticky-head/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StickyHeadTable from './StickyHeadTable';
+
+export default createDemo(import.meta.url, StickyHeadTable);
diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md
index 439218bee32ccf..5e364f15b88e45 100644
--- a/docs/data/material/components/table/table.md
+++ b/docs/data/material/components/table/table.md
@@ -38,7 +38,7 @@ Tables are implemented using a collection of related components:
 
 A simple example with no frills.
 
-{{"demo": "BasicTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/basic/index.ts", "bg": true}}
 
 ## Data table
 
@@ -48,13 +48,13 @@ This constraint makes building rich data tables challenging.
 The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that are focused on handling large amounts of tabular data.
 While it comes with a more rigid structure, in exchange, you gain more powerful features.
 
-{{"demo": "DataTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/data/index.ts", "bg": true}}
 
 ## Dense table
 
 A simple example of a dense table with no frills.
 
-{{"demo": "DenseTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/dense/index.ts", "bg": true}}
 
 ## Sorting & selecting
 
@@ -62,14 +62,14 @@ This example demonstrates the use of `Checkbox` and clickable rows for selection
 
 The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The ['Custom Table Pagination Action' example](#custom-pagination-actions) below shows the pagination within the TableFooter.)
 
-{{"demo": "EnhancedTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/enhanced/index.ts", "bg": true}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedTables.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/customized/index.ts", "bg": true}}
 
 ### Custom pagination options
 
@@ -92,14 +92,14 @@ You should either provide an array of:
 
 The `ActionsComponent` prop of the `TablePagination` component allows the implementation of custom actions.
 
-{{"demo": "CustomPaginationActionsTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/custom-pagination-actions/index.ts", "bg": true}}
 
 ## Sticky header
 
 Here is an example of a table with scrollable rows and fixed column headers.
 It leverages the `stickyHeader` prop.
 
-{{"demo": "StickyHeadTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/sticky-head/index.ts", "bg": true}}
 
 ## Column grouping
 
@@ -112,20 +112,20 @@ You can group column headers by rendering multiple table rows inside a table hea
 
 ```
 
-{{"demo": "ColumnGroupingTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/column-grouping/index.ts", "bg": true}}
 
 ## Collapsible table
 
 An example of a table with expandable rows, revealing more information.
 It utilizes the [`Collapse`](/material-ui/api/collapse/) component.
 
-{{"demo": "CollapsibleTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/collapsible/index.ts", "bg": true}}
 
 ## Spanning table
 
 A simple example with spanning rows & columns.
 
-{{"demo": "SpanningTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/spanning/index.ts", "bg": true}}
 
 ## Virtualized table
 
@@ -133,7 +133,7 @@ In the following example, we demonstrate how to use [react-virtuoso](https://git
 It renders 200 rows and can easily handle more.
 Virtualization helps with performance issues.
 
-{{"demo": "ReactVirtualizedTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/react-virtualized/index.ts", "bg": true}}
 
 ## Accessibility
 
@@ -143,4 +143,4 @@ Virtualization helps with performance issues.
 
 A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it's about and decide if they want to read it.
 
-{{"demo": "AccessibleTable.js", "bg": true}}
+{{"component": "../data/material/components/table/demos/accessible/index.ts", "bg": true}}
diff --git a/docs/data/material/components/tabs/AccessibleTabs1.js b/docs/data/material/components/tabs/AccessibleTabs1.js
deleted file mode 100644
index aaf530529906e7..00000000000000
--- a/docs/data/material/components/tabs/AccessibleTabs1.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function AccessibleTabs1() {
-  const [value, setValue] = React.useState(0);
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/AccessibleTabs1.tsx.preview b/docs/data/material/components/tabs/AccessibleTabs1.tsx.preview
deleted file mode 100644
index b96957549efcc3..00000000000000
--- a/docs/data/material/components/tabs/AccessibleTabs1.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/AccessibleTabs2.js b/docs/data/material/components/tabs/AccessibleTabs2.js
deleted file mode 100644
index 22850b7585e7e8..00000000000000
--- a/docs/data/material/components/tabs/AccessibleTabs2.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function AccessibleTabs2() {
-  const [value, setValue] = React.useState(0);
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/AccessibleTabs2.tsx.preview b/docs/data/material/components/tabs/AccessibleTabs2.tsx.preview
deleted file mode 100644
index 3cacc0f8ed1286..00000000000000
--- a/docs/data/material/components/tabs/AccessibleTabs2.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/BasicTabs.js b/docs/data/material/components/tabs/BasicTabs.js
deleted file mode 100644
index e8ba27f0025385..00000000000000
--- a/docs/data/material/components/tabs/BasicTabs.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-function CustomTabPanel(props) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    
-  );
-}
-
-CustomTabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
-function a11yProps(index) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  };
-}
-
-export default function BasicTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-          
-          
-          
-        
-      
-      
-        Item One
-      
-      
-        Item Two
-      
-      
-        Item Three
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/BasicTabs.tsx.preview b/docs/data/material/components/tabs/BasicTabs.tsx.preview
deleted file mode 100644
index 8584e8a76583fb..00000000000000
--- a/docs/data/material/components/tabs/BasicTabs.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-    
-    
-    
-  
-
-
-  Item One
-
-
-  Item Two
-
-
-  Item Three
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/CenteredTabs.js b/docs/data/material/components/tabs/CenteredTabs.js
deleted file mode 100644
index 19380cb7260007..00000000000000
--- a/docs/data/material/components/tabs/CenteredTabs.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-
-export default function CenteredTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/CenteredTabs.tsx.preview b/docs/data/material/components/tabs/CenteredTabs.tsx.preview
deleted file mode 100644
index be555235150d66..00000000000000
--- a/docs/data/material/components/tabs/CenteredTabs.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/ColorTabs.js b/docs/data/material/components/tabs/ColorTabs.js
deleted file mode 100644
index c7dd8c5de233d9..00000000000000
--- a/docs/data/material/components/tabs/ColorTabs.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function ColorTabs() {
-  const [value, setValue] = React.useState('one');
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/ColorTabs.tsx.preview b/docs/data/material/components/tabs/ColorTabs.tsx.preview
deleted file mode 100644
index d661c938994d6a..00000000000000
--- a/docs/data/material/components/tabs/ColorTabs.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/CustomizedTabs.js b/docs/data/material/components/tabs/CustomizedTabs.js
deleted file mode 100644
index b3f379fc9ed934..00000000000000
--- a/docs/data/material/components/tabs/CustomizedTabs.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-const AntTabs = styled(Tabs)({
-  borderBottom: '1px solid #e8e8e8',
-  '& .MuiTabs-indicator': {
-    backgroundColor: '#1890ff',
-  },
-});
-
-const AntTab = styled((props) => )(({ theme }) => ({
-  textTransform: 'none',
-  minWidth: 0,
-  [theme.breakpoints.up('sm')]: {
-    minWidth: 0,
-  },
-  fontWeight: theme.typography.fontWeightRegular,
-  marginRight: theme.spacing(1),
-  color: 'rgba(0, 0, 0, 0.85)',
-  fontFamily: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    'Roboto',
-    '"Helvetica Neue"',
-    'Arial',
-    'sans-serif',
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(','),
-  '&:hover': {
-    color: '#40a9ff',
-    opacity: 1,
-  },
-  '&.Mui-selected': {
-    color: '#1890ff',
-    fontWeight: theme.typography.fontWeightMedium,
-  },
-  '&.Mui-focusVisible': {
-    backgroundColor: '#d1eaff',
-  },
-}));
-
-const StyledTabs = styled((props) => (
-   },
-    }}
-  />
-))({
-  '& .MuiTabs-indicator': {
-    display: 'flex',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-  '& .MuiTabs-indicatorSpan': {
-    maxWidth: 40,
-    width: '100%',
-    backgroundColor: '#635ee7',
-  },
-});
-
-const StyledTab = styled((props) => )(
-  ({ theme }) => ({
-    textTransform: 'none',
-    fontWeight: theme.typography.fontWeightRegular,
-    fontSize: theme.typography.pxToRem(15),
-    marginRight: theme.spacing(1),
-    color: 'rgba(255, 255, 255, 0.7)',
-    '&.Mui-selected': {
-      color: '#fff',
-    },
-    '&.Mui-focusVisible': {
-      backgroundColor: 'rgba(100, 95, 228, 0.32)',
-    },
-  }),
-);
-
-export default function CustomizedTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-          
-          
-          
-        
-        
-      
-      
-        
-          
-          
-          
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/DisabledTabs.js b/docs/data/material/components/tabs/DisabledTabs.js
deleted file mode 100644
index effba54701aa44..00000000000000
--- a/docs/data/material/components/tabs/DisabledTabs.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-
-export default function DisabledTabs() {
-  const [value, setValue] = React.useState(2);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/DisabledTabs.tsx.preview b/docs/data/material/components/tabs/DisabledTabs.tsx.preview
deleted file mode 100644
index cca085c5baa64b..00000000000000
--- a/docs/data/material/components/tabs/DisabledTabs.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/FullWidthTabs.js b/docs/data/material/components/tabs/FullWidthTabs.js
deleted file mode 100644
index 2e8a08deba0e8a..00000000000000
--- a/docs/data/material/components/tabs/FullWidthTabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-function TabPanel(props) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    
-  );
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
-function a11yProps(index) {
-  return {
-    id: `full-width-tab-${index}`,
-    'aria-controls': `full-width-tabpanel-${index}`,
-  };
-}
-
-export default function FullWidthTabs() {
-  const theme = useTheme();
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-          
-          
-          
-        
-      
-      
-        Item One
-      
-      
-        Item Two
-      
-      
-        Item Three
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/IconLabelTabs.js b/docs/data/material/components/tabs/IconLabelTabs.js
deleted file mode 100644
index 77531308b8e977..00000000000000
--- a/docs/data/material/components/tabs/IconLabelTabs.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import PhoneIcon from '@mui/icons-material/Phone';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import PersonPinIcon from '@mui/icons-material/PersonPin';
-
-export default function IconLabelTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      } label="RECENTS" />
-      } label="FAVORITES" />
-      } label="NEARBY" />
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/IconLabelTabs.tsx.preview b/docs/data/material/components/tabs/IconLabelTabs.tsx.preview
deleted file mode 100644
index 21d91a937b3838..00000000000000
--- a/docs/data/material/components/tabs/IconLabelTabs.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  } label="RECENTS" />
-  } label="FAVORITES" />
-  } label="NEARBY" />
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/IconPositionTabs.js b/docs/data/material/components/tabs/IconPositionTabs.js
deleted file mode 100644
index 0072597feefb4d..00000000000000
--- a/docs/data/material/components/tabs/IconPositionTabs.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import PhoneIcon from '@mui/icons-material/Phone';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import PersonPinIcon from '@mui/icons-material/PersonPin';
-import PhoneMissedIcon from '@mui/icons-material/PhoneMissed';
-
-export default function IconPositionTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      } label="top" />
-      } iconPosition="start" label="start" />
-      } iconPosition="end" label="end" />
-      } iconPosition="bottom" label="bottom" />
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/IconPositionTabs.tsx.preview b/docs/data/material/components/tabs/IconPositionTabs.tsx.preview
deleted file mode 100644
index d04bb5211a450a..00000000000000
--- a/docs/data/material/components/tabs/IconPositionTabs.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  } label="top" />
-  } iconPosition="start" label="start" />
-  } iconPosition="end" label="end" />
-  } iconPosition="bottom" label="bottom" />
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/IconTabs.js b/docs/data/material/components/tabs/IconTabs.js
deleted file mode 100644
index d6d44179a3de7c..00000000000000
--- a/docs/data/material/components/tabs/IconTabs.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import PhoneIcon from '@mui/icons-material/Phone';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import PersonPinIcon from '@mui/icons-material/PersonPin';
-
-export default function IconTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      } aria-label="phone" />
-      } aria-label="favorite" />
-      } aria-label="person" />
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/IconTabs.tsx.preview b/docs/data/material/components/tabs/IconTabs.tsx.preview
deleted file mode 100644
index 654efefa22ae2a..00000000000000
--- a/docs/data/material/components/tabs/IconTabs.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  } aria-label="phone" />
-  } aria-label="favorite" />
-  } aria-label="person" />
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/LabTabs.js b/docs/data/material/components/tabs/LabTabs.js
deleted file mode 100644
index 8c3d7ac3c456ff..00000000000000
--- a/docs/data/material/components/tabs/LabTabs.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Tab from '@mui/material/Tab';
-import TabContext from '@mui/lab/TabContext';
-import TabList from '@mui/lab/TabList';
-import TabPanel from '@mui/lab/TabPanel';
-
-export default function LabTabs() {
-  const [value, setValue] = React.useState('1');
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-          
-            
-            
-            
-          
-        
-        Item One
-        Item Two
-        Item Three
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/LabTabs.tsx.preview b/docs/data/material/components/tabs/LabTabs.tsx.preview
deleted file mode 100644
index 82f9740c27b581..00000000000000
--- a/docs/data/material/components/tabs/LabTabs.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-    
-      
-      
-      
-    
-  
-  Item One
-  Item Two
-  Item Three
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/NavTabs.js b/docs/data/material/components/tabs/NavTabs.js
deleted file mode 100644
index 288b734b71318e..00000000000000
--- a/docs/data/material/components/tabs/NavTabs.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-
-function samePageLinkNavigation(event) {
-  if (
-    event.defaultPrevented ||
-    event.button !== 0 || // ignore everything but left-click
-    event.metaKey ||
-    event.ctrlKey ||
-    event.altKey ||
-    event.shiftKey
-  ) {
-    return false;
-  }
-  return true;
-}
-
-function LinkTab(props) {
-  return (
-     {
-        // Routing libraries handle this, you can remove the onClick handle when using them.
-        if (samePageLinkNavigation(event)) {
-          event.preventDefault();
-        }
-      }}
-      aria-current={props.selected && 'page'}
-      {...props}
-    />
-  );
-}
-
-LinkTab.propTypes = {
-  selected: PropTypes.bool,
-};
-
-export default function NavTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    // event.type can be equal to focus with selectionFollowsFocus.
-    if (
-      event.type !== 'click' ||
-      (event.type === 'click' && samePageLinkNavigation(event))
-    ) {
-      setValue(newValue);
-    }
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/NavTabs.tsx.preview b/docs/data/material/components/tabs/NavTabs.tsx.preview
deleted file mode 100644
index 586cccfc1bfee0..00000000000000
--- a/docs/data/material/components/tabs/NavTabs.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.js b/docs/data/material/components/tabs/ScrollableTabsButtonAuto.js
deleted file mode 100644
index 27da03994b5955..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function ScrollableTabsButtonAuto() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-        
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview b/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview
deleted file mode 100644
index f4659b68b0d63c..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-  
-  
-  
-  
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonForce.js b/docs/data/material/components/tabs/ScrollableTabsButtonForce.js
deleted file mode 100644
index 138dbeb41cfc1a..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonForce.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function ScrollableTabsButtonForce() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-        
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview b/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview
deleted file mode 100644
index a539c79fbbb122..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-  
-  
-  
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js b/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js
deleted file mode 100644
index 32a41cf39c20f3..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function ScrollableTabsButtonPrevent() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-        
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview b/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview
deleted file mode 100644
index 0604eaa68aecd1..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-  
-  
-  
-  
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.js b/docs/data/material/components/tabs/ScrollableTabsButtonVisible.js
deleted file mode 100644
index c78ee7ef08cf06..00000000000000
--- a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Tabs, { tabsClasses } from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-
-export default function ScrollableTabsButtonVisible() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-        
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/TabsWrappedLabel.js b/docs/data/material/components/tabs/TabsWrappedLabel.js
deleted file mode 100644
index ea2feb7659cb0d..00000000000000
--- a/docs/data/material/components/tabs/TabsWrappedLabel.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-export default function TabsWrappedLabel() {
-  const [value, setValue] = React.useState('one');
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview b/docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview
deleted file mode 100644
index b99f48c0ee40d9..00000000000000
--- a/docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tabs/VerticalTabs.js b/docs/data/material/components/tabs/VerticalTabs.js
deleted file mode 100644
index 342d42d39fb0f2..00000000000000
--- a/docs/data/material/components/tabs/VerticalTabs.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-function TabPanel(props) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    
-  );
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
-function a11yProps(index) {
-  return {
-    id: `vertical-tab-${index}`,
-    'aria-controls': `vertical-tabpanel-${index}`,
-  };
-}
-
-export default function VerticalTabs() {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    
-      
-        
-        
-        
-        
-        
-        
-        
-      
-      
-        Item One
-      
-      
-        Item Two
-      
-      
-        Item Three
-      
-      
-        Item Four
-      
-      
-        Item Five
-      
-      
-        Item Six
-      
-      
-        Item Seven
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tabs/AccessibleTabs1.tsx b/docs/data/material/components/tabs/demos/accessible-tabs1/AccessibleTabs1.tsx
similarity index 92%
rename from docs/data/material/components/tabs/AccessibleTabs1.tsx
rename to docs/data/material/components/tabs/demos/accessible-tabs1/AccessibleTabs1.tsx
index 3e64af5f42d079..14dd2fe754804e 100644
--- a/docs/data/material/components/tabs/AccessibleTabs1.tsx
+++ b/docs/data/material/components/tabs/demos/accessible-tabs1/AccessibleTabs1.tsx
@@ -11,6 +11,7 @@ export default function AccessibleTabs1() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/accessible-tabs1/index.ts b/docs/data/material/components/tabs/demos/accessible-tabs1/index.ts
new file mode 100644
index 00000000000000..26a39c98a00dfa
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/accessible-tabs1/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccessibleTabs1 from './AccessibleTabs1';
+
+export default createDemo(import.meta.url, AccessibleTabs1);
diff --git a/docs/data/material/components/tabs/AccessibleTabs2.tsx b/docs/data/material/components/tabs/demos/accessible-tabs2/AccessibleTabs2.tsx
similarity index 92%
rename from docs/data/material/components/tabs/AccessibleTabs2.tsx
rename to docs/data/material/components/tabs/demos/accessible-tabs2/AccessibleTabs2.tsx
index 7d546f4956fd9c..d206a3d4d04b69 100644
--- a/docs/data/material/components/tabs/AccessibleTabs2.tsx
+++ b/docs/data/material/components/tabs/demos/accessible-tabs2/AccessibleTabs2.tsx
@@ -11,6 +11,7 @@ export default function AccessibleTabs2() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/accessible-tabs2/index.ts b/docs/data/material/components/tabs/demos/accessible-tabs2/index.ts
new file mode 100644
index 00000000000000..b3672ff6e23c8a
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/accessible-tabs2/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccessibleTabs2 from './AccessibleTabs2';
+
+export default createDemo(import.meta.url, AccessibleTabs2);
diff --git a/docs/data/material/components/tabs/BasicTabs.tsx b/docs/data/material/components/tabs/demos/basic/BasicTabs.tsx
similarity index 96%
rename from docs/data/material/components/tabs/BasicTabs.tsx
rename to docs/data/material/components/tabs/demos/basic/BasicTabs.tsx
index 947ad4d993b354..91c557ba1f8fff 100644
--- a/docs/data/material/components/tabs/BasicTabs.tsx
+++ b/docs/data/material/components/tabs/demos/basic/BasicTabs.tsx
@@ -41,6 +41,7 @@ export default function BasicTabs() {
 
   return (
     
+      {/* @focus-start */}
       
         
           
@@ -57,6 +58,7 @@ export default function BasicTabs() {
       
         Item Three
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/basic/index.ts b/docs/data/material/components/tabs/demos/basic/index.ts
new file mode 100644
index 00000000000000..7cc15c2028a80e
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicTabs from './BasicTabs';
+
+export default createDemo(import.meta.url, BasicTabs);
diff --git a/docs/data/material/components/tabs/CenteredTabs.tsx b/docs/data/material/components/tabs/demos/centered/CenteredTabs.tsx
similarity index 92%
rename from docs/data/material/components/tabs/CenteredTabs.tsx
rename to docs/data/material/components/tabs/demos/centered/CenteredTabs.tsx
index 4d3db456b53937..e7f4cf738b6d7d 100644
--- a/docs/data/material/components/tabs/CenteredTabs.tsx
+++ b/docs/data/material/components/tabs/demos/centered/CenteredTabs.tsx
@@ -12,11 +12,13 @@ export default function CenteredTabs() {
 
   return (
     
+      {/* @focus-start */}
       
         
         
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/centered/index.ts b/docs/data/material/components/tabs/demos/centered/index.ts
new file mode 100644
index 00000000000000..76675e325fbfc9
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/centered/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CenteredTabs from './CenteredTabs';
+
+export default createDemo(import.meta.url, CenteredTabs);
diff --git a/docs/data/material/components/tabs/ColorTabs.tsx b/docs/data/material/components/tabs/demos/color/ColorTabs.tsx
similarity index 93%
rename from docs/data/material/components/tabs/ColorTabs.tsx
rename to docs/data/material/components/tabs/demos/color/ColorTabs.tsx
index 059732d5f72fce..5f266d5d372932 100644
--- a/docs/data/material/components/tabs/ColorTabs.tsx
+++ b/docs/data/material/components/tabs/demos/color/ColorTabs.tsx
@@ -12,6 +12,7 @@ export default function ColorTabs() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/color/index.ts b/docs/data/material/components/tabs/demos/color/index.ts
new file mode 100644
index 00000000000000..374658ca2120f7
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorTabs from './ColorTabs';
+
+export default createDemo(import.meta.url, ColorTabs);
diff --git a/docs/data/material/components/tabs/CustomizedTabs.tsx b/docs/data/material/components/tabs/demos/customized/CustomizedTabs.tsx
similarity index 98%
rename from docs/data/material/components/tabs/CustomizedTabs.tsx
rename to docs/data/material/components/tabs/demos/customized/CustomizedTabs.tsx
index 75b3f88fe6ad35..217c748b9cd101 100644
--- a/docs/data/material/components/tabs/CustomizedTabs.tsx
+++ b/docs/data/material/components/tabs/demos/customized/CustomizedTabs.tsx
@@ -94,6 +94,7 @@ const StyledTab = styled((props: StyledTabProps) => (
 }));
 
 export default function CustomizedTabs() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -124,4 +125,5 @@ export default function CustomizedTabs() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/customized/index.ts b/docs/data/material/components/tabs/demos/customized/index.ts
new file mode 100644
index 00000000000000..8acc788107c16e
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedTabs from './CustomizedTabs';
+
+export default createDemo(import.meta.url, CustomizedTabs);
diff --git a/docs/data/material/components/tabs/DisabledTabs.tsx b/docs/data/material/components/tabs/demos/disabled/DisabledTabs.tsx
similarity index 91%
rename from docs/data/material/components/tabs/DisabledTabs.tsx
rename to docs/data/material/components/tabs/demos/disabled/DisabledTabs.tsx
index 144001a850c06e..43982a8e5534fd 100644
--- a/docs/data/material/components/tabs/DisabledTabs.tsx
+++ b/docs/data/material/components/tabs/demos/disabled/DisabledTabs.tsx
@@ -9,6 +9,7 @@ export default function DisabledTabs() {
     setValue(newValue);
   };
 
+  // @focus-start @padding 1
   return (
     
       
@@ -16,4 +17,5 @@ export default function DisabledTabs() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/disabled/index.ts b/docs/data/material/components/tabs/demos/disabled/index.ts
new file mode 100644
index 00000000000000..321350dcb847c0
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/disabled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisabledTabs from './DisabledTabs';
+
+export default createDemo(import.meta.url, DisabledTabs);
diff --git a/docs/data/material/components/tabs/FullWidthTabs.tsx b/docs/data/material/components/tabs/demos/full-width/FullWidthTabs.tsx
similarity index 97%
rename from docs/data/material/components/tabs/FullWidthTabs.tsx
rename to docs/data/material/components/tabs/demos/full-width/FullWidthTabs.tsx
index 99ff253bb02f63..79535b60dc3049 100644
--- a/docs/data/material/components/tabs/FullWidthTabs.tsx
+++ b/docs/data/material/components/tabs/demos/full-width/FullWidthTabs.tsx
@@ -41,6 +41,7 @@ function a11yProps(index: number) {
 }
 
 export default function FullWidthTabs() {
+  // @focus-start @padding 1
   const theme = useTheme();
   const [value, setValue] = React.useState(0);
 
@@ -75,4 +76,5 @@ export default function FullWidthTabs() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/full-width/index.ts b/docs/data/material/components/tabs/demos/full-width/index.ts
new file mode 100644
index 00000000000000..d6ede28fc678ae
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/full-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FullWidthTabs from './FullWidthTabs';
+
+export default createDemo(import.meta.url, FullWidthTabs);
diff --git a/docs/data/material/components/tabs/IconLabelTabs.tsx b/docs/data/material/components/tabs/demos/icon-label/IconLabelTabs.tsx
similarity index 94%
rename from docs/data/material/components/tabs/IconLabelTabs.tsx
rename to docs/data/material/components/tabs/demos/icon-label/IconLabelTabs.tsx
index 32fa1313f962d4..111488f6643788 100644
--- a/docs/data/material/components/tabs/IconLabelTabs.tsx
+++ b/docs/data/material/components/tabs/demos/icon-label/IconLabelTabs.tsx
@@ -12,6 +12,7 @@ export default function IconLabelTabs() {
     setValue(newValue);
   };
 
+  // @focus-start @padding 1
   return (
     
       } label="RECENTS" />
@@ -19,4 +20,5 @@ export default function IconLabelTabs() {
       } label="NEARBY" />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/icon-label/index.ts b/docs/data/material/components/tabs/demos/icon-label/index.ts
new file mode 100644
index 00000000000000..ace526c5cf2084
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/icon-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconLabelTabs from './IconLabelTabs';
+
+export default createDemo(import.meta.url, IconLabelTabs);
diff --git a/docs/data/material/components/tabs/IconPositionTabs.tsx b/docs/data/material/components/tabs/demos/icon-position/IconPositionTabs.tsx
similarity index 95%
rename from docs/data/material/components/tabs/IconPositionTabs.tsx
rename to docs/data/material/components/tabs/demos/icon-position/IconPositionTabs.tsx
index 180e97f6378649..688d6103180d1f 100644
--- a/docs/data/material/components/tabs/IconPositionTabs.tsx
+++ b/docs/data/material/components/tabs/demos/icon-position/IconPositionTabs.tsx
@@ -13,6 +13,7 @@ export default function IconPositionTabs() {
     setValue(newValue);
   };
 
+  // @focus-start @padding 1
   return (
     } iconPosition="bottom" label="bottom" />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/icon-position/index.ts b/docs/data/material/components/tabs/demos/icon-position/index.ts
new file mode 100644
index 00000000000000..83c8eca5ef2116
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/icon-position/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconPositionTabs from './IconPositionTabs';
+
+export default createDemo(import.meta.url, IconPositionTabs);
diff --git a/docs/data/material/components/tabs/IconTabs.tsx b/docs/data/material/components/tabs/demos/icon/IconTabs.tsx
similarity index 94%
rename from docs/data/material/components/tabs/IconTabs.tsx
rename to docs/data/material/components/tabs/demos/icon/IconTabs.tsx
index 3bbc029e8844cf..9000c178c7f334 100644
--- a/docs/data/material/components/tabs/IconTabs.tsx
+++ b/docs/data/material/components/tabs/demos/icon/IconTabs.tsx
@@ -12,6 +12,7 @@ export default function IconTabs() {
     setValue(newValue);
   };
 
+  // @focus-start @padding 1
   return (
     
       } aria-label="phone" />
@@ -19,4 +20,5 @@ export default function IconTabs() {
       } aria-label="person" />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/icon/index.ts b/docs/data/material/components/tabs/demos/icon/index.ts
new file mode 100644
index 00000000000000..43325dedbf633e
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import IconTabs from './IconTabs';
+
+export default createDemo(import.meta.url, IconTabs);
diff --git a/docs/data/material/components/tabs/LabTabs.tsx b/docs/data/material/components/tabs/demos/lab/LabTabs.tsx
similarity index 95%
rename from docs/data/material/components/tabs/LabTabs.tsx
rename to docs/data/material/components/tabs/demos/lab/LabTabs.tsx
index 2fa54fc967bf2a..81ac212206c8c0 100644
--- a/docs/data/material/components/tabs/LabTabs.tsx
+++ b/docs/data/material/components/tabs/demos/lab/LabTabs.tsx
@@ -14,6 +14,7 @@ export default function LabTabs() {
 
   return (
     
+      {/* @focus-start */}
       
         
           
@@ -26,6 +27,7 @@ export default function LabTabs() {
         Item Two
         Item Three
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/lab/index.ts b/docs/data/material/components/tabs/demos/lab/index.ts
new file mode 100644
index 00000000000000..eee9fcd157a862
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/lab/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LabTabs from './LabTabs';
+
+export default createDemo(import.meta.url, LabTabs);
diff --git a/docs/data/material/components/tabs/NavTabs.tsx b/docs/data/material/components/tabs/demos/nav/NavTabs.tsx
similarity index 97%
rename from docs/data/material/components/tabs/NavTabs.tsx
rename to docs/data/material/components/tabs/demos/nav/NavTabs.tsx
index 525feabea0698a..3a4ccf87d2e653 100644
--- a/docs/data/material/components/tabs/NavTabs.tsx
+++ b/docs/data/material/components/tabs/demos/nav/NavTabs.tsx
@@ -59,6 +59,7 @@ export default function NavTabs() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/nav/index.ts b/docs/data/material/components/tabs/demos/nav/index.ts
new file mode 100644
index 00000000000000..aa5b26bf515553
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/nav/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NavTabs from './NavTabs';
+
+export default createDemo(import.meta.url, NavTabs);
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx b/docs/data/material/components/tabs/demos/scrollable-button-auto/ScrollableTabsButtonAuto.tsx
similarity index 94%
rename from docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx
rename to docs/data/material/components/tabs/demos/scrollable-button-auto/ScrollableTabsButtonAuto.tsx
index 9e2a9b4f5c2c41..2d625d79b6b15b 100644
--- a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx
+++ b/docs/data/material/components/tabs/demos/scrollable-button-auto/ScrollableTabsButtonAuto.tsx
@@ -12,6 +12,7 @@ export default function ScrollableTabsButtonAuto() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts
new file mode 100644
index 00000000000000..0e81be165826af
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ScrollableTabsButtonAuto from './ScrollableTabsButtonAuto';
+
+export default createDemo(import.meta.url, ScrollableTabsButtonAuto);
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx b/docs/data/material/components/tabs/demos/scrollable-button-force/ScrollableTabsButtonForce.tsx
similarity index 94%
rename from docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx
rename to docs/data/material/components/tabs/demos/scrollable-button-force/ScrollableTabsButtonForce.tsx
index decae50b7cc48e..a55534882ce14b 100644
--- a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx
+++ b/docs/data/material/components/tabs/demos/scrollable-button-force/ScrollableTabsButtonForce.tsx
@@ -12,6 +12,7 @@ export default function ScrollableTabsButtonForce() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/scrollable-button-force/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-force/index.ts
new file mode 100644
index 00000000000000..1923eedd460056
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/scrollable-button-force/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ScrollableTabsButtonForce from './ScrollableTabsButtonForce';
+
+export default createDemo(import.meta.url, ScrollableTabsButtonForce);
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx b/docs/data/material/components/tabs/demos/scrollable-button-prevent/ScrollableTabsButtonPrevent.tsx
similarity index 94%
rename from docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx
rename to docs/data/material/components/tabs/demos/scrollable-button-prevent/ScrollableTabsButtonPrevent.tsx
index 5ba0e7242c8e18..da0c41ab3089ce 100644
--- a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx
+++ b/docs/data/material/components/tabs/demos/scrollable-button-prevent/ScrollableTabsButtonPrevent.tsx
@@ -12,6 +12,7 @@ export default function ScrollableTabsButtonPrevent() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts
new file mode 100644
index 00000000000000..bb769a435f82e6
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ScrollableTabsButtonPrevent from './ScrollableTabsButtonPrevent';
+
+export default createDemo(import.meta.url, ScrollableTabsButtonPrevent);
diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx b/docs/data/material/components/tabs/demos/scrollable-button-visible/ScrollableTabsButtonVisible.tsx
similarity index 96%
rename from docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx
rename to docs/data/material/components/tabs/demos/scrollable-button-visible/ScrollableTabsButtonVisible.tsx
index 3c4b8df12a959d..9ce54f71fdbdcd 100644
--- a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx
+++ b/docs/data/material/components/tabs/demos/scrollable-button-visible/ScrollableTabsButtonVisible.tsx
@@ -4,6 +4,7 @@ import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 
 export default function ScrollableTabsButtonVisible() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -40,4 +41,5 @@ export default function ScrollableTabsButtonVisible() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts
new file mode 100644
index 00000000000000..ea1f4227863d45
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ScrollableTabsButtonVisible from './ScrollableTabsButtonVisible';
+
+export default createDemo(import.meta.url, ScrollableTabsButtonVisible);
diff --git a/docs/data/material/components/tabs/VerticalTabs.tsx b/docs/data/material/components/tabs/demos/vertical/VerticalTabs.tsx
similarity index 98%
rename from docs/data/material/components/tabs/VerticalTabs.tsx
rename to docs/data/material/components/tabs/demos/vertical/VerticalTabs.tsx
index 33d26e5b7233b7..2d00fd1d0feb12 100644
--- a/docs/data/material/components/tabs/VerticalTabs.tsx
+++ b/docs/data/material/components/tabs/demos/vertical/VerticalTabs.tsx
@@ -38,6 +38,7 @@ function a11yProps(index: number) {
 }
 
 export default function VerticalTabs() {
+  // @focus-start @padding 1
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -87,4 +88,5 @@ export default function VerticalTabs() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tabs/demos/vertical/index.ts b/docs/data/material/components/tabs/demos/vertical/index.ts
new file mode 100644
index 00000000000000..d9e549aa7d8019
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/vertical/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalTabs from './VerticalTabs';
+
+export default createDemo(import.meta.url, VerticalTabs);
diff --git a/docs/data/material/components/tabs/TabsWrappedLabel.tsx b/docs/data/material/components/tabs/demos/wrapped-label/TabsWrappedLabel.tsx
similarity index 93%
rename from docs/data/material/components/tabs/TabsWrappedLabel.tsx
rename to docs/data/material/components/tabs/demos/wrapped-label/TabsWrappedLabel.tsx
index 8373571d1b57d9..14609c50a29474 100644
--- a/docs/data/material/components/tabs/TabsWrappedLabel.tsx
+++ b/docs/data/material/components/tabs/demos/wrapped-label/TabsWrappedLabel.tsx
@@ -12,6 +12,7 @@ export default function TabsWrappedLabel() {
 
   return (
     
+      {/* @focus-start */}
       
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tabs/demos/wrapped-label/index.ts b/docs/data/material/components/tabs/demos/wrapped-label/index.ts
new file mode 100644
index 00000000000000..71351bd8df29e9
--- /dev/null
+++ b/docs/data/material/components/tabs/demos/wrapped-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TabsWrappedLabel from './TabsWrappedLabel';
+
+export default createDemo(import.meta.url, TabsWrappedLabel);
diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md
index 824b2e1d7426ba..d78b9171accad5 100644
--- a/docs/data/material/components/tabs/tabs.md
+++ b/docs/data/material/components/tabs/tabs.md
@@ -23,7 +23,7 @@ Tabs are implemented using a collection of related components:
 - `` - the tab element itself. Clicking on a tab displays its corresponding panel.
 - `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs.
 
-{{"demo": "BasicTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/basic/index.ts"}}
 
 ## Basics
 
@@ -41,24 +41,24 @@ following [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/pattern
 - `` - the card that hosts the content associated with a tab.
 - `` - the top-level component that wraps the Tab List and Tab Panel components.
 
-{{"demo": "LabTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/lab/index.ts"}}
 
 ## Wrapped labels
 
 Long labels will automatically wrap on tabs.
 If the label is too long for the tab, it will overflow, and the text will not be visible.
 
-{{"demo": "TabsWrappedLabel.js"}}
+{{"component": "../data/material/components/tabs/demos/wrapped-label/index.ts"}}
 
 ## Colored tab
 
-{{"demo": "ColorTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/color/index.ts"}}
 
 ## Disabled tab
 
 A tab can be disabled by setting the `disabled` prop.
 
-{{"demo": "DisabledTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/disabled/index.ts"}}
 
 ## Fixed tabs
 
@@ -68,13 +68,13 @@ Fixed tabs should be used with a limited number of tabs, and when a consistent p
 
 The `variant="fullWidth"` prop should be used for smaller views.
 
-{{"demo": "FullWidthTabs.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/full-width/index.ts", "bg": true}}
 
 ### Centered
 
 The `centered` prop should be used for larger views.
 
-{{"demo": "CenteredTabs.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/centered/index.ts", "bg": true}}
 
 ## Scrollable tabs
 
@@ -82,13 +82,13 @@ The `centered` prop should be used for larger views.
 
 Use the `variant="scrollable"` and `scrollButtons="auto"` props to display left and right scroll buttons on desktop that are hidden on mobile:
 
-{{"demo": "ScrollableTabsButtonAuto.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/scrollable-button-auto/index.ts", "bg": true}}
 
 ### Forced scroll buttons
 
 Apply `scrollButtons={true}` and the `allowScrollButtonsMobile` prop to display the left and right scroll buttons on all viewports:
 
-{{"demo": "ScrollableTabsButtonForce.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/scrollable-button-force/index.ts", "bg": true}}
 
 If you want to make sure the buttons are always visible, you should customize the opacity.
 
@@ -98,21 +98,21 @@ If you want to make sure the buttons are always visible, you should customize th
 }
 ```
 
-{{"demo": "ScrollableTabsButtonVisible.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/scrollable-button-visible/index.ts", "bg": true}}
 
 ### Prevent scroll buttons
 
 Left and right scroll buttons are never be presented with `scrollButtons={false}`.
 All scrolling must be initiated through user agent scrolling mechanisms (for example left/right swipe, shift mouse wheel, etc.)
 
-{{"demo": "ScrollableTabsButtonPrevent.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/scrollable-button-prevent/index.ts", "bg": true}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/customized/index.ts"}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/tabs).
 
@@ -120,7 +120,7 @@ You can learn more about this in the [overrides documentation page](/material-ui
 
 To make vertical tabs instead of default horizontal ones, there is `orientation="vertical"`:
 
-{{"demo": "VerticalTabs.js", "bg": true}}
+{{"component": "../data/material/components/tabs/demos/vertical/index.ts", "bg": true}}
 
 Note that you can restore the scrollbar with `visibleScrollbar`.
 
@@ -128,7 +128,7 @@ Note that you can restore the scrollbar with `visibleScrollbar`.
 
 By default, tabs use a `button` element, but you can provide your custom tag or component. Here's an example of implementing tabbed navigation:
 
-{{"demo": "NavTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/nav/index.ts"}}
 
 ### Third-party routing library
 
@@ -140,15 +140,15 @@ Here is a [more detailed guide](/material-ui/integrations/routing/#tabs).
 
 Tab labels may be either all icons or all text.
 
-{{"demo": "IconTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/icon/index.ts"}}
 
-{{"demo": "IconLabelTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/icon-label/index.ts"}}
 
 ## Icon position
 
 By default, the icon is positioned at the `top` of a tab. Other supported positions are `start`, `end`, `bottom`.
 
-{{"demo": "IconPositionTabs.js"}}
+{{"component": "../data/material/components/tabs/demos/icon-position/index.ts"}}
 
 ## Accessibility
 
@@ -179,11 +179,11 @@ Focus a tab and navigate with arrow keys to notice the difference, for example <
 
 ```
 
-{{"demo": "AccessibleTabs1.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/tabs/demos/accessible-tabs1/index.ts", "defaultCodeOpen": false}}
 
 ```jsx
 /* Tabs where each tab needs to be selected manually */
 
 ```
 
-{{"demo": "AccessibleTabs2.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/tabs/demos/accessible-tabs2/index.ts", "defaultCodeOpen": false}}
diff --git a/docs/data/material/components/text-fields/BasicTextFields.js b/docs/data/material/components/text-fields/BasicTextFields.js
deleted file mode 100644
index fa90de3b497ae7..00000000000000
--- a/docs/data/material/components/text-fields/BasicTextFields.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function BasicTextFields() {
-  return (
-     :not(style)': { m: 1, width: '25ch' } }}
-      noValidate
-      autoComplete="off"
-    >
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/BasicTextFields.tsx.preview b/docs/data/material/components/text-fields/BasicTextFields.tsx.preview
deleted file mode 100644
index 6008d56150727a..00000000000000
--- a/docs/data/material/components/text-fields/BasicTextFields.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/ColorTextFields.js b/docs/data/material/components/text-fields/ColorTextFields.js
deleted file mode 100644
index 5c78011456a36c..00000000000000
--- a/docs/data/material/components/text-fields/ColorTextFields.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function ColorTextFields() {
-  return (
-     :not(style)': { m: 1, width: '25ch' } }}
-      noValidate
-      autoComplete="off"
-    >
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/ColorTextFields.tsx.preview b/docs/data/material/components/text-fields/ColorTextFields.tsx.preview
deleted file mode 100644
index f8bed77d5743c6..00000000000000
--- a/docs/data/material/components/text-fields/ColorTextFields.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/ComposedTextField.js b/docs/data/material/components/text-fields/ComposedTextField.js
deleted file mode 100644
index aebda7e1aaa5db..00000000000000
--- a/docs/data/material/components/text-fields/ComposedTextField.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import FilledInput from '@mui/material/FilledInput';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import Input from '@mui/material/Input';
-import InputLabel from '@mui/material/InputLabel';
-import OutlinedInput from '@mui/material/OutlinedInput';
-
-export default function ComposedTextField() {
-  const simpleId = React.useId();
-  const helperId = React.useId();
-  const disabledId = React.useId();
-  const errorId = React.useId();
-  const outlinedId = React.useId();
-  const filledId = React.useId();
-  return (
-     :not(style)': { m: 1 } }}
-      noValidate
-      autoComplete="off"
-    >
-      
-        Name
-        
-      
-      
-        Name
-        
-        
-          Some important helper text
-        
-      
-      
-        Name
-        
-        Disabled
-      
-      
-        Name
-        
-        Error
-      
-      
-        Name
-        
-      
-      
-        Name
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/CustomizedInputBase.js b/docs/data/material/components/text-fields/CustomizedInputBase.js
deleted file mode 100644
index cc6e6ecf18f1d7..00000000000000
--- a/docs/data/material/components/text-fields/CustomizedInputBase.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Paper from '@mui/material/Paper';
-import InputBase from '@mui/material/InputBase';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-import DirectionsIcon from '@mui/icons-material/Directions';
-
-export default function CustomizedInputBase() {
-  return (
-    
-      
-        
-      
-      
-      
-        
-      
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
deleted file mode 100644
index 2e30ffe8239512..00000000000000
--- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import Box from '@mui/material/Box';
-import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
-
-const customTheme = (outerTheme) =>
-  createTheme({
-    palette: {
-      mode: outerTheme.palette.mode,
-    },
-    components: {
-      MuiTextField: {
-        styleOverrides: {
-          root: {
-            '--TextField-brandBorderColor': '#E0E3E7',
-            '--TextField-brandBorderHoverColor': '#B2BAC2',
-            '--TextField-brandBorderFocusedColor': '#6F7E8C',
-            '& label.Mui-focused': {
-              color: 'var(--TextField-brandBorderFocusedColor)',
-            },
-          },
-        },
-      },
-      MuiOutlinedInput: {
-        styleOverrides: {
-          notchedOutline: {
-            borderColor: 'var(--TextField-brandBorderColor)',
-          },
-          root: {
-            [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-              borderColor: 'var(--TextField-brandBorderHoverColor)',
-            },
-            [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
-              borderColor: 'var(--TextField-brandBorderFocusedColor)',
-            },
-          },
-        },
-      },
-      MuiFilledInput: {
-        styleOverrides: {
-          root: {
-            '&::before, &::after': {
-              borderBottom: '2px solid var(--TextField-brandBorderColor)',
-            },
-            '&:hover:not(.Mui-disabled, .Mui-error):before': {
-              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
-            },
-            '&.Mui-focused:after': {
-              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
-            },
-          },
-        },
-      },
-      MuiInput: {
-        styleOverrides: {
-          root: {
-            '&::before': {
-              borderBottom: '2px solid var(--TextField-brandBorderColor)',
-            },
-            '&:hover:not(.Mui-disabled, .Mui-error):before': {
-              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
-            },
-            '&.Mui-focused:after': {
-              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
-            },
-          },
-        },
-      },
-    },
-  });
-
-export default function CustomizedInputsStyleOverrides() {
-  const outerTheme = useTheme();
-
-  return (
-    
-      
-        
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview
deleted file mode 100644
index 0a8fdd9694a9c3..00000000000000
--- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-  
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
deleted file mode 100644
index f28c3712d10245..00000000000000
--- a/docs/data/material/components/text-fields/CustomizedInputsStyled.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import * as React from 'react';
-import { alpha, styled } from '@mui/material/styles';
-import InputBase from '@mui/material/InputBase';
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import TextField from '@mui/material/TextField';
-import FormControl from '@mui/material/FormControl';
-
-const CssTextField = styled(TextField)({
-  '& label.Mui-focused': {
-    color: '#A0AAB4',
-  },
-  '& .MuiInput-underline:after': {
-    borderBottomColor: '#B2BAC2',
-  },
-  '& .MuiOutlinedInput-root': {
-    '& fieldset': {
-      borderColor: '#E0E3E7',
-    },
-    '&:hover fieldset': {
-      borderColor: '#B2BAC2',
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: '#6F7E8C',
-    },
-  },
-});
-
-const BootstrapInput = styled(InputBase)(({ theme }) => ({
-  'label + &': {
-    marginTop: theme.spacing(3),
-  },
-  '& .MuiInputBase-input': {
-    borderRadius: 4,
-    position: 'relative',
-    backgroundColor: '#F3F6F9',
-    border: '1px solid',
-    borderColor: '#E0E3E7',
-    fontSize: 16,
-    width: 'auto',
-    padding: '10px 12px',
-    transition: theme.transitions.create([
-      'border-color',
-      'background-color',
-      'box-shadow',
-    ]),
-    // Use the system font instead of the default Roboto font.
-    fontFamily: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-    ].join(','),
-    '&:focus': {
-      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-      borderColor: theme.palette.primary.main,
-    },
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#1A2027',
-      borderColor: '#2D3843',
-    }),
-  },
-}));
-
-const RedditTextField = styled((props) => (
-  
-))(({ theme }) => ({
-  '& .MuiFilledInput-root': {
-    overflow: 'hidden',
-    borderRadius: 4,
-    border: '1px solid',
-    backgroundColor: '#F3F6F9',
-    borderColor: '#E0E3E7',
-    transition: theme.transitions.create([
-      'border-color',
-      'background-color',
-      'box-shadow',
-    ]),
-    '&:hover': {
-      backgroundColor: 'transparent',
-    },
-    '&.Mui-focused': {
-      backgroundColor: 'transparent',
-      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
-      borderColor: theme.palette.primary.main,
-    },
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#1A2027',
-      borderColor: '#2D3843',
-    }),
-  },
-}));
-
-const ValidationTextField = styled(TextField)({
-  '& input:valid + fieldset': {
-    borderColor: '#E0E3E7',
-    borderWidth: 1,
-  },
-  '& input:invalid + fieldset': {
-    borderColor: 'red',
-    borderWidth: 1,
-  },
-  '& input:valid:focus + fieldset': {
-    borderLeftWidth: 4,
-    padding: '4px !important', // override inline-style
-  },
-});
-
-export default function CustomizedInputsStyled() {
-  const bootstrapId = React.useId();
-  const redditId = React.useId();
-  const cssId = React.useId();
-  const validationId = React.useId();
-  return (
-    
-      
-        
-          Bootstrap
-        
-        
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.js b/docs/data/material/components/text-fields/FormPropsTextFields.js
deleted file mode 100644
index 40dd800194e399..00000000000000
--- a/docs/data/material/components/text-fields/FormPropsTextFields.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function FormPropsTextFields() {
-  return (
-    
-      
    
-        
-        
-        
-        
-        
-        
-      
    
-      
    
-        
-        
-        
-        
-        
-        
-      
    
-      
    
-        
-        
-        
-        
-        
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
deleted file mode 100644
index 10303fbb6905e9..00000000000000
--- a/docs/data/material/components/text-fields/FormattedInputs.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { IMaskInput } from 'react-imask';
-import { NumericFormat } from 'react-number-format';
-import Stack from '@mui/material/Stack';
-import Input from '@mui/material/Input';
-import InputLabel from '@mui/material/InputLabel';
-import TextField from '@mui/material/TextField';
-import FormControl from '@mui/material/FormControl';
-
-const TextMaskCustom = React.forwardRef(function TextMaskCustom(props, ref) {
-  const { onChange, ...other } = props;
-  return (
-     onChange({ target: { name: props.name, value } })}
-      overwrite
-    />
-  );
-});
-
-TextMaskCustom.propTypes = {
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default function FormattedInputs() {
-  const id = React.useId();
-  const [values, setValues] = React.useState({
-    textmask: '(100) 000-0000',
-    numberformat: '1320',
-  });
-
-  const handleChange = (event) => {
-    setValues({
-      ...values,
-      [event.target.name]: event.target.value,
-    });
-  };
-
-  return (
-    
-      
-        react-imask
-        
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/FullWidthTextField.js b/docs/data/material/components/text-fields/FullWidthTextField.js
deleted file mode 100644
index 6641106537e87e..00000000000000
--- a/docs/data/material/components/text-fields/FullWidthTextField.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function FullWidthTextField() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/FullWidthTextField.tsx.preview b/docs/data/material/components/text-fields/FullWidthTextField.tsx.preview
deleted file mode 100644
index 158d3febed5c4a..00000000000000
--- a/docs/data/material/components/text-fields/FullWidthTextField.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/HelperTextAligned.js b/docs/data/material/components/text-fields/HelperTextAligned.js
deleted file mode 100644
index d09fb55b463503..00000000000000
--- a/docs/data/material/components/text-fields/HelperTextAligned.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function HelperTextAligned() {
-  return (
-     :not(style)': { m: 1 } }}>
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/HelperTextAligned.tsx.preview b/docs/data/material/components/text-fields/HelperTextAligned.tsx.preview
deleted file mode 100644
index d2fbae44cb013c..00000000000000
--- a/docs/data/material/components/text-fields/HelperTextAligned.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/HelperTextMisaligned.js b/docs/data/material/components/text-fields/HelperTextMisaligned.js
deleted file mode 100644
index bda9b80ed1cd6c..00000000000000
--- a/docs/data/material/components/text-fields/HelperTextMisaligned.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function HelperTextMisaligned() {
-  return (
-     :not(style)': { m: 1 } }}>
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview b/docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview
deleted file mode 100644
index bc3d39de5dc74c..00000000000000
--- a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/InputAdornments.js b/docs/data/material/components/text-fields/InputAdornments.js
deleted file mode 100644
index e773612be5d91e..00000000000000
--- a/docs/data/material/components/text-fields/InputAdornments.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Input from '@mui/material/Input';
-import FilledInput from '@mui/material/FilledInput';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
-import TextField from '@mui/material/TextField';
-import Visibility from '@mui/icons-material/Visibility';
-import VisibilityOff from '@mui/icons-material/VisibilityOff';
-
-export default function InputAdornments() {
-  const outlinedStartId = React.useId();
-  const outlinedWeightId = React.useId();
-  const outlinedPasswordId = React.useId();
-  const outlinedAmountId = React.useId();
-  const filledStartId = React.useId();
-  const filledWeightId = React.useId();
-  const filledPasswordId = React.useId();
-  const filledAmountId = React.useId();
-  const standardStartId = React.useId();
-  const standardWeightId = React.useId();
-  const standardPasswordId = React.useId();
-  const standardAmountId = React.useId();
-  const [showPassword, setShowPassword] = React.useState(false);
-
-  const handleClickShowPassword = () => setShowPassword((show) => !show);
-
-  const handleMouseDownPassword = (event) => {
-    event.preventDefault();
-  };
-
-  const handleMouseUpPassword = (event) => {
-    event.preventDefault();
-  };
-
-  return (
-    
-      
    
-        kg,
-            },
-          }}
-        />
-        
-          kg}
-            aria-describedby={`${outlinedWeightId}-helper-text`}
-            inputProps={{
-              'aria-label': 'weight',
-            }}
-          />
-          
-            Weight
-          
-        
-        
-          Password
-          
-                
-                  {showPassword ?  : }
-                
-              
-            }
-            label="Password"
-          />
-        
-        
-          Amount
-          $}
-            label="Amount"
-          />
-        
-      
    
-      
    
-        kg,
-            },
-          }}
-          variant="filled"
-        />
-        
-          kg}
-            aria-describedby={`${filledWeightId}-helper-text`}
-            inputProps={{
-              'aria-label': 'weight',
-            }}
-          />
-          
-            Weight
-          
-        
-        
-          Password
-          
-                
-                  {showPassword ?  : }
-                
-              
-            }
-          />
-        
-        
-          Amount
-          $}
-          />
-        
-      
    
-      
    
-        kg,
-            },
-          }}
-          variant="standard"
-        />
-        
-          kg}
-            aria-describedby={`${standardWeightId}-helper-text`}
-            inputProps={{
-              'aria-label': 'weight',
-            }}
-          />
-          
-            Weight
-          
-        
-        
-          Password
-          
-                
-                  {showPassword ?  : }
-                
-              
-            }
-          />
-        
-        
-          Amount
-          $}
-          />
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.js b/docs/data/material/components/text-fields/InputSuffixShrink.js
deleted file mode 100644
index d65a35395ecc11..00000000000000
--- a/docs/data/material/components/text-fields/InputSuffixShrink.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import Box from '@mui/material/Box';
-import { filledInputClasses } from '@mui/material/FilledInput';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import TextField from '@mui/material/TextField';
-import InputAdornment from '@mui/material/InputAdornment';
-
-export default function InputSuffixShrink() {
-  return (
-     :not(style)': { m: 1, width: '25ch' } }}
-      noValidate
-      autoComplete="off"
-    >
-       &`]: {
-                    opacity: 1,
-                  },
-                }}
-              >
-                lbs
-              
-            ),
-          },
-        }}
-      />
-       &`]: {
-                    opacity: 1,
-                  },
-                }}
-              >
-                days
-              
-            ),
-          },
-        }}
-      />
-       &`]: {
-                    opacity: 1,
-                  },
-                }}
-              >
-                @gmail.com
-              
-            ),
-          },
-        }}
-      />
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/InputWithIcon.js b/docs/data/material/components/text-fields/InputWithIcon.js
deleted file mode 100644
index 7e51551b6cc057..00000000000000
--- a/docs/data/material/components/text-fields/InputWithIcon.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Input from '@mui/material/Input';
-import InputLabel from '@mui/material/InputLabel';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormControl from '@mui/material/FormControl';
-import TextField from '@mui/material/TextField';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-
-export default function InputWithIcon() {
-  const adornmentId = React.useId();
-  const textFieldId = React.useId();
-  const sxId = React.useId();
-  return (
-     :not(style)': { m: 1 } }}>
-      
-        
-          With a start adornment
-        
-        
-              
-            
-          }
-        />
-      
-      
-                
-              
-            ),
-          },
-        }}
-        variant="standard"
-      />
-      
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/Inputs.js b/docs/data/material/components/text-fields/Inputs.js
deleted file mode 100644
index 80ee5f8aaf6f3f..00000000000000
--- a/docs/data/material/components/text-fields/Inputs.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Box from '@mui/material/Box';
-import Input from '@mui/material/Input';
-
-const ariaLabel = { 'aria-label': 'description' };
-
-export default function Inputs() {
-  return (
-     :not(style)': { m: 1 } }}
-      noValidate
-      autoComplete="off"
-    >
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/Inputs.tsx.preview b/docs/data/material/components/text-fields/Inputs.tsx.preview
deleted file mode 100644
index 58bb4920bbdcd1..00000000000000
--- a/docs/data/material/components/text-fields/Inputs.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/LayoutTextFields.js b/docs/data/material/components/text-fields/LayoutTextFields.js
deleted file mode 100644
index 7faa68bb843efc..00000000000000
--- a/docs/data/material/components/text-fields/LayoutTextFields.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-function RedBar() {
-  return (
-     ({
-        height: 20,
-        backgroundColor: 'rgba(255, 0, 0, 0.1)',
-        ...theme.applyStyles('dark', {
-          backgroundColor: 'rgb(255 132 132 / 25%)',
-        }),
-      })}
-    />
-  );
-}
-
-export default function LayoutTextFields() {
-  return (
-    
-      
-      
-      
-      
-      
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/LayoutTextFields.tsx.preview b/docs/data/material/components/text-fields/LayoutTextFields.tsx.preview
deleted file mode 100644
index fde53365366ebb..00000000000000
--- a/docs/data/material/components/text-fields/LayoutTextFields.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/MultilineTextFields.js b/docs/data/material/components/text-fields/MultilineTextFields.js
deleted file mode 100644
index 72e7c3cb344e49..00000000000000
--- a/docs/data/material/components/text-fields/MultilineTextFields.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function MultilineTextFields() {
-  return (
-    
-      
    
-        
-        
-        
-      
    
-      
    
-        
-        
-        
-      
    
-      
    
-        
-        
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/text-fields/SelectTextFields.js b/docs/data/material/components/text-fields/SelectTextFields.js
deleted file mode 100644
index d7d902f93f5a8e..00000000000000
--- a/docs/data/material/components/text-fields/SelectTextFields.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-
-const currencies = [
-  {
-    value: 'USD',
-    label: '$',
-  },
-  {
-    value: 'EUR',
-    label: '€',
-  },
-  {
-    value: 'BTC',
-    label: '฿',
-  },
-  {
-    value: 'JPY',
-    label: '¥',
-  },
-];
-
-export default function SelectTextFields() {
-  return (
-    
-      
    
-        
-          {currencies.map((option) => (
-            
-              {option.label}
-            
-          ))}
-        
-        
-          {currencies.map((option) => (
-            
-          ))}
-        
-      
    
-      
    
-        
-          {currencies.map((option) => (
-            
-              {option.label}
-            
-          ))}
-        
-        
-          {currencies.map((option) => (
-            
-          ))}
-        
-      
    
-      
    
-        
-          {currencies.map((option) => (
-            
-              {option.label}
-            
-          ))}
-        
-        
-          {currencies.map((option) => (
-            
-          ))}
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/text-fields/StateTextFields.js b/docs/data/material/components/text-fields/StateTextFields.js
deleted file mode 100644
index 07e26402bd1f08..00000000000000
--- a/docs/data/material/components/text-fields/StateTextFields.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function StateTextFields() {
-  const [name, setName] = React.useState('Cat in the Hat');
-
-  return (
-     :not(style)': { m: 1, width: '25ch' } }}
-      noValidate
-      autoComplete="off"
-    >
-       {
-          setName(event.target.value);
-        }}
-      />
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/StateTextFields.tsx.preview b/docs/data/material/components/text-fields/StateTextFields.tsx.preview
deleted file mode 100644
index a62dac2cb6988f..00000000000000
--- a/docs/data/material/components/text-fields/StateTextFields.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-) => {
-    setName(event.target.value);
-  }}
-/>
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/TextFieldHiddenLabel.js b/docs/data/material/components/text-fields/TextFieldHiddenLabel.js
deleted file mode 100644
index 7b00cc84717016..00000000000000
--- a/docs/data/material/components/text-fields/TextFieldHiddenLabel.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-
-export default function TextFieldHiddenLabel() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview b/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview
deleted file mode 100644
index 037a57484707d2..00000000000000
--- a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/TextFieldSizes.js b/docs/data/material/components/text-fields/TextFieldSizes.js
deleted file mode 100644
index d9f7beec2c8324..00000000000000
--- a/docs/data/material/components/text-fields/TextFieldSizes.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function TextFieldSizes() {
-  return (
-    
-      
    
-        
-        
-      
    
-      
    
-        
-        
-      
    
-      
    
-        
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/text-fields/UseFormControl.js b/docs/data/material/components/text-fields/UseFormControl.js
deleted file mode 100644
index 5e7535cc2ee439..00000000000000
--- a/docs/data/material/components/text-fields/UseFormControl.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import FormControl, { useFormControl } from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import FormHelperText from '@mui/material/FormHelperText';
-
-function MyFormHelperText() {
-  const { focused } = useFormControl() || {};
-
-  const helperText = React.useMemo(() => {
-    if (focused) {
-      return 'This field is being focused';
-    }
-
-    return 'Helper text';
-  }, [focused]);
-
-  return {helperText};
-}
-
-export default function UseFormControl() {
-  return (
-    
    
-      
-        
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/text-fields/UseFormControl.tsx.preview b/docs/data/material/components/text-fields/UseFormControl.tsx.preview
deleted file mode 100644
index b252c35ab46c5c..00000000000000
--- a/docs/data/material/components/text-fields/UseFormControl.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
    
-  
-    
-    
-  
-
    
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/ValidationTextFields.js b/docs/data/material/components/text-fields/ValidationTextFields.js
deleted file mode 100644
index c9355c4ec49031..00000000000000
--- a/docs/data/material/components/text-fields/ValidationTextFields.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-
-export default function ValidationTextFields() {
-  return (
-    
-      
    
-        
-        
-      
    
-      
    
-        
-        
-      
    
-      
    
-        
-        
-      
    
-        
-  );
-}
diff --git a/docs/data/material/components/text-fields/BasicTextFields.tsx b/docs/data/material/components/text-fields/demos/basic/BasicTextFields.tsx
similarity index 90%
rename from docs/data/material/components/text-fields/BasicTextFields.tsx
rename to docs/data/material/components/text-fields/demos/basic/BasicTextFields.tsx
index fa90de3b497ae7..620e543ce3992c 100644
--- a/docs/data/material/components/text-fields/BasicTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/basic/BasicTextFields.tsx
@@ -9,9 +9,11 @@ export default function BasicTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
         
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/basic/index.ts b/docs/data/material/components/text-fields/demos/basic/index.ts
new file mode 100644
index 00000000000000..2c3b768e75bcc5
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicTextFields from './BasicTextFields';
+
+export default createDemo(import.meta.url, BasicTextFields);
diff --git a/docs/data/material/components/text-fields/ColorTextFields.tsx b/docs/data/material/components/text-fields/demos/color/ColorTextFields.tsx
similarity index 91%
rename from docs/data/material/components/text-fields/ColorTextFields.tsx
rename to docs/data/material/components/text-fields/demos/color/ColorTextFields.tsx
index 5c78011456a36c..b07787bf748ff6 100644
--- a/docs/data/material/components/text-fields/ColorTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/color/ColorTextFields.tsx
@@ -9,6 +9,7 @@ export default function ColorTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/color/index.ts b/docs/data/material/components/text-fields/demos/color/index.ts
new file mode 100644
index 00000000000000..e46e10a4d12bed
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorTextFields from './ColorTextFields';
+
+export default createDemo(import.meta.url, ColorTextFields);
diff --git a/docs/data/material/components/text-fields/ComposedTextField.tsx b/docs/data/material/components/text-fields/demos/composed/ComposedTextField.tsx
similarity index 98%
rename from docs/data/material/components/text-fields/ComposedTextField.tsx
rename to docs/data/material/components/text-fields/demos/composed/ComposedTextField.tsx
index aebda7e1aaa5db..ae1a1775d5e9b5 100644
--- a/docs/data/material/components/text-fields/ComposedTextField.tsx
+++ b/docs/data/material/components/text-fields/demos/composed/ComposedTextField.tsx
@@ -8,6 +8,7 @@ import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 
 export default function ComposedTextField() {
+  // @focus-start @padding 1
   const simpleId = React.useId();
   const helperId = React.useId();
   const disabledId = React.useId();
@@ -64,4 +65,5 @@ export default function ComposedTextField() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/text-fields/demos/composed/index.ts b/docs/data/material/components/text-fields/demos/composed/index.ts
new file mode 100644
index 00000000000000..350cf002adfeb9
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/composed/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ComposedTextField from './ComposedTextField';
+
+export default createDemo(import.meta.url, ComposedTextField);
diff --git a/docs/data/material/components/text-fields/CustomizedInputBase.tsx b/docs/data/material/components/text-fields/demos/customized-input-base/CustomizedInputBase.tsx
similarity index 96%
rename from docs/data/material/components/text-fields/CustomizedInputBase.tsx
rename to docs/data/material/components/text-fields/demos/customized-input-base/CustomizedInputBase.tsx
index cc6e6ecf18f1d7..3a8be3fb9d9136 100644
--- a/docs/data/material/components/text-fields/CustomizedInputBase.tsx
+++ b/docs/data/material/components/text-fields/demos/customized-input-base/CustomizedInputBase.tsx
@@ -8,6 +8,7 @@ import DirectionsIcon from '@mui/icons-material/Directions';
 
 export default function CustomizedInputBase() {
   return (
+    // @focus-start
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/customized-input-base/index.ts b/docs/data/material/components/text-fields/demos/customized-input-base/index.ts
new file mode 100644
index 00000000000000..00f3f94610b768
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/customized-input-base/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedInputBase from './CustomizedInputBase';
+
+export default createDemo(import.meta.url, CustomizedInputBase);
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/CustomizedInputsStyleOverrides.tsx
similarity index 98%
rename from docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx
rename to docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/CustomizedInputsStyleOverrides.tsx
index 9a203155dae19d..b989d80a91f2cf 100644
--- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx
+++ b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/CustomizedInputsStyleOverrides.tsx
@@ -76,11 +76,13 @@ export default function CustomizedInputsStyleOverrides() {
     
+      {/* @focus-start */}
       
         
         
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts
new file mode 100644
index 00000000000000..40375bf2835a8a
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedInputsStyleOverrides from './CustomizedInputsStyleOverrides';
+
+export default createDemo(import.meta.url, CustomizedInputsStyleOverrides);
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/demos/customized-inputs-styled/CustomizedInputsStyled.tsx
similarity index 98%
rename from docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
rename to docs/data/material/components/text-fields/demos/customized-inputs-styled/CustomizedInputsStyled.tsx
index 2975d2e5732163..b904c93380aa5d 100644
--- a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
+++ b/docs/data/material/components/text-fields/demos/customized-inputs-styled/CustomizedInputsStyled.tsx
@@ -119,6 +119,7 @@ const ValidationTextField = styled(TextField)({
 });
 
 export default function CustomizedInputsStyled() {
+  // @focus-start @padding 1
   const bootstrapId = React.useId();
   const redditId = React.useId();
   const cssId = React.useId();
@@ -152,4 +153,5 @@ export default function CustomizedInputsStyled() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts b/docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts
new file mode 100644
index 00000000000000..a79275126f0cd5
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedInputsStyled from './CustomizedInputsStyled';
+
+export default createDemo(import.meta.url, CustomizedInputsStyled);
diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.tsx b/docs/data/material/components/text-fields/demos/form-props/FormPropsTextFields.tsx
similarity index 98%
rename from docs/data/material/components/text-fields/FormPropsTextFields.tsx
rename to docs/data/material/components/text-fields/demos/form-props/FormPropsTextFields.tsx
index 40dd800194e399..bbb22c4178ac15 100644
--- a/docs/data/material/components/text-fields/FormPropsTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/form-props/FormPropsTextFields.tsx
@@ -9,6 +9,7 @@ export default function FormPropsTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
    
         
       
    
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/form-props/index.ts b/docs/data/material/components/text-fields/demos/form-props/index.ts
new file mode 100644
index 00000000000000..6dcda8b3738a3c
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/form-props/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FormPropsTextFields from './FormPropsTextFields';
+
+export default createDemo(import.meta.url, FormPropsTextFields);
diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/demos/formatted-inputs/FormattedInputs.tsx
similarity index 97%
rename from docs/data/material/components/text-fields/FormattedInputs.tsx
rename to docs/data/material/components/text-fields/demos/formatted-inputs/FormattedInputs.tsx
index e57b0141244f52..5cff129d89b23c 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.tsx
+++ b/docs/data/material/components/text-fields/demos/formatted-inputs/FormattedInputs.tsx
@@ -31,6 +31,7 @@ const TextMaskCustom = React.forwardRef(
 );
 
 export default function FormattedInputs() {
+  // @focus-start @padding 1
   const id = React.useId();
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
@@ -68,4 +69,5 @@ export default function FormattedInputs() {
       />
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/text-fields/demos/formatted-inputs/index.ts b/docs/data/material/components/text-fields/demos/formatted-inputs/index.ts
new file mode 100644
index 00000000000000..3157ebc8ffe4be
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/formatted-inputs/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FormattedInputs from './FormattedInputs';
+
+export default createDemo(import.meta.url, FormattedInputs);
diff --git a/docs/data/material/components/text-fields/FullWidthTextField.tsx b/docs/data/material/components/text-fields/demos/full-width/FullWidthTextField.tsx
similarity index 84%
rename from docs/data/material/components/text-fields/FullWidthTextField.tsx
rename to docs/data/material/components/text-fields/demos/full-width/FullWidthTextField.tsx
index 6641106537e87e..a6fa8feea59a47 100644
--- a/docs/data/material/components/text-fields/FullWidthTextField.tsx
+++ b/docs/data/material/components/text-fields/demos/full-width/FullWidthTextField.tsx
@@ -4,7 +4,9 @@ import TextField from '@mui/material/TextField';
 export default function FullWidthTextField() {
   return (
     
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/full-width/index.ts b/docs/data/material/components/text-fields/demos/full-width/index.ts
new file mode 100644
index 00000000000000..8f268a4819c989
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/full-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FullWidthTextField from './FullWidthTextField';
+
+export default createDemo(import.meta.url, FullWidthTextField);
diff --git a/docs/data/material/components/text-fields/HelperTextAligned.tsx b/docs/data/material/components/text-fields/demos/helper-text-aligned/HelperTextAligned.tsx
similarity index 90%
rename from docs/data/material/components/text-fields/HelperTextAligned.tsx
rename to docs/data/material/components/text-fields/demos/helper-text-aligned/HelperTextAligned.tsx
index d09fb55b463503..995c7ad8011046 100644
--- a/docs/data/material/components/text-fields/HelperTextAligned.tsx
+++ b/docs/data/material/components/text-fields/demos/helper-text-aligned/HelperTextAligned.tsx
@@ -4,6 +4,7 @@ import TextField from '@mui/material/TextField';
 export default function HelperTextAligned() {
   return (
      :not(style)': { m: 1 } }}>
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts b/docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts
new file mode 100644
index 00000000000000..76c9b2c8d541ae
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HelperTextAligned from './HelperTextAligned';
+
+export default createDemo(import.meta.url, HelperTextAligned);
diff --git a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx b/docs/data/material/components/text-fields/demos/helper-text-misaligned/HelperTextMisaligned.tsx
similarity index 89%
rename from docs/data/material/components/text-fields/HelperTextMisaligned.tsx
rename to docs/data/material/components/text-fields/demos/helper-text-misaligned/HelperTextMisaligned.tsx
index bda9b80ed1cd6c..6586a0d6b138ac 100644
--- a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx
+++ b/docs/data/material/components/text-fields/demos/helper-text-misaligned/HelperTextMisaligned.tsx
@@ -4,12 +4,14 @@ import TextField from '@mui/material/TextField';
 export default function HelperTextMisaligned() {
   return (
      :not(style)': { m: 1 } }}>
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts b/docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts
new file mode 100644
index 00000000000000..f65b3e41e7589a
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HelperTextMisaligned from './HelperTextMisaligned';
+
+export default createDemo(import.meta.url, HelperTextMisaligned);
diff --git a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx b/docs/data/material/components/text-fields/demos/hidden-label/TextFieldHiddenLabel.tsx
similarity index 92%
rename from docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx
rename to docs/data/material/components/text-fields/demos/hidden-label/TextFieldHiddenLabel.tsx
index 7b00cc84717016..644815511cd487 100644
--- a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx
+++ b/docs/data/material/components/text-fields/demos/hidden-label/TextFieldHiddenLabel.tsx
@@ -10,6 +10,7 @@ export default function TextFieldHiddenLabel() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/hidden-label/index.ts b/docs/data/material/components/text-fields/demos/hidden-label/index.ts
new file mode 100644
index 00000000000000..6addc4a9a297fd
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/hidden-label/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TextFieldHiddenLabel from './TextFieldHiddenLabel';
+
+export default createDemo(import.meta.url, TextFieldHiddenLabel);
diff --git a/docs/data/material/components/text-fields/InputAdornments.tsx b/docs/data/material/components/text-fields/demos/input-adornments/InputAdornments.tsx
similarity index 99%
rename from docs/data/material/components/text-fields/InputAdornments.tsx
rename to docs/data/material/components/text-fields/demos/input-adornments/InputAdornments.tsx
index deb539b0708e8b..ac370ca8365b1a 100644
--- a/docs/data/material/components/text-fields/InputAdornments.tsx
+++ b/docs/data/material/components/text-fields/demos/input-adornments/InputAdornments.tsx
@@ -13,6 +13,7 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 export default function InputAdornments() {
+  // @focus-start @padding 1
   const outlinedStartId = React.useId();
   const outlinedWeightId = React.useId();
   const outlinedPasswordId = React.useId();
@@ -206,4 +207,5 @@ export default function InputAdornments() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/text-fields/demos/input-adornments/index.ts b/docs/data/material/components/text-fields/demos/input-adornments/index.ts
new file mode 100644
index 00000000000000..910b66673e4ed7
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/input-adornments/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InputAdornments from './InputAdornments';
+
+export default createDemo(import.meta.url, InputAdornments);
diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.tsx b/docs/data/material/components/text-fields/demos/input-suffix-shrink/InputSuffixShrink.tsx
similarity index 98%
rename from docs/data/material/components/text-fields/InputSuffixShrink.tsx
rename to docs/data/material/components/text-fields/demos/input-suffix-shrink/InputSuffixShrink.tsx
index d65a35395ecc11..db9a0b0dfbb569 100644
--- a/docs/data/material/components/text-fields/InputSuffixShrink.tsx
+++ b/docs/data/material/components/text-fields/demos/input-suffix-shrink/InputSuffixShrink.tsx
@@ -12,6 +12,7 @@ export default function InputSuffixShrink() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts b/docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts
new file mode 100644
index 00000000000000..1cb0a1d6eddcc1
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InputSuffixShrink from './InputSuffixShrink';
+
+export default createDemo(import.meta.url, InputSuffixShrink);
diff --git a/docs/data/material/components/text-fields/InputWithIcon.tsx b/docs/data/material/components/text-fields/demos/input-with-icon/InputWithIcon.tsx
similarity index 97%
rename from docs/data/material/components/text-fields/InputWithIcon.tsx
rename to docs/data/material/components/text-fields/demos/input-with-icon/InputWithIcon.tsx
index 7e51551b6cc057..9749cb2ff8e2e1 100644
--- a/docs/data/material/components/text-fields/InputWithIcon.tsx
+++ b/docs/data/material/components/text-fields/demos/input-with-icon/InputWithIcon.tsx
@@ -8,6 +8,7 @@ import TextField from '@mui/material/TextField';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 
 export default function InputWithIcon() {
+  // @focus-start @padding 1
   const adornmentId = React.useId();
   const textFieldId = React.useId();
   const sxId = React.useId();
@@ -46,4 +47,5 @@ export default function InputWithIcon() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/text-fields/demos/input-with-icon/index.ts b/docs/data/material/components/text-fields/demos/input-with-icon/index.ts
new file mode 100644
index 00000000000000..10976c7cb129af
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/input-with-icon/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import InputWithIcon from './InputWithIcon';
+
+export default createDemo(import.meta.url, InputWithIcon);
diff --git a/docs/data/material/components/text-fields/Inputs.tsx b/docs/data/material/components/text-fields/demos/inputs/Inputs.tsx
similarity index 91%
rename from docs/data/material/components/text-fields/Inputs.tsx
rename to docs/data/material/components/text-fields/demos/inputs/Inputs.tsx
index 80ee5f8aaf6f3f..17a8e28f9ada59 100644
--- a/docs/data/material/components/text-fields/Inputs.tsx
+++ b/docs/data/material/components/text-fields/demos/inputs/Inputs.tsx
@@ -11,10 +11,12 @@ export default function Inputs() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/inputs/index.ts b/docs/data/material/components/text-fields/demos/inputs/index.ts
new file mode 100644
index 00000000000000..3fde4f7047708f
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/inputs/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Inputs from './Inputs';
+
+export default createDemo(import.meta.url, Inputs);
diff --git a/docs/data/material/components/text-fields/LayoutTextFields.tsx b/docs/data/material/components/text-fields/demos/layout/LayoutTextFields.tsx
similarity index 94%
rename from docs/data/material/components/text-fields/LayoutTextFields.tsx
rename to docs/data/material/components/text-fields/demos/layout/LayoutTextFields.tsx
index 7faa68bb843efc..e447ce0b0a06c7 100644
--- a/docs/data/material/components/text-fields/LayoutTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/layout/LayoutTextFields.tsx
@@ -24,6 +24,7 @@ export default function LayoutTextFields() {
         '& .MuiTextField-root': { width: '25ch' },
       }}
     >
+      {/* @focus-start */}
       
       
       
@@ -31,6 +32,7 @@ export default function LayoutTextFields() {
       
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/layout/index.ts b/docs/data/material/components/text-fields/demos/layout/index.ts
new file mode 100644
index 00000000000000..c6379d6164ef5a
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/layout/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LayoutTextFields from './LayoutTextFields';
+
+export default createDemo(import.meta.url, LayoutTextFields);
diff --git a/docs/data/material/components/text-fields/MultilineTextFields.tsx b/docs/data/material/components/text-fields/demos/multiline/MultilineTextFields.tsx
similarity index 97%
rename from docs/data/material/components/text-fields/MultilineTextFields.tsx
rename to docs/data/material/components/text-fields/demos/multiline/MultilineTextFields.tsx
index 72e7c3cb344e49..c0469e0248fd0d 100644
--- a/docs/data/material/components/text-fields/MultilineTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/multiline/MultilineTextFields.tsx
@@ -9,6 +9,7 @@ export default function MultilineTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
    
         
       
    
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/multiline/index.ts b/docs/data/material/components/text-fields/demos/multiline/index.ts
new file mode 100644
index 00000000000000..72162eb661010b
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/multiline/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MultilineTextFields from './MultilineTextFields';
+
+export default createDemo(import.meta.url, MultilineTextFields);
diff --git a/docs/data/material/components/text-fields/SelectTextFields.tsx b/docs/data/material/components/text-fields/demos/select/SelectTextFields.tsx
similarity index 98%
rename from docs/data/material/components/text-fields/SelectTextFields.tsx
rename to docs/data/material/components/text-fields/demos/select/SelectTextFields.tsx
index d7d902f93f5a8e..756a0ad3d34249 100644
--- a/docs/data/material/components/text-fields/SelectTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/select/SelectTextFields.tsx
@@ -29,6 +29,7 @@ export default function SelectTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
    
         
       
    
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/select/index.ts b/docs/data/material/components/text-fields/demos/select/index.ts
new file mode 100644
index 00000000000000..f7e3d17508334b
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/select/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectTextFields from './SelectTextFields';
+
+export default createDemo(import.meta.url, SelectTextFields);
diff --git a/docs/data/material/components/text-fields/TextFieldSizes.tsx b/docs/data/material/components/text-fields/demos/sizes/TextFieldSizes.tsx
similarity index 95%
rename from docs/data/material/components/text-fields/TextFieldSizes.tsx
rename to docs/data/material/components/text-fields/demos/sizes/TextFieldSizes.tsx
index d9f7beec2c8324..fef67964f30b57 100644
--- a/docs/data/material/components/text-fields/TextFieldSizes.tsx
+++ b/docs/data/material/components/text-fields/demos/sizes/TextFieldSizes.tsx
@@ -9,6 +9,7 @@ export default function TextFieldSizes() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
    
         
       
    
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/sizes/index.ts b/docs/data/material/components/text-fields/demos/sizes/index.ts
new file mode 100644
index 00000000000000..4c2457aaa163ad
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TextFieldSizes from './TextFieldSizes';
+
+export default createDemo(import.meta.url, TextFieldSizes);
diff --git a/docs/data/material/components/text-fields/StateTextFields.tsx b/docs/data/material/components/text-fields/demos/state/StateTextFields.tsx
similarity index 93%
rename from docs/data/material/components/text-fields/StateTextFields.tsx
rename to docs/data/material/components/text-fields/demos/state/StateTextFields.tsx
index b24a3d71826a92..5b3c645b521beb 100644
--- a/docs/data/material/components/text-fields/StateTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/state/StateTextFields.tsx
@@ -12,6 +12,7 @@ export default function StateTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/state/index.ts b/docs/data/material/components/text-fields/demos/state/index.ts
new file mode 100644
index 00000000000000..94632ad8462917
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/state/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StateTextFields from './StateTextFields';
+
+export default createDemo(import.meta.url, StateTextFields);
diff --git a/docs/data/material/components/text-fields/UseFormControl.tsx b/docs/data/material/components/text-fields/demos/use-form-control/UseFormControl.tsx
similarity index 94%
rename from docs/data/material/components/text-fields/UseFormControl.tsx
rename to docs/data/material/components/text-fields/demos/use-form-control/UseFormControl.tsx
index 5e7535cc2ee439..e99544c92dd241 100644
--- a/docs/data/material/components/text-fields/UseFormControl.tsx
+++ b/docs/data/material/components/text-fields/demos/use-form-control/UseFormControl.tsx
@@ -18,6 +18,7 @@ function MyFormHelperText() {
 }
 
 export default function UseFormControl() {
+  // @focus-start @padding 1
   return (
     
    
       
@@ -26,4 +27,5 @@ export default function UseFormControl() {
       
     
    
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/text-fields/demos/use-form-control/index.ts b/docs/data/material/components/text-fields/demos/use-form-control/index.ts
new file mode 100644
index 00000000000000..5530197c369b60
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/use-form-control/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UseFormControl from './UseFormControl';
+
+export default createDemo(import.meta.url, UseFormControl);
diff --git a/docs/data/material/components/text-fields/ValidationTextFields.tsx b/docs/data/material/components/text-fields/demos/validation/ValidationTextFields.tsx
similarity index 96%
rename from docs/data/material/components/text-fields/ValidationTextFields.tsx
rename to docs/data/material/components/text-fields/demos/validation/ValidationTextFields.tsx
index c9355c4ec49031..e17cce8c1f5af1 100644
--- a/docs/data/material/components/text-fields/ValidationTextFields.tsx
+++ b/docs/data/material/components/text-fields/demos/validation/ValidationTextFields.tsx
@@ -9,6 +9,7 @@ export default function ValidationTextFields() {
       noValidate
       autoComplete="off"
     >
+      {/* @focus-start */}
       
    
         
       
    
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/text-fields/demos/validation/index.ts b/docs/data/material/components/text-fields/demos/validation/index.ts
new file mode 100644
index 00000000000000..28cfd6295ae577
--- /dev/null
+++ b/docs/data/material/components/text-fields/demos/validation/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ValidationTextFields from './ValidationTextFields';
+
+export default createDemo(import.meta.url, ValidationTextFields);
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index bee171231cdf13..c2019e2f57c803 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -20,7 +20,7 @@ Text fields allow users to enter text into a UI. They typically appear in forms
 The `TextField` wrapper component is a complete form control including a label, input, and help text.
 It comes with three variants: outlined (default), filled, and standard.
 
-{{"demo": "BasicTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/basic/index.ts"}}
 
 :::info
 The standard variant of the Text Field is no longer documented in the [Material Design guidelines](https://m2.material.io/)
@@ -32,7 +32,7 @@ but Material UI will continue to support it.
 
 Standard form attributes are supported, for example `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used.
 
-{{"demo": "FormPropsTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/form-props/index.ts"}}
 
 ## Controlling the HTML input
 
@@ -64,7 +64,7 @@ The rendered HTML input will look like this:
 The `error` prop toggles the error state.
 The `helperText` prop can then be used to provide feedback to the user about the error.
 
-{{"demo": "ValidationTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/validation/index.ts"}}
 
 ## Multiline
 
@@ -72,19 +72,19 @@ The `multiline` prop transforms the Text Field into a [Textarea Autosize](/mater
 Unless the `rows` prop is set, the height of the text field dynamically matches its content.
 You can use the `minRows` and `maxRows` props to bound it.
 
-{{"demo": "MultilineTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/multiline/index.ts"}}
 
 ## Select
 
 The `select` prop makes the text field use the [Select](/material-ui/react-select/) component internally.
 
-{{"demo": "SelectTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/select/index.ts"}}
 
 ## Icons
 
 There are multiple ways to display an icon with a text field.
 
-{{"demo": "InputWithIcon.js"}}
+{{"component": "../data/material/components/text-fields/demos/input-with-icon/index.ts"}}
 
 ### Input Adornments
 
@@ -92,37 +92,37 @@ The main way is with an `InputAdornment`.
 This can be used to add a prefix, a suffix, or an action to an input.
 For instance, you can use an icon button to hide or reveal the password.
 
-{{"demo": "InputAdornments.js"}}
+{{"component": "../data/material/components/text-fields/demos/input-adornments/index.ts"}}
 
 #### Customizing adornments
 
 You can apply custom styles to adornments, and trigger changes to one based on attributes from another.
 For example, the demo below uses the label's `[data-shrink=true]` attribute to make the suffix visible (via opacity) when the label is in its shrunken state.
 
-{{"demo": "InputSuffixShrink.js"}}
+{{"component": "../data/material/components/text-fields/demos/input-suffix-shrink/index.ts"}}
 
 ## Sizes
 
 Fancy smaller inputs? Use the `size` prop.
 
-{{"demo": "TextFieldSizes.js"}}
+{{"component": "../data/material/components/text-fields/demos/sizes/index.ts"}}
 
 The `filled` variant input height can be further reduced by rendering the label outside of it.
 
-{{"demo": "TextFieldHiddenLabel.js"}}
+{{"component": "../data/material/components/text-fields/demos/hidden-label/index.ts"}}
 
 ## Margin
 
 The `margin` prop can be used to alter the vertical spacing of the text field.
 Using `none` (default) doesn't apply margins to the `FormControl` whereas `dense` and `normal` do.
 
-{{"demo": "LayoutTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/layout/index.ts"}}
 
 ## Full width
 
 `fullWidth` can be used to make the input take up the full width of its container.
 
-{{"demo": "FullWidthTextField.js"}}
+{{"component": "../data/material/components/text-fields/demos/full-width/index.ts"}}
 
 ## Uncontrolled vs. Controlled
 
@@ -136,7 +136,7 @@ The component can be controlled or uncontrolled.
 Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
 
-{{"demo": "StateTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/state/index.ts"}}
 
 ## Components
 
@@ -154,17 +154,17 @@ This is on purpose.
 The component takes care of the most used properties.
 Then, it's up to the user to use the underlying component shown in the following demo. Still, you can use `slotProps.htmlInput` (and `slotProps.input`, `slotProps.inputLabel` properties) if you want to avoid some boilerplate.
 
-{{"demo": "ComposedTextField.js"}}
+{{"component": "../data/material/components/text-fields/demos/composed/index.ts"}}
 
 ## Inputs
 
-{{"demo": "Inputs.js"}}
+{{"component": "../data/material/components/text-fields/demos/inputs/index.ts"}}
 
 ## Color
 
 The `color` prop changes the highlight color of the text field when focused.
 
-{{"demo": "ColorTextFields.js"}}
+{{"component": "../data/material/components/text-fields/demos/color/index.ts"}}
 
 ## Customization
 
@@ -173,20 +173,20 @@ You can learn more about this in the [overrides documentation page](/material-ui
 
 ### Using the styled API
 
-{{"demo": "CustomizedInputsStyled.js"}}
+{{"component": "../data/material/components/text-fields/demos/customized-inputs-styled/index.ts"}}
 
 ### Using the theme style overrides API
 
 Use the `styleOverrides` key to change any style injected by Material UI into the DOM.
 See the [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) documentation for further details.
 
-{{"demo": "CustomizedInputsStyleOverrides.js"}}
+{{"component": "../data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts"}}
 
 Customization does not stop at CSS.
 You can use composition to build custom components and give your app a unique feel.
 Below is an example using the [`InputBase`](/material-ui/api/input-base/) component, inspired by Google Maps.
 
-{{"demo": "CustomizedInputBase.js", "bg": true}}
+{{"component": "../data/material/components/text-fields/demos/customized-input-base/index.ts", "bg": true}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/text-field).
 
@@ -224,7 +224,7 @@ import { useFormControl } from '@mui/material/FormControl';
 
 **Example**
 
-{{"demo": "UseFormControl.js"}}
+{{"component": "../data/material/components/text-fields/demos/use-form-control/index.ts"}}
 
 ## Performance
 
@@ -307,11 +307,11 @@ If you need a text field with number validation, you can use [Number Field](/mat
 
 The helper text prop affects the height of the text field. If two text fields are placed side by side, one with a helper text and one without, they will have different heights. For example:
 
-{{"demo": "HelperTextMisaligned.js"}}
+{{"component": "../data/material/components/text-fields/demos/helper-text-misaligned/index.ts"}}
 
 This can be fixed by passing a space character to the `helperText` prop:
 
-{{"demo": "HelperTextAligned.js"}}
+{{"component": "../data/material/components/text-fields/demos/helper-text-aligned/index.ts"}}
 
 ## Integration with 3rd party input libraries
 
@@ -320,7 +320,7 @@ You have to provide a custom implementation of the `` element with the `i
 
 The following demo uses the [react-imask](https://github.com/uNmAnNeR/imaskjs) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to, for example [react-stripe-element](https://github.com/mui/material-ui/issues/16037).
 
-{{"demo": "FormattedInputs.js"}}
+{{"component": "../data/material/components/text-fields/demos/formatted-inputs/index.ts"}}
 
 The provided input component should expose a ref with a value that implements the following interface:
 
diff --git a/docs/data/material/components/textarea-autosize/EmptyTextarea.js b/docs/data/material/components/textarea-autosize/EmptyTextarea.js
deleted file mode 100644
index c62f0d02bca92b..00000000000000
--- a/docs/data/material/components/textarea-autosize/EmptyTextarea.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import TextareaAutosize from '@mui/material/TextareaAutosize';
-
-export default function EmptyTextarea() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview b/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview
deleted file mode 100644
index ddba1a325d06a7..00000000000000
--- a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/material/components/textarea-autosize/MaxHeightTextarea.js
deleted file mode 100644
index c0f3cf6656abc2..00000000000000
--- a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import TextareaAutosize from '@mui/material/TextareaAutosize';
-
-export default function MaxHeightTextarea() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview b/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview
deleted file mode 100644
index 4d769cae273a54..00000000000000
--- a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/textarea-autosize/MinHeightTextarea.js b/docs/data/material/components/textarea-autosize/MinHeightTextarea.js
deleted file mode 100644
index d8d17e6d8c8456..00000000000000
--- a/docs/data/material/components/textarea-autosize/MinHeightTextarea.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import TextareaAutosize from '@mui/material/TextareaAutosize';
-
-export default function MinHeightTextarea() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview b/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview
deleted file mode 100644
index f56b4f1227ce73..00000000000000
--- a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/material/components/textarea-autosize/demos/empty-textarea/EmptyTextarea.tsx
similarity index 84%
rename from docs/data/material/components/textarea-autosize/EmptyTextarea.tsx
rename to docs/data/material/components/textarea-autosize/demos/empty-textarea/EmptyTextarea.tsx
index c62f0d02bca92b..f31f5aae07294b 100644
--- a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx
+++ b/docs/data/material/components/textarea-autosize/demos/empty-textarea/EmptyTextarea.tsx
@@ -1,6 +1,7 @@
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 export default function EmptyTextarea() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts b/docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts
new file mode 100644
index 00000000000000..59231c2e2da9f7
--- /dev/null
+++ b/docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import EmptyTextarea from './EmptyTextarea';
+
+export default createDemo(import.meta.url, EmptyTextarea);
diff --git a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/MaxHeightTextarea.tsx
similarity index 90%
rename from docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx
rename to docs/data/material/components/textarea-autosize/demos/max-height-textarea/MaxHeightTextarea.tsx
index c0f3cf6656abc2..af97ee60d5a660 100644
--- a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/MaxHeightTextarea.tsx
@@ -1,6 +1,7 @@
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 export default function MaxHeightTextarea() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts
new file mode 100644
index 00000000000000..f2ef28e0226b27
--- /dev/null
+++ b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MaxHeightTextarea from './MaxHeightTextarea';
+
+export default createDemo(import.meta.url, MaxHeightTextarea);
diff --git a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/MinHeightTextarea.tsx
similarity index 85%
rename from docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx
rename to docs/data/material/components/textarea-autosize/demos/min-height-textarea/MinHeightTextarea.tsx
index d8d17e6d8c8456..bf62be84a8ccb6 100644
--- a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/MinHeightTextarea.tsx
@@ -1,6 +1,7 @@
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 export default function MinHeightTextarea() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts
new file mode 100644
index 00000000000000..30c319a9e5a941
--- /dev/null
+++ b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MinHeightTextarea from './MinHeightTextarea';
+
+export default createDemo(import.meta.url, MinHeightTextarea);
diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md
index 596cc7fe31b2fc..2198ff22ae4c22 100644
--- a/docs/data/material/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md
@@ -18,7 +18,7 @@ Its height automatically adjusts as a response to keyboard inputs and window res
 
 By default, an empty Textarea Autosize component renders as a single row, as shown in the following demo:
 
-{{"demo": "EmptyTextarea.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/textarea-autosize/demos/empty-textarea/index.ts", "defaultCodeOpen": false}}
 
 ## Basics
 
@@ -32,10 +32,10 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 Use the `minRows` prop to define the minimum height of the component:
 
-{{"demo": "MinHeightTextarea.js"}}
+{{"component": "../data/material/components/textarea-autosize/demos/min-height-textarea/index.ts"}}
 
 ### Maximum height
 
 Use the `maxRows` prop to define the maximum height of the component:
 
-{{"demo": "MaxHeightTextarea.js"}}
+{{"component": "../data/material/components/textarea-autosize/demos/max-height-textarea/index.ts"}}
diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.js b/docs/data/material/components/timeline/AlternateReverseTimeline.js
deleted file mode 100644
index 2b5b4d4e28a9c9..00000000000000
--- a/docs/data/material/components/timeline/AlternateReverseTimeline.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function AlternateReverseTimeline() {
-  return (
-    
-      
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          
-          
-        
-        Code
-      
-      
-        
-          
-          
-        
-        Sleep
-      
-      
-        
-          
-        
-        Repeat
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/AlternateTimeline.js b/docs/data/material/components/timeline/AlternateTimeline.js
deleted file mode 100644
index 9839a341390a37..00000000000000
--- a/docs/data/material/components/timeline/AlternateTimeline.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function AlternateTimeline() {
-  return (
-    
-      
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          
-          
-        
-        Code
-      
-      
-        
-          
-          
-        
-        Sleep
-      
-      
-        
-          
-        
-        Repeat
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/BasicTimeline.js b/docs/data/material/components/timeline/BasicTimeline.js
deleted file mode 100644
index ad64a5e4a3312e..00000000000000
--- a/docs/data/material/components/timeline/BasicTimeline.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function BasicTimeline() {
-  return (
-    
-      
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          
-          
-        
-        Code
-      
-      
-        
-          
-        
-        Sleep
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/ColorsTimeline.js b/docs/data/material/components/timeline/ColorsTimeline.js
deleted file mode 100644
index 3575431524e63e..00000000000000
--- a/docs/data/material/components/timeline/ColorsTimeline.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function ColorsTimeline() {
-  return (
-    
-      
-        
-          
-          
-        
-        Secondary
-      
-      
-        
-          
-        
-        Success
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/ColorsTimeline.tsx.preview b/docs/data/material/components/timeline/ColorsTimeline.tsx.preview
deleted file mode 100644
index 7e4f8afbb3c3e6..00000000000000
--- a/docs/data/material/components/timeline/ColorsTimeline.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-
-  
-    
-      
-      
-    
-    Secondary
-  
-  
-    
-      
-    
-    Success
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/timeline/CustomizedTimeline.js b/docs/data/material/components/timeline/CustomizedTimeline.js
deleted file mode 100644
index 005d0d240ed75d..00000000000000
--- a/docs/data/material/components/timeline/CustomizedTimeline.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-import FastfoodIcon from '@mui/icons-material/Fastfood';
-import LaptopMacIcon from '@mui/icons-material/LaptopMac';
-import HotelIcon from '@mui/icons-material/Hotel';
-import RepeatIcon from '@mui/icons-material/Repeat';
-import Typography from '@mui/material/Typography';
-
-export default function CustomizedTimeline() {
-  return (
-    
-      
-        
-          9:30 am
-        
-        
-          
-          
-            
-          
-          
-        
-        
-          
-            Eat
-          
-          Because you need strength
-        
-      
-      
-        
-          10:00 am
-        
-        
-          
-          
-            
-          
-          
-        
-        
-          
-            Code
-          
-          Because it's awesome!
-        
-      
-      
-        
-          
-          
-            
-          
-          
-        
-        
-          
-            Sleep
-          
-          Because you need rest
-        
-      
-      
-        
-          
-          
-            
-          
-          
-        
-        
-          
-            Repeat
-          
-          Because this is the life you love!
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.js b/docs/data/material/components/timeline/LeftAlignedTimeline.js
deleted file mode 100644
index 1642ed39eb9b62..00000000000000
--- a/docs/data/material/components/timeline/LeftAlignedTimeline.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-import TimelineOppositeContent, {
-  timelineOppositeContentClasses,
-} from '@mui/lab/TimelineOppositeContent';
-
-export default function LeftAlignedTimeline() {
-  return (
-    
-      
-        
-          09:30 am
-        
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          10:00 am
-        
-        
-          
-        
-        Code
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/LeftPositionedTimeline.js b/docs/data/material/components/timeline/LeftPositionedTimeline.js
deleted file mode 100644
index ce680b4732e382..00000000000000
--- a/docs/data/material/components/timeline/LeftPositionedTimeline.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function LeftPositionedTimeline() {
-  return (
-    
-      
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          
-          
-        
-        Code
-      
-      
-        
-          
-          
-        
-        Sleep
-      
-      
-        
-          
-        
-        Repeat
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/NoOppositeContent.js b/docs/data/material/components/timeline/NoOppositeContent.js
deleted file mode 100644
index a45b7fbd2a5109..00000000000000
--- a/docs/data/material/components/timeline/NoOppositeContent.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function NoOppositeContent() {
-  return (
-    
-      
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          
-        
-        Code
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/OppositeContentTimeline.js b/docs/data/material/components/timeline/OppositeContentTimeline.js
deleted file mode 100644
index 5d300d5fbeef0c..00000000000000
--- a/docs/data/material/components/timeline/OppositeContentTimeline.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
-
-export default function OppositeContentTimeline() {
-  return (
-    
-      
-        
-          09:30 am
-        
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          10:00 am
-        
-        
-          
-          
-        
-        Code
-      
-      
-        
-          12:00 am
-        
-        
-          
-          
-        
-        Sleep
-      
-      
-        
-          9:00 am
-        
-        
-          
-          
-        
-        Repeat
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/OutlinedTimeline.js b/docs/data/material/components/timeline/OutlinedTimeline.js
deleted file mode 100644
index 632b63697a0f50..00000000000000
--- a/docs/data/material/components/timeline/OutlinedTimeline.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-
-export default function OutlinedTimeline() {
-  return (
-    
-      
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          
-          
-        
-        Code
-      
-      
-        
-          
-          
-        
-        Sleep
-      
-      
-        
-          
-        
-        Repeat
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.js b/docs/data/material/components/timeline/RightAlignedTimeline.js
deleted file mode 100644
index 67be11f844a7cb..00000000000000
--- a/docs/data/material/components/timeline/RightAlignedTimeline.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
-import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
-
-export default function RightAlignedTimeline() {
-  return (
-    
-      
-        
-          09:30 am
-        
-        
-          
-          
-        
-        Eat
-      
-      
-        
-          10:00 am
-        
-        
-          
-        
-        Code
-      
-    
-  );
-}
diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.tsx b/docs/data/material/components/timeline/demos/alternate-reverse/AlternateReverseTimeline.tsx
similarity index 97%
rename from docs/data/material/components/timeline/AlternateReverseTimeline.tsx
rename to docs/data/material/components/timeline/demos/alternate-reverse/AlternateReverseTimeline.tsx
index 2b5b4d4e28a9c9..e3c4208c8420de 100644
--- a/docs/data/material/components/timeline/AlternateReverseTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/alternate-reverse/AlternateReverseTimeline.tsx
@@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function AlternateReverseTimeline() {
   return (
+    // @focus-start
     
       
         
@@ -36,5 +37,6 @@ export default function AlternateReverseTimeline() {
         Repeat
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/alternate-reverse/index.ts b/docs/data/material/components/timeline/demos/alternate-reverse/index.ts
new file mode 100644
index 00000000000000..5e1c4c7c1d9864
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/alternate-reverse/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AlternateReverseTimeline from './AlternateReverseTimeline';
+
+export default createDemo(import.meta.url, AlternateReverseTimeline);
diff --git a/docs/data/material/components/timeline/AlternateTimeline.tsx b/docs/data/material/components/timeline/demos/alternate/AlternateTimeline.tsx
similarity index 96%
rename from docs/data/material/components/timeline/AlternateTimeline.tsx
rename to docs/data/material/components/timeline/demos/alternate/AlternateTimeline.tsx
index 9839a341390a37..3bc5284b78fb9c 100644
--- a/docs/data/material/components/timeline/AlternateTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/alternate/AlternateTimeline.tsx
@@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function AlternateTimeline() {
   return (
+    // @focus-start
     
       
         
@@ -36,5 +37,6 @@ export default function AlternateTimeline() {
         Repeat
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/alternate/index.ts b/docs/data/material/components/timeline/demos/alternate/index.ts
new file mode 100644
index 00000000000000..851a24d3312512
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/alternate/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AlternateTimeline from './AlternateTimeline';
+
+export default createDemo(import.meta.url, AlternateTimeline);
diff --git a/docs/data/material/components/timeline/BasicTimeline.tsx b/docs/data/material/components/timeline/demos/basic/BasicTimeline.tsx
similarity index 96%
rename from docs/data/material/components/timeline/BasicTimeline.tsx
rename to docs/data/material/components/timeline/demos/basic/BasicTimeline.tsx
index ad64a5e4a3312e..e1ee0a75261a1f 100644
--- a/docs/data/material/components/timeline/BasicTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/basic/BasicTimeline.tsx
@@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function BasicTimeline() {
   return (
+    // @focus-start
     
       
         
@@ -29,5 +30,6 @@ export default function BasicTimeline() {
         Sleep
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/basic/index.ts b/docs/data/material/components/timeline/demos/basic/index.ts
new file mode 100644
index 00000000000000..6f9b0083b960d5
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicTimeline from './BasicTimeline';
+
+export default createDemo(import.meta.url, BasicTimeline);
diff --git a/docs/data/material/components/timeline/ColorsTimeline.tsx b/docs/data/material/components/timeline/demos/colors/ColorsTimeline.tsx
similarity index 94%
rename from docs/data/material/components/timeline/ColorsTimeline.tsx
rename to docs/data/material/components/timeline/demos/colors/ColorsTimeline.tsx
index 3575431524e63e..51c94e53d8c36a 100644
--- a/docs/data/material/components/timeline/ColorsTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/colors/ColorsTimeline.tsx
@@ -6,6 +6,7 @@ import TimelineContent from '@mui/lab/TimelineContent';
 import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function ColorsTimeline() {
+  // @focus-start @padding 1
   return (
     
       
@@ -23,4 +24,5 @@ export default function ColorsTimeline() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/timeline/demos/colors/index.ts b/docs/data/material/components/timeline/demos/colors/index.ts
new file mode 100644
index 00000000000000..66a70431e87ad3
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/colors/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorsTimeline from './ColorsTimeline';
+
+export default createDemo(import.meta.url, ColorsTimeline);
diff --git a/docs/data/material/components/timeline/CustomizedTimeline.tsx b/docs/data/material/components/timeline/demos/customized/CustomizedTimeline.tsx
similarity index 98%
rename from docs/data/material/components/timeline/CustomizedTimeline.tsx
rename to docs/data/material/components/timeline/demos/customized/CustomizedTimeline.tsx
index 005d0d240ed75d..e4e5d3fecb4ce2 100644
--- a/docs/data/material/components/timeline/CustomizedTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/customized/CustomizedTimeline.tsx
@@ -13,6 +13,7 @@ import Typography from '@mui/material/Typography';
 
 export default function CustomizedTimeline() {
   return (
+    // @focus-start
     
       
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/customized/index.ts b/docs/data/material/components/timeline/demos/customized/index.ts
new file mode 100644
index 00000000000000..4364b4962f3853
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedTimeline from './CustomizedTimeline';
+
+export default createDemo(import.meta.url, CustomizedTimeline);
diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx b/docs/data/material/components/timeline/demos/left-aligned/LeftAlignedTimeline.tsx
similarity index 97%
rename from docs/data/material/components/timeline/LeftAlignedTimeline.tsx
rename to docs/data/material/components/timeline/demos/left-aligned/LeftAlignedTimeline.tsx
index 1642ed39eb9b62..55669f52555e9f 100644
--- a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/left-aligned/LeftAlignedTimeline.tsx
@@ -10,6 +10,7 @@ import TimelineOppositeContent, {
 
 export default function LeftAlignedTimeline() {
   return (
+    // @focus-start
     Code
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/left-aligned/index.ts b/docs/data/material/components/timeline/demos/left-aligned/index.ts
new file mode 100644
index 00000000000000..bd809d41f9c2b0
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/left-aligned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LeftAlignedTimeline from './LeftAlignedTimeline';
+
+export default createDemo(import.meta.url, LeftAlignedTimeline);
diff --git a/docs/data/material/components/timeline/LeftPositionedTimeline.tsx b/docs/data/material/components/timeline/demos/left-positioned/LeftPositionedTimeline.tsx
similarity index 96%
rename from docs/data/material/components/timeline/LeftPositionedTimeline.tsx
rename to docs/data/material/components/timeline/demos/left-positioned/LeftPositionedTimeline.tsx
index ce680b4732e382..a46abe67dfa62b 100644
--- a/docs/data/material/components/timeline/LeftPositionedTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/left-positioned/LeftPositionedTimeline.tsx
@@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function LeftPositionedTimeline() {
   return (
+    // @focus-start
     
       
         
@@ -36,5 +37,6 @@ export default function LeftPositionedTimeline() {
         Repeat
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/left-positioned/index.ts b/docs/data/material/components/timeline/demos/left-positioned/index.ts
new file mode 100644
index 00000000000000..35cb6ab3a7aec1
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/left-positioned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import LeftPositionedTimeline from './LeftPositionedTimeline';
+
+export default createDemo(import.meta.url, LeftPositionedTimeline);
diff --git a/docs/data/material/components/timeline/NoOppositeContent.tsx b/docs/data/material/components/timeline/demos/no-opposite-content/NoOppositeContent.tsx
similarity index 96%
rename from docs/data/material/components/timeline/NoOppositeContent.tsx
rename to docs/data/material/components/timeline/demos/no-opposite-content/NoOppositeContent.tsx
index a45b7fbd2a5109..9611c4657534ae 100644
--- a/docs/data/material/components/timeline/NoOppositeContent.tsx
+++ b/docs/data/material/components/timeline/demos/no-opposite-content/NoOppositeContent.tsx
@@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function NoOppositeContent() {
   return (
+    // @focus-start
     Code
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/no-opposite-content/index.ts b/docs/data/material/components/timeline/demos/no-opposite-content/index.ts
new file mode 100644
index 00000000000000..a9825f921276e8
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/no-opposite-content/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NoOppositeContent from './NoOppositeContent';
+
+export default createDemo(import.meta.url, NoOppositeContent);
diff --git a/docs/data/material/components/timeline/OppositeContentTimeline.tsx b/docs/data/material/components/timeline/demos/opposite-content/OppositeContentTimeline.tsx
similarity index 98%
rename from docs/data/material/components/timeline/OppositeContentTimeline.tsx
rename to docs/data/material/components/timeline/demos/opposite-content/OppositeContentTimeline.tsx
index 5d300d5fbeef0c..71554130b76c15 100644
--- a/docs/data/material/components/timeline/OppositeContentTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/opposite-content/OppositeContentTimeline.tsx
@@ -8,6 +8,7 @@ import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
 
 export default function OppositeContentTimeline() {
   return (
+    // @focus-start
     
       
         Repeat
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/opposite-content/index.ts b/docs/data/material/components/timeline/demos/opposite-content/index.ts
new file mode 100644
index 00000000000000..299397ba9a5e66
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/opposite-content/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OppositeContentTimeline from './OppositeContentTimeline';
+
+export default createDemo(import.meta.url, OppositeContentTimeline);
diff --git a/docs/data/material/components/timeline/OutlinedTimeline.tsx b/docs/data/material/components/timeline/demos/outlined/OutlinedTimeline.tsx
similarity index 97%
rename from docs/data/material/components/timeline/OutlinedTimeline.tsx
rename to docs/data/material/components/timeline/demos/outlined/OutlinedTimeline.tsx
index 632b63697a0f50..8bb6610d0ed45b 100644
--- a/docs/data/material/components/timeline/OutlinedTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/outlined/OutlinedTimeline.tsx
@@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot';
 
 export default function OutlinedTimeline() {
   return (
+    // @focus-start
     
       
         
@@ -36,5 +37,6 @@ export default function OutlinedTimeline() {
         Repeat
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/outlined/index.ts b/docs/data/material/components/timeline/demos/outlined/index.ts
new file mode 100644
index 00000000000000..c1e646f20ae1d1
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/outlined/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OutlinedTimeline from './OutlinedTimeline';
+
+export default createDemo(import.meta.url, OutlinedTimeline);
diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.tsx b/docs/data/material/components/timeline/demos/right-aligned/RightAlignedTimeline.tsx
similarity index 96%
rename from docs/data/material/components/timeline/RightAlignedTimeline.tsx
rename to docs/data/material/components/timeline/demos/right-aligned/RightAlignedTimeline.tsx
index 67be11f844a7cb..46713060ab3a21 100644
--- a/docs/data/material/components/timeline/RightAlignedTimeline.tsx
+++ b/docs/data/material/components/timeline/demos/right-aligned/RightAlignedTimeline.tsx
@@ -8,6 +8,7 @@ import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
 
 export default function RightAlignedTimeline() {
   return (
+    // @focus-start
     Code
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/timeline/demos/right-aligned/index.ts b/docs/data/material/components/timeline/demos/right-aligned/index.ts
new file mode 100644
index 00000000000000..dd75000ff2027a
--- /dev/null
+++ b/docs/data/material/components/timeline/demos/right-aligned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import RightAlignedTimeline from './RightAlignedTimeline';
+
+export default createDemo(import.meta.url, RightAlignedTimeline);
diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md
index 52388829d37493..e845665043b530 100644
--- a/docs/data/material/components/timeline/timeline.md
+++ b/docs/data/material/components/timeline/timeline.md
@@ -20,48 +20,48 @@ This component is not documented in the [Material Design guidelines](https://m2.
 
 A basic timeline showing list of events.
 
-{{"demo": "BasicTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/basic/index.ts"}}
 
 ## Left-positioned timeline
 
 The main content of the timeline can be positioned on the left side relative to the time axis.
 
-{{"demo": "LeftPositionedTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/left-positioned/index.ts"}}
 
 ## Alternating timeline
 
 The timeline can display the events on alternating sides.
 
-{{"demo": "AlternateTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/alternate/index.ts"}}
 
 ## Reverse Alternating timeline
 
 The timeline can display the events on alternating sides in reverse order.
 
-{{"demo": "AlternateReverseTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/alternate-reverse/index.ts"}}
 
 ## Color
 
 The `TimelineDot` can appear in different colors from theme palette.
 
-{{"demo": "ColorsTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/colors/index.ts"}}
 
 ## Outlined
 
-{{"demo": "OutlinedTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/outlined/index.ts"}}
 
 ## Opposite content
 
 The timeline can display content on opposite sides.
 
-{{"demo": "OppositeContentTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/opposite-content/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/customized/index.ts"}}
 
 ## Alignment
 
@@ -75,12 +75,12 @@ The demos below show how to adjust the relative width of the left and right side
 
 ### Left-aligned
 
-{{"demo": "LeftAlignedTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/left-aligned/index.ts"}}
 
 ### Right-aligned
 
-{{"demo": "RightAlignedTimeline.js"}}
+{{"component": "../data/material/components/timeline/demos/right-aligned/index.ts"}}
 
 ### Left-aligned with no opposite content
 
-{{"demo": "NoOppositeContent.js"}}
+{{"component": "../data/material/components/timeline/demos/no-opposite-content/index.ts"}}
diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.js b/docs/data/material/components/toggle-button/ColorToggleButton.js
deleted file mode 100644
index c584b8bbcabbba..00000000000000
--- a/docs/data/material/components/toggle-button/ColorToggleButton.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
-export default function ColorToggleButton() {
-  const [alignment, setAlignment] = React.useState('web');
-
-  const handleChange = (event, newAlignment) => {
-    setAlignment(newAlignment);
-  };
-
-  return (
-    
-      Web
-      Android
-      iOS
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview b/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview
deleted file mode 100644
index 009ab8c9f6322f..00000000000000
--- a/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-  Web
-  Android
-  iOS
-
\ No newline at end of file
diff --git a/docs/data/material/components/toggle-button/CustomizedDividers.js b/docs/data/material/components/toggle-button/CustomizedDividers.js
deleted file mode 100644
index 7a66fe7a345bda..00000000000000
--- a/docs/data/material/components/toggle-button/CustomizedDividers.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
-import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import Divider from '@mui/material/Divider';
-import Paper from '@mui/material/Paper';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup, {
-  toggleButtonGroupClasses,
-} from '@mui/material/ToggleButtonGroup';
-
-const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
-  [`& .${toggleButtonGroupClasses.grouped}`]: {
-    margin: theme.spacing(0.5),
-    border: 0,
-    borderRadius: theme.shape.borderRadius,
-    [`&.${toggleButtonGroupClasses.disabled}`]: {
-      border: 0,
-    },
-  },
-  [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]:
-    {
-      marginLeft: -1,
-      borderLeft: '1px solid transparent',
-    },
-}));
-
-export default function CustomizedDividers() {
-  const [alignment, setAlignment] = React.useState('left');
-  const [formats, setFormats] = React.useState(() => ['italic']);
-
-  const handleFormat = (event, newFormats) => {
-    setFormats(newFormats);
-  };
-
-  const handleAlignment = (event, newAlignment) => {
-    setAlignment(newAlignment);
-  };
-
-  return (
-    
    
-       ({
-          display: 'flex',
-          border: `1px solid ${theme.palette.divider}`,
-          flexWrap: 'wrap',
-        })}
-      >
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-        
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-            
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js b/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js
deleted file mode 100644
index 1e7fb0a076f917..00000000000000
--- a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
-import ToggleButtonGroup, {
-  toggleButtonGroupClasses,
-} from '@mui/material/ToggleButtonGroup';
-import { styled } from '@mui/material/styles';
-
-const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
-  gap: '2rem',
-  [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
-    {
-      borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
-      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-    },
-  [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
-    {
-      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
-    },
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
-    {
-      borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
-    },
-}));
-
-export default function HorizontalSpacingToggleButton() {
-  const [alignment, setAlignment] = React.useState('left');
-
-  const handleAlignment = (event, newAlignment) => {
-    setAlignment(newAlignment);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/StandaloneToggleButton.js b/docs/data/material/components/toggle-button/StandaloneToggleButton.js
deleted file mode 100644
index ab6f99ffd379ef..00000000000000
--- a/docs/data/material/components/toggle-button/StandaloneToggleButton.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import CheckIcon from '@mui/icons-material/Check';
-import ToggleButton from '@mui/material/ToggleButton';
-
-export default function StandaloneToggleButton() {
-  const [selected, setSelected] = React.useState(false);
-
-  return (
-     setSelected((prevSelected) => !prevSelected)}
-    >
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview b/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview
deleted file mode 100644
index b59402da9c7a3d..00000000000000
--- a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
- setSelected((prevSelected) => !prevSelected)}
->
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js b/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js
deleted file mode 100644
index 9917313024c6bf..00000000000000
--- a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import LaptopIcon from '@mui/icons-material/Laptop';
-import TvIcon from '@mui/icons-material/Tv';
-import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
-import Stack from '@mui/material/Stack';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
-export default function ToggleButtonNotEmpty() {
-  const [alignment, setAlignment] = React.useState('left');
-  const [devices, setDevices] = React.useState(() => ['phone']);
-
-  const handleAlignment = (event, newAlignment) => {
-    if (newAlignment !== null) {
-      setAlignment(newAlignment);
-    }
-  };
-
-  const handleDevices = (event, newDevices) => {
-    if (newDevices.length) {
-      setDevices(newDevices);
-    }
-  };
-
-  return (
-    
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.js b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
deleted file mode 100644
index 3dd11c52371173..00000000000000
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import Stack from '@mui/material/Stack';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
-export default function ToggleButtonSizes() {
-  const [alignment, setAlignment] = React.useState('left');
-
-  const handleChange = (event, newAlignment) => {
-    setAlignment(newAlignment);
-  };
-
-  const children = [
-    
-      
-    ,
-    
-      
-    ,
-    
-      
-    ,
-    
-      
-    ,
-  ];
-
-  const control = {
-    value: alignment,
-    onChange: handleChange,
-    exclusive: true,
-  };
-
-  return (
-    
-      
-        {children}
-      
-      
-        {children}
-      
-      
-        {children}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview
deleted file mode 100644
index ec837343370a64..00000000000000
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  {children}
-
-
-  {children}
-
-
-  {children}
-
\ No newline at end of file
diff --git a/docs/data/material/components/toggle-button/ToggleButtons.js b/docs/data/material/components/toggle-button/ToggleButtons.js
deleted file mode 100644
index 089e54589fff61..00000000000000
--- a/docs/data/material/components/toggle-button/ToggleButtons.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
-export default function ToggleButtons() {
-  const [alignment, setAlignment] = React.useState('left');
-
-  const handleAlignment = (event, newAlignment) => {
-    setAlignment(newAlignment);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.js b/docs/data/material/components/toggle-button/ToggleButtonsMultiple.js
deleted file mode 100644
index d54e4dd6100ab7..00000000000000
--- a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
-import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
-export default function ToggleButtonsMultiple() {
-  const [formats, setFormats] = React.useState(() => ['bold', 'italic']);
-
-  const handleFormat = (event, newFormats) => {
-    setFormats(newFormats);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-      
-        
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js b/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js
deleted file mode 100644
index 472d5aa09cbfde..00000000000000
--- a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
-import ToggleButtonGroup, {
-  toggleButtonGroupClasses,
-} from '@mui/material/ToggleButtonGroup';
-import { styled } from '@mui/material/styles';
-
-const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
-  gap: '2rem',
-  [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
-    {
-      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-    },
-  [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
-    {
-      borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
-      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
-    },
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
-    {
-      borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
-    },
-}));
-
-export default function VerticalSpacingToggleButton() {
-  const [alignment, setAlignment] = React.useState('left');
-
-  const handleAlignment = (event, newAlignment) => {
-    setAlignment(newAlignment);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/VerticalToggleButtons.js b/docs/data/material/components/toggle-button/VerticalToggleButtons.js
deleted file mode 100644
index c38050bec67d7e..00000000000000
--- a/docs/data/material/components/toggle-button/VerticalToggleButtons.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import ViewListIcon from '@mui/icons-material/ViewList';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-
-export default function VerticalToggleButtons() {
-  const [view, setView] = React.useState('list');
-
-  const handleChange = (event, nextView) => {
-    setView(nextView);
-  };
-
-  return (
-    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview b/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview
deleted file mode 100644
index fb9d138e72d73c..00000000000000
--- a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  
-    
-  
-  
-    
-  
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.tsx b/docs/data/material/components/toggle-button/demos/color/ColorToggleButton.tsx
similarity index 94%
rename from docs/data/material/components/toggle-button/ColorToggleButton.tsx
rename to docs/data/material/components/toggle-button/demos/color/ColorToggleButton.tsx
index 21f5a57e40d51e..332a9e8919cef6 100644
--- a/docs/data/material/components/toggle-button/ColorToggleButton.tsx
+++ b/docs/data/material/components/toggle-button/demos/color/ColorToggleButton.tsx
@@ -12,6 +12,7 @@ export default function ColorToggleButton() {
     setAlignment(newAlignment);
   };
 
+  // @focus-start @padding 1
   return (
     iOS
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/color/index.ts b/docs/data/material/components/toggle-button/demos/color/index.ts
new file mode 100644
index 00000000000000..38412d00d510d0
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorToggleButton from './ColorToggleButton';
+
+export default createDemo(import.meta.url, ColorToggleButton);
diff --git a/docs/data/material/components/toggle-button/CustomizedDividers.tsx b/docs/data/material/components/toggle-button/demos/customized-dividers/CustomizedDividers.tsx
similarity index 98%
rename from docs/data/material/components/toggle-button/CustomizedDividers.tsx
rename to docs/data/material/components/toggle-button/demos/customized-dividers/CustomizedDividers.tsx
index 11783a42150a92..b14cdab4369df0 100644
--- a/docs/data/material/components/toggle-button/CustomizedDividers.tsx
+++ b/docs/data/material/components/toggle-button/demos/customized-dividers/CustomizedDividers.tsx
@@ -33,6 +33,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
 }));
 
 export default function CustomizedDividers() {
+  // @focus-start @padding 1
   const [alignment, setAlignment] = React.useState('left');
   const [formats, setFormats] = React.useState(() => ['italic']);
 
@@ -104,4 +105,5 @@ export default function CustomizedDividers() {
           
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/customized-dividers/index.ts b/docs/data/material/components/toggle-button/demos/customized-dividers/index.ts
new file mode 100644
index 00000000000000..efc0da4abb0d60
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/customized-dividers/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedDividers from './CustomizedDividers';
+
+export default createDemo(import.meta.url, CustomizedDividers);
diff --git a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx b/docs/data/material/components/toggle-button/demos/horizontal-spacing/HorizontalSpacingToggleButton.tsx
similarity index 98%
rename from docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx
rename to docs/data/material/components/toggle-button/demos/horizontal-spacing/HorizontalSpacingToggleButton.tsx
index a60ff3051e75cd..746b3071f46fe0 100644
--- a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx
+++ b/docs/data/material/components/toggle-button/demos/horizontal-spacing/HorizontalSpacingToggleButton.tsx
@@ -29,6 +29,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
 }));
 
 export default function HorizontalSpacingToggleButton() {
+  // @focus-start @padding 1
   const [alignment, setAlignment] = React.useState('left');
 
   const handleAlignment = (
@@ -59,4 +60,5 @@ export default function HorizontalSpacingToggleButton() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts b/docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts
new file mode 100644
index 00000000000000..3e8bc3cce821bf
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import HorizontalSpacingToggleButton from './HorizontalSpacingToggleButton';
+
+export default createDemo(import.meta.url, HorizontalSpacingToggleButton);
diff --git a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx b/docs/data/material/components/toggle-button/demos/multiple/ToggleButtonsMultiple.tsx
similarity index 96%
rename from docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx
rename to docs/data/material/components/toggle-button/demos/multiple/ToggleButtonsMultiple.tsx
index 768301867615dc..7968114940f79c 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx
+++ b/docs/data/material/components/toggle-button/demos/multiple/ToggleButtonsMultiple.tsx
@@ -8,6 +8,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 export default function ToggleButtonsMultiple() {
+  // @focus-start @padding 1
   const [formats, setFormats] = React.useState(() => ['bold', 'italic']);
 
   const handleFormat = (
@@ -38,4 +39,5 @@ export default function ToggleButtonsMultiple() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/multiple/index.ts b/docs/data/material/components/toggle-button/demos/multiple/index.ts
new file mode 100644
index 00000000000000..3f9e091867cf6c
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/multiple/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ToggleButtonsMultiple from './ToggleButtonsMultiple';
+
+export default createDemo(import.meta.url, ToggleButtonsMultiple);
diff --git a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/data/material/components/toggle-button/demos/not-empty/ToggleButtonNotEmpty.tsx
similarity index 97%
rename from docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx
rename to docs/data/material/components/toggle-button/demos/not-empty/ToggleButtonNotEmpty.tsx
index e753e13b67fab3..c00c00c055c51c 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx
+++ b/docs/data/material/components/toggle-button/demos/not-empty/ToggleButtonNotEmpty.tsx
@@ -10,6 +10,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 export default function ToggleButtonNotEmpty() {
+  // @focus-start @padding 1
   const [alignment, setAlignment] = React.useState('left');
   const [devices, setDevices] = React.useState(() => ['phone']);
 
@@ -67,4 +68,5 @@ export default function ToggleButtonNotEmpty() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/not-empty/index.ts b/docs/data/material/components/toggle-button/demos/not-empty/index.ts
new file mode 100644
index 00000000000000..52db7fa30742d2
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/not-empty/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ToggleButtonNotEmpty from './ToggleButtonNotEmpty';
+
+export default createDemo(import.meta.url, ToggleButtonNotEmpty);
diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx b/docs/data/material/components/toggle-button/demos/sizes/ToggleButtonSizes.tsx
similarity index 97%
rename from docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
rename to docs/data/material/components/toggle-button/demos/sizes/ToggleButtonSizes.tsx
index e036450cced868..257e2fd1ddba56 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
+++ b/docs/data/material/components/toggle-button/demos/sizes/ToggleButtonSizes.tsx
@@ -40,6 +40,7 @@ export default function ToggleButtonSizes() {
 
   return (
     
+      {/* @focus-start */}
       
         {children}
       
@@ -49,6 +50,7 @@ export default function ToggleButtonSizes() {
       
         {children}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/toggle-button/demos/sizes/index.ts b/docs/data/material/components/toggle-button/demos/sizes/index.ts
new file mode 100644
index 00000000000000..4a24ce5fc938da
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/sizes/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ToggleButtonSizes from './ToggleButtonSizes';
+
+export default createDemo(import.meta.url, ToggleButtonSizes);
diff --git a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx b/docs/data/material/components/toggle-button/demos/standalone/StandaloneToggleButton.tsx
similarity index 90%
rename from docs/data/material/components/toggle-button/StandaloneToggleButton.tsx
rename to docs/data/material/components/toggle-button/demos/standalone/StandaloneToggleButton.tsx
index ab6f99ffd379ef..85c880ba6eb051 100644
--- a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx
+++ b/docs/data/material/components/toggle-button/demos/standalone/StandaloneToggleButton.tsx
@@ -5,6 +5,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 export default function StandaloneToggleButton() {
   const [selected, setSelected] = React.useState(false);
 
+  // @focus-start @padding 1
   return (
     
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/standalone/index.ts b/docs/data/material/components/toggle-button/demos/standalone/index.ts
new file mode 100644
index 00000000000000..f023fe99cb551b
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/standalone/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StandaloneToggleButton from './StandaloneToggleButton';
+
+export default createDemo(import.meta.url, StandaloneToggleButton);
diff --git a/docs/data/material/components/toggle-button/ToggleButtons.tsx b/docs/data/material/components/toggle-button/demos/toggle-buttons/ToggleButtons.tsx
similarity index 96%
rename from docs/data/material/components/toggle-button/ToggleButtons.tsx
rename to docs/data/material/components/toggle-button/demos/toggle-buttons/ToggleButtons.tsx
index 065bca2a86b9cf..29d57d015ba73c 100644
--- a/docs/data/material/components/toggle-button/ToggleButtons.tsx
+++ b/docs/data/material/components/toggle-button/demos/toggle-buttons/ToggleButtons.tsx
@@ -7,6 +7,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 export default function ToggleButtons() {
+  // @focus-start @padding 1
   const [alignment, setAlignment] = React.useState('left');
 
   const handleAlignment = (
@@ -37,4 +38,5 @@ export default function ToggleButtons() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts b/docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts
new file mode 100644
index 00000000000000..45fb7928465af9
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ToggleButtons from './ToggleButtons';
+
+export default createDemo(import.meta.url, ToggleButtons);
diff --git a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx b/docs/data/material/components/toggle-button/demos/vertical-spacing/VerticalSpacingToggleButton.tsx
similarity index 98%
rename from docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx
rename to docs/data/material/components/toggle-button/demos/vertical-spacing/VerticalSpacingToggleButton.tsx
index d8f7fd31356fc4..a98b101e404c2a 100644
--- a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx
+++ b/docs/data/material/components/toggle-button/demos/vertical-spacing/VerticalSpacingToggleButton.tsx
@@ -29,6 +29,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
 }));
 
 export default function VerticalSpacingToggleButton() {
+  // @focus-start @padding 1
   const [alignment, setAlignment] = React.useState('left');
 
   const handleAlignment = (
@@ -60,4 +61,5 @@ export default function VerticalSpacingToggleButton() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts b/docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts
new file mode 100644
index 00000000000000..dd323a1349e598
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalSpacingToggleButton from './VerticalSpacingToggleButton';
+
+export default createDemo(import.meta.url, VerticalSpacingToggleButton);
diff --git a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx b/docs/data/material/components/toggle-button/demos/vertical/VerticalToggleButtons.tsx
similarity index 95%
rename from docs/data/material/components/toggle-button/VerticalToggleButtons.tsx
rename to docs/data/material/components/toggle-button/demos/vertical/VerticalToggleButtons.tsx
index 00b2b6e4b332bf..f53c1162d07873 100644
--- a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx
+++ b/docs/data/material/components/toggle-button/demos/vertical/VerticalToggleButtons.tsx
@@ -12,6 +12,7 @@ export default function VerticalToggleButtons() {
     setView(nextView);
   };
 
+  // @focus-start @padding 1
   return (
     
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/toggle-button/demos/vertical/index.ts b/docs/data/material/components/toggle-button/demos/vertical/index.ts
new file mode 100644
index 00000000000000..c5f9054fd4a769
--- /dev/null
+++ b/docs/data/material/components/toggle-button/demos/vertical/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VerticalToggleButtons from './VerticalToggleButtons';
+
+export default createDemo(import.meta.url, VerticalToggleButtons);
diff --git a/docs/data/material/components/toggle-button/toggle-button.md b/docs/data/material/components/toggle-button/toggle-button.md
index f923862839cb76..75fdccec4653b2 100644
--- a/docs/data/material/components/toggle-button/toggle-button.md
+++ b/docs/data/material/components/toggle-button/toggle-button.md
@@ -25,29 +25,29 @@ In this example, text justification toggle buttons present options for left, cen
 
 **Note**: Exclusive selection does not enforce that a button must be active. For that effect see [enforce value set](#enforce-value-set).
 
-{{"demo": "ToggleButtons.js"}}
+{{"component": "../data/material/components/toggle-button/demos/toggle-buttons/index.ts"}}
 
 ## Multiple selection
 
 Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected.
 
-{{"demo": "ToggleButtonsMultiple.js"}}
+{{"component": "../data/material/components/toggle-button/demos/multiple/index.ts"}}
 
 ## Size
 
 For larger or smaller buttons, use the `size` prop.
 
-{{"demo": "ToggleButtonSizes.js"}}
+{{"component": "../data/material/components/toggle-button/demos/sizes/index.ts"}}
 
 ## Color
 
-{{"demo": "ColorToggleButton.js"}}
+{{"component": "../data/material/components/toggle-button/demos/color/index.ts"}}
 
 ## Vertical buttons
 
 The buttons can be stacked vertically with the `orientation` prop set to "vertical".
 
-{{"demo": "VerticalToggleButtons.js"}}
+{{"component": "../data/material/components/toggle-button/demos/vertical/index.ts"}}
 
 ## Enforce value set
 
@@ -67,18 +67,18 @@ const handleDevices = (event, newDevices) => {
 };
 ```
 
-{{"demo": "ToggleButtonNotEmpty.js"}}
+{{"component": "../data/material/components/toggle-button/demos/not-empty/index.ts"}}
 
 ## Standalone toggle button
 
-{{"demo": "StandaloneToggleButton.js"}}
+{{"component": "../data/material/components/toggle-button/demos/standalone/index.ts"}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedDividers.js", "bg": true}}
+{{"component": "../data/material/components/toggle-button/demos/customized-dividers/index.ts", "bg": true}}
 
 ### Spacing
 
@@ -86,11 +86,11 @@ The demos below show how to adjust spacing between toggle buttons in horizontal
 
 #### Horizontal Spacing
 
-{{"demo": "HorizontalSpacingToggleButton.js"}}
+{{"component": "../data/material/components/toggle-button/demos/horizontal-spacing/index.ts"}}
 
 #### Vertical Spacing
 
-{{"demo": "VerticalSpacingToggleButton.js"}}
+{{"component": "../data/material/components/toggle-button/demos/vertical-spacing/index.ts"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/tooltips/AccessibilityTooltips.js b/docs/data/material/components/tooltips/AccessibilityTooltips.js
deleted file mode 100644
index 8527b1959edfc0..00000000000000
--- a/docs/data/material/components/tooltips/AccessibilityTooltips.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import DeleteIcon from '@mui/icons-material/Delete';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function AccessibilityTooltips() {
-  return (
-    
    
-      
-        
-          
-        
-      
-      
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview b/docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview
deleted file mode 100644
index 5ff06ac9abf03f..00000000000000
--- a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-  
-    
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.js b/docs/data/material/components/tooltips/AnchorElTooltips.js
deleted file mode 100644
index fee0a65a7925f7..00000000000000
--- a/docs/data/material/components/tooltips/AnchorElTooltips.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function AnchorElTooltips() {
-  const positionRef = React.useRef({
-    x: 0,
-    y: 0,
-  });
-  const popperRef = React.useRef(null);
-  const areaRef = React.useRef(null);
-
-  const handleMouseMove = (event) => {
-    positionRef.current = { x: event.clientX, y: event.clientY };
-
-    if (popperRef.current != null) {
-      popperRef.current.update();
-    }
-  };
-
-  return (
-     {
-              return new DOMRect(
-                positionRef.current.x,
-                areaRef.current.getBoundingClientRect().y,
-                0,
-                0,
-              );
-            },
-          },
-        },
-      }}
-    >
-      
-        Hover
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/ArrowTooltips.js b/docs/data/material/components/tooltips/ArrowTooltips.js
deleted file mode 100644
index 7dea8baa62af5b..00000000000000
--- a/docs/data/material/components/tooltips/ArrowTooltips.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function ArrowTooltips() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/ArrowTooltips.tsx.preview b/docs/data/material/components/tooltips/ArrowTooltips.tsx.preview
deleted file mode 100644
index b9830f9db54447..00000000000000
--- a/docs/data/material/components/tooltips/ArrowTooltips.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/BasicTooltip.js b/docs/data/material/components/tooltips/BasicTooltip.js
deleted file mode 100644
index fea6036c38e34a..00000000000000
--- a/docs/data/material/components/tooltips/BasicTooltip.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import DeleteIcon from '@mui/icons-material/Delete';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function BasicTooltip() {
-  return (
-    
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/BasicTooltip.tsx.preview b/docs/data/material/components/tooltips/BasicTooltip.tsx.preview
deleted file mode 100644
index 1517d7939db2ff..00000000000000
--- a/docs/data/material/components/tooltips/BasicTooltip.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/ControlledTooltips.js b/docs/data/material/components/tooltips/ControlledTooltips.js
deleted file mode 100644
index 3b2fee878fbecd..00000000000000
--- a/docs/data/material/components/tooltips/ControlledTooltips.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function ControlledTooltips() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/ControlledTooltips.tsx.preview b/docs/data/material/components/tooltips/ControlledTooltips.tsx.preview
deleted file mode 100644
index 8136b3df529900..00000000000000
--- a/docs/data/material/components/tooltips/ControlledTooltips.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/CustomizedTooltips.js b/docs/data/material/components/tooltips/CustomizedTooltips.js
deleted file mode 100644
index 9ff2739954dc34..00000000000000
--- a/docs/data/material/components/tooltips/CustomizedTooltips.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-
-const LightTooltip = styled(({ className, ...props }) => (
-  
-))(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.common.white,
-    color: 'rgba(0, 0, 0, 0.87)',
-    boxShadow: theme.shadows[1],
-    fontSize: 11,
-  },
-}));
-
-const BootstrapTooltip = styled(({ className, ...props }) => (
-  
-))(({ theme }) => ({
-  [`& .${tooltipClasses.arrow}`]: {
-    color: theme.palette.common.black,
-  },
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.common.black,
-  },
-}));
-
-const HtmlTooltip = styled(({ className, ...props }) => (
-  
-))(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: '#f5f5f9',
-    color: 'rgba(0, 0, 0, 0.87)',
-    maxWidth: 220,
-    fontSize: theme.typography.pxToRem(12),
-    border: '1px solid #dadde9',
-  },
-}));
-
-export default function CustomizedTooltips() {
-  return (
-    
    
-      
-        
-      
-      
-        
-      
-      
-            
-              Tooltip with HTML
-            
-            {"And here's"} {'some'} {'amazing content'}.{' '}
-            {"It's very engaging. Right?"}
-          
-        }
-      >
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/tooltips/DelayTooltips.js b/docs/data/material/components/tooltips/DelayTooltips.js
deleted file mode 100644
index a0b109338a067b..00000000000000
--- a/docs/data/material/components/tooltips/DelayTooltips.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function DelayTooltips() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/DelayTooltips.tsx.preview b/docs/data/material/components/tooltips/DelayTooltips.tsx.preview
deleted file mode 100644
index 20661a0c4bfeb7..00000000000000
--- a/docs/data/material/components/tooltips/DelayTooltips.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.js b/docs/data/material/components/tooltips/DisabledTooltips.js
deleted file mode 100644
index a00764ef2a437e..00000000000000
--- a/docs/data/material/components/tooltips/DisabledTooltips.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function DisabledTooltips() {
-  return (
-    
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview b/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
deleted file mode 100644
index f83193be661f3d..00000000000000
--- a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/FollowCursorTooltips.js b/docs/data/material/components/tooltips/FollowCursorTooltips.js
deleted file mode 100644
index 4fa8046377dbff..00000000000000
--- a/docs/data/material/components/tooltips/FollowCursorTooltips.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function FollowCursorTooltips() {
-  return (
-    
-      
-        Disabled Action
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview b/docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview
deleted file mode 100644
index 8f1153073eda3e..00000000000000
--- a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  
-    Disabled Action
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/NonInteractiveTooltips.js b/docs/data/material/components/tooltips/NonInteractiveTooltips.js
deleted file mode 100644
index 461de1d6c4d40a..00000000000000
--- a/docs/data/material/components/tooltips/NonInteractiveTooltips.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function NonInteractiveTooltips() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview b/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview
deleted file mode 100644
index 70a4b79ad75636..00000000000000
--- a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/PositionedTooltips.js b/docs/data/material/components/tooltips/PositionedTooltips.js
deleted file mode 100644
index 6bd6e80525109b..00000000000000
--- a/docs/data/material/components/tooltips/PositionedTooltips.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function PositionedTooltips() {
-  return (
-    
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-      
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-      
-      
-        
-          
-        
-        
-          
-        
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/TooltipMargin.js b/docs/data/material/components/tooltips/TooltipMargin.js
deleted file mode 100644
index 080ce8cf3e0b78..00000000000000
--- a/docs/data/material/components/tooltips/TooltipMargin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
-
-export default function TooltipMargin() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/TooltipOffset.js b/docs/data/material/components/tooltips/TooltipOffset.js
deleted file mode 100644
index 948426086fe660..00000000000000
--- a/docs/data/material/components/tooltips/TooltipOffset.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function TooltipOffset() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.js b/docs/data/material/components/tooltips/TransitionsTooltips.js
deleted file mode 100644
index c28111d77296e5..00000000000000
--- a/docs/data/material/components/tooltips/TransitionsTooltips.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import Fade from '@mui/material/Fade';
-import Zoom from '@mui/material/Zoom';
-
-export default function TransitionsTooltips() {
-  return (
-    
    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/tooltips/TriggersTooltips.js b/docs/data/material/components/tooltips/TriggersTooltips.js
deleted file mode 100644
index 8415fd79d4fb29..00000000000000
--- a/docs/data/material/components/tooltips/TriggersTooltips.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-
-export default function TriggersTooltips() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleTooltipClose = () => {
-    setOpen(false);
-  };
-
-  const handleTooltipOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    
    
-      
-        
-          
-            
-          
-        
-        
-          
-            
-          
-        
-        
-          
-            
-          
-        
-        
-          
-            
    
-              
-                
-              
-            
    
-              
-            
-          
-    
    
-  );
-}
diff --git a/docs/data/material/components/tooltips/VariableWidth.js b/docs/data/material/components/tooltips/VariableWidth.js
deleted file mode 100644
index 8705920c069b67..00000000000000
--- a/docs/data/material/components/tooltips/VariableWidth.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
-
-const CustomWidthTooltip = styled(({ className, ...props }) => (
-  
-))({
-  [`& .${tooltipClasses.tooltip}`]: {
-    maxWidth: 500,
-  },
-});
-
-const NoMaxWidthTooltip = styled(({ className, ...props }) => (
-  
-))({
-  [`& .${tooltipClasses.tooltip}`]: {
-    maxWidth: 'none',
-  },
-});
-
-const longText = `
-Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
-Praesent non nunc mollis, fermentum neque at, semper arcu.
-Nullam eget est sed sem iaculis gravida eget vitae justo.
-`;
-
-export default function VariableWidth() {
-  return (
-    
    
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/tooltips/VariableWidth.tsx.preview b/docs/data/material/components/tooltips/VariableWidth.tsx.preview
deleted file mode 100644
index 429c676a4f46ac..00000000000000
--- a/docs/data/material/components/tooltips/VariableWidth.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  
-
-
-  
-
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx b/docs/data/material/components/tooltips/demos/accessibility/AccessibilityTooltips.tsx
similarity index 90%
rename from docs/data/material/components/tooltips/AccessibilityTooltips.tsx
rename to docs/data/material/components/tooltips/demos/accessibility/AccessibilityTooltips.tsx
index 8527b1959edfc0..b8b1b6eb1eb208 100644
--- a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/accessibility/AccessibilityTooltips.tsx
@@ -6,6 +6,7 @@ import Tooltip from '@mui/material/Tooltip';
 export default function AccessibilityTooltips() {
   return (
     
    
+      {/* @focus-start */}
       
         
           
@@ -14,6 +15,7 @@ export default function AccessibilityTooltips() {
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/accessibility/index.ts b/docs/data/material/components/tooltips/demos/accessibility/index.ts
new file mode 100644
index 00000000000000..45597034c8f332
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/accessibility/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AccessibilityTooltips from './AccessibilityTooltips';
+
+export default createDemo(import.meta.url, AccessibilityTooltips);
diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.tsx b/docs/data/material/components/tooltips/demos/anchor-el/AnchorElTooltips.tsx
similarity index 96%
rename from docs/data/material/components/tooltips/AnchorElTooltips.tsx
rename to docs/data/material/components/tooltips/demos/anchor-el/AnchorElTooltips.tsx
index 522d364b63dde7..c01e8f96e1fb9e 100644
--- a/docs/data/material/components/tooltips/AnchorElTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/anchor-el/AnchorElTooltips.tsx
@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { Instance } from '@popperjs/core';
 
 export default function AnchorElTooltips() {
+  // @focus-start @padding 1
   const positionRef = React.useRef<{ x: number; y: number }>({
     x: 0,
     y: 0,
@@ -50,4 +51,5 @@ export default function AnchorElTooltips() {
       
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/anchor-el/index.ts b/docs/data/material/components/tooltips/demos/anchor-el/index.ts
new file mode 100644
index 00000000000000..6bb0ed709c44c0
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/anchor-el/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AnchorElTooltips from './AnchorElTooltips';
+
+export default createDemo(import.meta.url, AnchorElTooltips);
diff --git a/docs/data/material/components/tooltips/ArrowTooltips.tsx b/docs/data/material/components/tooltips/demos/arrow/ArrowTooltips.tsx
similarity index 84%
rename from docs/data/material/components/tooltips/ArrowTooltips.tsx
rename to docs/data/material/components/tooltips/demos/arrow/ArrowTooltips.tsx
index 7dea8baa62af5b..f268be8f7417c2 100644
--- a/docs/data/material/components/tooltips/ArrowTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/arrow/ArrowTooltips.tsx
@@ -2,9 +2,11 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 
 export default function ArrowTooltips() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/arrow/index.ts b/docs/data/material/components/tooltips/demos/arrow/index.ts
new file mode 100644
index 00000000000000..62f2791a801fd6
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/arrow/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ArrowTooltips from './ArrowTooltips';
+
+export default createDemo(import.meta.url, ArrowTooltips);
diff --git a/docs/data/material/components/tooltips/BasicTooltip.tsx b/docs/data/material/components/tooltips/demos/basic/BasicTooltip.tsx
similarity index 87%
rename from docs/data/material/components/tooltips/BasicTooltip.tsx
rename to docs/data/material/components/tooltips/demos/basic/BasicTooltip.tsx
index fea6036c38e34a..3f9d1e9092296f 100644
--- a/docs/data/material/components/tooltips/BasicTooltip.tsx
+++ b/docs/data/material/components/tooltips/demos/basic/BasicTooltip.tsx
@@ -3,6 +3,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
 export default function BasicTooltip() {
+  // @focus-start @padding 1
   return (
     
       
@@ -10,4 +11,5 @@ export default function BasicTooltip() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/basic/index.ts b/docs/data/material/components/tooltips/demos/basic/index.ts
new file mode 100644
index 00000000000000..7ab2aa818325a0
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicTooltip from './BasicTooltip';
+
+export default createDemo(import.meta.url, BasicTooltip);
diff --git a/docs/data/material/components/tooltips/ControlledTooltips.tsx b/docs/data/material/components/tooltips/demos/controlled/ControlledTooltips.tsx
similarity index 92%
rename from docs/data/material/components/tooltips/ControlledTooltips.tsx
rename to docs/data/material/components/tooltips/demos/controlled/ControlledTooltips.tsx
index 3b2fee878fbecd..e95073151326cb 100644
--- a/docs/data/material/components/tooltips/ControlledTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/controlled/ControlledTooltips.tsx
@@ -13,6 +13,7 @@ export default function ControlledTooltips() {
     setOpen(true);
   };
 
+  // @focus-start @padding 1
   return (
     Controlled
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/controlled/index.ts b/docs/data/material/components/tooltips/demos/controlled/index.ts
new file mode 100644
index 00000000000000..441b12a6ae0a3f
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/controlled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ControlledTooltips from './ControlledTooltips';
+
+export default createDemo(import.meta.url, ControlledTooltips);
diff --git a/docs/data/material/components/tooltips/CustomizedTooltips.tsx b/docs/data/material/components/tooltips/demos/customized/CustomizedTooltips.tsx
similarity index 97%
rename from docs/data/material/components/tooltips/CustomizedTooltips.tsx
rename to docs/data/material/components/tooltips/demos/customized/CustomizedTooltips.tsx
index 082af52991e22a..70747ab05e0cb0 100644
--- a/docs/data/material/components/tooltips/CustomizedTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/customized/CustomizedTooltips.tsx
@@ -41,6 +41,7 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
 export default function CustomizedTooltips() {
   return (
     
    
+      {/* @focus-start */}
       
         
       
@@ -64,6 +65,7 @@ export default function CustomizedTooltips() {
       >
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/customized/index.ts b/docs/data/material/components/tooltips/demos/customized/index.ts
new file mode 100644
index 00000000000000..ccfc605d7d469c
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/customized/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomizedTooltips from './CustomizedTooltips';
+
+export default createDemo(import.meta.url, CustomizedTooltips);
diff --git a/docs/data/material/components/tooltips/DelayTooltips.tsx b/docs/data/material/components/tooltips/demos/delay/DelayTooltips.tsx
similarity index 85%
rename from docs/data/material/components/tooltips/DelayTooltips.tsx
rename to docs/data/material/components/tooltips/demos/delay/DelayTooltips.tsx
index a0b109338a067b..c6dc7b71fb1bea 100644
--- a/docs/data/material/components/tooltips/DelayTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/delay/DelayTooltips.tsx
@@ -2,9 +2,11 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 
 export default function DelayTooltips() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/delay/index.ts b/docs/data/material/components/tooltips/demos/delay/index.ts
new file mode 100644
index 00000000000000..ae1a4c98cdef7e
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/delay/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DelayTooltips from './DelayTooltips';
+
+export default createDemo(import.meta.url, DelayTooltips);
diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx b/docs/data/material/components/tooltips/demos/disabled/DisabledTooltips.tsx
similarity index 87%
rename from docs/data/material/components/tooltips/DisabledTooltips.tsx
rename to docs/data/material/components/tooltips/demos/disabled/DisabledTooltips.tsx
index a00764ef2a437e..8a5dc9542ecc97 100644
--- a/docs/data/material/components/tooltips/DisabledTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/disabled/DisabledTooltips.tsx
@@ -2,6 +2,7 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 
 export default function DisabledTooltips() {
+  // @focus-start @padding 1
   return (
     
       
@@ -9,4 +10,5 @@ export default function DisabledTooltips() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/disabled/index.ts b/docs/data/material/components/tooltips/demos/disabled/index.ts
new file mode 100644
index 00000000000000..f8de31002c778a
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/disabled/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisabledTooltips from './DisabledTooltips';
+
+export default createDemo(import.meta.url, DisabledTooltips);
diff --git a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx b/docs/data/material/components/tooltips/demos/follow-cursor/FollowCursorTooltips.tsx
similarity index 89%
rename from docs/data/material/components/tooltips/FollowCursorTooltips.tsx
rename to docs/data/material/components/tooltips/demos/follow-cursor/FollowCursorTooltips.tsx
index 4fa8046377dbff..99cc0b1603e865 100644
--- a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/follow-cursor/FollowCursorTooltips.tsx
@@ -2,6 +2,7 @@ import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
 
 export default function FollowCursorTooltips() {
+  // @focus-start @padding 1
   return (
     
       
@@ -9,4 +10,5 @@ export default function FollowCursorTooltips() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/follow-cursor/index.ts b/docs/data/material/components/tooltips/demos/follow-cursor/index.ts
new file mode 100644
index 00000000000000..eaf6cafc4d6608
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/follow-cursor/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import FollowCursorTooltips from './FollowCursorTooltips';
+
+export default createDemo(import.meta.url, FollowCursorTooltips);
diff --git a/docs/data/material/components/tooltips/TooltipMargin.tsx b/docs/data/material/components/tooltips/demos/margin/TooltipMargin.tsx
similarity index 96%
rename from docs/data/material/components/tooltips/TooltipMargin.tsx
rename to docs/data/material/components/tooltips/demos/margin/TooltipMargin.tsx
index 080ce8cf3e0b78..4fb7a09c11fc91 100644
--- a/docs/data/material/components/tooltips/TooltipMargin.tsx
+++ b/docs/data/material/components/tooltips/demos/margin/TooltipMargin.tsx
@@ -3,6 +3,7 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 
 export default function TooltipMargin() {
   return (
+    // @focus-start
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/margin/index.ts b/docs/data/material/components/tooltips/demos/margin/index.ts
new file mode 100644
index 00000000000000..fc244432f65a39
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/margin/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TooltipMargin from './TooltipMargin';
+
+export default createDemo(import.meta.url, TooltipMargin);
diff --git a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx b/docs/data/material/components/tooltips/demos/non-interactive/NonInteractiveTooltips.tsx
similarity index 85%
rename from docs/data/material/components/tooltips/NonInteractiveTooltips.tsx
rename to docs/data/material/components/tooltips/demos/non-interactive/NonInteractiveTooltips.tsx
index 461de1d6c4d40a..b9c977fe23e749 100644
--- a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/non-interactive/NonInteractiveTooltips.tsx
@@ -2,9 +2,11 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 
 export default function NonInteractiveTooltips() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/non-interactive/index.ts b/docs/data/material/components/tooltips/demos/non-interactive/index.ts
new file mode 100644
index 00000000000000..d88fbbbf858db2
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/non-interactive/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NonInteractiveTooltips from './NonInteractiveTooltips';
+
+export default createDemo(import.meta.url, NonInteractiveTooltips);
diff --git a/docs/data/material/components/tooltips/TooltipOffset.tsx b/docs/data/material/components/tooltips/demos/offset/TooltipOffset.tsx
similarity index 92%
rename from docs/data/material/components/tooltips/TooltipOffset.tsx
rename to docs/data/material/components/tooltips/demos/offset/TooltipOffset.tsx
index 948426086fe660..1bf798a524425b 100644
--- a/docs/data/material/components/tooltips/TooltipOffset.tsx
+++ b/docs/data/material/components/tooltips/demos/offset/TooltipOffset.tsx
@@ -3,6 +3,7 @@ import Tooltip from '@mui/material/Tooltip';
 
 export default function TooltipOffset() {
   return (
+    // @focus-start
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/offset/index.ts b/docs/data/material/components/tooltips/demos/offset/index.ts
new file mode 100644
index 00000000000000..9be3e9d25c0793
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/offset/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TooltipOffset from './TooltipOffset';
+
+export default createDemo(import.meta.url, TooltipOffset);
diff --git a/docs/data/material/components/tooltips/PositionedTooltips.tsx b/docs/data/material/components/tooltips/demos/positioned/PositionedTooltips.tsx
similarity index 97%
rename from docs/data/material/components/tooltips/PositionedTooltips.tsx
rename to docs/data/material/components/tooltips/demos/positioned/PositionedTooltips.tsx
index 6bd6e80525109b..a4c26a0db72233 100644
--- a/docs/data/material/components/tooltips/PositionedTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/positioned/PositionedTooltips.tsx
@@ -6,6 +6,7 @@ import Tooltip from '@mui/material/Tooltip';
 export default function PositionedTooltips() {
   return (
     
+      {/* @focus-start */}
       
         
           
@@ -52,6 +53,7 @@ export default function PositionedTooltips() {
           
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/positioned/index.ts b/docs/data/material/components/tooltips/demos/positioned/index.ts
new file mode 100644
index 00000000000000..9673c3952c5845
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/positioned/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import PositionedTooltips from './PositionedTooltips';
+
+export default createDemo(import.meta.url, PositionedTooltips);
diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.tsx b/docs/data/material/components/tooltips/demos/transitions/TransitionsTooltips.tsx
similarity index 93%
rename from docs/data/material/components/tooltips/TransitionsTooltips.tsx
rename to docs/data/material/components/tooltips/demos/transitions/TransitionsTooltips.tsx
index c28111d77296e5..d990ead5bf2b34 100644
--- a/docs/data/material/components/tooltips/TransitionsTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/transitions/TransitionsTooltips.tsx
@@ -6,6 +6,7 @@ import Zoom from '@mui/material/Zoom';
 export default function TransitionsTooltips() {
   return (
     
    
+      {/* @focus-start */}
       
         
       
@@ -30,6 +31,7 @@ export default function TransitionsTooltips() {
       >
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/transitions/index.ts b/docs/data/material/components/tooltips/demos/transitions/index.ts
new file mode 100644
index 00000000000000..c65bf150ea1b20
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/transitions/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransitionsTooltips from './TransitionsTooltips';
+
+export default createDemo(import.meta.url, TransitionsTooltips);
diff --git a/docs/data/material/components/tooltips/TriggersTooltips.tsx b/docs/data/material/components/tooltips/demos/triggers/TriggersTooltips.tsx
similarity index 97%
rename from docs/data/material/components/tooltips/TriggersTooltips.tsx
rename to docs/data/material/components/tooltips/demos/triggers/TriggersTooltips.tsx
index 8415fd79d4fb29..8a13f386a9665d 100644
--- a/docs/data/material/components/tooltips/TriggersTooltips.tsx
+++ b/docs/data/material/components/tooltips/demos/triggers/TriggersTooltips.tsx
@@ -5,6 +5,7 @@ import Tooltip from '@mui/material/Tooltip';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 
 export default function TriggersTooltips() {
+  // @focus-start @padding 1
   const [open, setOpen] = React.useState(false);
 
   const handleTooltipClose = () => {
@@ -63,4 +64,5 @@ export default function TriggersTooltips() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/tooltips/demos/triggers/index.ts b/docs/data/material/components/tooltips/demos/triggers/index.ts
new file mode 100644
index 00000000000000..5ba01e620d1cea
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/triggers/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TriggersTooltips from './TriggersTooltips';
+
+export default createDemo(import.meta.url, TriggersTooltips);
diff --git a/docs/data/material/components/tooltips/VariableWidth.tsx b/docs/data/material/components/tooltips/demos/variable-width/VariableWidth.tsx
similarity index 96%
rename from docs/data/material/components/tooltips/VariableWidth.tsx
rename to docs/data/material/components/tooltips/demos/variable-width/VariableWidth.tsx
index 61f42777029f8c..2a735d658fff90 100644
--- a/docs/data/material/components/tooltips/VariableWidth.tsx
+++ b/docs/data/material/components/tooltips/demos/variable-width/VariableWidth.tsx
@@ -27,6 +27,7 @@ Nullam eget est sed sem iaculis gravida eget vitae justo.
 export default function VariableWidth() {
   return (
     
    
+      {/* @focus-start */}
       
         
       
@@ -36,6 +37,7 @@ export default function VariableWidth() {
       
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/tooltips/demos/variable-width/index.ts b/docs/data/material/components/tooltips/demos/variable-width/index.ts
new file mode 100644
index 00000000000000..3ecab6cc659b18
--- /dev/null
+++ b/docs/data/material/components/tooltips/demos/variable-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import VariableWidth from './VariableWidth';
+
+export default createDemo(import.meta.url, VariableWidth);
diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md
index 42dc76cfee6928..3533f6c6d3e452 100644
--- a/docs/data/material/components/tooltips/tooltips.md
+++ b/docs/data/material/components/tooltips/tooltips.md
@@ -18,7 +18,7 @@ When activated, Tooltips display a text label identifying an element, such as a
 
 ## Basic tooltip
 
-{{"demo": "BasicTooltip.js"}}
+{{"component": "../data/material/components/tooltips/demos/basic/index.ts"}}
 
 ## Labels and descriptions
 
@@ -36,37 +36,37 @@ In that case, the child would have no accessible name and the tooltip would viol
 If the trigger already has either visible text or an `aria-label`, use the tooltip as a description and pass the `describeChild` prop.
 Otherwise, you can use the default behavior and let the tooltip label the trigger.
 
-{{"demo": "AccessibilityTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/accessibility/index.ts"}}
 
 ## Positioned tooltips
 
 The `Tooltip` has 12 **placement** choices.
 They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.
 
-{{"demo": "PositionedTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/positioned/index.ts"}}
 
 ## Customization
 
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/customized/index.ts"}}
 
 ## Arrow tooltips
 
 You can use the `arrow` prop to give your tooltip an arrow indicating which element it refers to.
 
-{{"demo": "ArrowTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/arrow/index.ts"}}
 
 ## Distance from anchor
 
 To adjust the distance between the tooltip and its anchor, you can use the `slotProps` prop to modify the [offset](https://popper.js.org/docs/v2/modifiers/offset/) of the popper.
 
-{{"demo": "TooltipOffset.js"}}
+{{"component": "../data/material/components/tooltips/demos/offset/index.ts"}}
 
 Alternatively, you can use the `slotProps` prop to customize the margin of the popper.
 
-{{"demo": "TooltipMargin.js"}}
+{{"component": "../data/material/components/tooltips/demos/margin/index.ts"}}
 
 ## Custom child element
 
@@ -123,19 +123,19 @@ You can define the types of events that cause a tooltip to show.
 
 The touch action requires a long press due to the `enterTouchDelay` prop being set to `700`ms by default.
 
-{{"demo": "TriggersTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/triggers/index.ts"}}
 
 ## Controlled tooltips
 
 You can use the `open`, `onOpen` and `onClose` props to control the behavior of the tooltip.
 
-{{"demo": "ControlledTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/controlled/index.ts"}}
 
 ## Variable width
 
 The `Tooltip` wraps long text by default to make it readable.
 
-{{"demo": "VariableWidth.js"}}
+{{"component": "../data/material/components/tooltips/demos/variable-width/index.ts"}}
 
 ## Interactive
 
@@ -143,7 +143,7 @@ Tooltips are interactive by default (to pass [WCAG 2.2 Success Criterion 1.4.13]
 It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
 You can disable this behavior (thus failing the success criterion which is required to reach Level AA) by passing `disableInteractive`.
 
-{{"demo": "NonInteractiveTooltips.js"}}
+{{"component": "../data/material/components/tooltips/demos/non-interactive/index.ts"}}
 
 ## Disabled elements
 
@@ -153,7 +153,7 @@ By default disabled elements like `
-        
-      
-      {customList('Chosen', right)}
-    
-  );
-}
diff --git a/docs/data/material/components/transfer-list/TransferList.js b/docs/data/material/components/transfer-list/TransferList.js
deleted file mode 100644
index d1a0ba7badc391..00000000000000
--- a/docs/data/material/components/transfer-list/TransferList.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import * as React from 'react';
-import Grid from '@mui/material/Grid';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Checkbox from '@mui/material/Checkbox';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-
-function not(a, b) {
-  return a.filter((value) => !b.includes(value));
-}
-
-function intersection(a, b) {
-  return a.filter((value) => b.includes(value));
-}
-
-export default function TransferList() {
-  const [checked, setChecked] = React.useState([]);
-  const [left, setLeft] = React.useState([0, 1, 2, 3]);
-  const [right, setRight] = React.useState([4, 5, 6, 7]);
-
-  const leftChecked = intersection(checked, left);
-  const rightChecked = intersection(checked, right);
-
-  const handleToggle = (value) => () => {
-    const currentIndex = checked.indexOf(value);
-    const newChecked = [...checked];
-
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
-    }
-
-    setChecked(newChecked);
-  };
-
-  const handleAllRight = () => {
-    setRight(right.concat(left));
-    setLeft([]);
-  };
-
-  const handleCheckedRight = () => {
-    setRight(right.concat(leftChecked));
-    setLeft(not(left, leftChecked));
-    setChecked(not(checked, leftChecked));
-  };
-
-  const handleCheckedLeft = () => {
-    setLeft(left.concat(rightChecked));
-    setRight(not(right, rightChecked));
-    setChecked(not(checked, rightChecked));
-  };
-
-  const handleAllLeft = () => {
-    setLeft(left.concat(right));
-    setRight([]);
-  };
-
-  const customList = (items) => (
-    
-      
-        {items.map((value) => {
-          const labelId = `transfer-list-item-${value}-label`;
-
-          return (
-            
-              
-                
-              
-              
-            
-          );
-        })}
-      
-    
-  );
-
-  return (
-    
-      {customList(left)}
-      
-        
-        
-        
-        
-      
-      {customList(right)}
-    
-  );
-}
diff --git a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx b/docs/data/material/components/transfer-list/demos/select-all/SelectAllTransferList.tsx
similarity index 99%
rename from docs/data/material/components/transfer-list/SelectAllTransferList.tsx
rename to docs/data/material/components/transfer-list/demos/select-all/SelectAllTransferList.tsx
index 48c8af9ef9efd3..23081fa7278da7 100644
--- a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx
+++ b/docs/data/material/components/transfer-list/demos/select-all/SelectAllTransferList.tsx
@@ -24,6 +24,7 @@ function union(a: readonly number[], b: readonly number[]) {
 }
 
 export default function SelectAllTransferList() {
+  // @focus-start @padding 1
   const [checked, setChecked] = React.useState([]);
   const [left, setLeft] = React.useState([0, 1, 2, 3]);
   const [right, setRight] = React.useState([4, 5, 6, 7]);
@@ -158,4 +159,5 @@ export default function SelectAllTransferList() {
       {customList('Chosen', right)}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/transfer-list/demos/select-all/index.ts b/docs/data/material/components/transfer-list/demos/select-all/index.ts
new file mode 100644
index 00000000000000..1fd7f7ff92759d
--- /dev/null
+++ b/docs/data/material/components/transfer-list/demos/select-all/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SelectAllTransferList from './SelectAllTransferList';
+
+export default createDemo(import.meta.url, SelectAllTransferList);
diff --git a/docs/data/material/components/transfer-list/TransferList.tsx b/docs/data/material/components/transfer-list/demos/transfer-list/TransferList.tsx
similarity index 98%
rename from docs/data/material/components/transfer-list/TransferList.tsx
rename to docs/data/material/components/transfer-list/demos/transfer-list/TransferList.tsx
index afa8d133a1a35f..4a036636d12aee 100644
--- a/docs/data/material/components/transfer-list/TransferList.tsx
+++ b/docs/data/material/components/transfer-list/demos/transfer-list/TransferList.tsx
@@ -18,6 +18,7 @@ function intersection(a: readonly number[], b: readonly number[]) {
 }
 
 export default function TransferList() {
+  // @focus-start @padding 1
   const [checked, setChecked] = React.useState([]);
   const [left, setLeft] = React.useState([0, 1, 2, 3]);
   const [right, setRight] = React.useState([4, 5, 6, 7]);
@@ -142,4 +143,5 @@ export default function TransferList() {
       {customList(right)}
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/transfer-list/demos/transfer-list/index.ts b/docs/data/material/components/transfer-list/demos/transfer-list/index.ts
new file mode 100644
index 00000000000000..be1ed46abc1d72
--- /dev/null
+++ b/docs/data/material/components/transfer-list/demos/transfer-list/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransferList from './TransferList';
+
+export default createDemo(import.meta.url, TransferList);
diff --git a/docs/data/material/components/transfer-list/transfer-list.md b/docs/data/material/components/transfer-list/transfer-list.md
index 5ce538d7fa69a3..9c10639069ed20 100644
--- a/docs/data/material/components/transfer-list/transfer-list.md
+++ b/docs/data/material/components/transfer-list/transfer-list.md
@@ -15,13 +15,13 @@ githubLabel: 'scope: transfer list'
 
 For completeness, this example includes buttons for "move all", but not every transfer list needs these.
 
-{{"demo": "TransferList.js", "bg": true}}
+{{"component": "../data/material/components/transfer-list/demos/transfer-list/index.ts", "bg": true}}
 
 ## Enhanced transfer list
 
 This example exchanges the "move all" buttons for a "select all / select none" checkbox and adds a counter.
 
-{{"demo": "SelectAllTransferList.js", "bg": true}}
+{{"component": "../data/material/components/transfer-list/demos/select-all/index.ts", "bg": true}}
 
 ## Limitations
 
diff --git a/docs/data/material/components/transitions/SimpleCollapse.js b/docs/data/material/components/transitions/SimpleCollapse.js
deleted file mode 100644
index 0195f7d15a780f..00000000000000
--- a/docs/data/material/components/transitions/SimpleCollapse.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Collapse from '@mui/material/Collapse';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-  
-    
-       ({
-          fill: theme.palette.common.white,
-          stroke: theme.palette.divider,
-          strokeWidth: 1,
-        })}
-      />
-    
-  
-);
-
-export default function SimpleCollapse() {
-  const [checked, setChecked] = React.useState(false);
-
-  const handleChange = () => {
-    setChecked((prev) => !prev);
-  };
-
-  return (
-    
-      }
-        label="Show"
-      />
-       :not(style)': {
-            display: 'flex',
-            justifyContent: 'space-around',
-            height: 120,
-            width: 250,
-          },
-        }}
-      >
-        
    
-          {icon}
-          
-            {icon}
-          
-        
    
-        
    
-          
-            
-              {icon}
-            
-          
-          
-            
-              {icon}
-            
-          
-        
    
-          
-        
-  );
-}
diff --git a/docs/data/material/components/transitions/SimpleFade.js b/docs/data/material/components/transitions/SimpleFade.js
deleted file mode 100644
index d680390909373c..00000000000000
--- a/docs/data/material/components/transitions/SimpleFade.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Fade from '@mui/material/Fade';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-  
-    
-       ({
-          fill: theme.palette.common.white,
-          stroke: theme.palette.divider,
-          strokeWidth: 1,
-        })}
-      />
-    
-  
-);
-
-export default function SimpleFade() {
-  const [checked, setChecked] = React.useState(false);
-
-  const handleChange = () => {
-    setChecked((prev) => !prev);
-  };
-
-  return (
-    
-      }
-        label="Show"
-      />
-      
-        {icon}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/transitions/SimpleFade.tsx.preview b/docs/data/material/components/transitions/SimpleFade.tsx.preview
deleted file mode 100644
index 63022735ab057b..00000000000000
--- a/docs/data/material/components/transitions/SimpleFade.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-}
-  label="Show"
-/>
-
-  {icon}
-
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/SimpleGrow.js b/docs/data/material/components/transitions/SimpleGrow.js
deleted file mode 100644
index a3842113a4fc0f..00000000000000
--- a/docs/data/material/components/transitions/SimpleGrow.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Grow from '@mui/material/Grow';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-  
-    
-       ({
-          fill: theme.palette.common.white,
-          stroke: theme.palette.divider,
-          strokeWidth: 1,
-        })}
-      />
-    
-  
-);
-
-export default function SimpleGrow() {
-  const [checked, setChecked] = React.useState(false);
-
-  const handleChange = () => {
-    setChecked((prev) => !prev);
-  };
-
-  return (
-    
-      }
-        label="Show"
-      />
-      
-        {icon}
-        {/* Conditionally applies the timeout prop to change the entry speed. */}
-        
-          {icon}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/transitions/SimpleGrow.tsx.preview b/docs/data/material/components/transitions/SimpleGrow.tsx.preview
deleted file mode 100644
index d4e5279d1f5659..00000000000000
--- a/docs/data/material/components/transitions/SimpleGrow.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-}
-  label="Show"
-/>
-
-  {icon}
-  {/* Conditionally applies the timeout prop to change the entry speed. */}
-  
-    {icon}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/SimpleSlide.js b/docs/data/material/components/transitions/SimpleSlide.js
deleted file mode 100644
index bd0999fae04195..00000000000000
--- a/docs/data/material/components/transitions/SimpleSlide.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-  
-    
-       ({
-          fill: theme.palette.common.white,
-          stroke: theme.palette.divider,
-          strokeWidth: 1,
-        })}
-      />
-    
-  
-);
-
-export default function SimpleSlide() {
-  const [checked, setChecked] = React.useState(false);
-
-  const handleChange = () => {
-    setChecked((prev) => !prev);
-  };
-
-  return (
-    
-      }
-        label="Show"
-      />
-      
-        {icon}
-      
-    
-  );
-}
diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx.preview b/docs/data/material/components/transitions/SimpleSlide.tsx.preview
deleted file mode 100644
index ed74e27912e1dc..00000000000000
--- a/docs/data/material/components/transitions/SimpleSlide.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-}
-  label="Show"
-/>
-
-  {icon}
-
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/SimpleZoom.js b/docs/data/material/components/transitions/SimpleZoom.js
deleted file mode 100644
index a76325309b8e2c..00000000000000
--- a/docs/data/material/components/transitions/SimpleZoom.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Zoom from '@mui/material/Zoom';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-  
-    
-       ({
-          fill: theme.palette.common.white,
-          stroke: theme.palette.divider,
-          strokeWidth: 1,
-        })}
-      />
-    
-  
-);
-
-export default function SimpleZoom() {
-  const [checked, setChecked] = React.useState(false);
-
-  const handleChange = () => {
-    setChecked((prev) => !prev);
-  };
-
-  return (
-    
-      }
-        label="Show"
-      />
-      
-        {icon}
-        
-          {icon}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/transitions/SimpleZoom.tsx.preview b/docs/data/material/components/transitions/SimpleZoom.tsx.preview
deleted file mode 100644
index d4f9fef6bf6463..00000000000000
--- a/docs/data/material/components/transitions/SimpleZoom.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-}
-  label="Show"
-/>
-
-  {icon}
-  
-    {icon}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/SlideFromContainer.js b/docs/data/material/components/transitions/SlideFromContainer.js
deleted file mode 100644
index 3b0b000c68cea3..00000000000000
--- a/docs/data/material/components/transitions/SlideFromContainer.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-  
-    
-       ({
-          fill: theme.palette.common.white,
-          stroke: theme.palette.divider,
-          strokeWidth: 1,
-        })}
-      />
-    
-  
-);
-
-export default function SlideFromContainer() {
-  const [checked, setChecked] = React.useState(false);
-  const containerRef = React.useRef(null);
-
-  const handleChange = () => {
-    setChecked((prev) => !prev);
-  };
-
-  return (
-    
-      
-        }
-          label="Show from target"
-        />
-        
-          {icon}
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/components/transitions/SlideFromContainer.tsx.preview b/docs/data/material/components/transitions/SlideFromContainer.tsx.preview
deleted file mode 100644
index 2daaae75f57d57..00000000000000
--- a/docs/data/material/components/transitions/SlideFromContainer.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-
-  }
-    label="Show from target"
-  />
-  
-    {icon}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/TransitionGroupExample.js b/docs/data/material/components/transitions/TransitionGroupExample.js
deleted file mode 100644
index b3a09a88de263b..00000000000000
--- a/docs/data/material/components/transitions/TransitionGroupExample.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { TransitionGroup } from 'react-transition-group';
-
-const FRUITS = [
-  '🍏 Apple',
-  '🍌 Banana',
-  '🍍 Pineapple',
-  '🥥 Coconut',
-  '🍉 Watermelon',
-];
-
-function renderItem({ item, handleRemoveFruit }) {
-  return (
-     handleRemoveFruit(item)}
-        >
-          
-        
-      }
-    >
-      
-    
-  );
-}
-
-export default function TransitionGroupExample() {
-  const [fruitsInBasket, setFruitsInBasket] = React.useState(FRUITS.slice(0, 3));
-
-  const handleAddFruit = () => {
-    const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
-    if (nextHiddenItem) {
-      setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
-    }
-  };
-
-  const handleRemoveFruit = (item) => {
-    setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)]);
-  };
-
-  const addFruitButton = (
-    
-  );
-
-  return (
-    
    
-      {addFruitButton}
-      
-        
-          {fruitsInBasket.map((item) => (
-            {renderItem({ item, handleRemoveFruit })}
-          ))}
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview b/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview
deleted file mode 100644
index f1829ad7cdb1dc..00000000000000
--- a/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-{addFruitButton}
-
-  
-    {fruitsInBasket.map((item) => (
-      {renderItem({ item, handleRemoveFruit })}
-    ))}
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/TransitionGroupExample.tsx b/docs/data/material/components/transitions/demos/group-example/TransitionGroupExample.tsx
similarity index 97%
rename from docs/data/material/components/transitions/TransitionGroupExample.tsx
rename to docs/data/material/components/transitions/demos/group-example/TransitionGroupExample.tsx
index e7a44ad24810bf..1427773fcdcf8a 100644
--- a/docs/data/material/components/transitions/TransitionGroupExample.tsx
+++ b/docs/data/material/components/transitions/demos/group-example/TransitionGroupExample.tsx
@@ -66,6 +66,7 @@ export default function TransitionGroupExample() {
 
   return (
     
    
+      {/* @focus-start */}
       {addFruitButton}
       
         
@@ -74,6 +75,7 @@ export default function TransitionGroupExample() {
           ))}
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/components/transitions/demos/group-example/index.ts b/docs/data/material/components/transitions/demos/group-example/index.ts
new file mode 100644
index 00000000000000..eccc1d6566531f
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/group-example/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TransitionGroupExample from './TransitionGroupExample';
+
+export default createDemo(import.meta.url, TransitionGroupExample);
diff --git a/docs/data/material/components/transitions/SimpleCollapse.tsx b/docs/data/material/components/transitions/demos/simple-collapse/SimpleCollapse.tsx
similarity index 97%
rename from docs/data/material/components/transitions/SimpleCollapse.tsx
rename to docs/data/material/components/transitions/demos/simple-collapse/SimpleCollapse.tsx
index 0195f7d15a780f..71deb16fa4cfa5 100644
--- a/docs/data/material/components/transitions/SimpleCollapse.tsx
+++ b/docs/data/material/components/transitions/demos/simple-collapse/SimpleCollapse.tsx
@@ -22,6 +22,7 @@ const icon = (
 );
 
 export default function SimpleCollapse() {
+  // @focus-start @padding 1
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -65,4 +66,5 @@ export default function SimpleCollapse() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/transitions/demos/simple-collapse/index.ts b/docs/data/material/components/transitions/demos/simple-collapse/index.ts
new file mode 100644
index 00000000000000..91df8261e9b56a
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/simple-collapse/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleCollapse from './SimpleCollapse';
+
+export default createDemo(import.meta.url, SimpleCollapse);
diff --git a/docs/data/material/components/transitions/SimpleFade.tsx b/docs/data/material/components/transitions/demos/simple-fade/SimpleFade.tsx
similarity index 95%
rename from docs/data/material/components/transitions/SimpleFade.tsx
rename to docs/data/material/components/transitions/demos/simple-fade/SimpleFade.tsx
index d680390909373c..2b7d1893a488b4 100644
--- a/docs/data/material/components/transitions/SimpleFade.tsx
+++ b/docs/data/material/components/transitions/demos/simple-fade/SimpleFade.tsx
@@ -30,6 +30,7 @@ export default function SimpleFade() {
 
   return (
     
+      {/* @focus-start */}
       }
         label="Show"
@@ -37,6 +38,7 @@ export default function SimpleFade() {
       
         {icon}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/transitions/demos/simple-fade/index.ts b/docs/data/material/components/transitions/demos/simple-fade/index.ts
new file mode 100644
index 00000000000000..f4feb50801e2d1
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/simple-fade/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleFade from './SimpleFade';
+
+export default createDemo(import.meta.url, SimpleFade);
diff --git a/docs/data/material/components/transitions/SimpleGrow.tsx b/docs/data/material/components/transitions/demos/simple-grow/SimpleGrow.tsx
similarity index 96%
rename from docs/data/material/components/transitions/SimpleGrow.tsx
rename to docs/data/material/components/transitions/demos/simple-grow/SimpleGrow.tsx
index a3842113a4fc0f..3909cda557cb38 100644
--- a/docs/data/material/components/transitions/SimpleGrow.tsx
+++ b/docs/data/material/components/transitions/demos/simple-grow/SimpleGrow.tsx
@@ -30,6 +30,7 @@ export default function SimpleGrow() {
 
   return (
     
+      {/* @focus-start */}
       }
         label="Show"
@@ -45,6 +46,7 @@ export default function SimpleGrow() {
           {icon}
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/transitions/demos/simple-grow/index.ts b/docs/data/material/components/transitions/demos/simple-grow/index.ts
new file mode 100644
index 00000000000000..79507b27b381b5
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/simple-grow/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleGrow from './SimpleGrow';
+
+export default createDemo(import.meta.url, SimpleGrow);
diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx b/docs/data/material/components/transitions/demos/simple-slide/SimpleSlide.tsx
similarity index 95%
rename from docs/data/material/components/transitions/SimpleSlide.tsx
rename to docs/data/material/components/transitions/demos/simple-slide/SimpleSlide.tsx
index bd0999fae04195..fb0583e13090b4 100644
--- a/docs/data/material/components/transitions/SimpleSlide.tsx
+++ b/docs/data/material/components/transitions/demos/simple-slide/SimpleSlide.tsx
@@ -30,6 +30,7 @@ export default function SimpleSlide() {
 
   return (
     
+      {/* @focus-start */}
       }
         label="Show"
@@ -37,6 +38,7 @@ export default function SimpleSlide() {
       
         {icon}
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/transitions/demos/simple-slide/index.ts b/docs/data/material/components/transitions/demos/simple-slide/index.ts
new file mode 100644
index 00000000000000..aa99c01eb965f0
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/simple-slide/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleSlide from './SimpleSlide';
+
+export default createDemo(import.meta.url, SimpleSlide);
diff --git a/docs/data/material/components/transitions/SimpleZoom.tsx b/docs/data/material/components/transitions/demos/simple-zoom/SimpleZoom.tsx
similarity index 95%
rename from docs/data/material/components/transitions/SimpleZoom.tsx
rename to docs/data/material/components/transitions/demos/simple-zoom/SimpleZoom.tsx
index a76325309b8e2c..d1d69837aae5f4 100644
--- a/docs/data/material/components/transitions/SimpleZoom.tsx
+++ b/docs/data/material/components/transitions/demos/simple-zoom/SimpleZoom.tsx
@@ -30,6 +30,7 @@ export default function SimpleZoom() {
 
   return (
     
+      {/* @focus-start */}
       }
         label="Show"
@@ -40,6 +41,7 @@ export default function SimpleZoom() {
           {icon}
         
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/transitions/demos/simple-zoom/index.ts b/docs/data/material/components/transitions/demos/simple-zoom/index.ts
new file mode 100644
index 00000000000000..fdf880f4e8c0c1
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/simple-zoom/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleZoom from './SimpleZoom';
+
+export default createDemo(import.meta.url, SimpleZoom);
diff --git a/docs/data/material/components/transitions/SlideFromContainer.tsx b/docs/data/material/components/transitions/demos/slide-from-container/SlideFromContainer.tsx
similarity index 96%
rename from docs/data/material/components/transitions/SlideFromContainer.tsx
rename to docs/data/material/components/transitions/demos/slide-from-container/SlideFromContainer.tsx
index 891a0afbeda139..9b30355d3dcaee 100644
--- a/docs/data/material/components/transitions/SlideFromContainer.tsx
+++ b/docs/data/material/components/transitions/demos/slide-from-container/SlideFromContainer.tsx
@@ -39,6 +39,7 @@ export default function SlideFromContainer() {
         backgroundColor: 'background.default',
       }}
     >
+      {/* @focus-start */}
       
         }
@@ -48,6 +49,7 @@ export default function SlideFromContainer() {
           {icon}
             
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/transitions/demos/slide-from-container/index.ts b/docs/data/material/components/transitions/demos/slide-from-container/index.ts
new file mode 100644
index 00000000000000..f036f9bd3d73b2
--- /dev/null
+++ b/docs/data/material/components/transitions/demos/slide-from-container/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SlideFromContainer from './SlideFromContainer';
+
+export default createDemo(import.meta.url, SlideFromContainer);
diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md
index b0da6c885ed886..e454143052e32a 100644
--- a/docs/data/material/components/transitions/transitions.md
+++ b/docs/data/material/components/transitions/transitions.md
@@ -20,13 +20,13 @@ Expand from the start edge of the child element.
 Use the `orientation` prop if you need a horizontal collapse.
 The `collapsedSize` prop can be used to set the minimum width/height when not expanded.
 
-{{"demo": "SimpleCollapse.js", "bg": true}}
+{{"component": "../data/material/components/transitions/demos/simple-collapse/index.ts", "bg": true}}
 
 ## Fade
 
 Fade in from transparent to opaque.
 
-{{"demo": "SimpleFade.js", "bg": true}}
+{{"component": "../data/material/components/transitions/demos/simple-fade/index.ts", "bg": true}}
 
 ## Grow
 
@@ -35,7 +35,7 @@ Expands outwards from the center of the child element, while also fading in from
 The second example demonstrates how to change the `transform-origin`, and conditionally applies
 the `timeout` prop to change the entry speed.
 
-{{"demo": "SimpleGrow.js", "bg": true}}
+{{"component": "../data/material/components/transitions/demos/simple-grow/index.ts", "bg": true}}
 
 ## Slide
 
@@ -48,14 +48,14 @@ This prevents the relatively positioned component from scrolling into view
 from its off-screen position.
 Similarly, the `unmountOnExit` prop removes the component from the DOM after it has been transition off-screen.
 
-{{"demo": "SimpleSlide.js", "bg": true}}
+{{"component": "../data/material/components/transitions/demos/simple-slide/index.ts", "bg": true}}
 
 ### Slide relative to a container
 
 The Slide component also accepts `container` prop, which is a reference to a DOM node.
 If this prop is set, the Slide component will slide from the edge of that DOM node.
 
-{{"demo": "SlideFromContainer.js", "bg": true}}
+{{"component": "../data/material/components/transitions/demos/slide-from-container/index.ts", "bg": true}}
 
 ## Zoom
 
@@ -63,7 +63,7 @@ Expand outwards from the center of the child element.
 
 This example also demonstrates how to delay the enter transition.
 
-{{"demo": "SimpleZoom.js", "bg": true}}
+{{"component": "../data/material/components/transitions/demos/simple-zoom/index.ts", "bg": true}}
 
 ## Child requirement
 
@@ -98,7 +98,7 @@ export default function Main() {
 To animate a component when it is mounted or unmounted, you can use the [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group/) component from _react-transition-group_.
 As components are added or removed, the `in` prop is toggled automatically by `TransitionGroup`.
 
-{{"demo": "TransitionGroupExample.js"}}
+{{"component": "../data/material/components/transitions/demos/group-example/index.ts"}}
 
 ## Transition slots
 
diff --git a/docs/data/material/components/typography/Types.js b/docs/data/material/components/typography/Types.js
deleted file mode 100644
index 3e9657a99f3f14..00000000000000
--- a/docs/data/material/components/typography/Types.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-export default function Types() {
-  return (
-    
-      
-        h1. Heading
-      
-      
-        h2. Heading
-      
-      
-        h3. Heading
-      
-      
-        h4. Heading
-      
-      
-        h5. Heading
-      
-      
-        h6. Heading
-      
-      
-        subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur
-      
-      
-        subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur
-      
-      
-        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-        neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
-        quasi quidem quibusdam.
-      
-      
-        body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-        neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
-        quasi quidem quibusdam.
-      
-      
-        button text
-      
-      
-        caption text
-      
-      
-        overline text
-      
-    
-  );
-}
diff --git a/docs/data/material/components/typography/TypographyTheme.js b/docs/data/material/components/typography/TypographyTheme.js
deleted file mode 100644
index 4b4dc1ea323b07..00000000000000
--- a/docs/data/material/components/typography/TypographyTheme.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-const Div = styled('div')(({ theme }) => ({
-  ...theme.typography.button,
-  backgroundColor: (theme.vars || theme).palette.background.paper,
-  padding: theme.spacing(1),
-}));
-
-export default function TypographyTheme() {
-  return 
    {"This div's text looks like that of a button."}
    ;
-}
diff --git a/docs/data/material/components/typography/TypographyTheme.tsx.preview b/docs/data/material/components/typography/TypographyTheme.tsx.preview
deleted file mode 100644
index 60293bb62afcab..00000000000000
--- a/docs/data/material/components/typography/TypographyTheme.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
    {"This div's text looks like that of a button."}
    
\ No newline at end of file
diff --git a/docs/data/material/components/typography/TypographyTheme.tsx b/docs/data/material/components/typography/demos/theme/TypographyTheme.tsx
similarity index 74%
rename from docs/data/material/components/typography/TypographyTheme.tsx
rename to docs/data/material/components/typography/demos/theme/TypographyTheme.tsx
index 4b4dc1ea323b07..4ad76d1bb77a32 100644
--- a/docs/data/material/components/typography/TypographyTheme.tsx
+++ b/docs/data/material/components/typography/demos/theme/TypographyTheme.tsx
@@ -7,5 +7,8 @@ const Div = styled('div')(({ theme }) => ({
 }));
 
 export default function TypographyTheme() {
-  return 
    {"This div's text looks like that of a button."}
    ;
+  return (
+    // @focus
+    
    {"This div's text looks like that of a button."}
    
+  );
 }
diff --git a/docs/data/material/components/typography/demos/theme/index.ts b/docs/data/material/components/typography/demos/theme/index.ts
new file mode 100644
index 00000000000000..4de5e0ffc614a3
--- /dev/null
+++ b/docs/data/material/components/typography/demos/theme/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import TypographyTheme from './TypographyTheme';
+
+export default createDemo(import.meta.url, TypographyTheme);
diff --git a/docs/data/material/components/typography/Types.tsx b/docs/data/material/components/typography/demos/types/Types.tsx
similarity index 97%
rename from docs/data/material/components/typography/Types.tsx
rename to docs/data/material/components/typography/demos/types/Types.tsx
index 3e9657a99f3f14..d9e4769b83ad05 100644
--- a/docs/data/material/components/typography/Types.tsx
+++ b/docs/data/material/components/typography/demos/types/Types.tsx
@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 export default function Types() {
   return (
     
+      {/* @focus-start */}
       
         h1. Heading
       
@@ -51,6 +52,7 @@ export default function Types() {
       
         overline text
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/components/typography/demos/types/index.ts b/docs/data/material/components/typography/demos/types/index.ts
new file mode 100644
index 00000000000000..5225de228b4ee3
--- /dev/null
+++ b/docs/data/material/components/typography/demos/types/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Types from './Types';
+
+export default createDemo(import.meta.url, Types);
diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md
index e793e29150ee56..d63c5e80e0f6c4 100644
--- a/docs/data/material/components/typography/typography.md
+++ b/docs/data/material/components/typography/typography.md
@@ -66,14 +66,14 @@ To install Roboto through the Google Web Fonts CDN, add the following code insid
 
 The Typography component follows the [Material Design typographic scale](https://m2.material.io/design/typography/#type-scale) that provides a limited set of type sizes that work well together for a consistent layout.
 
-{{"demo": "Types.js"}}
+{{"component": "../data/material/components/typography/demos/types/index.ts"}}
 
 ### Theme keys
 
 In some situations you might not be able to use the Typography component.
 Hopefully, you might be able to take advantage of the [`typography`](/material-ui/customization/default-theme/?expand-path=$.typography) keys of the theme.
 
-{{"demo": "TypographyTheme.js"}}
+{{"component": "../data/material/components/typography/demos/theme/index.ts"}}
 
 ## Customization
 
diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.js b/docs/data/material/components/use-media-query/JavaScriptMedia.js
deleted file mode 100644
index a2dca57414d100..00000000000000
--- a/docs/data/material/components/use-media-query/JavaScriptMedia.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import json2mq from 'json2mq';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-export default function JavaScriptMedia() {
-  const matches = useMediaQuery(
-    json2mq({
-      minWidth: 600,
-    }),
-  );
-
-  return {`{ minWidth: 600 } matches: ${matches}`};
-}
diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview b/docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview
deleted file mode 100644
index f04cfcf32991be..00000000000000
--- a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-{`{ minWidth: 600 } matches: ${matches}`}
\ No newline at end of file
diff --git a/docs/data/material/components/use-media-query/ServerSide.js b/docs/data/material/components/use-media-query/ServerSide.js
deleted file mode 100644
index be6d1fc9c45ee1..00000000000000
--- a/docs/data/material/components/use-media-query/ServerSide.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import mediaQuery from 'css-mediaquery';
-import { ThemeProvider } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-function MyComponent() {
-  const matches = useMediaQuery('(min-width:600px)');
-
-  return {`(min-width:600px) matches: ${matches}`};
-}
-
-export default function ServerSide() {
-  const ssrMatchMedia = (query) => ({
-    matches: mediaQuery.match(query, {
-      // The estimated CSS width of the browser.
-      width: 800,
-    }),
-  });
-
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/use-media-query/ServerSide.tsx.preview b/docs/data/material/components/use-media-query/ServerSide.tsx.preview
deleted file mode 100644
index dc1a782c3712da..00000000000000
--- a/docs/data/material/components/use-media-query/ServerSide.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  theme={{
-    components: {
-      MuiUseMediaQuery: {
-        // Change the default options of useMediaQuery
-        defaultProps: { ssrMatchMedia },
-      },
-    },
-  }}
->
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.js b/docs/data/material/components/use-media-query/SimpleMediaQuery.js
deleted file mode 100644
index a241fe806003de..00000000000000
--- a/docs/data/material/components/use-media-query/SimpleMediaQuery.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-export default function SimpleMediaQuery() {
-  const matches = useMediaQuery('(min-width:600px)');
-
-  return {`(min-width:600px) matches: ${matches}`};
-}
diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview b/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview
deleted file mode 100644
index 95f09d4ba38e01..00000000000000
--- a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-{`(min-width:600px) matches: ${matches}`}
\ No newline at end of file
diff --git a/docs/data/material/components/use-media-query/ThemeHelper.js b/docs/data/material/components/use-media-query/ThemeHelper.js
deleted file mode 100644
index c737feaa1a24e9..00000000000000
--- a/docs/data/material/components/use-media-query/ThemeHelper.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-function MyComponent() {
-  const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.up('sm'));
-
-  return {`theme.breakpoints.up('sm') matches: ${matches}`};
-}
-
-const theme = createTheme();
-
-export default function ThemeHelper() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/use-media-query/ThemeHelper.tsx.preview b/docs/data/material/components/use-media-query/ThemeHelper.tsx.preview
deleted file mode 100644
index 99dd5b5f3f688f..00000000000000
--- a/docs/data/material/components/use-media-query/ThemeHelper.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/use-media-query/UseWidth.js b/docs/data/material/components/use-media-query/UseWidth.js
deleted file mode 100644
index 2d4493be696a45..00000000000000
--- a/docs/data/material/components/use-media-query/UseWidth.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
-  const theme = useTheme();
-  const keys = [...theme.breakpoints.keys].reverse();
-  return (
-    keys.reduce((output, key) => {
-      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useMediaQuery is called inside callback
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const matches = useMediaQuery(theme.breakpoints.up(key));
-      return !output && matches ? key : output;
-    }, null) || 'xs'
-  );
-}
-
-function MyComponent() {
-  const width = useWidth();
-  return {`width: ${width}`};
-}
-
-const theme = createTheme();
-
-export default function UseWidth() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/components/use-media-query/UseWidth.tsx.preview b/docs/data/material/components/use-media-query/UseWidth.tsx.preview
deleted file mode 100644
index 99dd5b5f3f688f..00000000000000
--- a/docs/data/material/components/use-media-query/UseWidth.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx b/docs/data/material/components/use-media-query/demos/java-script-media/JavaScriptMedia.tsx
similarity index 86%
rename from docs/data/material/components/use-media-query/JavaScriptMedia.tsx
rename to docs/data/material/components/use-media-query/demos/java-script-media/JavaScriptMedia.tsx
index a2dca57414d100..ff7245dc90da46 100644
--- a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx
+++ b/docs/data/material/components/use-media-query/demos/java-script-media/JavaScriptMedia.tsx
@@ -2,6 +2,7 @@ import json2mq from 'json2mq';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 export default function JavaScriptMedia() {
+  // @focus-start @padding 1
   const matches = useMediaQuery(
     json2mq({
       minWidth: 600,
@@ -9,4 +10,5 @@ export default function JavaScriptMedia() {
   );
 
   return {`{ minWidth: 600 } matches: ${matches}`};
+  // @focus-end
 }
diff --git a/docs/data/material/components/use-media-query/demos/java-script-media/index.ts b/docs/data/material/components/use-media-query/demos/java-script-media/index.ts
new file mode 100644
index 00000000000000..a81d446dde294e
--- /dev/null
+++ b/docs/data/material/components/use-media-query/demos/java-script-media/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import JavaScriptMedia from './JavaScriptMedia';
+
+export default createDemo(import.meta.url, JavaScriptMedia);
diff --git a/docs/data/material/components/use-media-query/ServerSide.tsx b/docs/data/material/components/use-media-query/demos/server-side/ServerSide.tsx
similarity index 94%
rename from docs/data/material/components/use-media-query/ServerSide.tsx
rename to docs/data/material/components/use-media-query/demos/server-side/ServerSide.tsx
index e0f5659f166e10..dd894b82a85db1 100644
--- a/docs/data/material/components/use-media-query/ServerSide.tsx
+++ b/docs/data/material/components/use-media-query/demos/server-side/ServerSide.tsx
@@ -16,6 +16,7 @@ export default function ServerSide() {
     }),
   });
 
+  // @focus-start @padding 1
   return (
     
       theme={{
@@ -30,4 +31,5 @@ export default function ServerSide() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/use-media-query/demos/server-side/index.ts b/docs/data/material/components/use-media-query/demos/server-side/index.ts
new file mode 100644
index 00000000000000..385b00595d765b
--- /dev/null
+++ b/docs/data/material/components/use-media-query/demos/server-side/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ServerSide from './ServerSide';
+
+export default createDemo(import.meta.url, ServerSide);
diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx b/docs/data/material/components/use-media-query/demos/simple-media-query/SimpleMediaQuery.tsx
similarity index 83%
rename from docs/data/material/components/use-media-query/SimpleMediaQuery.tsx
rename to docs/data/material/components/use-media-query/demos/simple-media-query/SimpleMediaQuery.tsx
index a241fe806003de..669013f07abfb8 100644
--- a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx
+++ b/docs/data/material/components/use-media-query/demos/simple-media-query/SimpleMediaQuery.tsx
@@ -1,7 +1,9 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 export default function SimpleMediaQuery() {
+  // @focus-start @padding 1
   const matches = useMediaQuery('(min-width:600px)');
 
   return {`(min-width:600px) matches: ${matches}`};
+  // @focus-end
 }
diff --git a/docs/data/material/components/use-media-query/demos/simple-media-query/index.ts b/docs/data/material/components/use-media-query/demos/simple-media-query/index.ts
new file mode 100644
index 00000000000000..dd96709d3c303c
--- /dev/null
+++ b/docs/data/material/components/use-media-query/demos/simple-media-query/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SimpleMediaQuery from './SimpleMediaQuery';
+
+export default createDemo(import.meta.url, SimpleMediaQuery);
diff --git a/docs/data/material/components/use-media-query/ThemeHelper.tsx b/docs/data/material/components/use-media-query/demos/theme-helper/ThemeHelper.tsx
similarity index 91%
rename from docs/data/material/components/use-media-query/ThemeHelper.tsx
rename to docs/data/material/components/use-media-query/demos/theme-helper/ThemeHelper.tsx
index c737feaa1a24e9..3b4e149de0ccca 100644
--- a/docs/data/material/components/use-media-query/ThemeHelper.tsx
+++ b/docs/data/material/components/use-media-query/demos/theme-helper/ThemeHelper.tsx
@@ -11,9 +11,11 @@ function MyComponent() {
 const theme = createTheme();
 
 export default function ThemeHelper() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/use-media-query/demos/theme-helper/index.ts b/docs/data/material/components/use-media-query/demos/theme-helper/index.ts
new file mode 100644
index 00000000000000..17d42800ea5b57
--- /dev/null
+++ b/docs/data/material/components/use-media-query/demos/theme-helper/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ThemeHelper from './ThemeHelper';
+
+export default createDemo(import.meta.url, ThemeHelper);
diff --git a/docs/data/material/components/use-media-query/UseWidth.tsx b/docs/data/material/components/use-media-query/demos/use-width/UseWidth.tsx
similarity index 96%
rename from docs/data/material/components/use-media-query/UseWidth.tsx
rename to docs/data/material/components/use-media-query/demos/use-width/UseWidth.tsx
index f949778d46bd10..1731981cc4af14 100644
--- a/docs/data/material/components/use-media-query/UseWidth.tsx
+++ b/docs/data/material/components/use-media-query/demos/use-width/UseWidth.tsx
@@ -35,9 +35,11 @@ function MyComponent() {
 const theme = createTheme();
 
 export default function UseWidth() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/components/use-media-query/demos/use-width/index.ts b/docs/data/material/components/use-media-query/demos/use-width/index.ts
new file mode 100644
index 00000000000000..b2ee19274a3c85
--- /dev/null
+++ b/docs/data/material/components/use-media-query/demos/use-width/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UseWidth from './UseWidth';
+
+export default createDemo(import.meta.url, UseWidth);
diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
index 76879bf76fd8e8..58f7d56d4eef8b 100644
--- a/docs/data/material/components/use-media-query/use-media-query.md
+++ b/docs/data/material/components/use-media-query/use-media-query.md
@@ -23,7 +23,7 @@ Some of the key features:
 You should provide a media query to the first argument of the hook.
 The media query string can be any valid CSS media query, for example [`'(prefers-color-scheme: dark)'`](/material-ui/customization/dark-mode/#system-preference).
 
-{{"demo": "SimpleMediaQuery.js", "defaultCodeOpen": true}}
+{{"component": "../data/material/components/use-media-query/demos/simple-media-query/index.ts", "defaultCodeOpen": true}}
 
 :::warning
 Using the query `'print'` to modify a document for printing is not supported, as changes made in re-rendering may not be accurately reflected.
@@ -47,7 +47,7 @@ function MyComponent() {
 }
 ```
 
-{{"demo": "ThemeHelper.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/use-media-query/demos/theme-helper/index.ts", "defaultCodeOpen": false}}
 
 Alternatively, you can use a callback function, accepting the theme as a first argument:
 
@@ -67,7 +67,7 @@ function MyComponent() {
 
 You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
 
-{{"demo": "JavaScriptMedia.js", "defaultCodeOpen": true}}
+{{"component": "../data/material/components/use-media-query/demos/java-script-media/index.ts", "defaultCodeOpen": true}}
 
 ## Testing
 
@@ -188,7 +188,7 @@ function handleRender(req, res) {
 }
 ```
 
-{{"demo": "ServerSide.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/components/use-media-query/demos/server-side/index.ts", "defaultCodeOpen": false}}
 
 Make sure you provide the same custom match media implementation to the client-side to guarantee a hydration match.
 
@@ -197,7 +197,7 @@ Make sure you provide the same custom match media implementation to the client-s
 The `withWidth()` higher-order component injects the screen width of the page.
 You can reproduce the same behavior with a `useWidth` hook:
 
-{{"demo": "UseWidth.js"}}
+{{"component": "../data/material/components/use-media-query/demos/use-width/index.ts"}}
 
 ## API
 
diff --git a/docs/data/material/customization/breakpoints/MediaQuery.js b/docs/data/material/customization/breakpoints/MediaQuery.js
deleted file mode 100644
index be899841d08d6d..00000000000000
--- a/docs/data/material/customization/breakpoints/MediaQuery.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-import { red, green, blue } from '@mui/material/colors';
-
-const Root = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1),
-  [theme.breakpoints.down('md')]: {
-    backgroundColor: red[500],
-  },
-  [theme.breakpoints.up('md')]: {
-    backgroundColor: blue[500],
-  },
-  [theme.breakpoints.up('lg')]: {
-    backgroundColor: green[500],
-  },
-}));
-
-export default function MediaQuery() {
-  return (
-    
-      down(md): red
-      up(md): blue
-      up(lg): green
-    
-  );
-}
diff --git a/docs/data/material/customization/breakpoints/MediaQuery.tsx.preview b/docs/data/material/customization/breakpoints/MediaQuery.tsx.preview
deleted file mode 100644
index 335837831f1279..00000000000000
--- a/docs/data/material/customization/breakpoints/MediaQuery.tsx.preview
+++ /dev/null
@@ -1,5 +0,0 @@
-
-  down(md): red
-  up(md): blue
-  up(lg): green
-
\ No newline at end of file
diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md
index 7897e4c8d44b02..baefe599c31f2a 100644
--- a/docs/data/material/customization/breakpoints/breakpoints.md
+++ b/docs/data/material/customization/breakpoints/breakpoints.md
@@ -53,7 +53,7 @@ const styles = (theme) => ({
 });
 ```
 
-{{"demo": "MediaQuery.js"}}
+{{"component": "../data/material/customization/breakpoints/demos/media-query/index.ts"}}
 
 ## JavaScript Media Queries
 
diff --git a/docs/data/material/customization/breakpoints/MediaQuery.tsx b/docs/data/material/customization/breakpoints/demos/media-query/MediaQuery.tsx
similarity index 93%
rename from docs/data/material/customization/breakpoints/MediaQuery.tsx
rename to docs/data/material/customization/breakpoints/demos/media-query/MediaQuery.tsx
index be899841d08d6d..2aa36f4ec2518d 100644
--- a/docs/data/material/customization/breakpoints/MediaQuery.tsx
+++ b/docs/data/material/customization/breakpoints/demos/media-query/MediaQuery.tsx
@@ -16,6 +16,7 @@ const Root = styled('div')(({ theme }) => ({
 }));
 
 export default function MediaQuery() {
+  // @focus-start @padding 1
   return (
     
       down(md): red
@@ -23,4 +24,5 @@ export default function MediaQuery() {
       up(lg): green
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/breakpoints/demos/media-query/index.ts b/docs/data/material/customization/breakpoints/demos/media-query/index.ts
new file mode 100644
index 00000000000000..32de05678ad3ef
--- /dev/null
+++ b/docs/data/material/customization/breakpoints/demos/media-query/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MediaQuery from './MediaQuery';
+
+export default createDemo(import.meta.url, MediaQuery);
diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md
index 32c7f2ab71b3ef..7db5766a1a7a94 100644
--- a/docs/data/material/customization/color/color.md
+++ b/docs/data/material/customization/color/color.md
@@ -45,7 +45,7 @@ const theme = createTheme({
 To test a [material.io/design/color](https://m2.material.io/design/color/) color scheme with the Material UI documentation, simply select colors using the palette and sliders below.
 Alternatively, you can enter hex values in the Primary and Secondary text fields.
 
-{{"demo": "ColorTool.js", "hideToolbar": true, "bg": true}}
+{{"component": "../data/material/customization/color/demos/tool/index.ts", "hideToolbar": true, "bg": true}}
 
 The output shown in the color sample can be pasted directly into a [`createTheme()`](/material-ui/customization/theming/#createtheme-options-args-theme) function (to be used with [`ThemeProvider`](/material-ui/customization/theming/#theme-provider)):
 
@@ -97,7 +97,7 @@ import { red } from '@mui/material/colors';
 const color = red[500];
 ```
 
-{{"demo": "Color.js", "hideToolbar": true, "bg": "inline"}}
+{{"component": "../data/material/customization/color/demos/color/index.ts", "hideToolbar": true, "bg": "inline"}}
 
 ### Examples
 
diff --git a/docs/data/material/customization/color/Color.js b/docs/data/material/customization/color/demos/color/Color.js
similarity index 100%
rename from docs/data/material/customization/color/Color.js
rename to docs/data/material/customization/color/demos/color/Color.js
diff --git a/docs/data/material/customization/color/demos/color/index.ts b/docs/data/material/customization/color/demos/color/index.ts
new file mode 100644
index 00000000000000..803168e6bf6a14
--- /dev/null
+++ b/docs/data/material/customization/color/demos/color/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import Color from './Color';
+
+export default createDemo(import.meta.url, Color);
diff --git a/docs/data/material/customization/color/ColorDemo.js b/docs/data/material/customization/color/demos/tool/ColorDemo.js
similarity index 100%
rename from docs/data/material/customization/color/ColorDemo.js
rename to docs/data/material/customization/color/demos/tool/ColorDemo.js
diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/demos/tool/ColorTool.js
similarity index 99%
rename from docs/data/material/customization/color/ColorTool.js
rename to docs/data/material/customization/color/demos/tool/ColorTool.js
index ad3a1c0f6079d0..e7b21b3c227c26 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/demos/tool/ColorTool.js
@@ -13,7 +13,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import Slider from '@mui/material/Slider';
 import { capitalize } from '@mui/material/utils';
 import { resetDocsColor, setDocsColors } from '@mui/internal-core-docs/branding';
-import ColorDemo from './ColorDemo';
+import ColorDemo from "./ColorDemo";
 
 const defaults = {
   primary: '#2196f3',
diff --git a/docs/data/material/customization/color/demos/tool/index.ts b/docs/data/material/customization/color/demos/tool/index.ts
new file mode 100644
index 00000000000000..09c07206ad4ae4
--- /dev/null
+++ b/docs/data/material/customization/color/demos/tool/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ColorTool from './ColorTool';
+
+export default createDemo(import.meta.url, ColorTool);
diff --git a/docs/data/material/customization/container-queries/BasicContainerQueries.js b/docs/data/material/customization/container-queries/BasicContainerQueries.js
deleted file mode 100644
index 7a108f731cd319..00000000000000
--- a/docs/data/material/customization/container-queries/BasicContainerQueries.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Typography from '@mui/material/Typography';
-import ResizableDemo from './ResizableDemo';
-
-const DynamicCard = styled(Card)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  [theme.containerQueries.up(350)]: {
-    flexDirection: 'row',
-  },
-}));
-
-const Image = styled('img')(({ theme }) => ({
-  alignSelf: 'stretch',
-  aspectRatio: '16 / 9',
-  objectFit: 'cover',
-  width: '100%',
-  maxHeight: 160,
-  transition: '0.4s',
-  [theme.containerQueries.up(350)]: {
-    maxWidth: '36%',
-    maxHeight: 'initial',
-  },
-  [theme.containerQueries.up(500)]: {
-    maxWidth: 240,
-  },
-}));
-
-const Content = styled(CardContent)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(1),
-  padding: theme.spacing(2),
-  flex: 'auto',
-  transition: 'padding 0.4s',
-  [theme.containerQueries.up(500)]: {
-    padding: theme.spacing(3),
-  },
-}));
-
-export default function BasicContainerQueries() {
-  return (
-    
-      
-        
-          The house from the offer.
-          
-            
    
-              
-                123 Main St, Phoenix AZ
-              
-              
-                $280,000 — $310,000
-              
-            
    
-            
-              
-            
-          
-        
-  );
-}
diff --git a/docs/data/material/customization/container-queries/SxPropContainerQueries.js b/docs/data/material/customization/container-queries/SxPropContainerQueries.js
deleted file mode 100644
index d101e63b1e250d..00000000000000
--- a/docs/data/material/customization/container-queries/SxPropContainerQueries.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Typography from '@mui/material/Typography';
-import ResizableDemo from './ResizableDemo';
-
-export default function SxPropContainerQueries() {
-  return (
-    
-      
-        
-          
-          
-            
    
-              
-                123 Main St, Phoenix AZ
-              
-              
-                $280,000 — $310,000
-              
-            
    
-            
-              
-            
-          
-        
-  );
-}
diff --git a/docs/data/material/customization/container-queries/container-queries.md b/docs/data/material/customization/container-queries/container-queries.md
index e52b55c911fb26..93c2bf367642a8 100644
--- a/docs/data/material/customization/container-queries/container-queries.md
+++ b/docs/data/material/customization/container-queries/container-queries.md
@@ -11,7 +11,7 @@ The value can be unitless (in which case it'll be rendered in pixels), a string,
 theme.containerQueries.up('sm'); // => '@container (min-width: 600px)'
 ```
 
-{{"demo": "BasicContainerQueries.js"}}
+{{"component": "../data/material/customization/container-queries/demos/basic/index.ts"}}
 
 :::info
 One of the ancestors must have the CSS container type specified.
@@ -32,7 +32,7 @@ When adding styles using the `sx` prop, use the `@` or `@/` no
 - ``: a width or a breakpoint key.
 - `` (optional): a named containment context.
 
-{{"demo": "SxPropContainerQueries.js"}}
+{{"component": "../data/material/customization/container-queries/demos/sx-prop/index.ts"}}
 
 ### Caveats
 
diff --git a/docs/data/material/customization/container-queries/ResizableDemo.js b/docs/data/material/customization/container-queries/demos/ResizableDemo.js
similarity index 100%
rename from docs/data/material/customization/container-queries/ResizableDemo.js
rename to docs/data/material/customization/container-queries/demos/ResizableDemo.js
diff --git a/docs/data/material/customization/container-queries/BasicContainerQueries.tsx b/docs/data/material/customization/container-queries/demos/basic/BasicContainerQueries.tsx
similarity index 96%
rename from docs/data/material/customization/container-queries/BasicContainerQueries.tsx
rename to docs/data/material/customization/container-queries/demos/basic/BasicContainerQueries.tsx
index 7a108f731cd319..81be38b8101119 100644
--- a/docs/data/material/customization/container-queries/BasicContainerQueries.tsx
+++ b/docs/data/material/customization/container-queries/demos/basic/BasicContainerQueries.tsx
@@ -4,7 +4,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
-import ResizableDemo from './ResizableDemo';
+import ResizableDemo from "../ResizableDemo";
 
 const DynamicCard = styled(Card)(({ theme }) => ({
   display: 'flex',
@@ -44,6 +44,7 @@ const Content = styled(CardContent)(({ theme }) => ({
 
 export default function BasicContainerQueries() {
   return (
+    // @focus-start
     
       
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/customization/container-queries/demos/basic/index.ts b/docs/data/material/customization/container-queries/demos/basic/index.ts
new file mode 100644
index 00000000000000..e8f6e9db694f8d
--- /dev/null
+++ b/docs/data/material/customization/container-queries/demos/basic/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import BasicContainerQueries from './BasicContainerQueries';
+
+export default createDemo(import.meta.url, BasicContainerQueries);
diff --git a/docs/data/material/customization/container-queries/SxPropContainerQueries.tsx b/docs/data/material/customization/container-queries/demos/sx-prop/SxPropContainerQueries.tsx
similarity index 96%
rename from docs/data/material/customization/container-queries/SxPropContainerQueries.tsx
rename to docs/data/material/customization/container-queries/demos/sx-prop/SxPropContainerQueries.tsx
index d101e63b1e250d..42b17392729fa7 100644
--- a/docs/data/material/customization/container-queries/SxPropContainerQueries.tsx
+++ b/docs/data/material/customization/container-queries/demos/sx-prop/SxPropContainerQueries.tsx
@@ -3,10 +3,11 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
-import ResizableDemo from './ResizableDemo';
+import ResizableDemo from "../ResizableDemo";
 
 export default function SxPropContainerQueries() {
   return (
+    // @focus-start
     
       
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/customization/container-queries/demos/sx-prop/index.ts b/docs/data/material/customization/container-queries/demos/sx-prop/index.ts
new file mode 100644
index 00000000000000..58072f42b44b87
--- /dev/null
+++ b/docs/data/material/customization/container-queries/demos/sx-prop/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SxPropContainerQueries from './SxPropContainerQueries';
+
+export default createDemo(import.meta.url, SxPropContainerQueries);
diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js b/docs/data/material/customization/creating-themed-components/StatFullTemplate.js
deleted file mode 100644
index ddfbc8cffac7f4..00000000000000
--- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Stack from '@mui/material/Stack';
-import { styled, useThemeProps } from '@mui/material/styles';
-
-const StatRoot = styled('div', {
-  name: 'MuiStat',
-  slot: 'root',
-})(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(0.5),
-  padding: theme.spacing(3, 4),
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: theme.shape.borderRadius,
-  boxShadow: theme.shadows[2],
-  letterSpacing: '-0.025em',
-  fontWeight: 600,
-  variants: [
-    {
-      props: {
-        variant: 'outlined',
-      },
-      style: {
-        border: `2px solid ${theme.palette.divider}`,
-        boxShadow: 'none',
-      },
-    },
-  ],
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'inherit',
-  }),
-}));
-
-const StatValue = styled('div', {
-  name: 'MuiStat',
-  slot: 'value',
-})(({ theme }) => ({
-  ...theme.typography.h3,
-}));
-
-const StatUnit = styled('div', {
-  name: 'MuiStat',
-  slot: 'unit',
-})(({ theme }) => ({
-  ...theme.typography.body2,
-  color: theme.palette.text.secondary,
-  ...theme.applyStyles('dark', {
-    color: 'inherit',
-  }),
-}));
-
-const Stat = React.forwardRef(function Stat(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiStat' });
-  const { value, unit, variant, ...other } = props;
-
-  const ownerState = { ...props, variant };
-
-  return (
-    
-      {value}
-      {unit}
-    
-  );
-});
-
-Stat.propTypes = {
-  unit: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  variant: PropTypes.oneOf(['outlined']),
-};
-
-export default function StatFullTemplate() {
-  return (
-    
-      
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview
deleted file mode 100644
index 7319a013202f84..00000000000000
--- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/data/material/customization/creating-themed-components/creating-themed-components.md b/docs/data/material/customization/creating-themed-components/creating-themed-components.md
index dd43e973024727..1ead7463e2ff5b 100644
--- a/docs/data/material/customization/creating-themed-components/creating-themed-components.md
+++ b/docs/data/material/customization/creating-themed-components/creating-themed-components.md
@@ -18,7 +18,7 @@ You don't need to connect your component to the theme if you are only using it i
 
 This guide will walk you through how to build this statistics component, which accepts the app's theme as though it were a built-in Material UI component:
 
-{{"demo": "StatComponent.js", "hideToolbar": true}}
+{{"component": "../data/material/customization/creating-themed-components/demos/stat-component/index.ts", "hideToolbar": true}}
 
 ### 1. Create the component slots
 
@@ -34,7 +34,7 @@ This statistics component is composed of three slots:
 Though you can give these slots any names you prefer, we recommend using `root` for the outermost container element for consistency with the rest of the library.
 :::
 
-{{"demo": "StatSlots.js", "hideToolbar": true}}
+{{"component": "../data/material/customization/creating-themed-components/demos/stat-slots/index.ts", "hideToolbar": true}}
 
 Use the `styled` API with `name` and `slot` parameters to create the slots, as shown below:
 
@@ -327,4 +327,4 @@ declare module '@mui/material/styles' {
 
 This template is the final product of the step-by-step guide above, demonstrating how to build a custom component that can be styled with the theme as if it was a built-in component.
 
-{{"demo": "StatFullTemplate.js", "defaultCodeOpen": true}}
+{{"component": "../data/material/customization/creating-themed-components/demos/stat-full-template/index.ts", "defaultCodeOpen": true}}
diff --git a/docs/data/material/customization/creating-themed-components/StatComponent.js b/docs/data/material/customization/creating-themed-components/demos/stat-component/StatComponent.js
similarity index 100%
rename from docs/data/material/customization/creating-themed-components/StatComponent.js
rename to docs/data/material/customization/creating-themed-components/demos/stat-component/StatComponent.js
diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts b/docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts
new file mode 100644
index 00000000000000..ad759eace8d05b
--- /dev/null
+++ b/docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StatComponent from './StatComponent';
+
+export default createDemo(import.meta.url, StatComponent);
diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/StatFullTemplate.tsx
similarity index 97%
rename from docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx
rename to docs/data/material/customization/creating-themed-components/demos/stat-full-template/StatFullTemplate.tsx
index 0992776ef11765..01d34352f2d6ca 100644
--- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx
+++ b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/StatFullTemplate.tsx
@@ -79,8 +79,10 @@ const Stat = React.forwardRef(
 export default function StatFullTemplate() {
   return (
     
+      {/* @focus-start */}
       
       
+      {/* @focus-end */}
     
   );
 }
diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts
new file mode 100644
index 00000000000000..dd92ad1be32fad
--- /dev/null
+++ b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StatFullTemplate from './StatFullTemplate';
+
+export default createDemo(import.meta.url, StatFullTemplate);
diff --git a/docs/data/material/customization/creating-themed-components/StatSlots.js b/docs/data/material/customization/creating-themed-components/demos/stat-slots/StatSlots.js
similarity index 100%
rename from docs/data/material/customization/creating-themed-components/StatSlots.js
rename to docs/data/material/customization/creating-themed-components/demos/stat-slots/StatSlots.js
diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts b/docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts
new file mode 100644
index 00000000000000..ae30b15e601f5f
--- /dev/null
+++ b/docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StatSlots from './StatSlots';
+
+export default createDemo(import.meta.url, StatSlots);
diff --git a/docs/data/material/customization/css-layers/CssLayersCaveat.js b/docs/data/material/customization/css-layers/CssLayersCaveat.js
deleted file mode 100644
index 5ea05464d76d8d..00000000000000
--- a/docs/data/material/customization/css-layers/CssLayersCaveat.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-
-export default function CssLayersCaveat() {
-  const [cssLayers, setCssLayers] = React.useState(false);
-  const theme = React.useMemo(() => {
-    return createTheme({
-      modularCssLayers: cssLayers,
-      cssVariables: true,
-      components: {
-        MuiAccordion: {
-          styleOverrides: {
-            root: {
-              margin: 0,
-            },
-          },
-        },
-      },
-    });
-  }, [cssLayers]);
-  return (
-    
    
-      
-        
-          No CSS Layers
-        
-         setCssLayers(!cssLayers)} />
-        
-          With CSS Layers
-        
-      
-      
-        
    
-          
-            }
-              aria-controls="panel1-content"
-              id="panel1-header"
-            >
-              Accordion 1
-            
-            
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-              malesuada lacus ex, sit amet blandit leo lobortis eget.
-            
-          
-          
-            }
-              aria-controls="panel2-content"
-              id="panel2-header"
-            >
-              Accordion 2
-            
-            
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-              malesuada lacus ex, sit amet blandit leo lobortis eget.
-            
-          
-        
    
-          
-    
    
-  );
-}
diff --git a/docs/data/material/customization/css-layers/CssLayersInput.js b/docs/data/material/customization/css-layers/CssLayersInput.js
deleted file mode 100644
index 6a54efd504a27b..00000000000000
--- a/docs/data/material/customization/css-layers/CssLayersInput.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import FormHelperText from '@mui/material/FormHelperText';
-
-const theme = createTheme({
-  modularCssLayers: true,
-  cssVariables: true,
-});
-
-export default function CssLayersInput() {
-  return (
-    
-      
-        
-          Label
-        
-        
-        Helper text goes here
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/css-layers/css-layers.md b/docs/data/material/customization/css-layers/css-layers.md
index f5e1813660c35f..93e2f70f719ced 100644
--- a/docs/data/material/customization/css-layers/css-layers.md
+++ b/docs/data/material/customization/css-layers/css-layers.md
@@ -129,7 +129,7 @@ export default function AppTheme({ children }: { children: ReactNode }) {
 }
 ```
 
-{{"demo": "CssLayersInput.js"}}
+{{"component": "../data/material/customization/css-layers/demos/input/index.ts"}}
 
 When this feature is enabled, Material UI generates these layers:
 
@@ -284,4 +284,4 @@ By default, the margin from the theme does _not_ take precedence over the defaul
 
 After enabling the `modularCssLayers` option, the margin from the theme _does_ take precedence because the theme layer comes after the components layer in the cascade order—so the style override is applied and the accordion has no margins when expanded.
 
-{{"demo": "CssLayersCaveat.js"}}
+{{"component": "../data/material/customization/css-layers/demos/caveat/index.ts"}}
diff --git a/docs/data/material/customization/css-layers/CssLayersCaveat.tsx b/docs/data/material/customization/css-layers/demos/caveat/CssLayersCaveat.tsx
similarity index 98%
rename from docs/data/material/customization/css-layers/CssLayersCaveat.tsx
rename to docs/data/material/customization/css-layers/demos/caveat/CssLayersCaveat.tsx
index 5ea05464d76d8d..eab3781315272c 100644
--- a/docs/data/material/customization/css-layers/CssLayersCaveat.tsx
+++ b/docs/data/material/customization/css-layers/demos/caveat/CssLayersCaveat.tsx
@@ -9,6 +9,7 @@ import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 
 export default function CssLayersCaveat() {
+  // @focus-start @padding 1
   const [cssLayers, setCssLayers] = React.useState(false);
   const theme = React.useMemo(() => {
     return createTheme({
@@ -81,4 +82,5 @@ export default function CssLayersCaveat() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/css-layers/demos/caveat/index.ts b/docs/data/material/customization/css-layers/demos/caveat/index.ts
new file mode 100644
index 00000000000000..4463ced97e8e10
--- /dev/null
+++ b/docs/data/material/customization/css-layers/demos/caveat/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CssLayersCaveat from './CssLayersCaveat';
+
+export default createDemo(import.meta.url, CssLayersCaveat);
diff --git a/docs/data/material/customization/css-layers/CssLayersInput.tsx b/docs/data/material/customization/css-layers/demos/input/CssLayersInput.tsx
similarity index 96%
rename from docs/data/material/customization/css-layers/CssLayersInput.tsx
rename to docs/data/material/customization/css-layers/demos/input/CssLayersInput.tsx
index 6a54efd504a27b..fea56b260b150d 100644
--- a/docs/data/material/customization/css-layers/CssLayersInput.tsx
+++ b/docs/data/material/customization/css-layers/demos/input/CssLayersInput.tsx
@@ -11,6 +11,7 @@ const theme = createTheme({
 
 export default function CssLayersInput() {
   return (
+    // @focus-start
     
       
         Helper text goes here
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/customization/css-layers/demos/input/index.ts b/docs/data/material/customization/css-layers/demos/input/index.ts
new file mode 100644
index 00000000000000..6c172661198212
--- /dev/null
+++ b/docs/data/material/customization/css-layers/demos/input/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CssLayersInput from './CssLayersInput';
+
+export default createDemo(import.meta.url, CssLayersInput);
diff --git a/docs/data/material/customization/css-theme-variables/AliasColorVariables.js b/docs/data/material/customization/css-theme-variables/AliasColorVariables.js
deleted file mode 100644
index 67662af25b71eb..00000000000000
--- a/docs/data/material/customization/css-theme-variables/AliasColorVariables.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-
-const theme = createTheme({
-  cssVariables: {
-    nativeColor: true,
-    cssVarPrefix: 'alias', // This is for the demo only, you don't need to set this to use the feature
-  },
-  palette: {
-    primary: {
-      main: 'var(--colors-brand-primary)',
-    },
-  },
-});
-
-export default function AliasColorVariables() {
-  return (
-    
    
-      {/* This is just a demo to replicate the global CSS file */}
-      
-      {/* Your App */}
-      
-        
-          
-        
-      
-    
    
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview b/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview
deleted file mode 100644
index 600f858b811500..00000000000000
--- a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-{/* This is just a demo to replicate the global CSS file */}
-
-
-{/* Your App */}
-
-  
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js b/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js
deleted file mode 100644
index 0a740379235278..00000000000000
--- a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-
-const theme = createTheme({
-  cssVariables: {
-    nativeColor: true,
-    cssVarPrefix: 'contrast', // This is for the demo only, you don't need to set this to use the feature
-  },
-});
-
-export default function ContrastTextDemo() {
-  const [lightness, setLightness] = React.useState(0.65);
-  const [chroma, setChroma] = React.useState(0.3);
-  const [hue, setHue] = React.useState(29);
-
-  // Create OKLCH color from slider values
-  const backgroundColor = `oklch(${lightness} ${chroma} ${hue})`;
-
-  // Get contrast text using theme function
-  const contrastText = theme.palette.getContrastText(backgroundColor);
-
-  return (
-    
-      
-        {/* Live Preview Square */}
-        
-          
-            {backgroundColor}
-          
-        
-        {/* Sliders */}
-        
-          
-            OKLCH
-          
-          
    
-            
-              Lightness: {lightness}
-            
-             setLightness(value)}
-              min={0}
-              max={1}
-              step={0.01}
-              valueLabelDisplay="auto"
-            />
-          
    
-
-          
    
-            
-              Chroma: {chroma}
-            
-             setChroma(value)}
-              min={0}
-              max={0.4}
-              step={0.01}
-              valueLabelDisplay="auto"
-            />
-          
    
-
-          
    
-            
-              Hue: {hue}°
-            
-             setHue(value)}
-              min={0}
-              max={360}
-              step={1}
-              valueLabelDisplay="auto"
-            />
-          
    
-            
-        
-          
-            Text color: {contrastText}
-          
-        
-          
-        
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/CustomColorSpace.js b/docs/data/material/customization/css-theme-variables/CustomColorSpace.js
deleted file mode 100644
index 09062b4c240937..00000000000000
--- a/docs/data/material/customization/css-theme-variables/CustomColorSpace.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardActions from '@mui/material/CardActions';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-
-const theme = createTheme({
-  cssVariables: {
-    nativeColor: true,
-    cssVarPrefix: 'colorSpace', // This is for the demo only, you don't need to set this to use the feature
-  },
-  palette: {
-    primary: {
-      main: 'oklch(0.65 0.3 28.95)',
-    },
-    warning: {
-      main: 'oklch(0.72 0.24 44.32)',
-    },
-  },
-});
-
-export default function CustomColorSpace() {
-  return (
-    
-      
-        
-          
-            This theme uses the oklch color space.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx b/docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx
deleted file mode 100644
index 09062b4c240937..00000000000000
--- a/docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardActions from '@mui/material/CardActions';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-
-const theme = createTheme({
-  cssVariables: {
-    nativeColor: true,
-    cssVarPrefix: 'colorSpace', // This is for the demo only, you don't need to set this to use the feature
-  },
-  palette: {
-    primary: {
-      main: 'oklch(0.65 0.3 28.95)',
-    },
-    warning: {
-      main: 'oklch(0.72 0.24 44.32)',
-    },
-  },
-});
-
-export default function CustomColorSpace() {
-  return (
-    
-      
-        
-          
-            This theme uses the oklch color space.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js b/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js
deleted file mode 100644
index f1822ea689bc55..00000000000000
--- a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { createTheme, ThemeProvider, useColorScheme } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
-import MenuItem from '@mui/material/MenuItem';
-import Switch from '@mui/material/Switch';
-import Select from '@mui/material/Select';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const theme = createTheme({
-  cssVariables: {
-    colorSchemeSelector: '.demo-disable-transition-%s',
-  },
-  colorSchemes: { dark: true },
-});
-
-function ModeSwitcher() {
-  const { mode, setMode } = useColorScheme();
-  if (!mode) {
-    return null;
-  }
-  return (
-    
-  );
-}
-
-export default function DisableTransitionOnChange() {
-  const [disableTransition, setDisableTransition] = React.useState(false);
-  return (
-    
-      
-        
-         setDisableTransition(event.target.checked)}
-            />
-          }
-          label="Disable transition"
-        />
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js b/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js
deleted file mode 100644
index 5149b4feb0350e..00000000000000
--- a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormLabel from '@mui/material/FormLabel';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-
-export default function ModernColorSpaces() {
-  const colorSpaces = [
-    'color(display-p3 0.7 0.5 0)', // Mud
-    'oklch(0.62 0.25 29)', // Orange
-    'oklab(0.59 0.1 -0.14)', // Purple
-    'hsl(141, 70%, 48%)', // Green
-    'rgb(25, 118, 210)', // Blue
-  ];
-
-  const [selectedColor, setSelectedColor] = React.useState(colorSpaces[0]);
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        cssVariables: {
-          nativeColor: true,
-          cssVarPrefix: 'modern-color-spaces',
-        },
-        palette: {
-          primary: {
-            main: selectedColor,
-          },
-        },
-      }),
-    [selectedColor],
-  );
-
-  return (
-    
-      
-        Main color
-         setSelectedColor(event.target.value)}
-        >
-          {colorSpaces.map((value) => (
-            }
-              label={value}
-            />
-          ))}
-        
-      
-
-      
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/NativeCssColors.js b/docs/data/material/customization/css-theme-variables/NativeCssColors.js
deleted file mode 100644
index dce82d8c7a0e6b..00000000000000
--- a/docs/data/material/customization/css-theme-variables/NativeCssColors.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardActions from '@mui/material/CardActions';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-
-const theme = createTheme({
-  cssVariables: {
-    nativeColor: true,
-    cssVarPrefix: 'nativeColor', // This is for the demo only, you don't need to set this to use the feature
-    colorSchemeSelector: 'data-mui-color-scheme',
-  },
-  colorSchemes: {
-    light: true,
-    dark: true,
-  },
-});
-
-export default function NativeCssColors() {
-  return (
-    
-      
-        
-          
-            This theme uses the oklch color space.
-          
-        
-        
-          
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js b/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js
deleted file mode 100644
index 80ab57d195a33a..00000000000000
--- a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { blue, purple, red, green, orange, brown } from '@mui/material/colors';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const theme = createTheme({
-  cssVariables: {
-    nativeColor: true,
-    // This is for the demo only, you don't need to set this to use the feature
-    cssVarPrefix: 'demo',
-    colorSchemeSelector: 'data',
-  },
-  colorSchemes: {
-    light: true,
-    dark: true,
-  },
-});
-
-const colorSwatches = [
-  { color: blue[500] },
-  { color: purple[500] },
-  { color: red[500] },
-  { color: brown[600] },
-  { color: green[600] },
-  { color: orange[500] },
-];
-
-function ColorDisplay({ color }) {
-  return (
-    
-      
-      
-        {color}
-      
-    
-  );
-}
-
-ColorDisplay.propTypes = {
-  color: PropTypes.string.isRequired,
-};
-
-export default function ThemeColorFunctions() {
-  const [selectedColor, setSelectedColor] = React.useState(colorSwatches[0]);
-
-  const colorValues = {
-    alpha: theme.alpha(selectedColor.color, 0.5),
-    lighten: theme.lighten(selectedColor.color, 0.5),
-    darken: theme.darken(selectedColor.color, 0.5),
-  };
-
-  return (
-    
-      
-        
-          {colorSwatches.map((swatch) => {
-            const isSelected = selectedColor.color === swatch.color;
-            return (
-              
-            );
-          })}
-        
-        
-          
    
-            
-              theme.alpha(color, 0.5)
-            
-            
-          
    
-          
    
-            
-              theme.lighten(color, 0.5)
-            
-            
-          
    
-          
    
-            
-              theme.darken(color, 0.5)
-            
-            
-          
    
-            
-          
-        
-  );
-}
diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
index ea53b475c10049..4ebd9151f93f8f 100644
--- a/docs/data/material/customization/css-theme-variables/configuration.md
+++ b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -308,7 +308,7 @@ To disable CSS transitions when switching between modes, apply the `disableTrans
 
 ```
 
-{{"demo": "DisableTransitionOnChange.js"}}
+{{"component": "../data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts"}}
 
 ## Force theme recalculation between modes
 
diff --git a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/AliasColorVariables.tsx
similarity index 94%
rename from docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx
rename to docs/data/material/customization/css-theme-variables/demos/alias-color-variables/AliasColorVariables.tsx
index ec99dcd6857697..aba3931603e147 100644
--- a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx
+++ b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/AliasColorVariables.tsx
@@ -18,6 +18,7 @@ const theme = createTheme({
 export default function AliasColorVariables() {
   return (
     
    
+      {/* @focus-start */}
       {/* This is just a demo to replicate the global CSS file */}
       Branded Button
         
       
+      {/* @focus-end */}
     
    
   );
 }
diff --git a/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts
new file mode 100644
index 00000000000000..68630013ab63aa
--- /dev/null
+++ b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import AliasColorVariables from './AliasColorVariables';
+
+export default createDemo(import.meta.url, AliasColorVariables);
diff --git a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/ContrastTextDemo.tsx
similarity index 98%
rename from docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx
rename to docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/ContrastTextDemo.tsx
index 0a740379235278..eb1bd5844fb31e 100644
--- a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx
+++ b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/ContrastTextDemo.tsx
@@ -12,6 +12,7 @@ const theme = createTheme({
 });
 
 export default function ContrastTextDemo() {
+  // @focus-start @padding 1
   const [lightness, setLightness] = React.useState(0.65);
   const [chroma, setChroma] = React.useState(0.3);
   const [hue, setHue] = React.useState(29);
@@ -119,4 +120,5 @@ export default function ContrastTextDemo() {
           
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts
new file mode 100644
index 00000000000000..5a7856b9f80200
--- /dev/null
+++ b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ContrastTextDemo from './ContrastTextDemo';
+
+export default createDemo(import.meta.url, ContrastTextDemo);
diff --git a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.tsx b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/DisableTransitionOnChange.tsx
similarity index 97%
rename from docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.tsx
rename to docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/DisableTransitionOnChange.tsx
index 23a1358fc23ffd..a25aba7017019d 100644
--- a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.tsx
+++ b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/DisableTransitionOnChange.tsx
@@ -34,6 +34,7 @@ function ModeSwitcher() {
 }
 
 export default function DisableTransitionOnChange() {
+  // @focus-start @padding 1
   const [disableTransition, setDisableTransition] = React.useState(false);
   return (
     
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts
new file mode 100644
index 00000000000000..6dd9b857b9239e
--- /dev/null
+++ b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DisableTransitionOnChange from './DisableTransitionOnChange';
+
+export default createDemo(import.meta.url, DisableTransitionOnChange);
diff --git a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/ModernColorSpaces.tsx
similarity index 97%
rename from docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx
rename to docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/ModernColorSpaces.tsx
index 5149b4feb0350e..1eb8a52da5f1a1 100644
--- a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx
+++ b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/ModernColorSpaces.tsx
@@ -9,6 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
 
 export default function ModernColorSpaces() {
+  // @focus-start @padding 1
   const colorSpaces = [
     'color(display-p3 0.7 0.5 0)', // Mud
     'oklch(0.62 0.25 29)', // Orange
@@ -61,4 +62,5 @@ export default function ModernColorSpaces() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts
new file mode 100644
index 00000000000000..e4162051141e6e
--- /dev/null
+++ b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ModernColorSpaces from './ModernColorSpaces';
+
+export default createDemo(import.meta.url, ModernColorSpaces);
diff --git a/docs/data/material/customization/css-theme-variables/NativeCssColors.tsx b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/NativeCssColors.tsx
similarity index 96%
rename from docs/data/material/customization/css-theme-variables/NativeCssColors.tsx
rename to docs/data/material/customization/css-theme-variables/demos/native-css-colors/NativeCssColors.tsx
index dce82d8c7a0e6b..c5c726681f263d 100644
--- a/docs/data/material/customization/css-theme-variables/NativeCssColors.tsx
+++ b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/NativeCssColors.tsx
@@ -19,6 +19,7 @@ const theme = createTheme({
 
 export default function NativeCssColors() {
   return (
+    // @focus-start
     
       
         
@@ -36,5 +37,6 @@ export default function NativeCssColors() {
         
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts
new file mode 100644
index 00000000000000..0bdb7e75a5a0dc
--- /dev/null
+++ b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import NativeCssColors from './NativeCssColors';
+
+export default createDemo(import.meta.url, NativeCssColors);
diff --git a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/ThemeColorFunctions.tsx
similarity index 98%
rename from docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx
rename to docs/data/material/customization/css-theme-variables/demos/theme-color-functions/ThemeColorFunctions.tsx
index f3b3b839a96606..a08349ffa4ddf2 100644
--- a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx
+++ b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/ThemeColorFunctions.tsx
@@ -55,6 +55,7 @@ function ColorDisplay({ color }: { color: string }) {
 }
 
 export default function ThemeColorFunctions() {
+  // @focus-start @padding 1
   const [selectedColor, setSelectedColor] = React.useState(colorSwatches[0]);
 
   const colorValues = {
@@ -134,4 +135,5 @@ export default function ThemeColorFunctions() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts
new file mode 100644
index 00000000000000..a7a355be0931b4
--- /dev/null
+++ b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ThemeColorFunctions from './ThemeColorFunctions';
+
+export default createDemo(import.meta.url, ThemeColorFunctions);
diff --git a/docs/data/material/customization/css-theme-variables/native-color.md b/docs/data/material/customization/css-theme-variables/native-color.md
index 9f9473e4b976ac..4b5ecb36ad470d 100644
--- a/docs/data/material/customization/css-theme-variables/native-color.md
+++ b/docs/data/material/customization/css-theme-variables/native-color.md
@@ -30,7 +30,7 @@ const theme = createTheme({
 });
 ```
 
-{{"demo": "NativeCssColors.js"}}
+{{"component": "../data/material/customization/css-theme-variables/demos/native-css-colors/index.ts"}}
 
 ## Modern color spaces
 
@@ -47,7 +47,7 @@ const theme = createTheme({
 });
 ```
 
-{{"demo": "ModernColorSpaces.js"}}
+{{"component": "../data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts"}}
 
 ## Aliasing color variables
 
@@ -66,7 +66,7 @@ const theme = createTheme({
 });
 ```
 
-{{"demo": "AliasColorVariables.js"}}
+{{"component": "../data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts"}}
 
 ## Theme color functions
 
@@ -74,7 +74,7 @@ The theme object contains these color utilities: `alpha()`, `lighten()`, and `da
 
 When native color is enabled, these functions use CSS `color-mix()` and relative color instead of the JavaScript color manipulation.
 
-{{"demo": "ThemeColorFunctions.js"}}
+{{"component": "../data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts"}}
 
 :::info
 The theme color functions are backward compatible.
@@ -86,7 +86,7 @@ If native color is not enabled, they will fall back to the JavaScript color mani
 The `theme.palette.getContrastText()` function produces the contrast color.
 The demo below shows the result of the `theme.palette.getContrastText()` function, which produces the text color based on the selected background.
 
-{{"demo": "ContrastTextDemo.js"}}
+{{"component": "../data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts"}}
 
 :::info
 The CSS variables `--__l` and `--__a` are internal variables set globally by Material UI.
diff --git a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js b/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js
deleted file mode 100644
index 96076915883012..00000000000000
--- a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import Box from '@mui/material/Box';
-import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
-import { amber, deepOrange, grey } from '@mui/material/colors';
-
-const getDesignTokens = (mode) => ({
-  palette: {
-    mode,
-    primary: {
-      ...amber,
-      ...(mode === 'dark' && {
-        main: amber[300],
-      }),
-    },
-    ...(mode === 'dark' && {
-      background: {
-        default: deepOrange[900],
-        paper: deepOrange[900],
-      },
-    }),
-    text: {
-      ...(mode === 'light'
-        ? {
-            primary: grey[900],
-            secondary: grey[800],
-          }
-        : {
-            primary: '#fff',
-            secondary: grey[500],
-          }),
-    },
-  },
-});
-
-function MyApp() {
-  const theme = useTheme();
-  return (
-    
-      This is a {theme.palette.mode} mode theme with custom palette
-    
-  );
-}
-
-const darkModeTheme = createTheme(getDesignTokens('dark'));
-
-export default function DarkThemeWithCustomPalette() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx b/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx
deleted file mode 100644
index e6ac66e997a385..00000000000000
--- a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Box from '@mui/material/Box';
-import {
-  ThemeProvider,
-  useTheme,
-  createTheme,
-  PaletteMode,
-} from '@mui/material/styles';
-import { amber, deepOrange, grey } from '@mui/material/colors';
-
-const getDesignTokens = (mode: PaletteMode) => ({
-  palette: {
-    mode,
-    primary: {
-      ...amber,
-      ...(mode === 'dark' && {
-        main: amber[300],
-      }),
-    },
-    ...(mode === 'dark' && {
-      background: {
-        default: deepOrange[900],
-        paper: deepOrange[900],
-      },
-    }),
-    text: {
-      ...(mode === 'light'
-        ? {
-            primary: grey[900],
-            secondary: grey[800],
-          }
-        : {
-            primary: '#fff',
-            secondary: grey[500],
-          }),
-    },
-  },
-});
-
-function MyApp() {
-  const theme = useTheme();
-  return (
-    
-      This is a {theme.palette.mode} mode theme with custom palette
-    
-  );
-}
-
-const darkModeTheme = createTheme(getDesignTokens('dark'));
-
-export default function DarkThemeWithCustomPalette() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview b/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview
deleted file mode 100644
index d5025e4e55283a..00000000000000
--- a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/customization/dark-mode/ToggleColorMode.js b/docs/data/material/customization/dark-mode/ToggleColorMode.js
deleted file mode 100644
index 42cda6a83ab3de..00000000000000
--- a/docs/data/material/customization/dark-mode/ToggleColorMode.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import Box from '@mui/material/Box';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';
-
-function MyApp() {
-  const { mode, setMode } = useColorScheme();
-  if (!mode) {
-    return null;
-  }
-  return (
-    
-      
-        Theme
-         setMode(event.target.value)}
-        >
-          } label="System" />
-          } label="Light" />
-          } label="Dark" />
-        
-      
-    
-  );
-}
-
-const theme = createTheme({
-  colorSchemes: {
-    dark: true,
-  },
-});
-
-export default function ToggleColorMode() {
-  return (
-    
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview b/docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview
deleted file mode 100644
index 95f392ac920cbb..00000000000000
--- a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-  
-
\ No newline at end of file
diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md
index 0fc074ab034d88..d2837b03ecd9a3 100644
--- a/docs/data/material/customization/dark-mode/dark-mode.md
+++ b/docs/data/material/customization/dark-mode/dark-mode.md
@@ -32,7 +32,7 @@ export default function App() {
 
 Adding `mode: 'dark'` to the `createTheme()` helper modifies several palette values, as shown in the following demo:
 
-{{"demo": "DarkTheme.js", "bg": "inline", "hideToolbar": true}}
+{{"component": "../data/material/customization/dark-mode/demos/dark-theme/index.ts", "bg": "inline", "hideToolbar": true}}
 
 Adding `` inside of the `` component will also enable dark mode for the app's background.
 
@@ -124,7 +124,7 @@ To give your users a way to toggle between modes for [built-in support](#built-i
 The `mode` is always `undefined` on first render, so make sure to handle this case as shown in the demo below—otherwise you may encounter a hydration mismatch error.
 :::
 
-{{"demo": "ToggleColorMode.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/customization/dark-mode/demos/toggle-color-mode/index.ts", "defaultCodeOpen": false}}
 
 ## Storage manager
 
diff --git a/docs/data/material/customization/dark-mode/DarkTheme.js b/docs/data/material/customization/dark-mode/demos/dark-theme/DarkTheme.js
similarity index 100%
rename from docs/data/material/customization/dark-mode/DarkTheme.js
rename to docs/data/material/customization/dark-mode/demos/dark-theme/DarkTheme.js
diff --git a/docs/data/material/customization/dark-mode/demos/dark-theme/index.ts b/docs/data/material/customization/dark-mode/demos/dark-theme/index.ts
new file mode 100644
index 00000000000000..c4de6ea76c01f9
--- /dev/null
+++ b/docs/data/material/customization/dark-mode/demos/dark-theme/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DarkTheme from './DarkTheme';
+
+export default createDemo(import.meta.url, DarkTheme);
diff --git a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/ToggleColorMode.tsx
similarity index 97%
rename from docs/data/material/customization/dark-mode/ToggleColorMode.tsx
rename to docs/data/material/customization/dark-mode/demos/toggle-color-mode/ToggleColorMode.tsx
index 1e2f49d44b559b..017ac5a77c3ae6 100644
--- a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx
+++ b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/ToggleColorMode.tsx
@@ -52,9 +52,11 @@ const theme = createTheme({
 });
 
 export default function ToggleColorMode() {
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts
new file mode 100644
index 00000000000000..f97159a731cadd
--- /dev/null
+++ b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ToggleColorMode from './ToggleColorMode';
+
+export default createDemo(import.meta.url, ToggleColorMode);
diff --git a/docs/data/material/customization/default-theme/default-theme.md b/docs/data/material/customization/default-theme/default-theme.md
index 27460c267baffa..51ed6a27e4a252 100644
--- a/docs/data/material/customization/default-theme/default-theme.md
+++ b/docs/data/material/customization/default-theme/default-theme.md
@@ -14,4 +14,4 @@ Please note that **the documentation site is using a custom theme** (the MUI's o
 
 
    
 
-{{"demo": "DefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
+{{"component": "../data/material/customization/default-theme/demos/default-theme/index.ts", "hideToolbar": true, "bg": "inline"}}
diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/demos/default-theme/DefaultTheme.js
similarity index 100%
rename from docs/data/material/customization/default-theme/DefaultTheme.js
rename to docs/data/material/customization/default-theme/demos/default-theme/DefaultTheme.js
diff --git a/docs/data/material/customization/default-theme/demos/default-theme/index.ts b/docs/data/material/customization/default-theme/demos/default-theme/index.ts
new file mode 100644
index 00000000000000..0ee14767ad371f
--- /dev/null
+++ b/docs/data/material/customization/default-theme/demos/default-theme/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DefaultTheme from './DefaultTheme';
+
+export default createDemo(import.meta.url, DefaultTheme);
diff --git a/docs/data/material/customization/density/DensityTool.js b/docs/data/material/customization/density/demos/tool/DensityTool.js
similarity index 100%
rename from docs/data/material/customization/density/DensityTool.js
rename to docs/data/material/customization/density/demos/tool/DensityTool.js
diff --git a/docs/data/material/customization/density/demos/tool/index.ts b/docs/data/material/customization/density/demos/tool/index.ts
new file mode 100644
index 00000000000000..b7f26e4d5805ee
--- /dev/null
+++ b/docs/data/material/customization/density/demos/tool/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DensityTool from './DensityTool';
+
+export default createDemo(import.meta.url, DensityTool);
diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md
index cd2eb75a29168c..511b54d76c7194 100644
--- a/docs/data/material/customization/density/density.md
+++ b/docs/data/material/customization/density/density.md
@@ -116,4 +116,4 @@ const theme = createTheme({
 });
 ```
 
-{{"demo": "DensityTool.js", "hideToolbar": true}}
+{{"component": "../data/material/customization/density/demos/tool/index.ts", "hideToolbar": true}}
diff --git a/docs/data/material/customization/how-to-customize/DevTools.js b/docs/data/material/customization/how-to-customize/DevTools.js
deleted file mode 100644
index be2ab7897ed18f..00000000000000
--- a/docs/data/material/customization/how-to-customize/DevTools.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Slider from '@mui/material/Slider';
-
-export default function DevTools() {
-  return (
-    
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/DevTools.tsx.preview b/docs/data/material/customization/how-to-customize/DevTools.tsx.preview
deleted file mode 100644
index 8445ed7a14110f..00000000000000
--- a/docs/data/material/customization/how-to-customize/DevTools.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.js b/docs/data/material/customization/how-to-customize/DynamicCSS.js
deleted file mode 100644
index bc7b3e3ed3a639..00000000000000
--- a/docs/data/material/customization/how-to-customize/DynamicCSS.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { alpha, styled } from '@mui/material/styles';
-import Slider from '@mui/material/Slider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-
-const StyledSlider = styled(Slider, {
-  shouldForwardProp: (prop) => prop !== 'success',
-})(({ theme }) => ({
-  width: 300,
-  variants: [
-    {
-      props: ({ success }) => success,
-      style: {
-        color: theme.palette.success.main,
-        '& .MuiSlider-thumb': {
-          [`&:hover, &.Mui-focusVisible`]: {
-            boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
-          },
-          [`&.Mui-active`]: {
-            boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
-          },
-        },
-      },
-    },
-  ],
-}));
-
-export default function DynamicCSS() {
-  const [success, setSuccess] = React.useState(false);
-
-  const handleChange = (event) => {
-    setSuccess(event.target.checked);
-  };
-
-  return (
-    
-      
-        }
-        label="Success"
-      />
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview b/docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview
deleted file mode 100644
index cd2ab526ad39cd..00000000000000
--- a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    }
-    label="Success"
-  />
-  
-
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.js b/docs/data/material/customization/how-to-customize/DynamicCSSVariables.js
deleted file mode 100644
index e38eb2935ea5cd..00000000000000
--- a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Slider from '@mui/material/Slider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-
-const CustomSlider = styled(Slider)({
-  width: 300,
-  color: 'var(--color)',
-  '& .MuiSlider-thumb': {
-    [`&:hover, &.Mui-focusVisible`]: {
-      boxShadow: '0px 0px 0px 8px var(--box-shadow)',
-    },
-    [`&.Mui-active`]: {
-      boxShadow: '0px 0px 0px 14px var(--box-shadow)',
-    },
-  },
-});
-
-const successVars = {
-  '--color': '#4caf50',
-  '--box-shadow': 'rgb(76, 175, 80, .16)',
-};
-
-const defaultVars = {
-  '--color': '#1976d2',
-  '--box-shadow': 'rgb(25, 118, 210, .16)',
-};
-
-export default function DynamicCSSVariables() {
-  const [vars, setVars] = React.useState(defaultVars);
-
-  const handleChange = (event) => {
-    setVars(event.target.checked ? successVars : defaultVars);
-  };
-
-  return (
-    
-      
-        }
-        label="Success"
-      />
-      
-    
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview b/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview
deleted file mode 100644
index 202b26caefe2eb..00000000000000
--- a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    }
-    label="Success"
-  />
-  
-
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverride.js b/docs/data/material/customization/how-to-customize/GlobalCssOverride.js
deleted file mode 100644
index 91ae4acc113873..00000000000000
--- a/docs/data/material/customization/how-to-customize/GlobalCssOverride.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import GlobalStyles from '@mui/material/GlobalStyles';
-
-export default function GlobalCssOverride() {
-  return (
-    
-      
-      
    Grey h1 element
    
-        
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview b/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview
deleted file mode 100644
index 3aa3aa7c161d78..00000000000000
--- a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-  
-  
    Grey h1 element
    
-    
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
deleted file mode 100644
index d0a3d09300bc39..00000000000000
--- a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import GlobalStyles from '@mui/material/GlobalStyles';
-
-export default function GlobalCssOverrideTheme() {
-  return (
-    
-       ({
-          h1: { color: theme.palette.primary.main },
-        })}
-      />
-      
    Grey h1 element
    
-        
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview
deleted file mode 100644
index 591f0b2d5b4c93..00000000000000
--- a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview
+++ /dev/null
@@ -1,8 +0,0 @@
-
-   ({
-      h1: { color: theme.palette.primary.main },
-    })}
-  />
-  
    Grey h1 element
    
-    
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js b/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js
deleted file mode 100644
index 3b0c3d4677161c..00000000000000
--- a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-
-const theme = createTheme({
-  palette: {
-    success: {
-      main: '#ff0000',
-    },
-  },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: (themeParam) => `
-        h1 {
-          color: ${themeParam.palette.success.main};
-        }
-      `,
-    },
-  },
-});
-
-export default function OverrideCallbackCssBaseline() {
-  return (
-    
-      
-      
    h1 element
    
-        
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview b/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview
deleted file mode 100644
index b8bf6451061d82..00000000000000
--- a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-  
-  
    h1 element
    
-    
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.js b/docs/data/material/customization/how-to-customize/OverrideCssBaseline.js
deleted file mode 100644
index fcffc651118c49..00000000000000
--- a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-
-const theme = createTheme({
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: `
-        h1 {
-          color: grey;
-        }
-      `,
-    },
-  },
-});
-
-export default function OverrideCssBaseline() {
-  return (
-    
-      
-      
    Grey h1 element
    
-        
-  );
-}
diff --git a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview b/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview
deleted file mode 100644
index 3763c68e726438..00000000000000
--- a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-
-  
-  
    Grey h1 element
    
-    
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/StyledCustomization.js b/docs/data/material/customization/how-to-customize/StyledCustomization.js
deleted file mode 100644
index d7c03d30b1045b..00000000000000
--- a/docs/data/material/customization/how-to-customize/StyledCustomization.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Slider from '@mui/material/Slider';
-import { alpha, styled } from '@mui/material/styles';
-
-const SuccessSlider = styled(Slider)(({ theme }) => ({
-  width: 300,
-  color: theme.palette.success.main,
-  '& .MuiSlider-thumb': {
-    '&:hover, &.Mui-focusVisible': {
-      boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
-    },
-    '&.Mui-active': {
-      boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
-    },
-  },
-}));
-
-export default function StyledCustomization() {
-  return ;
-}
diff --git a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview b/docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview
deleted file mode 100644
index deec1e19088ddc..00000000000000
--- a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/SxProp.js b/docs/data/material/customization/how-to-customize/SxProp.js
deleted file mode 100644
index ff423b0e47249a..00000000000000
--- a/docs/data/material/customization/how-to-customize/SxProp.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Slider from '@mui/material/Slider';
-
-export default function SxProp() {
-  return ;
-}
diff --git a/docs/data/material/customization/how-to-customize/SxProp.tsx b/docs/data/material/customization/how-to-customize/SxProp.tsx
deleted file mode 100644
index ff423b0e47249a..00000000000000
--- a/docs/data/material/customization/how-to-customize/SxProp.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Slider from '@mui/material/Slider';
-
-export default function SxProp() {
-  return ;
-}
diff --git a/docs/data/material/customization/how-to-customize/SxProp.tsx.preview b/docs/data/material/customization/how-to-customize/SxProp.tsx.preview
deleted file mode 100644
index 6c947e4412e198..00000000000000
--- a/docs/data/material/customization/how-to-customize/SxProp.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/DevTools.tsx b/docs/data/material/customization/how-to-customize/demos/dev-tools/DevTools.tsx
similarity index 86%
rename from docs/data/material/customization/how-to-customize/DevTools.tsx
rename to docs/data/material/customization/how-to-customize/demos/dev-tools/DevTools.tsx
index be2ab7897ed18f..a86bbcce01b5ef 100644
--- a/docs/data/material/customization/how-to-customize/DevTools.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/dev-tools/DevTools.tsx
@@ -1,6 +1,7 @@
 import Slider from '@mui/material/Slider';
 
 export default function DevTools() {
+  // @focus-start @padding 1
   return (
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts b/docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts
new file mode 100644
index 00000000000000..aace8235f11747
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DevTools from './DevTools';
+
+export default createDemo(import.meta.url, DevTools);
diff --git a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/DynamicCSSVariables.tsx
similarity index 96%
rename from docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx
rename to docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/DynamicCSSVariables.tsx
index 6e9fc508bbed08..60ac8facd720bd 100644
--- a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/DynamicCSSVariables.tsx
@@ -34,6 +34,7 @@ export default function DynamicCSSVariables() {
     setVars(event.target.checked ? successVars : defaultVars);
   };
 
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts
new file mode 100644
index 00000000000000..5d065883e965d7
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DynamicCSSVariables from './DynamicCSSVariables';
+
+export default createDemo(import.meta.url, DynamicCSSVariables);
diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx b/docs/data/material/customization/how-to-customize/demos/dynamic-css/DynamicCSS.tsx
similarity index 97%
rename from docs/data/material/customization/how-to-customize/DynamicCSS.tsx
rename to docs/data/material/customization/how-to-customize/demos/dynamic-css/DynamicCSS.tsx
index 5e399164e84e0e..37788c92f93b9e 100644
--- a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css/DynamicCSS.tsx
@@ -37,6 +37,7 @@ export default function DynamicCSS() {
     setSuccess(event.target.checked);
   };
 
+  // @focus-start @padding 1
   return (
     
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts b/docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts
new file mode 100644
index 00000000000000..b239b48536c4ab
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import DynamicCSS from './DynamicCSS';
+
+export default createDemo(import.meta.url, DynamicCSS);
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/GlobalCssOverrideTheme.tsx
similarity index 88%
rename from docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx
rename to docs/data/material/customization/how-to-customize/demos/global-css-override-theme/GlobalCssOverrideTheme.tsx
index d0a3d09300bc39..e93fa89ba7fd37 100644
--- a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/GlobalCssOverrideTheme.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import GlobalStyles from '@mui/material/GlobalStyles';
 
 export default function GlobalCssOverrideTheme() {
+  // @focus-start @padding 1
   return (
     
       Grey h1 element
     
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts
new file mode 100644
index 00000000000000..90ca14df350f8f
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GlobalCssOverrideTheme from './GlobalCssOverrideTheme';
+
+export default createDemo(import.meta.url, GlobalCssOverrideTheme);
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx b/docs/data/material/customization/how-to-customize/demos/global-css-override/GlobalCssOverride.tsx
similarity index 86%
rename from docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx
rename to docs/data/material/customization/how-to-customize/demos/global-css-override/GlobalCssOverride.tsx
index 91ae4acc113873..074f7fec05c430 100644
--- a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/global-css-override/GlobalCssOverride.tsx
@@ -2,10 +2,12 @@ import * as React from 'react';
 import GlobalStyles from '@mui/material/GlobalStyles';
 
 export default function GlobalCssOverride() {
+  // @focus-start @padding 1
   return (
     
       
       
    Grey h1 element
    
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts b/docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts
new file mode 100644
index 00000000000000..e8d415b6209900
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import GlobalCssOverride from './GlobalCssOverride';
+
+export default createDemo(import.meta.url, GlobalCssOverride);
diff --git a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/OverrideCallbackCssBaseline.tsx
similarity index 92%
rename from docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx
rename to docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/OverrideCallbackCssBaseline.tsx
index 3b0c3d4677161c..8ec0add24e4949 100644
--- a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/OverrideCallbackCssBaseline.tsx
@@ -19,10 +19,12 @@ const theme = createTheme({
 });
 
 export default function OverrideCallbackCssBaseline() {
+  // @focus-start @padding 1
   return (
     
       
       
    h1 element
    
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts
new file mode 100644
index 00000000000000..d47009cf4431e4
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OverrideCallbackCssBaseline from './OverrideCallbackCssBaseline';
+
+export default createDemo(import.meta.url, OverrideCallbackCssBaseline);
diff --git a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/OverrideCssBaseline.tsx
similarity index 91%
rename from docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx
rename to docs/data/material/customization/how-to-customize/demos/override-css-baseline/OverrideCssBaseline.tsx
index fcffc651118c49..f5e495c207a4b7 100644
--- a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/OverrideCssBaseline.tsx
@@ -14,10 +14,12 @@ const theme = createTheme({
 });
 
 export default function OverrideCssBaseline() {
+  // @focus-start @padding 1
   return (
     
       
       
    Grey h1 element
    
         
   );
+  // @focus-end
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts
new file mode 100644
index 00000000000000..ce945ef9baab75
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import OverrideCssBaseline from './OverrideCssBaseline';
+
+export default createDemo(import.meta.url, OverrideCssBaseline);
diff --git a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx b/docs/data/material/customization/how-to-customize/demos/styled-customization/StyledCustomization.tsx
similarity index 88%
rename from docs/data/material/customization/how-to-customize/StyledCustomization.tsx
rename to docs/data/material/customization/how-to-customize/demos/styled-customization/StyledCustomization.tsx
index a3acc2287ca2d8..6a09c25ae52c2a 100644
--- a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx
+++ b/docs/data/material/customization/how-to-customize/demos/styled-customization/StyledCustomization.tsx
@@ -15,5 +15,8 @@ const SuccessSlider = styled(Slider)(({ theme }) => ({
 }));
 
 export default function StyledCustomization() {
-  return ;
+  return (
+    // @focus
+    
+  );
 }
diff --git a/docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts b/docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts
new file mode 100644
index 00000000000000..8fb5d362801563
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StyledCustomization from './StyledCustomization';
+
+export default createDemo(import.meta.url, StyledCustomization);
diff --git a/docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx b/docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx
new file mode 100644
index 00000000000000..ce8d4137114650
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx
@@ -0,0 +1,8 @@
+import Slider from '@mui/material/Slider';
+
+export default function SxProp() {
+  return (
+    // @focus
+    
+  );
+}
diff --git a/docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts b/docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts
new file mode 100644
index 00000000000000..8b264f64ff0fda
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts
@@ -0,0 +1,5 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SxProp from './SxProp';
+
+export default createDemo(import.meta.url, SxProp);
diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md
index 1957700f8a8fa9..bb46c4b19b640d 100644
--- a/docs/data/material/customization/how-to-customize/how-to-customize.md
+++ b/docs/data/material/customization/how-to-customize/how-to-customize.md
@@ -27,7 +27,7 @@ To change the styles of _one single instance_ of a component, you can use one of
 The [`sx` prop](/system/getting-started/the-sx-prop/) is the best option for adding style overrides to a single instance of a component in most cases.
 It can be used with all Material UI components.
 
-{{"demo": "SxProp.js"}}
+{{"component": "../data/material/customization/how-to-customize/demos/sx-prop/index.ts"}}
 
 ### Overriding nested component styles
 
@@ -42,7 +42,7 @@ In this case, the styles are applied with `.css-ae2u5c-MuiSlider-thumb` but you
 
 dev-tools
 
-{{"demo": "DevTools.js"}}
+{{"component": "../data/material/customization/how-to-customize/demos/dev-tools/index.ts"}}
 
 :::warning
 These class names can't be used as CSS selectors because they are unstable.
@@ -141,7 +141,7 @@ Never apply styles directly to state class names. This will impact all component
 
 To reuse the same overrides in different locations across your application, create a reusable component using the [`styled()`](/system/styled/) utility:
 
-{{"demo": "StyledCustomization.js", "defaultCodeOpen": true}}
+{{"component": "../data/material/customization/how-to-customize/demos/styled-customization/index.ts", "defaultCodeOpen": true}}
 
 ### Dynamic overrides
 
@@ -154,7 +154,7 @@ You can do this with **dynamic CSS** or **CSS variables**.
 If you are using TypeScript, you will need to update the prop's types of the new component.
 :::
 
-{{"demo": "DynamicCSS.js", "defaultCodeOpen": false}}
+{{"component": "../data/material/customization/how-to-customize/demos/dynamic-css/index.ts", "defaultCodeOpen": false}}
 
 ```tsx
 import * as React from 'react';
@@ -177,7 +177,7 @@ const StyledSlider = styled(Slider, {
 
 #### CSS variables
 
-{{"demo": "DynamicCSSVariables.js"}}
+{{"component": "../data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts"}}
 
 ## 3. Global theme overrides
 
@@ -189,19 +189,19 @@ Visit the [Component theming customization](/material-ui/customization/theme-com
 To add global baseline styles for some of the HTML elements, use the `GlobalStyles` component.
 Here is an example of how you can override styles for the `h1` elements:
 
-{{"demo": "GlobalCssOverride.js", "iframe": true, "height": 100}}
+{{"component": "../data/material/customization/how-to-customize/demos/global-css-override/index.ts", "iframe": true, "height": 100}}
 
 The `styles` prop in the `GlobalStyles` component supports a callback in case you need to access the theme.
 
-{{"demo": "GlobalCssOverrideTheme.js", "iframe": true, "height": 100}}
+{{"component": "../data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts", "iframe": true, "height": 100}}
 
 If you are already using the [CssBaseline](/material-ui/react-css-baseline/) component for setting baseline styles, you can also add these global styles as overrides for this component. Here is how you can achieve the same by using this approach.
 
-{{"demo": "OverrideCssBaseline.js", "iframe": true, "height": 100}}
+{{"component": "../data/material/customization/how-to-customize/demos/override-css-baseline/index.ts", "iframe": true, "height": 100}}
 
 The `styleOverrides` key in the `MuiCssBaseline` component slot also supports callback from which you can access the theme. Here is how you can achieve the same by using this approach.
 
-{{"demo": "OverrideCallbackCssBaseline.js", "iframe": true, "height": 100}}
+{{"component": "../data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts", "iframe": true, "height": 100}}
 
 :::success
 It is a good practice to hoist the `` to a static constant, to avoid rerendering. This will ensure that the `