diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef08698c79cdc7..69c472c2d482d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,35 +10,36 @@ A big thanks to the 11 contributors who made this release possible. This release
 
 ### `@mui/material@5.14.7`
 
-- &#8203;<!-- 17 -->[Autocomplete] Fix listbox opened unexpectedly when component is `disabled` (#38611) @mj12albert
-- &#8203;<!-- 03 -->[Select][material-ui] Fix select menu moving on scroll when disableScrollLock is true (#37773) @VishruthR
+- [Autocomplete] Fix listbox opened unexpectedly when component is `disabled` (#38611) @mj12albert
+- [Select][material-ui] Fix select menu moving on scroll when disableScrollLock is true (#37773) @VishruthR
 
 ### `@mui/base@5.0.0-beta.13`
 
-- &#8203;<!-- 16 -->[useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai
+- [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai
 
 ### `@mui/zero-runtime@0.0.1-alpha.1`
 
-- &#8203;<!-- 02 -->[system][zero][tag] Add support for sx prop (#38535) @brijeshb42
+- [system][zero][tag] Add support for sx prop (#38535) @brijeshb42
 
 ### Docs
 
-- &#8203;<!-- 10 -->[docs] Number Input docs fixes (#38521) @mj12albert
-- &#8203;<!-- 09 -->[docs] Show all the code in the usage section (#38691) @oliviertassinari
-- &#8203;<!-- 06 -->[docs][joy-ui] Change the customization and how-to guides docs tree (#38396) @danilo-leal
-- &#8203;<!-- 05 -->[docs][lab][LoadingButton] Improve `loading` prop documentation (#38625) @sai6855
-- &#8203;<!-- 04 -->[docs][material-ui] Format `key` prop JSDoc description in `Snackbar` component code correctly (#38603) @jaydenseric
+- [docs] Number Input docs fixes (#38521) @mj12albert
+- [docs] Show all the code in the usage section (#38691) @oliviertassinari
+- [docs][joy-ui] Change the customization and how-to guides docs tree (#38396) @danilo-leal
+- [docs][lab][LoadingButton] Improve `loading` prop documentation (#38625) @sai6855
+- [docs][material-ui] Format `key` prop JSDoc description in `Snackbar` component code correctly (#38603) @jaydenseric
 
 ### Core
 
-- &#8203;<!-- 15 -->[core] Add use-client to custom icons (#38132) @mj12albert
-- &#8203;<!-- 14 -->[core] Remove unnecessary `@types/jsdom` (#38657) @renovate[bot]
-- &#8203;<!-- 13 -->[core] Improve sponsors GA labels (#38649) @oliviertassinari
-- &#8203;<!-- 12 -->[core] Fix ESM issues with regression tests (#37963) @Janpot
-- &#8203;<!-- 11 -->[core] Potential fix for intermittent ci crashes in e2e test (#38614) @Janpot
-- &#8203;<!-- 08 -->[docs-infra] Adjust the Material You playground demo design (#38636) @danilo-leal
-- &#8203;<!-- 07 -->[docs-infra] Hide the SkipLink button if user prefers reduced motion (#38632) @DerTimonius
-- &#8203;<!-- 01 -->[website] Add tiny fixes the homepage Sponsors section (#38635) @danilo-leal
+- [core] Add use-client to custom icons (#38132) @mj12albert
+- [core] Remove unnecessary `@types/jsdom` (#38657) @renovate[bot]
+- [core] Improve sponsors GA labels (#38649) @oliviertassinari
+- [core] Fix ESM issues with regression tests (#37963) @Janpot
+- [core] Potential fix for intermittent ci crashes in e2e test (#38614) @Janpot
+- [docs-infra] Mark unstable components with a chip in the nav drawer (#38573) @michaldudak
+- [docs-infra] Adjust the Material You playground demo design (#38636) @danilo-leal
+- [docs-infra] Hide the SkipLink button if user prefers reduced motion (#38632) @DerTimonius
+- [website] Add tiny fixes the homepage Sponsors section (#38635) @danilo-leal
 
 All contributors of this release in alphabetical order: @brijeshb42, @danilo-leal, @DerTimonius, @DiegoAndai, @Janpot, @jaydenseric, @mj12albert, @oliviertassinari, @renovate[bot], @sai6855, @VishruthR
 
diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
index e0185c8ee8cebd..ecf77e777d7cf2 100644
--- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
+++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
@@ -58,7 +58,7 @@ const Player = React.forwardRef(function Player(
       <div className="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
         <div className="flex items-center space-x-4">
           <img
-            src="https://tailwindcss.com/_next/static/media/full-stack-radio.485d0b2c6e3aa1cacc6b50e462cd3675.png"
+            src="https://mui.com/static/base-ui/with-tailwind-css/full-stack-radio.png"
             alt=""
             width="88"
             height="88"
diff --git a/docs/data/joy/components/alert/AlertUsage.js b/docs/data/joy/components/alert/AlertUsage.js
index 4df19557f68e39..eb33a6de54663a 100644
--- a/docs/data/joy/components/alert/AlertUsage.js
+++ b/docs/data/joy/components/alert/AlertUsage.js
@@ -10,7 +10,7 @@ export default function AlertUsage() {
         {
           propName: 'variant',
           knob: 'radio',
-          defaultValue: 'outlined',
+          defaultValue: 'soft',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js
index a7ff812c6b4fbd..c4b3aee4a9f9fc 100644
--- a/docs/data/joy/components/card/BasicCard.js
+++ b/docs/data/joy/components/card/BasicCard.js
@@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ width: 320 }}>
+    <Card sx={{ width: 320 }}>
       <div>
         <Typography level="title-lg">Yosemite National Park</Typography>
         <Typography level="body-sm">April 24 to May 02, 2021</Typography>
diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx
index a7ff812c6b4fbd..c4b3aee4a9f9fc 100644
--- a/docs/data/joy/components/card/BasicCard.tsx
+++ b/docs/data/joy/components/card/BasicCard.tsx
@@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ width: 320 }}>
+    <Card sx={{ width: 320 }}>
       <div>
         <Typography level="title-lg">Yosemite National Park</Typography>
         <Typography level="body-sm">April 24 to May 02, 2021</Typography>
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
index ba42e3bf0d369f..e1e51637bc1a42 100644
--- a/docs/data/joy/components/card/CardUsage.js
+++ b/docs/data/joy/components/card/CardUsage.js
@@ -14,7 +14,7 @@ export default function CardUsage() {
         {
           propName: 'variant',
           knob: 'radio',
-          defaultValue: 'plain',
+          defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
diff --git a/docs/data/joy/components/card/CardVariants.js b/docs/data/joy/components/card/CardVariants.js
index 7c6ff6f75257bf..bcd703f82efde8 100644
--- a/docs/data/joy/components/card/CardVariants.js
+++ b/docs/data/joy/components/card/CardVariants.js
@@ -15,16 +15,16 @@ export default function CardVariants() {
         gap: 2,
       }}
     >
-      <Card>
+      <Card variant="plain">
         <CardContent>
-          <Typography level="title-md">Plain card (default)</Typography>
+          <Typography level="title-md">Plain card</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
 
       <Card variant="outlined">
         <CardContent>
-          <Typography level="title-md">Outlined card</Typography>
+          <Typography level="title-md">Outlined card (default)</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
diff --git a/docs/data/joy/components/card/CardVariants.tsx b/docs/data/joy/components/card/CardVariants.tsx
index 7c6ff6f75257bf..bcd703f82efde8 100644
--- a/docs/data/joy/components/card/CardVariants.tsx
+++ b/docs/data/joy/components/card/CardVariants.tsx
@@ -15,16 +15,16 @@ export default function CardVariants() {
         gap: 2,
       }}
     >
-      <Card>
+      <Card variant="plain">
         <CardContent>
-          <Typography level="title-md">Plain card (default)</Typography>
+          <Typography level="title-md">Plain card</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
 
       <Card variant="outlined">
         <CardContent>
-          <Typography level="title-md">Outlined card</Typography>
+          <Typography level="title-md">Outlined card (default)</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
index 2d0b1466e393a5..74469d2d3c7433 100644
--- a/docs/data/joy/components/card/DribbbleShot.js
+++ b/docs/data/joy/components/card/DribbbleShot.js
@@ -15,11 +15,11 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder';
 export default function DribbbleShot() {
   return (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',
-        boxShadow: 'none',
-        '--Card-padding': '0px',
+        p: 0,
       }}
     >
       <Box sx={{ position: 'relative' }}>
diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
index 2d0b1466e393a5..74469d2d3c7433 100644
--- a/docs/data/joy/components/card/DribbbleShot.tsx
+++ b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -15,11 +15,11 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder';
 export default function DribbbleShot() {
   return (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',
-        boxShadow: 'none',
-        '--Card-padding': '0px',
+        p: 0,
       }}
     >
       <Box sx={{ position: 'relative' }}>
diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md
index dbeb0e268ce96f..babbc07ea25f8e 100644
--- a/docs/data/joy/components/card/card.md
+++ b/docs/data/joy/components/card/card.md
@@ -36,7 +36,7 @@ The demo below shows a typical Card that groups together Typography, Aspect Rati
 
 ### Variants
 
-The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain` (default), `outlined`, `soft`, and `solid`.
+The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`.
 
 {{"demo": "CardVariants.js"}}
 
diff --git a/docs/data/material/components/transitions/SimpleSlide.js b/docs/data/material/components/transitions/SimpleSlide.js
index eeebb1168de61e..826ac7fc8107f5 100644
--- a/docs/data/material/components/transitions/SimpleSlide.js
+++ b/docs/data/material/components/transitions/SimpleSlide.js
@@ -30,7 +30,7 @@ export default function SimpleSlide() {
 
   return (
     <Box sx={{ height: 180 }}>
-      <Box sx={{ width: `calc(100px + 16px)` }}>
+      <Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show"
diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx b/docs/data/material/components/transitions/SimpleSlide.tsx
index d7f5fc3a5a5443..9fea19c6f4aaeb 100644
--- a/docs/data/material/components/transitions/SimpleSlide.tsx
+++ b/docs/data/material/components/transitions/SimpleSlide.tsx
@@ -31,7 +31,7 @@ export default function SimpleSlide() {
 
   return (
     <Box sx={{ height: 180 }}>
-      <Box sx={{ width: `calc(100px + 16px)` }}>
+      <Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show"
diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx.preview b/docs/data/material/components/transitions/SimpleSlide.tsx.preview
index c8c3c973784632..84ddd387a94c08 100644
--- a/docs/data/material/components/transitions/SimpleSlide.tsx.preview
+++ b/docs/data/material/components/transitions/SimpleSlide.tsx.preview
@@ -1,4 +1,4 @@
-<Box sx={{ width: `calc(100px + 16px)` }}>
+<Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
   <FormControlLabel
     control={<Switch checked={checked} onChange={handleChange} />}
     label="Show"
diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md
index a9283c73d6e6d5..f1f9e62e69760a 100644
--- a/docs/data/material/guides/server-rendering/server-rendering.md
+++ b/docs/data/material/guides/server-rendering/server-rendering.md
@@ -220,12 +220,5 @@ ReactDOM.hydrate(<Main />, document.querySelector('#root'));
 
 ## Reference implementations
 
-We host different reference implementations which you can find in the [GitHub repository](https://github.com/mui/material-ui) under the [`/examples`](https://github.com/mui/material-ui/tree/HEAD/examples) folder:
-
-- [The reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-express-ssr)
-- [Gatsby](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-gatsby)
-- [Next.js](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-ts))
-
-## Troubleshooting
-
-Check out the FAQ answer: [My App doesn't render correctly on the server](/material-ui/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
+Here is [the reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-express-ssr).
+You can more SSR implementations in the GitHub repository under the `/examples` folder, see [the other examples](/material-ui/getting-started/example-projects/).
diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md
index 2e671da94c96e2..5f8b47f923f74a 100644
--- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md
+++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md
@@ -22,7 +22,6 @@ The following is an up-to-date list of `@mui` public packages.
 - `@mui/system`
 - `@mui/styled-engine`
 - `@mui/styled-engine-sc`
-- `@mui/styles`
 
 ### Understanding MUI's products
 
diff --git a/docs/pages/joy-ui/api/alert.json b/docs/pages/joy-ui/api/alert.json
index 572c2b95d75574..95451d45c2f00a 100644
--- a/docs/pages/joy-ui/api/alert.json
+++ b/docs/pages/joy-ui/api/alert.json
@@ -48,7 +48,7 @@
         "name": "union",
         "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
-      "default": "'outlined'",
+      "default": "'soft'",
       "additionalInfo": { "joy-variant": true }
     }
   },
diff --git a/docs/pages/joy-ui/api/card.json b/docs/pages/joy-ui/api/card.json
index d7f69219f122e8..e9fb4bd31addfa 100644
--- a/docs/pages/joy-ui/api/card.json
+++ b/docs/pages/joy-ui/api/card.json
@@ -44,7 +44,7 @@
         "name": "union",
         "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
-      "default": "'plain'",
+      "default": "'outlined'",
       "additionalInfo": { "joy-variant": true }
     }
   },
diff --git a/docs/pages/material-ui/api/radio.json b/docs/pages/material-ui/api/radio.json
index c6cc33f43ae4b1..877319f68f74fc 100644
--- a/docs/pages/material-ui/api/radio.json
+++ b/docs/pages/material-ui/api/radio.json
@@ -44,7 +44,7 @@
   "name": "Radio",
   "imports": ["import Radio from '@mui/material/Radio';", "import { Radio } from '@mui/material';"],
   "styles": {
-    "classes": ["root", "checked", "disabled", "colorPrimary", "colorSecondary"],
+    "classes": ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"],
     "globalClasses": { "checked": "Mui-checked", "disabled": "Mui-disabled" },
     "name": "MuiRadio"
   },
diff --git a/docs/public/static/base-ui/with-tailwind-css/full-stack-radio.png b/docs/public/static/base-ui/with-tailwind-css/full-stack-radio.png
new file mode 100644
index 00000000000000..68901c77e149c2
Binary files /dev/null and b/docs/public/static/base-ui/with-tailwind-css/full-stack-radio.png differ
diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
index 6caaa932e96d5a..41cbf6cb6cd67d 100644
--- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx
+++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -44,7 +44,7 @@ const StyledTab = styled(Tab)<{ ownerState: { mounted: boolean } }>(({ theme, ow
     cursor: 'pointer',
     borderRadius: '8px',
     position: 'relative',
-    '&:not(:first-child)': {
+    '&:not(:first-of-type)': {
       marginLeft: 0.5,
     },
     ...(ownerState.mounted && {
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index e2787b7498da2b..e85b51473d8ced 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -281,12 +281,19 @@ const Root = styled('div')(
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
       }px)`,
       '& .MuiCallout-content': {
+        minWidth: 0, // Allows content to shrink. Useful when callout contains code block
         display: 'flex',
         flexDirection: 'column',
         gap: 6,
         '&>p, ul': {
           marginBottom: 0,
         },
+        '& .MuiCode-root': {
+          '&>pre': {
+            margin: 0,
+            marginTop: 4,
+          },
+        },
         '&>ul': {
           paddingLeft: 22,
         },
@@ -448,9 +455,8 @@ const Root = styled('div')(
       fontWeight: 500,
       borderRadius: 6,
       border: 'none',
-      backgroundColor: 'transparent',
+      backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
       color: '#FFF',
-      opacity: 0.6,
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
       }),
@@ -463,12 +469,15 @@ const Root = styled('div')(
         flexShrink: 0,
         fontSize: '18px',
         margin: 'auto',
+        opacity: 0.6,
       },
       '& .MuiCode-copied-icon': {
         display: 'none',
       },
       '&:hover, &:focus': {
-        opacity: 1,
+        '& svg': {
+          opacity: 1,
+        },
         backgroundColor: lightTheme.palette.primaryDark[500],
         '& .MuiCode-copyKeypress': {
           display: 'block',
diff --git a/docs/translations/api-docs/radio/radio.json b/docs/translations/api-docs/radio/radio.json
index 665544d31ffb21..ea4e514bb7ae6b 100644
--- a/docs/translations/api-docs/radio/radio.json
+++ b/docs/translations/api-docs/radio/radio.json
@@ -54,6 +54,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
     }
   }
 }
diff --git a/package.json b/package.json
index d98bb18a8da52f..241bf020320f85 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,6 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/sinon": "^10.0.16",
     "@types/stylis": "^4.2.0",
-    "@types/webpack": "^5.28.1",
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
index 0d73e4ed0bd107..164dbd478a2bde 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -186,7 +186,18 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   };
 
   React.useEffect(() => {
-    const handleResize = debounce(() => {
+    const handleResize = () => {
+      renders.current = 0;
+
+      // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/32640
+      if (inputRef.current) {
+        syncHeightWithFlushSync();
+      }
+    };
+    const handleResizeWindow = debounce(() => {
       renders.current = 0;
 
       // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
@@ -202,7 +213,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     const input = inputRef.current!;
     const containerWindow = ownerWindow(input);
 
-    containerWindow.addEventListener('resize', handleResize);
+    containerWindow.addEventListener('resize', handleResizeWindow);
 
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
@@ -210,8 +221,8 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     }
 
     return () => {
-      handleResize.clear();
-      containerWindow.removeEventListener('resize', handleResize);
+      handleResizeWindow.clear();
+      containerWindow.removeEventListener('resize', handleResizeWindow);
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
diff --git a/packages/mui-icons-material/builder.mjs b/packages/mui-icons-material/builder.mjs
index d9b389575db4c4..536c23339a9bfa 100755
--- a/packages/mui-icons-material/builder.mjs
+++ b/packages/mui-icons-material/builder.mjs
@@ -1,6 +1,6 @@
+import path from 'path';
 import fse from 'fs-extra';
 import yargs from 'yargs';
-import path from 'path';
 import { rimrafSync } from 'rimraf';
 import Mustache from 'mustache';
 import globAsync from 'fast-glob';
@@ -114,7 +114,7 @@ export function cleanPaths({ svgPath, data }) {
         },
       },
       { name: 'removeUnusedNS' },
-      { name: 'cleanupIDs' },
+      { name: 'cleanupIds' },
       { name: 'cleanupNumericValues' },
       { name: 'cleanupListOfValues' },
       { name: 'moveElemsAttrsToGroup' },
@@ -138,7 +138,6 @@ export function cleanPaths({ svgPath, data }) {
     plugins: [
       {
         name: 'svgAsReactFragment',
-        type: 'visitor',
         fn: () => {
           return {
             root: {
@@ -154,14 +153,15 @@ export function cleanPaths({ svgPath, data }) {
                 if (svg.children.length > 1) {
                   childrenAsArray = true;
                   svg.children.forEach((svgChild, index) => {
-                    svgChild.addAttr({ name: 'key', value: index });
+                    svgChild.attributes.key = index;
                     // Original name will be restored later
                     // We just need a mechanism to convert the resulting
                     // svg string into an array of JSX elements
-                    svgChild.renameElem(`SVGChild:${svgChild.name}`);
+                    svgChild.name = `SVGChild:${svgChild.name}`;
                   });
                 }
-                root.spliceContent(0, svg.children.length, svg.children);
+
+                root.children = svg.children;
               },
             },
           };
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
index 875551f4f376e0..42a24787175b2a 100644
--- a/packages/mui-icons-material/package.json
+++ b/packages/mui-icons-material/package.json
@@ -62,7 +62,7 @@
     "fs-extra": "^11.1.1",
     "mustache": "^4.2.0",
     "shx": "^0.3.4",
-    "svgo": "^2.8.0",
+    "svgo": "^3.0.2",
     "yargs": "^17.7.2"
   },
   "sideEffects": false,
diff --git a/packages/mui-joy/src/Alert/Alert.test.tsx b/packages/mui-joy/src/Alert/Alert.test.tsx
index 0ccb30dd20c302..8edc33de165dd9 100644
--- a/packages/mui-joy/src/Alert/Alert.test.tsx
+++ b/packages/mui-joy/src/Alert/Alert.test.tsx
@@ -32,10 +32,10 @@ describe('<Alert />', () => {
     it('soft by default', () => {
       const { getByRole } = render(<Alert />);
 
-      expect(getByRole('alert')).to.have.class(classes.variantOutlined);
+      expect(getByRole('alert')).to.have.class(classes.variantSoft);
     });
 
-    (['plain', 'soft', 'solid'] as const).forEach((variant) => {
+    (['plain', 'outlined', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByRole } = render(<Alert variant={variant} />);
 
diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
index e41e4f121e70da..ae19e140577ce0 100644
--- a/packages/mui-joy/src/Alert/Alert.tsx
+++ b/packages/mui-joy/src/Alert/Alert.tsx
@@ -74,7 +74,6 @@ const AlertRoot = styled('div', {
       alignItems: 'center',
       padding: `var(--Alert-padding)`,
       borderRadius: 'var(--Alert-radius)',
-      boxShadow: theme.vars.shadow.xs,
       ...theme.typography[`body-${({ sm: 'xs', md: 'sm', lg: 'md' } as const)[ownerState.size!]}`],
       fontWeight: theme.vars.fontWeight.md,
       ...theme.variants[ownerState.variant!]?.[ownerState.color!],
@@ -128,7 +127,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
     color: colorProp = 'neutral',
     invertedColors = false,
     role = 'alert',
-    variant = 'outlined',
+    variant = 'soft',
     size = 'md',
     startDecorator,
     endDecorator,
@@ -277,7 +276,7 @@ Alert.propTypes /* remove-proptypes */ = {
   ]),
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
-   * @default 'outlined'
+   * @default 'soft'
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
diff --git a/packages/mui-joy/src/Alert/AlertProps.ts b/packages/mui-joy/src/Alert/AlertProps.ts
index b79749d972e662..8c1364e478f602 100644
--- a/packages/mui-joy/src/Alert/AlertProps.ts
+++ b/packages/mui-joy/src/Alert/AlertProps.ts
@@ -73,7 +73,7 @@ export interface AlertTypeMap<P = {}, D extends React.ElementType = 'div'> {
       sx?: SxProps;
       /**
        * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
-       * @default 'outlined'
+       * @default 'soft'
        */
       variant?: OverridableStringUnion<VariantProp, AlertPropsVariantOverrides>;
     };
diff --git a/packages/mui-joy/src/Card/Card.test.tsx b/packages/mui-joy/src/Card/Card.test.tsx
index a291aeaf112e93..ae773620f6869e 100644
--- a/packages/mui-joy/src/Card/Card.test.tsx
+++ b/packages/mui-joy/src/Card/Card.test.tsx
@@ -29,10 +29,10 @@ describe('<Card />', () => {
   describeJoyColorInversion(<Card />, { muiName: 'JoyCard', classes });
 
   describe('prop: variant', () => {
-    it('plain by default', () => {
+    it('outlined by default', () => {
       const { getByTestId } = render(<Card data-testid="root">Hello World</Card>);
 
-      expect(getByTestId('root')).to.have.class(classes.variantPlain);
+      expect(getByTestId('root')).to.have.class(classes.variantOutlined);
     });
 
     (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => {
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
index c4caf13ebad36a..73607123bf9052 100644
--- a/packages/mui-joy/src/Card/Card.tsx
+++ b/packages/mui-joy/src/Card/Card.tsx
@@ -81,7 +81,6 @@ const CardRoot = styled('div', {
       }),
       padding: 'var(--Card-padding)',
       borderRadius: 'var(--Card-radius)',
-      boxShadow: theme.shadow.sm,
       backgroundColor: theme.vars.palette.background.surface,
       position: 'relative',
       display: 'flex',
@@ -120,7 +119,7 @@ const Card = React.forwardRef(function Card(inProps, ref) {
     component = 'div',
     invertedColors = false,
     size = 'md',
-    variant = 'plain',
+    variant = 'outlined',
     children,
     orientation = 'vertical',
     slots = {},
@@ -259,7 +258,7 @@ Card.propTypes /* remove-proptypes */ = {
   ]),
   /**
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
-   * @default 'plain'
+   * @default 'outlined'
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
diff --git a/packages/mui-joy/src/Card/CardProps.ts b/packages/mui-joy/src/Card/CardProps.ts
index 8c0c2dc9f3420c..1791beee9f6d7b 100644
--- a/packages/mui-joy/src/Card/CardProps.ts
+++ b/packages/mui-joy/src/Card/CardProps.ts
@@ -58,7 +58,7 @@ export interface CardTypeMap<P = {}, D extends React.ElementType = 'div'> {
     sx?: SxProps;
     /**
      * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
-     * @default 'plain'
+     * @default 'outlined'
      */
     variant?: OverridableStringUnion<VariantProp, CardPropsVariantOverrides>;
   } & CardSlotsAndSlotProps;
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index df621f9d7f0817..43e8830d12d2e5 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -84,6 +84,9 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
         '--Button-radius': 'var(--Input-decoratorChildRadius)',
         '--IconButton-radius': 'var(--Input-decoratorChildRadius)',
         boxSizing: 'border-box',
+        ...(ownerState.variant !== 'plain' && {
+          boxShadow: theme.shadow.xs,
+        }),
         minWidth: 0,
         minHeight: 'var(--Input-minHeight)',
         ...(ownerState.fullWidth && {
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index e1c846e70c6e21..8870f2827c8813 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -125,6 +125,9 @@ const SelectRoot = styled('div', {
       '--Button-radius': 'var(--Select-decoratorChildRadius)',
       '--IconButton-radius': 'var(--Select-decoratorChildRadius)',
       boxSizing: 'border-box',
+      ...(ownerState.variant !== 'plain' && {
+        boxShadow: theme.shadow.xs,
+      }),
       minWidth: 0,
       minHeight: 'var(--Select-minHeight)',
       position: 'relative',
diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
index 3a2332e160f697..13cacbdd15eb93 100644
--- a/packages/mui-joy/src/Textarea/Textarea.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -88,6 +88,9 @@ const TextareaRoot = styled('div', {
       '--Button-radius': 'var(--Textarea-decoratorChildRadius)',
       '--IconButton-radius': 'var(--Textarea-decoratorChildRadius)',
       boxSizing: 'border-box',
+      ...(ownerState.variant !== 'plain' && {
+        boxShadow: theme.shadow.xs,
+      }),
       minWidth: 0,
       minHeight: 'var(--Textarea-minHeight)',
       cursor: 'text',
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts
index e32120739a270b..8603a50e117072 100644
--- a/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts
+++ b/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts
@@ -3,55 +3,57 @@ import { OverrideProps } from '@mui/material/OverridableComponent';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 
+export interface LoadingButtonOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonClasses> & {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `loading={true}`. */
+    loading?: string;
+    /** Styles applied to the loadingIndicator element. */
+    loadingIndicator?: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+    loadingIndicatorCenter?: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+    loadingIndicatorStart?: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+    loadingIndicatorEnd?: string;
+    /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+    endIconLoadingEnd?: string;
+    /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+    startIconLoadingStart?: string;
+  };
+  /**
+   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition?: 'start' | 'end' | 'center';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type LoadingButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button',
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonTypeMap<{
-  props: P & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ButtonClasses> & {
-      /** Styles applied to the root element. */
-      root?: string;
-      /** Styles applied to the root element if `loading={true}`. */
-      loading?: string;
-      /** Styles applied to the loadingIndicator element. */
-      loadingIndicator?: string;
-      /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
-      loadingIndicatorCenter?: string;
-      /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
-      loadingIndicatorStart?: string;
-      /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
-      loadingIndicatorEnd?: string;
-      /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
-      endIconLoadingEnd?: string;
-      /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
-      startIconLoadingStart?: string;
-    };
-    /**
-     * If `true`, the loading indicator is shown and the button becomes disabled.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Element placed before the children if the button is in loading state.
-     * The node should contain an element with `role="progressbar"` with an accessible name.
-     * By default we render a `CircularProgress` that is labelled by the button itself.
-     * @default <CircularProgress color="inherit" size={16} />
-     */
-    loadingIndicator?: React.ReactNode;
-    /**
-     * The loading indicator can be positioned on the start, end, or the center of the button.
-     * @default 'center'
-     */
-    loadingPosition?: 'start' | 'end' | 'center';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: D;
+  props: AdditionalProps & LoadingButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
@@ -68,8 +70,8 @@ export type LoadingButtonTypeMap<
 declare const LoadingButton: ExtendButton<LoadingButtonTypeMap>;
 
 export type LoadingButtonProps<
-  D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<LoadingButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<LoadingButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 
 export default LoadingButton;
diff --git a/packages/mui-lab/src/Masonry/Masonry.d.ts b/packages/mui-lab/src/Masonry/Masonry.d.ts
index 2ceb37bca28cdd..7f338898e34051 100644
--- a/packages/mui-lab/src/Masonry/Masonry.d.ts
+++ b/packages/mui-lab/src/Masonry/Masonry.d.ts
@@ -3,44 +3,49 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo
 import { Theme } from '@mui/material/styles';
 import { MasonryClasses } from './masonryClasses';
 
-export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The content of the component.
-     */
-    children: NonNullable<React.ReactNode>;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<MasonryClasses>;
-    /**
-     * Number of columns.
-     * @default 4
-     */
-    columns?: ResponsiveStyleValue<number | string>;
-    /**
-     * The default number of columns of the component. This is provided for server-side rendering.
-     */
-    defaultColumns?: number;
-    /**
-     * The default height of the component in px. This is provided for server-side rendering.
-     */
-    defaultHeight?: number;
-    /**
-     * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
-     */
-    defaultSpacing?: number;
-    /**
-     * Defines the space between children. It is a factor of the theme's spacing.
-     * @default 1
-     */
-    spacing?: ResponsiveStyleValue<number | string>;
-    /**
-     * Allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: D;
+export interface MasonryOwnProps {
+  /**
+   * The content of the component.
+   */
+  children: NonNullable<React.ReactNode>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MasonryClasses>;
+  /**
+   * Number of columns.
+   * @default 4
+   */
+  columns?: ResponsiveStyleValue<number | string>;
+  /**
+   * The default number of columns of the component. This is provided for server-side rendering.
+   */
+  defaultColumns?: number;
+  /**
+   * The default height of the component in px. This is provided for server-side rendering.
+   */
+  defaultHeight?: number;
+  /**
+   * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
+   */
+  defaultSpacing?: number;
+  /**
+   * Defines the space between children. It is a factor of the theme's spacing.
+   * @default 1
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface MasonryTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & MasonryOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
@@ -55,8 +60,8 @@ export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
 declare const Masonry: OverridableComponent<MasonryTypeMap>;
 
 export type MasonryProps<
-  D extends React.ElementType = MasonryTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<MasonryTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = MasonryTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<MasonryTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 
 export default Masonry;
diff --git a/packages/mui-lab/src/TabList/TabList.d.ts b/packages/mui-lab/src/TabList/TabList.d.ts
index 50b89137409906..cf7a6dd2381a44 100644
--- a/packages/mui-lab/src/TabList/TabList.d.ts
+++ b/packages/mui-lab/src/TabList/TabList.d.ts
@@ -3,17 +3,19 @@ import { TabsTypeMap } from '@mui/material/Tabs';
 import { DistributiveOmit } from '@mui/types';
 import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 
+interface TabListOwnProps extends DistributiveOmit<TabsTypeMap['props'], 'children' | 'value'> {
+  /**
+   * A list of `<Tab />` elements.
+   */
+  children?: React.ReactNode;
+}
+
 export interface TabListTypeMap<
-  P = {},
-  D extends React.ElementType = TabsTypeMap['defaultComponent'],
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = TabsTypeMap['defaultComponent'],
 > {
-  props: P & {
-    /**
-     * A list of `<Tab />` elements.
-     */
-    children?: React.ReactNode;
-  } & DistributiveOmit<TabsTypeMap['props'], 'children' | 'value'>;
-  defaultComponent: D;
+  props: AdditionalProps & TabListOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -32,8 +34,8 @@ declare const TabList: OverridableComponent<TabListTypeMap>;
 export type TabListClassKey = keyof NonNullable<TabListTypeMap['props']['classes']>;
 
 export type TabListProps<
-  D extends React.ElementType = TabListTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<TabListTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = TabListTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<TabListTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 
 export default TabList;
diff --git a/packages/mui-material-next/src/Chip/Chip.d.ts b/packages/mui-material-next/src/Chip/Chip.d.ts
index 5c42b0cf2c02d5..6050f86081318b 100644
--- a/packages/mui-material-next/src/Chip/Chip.d.ts
+++ b/packages/mui-material-next/src/Chip/Chip.d.ts
@@ -12,7 +12,7 @@ export interface ChipPropsColorOverrides {}
 
 export interface ChipTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps & {
     /**
@@ -94,7 +94,7 @@ export interface ChipTypeMap<
      */
     variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
   };
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material-next/src/Input/Input.d.ts b/packages/mui-material-next/src/Input/Input.d.ts
index 9f92699c6a06dc..3cc269c639798f 100644
--- a/packages/mui-material-next/src/Input/Input.d.ts
+++ b/packages/mui-material-next/src/Input/Input.d.ts
@@ -203,10 +203,10 @@ export interface InputOwnProps {
 
 export interface InputTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps & InputOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 export type InputProps<
diff --git a/packages/mui-material-next/src/Tab/Tab.d.ts b/packages/mui-material-next/src/Tab/Tab.d.ts
index ccf533f72e1fe2..50dd2de45ddf01 100644
--- a/packages/mui-material-next/src/Tab/Tab.d.ts
+++ b/packages/mui-material-next/src/Tab/Tab.d.ts
@@ -5,59 +5,61 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@mui/material/ButtonB
 import { OverrideProps } from '@mui/material/OverridableComponent';
 import { TabClasses } from './tabClasses';
 
+export interface TabOwnProps {
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabClasses>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * The icon to display.
+   */
+  icon?: string | React.ReactElement;
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition?: 'top' | 'bottom' | 'start' | 'end';
+  /**
+   * The label element.
+   */
+  label?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value?: any;
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped?: boolean;
+}
+
 export type TabTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * This prop isn't supported.
-     * Use the `component` prop if you need to change the children structure.
-     */
-    children?: null;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TabClasses>;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * The icon to display.
-     */
-    icon?: string | React.ReactElement;
-    /**
-     * The position of the icon relative to the label.
-     * @default 'top'
-     */
-    iconPosition?: 'top' | 'bottom' | 'start' | 'end';
-    /**
-     * The label element.
-     */
-    label?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * You can provide your own value. Otherwise, we fallback to the child position index.
-     */
-    value?: any;
-    /**
-     * Tab labels appear in a single row.
-     * They can use a second line if needed.
-     * @default false
-     */
-    wrapped?: boolean;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TabOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material-next/src/TablePagination/TablePagination.d.ts b/packages/mui-material-next/src/TablePagination/TablePagination.d.ts
index d86cbde6daa134..33c27a8c781729 100644
--- a/packages/mui-material-next/src/TablePagination/TablePagination.d.ts
+++ b/packages/mui-material-next/src/TablePagination/TablePagination.d.ts
@@ -38,116 +38,125 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
   showLastButton: boolean;
 }
 
-export interface TablePaginationTypeMap<
-  AdditionalProps,
-  DefaultComponent extends React.ElementType,
-> {
-  props: AdditionalProps &
-    TablePaginationBaseProps & {
-      /**
-       * The component used for displaying the actions.
-       * Either a string to use a HTML element or a component.
-       * @default TablePaginationActions
-       */
-      ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
-      /**
-       * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
-       */
-      backIconButtonProps?: Partial<IconButtonProps>;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<TablePaginationClasses>;
-      /**
-       * The total number of rows.
-       *
-       * To enable server side pagination for an unknown number of items, provide -1.
-       */
-      count: number;
-      /**
-       * Accepts a function which returns a string value that provides a user-friendly name for the current page.
-       * This is important for screen reader users.
-       *
-       * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-       * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
-       * @returns {string}
-       * @default function defaultGetAriaLabel(type) {
-       *   return `Go to ${type} page`;
-       * }
-       */
-      getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
-      /**
-       * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
-       * object.
-       *
-       * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-       * @default function defaultLabelDisplayedRows({ from, to, count }) {
-       *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-       * }
-       */
-      labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
-      /**
-       * Customize the rows per page label.
-       *
-       * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-       * @default 'Rows per page:'
-       */
-      labelRowsPerPage?: React.ReactNode;
-      /**
-       * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
-       */
-      nextIconButtonProps?: Partial<IconButtonProps>;
-      /**
-       * Callback fired when the page is changed.
-       *
-       * @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
-       * @param {number} page The page selected.
-       */
-      onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
-      /**
-       * Callback fired when the number of rows per page is changed.
-       *
-       * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
-       */
-      onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-      /**
-       * The zero-based index of the current page.
-       */
-      page: number;
-      /**
-       * The number of rows per page.
-       *
-       * Set -1 to display all the rows.
-       */
-      rowsPerPage: number;
-      /**
-       * Customizes the options of the rows per page select field. If less than two options are
-       * available, no select field will be displayed.
-       * Use -1 for the value with a custom label to show all the rows.
-       * @default [10, 25, 50, 100]
-       */
-      rowsPerPageOptions?: Array<number | { value: number; label: string }>;
-      /**
-       * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
-       * @default {}
-       */
-      SelectProps?: Partial<SelectProps>;
-      /**
-       * If `true`, show the first-page button.
-       * @default false
-       */
-      showFirstButton?: boolean;
-      /**
-       * If `true`, show the last-page button.
-       * @default false
-       */
-      showLastButton?: boolean;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+/**
+ * This type is kept for compatibility. Use `TablePaginationOwnProps` instead.
+ */
+export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;
+
+export interface TablePaginationOwnProps extends TablePaginationBaseProps {
+  /**
+   * The component used for displaying the actions.
+   * Either a string to use a HTML element or a component.
+   * @default TablePaginationActions
+   */
+  ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
+  /**
+   * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
+   */
+  backIconButtonProps?: Partial<IconButtonProps>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TablePaginationClasses>;
+  /**
+   * The total number of rows.
+   *
+   * To enable server side pagination for an unknown number of items, provide -1.
+   */
+  count: number;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+   * This is important for screen reader users.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
+   * @returns {string}
+   * @default function defaultGetAriaLabel(type) {
+   *   return `Go to ${type} page`;
+   * }
+   */
+  getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
+  /**
+   * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
+   * object.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default function defaultLabelDisplayedRows({ from, to, count }) {
+   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+   * }
+   */
+  labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
+  /**
+   * Customize the rows per page label.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default 'Rows per page:'
+   */
+  labelRowsPerPage?: React.ReactNode;
+  /**
+   * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
+   */
+  nextIconButtonProps?: Partial<IconButtonProps>;
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
+   * @param {number} page The page selected.
+   */
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
+  /**
+   * Callback fired when the number of rows per page is changed.
+   *
+   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
+   */
+  onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  /**
+   * The zero-based index of the current page.
+   */
+  page: number;
+  /**
+   * The number of rows per page.
+   *
+   * Set -1 to display all the rows.
+   */
+  rowsPerPage: number;
+  /**
+   * Customizes the options of the rows per page select field. If less than two options are
+   * available, no select field will be displayed.
+   * Use -1 for the value with a custom label to show all the rows.
+   * @default [10, 25, 50, 100]
+   */
+  rowsPerPageOptions?: Array<
+    | number
+    | {
+        value: number;
+        label: string;
+      }
+  >;
+  /**
+   * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
+   * @default {}
+   */
+  SelectProps?: Partial<SelectProps>;
+  /**
+   * If `true`, show the first-page button.
+   * @default false
+   */
+  showFirstButton?: boolean;
+  /**
+   * If `true`, show the last-page button.
+   * @default false
+   */
+  showLastButton?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface TablePaginationTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & TablePaginationOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -166,8 +175,6 @@ declare const TablePagination: OverridableComponent<
   TablePaginationTypeMap<{}, React.JSXElementConstructor<TablePaginationBaseProps>>
 >;
 
-export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;
-
 export type TablePaginationProps<
   RootComponent extends React.ElementType = React.JSXElementConstructor<TablePaginationBaseProps>,
   AdditionalProps = {},
diff --git a/packages/mui-material-next/src/Tabs/Tabs.d.ts b/packages/mui-material-next/src/Tabs/Tabs.d.ts
index 69c3457f219e51..66150dfa1be10e 100644
--- a/packages/mui-material-next/src/Tabs/Tabs.d.ts
+++ b/packages/mui-material-next/src/Tabs/Tabs.d.ts
@@ -6,130 +6,132 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { TabsClasses } from './tabsClasses';
 
+export interface TabsOwnProps {
+  /**
+   * Callback fired when the component mounts.
+   * This is useful when you want to trigger an action programmatically.
+   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
+   *
+   * @param {object} actions This object contains all possible actions
+   * that can be triggered programmatically.
+   */
+  action?: React.Ref<TabsActions>;
+  /**
+   * If `true`, the scroll buttons aren't forced hidden on mobile.
+   * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
+   * @default false
+   */
+  allowScrollButtonsMobile?: boolean;
+  /**
+   * The label for the Tabs as a string.
+   */
+  'aria-label'?: string;
+  /**
+   * An id or list of ids separated by a space that label the Tabs.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * If `true`, the tabs are centered.
+   * This prop is intended for large views.
+   * @default false
+   */
+  centered?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabsClasses>;
+  /**
+   * Determines the color of the indicator.
+   * @default 'primary'
+   */
+  indicatorColor?: 'secondary' | 'primary';
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {any} value We default to the index of the child (number)
+   */
+  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The component used to render the scroll buttons.
+   * @default TabScrollButton
+   */
+  ScrollButtonComponent?: React.ElementType;
+  /**
+   * Determine behavior of scroll buttons when tabs are set to scroll:
+   *
+   * - `auto` will only present them when not all the items are visible.
+   * - `true` will always present them.
+   * - `false` will never present them.
+   *
+   * By default the scroll buttons are hidden on mobile.
+   * This behavior can be disabled with `allowScrollButtonsMobile`.
+   * @default 'auto'
+   */
+  scrollButtons?: 'auto' | true | false;
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus?: boolean;
+  /**
+   * Props applied to the tab indicator element.
+   * @default  {}
+   */
+  TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement>;
+  /**
+   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
+   * @default {}
+   */
+  TabScrollButtonProps?: Partial<TabScrollButtonProps>;
+  /**
+   * Determines the color of the `Tab`.
+   * @default 'primary'
+   */
+  textColor?: 'secondary' | 'primary' | 'inherit';
+  /**
+   * The value of the currently selected `Tab`.
+   * If you don't want any selected `Tab`, you can set this prop to `false`.
+   */
+  value?: any;
+  /**
+   *  Determines additional display behavior of the tabs:
+   *
+   *  - `scrollable` will invoke scrolling properties and allow for horizontally
+   *  scrolling (or swiping) of the tab bar.
+   *  -`fullWidth` will make the tabs grow to use all the available space,
+   *  which should be used for small views, like on mobile.
+   *  - `standard` will render the default state.
+   * @default 'standard'
+   */
+  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  /**
+   * If `true`, the scrollbar is visible. It can be useful when displaying
+   * a long vertical list of tabs.
+   * @default false
+   */
+  visibleScrollbar?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TabsTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = typeof ButtonBase,
+  RootComponent extends React.ElementType = typeof ButtonBase,
 > {
-  props: AdditionalProps & {
-    /**
-     * Callback fired when the component mounts.
-     * This is useful when you want to trigger an action programmatically.
-     * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
-     *
-     * @param {object} actions This object contains all possible actions
-     * that can be triggered programmatically.
-     */
-    action?: React.Ref<TabsActions>;
-    /**
-     * If `true`, the scroll buttons aren't forced hidden on mobile.
-     * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
-     * @default false
-     */
-    allowScrollButtonsMobile?: boolean;
-    /**
-     * The label for the Tabs as a string.
-     */
-    'aria-label'?: string;
-    /**
-     * An id or list of ids separated by a space that label the Tabs.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * If `true`, the tabs are centered.
-     * This prop is intended for large views.
-     * @default false
-     */
-    centered?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TabsClasses>;
-    /**
-     * Determines the color of the indicator.
-     * @default 'primary'
-     */
-    indicatorColor?: 'secondary' | 'primary';
-    /**
-     * Callback fired when the value changes.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {any} value We default to the index of the child (number)
-     */
-    onChange?: (event: React.SyntheticEvent, value: any) => void;
-    /**
-     * The component orientation (layout flow direction).
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The component used to render the scroll buttons.
-     * @default TabScrollButton
-     */
-    ScrollButtonComponent?: React.ElementType;
-    /**
-     * Determine behavior of scroll buttons when tabs are set to scroll:
-     *
-     * - `auto` will only present them when not all the items are visible.
-     * - `true` will always present them.
-     * - `false` will never present them.
-     *
-     * By default the scroll buttons are hidden on mobile.
-     * This behavior can be disabled with `allowScrollButtonsMobile`.
-     * @default 'auto'
-     */
-    scrollButtons?: 'auto' | true | false;
-    /**
-     * If `true` the selected tab changes on focus. Otherwise it only
-     * changes on activation.
-     */
-    selectionFollowsFocus?: boolean;
-    /**
-     * Props applied to the tab indicator element.
-     * @default  {}
-     */
-    TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement>;
-    /**
-     * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
-     * @default {}
-     */
-    TabScrollButtonProps?: Partial<TabScrollButtonProps>;
-    /**
-     * Determines the color of the `Tab`.
-     * @default 'primary'
-     */
-    textColor?: 'secondary' | 'primary' | 'inherit';
-    /**
-     * The value of the currently selected `Tab`.
-     * If you don't want any selected `Tab`, you can set this prop to `false`.
-     */
-    value?: any;
-    /**
-     *  Determines additional display behavior of the tabs:
-     *
-     *  - `scrollable` will invoke scrolling properties and allow for horizontally
-     *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
-     *  which should be used for small views, like on mobile.
-     *  - `standard` will render the default state.
-     * @default 'standard'
-     */
-    variant?: 'standard' | 'scrollable' | 'fullWidth';
-    /**
-     * If `true`, the scrollbar is visible. It can be useful when displaying
-     * a long vertical list of tabs.
-     * @default false
-     */
-    visibleScrollbar?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TabsOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts
index 7d443c40476f5b..ca9becea5b1f40 100644
--- a/packages/mui-material/src/Accordion/Accordion.d.ts
+++ b/packages/mui-material/src/Accordion/Accordion.d.ts
@@ -8,7 +8,7 @@ import { ExtendPaperTypeMap } from '../Paper/Paper';
 
 export type AccordionTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendPaperTypeMap<
   {
     props: AdditionalProps & {
@@ -65,7 +65,7 @@ export type AccordionTypeMap<
        */
       TransitionProps?: TransitionProps;
     };
-    defaultComponent: DefaultComponent;
+    defaultComponent: RootComponent;
   },
   'onChange' | 'classes'
 >;
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts
index c015565cb62e84..daeca9e2d9b184 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts
@@ -5,29 +5,31 @@ import { OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { AccordionSummaryClasses } from './accordionSummaryClasses';
 
+export interface AccordionSummaryOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AccordionSummaryClasses>;
+  /**
+   * The icon to display as the expand indicator.
+   */
+  expandIcon?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type AccordionSummaryTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<AccordionSummaryClasses>;
-    /**
-     * The icon to display as the expand indicator.
-     */
-    expandIcon?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & AccordionSummaryOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/AppBar/AppBar.d.ts b/packages/mui-material/src/AppBar/AppBar.d.ts
index c6bc0104e0ced0..bd4c841ee99ec7 100644
--- a/packages/mui-material/src/AppBar/AppBar.d.ts
+++ b/packages/mui-material/src/AppBar/AppBar.d.ts
@@ -8,41 +8,43 @@ import { ExtendPaperTypeMap } from '../Paper/Paper';
 
 export interface AppBarPropsColorOverrides {}
 
+export interface AppBarOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AppBarClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<PropTypes.Color | 'transparent', AppBarPropsColorOverrides>;
+  /**
+   * If true, the `color` prop is applied in dark mode.
+   * @default false
+   */
+  enableColorOnDark?: boolean;
+  /**
+   * The positioning type. The behavior of the different options is described
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+   * @default 'fixed'
+   */
+  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type AppBarTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'header',
+  RootComponent extends React.ElementType = 'header',
 > = ExtendPaperTypeMap<
   {
-    props: AdditionalProps & {
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<AppBarClasses>;
-      /**
-       * The color of the component.
-       * It supports both default and custom theme colors, which can be added as shown in the
-       * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-       * @default 'primary'
-       */
-      color?: OverridableStringUnion<PropTypes.Color | 'transparent', AppBarPropsColorOverrides>;
-      /**
-       * If true, the `color` prop is applied in dark mode.
-       * @default false
-       */
-      enableColorOnDark?: boolean;
-      /**
-       * The positioning type. The behavior of the different options is described
-       * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
-       * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
-       * @default 'fixed'
-       */
-      position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-    defaultComponent: DefaultComponent;
+    props: AdditionalProps & AppBarOwnProps;
+    defaultComponent: RootComponent;
   },
   'position' | 'color' | 'classes'
 >;
diff --git a/packages/mui-material/src/Avatar/Avatar.d.ts b/packages/mui-material/src/Avatar/Avatar.d.ts
index 2b19c9cb69c307..daa7d9afa74b57 100644
--- a/packages/mui-material/src/Avatar/Avatar.d.ts
+++ b/packages/mui-material/src/Avatar/Avatar.d.ts
@@ -7,59 +7,58 @@ import { AvatarClasses } from './avatarClasses';
 
 export interface AvatarPropsVariantOverrides {}
 
+export interface AvatarOwnProps {
+  /**
+   * Used in combination with `src` or `srcSet` to
+   * provide an alt attribute for the rendered `img` element.
+   */
+  alt?: string;
+  /**
+   * Used to render icon or text elements inside the Avatar if `src` is not set.
+   * This can be an element, or just a string.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AvatarClasses>;
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+   * It can be used to listen for the loading error event.
+   */
+  imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
+    sx?: SxProps<Theme>;
+  };
+  /**
+   * The `sizes` attribute for the `img` element.
+   */
+  sizes?: string;
+  /**
+   * The `src` attribute for the `img` element.
+   */
+  src?: string;
+  /**
+   * The `srcSet` attribute for the `img` element.
+   * Use this attribute for responsive image display.
+   */
+  srcSet?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The shape of the avatar.
+   * @default 'circular'
+   */
+  variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarPropsVariantOverrides>;
+}
+
 export interface AvatarTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Used in combination with `src` or `srcSet` to
-     * provide an alt attribute for the rendered `img` element.
-     */
-    alt?: string;
-    /**
-     * Used to render icon or text elements inside the Avatar if `src` is not set.
-     * This can be an element, or just a string.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<AvatarClasses>;
-    /**
-     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
-     * It can be used to listen for the loading error event.
-     */
-    imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
-      sx?: SxProps<Theme>;
-    };
-    /**
-     * The `sizes` attribute for the `img` element.
-     */
-    sizes?: string;
-    /**
-     * The `src` attribute for the `img` element.
-     */
-    src?: string;
-    /**
-     * The `srcSet` attribute for the `img` element.
-     * Use this attribute for responsive image display.
-     */
-    srcSet?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The shape of the avatar.
-     * @default 'circular'
-     */
-    variant?: OverridableStringUnion<
-      'circular' | 'rounded' | 'square',
-      AvatarPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & AvatarOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts
index 2e0457336f11cb..f383995b8a2cbc 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.d.ts
+++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts
@@ -8,94 +8,96 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BackdropComponentsPropsOverrides {}
 
+export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
+  };
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<BackdropClasses>;
+  /**
+   * If `true`, the backdrop is invisible.
+   * It can be used when rendering a popover or a custom select component.
+   * @default false
+   */
+  invisible?: boolean;
+  /**
+   * If `true`, the component is shown.
+   */
+  open: boolean;
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
+  };
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+  };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration?: TransitionProps['timeout'];
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent?: React.JSXElementConstructor<
+    TransitionProps & {
+      children: React.ReactElement<any, any>;
+    }
+  >;
+}
+
 export interface BackdropTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    Partial<Omit<FadeProps, 'children'>> & {
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * The components used for each slot inside.
-       *
-       * This prop is an alias for the `slots` prop.
-       * It's recommended to use the `slots` prop instead.
-       *
-       * @default {}
-       */
-      components?: {
-        Root?: React.ElementType;
-      };
-      /**
-       * The extra props for the slot components.
-       * You can override the existing props or add new ones.
-       *
-       * This prop is an alias for the `slotProps` prop.
-       * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-       *
-       * @default {}
-       */
-      componentsProps?: {
-        root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
-      };
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<BackdropClasses>;
-      /**
-       * If `true`, the backdrop is invisible.
-       * It can be used when rendering a popover or a custom select component.
-       * @default false
-       */
-      invisible?: boolean;
-      /**
-       * If `true`, the component is shown.
-       */
-      open: boolean;
-      /**
-       * The extra props for the slot components.
-       * You can override the existing props or add new ones.
-       *
-       * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-       *
-       * @default {}
-       */
-      slotProps?: {
-        root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
-      };
-      /**
-       * The components used for each slot inside.
-       *
-       * This prop is an alias for the `components` prop, which will be deprecated in the future.
-       *
-       * @default {}
-       */
-      slots?: {
-        root?: React.ElementType;
-      };
-
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-      /**
-       * The duration for the transition, in milliseconds.
-       * You may specify a single timeout for all transitions, or individually with an object.
-       */
-      transitionDuration?: TransitionProps['timeout'];
-      /**
-       * The component used for the transition.
-       * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-       * @default Fade
-       */
-      TransitionComponent?: React.JSXElementConstructor<
-        TransitionProps & { children: React.ReactElement<any, any> }
-      >;
-    };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & BackdropOwnProps;
+  defaultComponent: RootComponent;
 }
 
 type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts
index 459a138d0ee768..7bd1094e6c8b05 100644
--- a/packages/mui-material/src/Badge/Badge.d.ts
+++ b/packages/mui-material/src/Badge/Badge.d.ts
@@ -147,11 +147,11 @@ export interface BadgeOwnProps {
 }
 
 export interface BadgeTypeMap<
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
   AdditionalProps = {},
 > {
   props: AdditionalProps & BadgeOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 type BadgeRootProps = NonNullable<BadgeTypeMap['props']['slotProps']>['root'];
diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts
index 3cbec3f280a31b..b335e6e536f47e 100644
--- a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts
+++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts
@@ -4,42 +4,44 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BottomNavigationClasses } from './bottomNavigationClasses';
 
+export interface BottomNavigationOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<BottomNavigationClasses>;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {any} value We default to the index of the child.
+   */
+  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  /**
+   * If `true`, all `BottomNavigationAction`s will show their labels.
+   * By default, only the selected `BottomNavigationAction` will show its label.
+   * @default false
+   */
+  showLabels?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The value of the currently selected `BottomNavigationAction`.
+   */
+  value?: any;
+}
+
 export interface BottomNavigationTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<BottomNavigationClasses>;
-    /**
-     * Callback fired when the value changes.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {any} value We default to the index of the child.
-     */
-    onChange?: (event: React.SyntheticEvent, value: any) => void;
-    /**
-     * If `true`, all `BottomNavigationAction`s will show their labels.
-     * By default, only the selected `BottomNavigationAction` will show its label.
-     * @default false
-     */
-    showLabels?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The value of the currently selected `BottomNavigationAction`.
-     */
-    value?: any;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & BottomNavigationOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts
index 08d850dddbece3..7b32550d882e61 100644
--- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts
+++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts
@@ -5,46 +5,48 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '..
 import { OverrideProps } from '../OverridableComponent';
 import { BottomNavigationActionClasses } from './bottomNavigationActionClasses';
 
+export interface BottomNavigationActionOwnProps {
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<BottomNavigationActionClasses>;
+  /**
+   * The icon to display.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The label element.
+   */
+  label?: React.ReactNode;
+  /**
+   * If `true`, the `BottomNavigationAction` will show its label.
+   * By default, only the selected `BottomNavigationAction`
+   * inside `BottomNavigation` will show its label.
+   *
+   * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
+   */
+  showLabel?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value?: any;
+}
+
 export type BottomNavigationActionTypeMap<
   AdditionalProps,
-  DefaultComponent extends React.ElementType,
+  RootComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * This prop isn't supported.
-     * Use the `component` prop if you need to change the children structure.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<BottomNavigationActionClasses>;
-    /**
-     * The icon to display.
-     */
-    icon?: React.ReactNode;
-    /**
-     * The label element.
-     */
-    label?: React.ReactNode;
-    /**
-     * If `true`, the `BottomNavigationAction` will show its label.
-     * By default, only the selected `BottomNavigationAction`
-     * inside `BottomNavigation` will show its label.
-     *
-     * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
-     */
-    showLabel?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * You can provide your own value. Otherwise, we fallback to the child position index.
-     */
-    value?: any;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & BottomNavigationActionOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts
index 9ce23f7a8c06a2..123891f11e4fde 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts
@@ -12,77 +12,79 @@ export interface BreadcrumbsOwnerState extends BreadcrumbsProps {
   expanded: boolean;
 }
 
-export interface BreadcrumbsTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'nav',
-> {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<BreadcrumbsClasses>;
-    /**
-     * The components used for each slot inside the Breadcumb.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots?: {
-      CollapsedIcon?: React.ElementType;
-    };
+export interface BreadcrumbsOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<BreadcrumbsClasses>;
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    CollapsedIcon?: React.ElementType;
+  };
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps?: {
     /**
-     * The props used for each slot inside the Breadcumb.
+     * Props applied to the CollapsedIcon slot.
      * @default {}
      */
-    slotProps?: {
-      /**
-       * Props applied to the CollapsedIcon slot.
-       * @default {}
-       */
-      collapsedIcon?: SlotComponentProps<
-        typeof SvgIcon,
-        BreadcrumbsCollapsedIconSlotPropsOverrides,
-        BreadcrumbsOwnerState
-      >;
-    };
-    /**
-     * Override the default label for the expand button.
-     *
-     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-     * @default 'Show path'
-     */
-    expandText?: string;
-    /**
-     * If max items is exceeded, the number of items to show after the ellipsis.
-     * @default 1
-     */
-    itemsAfterCollapse?: number;
-    /**
-     * If max items is exceeded, the number of items to show before the ellipsis.
-     * @default 1
-     */
-    itemsBeforeCollapse?: number;
-    /**
-     * Specifies the maximum number of breadcrumbs to display. When there are more
-     * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
-     * will be shown, with an ellipsis in between.
-     * @default 8
-     */
-    maxItems?: number;
-    /**
-     * Custom separator node.
-     * @default '/'
-     */
-    separator?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
+    collapsedIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      BreadcrumbsCollapsedIconSlotPropsOverrides,
+      BreadcrumbsOwnerState
+    >;
   };
-  defaultComponent: DefaultComponent;
+  /**
+   * Override the default label for the expand button.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default 'Show path'
+   */
+  expandText?: string;
+  /**
+   * If max items is exceeded, the number of items to show after the ellipsis.
+   * @default 1
+   */
+  itemsAfterCollapse?: number;
+  /**
+   * If max items is exceeded, the number of items to show before the ellipsis.
+   * @default 1
+   */
+  itemsBeforeCollapse?: number;
+  /**
+   * Specifies the maximum number of breadcrumbs to display. When there are more
+   * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
+   * will be shown, with an ellipsis in between.
+   * @default 8
+   */
+  maxItems?: number;
+  /**
+   * Custom separator node.
+   * @default '/'
+   */
+  separator?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface BreadcrumbsTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'nav',
+> {
+  props: AdditionalProps & BreadcrumbsOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts
index 1bd7dd18ece3d6..a3a758f65be1dd 100644
--- a/packages/mui-material/src/Button/Button.d.ts
+++ b/packages/mui-material/src/Button/Button.d.ts
@@ -12,82 +12,81 @@ export interface ButtonPropsColorOverrides {}
 
 export interface ButtonPropsSizeOverrides {}
 
+export interface ButtonOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<
+    'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
+    ButtonPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * Element placed after the children.
+   */
+  endIcon?: React.ReactNode;
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href?: string;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
+  /**
+   * Element placed before the children.
+   */
+  startIcon?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>;
+}
+
 export type ButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ButtonClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<
-      'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
-      ButtonPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, no elevation is used.
-     * @default false
-     */
-    disableElevation?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * Element placed after the children.
-     */
-    endIcon?: React.ReactNode;
-    /**
-     * If `true`, the button will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * The URL to link to when the button is clicked.
-     * If defined, an `a` element will be used as the root node.
-     */
-    href?: string;
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
-    /**
-     * Element placed before the children.
-     */
-    startIcon?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<
-      'text' | 'outlined' | 'contained',
-      ButtonPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
index 6a6c256d87a48d..af1edc9aa88849 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
@@ -5,90 +5,92 @@ import { TouchRippleActions, TouchRippleProps } from './TouchRipple';
 import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 import { ButtonBaseClasses } from './buttonBaseClasses';
 
+export interface ButtonBaseOwnProps {
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action?: React.Ref<ButtonBaseActions>;
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonBaseClasses>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple?: boolean;
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple?: boolean;
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName?: string;
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent?: React.ElementType;
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible?: React.FocusEventHandler<any>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * @default 0
+   */
+  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps?: Partial<TouchRippleProps>;
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef?: React.Ref<TouchRippleActions>;
+}
+
 export interface ButtonBaseTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > {
-  props: AdditionalProps & {
-    /**
-     * A ref for imperative actions.
-     * It currently only supports `focusVisible()` action.
-     */
-    action?: React.Ref<ButtonBaseActions>;
-    /**
-     * If `true`, the ripples are centered.
-     * They won't start at the cursor interaction position.
-     * @default false
-     */
-    centerRipple?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ButtonBaseClasses>;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the ripple effect is disabled.
-     *
-     * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-     * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-     * @default false
-     */
-    disableRipple?: boolean;
-    /**
-     * If `true`, the touch ripple effect is disabled.
-     * @default false
-     */
-    disableTouchRipple?: boolean;
-    /**
-     * If `true`, the base button will have a keyboard focus ripple.
-     * @default false
-     */
-    focusRipple?: boolean;
-    /**
-     * This prop can help identify which element has keyboard focus.
-     * The class name will be applied when the element gains the focus through keyboard interaction.
-     * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-     * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-     * if needed.
-     */
-    focusVisibleClassName?: string;
-    /**
-     * The component used to render a link when the `href` prop is provided.
-     * @default 'a'
-     */
-    LinkComponent?: React.ElementType;
-    /**
-     * Callback fired when the component is focused with a keyboard.
-     * We trigger a `onFocus` callback too.
-     */
-    onFocusVisible?: React.FocusEventHandler<any>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * @default 0
-     */
-    tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
-    /**
-     * Props applied to the `TouchRipple` element.
-     */
-    TouchRippleProps?: Partial<TouchRippleProps>;
-    /**
-     * A ref that points to the `TouchRipple` element.
-     */
-    touchRippleRef?: React.Ref<TouchRippleActions>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ButtonBaseOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts
index 458e7da7204f0b..9cbb6b1b51d3c9 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts
@@ -9,79 +9,81 @@ export interface ButtonGroupPropsColorOverrides {}
 export interface ButtonGroupPropsVariantOverrides {}
 export interface ButtonGroupPropsSizeOverrides {}
 
+export interface ButtonGroupOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ButtonGroupClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<
+    'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    ButtonGroupPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation?: boolean;
+  /**
+   * If `true`, the button keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If `true`, the button ripple effect is disabled.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * If `true`, the buttons will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: OverridableStringUnion<
+    'text' | 'outlined' | 'contained',
+    ButtonGroupPropsVariantOverrides
+  >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ButtonGroupTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ButtonGroupClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<
-      'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      ButtonGroupPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, no elevation is used.
-     * @default false
-     */
-    disableElevation?: boolean;
-    /**
-     * If `true`, the button keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the button ripple effect is disabled.
-     * @default false
-     */
-    disableRipple?: boolean;
-    /**
-     * If `true`, the buttons will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * The component orientation (layout flow direction).
-     * @default 'horizontal'
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>;
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    variant?: OverridableStringUnion<
-      'text' | 'outlined' | 'contained',
-      ButtonGroupPropsVariantOverrides
-    >;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ButtonGroupOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Card/Card.d.ts b/packages/mui-material/src/Card/Card.d.ts
index a061e30d33494b..41d2f725d61c18 100644
--- a/packages/mui-material/src/Card/Card.d.ts
+++ b/packages/mui-material/src/Card/Card.d.ts
@@ -9,27 +9,28 @@ import { CardClasses } from './cardClasses';
 // TODO: v6 remove this interface, it is not used
 export interface CardPropsColorOverrides {}
 
+export interface CardOwnProps extends DistributiveOmit<PaperOwnProps, 'classes'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardClasses>;
+  /**
+   * If `true`, the card will use raised styling.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface CardTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    DistributiveOmit<PaperOwnProps, 'classes'> & {
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<CardClasses>;
-      /**
-       * If `true`, the card will use raised styling.
-       * @default false
-       */
-      raised?: boolean;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & CardOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts
index 3f0cbbb26215ff..40a01c09c76910 100644
--- a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts
+++ b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts
@@ -5,22 +5,24 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '..
 import { OverrideProps } from '../OverridableComponent';
 import { CardActionAreaClasses } from './cardActionAreaClasses';
 
+export interface CardActionAreaOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardActionAreaClasses>;
+  focusVisibleClassName?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type CardActionAreaTypeMap<
   AdditionalProps,
-  DefaultComponent extends React.ElementType,
+  RootComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<CardActionAreaClasses>;
-    focusVisibleClassName?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & CardActionAreaOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/CardContent/CardContent.d.ts b/packages/mui-material/src/CardContent/CardContent.d.ts
index e18c8a5333e731..3792c10c2d0ac5 100644
--- a/packages/mui-material/src/CardContent/CardContent.d.ts
+++ b/packages/mui-material/src/CardContent/CardContent.d.ts
@@ -4,25 +4,27 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { CardContentClasses } from './cardContentClasses';
 
+export interface CardContentOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardContentClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface CardContentTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<CardContentClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & CardContentOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/CardHeader/CardHeader.d.ts b/packages/mui-material/src/CardHeader/CardHeader.d.ts
index ab924b7682f27d..cfa1cfd5942f4a 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.d.ts
+++ b/packages/mui-material/src/CardHeader/CardHeader.d.ts
@@ -5,63 +5,73 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { CardHeaderClasses } from './cardHeaderClasses';
 
+export interface CardHeaderOwnProps<
+  TitleTypographyComponent extends React.ElementType = 'span',
+  SubheaderTypographyComponent extends React.ElementType = 'span',
+> {
+  /**
+   * The action to display in the card header.
+   */
+  action?: React.ReactNode;
+  /**
+   * The Avatar element to display.
+   */
+  avatar?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardHeaderClasses>;
+  /**
+   * If `true`, `subheader` and `title` won't be wrapped by a Typography component.
+   * This can be useful to render an alternative Typography variant by wrapping
+   * the `title` text, and optional `subheader` text
+   * with the Typography component.
+   * @default false
+   */
+  disableTypography?: boolean;
+  /**
+   * The content of the component.
+   */
+  subheader?: React.ReactNode;
+  /**
+   * These props will be forwarded to the subheader
+   * (as long as disableTypography is not `true`).
+   */
+  subheaderTypographyProps?: TypographyProps<
+    SubheaderTypographyComponent,
+    {
+      component?: SubheaderTypographyComponent;
+    }
+  >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The content of the component.
+   */
+  title?: React.ReactNode;
+  /**
+   * These props will be forwarded to the title
+   * (as long as disableTypography is not `true`).
+   */
+  titleTypographyProps?: TypographyProps<
+    TitleTypographyComponent,
+    {
+      component?: TitleTypographyComponent;
+    }
+  >;
+}
+
 export interface CardHeaderTypeMap<
-  Props = {},
-  DefaultComponent extends React.ElementType = 'div',
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
   TitleTypographyComponent extends React.ElementType = 'span',
   SubheaderTypographyComponent extends React.ElementType = 'span',
 > {
-  props: Props & {
-    /**
-     * The action to display in the card header.
-     */
-    action?: React.ReactNode;
-    /**
-     * The Avatar element to display.
-     */
-    avatar?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<CardHeaderClasses>;
-    /**
-     * If `true`, `subheader` and `title` won't be wrapped by a Typography component.
-     * This can be useful to render an alternative Typography variant by wrapping
-     * the `title` text, and optional `subheader` text
-     * with the Typography component.
-     * @default false
-     */
-    disableTypography?: boolean;
-    /**
-     * The content of the component.
-     */
-    subheader?: React.ReactNode;
-    /**
-     * These props will be forwarded to the subheader
-     * (as long as disableTypography is not `true`).
-     */
-    subheaderTypographyProps?: TypographyProps<
-      SubheaderTypographyComponent,
-      { component?: SubheaderTypographyComponent }
-    >;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The content of the component.
-     */
-    title?: React.ReactNode;
-    /**
-     * These props will be forwarded to the title
-     * (as long as disableTypography is not `true`).
-     */
-    titleTypographyProps?: TypographyProps<
-      TitleTypographyComponent,
-      { component?: TitleTypographyComponent }
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps &
+    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent>;
+  defaultComponent: RootComponent;
 }
 /**
  *
@@ -77,14 +87,14 @@ declare const CardHeader: OverridableCardHeader;
 
 export interface OverridableCardHeader extends OverridableComponent<CardHeaderTypeMap> {
   <
-    DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
-    Props = {},
+    RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
+    AdditionalProps = {},
     TitleTypographyComponent extends React.ElementType = 'span',
     SubheaderTypographyComponent extends React.ElementType = 'span',
   >(
     props: CardHeaderPropsWithComponent<
-      DefaultComponent,
-      Props,
+      RootComponent,
+      AdditionalProps,
       TitleTypographyComponent,
       SubheaderTypographyComponent
     >,
@@ -92,23 +102,23 @@ export interface OverridableCardHeader extends OverridableComponent<CardHeaderTy
 }
 
 export type CardHeaderProps<
-  DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
-  Props = {},
+  RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
+  AdditionalProps = {},
   TitleTypographyComponent extends React.ElementType = 'span',
   SubheaderTypographyComponent extends React.ElementType = 'span',
 > = OverrideProps<
   CardHeaderTypeMap<
-    Props,
-    DefaultComponent,
+    AdditionalProps,
+    RootComponent,
     TitleTypographyComponent,
     SubheaderTypographyComponent
   >,
-  DefaultComponent
+  RootComponent
 >;
 
 export type CardHeaderPropsWithComponent<
-  DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
-  Props = {},
+  RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
+  AdditionalProps = {},
   TitleTypographyComponent extends React.ElementType = 'span',
   SubheaderTypographyComponent extends React.ElementType = 'span',
 > = {
@@ -116,10 +126,10 @@ export type CardHeaderPropsWithComponent<
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component?: DefaultComponent;
+  component?: RootComponent;
 } & CardHeaderProps<
-  DefaultComponent,
-  Props,
+  RootComponent,
+  AdditionalProps,
   TitleTypographyComponent,
   SubheaderTypographyComponent
 >;
diff --git a/packages/mui-material/src/CardMedia/CardMedia.d.ts b/packages/mui-material/src/CardMedia/CardMedia.d.ts
index f776c1bfa07aaf..59d56b2cfd5081 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.d.ts
+++ b/packages/mui-material/src/CardMedia/CardMedia.d.ts
@@ -4,34 +4,36 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { CardMediaClasses } from './cardMediaClasses';
 
-export interface CardMediaTypeMap<AdditionalProps, DefaultComponent extends React.ElementType> {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<CardMediaClasses>;
-    /**
-     * Image to be displayed as a background image.
-     * Either `image` or `src` prop must be specified.
-     * Note that caller must specify height otherwise the image will not be visible.
-     */
-    image?: string;
-    /**
-     * An alias for `image` property.
-     * Available only with media components.
-     * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
-     */
-    src?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+export interface CardMediaOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardMediaClasses>;
+  /**
+   * Image to be displayed as a background image.
+   * Either `image` or `src` prop must be specified.
+   * Note that caller must specify height otherwise the image will not be visible.
+   */
+  image?: string;
+  /**
+   * An alias for `image` property.
+   * Available only with media components.
+   * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
+   */
+  src?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface CardMediaTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & CardMediaOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Chip/Chip.d.ts b/packages/mui-material/src/Chip/Chip.d.ts
index 686b395cf3058b..ddb1241accf9e9 100644
--- a/packages/mui-material/src/Chip/Chip.d.ts
+++ b/packages/mui-material/src/Chip/Chip.d.ts
@@ -11,91 +11,93 @@ export interface ChipPropsSizeOverrides {}
 
 export interface ChipPropsColorOverrides {}
 
+export interface ChipOwnProps {
+  /**
+   * The Avatar element to display.
+   */
+  avatar?: React.ReactElement;
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChipClasses>;
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable?: boolean;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'default'
+   */
+  color?: OverridableStringUnion<
+    'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    ChipPropsColorOverrides
+  >;
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon?: React.ReactElement;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon element.
+   */
+  icon?: React.ReactElement;
+  /**
+   * The content of the component.
+   */
+  label?: React.ReactNode;
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete?: React.EventHandler<any>;
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   *  @ignore
+   */
+  tabIndex?: number;
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
+}
+
 export interface ChipTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The Avatar element to display.
-     */
-    avatar?: React.ReactElement;
-    /**
-     * This prop isn't supported.
-     * Use the `component` prop if you need to change the children structure.
-     */
-    children?: null;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ChipClasses>;
-    /**
-     * If `true`, the chip will appear clickable, and will raise when pressed,
-     * even if the onClick prop is not defined.
-     * If `false`, the chip will not appear clickable, even if onClick prop is defined.
-     * This can be used, for example,
-     * along with the component prop to indicate an anchor Chip is clickable.
-     * Note: this controls the UI and does not affect the onClick event.
-     */
-    clickable?: boolean;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'default'
-     */
-    color?: OverridableStringUnion<
-      'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      ChipPropsColorOverrides
-    >;
-    /**
-     * Override the default delete icon element. Shown only if `onDelete` is set.
-     */
-    deleteIcon?: React.ReactElement;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Icon element.
-     */
-    icon?: React.ReactElement;
-    /**
-     * The content of the component.
-     */
-    label?: React.ReactNode;
-    /**
-     * Callback fired when the delete icon is clicked.
-     * If set, the delete icon will be shown.
-     */
-    onDelete?: React.EventHandler<any>;
-    /**
-     * The size of the component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
-    /**
-     * If `true`, allows the disabled chip to escape focus.
-     * If `false`, allows the disabled chip to receive focus.
-     * @default false
-     */
-    skipFocusWhenDisabled?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     *  @ignore
-     */
-    tabIndex?: number;
-    /**
-     * The variant to use.
-     * @default 'filled'
-     */
-    variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ChipOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Container/Container.d.ts b/packages/mui-material/src/Container/Container.d.ts
index 8bd092b7d52557..9416144afe2943 100644
--- a/packages/mui-material/src/Container/Container.d.ts
+++ b/packages/mui-material/src/Container/Container.d.ts
@@ -4,42 +4,44 @@ import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ContainerClasses } from './containerClasses';
 
+export interface ContainerOwnProps {
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ContainerClasses>;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth?: Breakpoint | false;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ContainerTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ContainerClasses>;
-    /**
-     * If `true`, the left and right padding is removed.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * Set the max-width to match the min-width of the current breakpoint.
-     * This is useful if you'd prefer to design for a fixed set of sizes
-     * instead of trying to accommodate a fully fluid viewport.
-     * It's fluid by default.
-     * @default false
-     */
-    fixed?: boolean;
-    /**
-     * Determine the max-width of the container.
-     * The container width grows with the size of the screen.
-     * Set to `false` to disable `maxWidth`.
-     * @default 'lg'
-     */
-    maxWidth?: Breakpoint | false;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ContainerOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts
index fae69c4d85fa22..4241654030a832 100644
--- a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts
+++ b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts
@@ -5,21 +5,23 @@ import { OverrideProps, OverridableComponent } from '../OverridableComponent';
 import { Theme } from '../styles';
 import { DialogContentTextClasses } from './dialogContentTextClasses';
 
+export interface DialogContentTextOwnProps extends Omit<TypographyTypeMap['props'], 'classes'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogContentTextClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface DialogContentTextTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = TypographyTypeMap['defaultComponent'],
+  RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'],
 > {
-  props: AdditionalProps & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<DialogContentTextClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  } & Omit<TypographyTypeMap['props'], 'classes'>;
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & DialogContentTextOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts
index 5d86c4e3129c01..3bab5f2b0b185d 100644
--- a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts
+++ b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts
@@ -5,25 +5,27 @@ import { Theme } from '../styles';
 import { TypographyTypeMap } from '../Typography';
 import { DialogTitleClasses } from './dialogTitleClasses';
 
+export interface DialogTitleOwnProps extends Omit<TypographyTypeMap['props'], 'classes'> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogTitleClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface DialogTitleTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = TypographyTypeMap['defaultComponent'],
+  RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'],
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<DialogTitleClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  } & Omit<TypographyTypeMap['props'], 'classes'>;
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & DialogTitleOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Divider/Divider.d.ts b/packages/mui-material/src/Divider/Divider.d.ts
index 1b7be60ea2dcec..0c1244ba7490ca 100644
--- a/packages/mui-material/src/Divider/Divider.d.ts
+++ b/packages/mui-material/src/Divider/Divider.d.ts
@@ -7,59 +7,58 @@ import { DividerClasses } from './dividerClasses';
 
 export interface DividerPropsVariantOverrides {}
 
+export interface DividerOwnProps {
+  /**
+   * Absolutely position the element.
+   * @default false
+   */
+  absolute?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DividerClasses>;
+  /**
+   * If `true`, a vertical divider will have the correct height when used in flex container.
+   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
+   * @default false
+   */
+  flexItem?: boolean;
+  /**
+   * If `true`, the divider will have a lighter color.
+   * @default false
+   */
+  light?: boolean;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The text alignment.
+   * @default 'center'
+   */
+  textAlign?: 'center' | 'right' | 'left';
+  /**
+   * The variant to use.
+   * @default 'fullWidth'
+   */
+  variant?: OverridableStringUnion<'fullWidth' | 'inset' | 'middle', DividerPropsVariantOverrides>;
+}
+
 export interface DividerTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'hr',
+  RootComponent extends React.ElementType = 'hr',
 > {
-  props: AdditionalProps & {
-    /**
-     * Absolutely position the element.
-     * @default false
-     */
-    absolute?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<DividerClasses>;
-    /**
-     * If `true`, a vertical divider will have the correct height when used in flex container.
-     * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
-     * @default false
-     */
-    flexItem?: boolean;
-    /**
-     * If `true`, the divider will have a lighter color.
-     * @default false
-     */
-    light?: boolean;
-    /**
-     * The component orientation.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The text alignment.
-     * @default 'center'
-     */
-    textAlign?: 'center' | 'right' | 'left';
-    /**
-     * The variant to use.
-     * @default 'fullWidth'
-     */
-    variant?: OverridableStringUnion<
-      'fullWidth' | 'inset' | 'middle',
-      DividerPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & DividerOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Fab/Fab.d.ts b/packages/mui-material/src/Fab/Fab.d.ts
index 5c272fee5541c4..8952dadb24eaba 100644
--- a/packages/mui-material/src/Fab/Fab.d.ts
+++ b/packages/mui-material/src/Fab/Fab.d.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { PropTypes, Theme } from '..';
@@ -11,65 +12,67 @@ export interface FabPropsSizeOverrides {}
 
 export interface FabPropsColorOverrides {}
 
+export interface FabOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FabClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'default'
+   */
+  color?: OverridableStringUnion<
+    PropTypes.Color | 'success' | 'error' | 'info' | 'warning',
+    FabPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If `true`, the ripple effect is disabled.
+   */
+  disableRipple?: boolean;
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href?: string;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'large'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>;
+  /**
+   * The variant to use.
+   * @default 'circular'
+   */
+  variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type FabTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<FabClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'default'
-     */
-    color?: OverridableStringUnion<
-      PropTypes.Color | 'success' | 'error' | 'info' | 'warning',
-      FabPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the ripple effect is disabled.
-     */
-    disableRipple?: boolean;
-    /**
-     * The URL to link to when the button is clicked.
-     * If defined, an `a` element will be used as the root node.
-     */
-    href?: string;
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'large'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>;
-    /**
-     * The variant to use.
-     * @default 'circular'
-     */
-    variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & FabOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts
index f3ff6f89bd990b..e16a6d1b2f51ff 100644
--- a/packages/mui-material/src/FormControl/FormControl.d.ts
+++ b/packages/mui-material/src/FormControl/FormControl.d.ts
@@ -8,81 +8,83 @@ import { FormControlClasses } from './formControlClasses';
 export interface FormControlPropsSizeOverrides {}
 export interface FormControlPropsColorOverrides {}
 
+export interface FormControlOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormControlClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    FormControlPropsColorOverrides
+  >;
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused?: boolean;
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel?: boolean;
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin?: 'dense' | 'normal' | 'none';
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
 export interface FormControlTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<FormControlClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<
-      'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      FormControlPropsColorOverrides
-    >;
-    /**
-     * If `true`, the label, input and helper text should be displayed in a disabled state.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the label is displayed in an error state.
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * If `true`, the component will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * If `true`, the component is displayed in focused state.
-     */
-    focused?: boolean;
-    /**
-     * If `true`, the label is hidden.
-     * This is used to increase density for a `FilledInput`.
-     * Be sure to add `aria-label` to the `input` element.
-     * @default false
-     */
-    hiddenLabel?: boolean;
-    /**
-     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
-     * @default 'none'
-     */
-    margin?: 'dense' | 'normal' | 'none';
-    /**
-     * If `true`, the label will indicate that the `input` is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The size of the component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    variant?: 'standard' | 'outlined' | 'filled';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & FormControlOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts
index 703f00bbd7b0d1..0869db3920d6b8 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts
@@ -7,59 +7,61 @@ import { FormHelperTextClasses } from './formHelperTextClasses';
 
 export interface FormHelperTextPropsVariantOverrides {}
 
+export interface FormHelperTextOwnProps {
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormHelperTextClasses>;
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled?: boolean;
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: OverridableStringUnion<
+    'standard' | 'outlined' | 'filled',
+    FormHelperTextPropsVariantOverrides
+  >;
+}
+
 export interface FormHelperTextTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'p',
+  RootComponent extends React.ElementType = 'p',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     *
-     * If `' '` is provided, the component reserves one line height for displaying a future message.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<FormHelperTextClasses>;
-    /**
-     * If `true`, the helper text should be displayed in a disabled state.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, helper text should be displayed in an error state.
-     */
-    error?: boolean;
-    /**
-     * If `true`, the helper text should use filled classes key.
-     */
-    filled?: boolean;
-    /**
-     * If `true`, the helper text should use focused classes key.
-     */
-    focused?: boolean;
-    /**
-     * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-     * FormControl.
-     */
-    margin?: 'dense';
-    /**
-     * If `true`, the helper text should use required classes key.
-     */
-    required?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     */
-    variant?: OverridableStringUnion<
-      'standard' | 'outlined' | 'filled',
-      FormHelperTextPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & FormHelperTextOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts
index f580b7fdeaf0cc..980c088469fb5d 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.d.ts
+++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts
@@ -7,6 +7,11 @@ import { FormLabelClasses } from './formLabelClasses';
 
 export interface FormLabelPropsColorOverrides {}
 
+/**
+ * This type is kept for compatibility. Use `FormLabelOwnProps` instead.
+ */
+export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+
 export interface FormLabelOwnProps {
   /**
    * The content of the component.
@@ -53,10 +58,10 @@ export interface FormLabelOwnProps {
 
 export interface FormLabelTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'label',
+  RootComponent extends React.ElementType = 'label',
 > {
   props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -73,8 +78,6 @@ export interface FormLabelTypeMap<
  */
 declare const FormLabel: OverridableComponent<FormLabelTypeMap>;
 
-export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
-
 export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
   props: TypeMap['props'] & Pick<FormLabelOwnProps, 'filled' | 'color'>;
   defaultComponent: TypeMap['defaultComponent'];
diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts
index 4639d6ce4fffe7..8df168eec79edb 100644
--- a/packages/mui-material/src/Grid/Grid.d.ts
+++ b/packages/mui-material/src/Grid/Grid.d.ts
@@ -83,77 +83,78 @@ type Breakpoints = IfEquals<
   CustomBreakpoints
 >;
 
+export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<GridClasses>;
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns?: ResponsiveStyleValue<number>;
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container?: boolean;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction?: ResponsiveStyleValue<GridDirection>;
+  /**
+   * If `true`, the component will have the flex *item* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  item?: boolean;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap?: GridWrap;
+  /**
+   * If `true`, it sets `min-width: 0` on the item.
+   * Refer to the limitations section of the documentation to better understand the use case.
+   * @default false
+   */
+  zeroMinWidth?: boolean;
+}
+
 export interface GridTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    SystemProps<Theme> & {
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<GridClasses>;
-      /**
-       * The number of columns.
-       * @default 12
-       */
-      columns?: ResponsiveStyleValue<number>;
-      /**
-       * Defines the horizontal space between the type `item` components.
-       * It overrides the value of the `spacing` prop.
-       */
-      columnSpacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * If `true`, the component will have the flex *container* behavior.
-       * You should be wrapping *items* with a *container*.
-       * @default false
-       */
-      container?: boolean;
-      /**
-       * Defines the `flex-direction` style property.
-       * It is applied for all screen sizes.
-       * @default 'row'
-       */
-      direction?: ResponsiveStyleValue<GridDirection>;
-      /**
-       * If `true`, the component will have the flex *item* behavior.
-       * You should be wrapping *items* with a *container*.
-       * @default false
-       */
-      item?: boolean;
-      /**
-       * Defines the vertical space between the type `item` components.
-       * It overrides the value of the `spacing` prop.
-       */
-      rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * Defines the space between the type `item` components.
-       * It can only be used on a type `container` component.
-       * @default 0
-       */
-      spacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-      /**
-       * Defines the `flex-wrap` style property.
-       * It's applied for all screen sizes.
-       * @default 'wrap'
-       */
-      wrap?: GridWrap;
-      /**
-       * If `true`, it sets `min-width: 0` on the item.
-       * Refer to the limitations section of the documentation to better understand the use case.
-       * @default false
-       */
-      zeroMinWidth?: boolean;
-    } & Breakpoints;
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & GridOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Icon/Icon.d.ts b/packages/mui-material/src/Icon/Icon.d.ts
index d66a87825db304..e29f7a1121e673 100644
--- a/packages/mui-material/src/Icon/Icon.d.ts
+++ b/packages/mui-material/src/Icon/Icon.d.ts
@@ -9,57 +9,59 @@ export interface IconPropsSizeOverrides {}
 
 export interface IconPropsColorOverrides {}
 
+export interface IconOwnProps {
+  /**
+   * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
+   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * @default 'material-icons'
+   */
+  baseClassName?: string;
+  /**
+   * The name of the icon font ligature.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<IconClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'inherit'
+   */
+  color?: OverridableStringUnion<
+    | 'inherit'
+    | 'action'
+    | 'disabled'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning',
+    IconPropsColorOverrides
+  >;
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize?: OverridableStringUnion<
+    'inherit' | 'large' | 'medium' | 'small',
+    IconPropsSizeOverrides
+  >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface IconTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
-  props: AdditionalProps & {
-    /**
-     * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-     * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
-     * @default 'material-icons'
-     */
-    baseClassName?: string;
-    /**
-     * The name of the icon font ligature.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<IconClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'inherit'
-     */
-    color?: OverridableStringUnion<
-      | 'inherit'
-      | 'action'
-      | 'disabled'
-      | 'primary'
-      | 'secondary'
-      | 'error'
-      | 'info'
-      | 'success'
-      | 'warning',
-      IconPropsColorOverrides
-    >;
-    /**
-     * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-     * @default 'medium'
-     */
-    fontSize?: OverridableStringUnion<
-      'inherit' | 'large' | 'medium' | 'small',
-      IconPropsSizeOverrides
-    >;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & IconOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/IconButton/IconButton.d.ts b/packages/mui-material/src/IconButton/IconButton.d.ts
index a764796b81bb44..09b3c4d23c52eb 100644
--- a/packages/mui-material/src/IconButton/IconButton.d.ts
+++ b/packages/mui-material/src/IconButton/IconButton.d.ts
@@ -10,59 +10,61 @@ export interface IconButtonPropsColorOverrides {}
 
 export interface IconButtonPropsSizeOverrides {}
 
+export interface IconButtonOwnProps {
+  /**
+   * The icon to display.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<IconButtonClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'default'
+   */
+  color?: OverridableStringUnion<
+    'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    IconButtonPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge?: 'start' | 'end' | false;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type IconButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The icon to display.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<IconButtonClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'default'
-     */
-    color?: OverridableStringUnion<
-      'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      IconButtonPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If given, uses a negative margin to counteract the padding on one
-     * side (this is often helpful for aligning the left or right
-     * side of the icon with content above or below, without ruining the border
-     * size and shape).
-     * @default false
-     */
-    edge?: 'start' | 'end' | false;
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & IconButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/ImageList/ImageList.d.ts b/packages/mui-material/src/ImageList/ImageList.d.ts
index 86a93a2a399d8b..618e3cbc990531 100644
--- a/packages/mui-material/src/ImageList/ImageList.d.ts
+++ b/packages/mui-material/src/ImageList/ImageList.d.ts
@@ -7,48 +7,50 @@ import { ImageListClasses } from './imageListClasses';
 
 export interface ImageListPropsVariantOverrides {}
 
+export interface ImageListOwnProps {
+  /**
+   * The content of the component, normally `ImageListItem`s.
+   */
+  children: NonNullable<React.ReactNode>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ImageListClasses>;
+  /**
+   * Number of columns.
+   * @default 2
+   */
+  cols?: number;
+  /**
+   * The gap between items in px.
+   * @default 4
+   */
+  gap?: number;
+  /**
+   * The height of one row in px.
+   * @default 'auto'
+   */
+  rowHeight?: number | 'auto';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant?: OverridableStringUnion<
+    'masonry' | 'quilted' | 'standard' | 'woven',
+    ImageListPropsVariantOverrides
+  >;
+}
+
 export interface ImageListTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'ul',
+  RootComponent extends React.ElementType = 'ul',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally `ImageListItem`s.
-     */
-    children: NonNullable<React.ReactNode>;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ImageListClasses>;
-    /**
-     * Number of columns.
-     * @default 2
-     */
-    cols?: number;
-    /**
-     * The gap between items in px.
-     * @default 4
-     */
-    gap?: number;
-    /**
-     * The height of one row in px.
-     * @default 'auto'
-     */
-    rowHeight?: number | 'auto';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'standard'
-     */
-    variant?: OverridableStringUnion<
-      'masonry' | 'quilted' | 'standard' | 'woven',
-      ImageListPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ImageListOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts
index acce86d80b9a50..09892699adfadb 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts
@@ -4,35 +4,37 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ImageListItemClasses } from './imageListItemClasses';
 
+export interface ImageListItemOwnProps {
+  /**
+   * The content of the component, normally an `<img>`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ImageListItemClasses>;
+  /**
+   * Width of the item in number of grid columns.
+   * @default 1
+   */
+  cols?: number;
+  /**
+   * Height of the item in number of grid rows.
+   * @default 1
+   */
+  rows?: number;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ImageListItemTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'li',
+  RootComponent extends React.ElementType = 'li',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally an `<img>`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ImageListItemClasses>;
-    /**
-     * Width of the item in number of grid columns.
-     * @default 1
-     */
-    cols?: number;
-    /**
-     * Height of the item in number of grid rows.
-     * @default 1
-     */
-    rows?: number;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ImageListItemOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts
index 477b3436843f49..14ad4b05d3f00d 100644
--- a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts
+++ b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts
@@ -4,46 +4,48 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { InputAdornmentClasses } from './inputAdornmentClasses';
 
+export interface InputAdornmentOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<InputAdornmentClasses>;
+  /**
+   * The content of the component, normally an `IconButton` or string.
+   */
+  children?: React.ReactNode;
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the `input` on click.
+   * @default false
+   */
+  disablePointerEvents?: boolean;
+  /**
+   * If children is a string then disable wrapping in a Typography component.
+   * @default false
+   */
+  disableTypography?: boolean;
+  /**
+   * The position this adornment should appear relative to the `Input`.
+   */
+  position: 'start' | 'end';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * Note: If you are using the `TextField` component or the `FormControl` component
+   * you do not have to set this manually.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
 export interface InputAdornmentTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<InputAdornmentClasses>;
-    /**
-     * The content of the component, normally an `IconButton` or string.
-     */
-    children?: React.ReactNode;
-    /**
-     * Disable pointer events on the root.
-     * This allows for the content of the adornment to focus the `input` on click.
-     * @default false
-     */
-    disablePointerEvents?: boolean;
-    /**
-     * If children is a string then disable wrapping in a Typography component.
-     * @default false
-     */
-    disableTypography?: boolean;
-    /**
-     * The position this adornment should appear relative to the `Input`.
-     */
-    position: 'start' | 'end';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * Note: If you are using the `TextField` component or the `FormControl` component
-     * you do not have to set this manually.
-     */
-    variant?: 'standard' | 'outlined' | 'filled';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & InputAdornmentOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 90d0b3a40851ea..82a22a3b7471b0 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -78,7 +78,7 @@ const useUtilityClasses = (ownerState) => {
       fullWidth && 'fullWidth',
       focused && 'focused',
       formControl && 'formControl',
-      size === 'small' && 'sizeSmall',
+      size && size !== 'medium' && `size${capitalize(size)}`,
       multiline && 'multiline',
       startAdornment && 'adornedStart',
       endAdornment && 'adornedEnd',
diff --git a/packages/mui-material/src/InputLabel/InputLabel.d.ts b/packages/mui-material/src/InputLabel/InputLabel.d.ts
index 860db2e2d04e1f..d14ab786e97ab1 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.d.ts
+++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts
@@ -8,65 +8,67 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface InputLabelPropsSizeOverrides {}
 
+export interface InputLabelOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<InputLabelClasses>;
+  color?: FormLabelProps['color'];
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink?: boolean;
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
 export type InputLabelTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'label',
+  RootComponent extends React.ElementType = 'label',
 > = ExtendFormLabelTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<InputLabelClasses>;
-    color?: FormLabelProps['color'];
-    /**
-     * If `true`, the transition animation is disabled.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the label is displayed in an error state.
-     */
-    error?: boolean;
-    /**
-     * If `true`, the `input` of this label is focused.
-     */
-    focused?: boolean;
-    /**
-     * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-     * FormControl.
-     */
-    margin?: 'dense';
-    /**
-     * if `true`, the label will indicate that the `input` is required.
-     */
-    required?: boolean;
-    /**
-     * If `true`, the label is shrunk.
-     */
-    shrink?: boolean;
-    /**
-     * The size of the component.
-     * @default 'normal'
-     */
-    size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     */
-    variant?: 'standard' | 'outlined' | 'filled';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & InputLabelOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
index 6fe139fee107f0..f6684a35a22bb0 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -7,6 +7,7 @@ import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
 import useThemeProps from '../styles/useThemeProps';
+import capitalize from '../utils/capitalize';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { getInputLabelUtilityClasses } from './inputLabelClasses';
 
@@ -18,7 +19,7 @@ const useUtilityClasses = (ownerState) => {
       formControl && 'formControl',
       !disableAnimation && 'animated',
       shrink && 'shrink',
-      size === 'small' && 'sizeSmall',
+      size && size !== 'normal' && `size${capitalize(size)}`,
       variant,
     ],
     asterisk: [required && 'asterisk'],
diff --git a/packages/mui-material/src/Link/Link.d.ts b/packages/mui-material/src/Link/Link.d.ts
index 1851a2e609a0d0..99b9147a962c3a 100644
--- a/packages/mui-material/src/Link/Link.d.ts
+++ b/packages/mui-material/src/Link/Link.d.ts
@@ -6,45 +6,43 @@ import { Theme } from '../styles';
 import { TypographyOwnProps } from '../Typography';
 import { LinkClasses } from './linkClasses';
 
-export interface LinkTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'a',
-> {
-  props: AdditionalProps &
-    LinkBaseProps & {
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<LinkClasses>;
-      /**
-       * The color of the link.
-       * @default 'primary'
-       */
-      color?: TypographyOwnProps['color'];
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-      /**
-       * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
-       */
-      TypographyClasses?: TypographyOwnProps['classes'];
-      /**
-       * Controls when the link should have an underline.
-       * @default 'always'
-       */
-      underline?: 'none' | 'hover' | 'always';
-      /**
-       * Applies the theme typography styles.
-       * @default 'inherit'
-       */
-      variant?: TypographyOwnProps['variant'];
-    };
-  defaultComponent: DefaultComponent;
+export interface LinkOwnProps extends DistributiveOmit<LinkBaseProps, 'classes'> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<LinkClasses>;
+  /**
+   * The color of the link.
+   * @default 'primary'
+   */
+  color?: TypographyOwnProps['color'];
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
+   */
+  TypographyClasses?: TypographyOwnProps['classes'];
+  /**
+   * Controls when the link should have an underline.
+   * @default 'always'
+   */
+  underline?: 'none' | 'hover' | 'always';
+  /**
+   * Applies the theme typography styles.
+   * @default 'inherit'
+   */
+  variant?: TypographyOwnProps['variant'];
+}
+
+export interface LinkTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'a'> {
+  props: AdditionalProps & LinkOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/List/List.d.ts b/packages/mui-material/src/List/List.d.ts
index b4e7430b798ced..19b0aaa68cbd94 100644
--- a/packages/mui-material/src/List/List.d.ts
+++ b/packages/mui-material/src/List/List.d.ts
@@ -4,41 +4,40 @@ import { Theme } from '..';
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
 import { ListClasses } from './listClasses';
 
-export interface ListTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'ul',
-> {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ListClasses>;
-    /**
-     * If `true`, compact vertical padding designed for keyboard and mouse input is used for
-     * the list and list items.
-     * The prop is available to descendant components as the `dense` context.
-     * @default false
-     */
-    dense?: boolean;
-    /**
-     * If `true`, vertical padding is removed from the list.
-     * @default false
-     */
-    disablePadding?: boolean;
-    /**
-     * The content of the subheader, normally `ListSubheader`.
-     */
-    subheader?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+export interface ListOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used for
+   * the list and list items.
+   * The prop is available to descendant components as the `dense` context.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, vertical padding is removed from the list.
+   * @default false
+   */
+  disablePadding?: boolean;
+  /**
+   * The content of the subheader, normally `ListSubheader`.
+   */
+  subheader?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface ListTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'ul'> {
+  props: AdditionalProps & ListOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/ListItem/ListItem.d.ts b/packages/mui-material/src/ListItem/ListItem.d.ts
index 7ad0ae4d34f1a6..b4e22ee6ba1c8f 100644
--- a/packages/mui-material/src/ListItem/ListItem.d.ts
+++ b/packages/mui-material/src/ListItem/ListItem.d.ts
@@ -7,6 +7,9 @@ import { ListItemClasses } from './listItemClasses';
 
 export interface ListItemComponentsPropsOverrides {}
 
+/**
+ * This type is kept for compatibility. Use `ListItemOwnProps` instead.
+ */
 export interface ListItemBaseProps {
   /**
    * Defines the `align-items` style property.
@@ -84,55 +87,56 @@ export interface ListItemBaseProps {
   sx?: SxProps<Theme>;
 }
 
-export interface ListItemTypeMap<AdditionalProps, DefaultComponent extends React.ElementType> {
-  props: AdditionalProps &
-    ListItemBaseProps & {
-      /**
-       * The components used for each slot inside.
-       *
-       * This prop is an alias for the `slots` prop.
-       * It's recommended to use the `slots` prop instead.
-       *
-       * @default {}
-       */
-      components?: {
-        Root?: React.ElementType;
-      };
-      /**
-       * The extra props for the slot components.
-       * You can override the existing props or add new ones.
-       *
-       * This prop is an alias for the `slotProps` prop.
-       * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-       *
-       * @default {}
-       */
-      componentsProps?: {
-        root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
-      };
-      /**
-       * The extra props for the slot components.
-       * You can override the existing props or add new ones.
-       *
-       * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-       *
-       * @default {}
-       */
-      slotProps?: {
-        root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
-      };
-      /**
-       * The components used for each slot inside.
-       *
-       * This prop is an alias for the `components` prop, which will be deprecated in the future.
-       *
-       * @default {}
-       */
-      slots?: {
-        root?: React.ElementType;
-      };
-    };
-  defaultComponent: DefaultComponent;
+export interface ListItemOwnProps extends ListItemBaseProps {
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
+  };
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+  };
+}
+
+export interface ListItemTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & ListItemOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts
index 26d3addf58f8c4..9172789eaa7ea1 100644
--- a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts
+++ b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts
@@ -5,6 +5,10 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { ListItemButtonClasses } from './listItemButtonClasses';
 
+/**
+ * This interface is kept for backward compatibility. To extend `LitItemButton`
+ * props through module augmentation, use `ListItemButtonOwnProps`.
+ */
 export interface ListItemButtonBaseProps {
   /**
    * Defines the `align-items` style property.
@@ -58,12 +62,14 @@ export interface ListItemButtonBaseProps {
   sx?: SxProps<Theme>;
 }
 
+export interface ListItemButtonOwnProps extends ListItemButtonBaseProps {}
+
 export type ListItemButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & ListItemButtonBaseProps;
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ListItemButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts
index 4c2d8f9f678b4e..266cfab7118953 100644
--- a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts
+++ b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts
@@ -4,45 +4,47 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ListSubheaderClasses } from './listSubheaderClasses';
 
+export interface ListSubheaderOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListSubheaderClasses>;
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'default'
+   */
+  color?: 'default' | 'primary' | 'inherit';
+  /**
+   * If `true`, the List Subheader will not have gutters.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, the List Subheader will not stick to the top during scroll.
+   * @default false
+   */
+  disableSticky?: boolean;
+  /**
+   * If `true`, the List Subheader is indented.
+   * @default false
+   */
+  inset?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ListSubheaderTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'li',
+  RootComponent extends React.ElementType = 'li',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ListSubheaderClasses>;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'default'
-     */
-    color?: 'default' | 'primary' | 'inherit';
-    /**
-     * If `true`, the List Subheader will not have gutters.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * If `true`, the List Subheader will not stick to the top during scroll.
-     * @default false
-     */
-    disableSticky?: boolean;
-    /**
-     * If `true`, the List Subheader is indented.
-     * @default false
-     */
-    inset?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ListSubheaderOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/MenuItem/MenuItem.d.ts b/packages/mui-material/src/MenuItem/MenuItem.d.ts
index b5395edad7c0a1..76f2fe665f8070 100644
--- a/packages/mui-material/src/MenuItem/MenuItem.d.ts
+++ b/packages/mui-material/src/MenuItem/MenuItem.d.ts
@@ -1,56 +1,59 @@
+import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '../styles';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { MenuItemClasses } from './menuItemClasses';
 
+export interface MenuItemOwnProps {
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MenuItemClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider?: boolean;
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type MenuItemTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'li',
+  RootComponent extends React.ElementType = 'li',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * If `true`, the list item is focused during the first mount.
-     * Focus will also be triggered if the value changes from false to true.
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<MenuItemClasses>;
-    /**
-     * If `true`, compact vertical padding designed for keyboard and mouse input is used.
-     * The prop defaults to the value inherited from the parent Menu component.
-     * @default false
-     */
-    dense?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the left and right padding is removed.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * If `true`, a 1px light border is added to the bottom of the menu item.
-     * @default false
-     */
-    divider?: boolean;
-    /**
-     * If `true`, the component is selected.
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & MenuItemOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/MenuList/MenuList.d.ts b/packages/mui-material/src/MenuList/MenuList.d.ts
index 19ff9906bcb237..f177efc71b9cb6 100644
--- a/packages/mui-material/src/MenuList/MenuList.d.ts
+++ b/packages/mui-material/src/MenuList/MenuList.d.ts
@@ -2,44 +2,46 @@ import * as React from 'react';
 import { ExtendList, ExtendListTypeMap } from '../List';
 import { OverrideProps } from '../OverridableComponent';
 
+export interface MenuListOwnProps {
+  /**
+   * If `true`, will focus the `[role="menu"]` container and move into tab order.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * If `true`, will focus the first menuitem if `variant="menu"` or selected item
+   * if `variant="selectedMenu"`.
+   * @default false
+   */
+  autoFocusItem?: boolean;
+  /**
+   * MenuList contents, normally `MenuItem`s.
+   */
+  children?: React.ReactNode;
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  /**
+   * If `true`, the menu items will not wrap focus.
+   * @default false
+   */
+  disableListWrap?: boolean;
+  /**
+   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
+   * and the vertical alignment relative to the anchor element.
+   * @default 'selectedMenu'
+   */
+  variant?: 'menu' | 'selectedMenu';
+}
+
 export type MenuListTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'ul',
+  RootComponent extends React.ElementType = 'ul',
 > = ExtendListTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * If `true`, will focus the `[role="menu"]` container and move into tab order.
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * If `true`, will focus the first menuitem if `variant="menu"` or selected item
-     * if `variant="selectedMenu"`.
-     * @default false
-     */
-    autoFocusItem?: boolean;
-    /**
-     * MenuList contents, normally `MenuItem`s.
-     */
-    children?: React.ReactNode;
-    /**
-     * If `true`, will allow focus on disabled items.
-     * @default false
-     */
-    disabledItemsFocusable?: boolean;
-    /**
-     * If `true`, the menu items will not wrap focus.
-     * @default false
-     */
-    disableListWrap?: boolean;
-    /**
-     * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
-     * and the vertical alignment relative to the anchor element.
-     * @default 'selectedMenu'
-     */
-    variant?: 'menu' | 'selectedMenu';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & MenuListOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 export type MenuListClassKey = keyof NonNullable<MenuListTypeMap['props']['classes']>;
diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts
index d0eeb3286f8ccf..db21682663aae2 100644
--- a/packages/mui-material/src/Modal/Modal.d.ts
+++ b/packages/mui-material/src/Modal/Modal.d.ts
@@ -26,187 +26,181 @@ export interface ModalSlots {
   backdrop?: React.ElementType;
 }
 
+export interface ModalOwnProps {
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent?: React.ElementType<BackdropProps>;
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.backdrop` instead.
+   */
+  BackdropProps?: Partial<BackdropProps>;
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ModalClasses>;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * When set to true the Modal waits until a nested Transition is completed before closing.
+   * @default false
+   */
+  closeAfterTransition?: boolean;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+    Backdrop?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
+    backdrop?: SlotComponentProps<typeof Backdrop, ModalComponentsPropsOverrides, ModalOwnerState>;
+  };
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container?: PortalProps['container'];
+  /**
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableAutoFocus?: boolean;
+  /**
+   * If `true`, the modal will not prevent focus from leaving the modal while open.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableEnforceFocus?: boolean;
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
+   */
+  disableEscapeKeyDown?: boolean;
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal?: PortalProps['disablePortal'];
+  /**
+   * If `true`, the modal will not restore focus to previously focused element once
+   * modal is hidden or unmounted.
+   * @default false
+   */
+  disableRestoreFocus?: boolean;
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock?: boolean;
+  /**
+   * If `true`, the backdrop is not rendered.
+   * @default false
+   */
+  hideBackdrop?: boolean;
+  /**
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Modal.
+   * @default false
+   */
+  keepMounted?: boolean;
+  /**
+   * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
+   */
+  onBackdropClick?: React.ReactEventHandler<{}>;
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose?: {
+    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+  }['bivarianceHack'];
+  /**
+   * A function called when a transition enters.
+   */
+  onTransitionEnter?: () => void;
+  /**
+   * A function called when a transition has exited.
+   */
+  onTransitionExited?: () => void;
+  /**
+   * If `true`, the component is shown.
+   */
+  open: boolean;
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: ModalSlots;
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
+    backdrop?: SlotComponentProps<typeof Backdrop, ModalComponentsPropsOverrides, ModalOwnerState>;
+  };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ModalTypeMap<
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
   AdditionalProps = {},
 > {
-  props: AdditionalProps & {
-    /**
-     * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-     * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-     * @default styled(Backdrop, {
-     *   name: 'MuiModal',
-     *   slot: 'Backdrop',
-     *   overridesResolver: (props, styles) => {
-     *     return styles.backdrop;
-     *   },
-     * })({
-     *   zIndex: -1,
-     * })
-     */
-    BackdropComponent?: React.ElementType<BackdropProps>;
-    /**
-     * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-     * @deprecated Use `slotProps.backdrop` instead.
-     */
-    BackdropProps?: Partial<BackdropProps>;
-    /**
-     * A single child content element.
-     */
-    children: React.ReactElement;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ModalClasses>;
-    /**
-     * @ignore
-     */
-    className?: string;
-    /**
-     * When set to true the Modal waits until a nested Transition is completed before closing.
-     * @default false
-     */
-    closeAfterTransition?: boolean;
-    /**
-     * The components used for each slot inside.
-     *
-     * This prop is an alias for the `slots` prop.
-     * It's recommended to use the `slots` prop instead.
-     *
-     * @default {}
-     */
-    components?: {
-      Root?: React.ElementType;
-      Backdrop?: React.ElementType;
-    };
-    /**
-     * The extra props for the slot components.
-     * You can override the existing props or add new ones.
-     *
-     * This prop is an alias for the `slotProps` prop.
-     * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-     *
-     * @default {}
-     */
-    componentsProps?: {
-      root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
-      backdrop?: SlotComponentProps<
-        typeof Backdrop,
-        ModalComponentsPropsOverrides,
-        ModalOwnerState
-      >;
-    };
-    /**
-     * An HTML element or function that returns one.
-     * The `container` will have the portal children appended to it.
-     *
-     * By default, it uses the body of the top-level document object,
-     * so it's simply `document.body` most of the time.
-     */
-    container?: PortalProps['container'];
-    /**
-     * If `true`, the modal will not automatically shift focus to itself when it opens, and
-     * replace it to the last focused element when it closes.
-     * This also works correctly with any modal children that have the `disableAutoFocus` prop.
-     *
-     * Generally this should never be set to `true` as it makes the modal less
-     * accessible to assistive technologies, like screen readers.
-     * @default false
-     */
-    disableAutoFocus?: boolean;
-    /**
-     * If `true`, the modal will not prevent focus from leaving the modal while open.
-     *
-     * Generally this should never be set to `true` as it makes the modal less
-     * accessible to assistive technologies, like screen readers.
-     * @default false
-     */
-    disableEnforceFocus?: boolean;
-    /**
-     * If `true`, hitting escape will not fire the `onClose` callback.
-     * @default false
-     */
-    disableEscapeKeyDown?: boolean;
-    /**
-     * The `children` will be under the DOM hierarchy of the parent component.
-     * @default false
-     */
-    disablePortal?: PortalProps['disablePortal'];
-    /**
-     * If `true`, the modal will not restore focus to previously focused element once
-     * modal is hidden or unmounted.
-     * @default false
-     */
-    disableRestoreFocus?: boolean;
-    /**
-     * Disable the scroll lock behavior.
-     * @default false
-     */
-    disableScrollLock?: boolean;
-    /**
-     * If `true`, the backdrop is not rendered.
-     * @default false
-     */
-    hideBackdrop?: boolean;
-    /**
-     * Always keep the children in the DOM.
-     * This prop can be useful in SEO situation or
-     * when you want to maximize the responsiveness of the Modal.
-     * @default false
-     */
-    keepMounted?: boolean;
-    /**
-     * Callback fired when the backdrop is clicked.
-     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-     */
-    onBackdropClick?: React.ReactEventHandler<{}>;
-    /**
-     * Callback fired when the component requests to be closed.
-     * The `reason` parameter can optionally be used to control the response to `onClose`.
-     *
-     * @param {object} event The event source of the callback.
-     * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
-     */
-    onClose?: {
-      bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
-    }['bivarianceHack'];
-    /**
-     * A function called when a transition enters.
-     */
-    onTransitionEnter?: () => void;
-    /**
-     * A function called when a transition has exited.
-     */
-    onTransitionExited?: () => void;
-    /**
-     * If `true`, the component is shown.
-     */
-    open: boolean;
-    /**
-     * The components used for each slot inside the Modal.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots?: ModalSlots;
-    /**
-     * The props used for each slot inside the Modal.
-     * @default {}
-     */
-    slotProps?: {
-      root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
-      backdrop?: SlotComponentProps<
-        typeof Backdrop,
-        ModalComponentsPropsOverrides,
-        ModalOwnerState
-      >;
-    };
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ModalOwnProps;
+  defaultComponent: RootComponent;
 }
 
 type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts
index 9a3b0b79f0e619..36e628047c209c 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts
@@ -12,92 +12,94 @@ export interface PaginationItemPropsSizeOverrides {}
 
 export interface PaginationItemPropsColorOverrides {}
 
+export interface PaginationItemOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaginationItemClasses>;
+  /**
+   * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<
+    'standard' | 'primary' | 'secondary',
+    PaginationItemPropsColorOverrides
+  >;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    first?: React.ElementType;
+    last?: React.ElementType;
+    next?: React.ElementType;
+    previous?: React.ElementType;
+  };
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The current page number.
+   */
+  page?: React.ReactNode;
+  /**
+   * If `true` the pagination item is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The shape of the pagination item.
+   * @default 'circular'
+   */
+  shape?: 'circular' | 'rounded';
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots?: {
+    first?: React.ElementType;
+    last?: React.ElementType;
+    next?: React.ElementType;
+    previous?: React.ElementType;
+  };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of pagination item.
+   * @default 'page'
+   */
+  type?: UsePaginationItem['type'];
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
+}
+
 export interface PaginationItemTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<PaginationItemClasses>;
-    /**
-     * The active color.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'standard'
-     */
-    color?: OverridableStringUnion<
-      'standard' | 'primary' | 'secondary',
-      PaginationItemPropsColorOverrides
-    >;
-    /**
-     * The components used for each slot inside.
-     *
-     * This prop is an alias for the `slots` prop.
-     * It's recommended to use the `slots` prop instead.
-     *
-     * @default {}
-     */
-    components?: {
-      first?: React.ElementType;
-      last?: React.ElementType;
-      next?: React.ElementType;
-      previous?: React.ElementType;
-    };
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The current page number.
-     */
-    page?: React.ReactNode;
-    /**
-     * If `true` the pagination item is selected.
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * The shape of the pagination item.
-     * @default 'circular'
-     */
-    shape?: 'circular' | 'rounded';
-    /**
-     * The size of the component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
-    /**
-     * The components used for each slot inside.
-     *
-     * This prop is an alias for the `components` prop, which will be deprecated in the future.
-     *
-     * @default {}
-     */
-    slots?: {
-      first?: React.ElementType;
-      last?: React.ElementType;
-      next?: React.ElementType;
-      previous?: React.ElementType;
-    };
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The type of pagination item.
-     * @default 'page'
-     */
-    type?: UsePaginationItem['type'];
-    /**
-     * The variant to use.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & PaginationItemOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts
index 79f83abe781a23..4c35061f6e3395 100644
--- a/packages/mui-material/src/Paper/Paper.d.ts
+++ b/packages/mui-material/src/Paper/Paper.d.ts
@@ -40,10 +40,10 @@ export interface PaperOwnProps {
 
 export interface PaperTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps & PaperOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index 11be6fc28a2d0a..9d63b38de0d095 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -15,10 +15,10 @@ import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, color } = ownerState;
+  const { classes, color, size } = ownerState;
 
   const slots = {
-    root: ['root', `color${capitalize(color)}`],
+    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`],
   };
 
   return {
diff --git a/packages/mui-material/src/Radio/Radio.test.js b/packages/mui-material/src/Radio/Radio.test.js
index 1baac9c16566be..41a6f49919f911 100644
--- a/packages/mui-material/src/Radio/Radio.test.js
+++ b/packages/mui-material/src/Radio/Radio.test.js
@@ -40,6 +40,15 @@ describe('<Radio />', () => {
     });
   });
 
+  describe('prop: size', () => {
+    it('add sizeSmall class to the root element when the size prop equals "small"', () => {
+      const { getByRole } = render(<Radio size="small" />);
+      const radio = getByRole('radio');
+      const root = radio.parentElement;
+      expect(root).to.have.class(classes.sizeSmall);
+    });
+  });
+
   describe('with FormControl', () => {
     describe('enabled', () => {
       it('should not have the disabled class', () => {
diff --git a/packages/mui-material/src/Radio/radioClasses.ts b/packages/mui-material/src/Radio/radioClasses.ts
index 2d69c7f28760c9..952a87a66349ff 100644
--- a/packages/mui-material/src/Radio/radioClasses.ts
+++ b/packages/mui-material/src/Radio/radioClasses.ts
@@ -12,6 +12,8 @@ export interface RadioClasses {
   colorPrimary: string;
   /** Styles applied to the root element if `color="secondary"`. */
   colorSecondary: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
 }
 
 export type RadioClassKey = keyof RadioClasses;
@@ -26,6 +28,7 @@ const radioClasses: RadioClasses = generateUtilityClasses('MuiRadio', [
   'disabled',
   'colorPrimary',
   'colorSecondary',
+  'sizeSmall',
 ]);
 
 export default radioClasses;
diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
index 4a6844a67e5483..d4224ff66fefea 100644
--- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
+++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
@@ -1,34 +1,36 @@
-import { SxProps } from '@mui/system';
 import * as React from 'react';
+import { SxProps } from '@mui/system';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses';
 
+export interface ScopedCssBaselineOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ScopedCssBaselineClasses>;
+  /**
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
+   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * For browser support, check out https://caniuse.com/?search=color-scheme
+   */
+  enableColorScheme?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ScopedCssBaselineTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ScopedCssBaselineClasses>;
-    /**
-     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
-     * For browser support, check out https://caniuse.com/?search=color-scheme
-     */
-    enableColorScheme?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ScopedCssBaselineOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 6b8aa8a23bfd6a..0ee8903cc2cd83 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -835,6 +835,24 @@ describe('<Select />', () => {
 
       expect(getByTestId('paper').style).to.have.property('minWidth', '12px');
     });
+
+    // https://github.com/mui/material-ui/issues/38700
+    it('should merge `slotProps.paper` with the default Paper props', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const { getByTestId, getByRole } = render(
+        <Select MenuProps={{ slotProps: { paper: { 'data-testid': 'paper' } } }} open value="10">
+          <MenuItem value="10">Ten</MenuItem>
+        </Select>,
+      );
+
+      const paper = getByTestId('paper');
+      const selectButton = getByRole('button', { hidden: true });
+
+      expect(paper.style).to.have.property('minWidth', `${selectButton.clientWidth}px`);
+    });
   });
 
   describe('prop: SelectDisplayProps', () => {
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index ba51fc1925035a..72452dc1d88857 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -482,6 +482,11 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const paperProps = {
+    ...MenuProps.PaperProps,
+    ...MenuProps.slotProps?.paper,
+  };
+
   return (
     <React.Fragment>
       <SelectSelect
@@ -547,11 +552,13 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
           disableListWrap: true,
           ...MenuProps.MenuListProps,
         }}
-        PaperProps={{
-          ...MenuProps.PaperProps,
-          style: {
-            minWidth: menuMinWidth,
-            ...(MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null),
+        slotProps={{
+          paper: {
+            ...paperProps,
+            style: {
+              minWidth: menuMinWidth,
+              ...(paperProps != null ? paperProps.style : null),
+            },
           },
         }}
       >
diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts
index d9d23fa1b4ef71..1d4e9eda13c324 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -7,49 +7,51 @@ import { SkeletonClasses } from './skeletonClasses';
 
 export interface SkeletonPropsVariantOverrides {}
 
+export interface SkeletonOwnProps {
+  /**
+   * The animation.
+   * If `false` the animation effect is disabled.
+   * @default 'pulse'
+   */
+  animation?: 'pulse' | 'wave' | false;
+  /**
+   * Optional children to infer width and height from.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SkeletonClasses>;
+  /**
+   * Height of the skeleton.
+   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height?: number | string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of content that will be rendered.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<
+    'text' | 'rectangular' | 'rounded' | 'circular',
+    SkeletonPropsVariantOverrides
+  >;
+  /**
+   * Width of the skeleton.
+   * Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width?: number | string;
+}
+
 export interface SkeletonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
-  props: AdditionalProps & {
-    /**
-     * The animation.
-     * If `false` the animation effect is disabled.
-     * @default 'pulse'
-     */
-    animation?: 'pulse' | 'wave' | false;
-    /**
-     * Optional children to infer width and height from.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SkeletonClasses>;
-    /**
-     * Height of the skeleton.
-     * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
-     */
-    height?: number | string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The type of content that will be rendered.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<
-      'text' | 'rectangular' | 'rounded' | 'circular',
-      SkeletonPropsVariantOverrides
-    >;
-    /**
-     * Width of the skeleton.
-     * Useful when the skeleton is inside an inline element with no width of its own.
-     */
-    width?: number | string;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & SkeletonOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index 4ed6f79fa92dea..88f8fa340cc0e4 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -20,256 +20,258 @@ export interface SliderOwnerState extends SliderProps {
   focusedThumbIndex: number;
 }
 
+export interface SliderOwnProps {
+  /**
+   * The label of the slider.
+   */
+  'aria-label'?: string;
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  'aria-valuetext'?: string;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+    Track?: React.ElementType;
+    Rail?: React.ElementType;
+    Thumb?: React.ElementType;
+    Mark?: React.ElementType;
+    MarkLabel?: React.ElementType;
+    ValueLabel?: React.ElementType;
+    Input?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    valueLabel?: SlotComponentProps<
+      typeof SliderValueLabelComponent,
+      SliderComponentsPropsOverrides,
+      SliderOwnerState
+    >;
+    input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
+  };
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SliderClasses>;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: number | number[];
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap?: boolean;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   * This is important for screen reader users.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel?: (index: number) => string;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   * This is important for screen reader users.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText?: (value: number, index: number) => string;
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks?: boolean | Mark[];
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+  /**
+   * Callback function that is fired when the `mouseup` is triggered.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   */
+  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale?: (value: number) => number;
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides>;
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    valueLabel?: SlotComponentProps<
+      typeof SliderValueLabelComponent,
+      SliderComponentsPropsOverrides,
+      SliderOwnerState
+    >;
+    input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
+  };
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+    track?: React.ElementType;
+    rail?: React.ElementType;
+    thumb?: React.ElementType;
+    mark?: React.ElementType;
+    markLabel?: React.ElementType;
+    valueLabel?: React.ElementType;
+    input?: React.ElementType;
+  };
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step?: number | null;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex?: number;
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track?: 'normal' | false | 'inverted';
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: number | number[];
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay?: 'on' | 'auto' | 'off';
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
+}
+
 export interface SliderTypeMap<
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
   AdditionalProps = {},
 > {
-  props: AdditionalProps & {
-    /**
-     * The label of the slider.
-     */
-    'aria-label'?: string;
-    /**
-     * The id of the element containing a label for the slider.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * A string value that provides a user-friendly name for the current value of the slider.
-     */
-    'aria-valuetext'?: string;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;
-    /**
-     * The components used for each slot inside.
-     *
-     * This prop is an alias for the `slots` prop.
-     * It's recommended to use the `slots` prop instead.
-     *
-     * @default {}
-     */
-    components?: {
-      Root?: React.ElementType;
-      Track?: React.ElementType;
-      Rail?: React.ElementType;
-      Thumb?: React.ElementType;
-      Mark?: React.ElementType;
-      MarkLabel?: React.ElementType;
-      ValueLabel?: React.ElementType;
-      Input?: React.ElementType;
-    };
-    /**
-     * The extra props for the slot components.
-     * You can override the existing props or add new ones.
-     *
-     * This prop is an alias for the `slotProps` prop.
-     * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-     *
-     * @default {}
-     */
-    componentsProps?: {
-      root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      valueLabel?: SlotComponentProps<
-        typeof SliderValueLabelComponent,
-        SliderComponentsPropsOverrides,
-        SliderOwnerState
-      >;
-      input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
-    };
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SliderClasses>;
-    /**
-     * @ignore
-     */
-    className?: string;
-    /**
-     * The default value. Use when the component is not controlled.
-     */
-    defaultValue?: number | number[];
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
-     * @default false
-     */
-    disableSwap?: boolean;
-    /**
-     * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
-     * This is important for screen reader users.
-     * @param {number} index The thumb label's index to format.
-     * @returns {string}
-     */
-    getAriaLabel?: (index: number) => string;
-    /**
-     * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
-     * This is important for screen reader users.
-     * @param {number} value The thumb label's value to format.
-     * @param {number} index The thumb label's index to format.
-     * @returns {string}
-     */
-    getAriaValueText?: (value: number, index: number) => string;
-    /**
-     * Marks indicate predetermined values to which the user can move the slider.
-     * If `true` the marks are spaced according the value of the `step` prop.
-     * If an array, it should contain objects with `value` and an optional `label` keys.
-     * @default false
-     */
-    marks?: boolean | Mark[];
-    /**
-     * The maximum allowed value of the slider.
-     * Should not be equal to min.
-     * @default 100
-     */
-    max?: number;
-    /**
-     * The minimum allowed value of the slider.
-     * Should not be equal to max.
-     * @default 0
-     */
-    min?: number;
-    /**
-     * Name attribute of the hidden `input` element.
-     */
-    name?: string;
-    /**
-     * Callback function that is fired when the slider's value changed.
-     *
-     * @param {Event} event The event source of the callback.
-     * You can pull out the new value by accessing `event.target.value` (any).
-     * **Warning**: This is a generic event not a change event.
-     * @param {number | number[]} value The new value.
-     * @param {number} activeThumb Index of the currently moved thumb.
-     */
-    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
-    /**
-     * Callback function that is fired when the `mouseup` is triggered.
-     *
-     * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {number | number[]} value The new value.
-     */
-    onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
-    /**
-     * The component orientation.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * A transformation function, to change the scale of the slider.
-     * @param {any} x
-     * @returns {any}
-     * @default function Identity(x) {
-     *   return x;
-     * }
-     */
-    scale?: (value: number) => number;
-    /**
-     * The size of the slider.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides>;
-    /**
-     * The props used for each slot inside the Slider.
-     * @default {}
-     */
-    slotProps?: {
-      root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
-      valueLabel?: SlotComponentProps<
-        typeof SliderValueLabelComponent,
-        SliderComponentsPropsOverrides,
-        SliderOwnerState
-      >;
-      input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
-    };
-    /**
-     * The components used for each slot inside the Slider.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots?: {
-      root?: React.ElementType;
-      track?: React.ElementType;
-      rail?: React.ElementType;
-      thumb?: React.ElementType;
-      mark?: React.ElementType;
-      markLabel?: React.ElementType;
-      valueLabel?: React.ElementType;
-      input?: React.ElementType;
-    };
-    /**
-     * The granularity with which the slider can step through values. (A "discrete" slider.)
-     * The `min` prop serves as the origin for the valid values.
-     * We recommend (max - min) to be evenly divisible by the step.
-     *
-     * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
-     * @default 1
-     */
-    step?: number | null;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * Tab index attribute of the hidden `input` element.
-     */
-    tabIndex?: number;
-    /**
-     * The track presentation:
-     *
-     * - `normal` the track will render a bar representing the slider value.
-     * - `inverted` the track will render a bar representing the remaining slider value.
-     * - `false` the track will render without a bar.
-     * @default 'normal'
-     */
-    track?: 'normal' | false | 'inverted';
-    /**
-     * The value of the slider.
-     * For ranged sliders, provide an array with two values.
-     */
-    value?: number | number[];
-    /**
-     * Controls when the value label is displayed:
-     *
-     * - `auto` the value label will display when the thumb is hovered or focused.
-     * - `on` will display persistently.
-     * - `off` will never display.
-     * @default 'off'
-     */
-    valueLabelDisplay?: 'on' | 'auto' | 'off';
-    /**
-     * The format function the value label's value.
-     *
-     * When a function is provided, it should have the following signature:
-     *
-     * - {number} value The value label's value to format
-     * - {number} index The value label's index to format
-     * @param {any} x
-     * @returns {any}
-     * @default function Identity(x) {
-     *   return x;
-     * }
-     */
-    valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & SliderOwnProps;
+  defaultComponent: RootComponent;
 }
 
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
diff --git a/packages/mui-material/src/Stack/Stack.d.ts b/packages/mui-material/src/Stack/Stack.d.ts
index d0dfc9e4ad2f18..fe13177c0b0aae 100644
--- a/packages/mui-material/src/Stack/Stack.d.ts
+++ b/packages/mui-material/src/Stack/Stack.d.ts
@@ -3,47 +3,48 @@ import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system';
 import { OverrideProps, OverridableComponent } from '../OverridableComponent';
 import { Theme } from '../styles/createTheme';
 
+export interface StackOwnProps extends SystemProps<Theme> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Add an element between each child.
+   */
+  divider?: React.ReactNode;
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap?: boolean;
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface StackTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    SystemProps<Theme> & {
-      /**
-       * The content of the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Defines the `flex-direction` style property.
-       * It is applied for all screen sizes.
-       * @default 'column'
-       */
-      direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
-      /**
-       * Defines the space between immediate children.
-       * @default 0
-       */
-      spacing?: ResponsiveStyleValue<number | string>;
-      /**
-       * Add an element between each child.
-       */
-      divider?: React.ReactNode;
-      /**
-       * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-       *
-       * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-       * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-       *
-       * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
-       * @default false
-       */
-      useFlexGap?: boolean;
-      /**
-       * The system prop, which allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StackOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/Step/Step.d.ts b/packages/mui-material/src/Step/Step.d.ts
index 3effa7598ebb09..ccb6f1044ff242 100644
--- a/packages/mui-material/src/Step/Step.d.ts
+++ b/packages/mui-material/src/Step/Step.d.ts
@@ -4,53 +4,55 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
 import { StepClasses } from './stepClasses';
 
+export interface StepOwnProps {
+  /**
+   * Sets the step as active. Is passed to child components.
+   */
+  active?: boolean;
+  /**
+   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepClasses>;
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed?: boolean;
+  /**
+   * If `true`, the step is disabled, will also disable the button if
+   * `StepButton` is a child of `Step`. Is passed to child components.
+   */
+  disabled?: boolean;
+  /**
+   * Expand the step.
+   * @default false
+   */
+  expanded?: boolean;
+  /**
+   * The position of the step.
+   * The prop defaults to the value inherited from the parent Stepper component.
+   */
+  index?: number;
+  /**
+   * If `true`, the Step is displayed as rendered last.
+   * The prop defaults to the value inherited from the parent Stepper component.
+   */
+  last?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface StepTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Sets the step as active. Is passed to child components.
-     */
-    active?: boolean;
-    /**
-     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<StepClasses>;
-    /**
-     * Mark the step as completed. Is passed to child components.
-     */
-    completed?: boolean;
-    /**
-     * If `true`, the step is disabled, will also disable the button if
-     * `StepButton` is a child of `Step`. Is passed to child components.
-     */
-    disabled?: boolean;
-    /**
-     * Expand the step.
-     * @default false
-     */
-    expanded?: boolean;
-    /**
-     * The position of the step.
-     * The prop defaults to the value inherited from the parent Stepper component.
-     */
-    index?: number;
-    /**
-     * If `true`, the Step is displayed as rendered last.
-     * The prop defaults to the value inherited from the parent Stepper component.
-     */
-    last?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StepOwnProps;
+  defaultComponent: RootComponent;
 }
 
 export type StepProps<
diff --git a/packages/mui-material/src/StepButton/StepButton.d.ts b/packages/mui-material/src/StepButton/StepButton.d.ts
index 6cf99d0d9541e2..e5593d63872cc2 100644
--- a/packages/mui-material/src/StepButton/StepButton.d.ts
+++ b/packages/mui-material/src/StepButton/StepButton.d.ts
@@ -6,37 +6,39 @@ import { Theme } from '../styles';
 import { StepButtonClasses } from './stepButtonClasses';
 
 /**
- * @deprecated use `StepButtonProps['icon']` instead
+ * @deprecated use `StepButtonProps['icon']` instead.
  */
 export type StepButtonIcon = React.ReactNode;
 
+export interface StepButtonOwnProps {
+  /**
+   * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepButtonClasses>;
+  /**
+   * The icon displayed by the step label.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The optional node to display.
+   */
+  optional?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type StepButtonTypeMap<
   AdditionalProps,
-  DefaultComponent extends React.ElementType,
+  RootComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<StepButtonClasses>;
-    /**
-     * The icon displayed by the step label.
-     */
-    icon?: React.ReactNode;
-    /**
-     * The optional node to display.
-     */
-    optional?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StepButtonOwnProps;
+  defaultComponent: RootComponent;
 
   ignoredProps: 'disabled';
 }>;
diff --git a/packages/mui-material/src/Stepper/Stepper.d.ts b/packages/mui-material/src/Stepper/Stepper.d.ts
index 004f4d1c789a1b..05ed67c67e8662 100644
--- a/packages/mui-material/src/Stepper/Stepper.d.ts
+++ b/packages/mui-material/src/Stepper/Stepper.d.ts
@@ -7,53 +7,54 @@ import { StepperClasses } from './stepperClasses';
 
 export type Orientation = 'horizontal' | 'vertical';
 
+export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square' | 'variant'> {
+  /**
+   * Set the active step (zero based index).
+   * Set to -1 to disable all the steps.
+   * @default 0
+   */
+  activeStep?: number;
+  /**
+   * If set to 'true' and orientation is horizontal,
+   * then the step label will be positioned under the icon.
+   * @default false
+   */
+  alternativeLabel?: boolean;
+  /**
+   * Two or more `<Step />` components.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepperClasses>;
+  /**
+   * An element to be placed between each step.
+   * @default <StepConnector />
+   */
+  connector?: React.ReactElement<any, any> | null;
+  /**
+   * If set the `Stepper` will not assist in controlling steps for linear flow.
+   * @default false
+   */
+  nonLinear?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface StepperTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps &
-    Pick<PaperProps, 'elevation' | 'square' | 'variant'> & {
-      /**
-       * Set the active step (zero based index).
-       * Set to -1 to disable all the steps.
-       * @default 0
-       */
-      activeStep?: number;
-      /**
-       * If set to 'true' and orientation is horizontal,
-       * then the step label will be positioned under the icon.
-       * @default false
-       */
-      alternativeLabel?: boolean;
-      /**
-       * Two or more `<Step />` components.
-       */
-      children?: React.ReactNode;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<StepperClasses>;
-      /**
-       * An element to be placed between each step.
-       * @default <StepConnector />
-       */
-      connector?: React.ReactElement<any, any> | null;
-      /**
-       * If set the `Stepper` will not assist in controlling steps for linear flow.
-       * @default false
-       */
-      nonLinear?: boolean;
-      /**
-       * The component orientation (layout flow direction).
-       * @default 'horizontal'
-       */
-      orientation?: Orientation;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & StepperOwnProps;
+  defaultComponent: RootComponent;
 }
 
 export type StepperProps<
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts
index bb0e779712d57f..6400abc7aea08d 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts
@@ -9,84 +9,86 @@ export interface SvgIconPropsSizeOverrides {}
 
 export interface SvgIconPropsColorOverrides {}
 
+export interface SvgIconOwnProps {
+  /**
+   * Node passed into the SVG element.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SvgIconClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color?: OverridableStringUnion<
+    | 'inherit'
+    | 'action'
+    | 'disabled'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning',
+    SvgIconPropsColorOverrides
+  >;
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize?: OverridableStringUnion<
+    'inherit' | 'large' | 'medium' | 'small',
+    SvgIconPropsSizeOverrides
+  >;
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor?: string;
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox?: boolean;
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess?: string;
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox?: string;
+}
+
 export interface SvgIconTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'svg',
+  RootComponent extends React.ElementType = 'svg',
 > {
-  props: AdditionalProps & {
-    /**
-     * Node passed into the SVG element.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SvgIconClasses>;
-    /**
-     * The color of the component.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
-     * @default 'inherit'
-     */
-    color?: OverridableStringUnion<
-      | 'inherit'
-      | 'action'
-      | 'disabled'
-      | 'primary'
-      | 'secondary'
-      | 'error'
-      | 'info'
-      | 'success'
-      | 'warning',
-      SvgIconPropsColorOverrides
-    >;
-    /**
-     * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-     * @default 'medium'
-     */
-    fontSize?: OverridableStringUnion<
-      'inherit' | 'large' | 'medium' | 'small',
-      SvgIconPropsSizeOverrides
-    >;
-    /**
-     * Applies a color attribute to the SVG element.
-     */
-    htmlColor?: string;
-    /**
-     * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
-     * prop will be ignored.
-     * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-     * `component`'s viewBox to the root node.
-     * @default false
-     */
-    inheritViewBox?: boolean;
-    /**
-     * The shape-rendering attribute. The behavior of the different options is described on the
-     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
-     * If you are having issues with blurry icons you should investigate this prop.
-     */
-    shapeRendering?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * Provides a human-readable title for the element that contains it.
-     * https://www.w3.org/TR/SVG-access/#Equivalent
-     */
-    titleAccess?: string;
-    /**
-     * Allows you to redefine what the coordinates without units mean inside an SVG element.
-     * For example, if the SVG element is 500 (width) by 200 (height),
-     * and you pass viewBox="0 0 50 20",
-     * this means that the coordinates inside the SVG will go from the top left corner (0,0)
-     * to bottom right (50,20) and each unit will be worth 10px.
-     * @default '0 0 24 24'
-     */
-    viewBox?: string;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & SvgIconOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/Tab/Tab.d.ts b/packages/mui-material/src/Tab/Tab.d.ts
index cd3a444504deea..dc19a6eed31db4 100644
--- a/packages/mui-material/src/Tab/Tab.d.ts
+++ b/packages/mui-material/src/Tab/Tab.d.ts
@@ -5,59 +5,61 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TabClasses } from './tabClasses';
 
+export interface TabOwnProps {
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabClasses>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * The icon to display.
+   */
+  icon?: string | React.ReactElement;
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition?: 'top' | 'bottom' | 'start' | 'end';
+  /**
+   * The label element.
+   */
+  label?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value?: any;
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped?: boolean;
+}
+
 export type TabTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * This prop isn't supported.
-     * Use the `component` prop if you need to change the children structure.
-     */
-    children?: null;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TabClasses>;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * The icon to display.
-     */
-    icon?: string | React.ReactElement;
-    /**
-     * The position of the icon relative to the label.
-     * @default 'top'
-     */
-    iconPosition?: 'top' | 'bottom' | 'start' | 'end';
-    /**
-     * The label element.
-     */
-    label?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * You can provide your own value. Otherwise, we fallback to the child position index.
-     */
-    value?: any;
-    /**
-     * Tab labels appear in a single row.
-     * They can use a second line if needed.
-     * @default false
-     */
-    wrapped?: boolean;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TabOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/Table/Table.d.ts b/packages/mui-material/src/Table/Table.d.ts
index 965f71697f4873..cbc37912c61bbf 100644
--- a/packages/mui-material/src/Table/Table.d.ts
+++ b/packages/mui-material/src/Table/Table.d.ts
@@ -7,42 +7,44 @@ import { TableClasses } from './tableClasses';
 
 export interface TablePropsSizeOverrides {}
 
+export interface TableOwnProps {
+  /**
+   * The content of the table, normally `TableHead` and `TableBody`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableClasses>;
+  /**
+   * Allows TableCells to inherit padding of the Table.
+   * @default 'normal'
+   */
+  padding?: 'normal' | 'checkbox' | 'none';
+  /**
+   * Allows TableCells to inherit size of the Table.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>;
+  /**
+   * Set the header sticky.
+   *
+   * ⚠️ It doesn't work with IE11.
+   * @default false
+   */
+  stickyHeader?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TableTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'table',
+  RootComponent extends React.ElementType = 'table',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the table, normally `TableHead` and `TableBody`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableClasses>;
-    /**
-     * Allows TableCells to inherit padding of the Table.
-     * @default 'normal'
-     */
-    padding?: 'normal' | 'checkbox' | 'none';
-    /**
-     * Allows TableCells to inherit size of the Table.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>;
-    /**
-     * Set the header sticky.
-     *
-     * ⚠️ It doesn't work with IE11.
-     * @default false
-     */
-    stickyHeader?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/TableBody/TableBody.d.ts b/packages/mui-material/src/TableBody/TableBody.d.ts
index 769ab25d7da0ca..144f01676c378e 100644
--- a/packages/mui-material/src/TableBody/TableBody.d.ts
+++ b/packages/mui-material/src/TableBody/TableBody.d.ts
@@ -4,25 +4,27 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TableBodyClasses } from './tableBodyClasses';
 
+export interface TableBodyOwnProps {
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableBodyClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TableBodyTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'tbody',
+  RootComponent extends React.ElementType = 'tbody',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally `TableRow`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableBodyClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableBodyOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/TableContainer/TableContainer.d.ts b/packages/mui-material/src/TableContainer/TableContainer.d.ts
index 6bd3ba74d298bd..053af18e278bfa 100644
--- a/packages/mui-material/src/TableContainer/TableContainer.d.ts
+++ b/packages/mui-material/src/TableContainer/TableContainer.d.ts
@@ -4,25 +4,27 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TableContainerClasses } from './tableContainerClasses';
 
+export interface TableContainerOwnProps {
+  /**
+   * The content of the component, normally `Table`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableContainerClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TableContainerTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally `Table`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableContainerClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableContainerOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/TableFooter/TableFooter.d.ts b/packages/mui-material/src/TableFooter/TableFooter.d.ts
index 8c0441f06880ec..7dacb5fb80492b 100644
--- a/packages/mui-material/src/TableFooter/TableFooter.d.ts
+++ b/packages/mui-material/src/TableFooter/TableFooter.d.ts
@@ -4,25 +4,27 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TableFooterClasses } from './tableFooterClasses';
 
+export interface TableFooterOwnProps {
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableFooterClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TableFooterTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'tfoot',
+  RootComponent extends React.ElementType = 'tfoot',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally `TableRow`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableFooterClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableFooterOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/TableHead/TableHead.d.ts b/packages/mui-material/src/TableHead/TableHead.d.ts
index 446d039775ef70..8646071c5c0e4c 100644
--- a/packages/mui-material/src/TableHead/TableHead.d.ts
+++ b/packages/mui-material/src/TableHead/TableHead.d.ts
@@ -4,25 +4,27 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TableHeadClasses } from './tableHeadClasses';
 
+export interface TableHeadOwnProps {
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableHeadClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TableHeadTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'thead',
+  RootComponent extends React.ElementType = 'thead',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally `TableRow`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableHeadClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableHeadOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts
index da219dbd120ab8..851e6140d2e47f 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.d.ts
+++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts
@@ -15,116 +15,119 @@ export interface LabelDisplayedRowsArgs {
   page: number;
 }
 
-export interface TablePaginationTypeMap<
-  AdditionalProps,
-  DefaultComponent extends React.ElementType,
-> {
-  props: AdditionalProps &
-    TablePaginationBaseProps & {
-      /**
-       * The component used for displaying the actions.
-       * Either a string to use a HTML element or a component.
-       * @default TablePaginationActions
-       */
-      ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
-      /**
-       * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
-       */
-      backIconButtonProps?: Partial<IconButtonProps>;
-      /**
-       * Override or extend the styles applied to the component.
-       */
-      classes?: Partial<TablePaginationClasses>;
-      /**
-       * The total number of rows.
-       *
-       * To enable server side pagination for an unknown number of items, provide -1.
-       */
-      count: number;
-      /**
-       * Accepts a function which returns a string value that provides a user-friendly name for the current page.
-       * This is important for screen reader users.
-       *
-       * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-       * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
-       * @returns {string}
-       * @default function defaultGetAriaLabel(type) {
-       *   return `Go to ${type} page`;
-       * }
-       */
-      getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
-      /**
-       * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
-       * object.
-       *
-       * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-       * @default function defaultLabelDisplayedRows({ from, to, count }) {
-       *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-       * }
-       */
-      labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
-      /**
-       * Customize the rows per page label.
-       *
-       * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-       * @default 'Rows per page:'
-       */
-      labelRowsPerPage?: React.ReactNode;
-      /**
-       * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
-       */
-      nextIconButtonProps?: Partial<IconButtonProps>;
-      /**
-       * Callback fired when the page is changed.
-       *
-       * @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
-       * @param {number} page The page selected.
-       */
-      onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
-      /**
-       * Callback fired when the number of rows per page is changed.
-       *
-       * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
-       */
-      onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-      /**
-       * The zero-based index of the current page.
-       */
-      page: number;
-      /**
-       * The number of rows per page.
-       *
-       * Set -1 to display all the rows.
-       */
-      rowsPerPage: number;
-      /**
-       * Customizes the options of the rows per page select field. If less than two options are
-       * available, no select field will be displayed.
-       * Use -1 for the value with a custom label to show all the rows.
-       * @default [10, 25, 50, 100]
-       */
-      rowsPerPageOptions?: Array<number | { value: number; label: string }>;
-      /**
-       * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
-       * @default {}
-       */
-      SelectProps?: Partial<SelectProps>;
-      /**
-       * If `true`, show the first-page button.
-       * @default false
-       */
-      showFirstButton?: boolean;
-      /**
-       * If `true`, show the last-page button.
-       * @default false
-       */
-      showLastButton?: boolean;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: DefaultComponent;
+/**
+ * This type is kept for compatibility. Use `TablePaginationOwnProps` instead.
+ */
+export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;
+
+export interface TablePaginationOwnProps extends TablePaginationBaseProps {
+  /**
+   * The component used for displaying the actions.
+   * Either a string to use a HTML element or a component.
+   * @default TablePaginationActions
+   */
+  ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
+  /**
+   * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
+   */
+  backIconButtonProps?: Partial<IconButtonProps>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TablePaginationClasses>;
+  /**
+   * The total number of rows.
+   *
+   * To enable server side pagination for an unknown number of items, provide -1.
+   */
+  count: number;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+   * This is important for screen reader users.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
+   * @returns {string}
+   * @default function defaultGetAriaLabel(type) {
+   *   return `Go to ${type} page`;
+   * }
+   */
+  getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
+  /**
+   * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
+   * object.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default function defaultLabelDisplayedRows({ from, to, count }) {
+   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+   * }
+   */
+  labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
+  /**
+   * Customize the rows per page label.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default 'Rows per page:'
+   */
+  labelRowsPerPage?: React.ReactNode;
+  /**
+   * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
+   */
+  nextIconButtonProps?: Partial<IconButtonProps>;
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
+   * @param {number} page The page selected.
+   */
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
+  /**
+   * Callback fired when the number of rows per page is changed.
+   *
+   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
+   */
+  onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  /**
+   * The zero-based index of the current page.
+   */
+  page: number;
+  /**
+   * The number of rows per page.
+   *
+   * Set -1 to display all the rows.
+   */
+  rowsPerPage: number;
+  /**
+   * Customizes the options of the rows per page select field. If less than two options are
+   * available, no select field will be displayed.
+   * Use -1 for the value with a custom label to show all the rows.
+   * @default [10, 25, 50, 100]
+   */
+  rowsPerPageOptions?: Array<number | { value: number; label: string }>;
+  /**
+   * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
+   * @default {}
+   */
+  SelectProps?: Partial<SelectProps>;
+  /**
+   * If `true`, show the first-page button.
+   * @default false
+   */
+  showFirstButton?: boolean;
+  /**
+   * If `true`, show the last-page button.
+   * @default false
+   */
+  showLastButton?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface TablePaginationTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & TablePaginationOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
@@ -143,8 +146,6 @@ declare const TablePagination: OverridableComponent<
   TablePaginationTypeMap<{}, React.JSXElementConstructor<TablePaginationBaseProps>>
 >;
 
-export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;
-
 export type TablePaginationProps<
   RootComponent extends React.ElementType = React.JSXElementConstructor<TablePaginationBaseProps>,
   AdditionalProps = {},
diff --git a/packages/mui-material/src/TableRow/TableRow.d.ts b/packages/mui-material/src/TableRow/TableRow.d.ts
index aa696929aa91b5..7244439b1fc7a7 100644
--- a/packages/mui-material/src/TableRow/TableRow.d.ts
+++ b/packages/mui-material/src/TableRow/TableRow.d.ts
@@ -4,35 +4,37 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TableRowClasses } from './tableRowClasses';
 
+export interface TableRowOwnProps {
+  /**
+   * Should be valid <tr> children such as `TableCell`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableRowClasses>;
+  /**
+   * If `true`, the table row will shade on hover.
+   * @default false
+   */
+  hover?: boolean;
+  /**
+   * If `true`, the table row will have the selected shading.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface TableRowTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'tr',
+  RootComponent extends React.ElementType = 'tr',
 > {
-  props: AdditionalProps & {
-    /**
-     * Should be valid <tr> children such as `TableCell`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableRowClasses>;
-    /**
-     * If `true`, the table row will shade on hover.
-     * @default false
-     */
-    hover?: boolean;
-    /**
-     * If `true`, the table row will have the selected shading.
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableRowOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  * Will automatically set dynamic row height
diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
index 2684795d4ce11e..6c62dcdd5ddf6e 100644
--- a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
+++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
@@ -5,45 +5,49 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TableSortLabelClasses } from './tableSortLabelClasses';
 
+export interface TableSortLabelOwnProps {
+  /**
+   * If `true`, the label will have the active styling (should be true for the sorted column).
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Label contents, the arrow will be appended automatically.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TableSortLabelClasses>;
+  /**
+   * The current sort direction.
+   * @default 'asc'
+   */
+  direction?: 'asc' | 'desc';
+  /**
+   * Hide sort icon when active is false.
+   * @default false
+   */
+  hideSortIcon?: boolean;
+  /**
+   * Sort icon to use.
+   * @default ArrowDownwardIcon
+   */
+  IconComponent?: React.JSXElementConstructor<{
+    className: string;
+  }>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type TableSortLabelTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * If `true`, the label will have the active styling (should be true for the sorted column).
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * Label contents, the arrow will be appended automatically.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TableSortLabelClasses>;
-    /**
-     * The current sort direction.
-     * @default 'asc'
-     */
-    direction?: 'asc' | 'desc';
-    /**
-     * Hide sort icon when active is false.
-     * @default false
-     */
-    hideSortIcon?: boolean;
-    /**
-     * Sort icon to use.
-     * @default ArrowDownwardIcon
-     */
-    IconComponent?: React.JSXElementConstructor<{ className: string }>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & TableSortLabelOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/Tabs/Tabs.d.ts b/packages/mui-material/src/Tabs/Tabs.d.ts
index 336208b9c72135..a5c0d1949436ff 100644
--- a/packages/mui-material/src/Tabs/Tabs.d.ts
+++ b/packages/mui-material/src/Tabs/Tabs.d.ts
@@ -3,7 +3,6 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
-import ButtonBase from '../ButtonBase';
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TabsClasses } from './tabsClasses';
@@ -24,158 +23,162 @@ export interface TabsOwnerState extends TabsProps {
   scrollButtonsHideMobile: boolean;
 }
 
-export interface TabsTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = typeof ButtonBase,
-> {
-  props: AdditionalProps & {
-    /**
-     * Callback fired when the component mounts.
-     * This is useful when you want to trigger an action programmatically.
-     * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
-     *
-     * @param {object} actions This object contains all possible actions
-     * that can be triggered programmatically.
-     */
-    action?: React.Ref<TabsActions>;
-    /**
-     * If `true`, the scroll buttons aren't forced hidden on mobile.
-     * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
-     * @default false
-     */
-    allowScrollButtonsMobile?: boolean;
-    /**
-     * The label for the Tabs as a string.
-     */
-    'aria-label'?: string;
-    /**
-     * An id or list of ids separated by a space that label the Tabs.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * If `true`, the tabs are centered.
-     * This prop is intended for large views.
-     * @default false
-     */
-    centered?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<TabsClasses>;
-    /**
-     * The components used for each slot inside.
-     * @default {}
-     */
-    slots?: {
-      StartScrollButtonIcon?: React.ElementType;
-      EndScrollButtonIcon?: React.ElementType;
-    };
-    /**
-     * The extra props for the slot components.
-     * You can override the existing props or add new ones.
-     * @default {}
-     */
-    slotProps?: {
-      startScrollButtonIcon?: SlotComponentProps<
-        typeof SvgIcon,
-        TabsStartScrollButtonIconSlotPropsOverrides,
-        TabsOwnerState
-      >;
-      endScrollButtonIcon?: SlotComponentProps<
-        typeof SvgIcon,
-        TabsEndScrollButtonIconSlotPropsOverrides,
-        TabsOwnerState
-      >;
-    };
-    /**
-     * Determines the color of the indicator.
-     * @default 'primary'
-     */
-    indicatorColor?: OverridableStringUnion<
-      'secondary' | 'primary',
-      TabsPropsIndicatorColorOverrides
+export interface TabsOwnProps {
+  /**
+   * Callback fired when the component mounts.
+   * This is useful when you want to trigger an action programmatically.
+   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
+   *
+   * @param {object} actions This object contains all possible actions
+   * that can be triggered programmatically.
+   */
+  action?: React.Ref<TabsActions>;
+  /**
+   * If `true`, the scroll buttons aren't forced hidden on mobile.
+   * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
+   * @default false
+   */
+  allowScrollButtonsMobile?: boolean;
+  /**
+   * The label for the Tabs as a string.
+   */
+  'aria-label'?: string;
+  /**
+   * An id or list of ids separated by a space that label the Tabs.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * If `true`, the tabs are centered.
+   * This prop is intended for large views.
+   * @default false
+   */
+  centered?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabsClasses>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: {
+    StartScrollButtonIcon?: React.ElementType;
+    EndScrollButtonIcon?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps?: {
+    startScrollButtonIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      TabsStartScrollButtonIconSlotPropsOverrides,
+      TabsOwnerState
+    >;
+    endScrollButtonIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      TabsEndScrollButtonIconSlotPropsOverrides,
+      TabsOwnerState
     >;
-    /**
-     * Callback fired when the value changes.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {any} value We default to the index of the child (number)
-     */
-    onChange?: (event: React.SyntheticEvent, value: any) => void;
-    /**
-     * The component orientation (layout flow direction).
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The component used to render the scroll buttons.
-     * @default TabScrollButton
-     */
-    ScrollButtonComponent?: React.ElementType;
-    /**
-     * Determine behavior of scroll buttons when tabs are set to scroll:
-     *
-     * - `auto` will only present them when not all the items are visible.
-     * - `true` will always present them.
-     * - `false` will never present them.
-     *
-     * By default the scroll buttons are hidden on mobile.
-     * This behavior can be disabled with `allowScrollButtonsMobile`.
-     * @default 'auto'
-     */
-    scrollButtons?: 'auto' | true | false;
-    /**
-     * If `true` the selected tab changes on focus. Otherwise it only
-     * changes on activation.
-     */
-    selectionFollowsFocus?: boolean;
-    /**
-     * Props applied to the tab indicator element.
-     * @default  {}
-     */
-    TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
-    /**
-     * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
-     * @default {}
-     */
-    TabScrollButtonProps?: Partial<TabScrollButtonProps>;
-    /**
-     * Determines the color of the `Tab`.
-     * @default 'primary'
-     */
-    textColor?: 'secondary' | 'primary' | 'inherit';
-    /**
-     * The value of the currently selected `Tab`.
-     * If you don't want any selected `Tab`, you can set this prop to `false`.
-     */
-    value?: any;
-    /**
-     *  Determines additional display behavior of the tabs:
-     *
-     *  - `scrollable` will invoke scrolling properties and allow for horizontally
-     *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
-     *  which should be used for small views, like on mobile.
-     *  - `standard` will render the default state.
-     * @default 'standard'
-     */
-    variant?: 'standard' | 'scrollable' | 'fullWidth';
-    /**
-     * If `true`, the scrollbar is visible. It can be useful when displaying
-     * a long vertical list of tabs.
-     * @default false
-     */
-    visibleScrollbar?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
+  };
+  /**
+   * Determines the color of the indicator.
+   * @default 'primary'
+   */
+  indicatorColor?: OverridableStringUnion<
+    'secondary' | 'primary',
+    TabsPropsIndicatorColorOverrides
+  >;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {any} value We default to the index of the child (number)
+   */
+  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The component used to render the scroll buttons.
+   * @default TabScrollButton
+   */
+  ScrollButtonComponent?: React.ElementType;
+  /**
+   * Determine behavior of scroll buttons when tabs are set to scroll:
+   *
+   * - `auto` will only present them when not all the items are visible.
+   * - `true` will always present them.
+   * - `false` will never present them.
+   *
+   * By default the scroll buttons are hidden on mobile.
+   * This behavior can be disabled with `allowScrollButtonsMobile`.
+   * @default 'auto'
+   */
+  scrollButtons?: 'auto' | true | false;
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus?: boolean;
+  /**
+   * Props applied to the tab indicator element.
+   * @default  {}
+   */
+  TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
   };
-  defaultComponent: DefaultComponent;
+  /**
+   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
+   * @default {}
+   */
+  TabScrollButtonProps?: Partial<TabScrollButtonProps>;
+  /**
+   * Determines the color of the `Tab`.
+   * @default 'primary'
+   */
+  textColor?: 'secondary' | 'primary' | 'inherit';
+  /**
+   * The value of the currently selected `Tab`.
+   * If you don't want any selected `Tab`, you can set this prop to `false`.
+   */
+  value?: any;
+  /**
+   *  Determines additional display behavior of the tabs:
+   *
+   *  - `scrollable` will invoke scrolling properties and allow for horizontally
+   *  scrolling (or swiping) of the tab bar.
+   *  -`fullWidth` will make the tabs grow to use all the available space,
+   *  which should be used for small views, like on mobile.
+   *  - `standard` will render the default state.
+   * @default 'standard'
+   */
+  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  /**
+   * If `true`, the scrollbar is visible. It can be useful when displaying
+   * a long vertical list of tabs.
+   * @default false
+   */
+  visibleScrollbar?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface TabsTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & TabsOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-material/src/Tabs/Tabs.spec.tsx b/packages/mui-material/src/Tabs/Tabs.spec.tsx
index c52c946895b1db..979f67adcf5477 100644
--- a/packages/mui-material/src/Tabs/Tabs.spec.tsx
+++ b/packages/mui-material/src/Tabs/Tabs.spec.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { expectType } from '@mui/types';
 import Tabs from '@mui/material/Tabs';
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -50,3 +51,10 @@ function SampleIcon() {
     }),
   }}
 />;
+
+// Test for ref type
+<Tabs
+  ref={(elem) => {
+    expectType<HTMLDivElement | null, typeof elem>(elem);
+  }}
+/>;
diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts
index 668d531471fda5..84ab792b656bc7 100644
--- a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts
+++ b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts
@@ -10,79 +10,81 @@ export interface ToggleButtonPropsSizeOverrides {}
 
 export interface ToggleButtonPropsColorOverrides {}
 
+export interface ToggleButtonOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ToggleButtonClasses>;
+  /**
+   * The color of the button when it is in an active state.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<
+    'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    ToggleButtonPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Callback fired when the state changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
+   */
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * Callback fired when the button is clicked.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * If `true`, the button is rendered in an active state.
+   */
+  selected?: boolean;
+  /**
+   * The size of the component.
+   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The value to associate with the button when selected in a
+   * ToggleButtonGroup.
+   */
+  value: NonNullable<unknown>;
+}
+
 export type ToggleButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ToggleButtonClasses>;
-    /**
-     * The color of the button when it is in an active state.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'standard'
-     */
-    color?: OverridableStringUnion<
-      'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      ToggleButtonPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple is disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the button will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Callback fired when the state changes.
-     *
-     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
-     * @param {any} value of the selected button.
-     */
-    onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
-    /**
-     * Callback fired when the button is clicked.
-     *
-     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
-     * @param {any} value of the selected button.
-     */
-    onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
-    /**
-     * If `true`, the button is rendered in an active state.
-     */
-    selected?: boolean;
-    /**
-     * The size of the component.
-     * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The value to associate with the button when selected in a
-     * ToggleButtonGroup.
-     */
-    value: NonNullable<unknown>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ToggleButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**
diff --git a/packages/mui-material/src/Toolbar/Toolbar.d.ts b/packages/mui-material/src/Toolbar/Toolbar.d.ts
index cb0be2b10e4a34..d5755f4d309999 100644
--- a/packages/mui-material/src/Toolbar/Toolbar.d.ts
+++ b/packages/mui-material/src/Toolbar/Toolbar.d.ts
@@ -7,36 +7,38 @@ import { ToolbarClasses } from './toolbarClasses';
 
 export interface ToolbarPropsVariantOverrides {}
 
+export interface ToolbarOwnProps {
+  /**
+   * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
+   * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ToolbarClasses>;
+  /**
+   * If `true`, disables gutter padding.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * The variant to use.
+   * @default 'regular'
+   */
+  variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ToolbarTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
-     * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ToolbarClasses>;
-    /**
-     * If `true`, disables gutter padding.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * The variant to use.
-     * @default 'regular'
-     */
-    variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ToolbarOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *
diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts
index 646847c39e0477..4a24b024f7385d 100644
--- a/packages/mui-material/src/Typography/Typography.d.ts
+++ b/packages/mui-material/src/Typography/Typography.d.ts
@@ -75,10 +75,10 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
 
 export interface TypographyTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
   props: AdditionalProps & TypographyOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**
diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts
index 54b917af76e9d2..32bf76f15d13b5 100644
--- a/packages/mui-system/src/Box/Box.d.ts
+++ b/packages/mui-system/src/Box/Box.d.ts
@@ -170,27 +170,29 @@ export type SystemProps<Theme extends object = {}> = {
     | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>);
 };
 
+export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<SystemTheme> {
+  children?: React.ReactNode;
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
+  ref?: React.Ref<unknown>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface BoxTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
   Theme extends object = SystemTheme,
 > {
-  props: AdditionalProps &
-    SystemProps<Theme> & {
-      children?: React.ReactNode;
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: React.ElementType;
-      ref?: React.Ref<unknown>;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
+  props: AdditionalProps & BoxOwnProps<Theme>;
   defaultComponent: RootComponent;
 }
+
 /**
  *
  * Demos:
diff --git a/yarn.lock b/yarn.lock
index 361a9216f5739d..25cd7f54f3cb28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3821,15 +3821,6 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.2.tgz#ede1d1b1e451548d44919dc226253e32a6952c4b"
   integrity sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ==
 
-"@types/webpack@^5.28.1":
-  version "5.28.1"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-5.28.1.tgz#c369baeff31abe54b45f7f29997e1623604198d6"
-  integrity sha512-qw1MqGZclCoBrpiSe/hokSgQM/su8Ocpl3L/YHE0L6moyaypg4+5F7Uzq7NgaPKPxUxUbQ4fLPLpDWdR27bCZw==
-  dependencies:
-    "@types/node" "*"
-    tapable "^2.2.0"
-    webpack "^5"
-
 "@types/ws@^7.4.7":
   version "7.4.7"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702"
@@ -6429,15 +6420,7 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
-css-tree@^1.1.2, css-tree@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
-css-tree@^2.3.1:
+css-tree@^2.2.1, css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
   integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
@@ -6445,6 +6428,14 @@ css-tree@^2.3.1:
     mdn-data "2.0.30"
     source-map-js "^1.0.1"
 
+css-tree@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
+  integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==
+  dependencies:
+    mdn-data "2.0.28"
+    source-map-js "^1.0.1"
+
 css-unit-converter@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
@@ -6478,12 +6469,12 @@ cssjanus@^2.0.1:
   resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-2.1.0.tgz#6f99070e0b7cc79f826ea48c63c03cb250713af1"
   integrity sha512-kAijbny3GmdOi9k+QT6DGIXqFvL96aksNlGr4Rhk9qXDZYWUojU4bRc3IHWxdaLNOqgEZHuXoe5Wl2l7dxLW5g==
 
-csso@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+csso@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
+  integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
   dependencies:
-    css-tree "^1.1.2"
+    css-tree "~2.2.0"
 
 cssstyle@^3.0.0:
   version "3.0.0"
@@ -11465,10 +11456,10 @@ mdast-util-to-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
   integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
 
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+mdn-data@2.0.28:
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
+  integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
 
 mdn-data@2.0.30:
   version "2.0.30"
@@ -15306,11 +15297,6 @@ ssri@^9.0.0, ssri@^9.0.1:
   dependencies:
     minipass "^3.1.1"
 
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -15732,18 +15718,17 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
 
-svgo@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
-  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+svgo@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.0.2.tgz#5e99eeea42c68ee0dc46aa16da093838c262fe0a"
+  integrity sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==
   dependencies:
     "@trysound/sax" "0.2.0"
     commander "^7.2.0"
-    css-select "^4.1.3"
-    css-tree "^1.1.3"
-    csso "^4.2.0"
+    css-select "^5.1.0"
+    css-tree "^2.2.1"
+    csso "^5.0.5"
     picocolors "^1.0.0"
-    stable "^0.1.8"
 
 symbol-observable@^1.2.0:
   version "1.2.0"
@@ -16820,7 +16805,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5, webpack@^5.88.2:
+webpack@^5.88.2:
   version "5.88.2"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
   integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==