diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index f26b3a7062eaee..3f4e8616b1b561 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0
+        uses: github/codeql-action/init@f3feb00acb00f31a6f60280e6ace9ca31d91c76a # v2.3.2
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0
+        uses: github/codeql-action/analyze@f3feb00acb00f31a6f60280e6ace9ca31d91c76a # v2.3.2
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
index b34828a54bf706..a24dca121f0dee 100644
--- a/.github/workflows/scorecards.yml
+++ b/.github/workflows/scorecards.yml
@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0
+        uses: github/codeql-action/upload-sarif@f3feb00acb00f31a6f60280e6ace9ca31d91c76a # v2.3.2
         with:
           sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 810c550c19494a..2d04bd6c3d9b5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,125 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.12.3
+
+<!-- generated comparing v5.12.2..master -->
+
+_May 2, 2023_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- all planned breaking changes for Base UI are done. The first beta release should come next week 🎉
+- 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.12.3`
+
+- &#8203;<!-- 43 -->[Accordion] Add missing `component` type (#37111) @sai6855
+- &#8203;<!-- 23 -->[ButtonGroup] Should not retain divider color when it is disabled and variant is `text` (#36967) @DavidBoyer11
+- &#8203;<!-- 21 -->[Divider] Fix styles on dividers with text (#35072) @maxdestors
+- &#8203;<!-- 04 -->[TextField] Improve IntelliSense support for props (#36737) @sai6855
+- &#8203;<!-- 03 -->[TextField] Fix running click event on disabled (#36892) @sai6855
+
+### `@mui/joy@5.0.0-alpha.78`
+
+- &#8203;<!-- 09 -->[Joy] Miscellaneous fixes and docs improvement (#37026) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.128`
+
+#### Breaking changes
+
+- The `component` prop is no longer supported because it can be replaced with the slots API. This is how the transformation will look like:
+
+  ```diff
+   <Button
+  -  component="span"
+  +  slots={{ root: "span" }}
+   />
+  ```
+
+  If using TypeScript, the custom component type should be added as a generic on the `Button` component.
+
+  ```diff
+  -<Button
+  +<Button<typeof CustomComponent>
+     slots={{ root: CustomComponent }}
+     customProp="foo"
+   />
+  ```
+
+  There is codemod that you can run in your project to do the transformation:
+
+  ```sh
+  npx @mui/codemod v5.0.0/base-remove-component-prop <path>
+  ```
+
+  The full documentation about the codemod can be found [here](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#base-remove-component-prop).
+
+  This is the list of PR related to this change:
+
+  - &#8203;<!-- 40 -->[Button][base] Drop `component` prop (#36677) @mnajdova
+  - &#8203;<!-- 42 -->[Badge][base] Drop `component` prop (#37028) @hbjORbj
+  - &#8203;<!-- 37 -->[FormControl][base] Drop component prop (#37031) @hbjORbj
+  - &#8203;<!-- 35 -->[Input][base] Drop component prop (#37057) @hbjORbj
+  - &#8203;<!-- 34 -->[Menu][base] Drop component prop (#37033) @hbjORbj
+  - &#8203;<!-- 33 -->[MenuItem][base] Drop component prop (#37032) @hbjORbj
+  - &#8203;<!-- 32 -->[Modal][base] Drop component prop (#37058) @hbjORbj
+  - &#8203;<!-- 31 -->[Option][base] Drop component prop (#37052) @hbjORbj
+  - &#8203;<!-- 30 -->[OptionGroup][base] Drop component prop (#37055) @hbjORbj
+  - &#8203;<!-- 31 -->[Popper][base] Drop component prop (#37084) @hbjORbj
+  - &#8203;<!-- 29 -->[Select][base] Drop component prop (#37035) @hbjORbj
+  - &#8203;<!-- 28 -->[Slider][base] Drop component prop (#37056) @hbjORbj
+  - &#8203;<!-- 27 -->[Snackbar][base] Drop component prop (#37041) @nicolas-ot
+  - &#8203;<!-- 26 -->[Switch][base] Drop component prop (#37053) @hbjORbj
+  - &#8203;<!-- 25 -->[Tab][base] Drop component prop (#36768) @sai6855
+  - &#8203;<!-- 24 -->[Tabs][base] Drop component prop (#36770) @sai6855
+  - &#8203;<!-- 08 -->[TablePagination][base] Drop component prop (#37059) @sai6855
+  - &#8203;<!-- 07 -->[TabPanel][base] Drop component prop (#37054) @sai6855
+  - &#8203;<!-- 06 -->[TabsList][base] Drop component prop (#37042) @sai6855
+
+- &#8203;<!-- 41 -->[base] Improve API consistency (#36970) @michaldudak
+
+  Brought consistency to Base UI components and hooks' parameters and return values:
+
+  1. Whenever a hook needs a ref, it's now called `<slot_name>Ref`, which matches the `get<slot_name>Props` in the return value.
+  2. All hooks that accept external refs now return merged refs, making combining multiple hooks on one element easier. This was proven necessary in several compound components (like menuItem being both a button and a list item). The type of this value is `React.RefCallback` as using the more general `React.Ref` caused variance issues.
+  3. Type of accepted refs is standardized to `React.Ref<Element>`
+  4. Naming and typing of the forwarded ref in unstyled components were standardized - it's forwardedRef: React.ForwardedRef<Element> (unless a more specific type is needed).
+  5. The shape of the definition of unstyled components was standardized - it's React.forwardRef(function Component(props: Props, forwardedRef: React.Ref<Element>) { ... });. Specifically, the generic parameters of forwardRef were removed as they are specified in function arguments.
+
+#### Changes
+
+- &#8203;<!-- 36 -->[FormControl][base] Do not use optional fields in useFormControlContext's return value (#37037) @michaldudak
+
+### Docs
+
+- &#8203;<!-- 39 -->[base][docs] Add Base UI Quickstart Guide (#36717) @mj12albert
+- &#8203;<!-- 20 -->[docs] Fix Material UI's API linking to Base UI (#37121) @mnajdova
+- &#8203;<!-- 19 -->[docs] Fix pagination in the DataGrid demo (#37114) @cherniavskii
+- &#8203;<!-- 18 -->[docs] Add notification to the release of the new Time Picker UI (#37065) @joserodolfofreitas
+- &#8203;<!-- 17 -->[docs] Specify "Material UI" (not "MUI") where appropriate throughout the docs (#37066) @samuelsycamore
+- &#8203;<!-- 16 -->[docs] Use focus-visible instead of focus for Menu demos (#36847) @michaldudak
+- &#8203;<!-- 15 -->[docs] Fix small regressions API pages (#36972) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Handle a few docs-feedback (#36977) @oliviertassinari
+- &#8203;<!-- 13 -->[docs] Fix anchor link in customization (#37004) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Add a note about minimal required version for theme merging to the guides (#36973) @jakub-stastny
+- &#8203;<!-- 11 -->[docs] smooth scrolling added for `back to top` (#37011) @PunitSoniME
+- &#8203;<!-- 10 -->[docs] Remove `useFormControl` return values from demos page (#37036) @ZeeshanTamboli
+- &#8203;<!-- 47 --> [docs][base] Move styles to the bottom of demos code for `SwitchUnstyled` (#36720) @varunmulay22
+- &#8203;<!-- 46 --> [docs][base] Move styles to the bottom of demos code for `InputUnstyled` (#36724) @varunmulay22
+- &#8203;<!-- 45 --> [docs][base] Move styles to the bottom of demos code for `SliderUnstyled` (#36721) @varunmulay22
+- &#8203;<!-- 44 --> [docs][base] Move styles to the bottom of demos code for `Snackbar` (#36719) @varunmulay22
+- &#8203;<!-- 38 -->[docs][base] Move styles to the bottom of demos code for `SelectUnstyled` (#36718) @varunmulay22
+- &#8203;<!-- 05 -->[templates] Image not displayed in blog layout of React template. (#36991) @navedqb
+- &#8203;<!-- 02 -->[website] Take the design role offline @oliviertassinari
+- &#8203;<!-- 01 -->[website] Fix URL convention @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Turn off job banner on docs (#36080) @joserodolfofreitas
+
+### Core
+
+- &#8203;<!-- 22 -->[core] Allow type alias as well in hooks API docs generation (#37034) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @cherniavskii, @DavidBoyer11, @hbjORbj, @jakub-stastny, @joserodolfofreitas, @maxdestors, @michaldudak, @mj12albert, @mnajdova, @navedqb, @nicolas-ot, @oliviertassinari, @PunitSoniME, @sai6855, @samuelsycamore, @siriwatknp, @varunmulay22, @ZeeshanTamboli
+
 ## 5.12.2
 
 <!-- generated comparing v5.12.1..master -->
diff --git a/benchmark/package.json b/benchmark/package.json
index db5a7f7e7325cd..c27d62beebf794 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -11,13 +11,13 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@chakra-ui/system": "^2.5.5",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@chakra-ui/system": "^2.5.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@mdx-js/react": "^2.3.0",
-    "@mui/material": "^5.12.2",
-    "@mui/styles": "^5.12.0",
-    "@mui/system": "^5.12.1",
+    "@mui/material": "^5.12.3",
+    "@mui/styles": "^5.12.3",
+    "@mui/system": "^5.12.3",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.31.2",
diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
index f6e9b299140f19..4f82b8fd7ece91 100644
--- a/docs/.link-check-errors.txt
+++ b/docs/.link-check-errors.txt
@@ -1,6 +1,4 @@
 Broken links found by `yarn docs:link-check` that exist:
 
-- https://mui.com/base/react-portal/components-api/#portal
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
-- https://mui.com/material-ui/guides/minimizing-bundle-size/#legacy-bundle
 - https://mui.com/size-snapshot
diff --git a/docs/data/base/components/badge/badge-pt.md b/docs/data/base/components/badge/badge-pt.md
index af79492369dc0e..c4fb8290e7eb1a 100644
--- a/docs/data/base/components/badge/badge-pt.md
+++ b/docs/data/base/components/badge/badge-pt.md
@@ -21,7 +21,7 @@ The `BadgeUnstyled` component creates a badge that is applied to its child eleme
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import BadgeUnstyled from '@mui/base/BadgeUnstyled';
diff --git a/docs/data/base/components/badge/badge-zh.md b/docs/data/base/components/badge/badge-zh.md
index 79607246503b3f..32cb21a060cb63 100644
--- a/docs/data/base/components/badge/badge-zh.md
+++ b/docs/data/base/components/badge/badge-zh.md
@@ -21,7 +21,7 @@ The `BadgeUnstyled` component creates a badge that is applied to its child eleme
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import BadgeUnstyled from '@mui/base/BadgeUnstyled';
diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md
index 35937ce0265851..4ded956ef759e9 100644
--- a/docs/data/base/components/badge/badge.md
+++ b/docs/data/base/components/badge/badge.md
@@ -27,7 +27,7 @@ The Badge component creates a badge that is applied to its child element.
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Badge from '@mui/base/Badge';
@@ -59,27 +59,17 @@ The Badge component is composed of a root `<span>` that houses the element that
 </span>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<Badge component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Badge slots={{ root: 'div', badge: 'div' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -89,6 +79,20 @@ The following code snippet applies a CSS class called `my-badge` to the badge sl
 <Badge slotProps={{ badge: { className: 'my-badge' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Badge<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Badge<'img'> slots={{ root: 'img' }} src="badge.png" />
+```
+
 ## Hook
 
 ```jsx
diff --git a/docs/data/base/components/button/button-pt.md b/docs/data/base/components/button/button-pt.md
index 20114f6e2479ba..cb058b54820d18 100644
--- a/docs/data/base/components/button/button-pt.md
+++ b/docs/data/base/components/button/button-pt.md
@@ -20,7 +20,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
diff --git a/docs/data/base/components/button/button-zh.md b/docs/data/base/components/button/button-zh.md
index 4dfecd1c96c8a7..8ed68f32548e30 100644
--- a/docs/data/base/components/button/button-zh.md
+++ b/docs/data/base/components/button/button-zh.md
@@ -20,7 +20,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index f8247cbdff004a..fffeeccfa2a659 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -25,7 +25,7 @@ The Button component replaces the native HTML `<button>` element, and offers exp
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Button from '@mui/base/Button';
@@ -80,7 +80,7 @@ Similarly, `<Button slots={{ root: "span" }} type="reset">` will not reset its p
 
 #### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
diff --git a/docs/data/base/components/click-away-listener/click-away-listener-pt.md b/docs/data/base/components/click-away-listener/click-away-listener-pt.md
index fbf6bf6c8b0663..92003ad79f9711 100644
--- a/docs/data/base/components/click-away-listener/click-away-listener-pt.md
+++ b/docs/data/base/components/click-away-listener/click-away-listener-pt.md
@@ -23,7 +23,7 @@ This is useful for components like [`PopperUnstyled`](/base/react-popper/) which
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ClickAwayListener from '@mui/base/ClickAwayListener';
diff --git a/docs/data/base/components/click-away-listener/click-away-listener-zh.md b/docs/data/base/components/click-away-listener/click-away-listener-zh.md
index fbf6bf6c8b0663..92003ad79f9711 100644
--- a/docs/data/base/components/click-away-listener/click-away-listener-zh.md
+++ b/docs/data/base/components/click-away-listener/click-away-listener-zh.md
@@ -23,7 +23,7 @@ This is useful for components like [`PopperUnstyled`](/base/react-popper/) which
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ClickAwayListener from '@mui/base/ClickAwayListener';
diff --git a/docs/data/base/components/click-away-listener/click-away-listener.md b/docs/data/base/components/click-away-listener/click-away-listener.md
index fd006463aefebf..bdcaf3b8313a54 100644
--- a/docs/data/base/components/click-away-listener/click-away-listener.md
+++ b/docs/data/base/components/click-away-listener/click-away-listener.md
@@ -26,7 +26,7 @@ Click-Away Listener also supports the [Portal](/base/react-portal/) component.
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ClickAwayListener from '@mui/base/ClickAwayListener';
diff --git a/docs/data/base/components/focus-trap/focus-trap-pt.md b/docs/data/base/components/focus-trap/focus-trap-pt.md
index 5139c8846b0672..bb2e4d8bf0ab3c 100644
--- a/docs/data/base/components/focus-trap/focus-trap-pt.md
+++ b/docs/data/base/components/focus-trap/focus-trap-pt.md
@@ -19,7 +19,7 @@ githubLabel: 'component: FocusTrap'
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import FocusTrap from '@mui/base/FocusTrap';
diff --git a/docs/data/base/components/focus-trap/focus-trap-zh.md b/docs/data/base/components/focus-trap/focus-trap-zh.md
index 23860aeda082d5..6488e791d934e5 100644
--- a/docs/data/base/components/focus-trap/focus-trap-zh.md
+++ b/docs/data/base/components/focus-trap/focus-trap-zh.md
@@ -19,7 +19,7 @@ githubLabel: 'component: FocusTrap'
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import FocusTrap from '@mui/base/FocusTrap';
diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md
index 103aeb606faf7a..f1d686c4ad0b6d 100644
--- a/docs/data/base/components/focus-trap/focus-trap.md
+++ b/docs/data/base/components/focus-trap/focus-trap.md
@@ -21,7 +21,7 @@ Focus Trap is a utility component that's useful when implementing an overlay suc
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import FocusTrap from '@mui/base/FocusTrap';
diff --git a/docs/data/base/components/form-control/form-control-pt.md b/docs/data/base/components/form-control/form-control-pt.md
index 5258b73f0357a8..28ae64ab465a78 100644
--- a/docs/data/base/components/form-control/form-control-pt.md
+++ b/docs/data/base/components/form-control/form-control-pt.md
@@ -21,7 +21,7 @@ For instance, you may want to show an additional element asking the user to ente
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import FormControlUnstyled from '@mui/base/FormControlUnstyled';
diff --git a/docs/data/base/components/form-control/form-control-zh.md b/docs/data/base/components/form-control/form-control-zh.md
index 5258b73f0357a8..28ae64ab465a78 100644
--- a/docs/data/base/components/form-control/form-control-zh.md
+++ b/docs/data/base/components/form-control/form-control-zh.md
@@ -21,7 +21,7 @@ For instance, you may want to show an additional element asking the user to ente
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import FormControlUnstyled from '@mui/base/FormControlUnstyled';
diff --git a/docs/data/base/components/form-control/form-control.md b/docs/data/base/components/form-control/form-control.md
index 061fde37965e08..db30cf2a25a307 100644
--- a/docs/data/base/components/form-control/form-control.md
+++ b/docs/data/base/components/form-control/form-control.md
@@ -24,7 +24,7 @@ For instance, you may want to show an additional element asking the user to ente
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import FormControl from '@mui/base/FormControl';
@@ -53,6 +53,20 @@ Note that it also uses the `useFormControlContext` hook in order to pass props t
 
 {{"demo": "BasicFormControl.js"}}
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<FormControl<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<FormControl<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ## Hook
 
 ```jsx
diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js
index 694f34ba264a14..71e3963941b019 100644
--- a/docs/data/base/components/input/InputAdornments.js
+++ b/docs/data/base/components/input/InputAdornments.js
@@ -7,6 +7,85 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  const { slots, ...other } = props;
+  return (
+    <Input
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        ...slots,
+      }}
+      {...other}
+      ref={ref}
+    />
+  );
+});
+
+CustomInput.propTypes = {
+  /**
+   * The components used for each slot inside the InputBase.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType,
+    textarea: PropTypes.elementType,
+  }),
+};
+
+export default function InputAdornments() {
+  const [values, setValues] = React.useState({
+    amount: '',
+    password: '',
+    weight: '',
+    weightRange: '',
+    showPassword: false,
+  });
+
+  const handleChange = (prop) => (event) => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowPassword = () => {
+    setValues({
+      ...values,
+      showPassword: !values.showPassword,
+    });
+  };
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
+      <CustomInput
+        id="outlined-start-adornment"
+        startAdornment={<InputAdornment>kg</InputAdornment>}
+      />
+      <CustomInput
+        id="outlined-adornment-password"
+        type={values.showPassword ? 'text' : 'password'}
+        value={values.password}
+        onChange={handleChange('password')}
+        endAdornment={
+          <InputAdornment>
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+            >
+              {values.showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        }
+      />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -92,82 +171,3 @@ const InputAdornment = styled('div')`
   align-items: center;
   justify-content: center;
 `;
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  const { slots, ...other } = props;
-  return (
-    <Input
-      slots={{
-        root: StyledInputRoot,
-        input: StyledInputElement,
-        ...slots,
-      }}
-      {...other}
-      ref={ref}
-    />
-  );
-});
-
-CustomInput.propTypes = {
-  /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    input: PropTypes.elementType,
-    root: PropTypes.elementType,
-    textarea: PropTypes.elementType,
-  }),
-};
-
-export default function InputAdornments() {
-  const [values, setValues] = React.useState({
-    amount: '',
-    password: '',
-    weight: '',
-    weightRange: '',
-    showPassword: false,
-  });
-
-  const handleChange = (prop) => (event) => {
-    setValues({ ...values, [prop]: event.target.value });
-  };
-
-  const handleClickShowPassword = () => {
-    setValues({
-      ...values,
-      showPassword: !values.showPassword,
-    });
-  };
-
-  const handleMouseDownPassword = (event) => {
-    event.preventDefault();
-  };
-
-  return (
-    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
-      <CustomInput
-        id="outlined-start-adornment"
-        startAdornment={<InputAdornment>kg</InputAdornment>}
-      />
-      <CustomInput
-        id="outlined-adornment-password"
-        type={values.showPassword ? 'text' : 'password'}
-        value={values.password}
-        onChange={handleChange('password')}
-        endAdornment={
-          <InputAdornment>
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-            >
-              {values.showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          </InputAdornment>
-        }
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx
index 481c15387445f3..808931cc4476d6 100644
--- a/docs/data/base/components/input/InputAdornments.tsx
+++ b/docs/data/base/components/input/InputAdornments.tsx
@@ -6,6 +6,84 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const { slots, ...other } = props;
+  return (
+    <Input
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        ...slots,
+      }}
+      {...other}
+      ref={ref}
+    />
+  );
+});
+
+interface State {
+  amount: string;
+  password: string;
+  weight: string;
+  weightRange: string;
+  showPassword: boolean;
+}
+
+export default function InputAdornments() {
+  const [values, setValues] = React.useState<State>({
+    amount: '',
+    password: '',
+    weight: '',
+    weightRange: '',
+    showPassword: false,
+  });
+
+  const handleChange =
+    (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValues({ ...values, [prop]: event.target.value });
+    };
+
+  const handleClickShowPassword = () => {
+    setValues({
+      ...values,
+      showPassword: !values.showPassword,
+    });
+  };
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
+      <CustomInput
+        id="outlined-start-adornment"
+        startAdornment={<InputAdornment>kg</InputAdornment>}
+      />
+      <CustomInput
+        id="outlined-adornment-password"
+        type={values.showPassword ? 'text' : 'password'}
+        value={values.password}
+        onChange={handleChange('password')}
+        endAdornment={
+          <InputAdornment>
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+            >
+              {values.showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        }
+      />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -91,81 +169,3 @@ const InputAdornment = styled('div')`
   align-items: center;
   justify-content: center;
 `;
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const { slots, ...other } = props;
-  return (
-    <Input
-      slots={{
-        root: StyledInputRoot,
-        input: StyledInputElement,
-        ...slots,
-      }}
-      {...other}
-      ref={ref}
-    />
-  );
-});
-
-interface State {
-  amount: string;
-  password: string;
-  weight: string;
-  weightRange: string;
-  showPassword: boolean;
-}
-
-export default function InputAdornments() {
-  const [values, setValues] = React.useState<State>({
-    amount: '',
-    password: '',
-    weight: '',
-    weightRange: '',
-    showPassword: false,
-  });
-
-  const handleChange =
-    (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      setValues({ ...values, [prop]: event.target.value });
-    };
-
-  const handleClickShowPassword = () => {
-    setValues({
-      ...values,
-      showPassword: !values.showPassword,
-    });
-  };
-
-  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-  };
-
-  return (
-    <Box sx={{ display: 'flex', '& > * + *': { ml: 1 } }}>
-      <CustomInput
-        id="outlined-start-adornment"
-        startAdornment={<InputAdornment>kg</InputAdornment>}
-      />
-      <CustomInput
-        id="outlined-adornment-password"
-        type={values.showPassword ? 'text' : 'password'}
-        value={values.password}
-        onChange={handleChange('password')}
-        endAdornment={
-          <InputAdornment>
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-            >
-              {values.showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          </InputAdornment>
-        }
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
index d0ddeed1ed1f05..12af43e924dfe3 100644
--- a/docs/data/base/components/input/InputMultiline.js
+++ b/docs/data/base/components/input/InputMultiline.js
@@ -2,6 +2,22 @@ import * as React from 'react';
 import Input from '@mui/base/Input';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return (
+    <Input
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function InputMultiline() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -85,19 +101,3 @@ const StyledTextareaElement = styled('textarea', {
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return (
-    <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
index bfd960e0514ac1..d3a8e784bb388e 100644
--- a/docs/data/base/components/input/InputMultiline.tsx
+++ b/docs/data/base/components/input/InputMultiline.tsx
@@ -2,6 +2,25 @@ import * as React from 'react';
 import Input, { InputProps } from '@mui/base/Input';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <Input
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function InputMultiline() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -85,22 +104,3 @@ const StyledTextareaElement = styled('textarea', {
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
index 6f52efe5e6d270..475b1ee89d7c98 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.js
+++ b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -3,6 +3,22 @@ import Input from '@mui/base/Input';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return (
+    <Input
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function InputMultilineAutosize() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -83,19 +99,3 @@ const StyledTextareaElement = styled(TextareaAutosize)(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return (
-    <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
index f23e5e8f505f4a..a5639eaabf1996 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.tsx
+++ b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -3,6 +3,25 @@ import Input, { InputProps } from '@mui/base/Input';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <Input
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default function InputMultilineAutosize() {
+  return (
+    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -83,22 +102,3 @@ const StyledTextareaElement = styled(TextareaAutosize)(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function UnstyledInputBasic() {
-  return (
-    <CustomInput aria-label="Demo input" multiline placeholder="Type something…" />
-  );
-}
diff --git a/docs/data/base/components/input/UnstyledInputBasic.js b/docs/data/base/components/input/UnstyledInputBasic.js
index 40e5e3b44560a7..bdcfaa32765aa2 100644
--- a/docs/data/base/components/input/UnstyledInputBasic.js
+++ b/docs/data/base/components/input/UnstyledInputBasic.js
@@ -2,6 +2,14 @@ import * as React from 'react';
 import Input from '@mui/base/Input';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
+});
+
+export default function UnstyledInputBasic() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -52,11 +60,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
-});
-
-export default function UnstyledInputBasic() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx b/docs/data/base/components/input/UnstyledInputBasic.tsx
index 375e4cc049d325..6855b5801e13ac 100644
--- a/docs/data/base/components/input/UnstyledInputBasic.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic.tsx
@@ -2,6 +2,17 @@ import * as React from 'react';
 import Input, { InputProps } from '@mui/base/Input';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
+});
+
+export default function UnstyledInputBasic() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -52,14 +63,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: InputProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
-});
-
-export default function UnstyledInputBasic() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.js b/docs/data/base/components/input/UnstyledInputIntroduction.js
index 72cb1d0add4eb2..a4ac1068eb6c67 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction.js
@@ -2,6 +2,14 @@ import * as React from 'react';
 import Input from '@mui/base/Input';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
+});
+
+export default function UnstyledInputIntroduction() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#b6daff',
@@ -52,11 +60,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
-});
-
-export default function UnstyledInputIntroduction() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.tsx b/docs/data/base/components/input/UnstyledInputIntroduction.tsx
index a69ce7d4a30120..5faf387f0a3d09 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction.tsx
@@ -2,6 +2,17 @@ import * as React from 'react';
 import Input from '@mui/base/Input';
 import { styled } from '@mui/system';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: React.InputHTMLAttributes<HTMLInputElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
+});
+
+export default function UnstyledInputIntroduction() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#b6daff',
@@ -52,14 +63,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: React.InputHTMLAttributes<HTMLInputElement>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
-});
-
-export default function UnstyledInputIntroduction() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UseInput.js b/docs/data/base/components/input/UseInput.js
index 692fcd899be9c9..1fbc559f906243 100644
--- a/docs/data/base/components/input/UseInput.js
+++ b/docs/data/base/components/input/UseInput.js
@@ -3,6 +3,25 @@ import useInput from '@mui/base/useInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
+const CustomInput = React.forwardRef(function CustomInput(props, ref) {
+  const { getRootProps, getInputProps } = useInput(props);
+
+  const inputProps = getInputProps();
+
+  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
+  inputProps.ref = useForkRef(inputProps.ref, ref);
+
+  return (
+    <div {...getRootProps()}>
+      <StyledInputElement {...props} {...inputProps} />
+    </div>
+  );
+});
+
+export default function UseInput() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -53,22 +72,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  const { getRootProps, getInputProps } = useInput(props);
-
-  const inputProps = getInputProps();
-
-  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div {...getRootProps()}>
-      <StyledInputElement {...props} {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseInput() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/UseInput.tsx b/docs/data/base/components/input/UseInput.tsx
index f65a8bf9898950..7159ce62bf5789 100644
--- a/docs/data/base/components/input/UseInput.tsx
+++ b/docs/data/base/components/input/UseInput.tsx
@@ -3,6 +3,28 @@ import useInput from '@mui/base/useInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
+const CustomInput = React.forwardRef(function CustomInput(
+  props: React.InputHTMLAttributes<HTMLInputElement>,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  const { getRootProps, getInputProps } = useInput(props);
+
+  const inputProps = getInputProps();
+
+  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
+  inputProps.ref = useForkRef(inputProps.ref, ref);
+
+  return (
+    <div {...getRootProps()}>
+      <StyledInputElement {...props} {...inputProps} />
+    </div>
+  );
+});
+
+export default function UseInput() {
+  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -53,25 +75,3 @@ const StyledInputElement = styled('input')(
   }
 `,
 );
-
-const CustomInput = React.forwardRef(function CustomInput(
-  props: React.InputHTMLAttributes<HTMLInputElement>,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
-  const { getRootProps, getInputProps } = useInput(props);
-
-  const inputProps = getInputProps();
-
-  // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div {...getRootProps()}>
-      <StyledInputElement {...props} {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseInput() {
-  return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
-}
diff --git a/docs/data/base/components/input/input-pt.md b/docs/data/base/components/input/input-pt.md
index 6f6b67e0dc4eca..eba759f1ebf299 100644
--- a/docs/data/base/components/input/input-pt.md
+++ b/docs/data/base/components/input/input-pt.md
@@ -25,7 +25,7 @@ An input is a UI element that accepts text data from the user. The `InputUnstyle
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import InputUnstyled from '@mui/base/InputUnstyled';
diff --git a/docs/data/base/components/input/input-zh.md b/docs/data/base/components/input/input-zh.md
index 5848ed898fae8a..e9457bc30c454f 100644
--- a/docs/data/base/components/input/input-zh.md
+++ b/docs/data/base/components/input/input-zh.md
@@ -25,7 +25,7 @@ githubLabel: 'component: input'
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import InputUnstyled from '@mui/base/InputUnstyled';
diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
index 6100658cbe7f75..92ddeb1b6481d1 100644
--- a/docs/data/base/components/input/input.md
+++ b/docs/data/base/components/input/input.md
@@ -26,7 +26,7 @@ It can also be transformed into a `<textarea>` as needed.
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Input from '@mui/base/Input';
@@ -54,27 +54,17 @@ The Input component is composed of a root `<div>` slot that houses one interior
 </div>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<Input component="aside" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
-<Input slots={{ root: 'aside' }} />
+<Input slots={{ root: 'aside', input: CustomInput }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -84,6 +74,20 @@ The following code snippet applies a CSS class called `my-input` to the input sl
 <Input slotProps={{ input: { className: 'my-input' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Input<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Input<'textarea'> slots={{ root: 'textarea' }} rows={2} />
+```
+
 ## Hook
 
 ```js
diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
index 676b412e92db5f..8c83c65db3df1a 100644
--- a/docs/data/base/components/menu/MenuSimple.js
+++ b/docs/data/base/components/menu/MenuSimple.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -165,7 +166,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -187,7 +188,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
index a5944c9b6132b6..46f80e96f3fd78 100644
--- a/docs/data/base/components/menu/MenuSimple.tsx
+++ b/docs/data/base/components/menu/MenuSimple.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu, { MenuActions } from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -166,7 +167,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -188,7 +189,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
index 4c388e00ba5cfe..3810ac2ba22444 100644
--- a/docs/data/base/components/menu/UnstyledMenuIntroduction.js
+++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -163,7 +164,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -185,7 +186,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
index 631d3728b631cd..f5f713c39e2d51 100644
--- a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
+++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu, { MenuActions } from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -164,7 +165,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -186,7 +187,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 79fe2fe00b1e6d..ec615b0687a59f 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -238,7 +238,7 @@ const styles = `
       border-color: ${grey[300]};
     }
   
-    &:focus {
+    &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${blue[200]};
     }
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index ec5822adae19fd..b42425fa864d37 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -236,7 +236,7 @@ const styles = `
       border-color: ${grey[300]};
     }
   
-    &:focus {
+    &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${blue[200]};
     }
diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
index 2bcac287a266e7..9e4c596a097b32 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.js
+++ b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Menu from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
-import { buttonClasses } from '@mui/base/Button';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -199,7 +199,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
index 046d7c8fa670ea..2d62efd1277292 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.tsx
+++ b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Menu, { MenuActions } from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
-import { buttonClasses } from '@mui/base/Button';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -194,7 +194,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
diff --git a/docs/data/base/components/menu/menu-pt.md b/docs/data/base/components/menu/menu-pt.md
index 86ca857788fd15..961cba4691b136 100644
--- a/docs/data/base/components/menu/menu-pt.md
+++ b/docs/data/base/components/menu/menu-pt.md
@@ -22,7 +22,7 @@ Use `MenuItemUnstyled` to add items to the menu. These are rendered as `<li>` el
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import MenuUnstyled from '@mui/base/MenuUnstyled';
diff --git a/docs/data/base/components/menu/menu-zh.md b/docs/data/base/components/menu/menu-zh.md
index 86ca857788fd15..961cba4691b136 100644
--- a/docs/data/base/components/menu/menu-zh.md
+++ b/docs/data/base/components/menu/menu-zh.md
@@ -22,7 +22,7 @@ Use `MenuItemUnstyled` to add items to the menu. These are rendered as `<li>` el
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import MenuUnstyled from '@mui/base/MenuUnstyled';
diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md
index 970e32910a6cbe..aec9aa5ffd50cd 100644
--- a/docs/data/base/components/menu/menu.md
+++ b/docs/data/base/components/menu/menu.md
@@ -29,7 +29,7 @@ These are rendered as `<li>` elements.
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import Menu from '@mui/base/Menu';
@@ -68,27 +68,17 @@ The Menu Item has a single root `<li>` slot.
 </div>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<MenuItem component="span" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Menu slots={{ root: 'nav', listbox: 'ol' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -98,6 +88,20 @@ The following code snippet applies a CSS class called `my-listbox` to the listbo
 <Menu slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Menu<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Menu<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ### CSS classes
 
 Menu can set the following class:
diff --git a/docs/data/base/components/modal/modal-pt.md b/docs/data/base/components/modal/modal-pt.md
index ec1c3c5456abcb..39ffe7b712d12f 100644
--- a/docs/data/base/components/modal/modal-pt.md
+++ b/docs/data/base/components/modal/modal-pt.md
@@ -42,7 +42,7 @@ A modal [blocks interaction with the rest of the application](https://en.wikiped
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ModalUnstyled from '@mui/base/ModalUnstyled';
diff --git a/docs/data/base/components/modal/modal-zh.md b/docs/data/base/components/modal/modal-zh.md
index ec1c3c5456abcb..39ffe7b712d12f 100644
--- a/docs/data/base/components/modal/modal-zh.md
+++ b/docs/data/base/components/modal/modal-zh.md
@@ -42,7 +42,7 @@ A modal [blocks interaction with the rest of the application](https://en.wikiped
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import ModalUnstyled from '@mui/base/ModalUnstyled';
diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
index b4da706b4e8c5f..3aeee33e28823c 100644
--- a/docs/data/base/components/modal/modal.md
+++ b/docs/data/base/components/modal/modal.md
@@ -49,7 +49,7 @@ Modal is a lower-level construct that is used in the following Material UI compo
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Modal from '@mui/base/Modal';
diff --git a/docs/data/base/components/no-ssr/no-ssr-pt.md b/docs/data/base/components/no-ssr/no-ssr-pt.md
index 59c8b63e64adc2..91206d6a32c467 100644
--- a/docs/data/base/components/no-ssr/no-ssr-pt.md
+++ b/docs/data/base/components/no-ssr/no-ssr-pt.md
@@ -26,7 +26,7 @@ This component can be useful in a variety of situations:
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import NoSsr from '@mui/base/NoSsr';
diff --git a/docs/data/base/components/no-ssr/no-ssr-zh.md b/docs/data/base/components/no-ssr/no-ssr-zh.md
index 59c8b63e64adc2..91206d6a32c467 100644
--- a/docs/data/base/components/no-ssr/no-ssr-zh.md
+++ b/docs/data/base/components/no-ssr/no-ssr-zh.md
@@ -26,7 +26,7 @@ This component can be useful in a variety of situations:
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import NoSsr from '@mui/base/NoSsr';
diff --git a/docs/data/base/components/no-ssr/no-ssr.md b/docs/data/base/components/no-ssr/no-ssr.md
index 869bc06aadf12c..cb1d284b0c31a9 100644
--- a/docs/data/base/components/no-ssr/no-ssr.md
+++ b/docs/data/base/components/no-ssr/no-ssr.md
@@ -28,7 +28,7 @@ This component can be useful in a variety of situations:
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import NoSsr from '@mui/base/NoSsr';
diff --git a/docs/data/base/components/popper/popper-pt.md b/docs/data/base/components/popper/popper-pt.md
index 7d7d748bb256cd..08b62bd0f3bcb0 100644
--- a/docs/data/base/components/popper/popper-pt.md
+++ b/docs/data/base/components/popper/popper-pt.md
@@ -20,7 +20,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import PopperUnstyled from '@mui/base/PopperUnstyled';
diff --git a/docs/data/base/components/popper/popper-zh.md b/docs/data/base/components/popper/popper-zh.md
index 7d7d748bb256cd..08b62bd0f3bcb0 100644
--- a/docs/data/base/components/popper/popper-zh.md
+++ b/docs/data/base/components/popper/popper-zh.md
@@ -20,7 +20,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import PopperUnstyled from '@mui/base/PopperUnstyled';
diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md
index c771ca86982d24..88fe45a7b9f8aa 100644
--- a/docs/data/base/components/popper/popper.md
+++ b/docs/data/base/components/popper/popper.md
@@ -23,7 +23,7 @@ It relies on the third-party library ([Popper.js v2](https://popper.js.org/docs/
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Popper from '@mui/base/Popper';
diff --git a/docs/data/base/components/portal/portal-pt.md b/docs/data/base/components/portal/portal-pt.md
index ad1922f3522c75..d3b9a62c72be28 100644
--- a/docs/data/base/components/portal/portal-pt.md
+++ b/docs/data/base/components/portal/portal-pt.md
@@ -21,7 +21,7 @@ The `Portal` component is used internally by the [`ModalUnstyled`](/base/react-m
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Portal from '@mui/base/Portal';
diff --git a/docs/data/base/components/portal/portal-zh.md b/docs/data/base/components/portal/portal-zh.md
index ad1922f3522c75..d3b9a62c72be28 100644
--- a/docs/data/base/components/portal/portal-zh.md
+++ b/docs/data/base/components/portal/portal-zh.md
@@ -21,7 +21,7 @@ The `Portal` component is used internally by the [`ModalUnstyled`](/base/react-m
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Portal from '@mui/base/Portal';
diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md
index e107e7deec503c..1b0bd6d58dcb7a 100644
--- a/docs/data/base/components/portal/portal.md
+++ b/docs/data/base/components/portal/portal.md
@@ -24,7 +24,7 @@ The Portal component is used internally by the [Modal](/base/react-modal/) and [
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Portal from '@mui/base/Portal';
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.js b/docs/data/base/components/select/UnstyledSelectControlled.js
index 6137eecebfea67..0879dc2a26a7a8 100644
--- a/docs/data/base/components/select/UnstyledSelectControlled.js
+++ b/docs/data/base/components/select/UnstyledSelectControlled.js
@@ -5,6 +5,45 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectControlled() {
+  const [value, setValue] = React.useState(10);
+  return (
+    <div>
+      <CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
+        <StyledOption value={10}>Ten</StyledOption>
+        <StyledOption value={20}>Twenty</StyledOption>
+        <StyledOption value={30}>Thirty</StyledOption>
+      </CustomSelect>
+
+      <Paragraph>Selected value: {value}</Paragraph>
+    </div>
+  );
+}
+
+function CustomSelect(props) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -136,42 +175,3 @@ const Paragraph = styled('p')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
-
-function CustomSelect(props) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-export default function UnstyledSelectsMultiple() {
-  const [value, setValue] = React.useState(10);
-  return (
-    <div>
-      <CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
-        <StyledOption value={10}>Ten</StyledOption>
-        <StyledOption value={20}>Twenty</StyledOption>
-        <StyledOption value={30}>Thirty</StyledOption>
-      </CustomSelect>
-
-      <Paragraph>Selected value: {value}</Paragraph>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.tsx b/docs/data/base/components/select/UnstyledSelectControlled.tsx
index 9644a6c7ee4442..0fdb4b27a164ec 100644
--- a/docs/data/base/components/select/UnstyledSelectControlled.tsx
+++ b/docs/data/base/components/select/UnstyledSelectControlled.tsx
@@ -4,6 +4,32 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectControlled() {
+  const [value, setValue] = React.useState<number | null>(10);
+  return (
+    <div>
+      <CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
+        <StyledOption value={10}>Ten</StyledOption>
+        <StyledOption value={20}>Twenty</StyledOption>
+        <StyledOption value={30}>Thirty</StyledOption>
+      </CustomSelect>
+
+      <Paragraph>Selected value: {value}</Paragraph>
+    </div>
+  );
+}
+
+function CustomSelect(props: SelectProps<number, false>) {
+  const slots: SelectProps<number, false>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -135,29 +161,3 @@ const Paragraph = styled('p')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
-
-function CustomSelect(props: SelectProps<number, false>) {
-  const slots: SelectProps<number, false>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-export default function UnstyledSelectsMultiple() {
-  const [value, setValue] = React.useState<number | null>(10);
-  return (
-    <div>
-      <CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
-        <StyledOption value={10}>Ten</StyledOption>
-        <StyledOption value={20}>Twenty</StyledOption>
-        <StyledOption value={30}>Thirty</StyledOption>
-      </CustomSelect>
-
-      <Paragraph>Selected value: {value}</Paragraph>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
index 249fdb472a9b1e..af5549776f0497 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
@@ -6,6 +6,52 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectCustomRenderValue() {
+  return (
+    <CustomSelect renderValue={renderValue}>
+      <StyledOption value={10}>Ten</StyledOption>
+      <StyledOption value={20}>Twenty</StyledOption>
+      <StyledOption value={30}>Thirty</StyledOption>
+    </CustomSelect>
+  );
+}
+
+function CustomSelect(props) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
+function renderValue(option) {
+  if (option == null) {
+    return <span>Select an option...</span>;
+  }
+
+  return (
+    <span>
+      {option.label} ({option.value})
+    </span>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -127,49 +173,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-function CustomSelect(props) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-function renderValue(option) {
-  if (option == null) {
-    return <span>Select an option...</span>;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
-export default function UnstyledSelectCustomRenderValue() {
-  return (
-    <CustomSelect renderValue={renderValue}>
-      <StyledOption value={10}>Ten</StyledOption>
-      <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
index 94697207e8089a..c17f850637e4f4 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -5,6 +5,39 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectCustomRenderValue() {
+  return (
+    <CustomSelect renderValue={renderValue}>
+      <StyledOption value={10}>Ten</StyledOption>
+      <StyledOption value={20}>Twenty</StyledOption>
+      <StyledOption value={30}>Thirty</StyledOption>
+    </CustomSelect>
+  );
+}
+
+function CustomSelect(props: SelectProps<number, false>) {
+  const slots: SelectProps<number, false>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+function renderValue(option: SelectOption<number> | null) {
+  if (option == null) {
+    return <span>Select an option...</span>;
+  }
+
+  return (
+    <span>
+      {option.label} ({option.value})
+    </span>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -126,36 +159,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-function CustomSelect(props: SelectProps<number, false>) {
-  const slots: SelectProps<number, false>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-function renderValue(option: SelectOption<number> | null) {
-  if (option == null) {
-    return <span>Select an option...</span>;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
-export default function UnstyledSelectCustomRenderValue() {
-  return (
-    <CustomSelect renderValue={renderValue}>
-      <StyledOption value={10}>Ten</StyledOption>
-      <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectForm.js b/docs/data/base/components/select/UnstyledSelectForm.js
index 9be67272e7247a..81f9be6cf41122 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.js
+++ b/docs/data/base/components/select/UnstyledSelectForm.js
@@ -4,6 +4,42 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled, Box } from '@mui/system';
 
+export default function UnstyledSelectForm() {
+  return (
+    <div>
+      <Box sx={{ mb: 2 }}>
+        <Label htmlFor="unnamed-select">Default</Label>
+        <CustomSelect defaultValue={10} id="unnamed-select">
+          <StyledOption value={10}>Ten</StyledOption>
+          <StyledOption value={20}>Twenty</StyledOption>
+          <StyledOption value={30}>Thirty</StyledOption>
+        </CustomSelect>
+      </Box>
+      <Box>
+        <Label htmlFor="named-select">
+          With the <code>name</code> prop
+        </Label>
+        <CustomSelect defaultValue={10} id="named-select" name="demo-select">
+          <StyledOption value={10}>Ten</StyledOption>
+          <StyledOption value={20}>Twenty</StyledOption>
+          <StyledOption value={30}>Thirty</StyledOption>
+        </CustomSelect>
+      </Box>
+    </div>
+  );
+}
+
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+});
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -137,39 +173,3 @@ const Label = styled('label')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
-
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-});
-
-export default function UnstyledSelectForm() {
-  return (
-    <div>
-      <Box sx={{ mb: 2 }}>
-        <Label htmlFor="unnamed-select">Default</Label>
-        <CustomSelect defaultValue={10} id="unnamed-select">
-          <StyledOption value={10}>Ten</StyledOption>
-          <StyledOption value={20}>Twenty</StyledOption>
-          <StyledOption value={30}>Thirty</StyledOption>
-        </CustomSelect>
-      </Box>
-      <Box>
-        <Label htmlFor="named-select">
-          With the <code>name</code> prop
-        </Label>
-        <CustomSelect defaultValue={10} id="named-select" name="demo-select">
-          <StyledOption value={10}>Ten</StyledOption>
-          <StyledOption value={20}>Twenty</StyledOption>
-          <StyledOption value={30}>Thirty</StyledOption>
-        </CustomSelect>
-      </Box>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx
index da128a365cc322..0121d2c27d1aae 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectForm.tsx
@@ -4,6 +4,47 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled, Box } from '@mui/system';
 
+export default function UnstyledSelectForm() {
+  return (
+    <div>
+      <Box sx={{ mb: 2 }}>
+        <Label htmlFor="unnamed-select">Default</Label>
+        <CustomSelect defaultValue={10} id="unnamed-select">
+          <StyledOption value={10}>Ten</StyledOption>
+          <StyledOption value={20}>Twenty</StyledOption>
+          <StyledOption value={30}>Thirty</StyledOption>
+        </CustomSelect>
+      </Box>
+      <Box>
+        <Label htmlFor="named-select">
+          With the <code>name</code> prop
+        </Label>
+        <CustomSelect defaultValue={10} id="named-select" name="demo-select">
+          <StyledOption value={10}>Ten</StyledOption>
+          <StyledOption value={20}>Twenty</StyledOption>
+          <StyledOption value={30}>Thirty</StyledOption>
+        </CustomSelect>
+      </Box>
+    </div>
+  );
+}
+
+const CustomSelect = React.forwardRef(function CustomSelect<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const slots: SelectProps<TValue, Multiple>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+}) as <TValue extends {}, Multiple extends boolean>(
+  props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
+) => JSX.Element;
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -137,44 +178,3 @@ const Label = styled('label')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
-
-const CustomSelect = React.forwardRef(function CustomSelect<
-  TValue extends {},
-  Multiple extends boolean,
->(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
-  const slots: SelectProps<TValue, Multiple>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-}) as <TValue extends {}, Multiple extends boolean>(
-  props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
-
-export default function UnstyledSelectForm() {
-  return (
-    <div>
-      <Box sx={{ mb: 2 }}>
-        <Label htmlFor="unnamed-select">Default</Label>
-        <CustomSelect defaultValue={10} id="unnamed-select">
-          <StyledOption value={10}>Ten</StyledOption>
-          <StyledOption value={20}>Twenty</StyledOption>
-          <StyledOption value={30}>Thirty</StyledOption>
-        </CustomSelect>
-      </Box>
-      <Box>
-        <Label htmlFor="named-select">
-          With the <code>name</code> prop
-        </Label>
-        <CustomSelect defaultValue={10} id="named-select" name="demo-select">
-          <StyledOption value={10}>Ten</StyledOption>
-          <StyledOption value={20}>Twenty</StyledOption>
-          <StyledOption value={30}>Thirty</StyledOption>
-        </CustomSelect>
-      </Box>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.js b/docs/data/base/components/select/UnstyledSelectGrouping.js
index bb261103595c14..18bac7600e5b5d 100644
--- a/docs/data/base/components/select/UnstyledSelectGrouping.js
+++ b/docs/data/base/components/select/UnstyledSelectGrouping.js
@@ -6,6 +6,71 @@ import OptionGroup from '@mui/base/OptionGroup';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectGrouping() {
+  return (
+    <CustomSelect>
+      <CustomOptionGroup label="Hobbits">
+        <StyledOption value="Frodo">Frodo</StyledOption>
+        <StyledOption value="Sam">Sam</StyledOption>
+        <StyledOption value="Merry">Merry</StyledOption>
+        <StyledOption value="Pippin">Pippin</StyledOption>
+      </CustomOptionGroup>
+      <CustomOptionGroup label="Elves">
+        <StyledOption value="Galadriel">Galadriel</StyledOption>
+        <StyledOption value="Legolas">Legolas</StyledOption>
+      </CustomOptionGroup>
+    </CustomSelect>
+  );
+}
+
+function CustomSelect(props) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
+const CustomOptionGroup = React.forwardRef(function CustomOptionGroup(props, ref) {
+  const slots = {
+    root: StyledGroupRoot,
+    label: StyledGroupHeader,
+    list: StyledGroupOptions,
+    ...props.slots,
+  };
+
+  return <OptionGroup {...props} ref={ref} slots={slots} />;
+});
+
+CustomOptionGroup.propTypes = {
+  /**
+   * The components used for each slot inside the OptionGroup.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    list: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -152,68 +217,3 @@ const StyledGroupOptions = styled('ul')`
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-function CustomSelect(props) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-const CustomOptionGroup = React.forwardRef(function CustomOptionGroup(props, ref) {
-  const slots = {
-    root: StyledGroupRoot,
-    label: StyledGroupHeader,
-    list: StyledGroupOptions,
-    ...props.slots,
-  };
-
-  return <OptionGroup {...props} ref={ref} slots={slots} />;
-});
-
-CustomOptionGroup.propTypes = {
-  /**
-   * The components used for each slot inside the OptionGroup.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    label: PropTypes.elementType,
-    list: PropTypes.elementType,
-    root: PropTypes.elementType,
-  }),
-};
-
-export default function UnstyledSelectGrouping() {
-  return (
-    <CustomSelect>
-      <CustomOptionGroup label="Hobbits">
-        <StyledOption value="Frodo">Frodo</StyledOption>
-        <StyledOption value="Sam">Sam</StyledOption>
-        <StyledOption value="Merry">Merry</StyledOption>
-        <StyledOption value="Pippin">Pippin</StyledOption>
-      </CustomOptionGroup>
-      <CustomOptionGroup label="Elves">
-        <StyledOption value="Galadriel">Galadriel</StyledOption>
-        <StyledOption value="Legolas">Legolas</StyledOption>
-      </CustomOptionGroup>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.tsx b/docs/data/base/components/select/UnstyledSelectGrouping.tsx
index 45ebc06a326499..9065cf8efc65d0 100644
--- a/docs/data/base/components/select/UnstyledSelectGrouping.tsx
+++ b/docs/data/base/components/select/UnstyledSelectGrouping.tsx
@@ -5,6 +5,48 @@ import OptionGroup, { OptionGroupProps } from '@mui/base/OptionGroup';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectGrouping() {
+  return (
+    <CustomSelect>
+      <CustomOptionGroup label="Hobbits">
+        <StyledOption value="Frodo">Frodo</StyledOption>
+        <StyledOption value="Sam">Sam</StyledOption>
+        <StyledOption value="Merry">Merry</StyledOption>
+        <StyledOption value="Pippin">Pippin</StyledOption>
+      </CustomOptionGroup>
+      <CustomOptionGroup label="Elves">
+        <StyledOption value="Galadriel">Galadriel</StyledOption>
+        <StyledOption value="Legolas">Legolas</StyledOption>
+      </CustomOptionGroup>
+    </CustomSelect>
+  );
+}
+
+function CustomSelect(props: SelectProps<string, false>) {
+  const slots: SelectProps<string, false>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+const CustomOptionGroup = React.forwardRef(function CustomOptionGroup(
+  props: OptionGroupProps,
+  ref: React.ForwardedRef<any>,
+) {
+  const slots: OptionGroupProps['slots'] = {
+    root: StyledGroupRoot,
+    label: StyledGroupHeader,
+    list: StyledGroupOptions,
+    ...props.slots,
+  };
+
+  return <OptionGroup {...props} ref={ref} slots={slots} />;
+});
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -151,45 +193,3 @@ const StyledGroupOptions = styled('ul')`
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-function CustomSelect(props: SelectProps<string, false>) {
-  const slots: SelectProps<string, false>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-const CustomOptionGroup = React.forwardRef(function CustomOptionGroup(
-  props: OptionGroupProps,
-  ref: React.ForwardedRef<any>,
-) {
-  const slots: OptionGroupProps['slots'] = {
-    root: StyledGroupRoot,
-    label: StyledGroupHeader,
-    list: StyledGroupOptions,
-    ...props.slots,
-  };
-
-  return <OptionGroup {...props} ref={ref} slots={slots} />;
-});
-
-export default function UnstyledSelectGrouping() {
-  return (
-    <CustomSelect>
-      <CustomOptionGroup label="Hobbits">
-        <StyledOption value="Frodo">Frodo</StyledOption>
-        <StyledOption value="Sam">Sam</StyledOption>
-        <StyledOption value="Merry">Merry</StyledOption>
-        <StyledOption value="Pippin">Pippin</StyledOption>
-      </CustomOptionGroup>
-      <CustomOptionGroup label="Elves">
-        <StyledOption value="Galadriel">Galadriel</StyledOption>
-        <StyledOption value="Legolas">Legolas</StyledOption>
-      </CustomOptionGroup>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction.js b/docs/data/base/components/select/UnstyledSelectIntroduction.js
index 4f2407fbb4d26c..c7bd14ca76a68a 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction.js
@@ -6,6 +6,40 @@ import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+export default function UnstyledSelectIntroduction() {
+  return (
+    <CustomSelect defaultValue={10}>
+      <StyledOption value={10}>Documentation</StyledOption>
+      <StyledOption value={20}>Components</StyledOption>
+      <StyledOption value={30}>Features</StyledOption>
+    </CustomSelect>
+  );
+}
+
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+});
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -49,6 +83,7 @@ Button.propTypes = {
     defaultValue: PropTypes.any,
     disabled: PropTypes.bool.isRequired,
     focusVisible: PropTypes.bool.isRequired,
+    getOptionAsString: PropTypes.func,
     getSerializedValue: PropTypes.func,
     listboxId: PropTypes.string,
     listboxOpen: PropTypes.bool,
@@ -57,7 +92,6 @@ Button.propTypes = {
     onChange: PropTypes.func,
     onListboxOpenChange: PropTypes.func,
     open: PropTypes.bool.isRequired,
-    optionStringifier: PropTypes.func,
     renderValue: PropTypes.func,
     slotProps: PropTypes.shape({
       listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -171,37 +205,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-});
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-export default function UnstyledSelectIntroduction() {
-  return (
-    <CustomSelect defaultValue={10}>
-      <StyledOption value={10}>Documentation</StyledOption>
-      <StyledOption value={20}>Components</StyledOption>
-      <StyledOption value={30}>Features</StyledOption>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
index 91c62071c8f72d..cc1ad86ea481d6 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
@@ -9,6 +9,30 @@ import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+export default function UnstyledSelectIntroduction() {
+  return (
+    <CustomSelect defaultValue={10}>
+      <StyledOption value={10}>Documentation</StyledOption>
+      <StyledOption value={20}>Components</StyledOption>
+      <StyledOption value={30}>Features</StyledOption>
+    </CustomSelect>
+  );
+}
+
+const CustomSelect = React.forwardRef(function CustomSelect<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+});
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -145,27 +169,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-const CustomSelect = React.forwardRef(function CustomSelect<
-  TValue extends {},
-  Multiple extends boolean,
->(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-});
-
-export default function UnstyledSelectIntroduction() {
-  return (
-    <CustomSelect defaultValue={10}>
-      <StyledOption value={10}>Documentation</StyledOption>
-      <StyledOption value={20}>Components</StyledOption>
-      <StyledOption value={30}>Features</StyledOption>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js
index 75387fd0de1275..9ed3cad668b0c4 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.js
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.js
@@ -5,6 +5,42 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectsMultiple() {
+  return (
+    <CustomMultiSelect defaultValue={[10, 20]}>
+      <StyledOption value={10}>Ten</StyledOption>
+      <StyledOption value={20}>Twenty</StyledOption>
+      <StyledOption value={30}>Thirty</StyledOption>
+      <StyledOption value={40}>Forty</StyledOption>
+      <StyledOption value={50}>Fifty</StyledOption>
+    </CustomMultiSelect>
+  );
+}
+
+const CustomMultiSelect = React.forwardRef(function CustomMultiSelect(props, ref) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} multiple ref={ref} slots={slots} />;
+});
+
+CustomMultiSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -93,6 +129,7 @@ const StyledOption = styled(Option)(
   padding: 8px;
   border-radius: 8px;
   cursor: default;
+  transition: border-radius 300ms ease;
 
   &:last-of-type {
     border-bottom: none;
@@ -108,6 +145,20 @@ const StyledOption = styled(Option)(
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
+  @supports selector(:has(*)) {
+    &.${optionClasses.selected} {
+      & + .${optionClasses.selected} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:has(+ .${optionClasses.selected}) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
   &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
@@ -127,39 +178,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-const CustomMultiSelect = React.forwardRef(function CustomMultiSelect(props, ref) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} multiple ref={ref} slots={slots} />;
-});
-
-CustomMultiSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-export default function UnstyledSelectsMultiple() {
-  return (
-    <CustomMultiSelect defaultValue={[10, 20]}>
-      <StyledOption value={10}>Ten</StyledOption>
-      <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
-      <StyledOption value={40}>Forty</StyledOption>
-      <StyledOption value={50}>Fifty</StyledOption>
-    </CustomMultiSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
index 645ef62401a090..c0ff2f8b580e6d 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
@@ -4,6 +4,32 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectsMultiple() {
+  return (
+    <CustomMultiSelect defaultValue={[10, 20]}>
+      <StyledOption value={10}>Ten</StyledOption>
+      <StyledOption value={20}>Twenty</StyledOption>
+      <StyledOption value={30}>Thirty</StyledOption>
+      <StyledOption value={40}>Forty</StyledOption>
+      <StyledOption value={50}>Fifty</StyledOption>
+    </CustomMultiSelect>
+  );
+}
+
+const CustomMultiSelect = React.forwardRef(function CustomMultiSelect(
+  props: SelectProps<number, true>,
+  ref: React.ForwardedRef<any>,
+) {
+  const slots: SelectProps<number, true>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} multiple ref={ref} slots={slots} />;
+});
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -92,6 +118,7 @@ const StyledOption = styled(Option)(
   padding: 8px;
   border-radius: 8px;
   cursor: default;
+  transition: border-radius 300ms ease;
 
   &:last-of-type {
     border-bottom: none;
@@ -107,6 +134,20 @@ const StyledOption = styled(Option)(
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
+  @supports selector(:has(*)) {
+    &.${optionClasses.selected} {
+      & + .${optionClasses.selected} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:has(+ .${optionClasses.selected}) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
   &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
@@ -126,29 +167,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-const CustomMultiSelect = React.forwardRef(function CustomMultiSelect(
-  props: SelectProps<number, true>,
-  ref: React.ForwardedRef<any>,
-) {
-  const slots: SelectProps<number, true>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} multiple ref={ref} slots={slots} />;
-});
-
-export default function UnstyledSelectsMultiple() {
-  return (
-    <CustomMultiSelect defaultValue={[10, 20]}>
-      <StyledOption value={10}>Ten</StyledOption>
-      <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
-      <StyledOption value={40}>Forty</StyledOption>
-      <StyledOption value={50}>Fifty</StyledOption>
-    </CustomMultiSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.js b/docs/data/base/components/select/UnstyledSelectObjectValues.js
index 0c0ed3b0e4da69..24ec39fb6425bf 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.js
@@ -5,6 +5,58 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectObjectValues() {
+  const [character, setCharacter] = React.useState(characters[0]);
+  return (
+    <div>
+      <CustomSelect
+        value={character}
+        onChange={(event, newValue) => setCharacter(newValue)}
+      >
+        {characters.map((c) => (
+          <StyledOption key={c.name} value={c}>
+            {c.name}
+          </StyledOption>
+        ))}
+      </CustomSelect>
+      <Paragraph>Selected character:</Paragraph>
+      <Pre>{JSON.stringify(character, null, 2)}</Pre>
+    </div>
+  );
+}
+
+function CustomSelect(props) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
+const characters = [
+  { name: 'Frodo', race: 'Hobbit' },
+  { name: 'Sam', race: 'Hobbit' },
+  { name: 'Merry', race: 'Hobbit' },
+  { name: 'Gandalf', race: 'Maia' },
+  { name: 'Gimli', race: 'Dwarf' },
+];
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -150,55 +202,3 @@ const Pre = styled('pre')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
-
-function CustomSelect(props) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-const characters = [
-  { name: 'Frodo', race: 'Hobbit' },
-  { name: 'Sam', race: 'Hobbit' },
-  { name: 'Merry', race: 'Hobbit' },
-  { name: 'Gandalf', race: 'Maia' },
-  { name: 'Gimli', race: 'Dwarf' },
-];
-
-export default function UnstyledSelectObjectValues() {
-  const [character, setCharacter] = React.useState(characters[0]);
-  return (
-    <div>
-      <CustomSelect
-        value={character}
-        onChange={(e, newValue) => setCharacter(newValue)}
-      >
-        {characters.map((c) => (
-          <StyledOption key={c.name} value={c}>
-            {c.name}
-          </StyledOption>
-        ))}
-      </CustomSelect>
-      <Paragraph>Selected character:</Paragraph>
-      <Pre>{JSON.stringify(character, null, 2)}</Pre>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
index 73f2927c87c889..1351930071ab3b 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
@@ -4,6 +4,52 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+export default function UnstyledSelectObjectValues() {
+  const [character, setCharacter] = React.useState<Character | null>(characters[0]);
+  return (
+    <div>
+      <CustomSelect
+        value={character}
+        onChange={(event, newValue) => setCharacter(newValue)}
+      >
+        {characters.map((c) => (
+          <StyledOption key={c.name} value={c}>
+            {c.name}
+          </StyledOption>
+        ))}
+      </CustomSelect>
+      <Paragraph>Selected character:</Paragraph>
+      <Pre>{JSON.stringify(character, null, 2)}</Pre>
+    </div>
+  );
+}
+
+function CustomSelect<TValue extends {}, Multiple extends boolean = false>(
+  props: SelectProps<TValue, Multiple>,
+) {
+  const slots: SelectProps<TValue, Multiple>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+interface Character {
+  name: string;
+  race: string;
+}
+
+const characters: Character[] = [
+  { name: 'Frodo', race: 'Hobbit' },
+  { name: 'Sam', race: 'Hobbit' },
+  { name: 'Merry', race: 'Hobbit' },
+  { name: 'Gandalf', race: 'Maia' },
+  { name: 'Gimli', race: 'Dwarf' },
+];
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -149,49 +195,3 @@ const Pre = styled('pre')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
-
-function CustomSelect<TValue extends {}, Multiple extends boolean = false>(
-  props: SelectProps<TValue, Multiple>,
-) {
-  const slots: SelectProps<TValue, Multiple>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-interface Character {
-  name: string;
-  race: string;
-}
-
-const characters: Character[] = [
-  { name: 'Frodo', race: 'Hobbit' },
-  { name: 'Sam', race: 'Hobbit' },
-  { name: 'Merry', race: 'Hobbit' },
-  { name: 'Gandalf', race: 'Maia' },
-  { name: 'Gimli', race: 'Dwarf' },
-];
-
-export default function UnstyledSelectObjectValues() {
-  const [character, setCharacter] = React.useState<Character | null>(characters[0]);
-  return (
-    <div>
-      <CustomSelect
-        value={character}
-        onChange={(e, newValue) => setCharacter(newValue)}
-      >
-        {characters.map((c) => (
-          <StyledOption key={c.name} value={c}>
-            {c.name}
-          </StyledOption>
-        ))}
-      </CustomSelect>
-      <Paragraph>Selected character:</Paragraph>
-      <Pre>{JSON.stringify(character, null, 2)}</Pre>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview
index e0017db19d9b81..a961f3f0d5fb23 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview
@@ -1,6 +1,6 @@
 <CustomSelect
   value={character}
-  onChange={(e, newValue) => setCharacter(newValue)}
+  onChange={(event, newValue) => setCharacter(newValue)}
 >
   {characters.map((c) => (
     <StyledOption key={c.name} value={c}>
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
index b29e50e0fd0fe6..f014070c6e73a1 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
@@ -7,6 +7,112 @@ import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import Box from '@mui/system/Box';
 
+export default function UnstyledSelectObjectValuesForm() {
+  const getSerializedValue = (option) => {
+    if (option?.value == null) {
+      return '';
+    }
+
+    return `${option.value.race}.${option.value.name}`;
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    alert(`character=${formData.get('character')}`);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
+          <div>
+            <Label
+              id="object-value-default-label"
+              htmlFor="object-value-default-button"
+            >
+              Default behavior
+            </Label>
+            <CustomSelect
+              name="character"
+              id="object-value-default-button"
+              aria-labelledby="object-value-default-label object-value-default-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
+      </form>
+      <form onSubmit={handleSubmit}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end', mt: 2 }}>
+          <div>
+            <Label
+              id="object-value-serialize-label"
+              htmlFor="object-value-serialize-button"
+            >
+              Custom getSerializedValue
+            </Label>
+            <CustomSelect
+              getSerializedValue={getSerializedValue}
+              name="character"
+              id="object-value-serialize-button"
+              aria-labelledby="object-value-serialize-label object-value-serialize-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
+      </form>
+    </div>
+  );
+}
+
+function CustomSelect(props) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
+const characters = [
+  { name: 'Frodo', race: 'Hobbit' },
+  { name: 'Sam', race: 'Hobbit' },
+  { name: 'Merry', race: 'Hobbit' },
+  { name: 'Gandalf', race: 'Maia' },
+  { name: 'Gimli', race: 'Dwarf' },
+];
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -152,109 +258,3 @@ const Button = styled('button')`
     background-color: ${blue[600]};
   }
 `;
-
-function CustomSelect(props) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-const characters = [
-  { name: 'Frodo', race: 'Hobbit' },
-  { name: 'Sam', race: 'Hobbit' },
-  { name: 'Merry', race: 'Hobbit' },
-  { name: 'Gandalf', race: 'Maia' },
-  { name: 'Gimli', race: 'Dwarf' },
-];
-
-export default function UnstyledSelectObjectValuesForm() {
-  const getSerializedValue = (option) => {
-    if (option?.value == null) {
-      return '';
-    }
-
-    return `${option.value.race}.${option.value.name}`;
-  };
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    alert(`character=${formData.get('character')}`);
-  };
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
-          <div>
-            <Label
-              id="object-value-default-label"
-              htmlFor="object-value-default-button"
-            >
-              Default behavior
-            </Label>
-            <CustomSelect
-              name="character"
-              id="object-value-default-button"
-              aria-labelledby="object-value-default-label object-value-default-button"
-            >
-              {characters.map((character) => (
-                <StyledOption key={character.name} value={character}>
-                  {character.name}
-                </StyledOption>
-              ))}
-            </CustomSelect>
-          </div>
-          <Button sx={{ ml: 1 }} type="submit">
-            Submit
-          </Button>
-        </Box>
-      </form>
-      <form onSubmit={handleSubmit}>
-        <Box sx={{ display: 'flex', alignItems: 'flex-end', mt: 2 }}>
-          <div>
-            <Label
-              id="object-value-serialize-label"
-              htmlFor="object-value-serialize-button"
-            >
-              Custom getSerializedValue
-            </Label>
-            <CustomSelect
-              getSerializedValue={getSerializedValue}
-              name="character"
-              id="object-value-serialize-button"
-              aria-labelledby="object-value-serialize-label object-value-serialize-button"
-            >
-              {characters.map((character) => (
-                <StyledOption key={character.name} value={character}>
-                  {character.name}
-                </StyledOption>
-              ))}
-            </CustomSelect>
-          </div>
-          <Button sx={{ ml: 1 }} type="submit">
-            Submit
-          </Button>
-        </Box>
-      </form>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
index 02361ec06020ff..bffabf787c37f7 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
@@ -6,6 +6,106 @@ import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import Box from '@mui/system/Box';
 
+export default function UnstyledSelectObjectValuesForm() {
+  const getSerializedValue = (option: SelectOption<Character> | null) => {
+    if (option?.value == null) {
+      return '';
+    }
+
+    return `${option.value.race}.${option.value.name}`;
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    alert(`character=${formData.get('character')}`);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
+          <div>
+            <Label
+              id="object-value-default-label"
+              htmlFor="object-value-default-button"
+            >
+              Default behavior
+            </Label>
+            <CustomSelect
+              name="character"
+              id="object-value-default-button"
+              aria-labelledby="object-value-default-label object-value-default-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
+      </form>
+      <form onSubmit={handleSubmit}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end', mt: 2 }}>
+          <div>
+            <Label
+              id="object-value-serialize-label"
+              htmlFor="object-value-serialize-button"
+            >
+              Custom getSerializedValue
+            </Label>
+            <CustomSelect
+              getSerializedValue={getSerializedValue}
+              name="character"
+              id="object-value-serialize-button"
+              aria-labelledby="object-value-serialize-label object-value-serialize-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
+      </form>
+    </div>
+  );
+}
+
+function CustomSelect<TValue extends {}, Multiple extends boolean = false>(
+  props: SelectProps<TValue, Multiple>,
+) {
+  const slots: SelectProps<TValue, Multiple>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} slots={slots} />;
+}
+
+interface Character {
+  name: string;
+  race: string;
+}
+
+const characters: Character[] = [
+  { name: 'Frodo', race: 'Hobbit' },
+  { name: 'Sam', race: 'Hobbit' },
+  { name: 'Merry', race: 'Hobbit' },
+  { name: 'Gandalf', race: 'Maia' },
+  { name: 'Gimli', race: 'Dwarf' },
+];
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -151,103 +251,3 @@ const Button = styled('button')`
     background-color: ${blue[600]};
   }
 `;
-
-function CustomSelect<TValue extends {}, Multiple extends boolean = false>(
-  props: SelectProps<TValue, Multiple>,
-) {
-  const slots: SelectProps<TValue, Multiple>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} slots={slots} />;
-}
-
-interface Character {
-  name: string;
-  race: string;
-}
-
-const characters: Character[] = [
-  { name: 'Frodo', race: 'Hobbit' },
-  { name: 'Sam', race: 'Hobbit' },
-  { name: 'Merry', race: 'Hobbit' },
-  { name: 'Gandalf', race: 'Maia' },
-  { name: 'Gimli', race: 'Dwarf' },
-];
-
-export default function UnstyledSelectObjectValuesForm() {
-  const getSerializedValue = (option: SelectOption<Character> | null) => {
-    if (option?.value == null) {
-      return '';
-    }
-
-    return `${option.value.race}.${option.value.name}`;
-  };
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    alert(`character=${formData.get('character')}`);
-  };
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
-          <div>
-            <Label
-              id="object-value-default-label"
-              htmlFor="object-value-default-button"
-            >
-              Default behavior
-            </Label>
-            <CustomSelect
-              name="character"
-              id="object-value-default-button"
-              aria-labelledby="object-value-default-label object-value-default-button"
-            >
-              {characters.map((character) => (
-                <StyledOption key={character.name} value={character}>
-                  {character.name}
-                </StyledOption>
-              ))}
-            </CustomSelect>
-          </div>
-          <Button sx={{ ml: 1 }} type="submit">
-            Submit
-          </Button>
-        </Box>
-      </form>
-      <form onSubmit={handleSubmit}>
-        <Box sx={{ display: 'flex', alignItems: 'flex-end', mt: 2 }}>
-          <div>
-            <Label
-              id="object-value-serialize-label"
-              htmlFor="object-value-serialize-button"
-            >
-              Custom getSerializedValue
-            </Label>
-            <CustomSelect
-              getSerializedValue={getSerializedValue}
-              name="character"
-              id="object-value-serialize-button"
-              aria-labelledby="object-value-serialize-label object-value-serialize-button"
-            >
-              {characters.map((character) => (
-                <StyledOption key={character.name} value={character}>
-                  {character.name}
-                </StyledOption>
-              ))}
-            </CustomSelect>
-          </div>
-          <Button sx={{ ml: 1 }} type="submit">
-            Submit
-          </Button>
-        </Box>
-      </form>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
index 9edbb0cdb5dd65..e5f9e908814661 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.js
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -5,6 +5,49 @@ import Option, { optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
 import { Popper } from '@mui/base';
 
+export default function UnstyledSelectRichOptions() {
+  return (
+    <CustomSelect>
+      {countries.map((c) => (
+        <StyledOption key={c.code} value={c.code} label={c.label}>
+          <img
+            loading="lazy"
+            width="20"
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
+            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            alt={`Flag of ${c.label}`}
+          />
+          {c.label} ({c.code}) +{c.phone}
+        </StyledOption>
+      ))}
+    </CustomSelect>
+  );
+}
+
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+});
+
+CustomSelect.propTypes = {
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -133,49 +176,6 @@ const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
 
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-});
-
-CustomSelect.propTypes = {
-  /**
-   * The components used for each slot inside the Select.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    listbox: PropTypes.elementType,
-    popper: PropTypes.func,
-    root: PropTypes.elementType,
-  }),
-};
-
-export default function UnstyledSelectRichOptions() {
-  return (
-    <CustomSelect>
-      {countries.map((c) => (
-        <StyledOption key={c.code} value={c.code} label={c.label}>
-          <img
-            loading="lazy"
-            width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-            alt={`Flag of ${c.label}`}
-          />
-          {c.label} ({c.code}) +{c.phone}
-        </StyledOption>
-      ))}
-    </CustomSelect>
-  );
-}
-
 const countries = [
   { code: 'AD', label: 'Andorra', phone: '376' },
   {
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index d86ba333f614d0..eb4888eea5cef0 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -4,6 +4,39 @@ import Option, { optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
 import { Popper } from '@mui/base';
 
+export default function UnstyledSelectRichOptions() {
+  return (
+    <CustomSelect>
+      {countries.map((c) => (
+        <StyledOption key={c.code} value={c.code} label={c.label}>
+          <img
+            loading="lazy"
+            width="20"
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
+            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            alt={`Flag of ${c.label}`}
+          />
+          {c.label} ({c.code}) +{c.phone}
+        </StyledOption>
+      ))}
+    </CustomSelect>
+  );
+}
+
+const CustomSelect = React.forwardRef(function CustomSelect(
+  props: SelectProps<number, false>,
+  ref: React.ForwardedRef<any>,
+) {
+  const slots: SelectProps<number, false>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+});
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -132,39 +165,6 @@ const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
 
-const CustomSelect = React.forwardRef(function CustomSelect(
-  props: SelectProps<number, false>,
-  ref: React.ForwardedRef<any>,
-) {
-  const slots: SelectProps<number, false>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-});
-
-export default function UnstyledSelectRichOptions() {
-  return (
-    <CustomSelect>
-      {countries.map((c) => (
-        <StyledOption key={c.code} value={c.code} label={c.label}>
-          <img
-            loading="lazy"
-            width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-            alt={`Flag of ${c.label}`}
-          />
-          {c.label} ({c.code}) +{c.phone}
-        </StyledOption>
-      ))}
-    </CustomSelect>
-  );
-}
-
 const countries = [
   { code: 'AD', label: 'Andorra', phone: '376' },
   {
diff --git a/docs/data/base/components/select/UnstyledSelectSimple.js b/docs/data/base/components/select/UnstyledSelectSimple.js
index f52f6fcaedc8e7..dadc162ce7c527 100644
--- a/docs/data/base/components/select/UnstyledSelectSimple.js
+++ b/docs/data/base/components/select/UnstyledSelectSimple.js
@@ -4,6 +4,27 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  const slots = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+});
+
+export default function UnstyledSelectSimple() {
+  return (
+    <CustomSelect defaultValue={10}>
+      <StyledOption value={10}>Ten</StyledOption>
+      <StyledOption value={20}>Twenty</StyledOption>
+      <StyledOption value={30}>Thirty</StyledOption>
+    </CustomSelect>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -126,24 +147,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
-  const slots = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-});
-
-export default function UnstyledSelectSimple() {
-  return (
-    <CustomSelect defaultValue={10}>
-      <StyledOption value={10}>Ten</StyledOption>
-      <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UnstyledSelectSimple.tsx b/docs/data/base/components/select/UnstyledSelectSimple.tsx
index 627d6f5d8dfd65..ef9e24e5788f87 100644
--- a/docs/data/base/components/select/UnstyledSelectSimple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectSimple.tsx
@@ -4,6 +4,32 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
+const CustomSelect = React.forwardRef(function CustomSelect<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const slots: SelectProps<TValue, Multiple>['slots'] = {
+    root: StyledButton,
+    listbox: StyledListbox,
+    popper: StyledPopper,
+    ...props.slots,
+  };
+
+  return <Select {...props} ref={ref} slots={slots} />;
+}) as <TValue extends {}, Multiple extends boolean>(
+  props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
+) => JSX.Element;
+
+export default function UnstyledSelectSimple() {
+  return (
+    <CustomSelect defaultValue={10}>
+      <StyledOption value={10}>Ten</StyledOption>
+      <StyledOption value={20}>Twenty</StyledOption>
+      <StyledOption value={30}>Thirty</StyledOption>
+    </CustomSelect>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -126,29 +152,3 @@ const StyledOption = styled(Option)(
 const StyledPopper = styled(Popper)`
   z-index: 1;
 `;
-
-const CustomSelect = React.forwardRef(function CustomSelect<
-  TValue extends {},
-  Multiple extends boolean,
->(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
-  const slots: SelectProps<TValue, Multiple>['slots'] = {
-    root: StyledButton,
-    listbox: StyledListbox,
-    popper: StyledPopper,
-    ...props.slots,
-  };
-
-  return <Select {...props} ref={ref} slots={slots} />;
-}) as <TValue extends {}, Multiple extends boolean>(
-  props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
-
-export default function UnstyledSelectSimple() {
-  return (
-    <CustomSelect defaultValue={10}>
-      <StyledOption value={10}>Ten</StyledOption>
-      <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
-    </CustomSelect>
-  );
-}
diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js
index 06dee98243853f..7ca7ddfa333764 100644
--- a/docs/data/base/components/select/UseSelect.js
+++ b/docs/data/base/components/select/UseSelect.js
@@ -6,6 +6,10 @@ import useOption from '@mui/base/useOption';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+export default function UseSelect() {
+  return <CustomSelect placeholder="Select a color…" options={options} />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -241,7 +245,3 @@ const options = [
     value: '#2196F3',
   },
 ];
-
-export default function UseSelect() {
-  return <CustomSelect placeholder="Select a color…" options={options} />;
-}
diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx
index d63b5ab70d13ee..9d872717f38b57 100644
--- a/docs/data/base/components/select/UseSelect.tsx
+++ b/docs/data/base/components/select/UseSelect.tsx
@@ -8,6 +8,10 @@ import useOption from '@mui/base/useOption';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+export default function UseSelect() {
+  return <CustomSelect placeholder="Select a color…" options={options} />;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -243,7 +247,3 @@ const options = [
     value: '#2196F3',
   },
 ];
-
-export default function UseSelect() {
-  return <CustomSelect placeholder="Select a color…" options={options} />;
-}
diff --git a/docs/data/base/components/select/select-pt.md b/docs/data/base/components/select/select-pt.md
index 6e80a92ca1a384..abb7e73c28897c 100644
--- a/docs/data/base/components/select/select-pt.md
+++ b/docs/data/base/components/select/select-pt.md
@@ -28,7 +28,7 @@ Base UI offers two components to replace the native HTML `<select>` tag: `Select
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import SelectUnstyled from '@mui/base/SelectUnstyled';
diff --git a/docs/data/base/components/select/select-zh.md b/docs/data/base/components/select/select-zh.md
index 6e80a92ca1a384..abb7e73c28897c 100644
--- a/docs/data/base/components/select/select-zh.md
+++ b/docs/data/base/components/select/select-zh.md
@@ -28,7 +28,7 @@ Base UI offers two components to replace the native HTML `<select>` tag: `Select
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import SelectUnstyled from '@mui/base/SelectUnstyled';
diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
index 16e9ee389d8fd3..0c550540352b71 100644
--- a/docs/data/base/components/select/select.md
+++ b/docs/data/base/components/select/select.md
@@ -34,7 +34,7 @@ It also includes Option for creating the options on the list, and Option Group f
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import Select from '@mui/base/Select';
@@ -112,27 +112,17 @@ Option renders as an `<li>`:
 </div>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<Select component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Select slots={{ root: 'div', listbox: 'ol' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -142,6 +132,20 @@ The following code snippet applies a CSS class called `my-listbox` to the listbo
 <Select slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Select<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Select<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ## Hooks
 
 ```js
diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js
index 6bcc33c87e59c3..eeb6682d996ed2 100644
--- a/docs/data/base/components/slider/DiscreteSlider.js
+++ b/docs/data/base/components/slider/DiscreteSlider.js
@@ -3,6 +3,35 @@ import PropTypes from 'prop-types';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        step={10}
+        marks
+        min={10}
+        max={110}
+        slots={{ valueLabel: SliderValueLabel }}
+      />
+    </Box>
+  );
+}
+
+function SliderValueLabel({ children }) {
+  return <span className="valueLabel">{children}</span>;
+}
+
+SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -122,32 +151,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function SliderValueLabel({ children }) {
-  return <span className="valueLabel">{children}</span>;
-}
-
-SliderValueLabel.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={30}
-        getAriaValueText={valuetext}
-        step={10}
-        marks
-        min={10}
-        max={110}
-        slots={{ valueLabel: SliderValueLabel }}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
index 9781af1cf199e4..a87ecad83cdcbb 100644
--- a/docs/data/base/components/slider/DiscreteSlider.tsx
+++ b/docs/data/base/components/slider/DiscreteSlider.tsx
@@ -2,6 +2,35 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        step={10}
+        marks
+        min={10}
+        max={110}
+        slots={{ valueLabel: SliderValueLabel }}
+      />
+    </Box>
+  );
+}
+
+interface SliderValueLabelProps {
+  children: React.ReactElement;
+}
+
+function SliderValueLabel({ children }: SliderValueLabelProps) {
+  return <span className="valueLabel">{children}</span>;
+}
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -121,32 +150,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-interface SliderValueLabelProps {
-  children: React.ReactElement;
-}
-
-function SliderValueLabel({ children }: SliderValueLabelProps) {
-  return <span className="valueLabel">{children}</span>;
-}
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={30}
-        getAriaValueText={valuetext}
-        step={10}
-        marks
-        min={10}
-        max={110}
-        slots={{ valueLabel: SliderValueLabel }}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js
index 3bffe39dda3b92..f6269edc1f29b6 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.js
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.js
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderMarks() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,39 +155,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderMarks() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
index b796801ab68495..9894b01c8a6b5e 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderMarks() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,39 +155,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderMarks() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
index b3cf090d1988a3..6a50b81e293358 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.js
+++ b/docs/data/base/components/slider/DiscreteSliderValues.js
@@ -2,6 +2,43 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderValues() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        step={null}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,40 +156,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderValues() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        step={null}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
index 3caefc5e6ec6ab..ce42cce62df3b6 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx
@@ -2,6 +2,43 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderValues() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        step={null}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,40 +156,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderValues() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        step={null}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
index d4d73e1f1fe6f0..af7613c47e6851 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -3,6 +3,26 @@ import PropTypes from 'prop-types';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function LabeledValuesSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
+    </Box>
+  );
+}
+
+function SliderValueLabel({ children }) {
+  return (
+    <span className="label">
+      <div className="value">{children}</div>
+    </span>
+  );
+}
+
+SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -113,23 +133,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function SliderValueLabel({ children }) {
-  return (
-    <span className="label">
-      <div className="value">{children}</div>
-    </span>
-  );
-}
-
-SliderValueLabel.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-export default function LabeledValuesSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index f34b5261304754..b86cc2e2769b45 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -2,6 +2,26 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function LabeledValuesSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
+    </Box>
+  );
+}
+
+interface SliderValueLabelProps {
+  children: React.ReactElement;
+}
+
+function SliderValueLabel({ children }: SliderValueLabelProps) {
+  return (
+    <span className="label">
+      <div className="value">{children}</div>
+    </span>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -112,23 +132,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-interface SliderValueLabelProps {
-  children: React.ReactElement;
-}
-
-function SliderValueLabel({ children }: SliderValueLabelProps) {
-  return (
-    <span className="label">
-      <div className="value">{children}</div>
-    </span>
-  );
-}
-
-export default function LabeledValuesSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js
index 8efb55e311ee4e..9210500dd2910f 100644
--- a/docs/data/base/components/slider/RangeSlider.js
+++ b/docs/data/base/components/slider/RangeSlider.js
@@ -2,6 +2,40 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function RangeSlider() {
+  const [value, setValue] = React.useState([20, 37]);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: 300 }}>
+      {/* controlled: */}
+      <StyledSlider
+        value={value}
+        onChange={handleChange}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+      {/* uncontrolled: */}
+      <StyledSlider
+        defaultValue={[20, 37]}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+    </Box>
+  );
+}
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -110,37 +144,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function RangeSlider() {
-  const [value, setValue] = React.useState([20, 37]);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    <Box sx={{ width: 300 }}>
-      {/* controlled: */}
-      <StyledSlider
-        value={value}
-        onChange={handleChange}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-      {/* uncontrolled: */}
-      <StyledSlider
-        defaultValue={[20, 37]}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx
index 95f422643a972c..d93d67ca7f3b76 100644
--- a/docs/data/base/components/slider/RangeSlider.tsx
+++ b/docs/data/base/components/slider/RangeSlider.tsx
@@ -2,6 +2,40 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function RangeSlider() {
+  const [value, setValue] = React.useState<number[]>([20, 37]);
+
+  const handleChange = (event: Event, newValue: number | number[]) => {
+    setValue(newValue as number[]);
+  };
+
+  return (
+    <Box sx={{ width: 300 }}>
+      {/* controlled: */}
+      <StyledSlider
+        value={value}
+        onChange={handleChange}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+      {/* uncontrolled: */}
+      <StyledSlider
+        defaultValue={[20, 37]}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+    </Box>
+  );
+}
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -110,37 +144,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function RangeSlider() {
-  const [value, setValue] = React.useState<number[]>([20, 37]);
-
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
-  };
-
-  return (
-    <Box sx={{ width: 300 }}>
-      {/* controlled: */}
-      <StyledSlider
-        value={value}
-        onChange={handleChange}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-      {/* uncontrolled: */}
-      <StyledSlider
-        defaultValue={[20, 37]}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js
index 6176202c89455a..55b5eea3ed73c7 100644
--- a/docs/data/base/components/slider/UnstyledSlider.js
+++ b/docs/data/base/components/slider/UnstyledSlider.js
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx
index 6176202c89455a..55b5eea3ed73c7 100644
--- a/docs/data/base/components/slider/UnstyledSlider.tsx
+++ b/docs/data/base/components/slider/UnstyledSlider.tsx
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.js b/docs/data/base/components/slider/UnstyledSliderIntroduction.js
index 2b502de28bd01a..b415218cb94e0f 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction.js
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 320 }}>
+      <StyledSlider defaultValue={50} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 320 }}>
-      <StyledSlider defaultValue={50} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
index 2b502de28bd01a..b415218cb94e0f 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 320 }}>
+      <StyledSlider defaultValue={50} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 320 }}>
-      <StyledSlider defaultValue={50} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/slider-pt.md b/docs/data/base/components/slider/slider-pt.md
index 531f4f9b92faf3..460d9ba2a5f2e9 100644
--- a/docs/data/base/components/slider/slider-pt.md
+++ b/docs/data/base/components/slider/slider-pt.md
@@ -23,7 +23,7 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import SliderUnstyled from '@mui/base/SliderUnstyled';
diff --git a/docs/data/base/components/slider/slider-zh.md b/docs/data/base/components/slider/slider-zh.md
index 531f4f9b92faf3..460d9ba2a5f2e9 100644
--- a/docs/data/base/components/slider/slider-zh.md
+++ b/docs/data/base/components/slider/slider-zh.md
@@ -23,7 +23,7 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import SliderUnstyled from '@mui/base/SliderUnstyled';
diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index 9ffbac886841b6..36d52ba7f5cc72 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -28,7 +28,7 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Slider from '@mui/base/Slider';
@@ -98,27 +98,17 @@ The Slider component is composed of a root `<span>` that houses several interior
 Both the `mark` and `markLabel` slots have corresponding `*Active` classes that are applied conditionally.
 :::
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<Slider component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Slider slots={{ root: 'div', thumb: 'div' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -128,6 +118,20 @@ The following code snippet applies a CSS class called `my-rail` to the rail slot
 <Slider slotProps={{ rail: { className: 'my-rail' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Slider<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Slider<'input'> slots={{ root: 'input' }} autoFocus={true} />
+```
+
 ## Hook
 
 ```js
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
index 13f40dd565c597..b9b207cbc92904 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
@@ -5,6 +5,82 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseIcon from '@mui/icons-material/Close';
 import Snackbar from '@mui/base/Snackbar';
 
+export default function TransitionComponentSnackbar() {
+  const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
+  const nodeRef = React.useRef(null);
+
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleOnEnter = () => {
+    setExited(false);
+  };
+
+  const handleOnExited = () => {
+    setExited(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar
+        autoHideDuration={5000}
+        open={open}
+        onClose={handleClose}
+        exited={exited}
+      >
+        <Transition
+          timeout={{ enter: 400, exit: 400 }}
+          in={open}
+          appear
+          unmountOnExit
+          onEnter={handleOnEnter}
+          onExited={handleOnExited}
+          nodeRef={nodeRef}
+        >
+          {(status) => (
+            <SnackbarContent
+              style={{
+                transform: positioningStyles[status],
+                transition: 'transform 300ms ease',
+              }}
+              ref={nodeRef}
+            >
+              <CheckRoundedIcon
+                sx={{
+                  flexShrink: 0,
+                  marginRight: '0.75rem',
+                  width: '1.25rem',
+                  height: '1.5rem',
+                }}
+              />
+              <div className="snackbar-message">
+                <div className="snackbar-title">Notifications sent</div>
+                <div className="snackbar-description">
+                  All your notifications were sent to the desired address.
+                </div>
+              </div>
+              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
+            </SnackbarContent>
+          )}
+        </Transition>
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   100: '#DAECFF',
@@ -85,79 +161,3 @@ const positioningStyles = {
   exited: 'translateX(500px)',
   unmounted: 'translateX(500px)',
 };
-
-export default function TransitionComponentSnackbar() {
-  const [open, setOpen] = React.useState(false);
-  const [exited, setExited] = React.useState(true);
-  const nodeRef = React.useRef(null);
-
-  const handleClose = (_, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleOnEnter = () => {
-    setExited(false);
-  };
-
-  const handleOnExited = () => {
-    setExited(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar
-        autoHideDuration={5000}
-        open={open}
-        onClose={handleClose}
-        exited={exited}
-      >
-        <Transition
-          timeout={{ enter: 400, exit: 400 }}
-          in={open}
-          appear
-          unmountOnExit
-          onEnter={handleOnEnter}
-          onExited={handleOnExited}
-          nodeRef={nodeRef}
-        >
-          {(status) => (
-            <SnackbarContent
-              style={{
-                transform: positioningStyles[status],
-                transition: 'transform 300ms ease',
-              }}
-              ref={nodeRef}
-            >
-              <CheckRoundedIcon
-                sx={{
-                  flexShrink: 0,
-                  marginRight: '0.75rem',
-                  width: '1.25rem',
-                  height: '1.5rem',
-                }}
-              />
-              <div className="snackbar-message">
-                <div className="snackbar-title">Notifications sent</div>
-                <div className="snackbar-description">
-                  All your notifications were sent to the desired address.
-                </div>
-              </div>
-              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
-            </SnackbarContent>
-          )}
-        </Transition>
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
index 465decef53d4d7..cfe9c78fa9c741 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -6,6 +6,82 @@ import CloseIcon from '@mui/icons-material/Close';
 import Snackbar from '@mui/base/Snackbar';
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
+export default function TransitionComponentSnackbar() {
+  const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
+  const nodeRef = React.useRef(null);
+
+  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleOnEnter = () => {
+    setExited(false);
+  };
+
+  const handleOnExited = () => {
+    setExited(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar
+        autoHideDuration={5000}
+        open={open}
+        onClose={handleClose}
+        exited={exited}
+      >
+        <Transition
+          timeout={{ enter: 400, exit: 400 }}
+          in={open}
+          appear
+          unmountOnExit
+          onEnter={handleOnEnter}
+          onExited={handleOnExited}
+          nodeRef={nodeRef}
+        >
+          {(status) => (
+            <SnackbarContent
+              style={{
+                transform: positioningStyles[status],
+                transition: 'transform 300ms ease',
+              }}
+              ref={nodeRef}
+            >
+              <CheckRoundedIcon
+                sx={{
+                  flexShrink: 0,
+                  marginRight: '0.75rem',
+                  width: '1.25rem',
+                  height: '1.5rem',
+                }}
+              />
+              <div className="snackbar-message">
+                <div className="snackbar-title">Notifications sent</div>
+                <div className="snackbar-description">
+                  All your notifications were sent to the desired address.
+                </div>
+              </div>
+              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
+            </SnackbarContent>
+          )}
+        </Transition>
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   100: '#DAECFF',
@@ -86,79 +162,3 @@ const positioningStyles = {
   exited: 'translateX(500px)',
   unmounted: 'translateX(500px)',
 };
-
-export default function TransitionComponentSnackbar() {
-  const [open, setOpen] = React.useState(false);
-  const [exited, setExited] = React.useState(true);
-  const nodeRef = React.useRef(null);
-
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleOnEnter = () => {
-    setExited(false);
-  };
-
-  const handleOnExited = () => {
-    setExited(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar
-        autoHideDuration={5000}
-        open={open}
-        onClose={handleClose}
-        exited={exited}
-      >
-        <Transition
-          timeout={{ enter: 400, exit: 400 }}
-          in={open}
-          appear
-          unmountOnExit
-          onEnter={handleOnEnter}
-          onExited={handleOnExited}
-          nodeRef={nodeRef}
-        >
-          {(status) => (
-            <SnackbarContent
-              style={{
-                transform: positioningStyles[status],
-                transition: 'transform 300ms ease',
-              }}
-              ref={nodeRef}
-            >
-              <CheckRoundedIcon
-                sx={{
-                  flexShrink: 0,
-                  marginRight: '0.75rem',
-                  width: '1.25rem',
-                  height: '1.5rem',
-                }}
-              />
-              <div className="snackbar-message">
-                <div className="snackbar-title">Notifications sent</div>
-                <div className="snackbar-description">
-                  All your notifications were sent to the desired address.
-                </div>
-              </div>
-              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
-            </SnackbarContent>
-          )}
-        </Transition>
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.js b/docs/data/base/components/snackbar/UnstyledSnackbar.js
index 2052043a4b018b..4b112813214ab6 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.js
@@ -2,6 +2,33 @@ import * as React from 'react';
 import { styled, keyframes, css } from '@mui/system';
 import Snackbar from '@mui/base/Snackbar';
 
+export default function UnstyledSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+        Hello World
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -48,30 +75,3 @@ const StyledSnackbar = styled(Snackbar)(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UnstyledSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = (_, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
-        Hello World
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
index 8f2982d9196c2d..586d12aca1e10d 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
@@ -3,6 +3,33 @@ import { styled, keyframes, css } from '@mui/system';
 import Snackbar from '@mui/base/Snackbar';
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
+export default function UnstyledSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+        Hello World
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -49,30 +76,3 @@ const StyledSnackbar = styled(Snackbar)(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UnstyledSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
-        Hello World
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UseSnackbar.js b/docs/data/base/components/snackbar/UseSnackbar.js
index 7cf75624bf1a97..be4e29e88cee7e 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.js
+++ b/docs/data/base/components/snackbar/UseSnackbar.js
@@ -3,6 +3,37 @@ import useSnackbar from '@mui/base/useSnackbar';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import { css, keyframes, styled } from '@mui/system';
 
+export default function UseSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const { getRootProps, onClickAway } = useSnackbar({
+    onClose: handleClose,
+    open,
+    autoHideDuration: 5000,
+  });
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleOpen}>
+        Open Snackbar
+      </button>
+      {open ? (
+        <ClickAwayListener onClickAway={onClickAway}>
+          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
+        </ClickAwayListener>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -49,34 +80,3 @@ const CustomSnackbar = styled('div')(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UseSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const { getRootProps, onClickAway } = useSnackbar({
-    onClose: handleClose,
-    open,
-    autoHideDuration: 5000,
-  });
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleOpen}>
-        Open Snackbar
-      </button>
-      {open ? (
-        <ClickAwayListener onClickAway={onClickAway}>
-          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
-        </ClickAwayListener>
-      ) : null}
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx b/docs/data/base/components/snackbar/UseSnackbar.tsx
index 7cf75624bf1a97..be4e29e88cee7e 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UseSnackbar.tsx
@@ -3,6 +3,37 @@ import useSnackbar from '@mui/base/useSnackbar';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import { css, keyframes, styled } from '@mui/system';
 
+export default function UseSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const { getRootProps, onClickAway } = useSnackbar({
+    onClose: handleClose,
+    open,
+    autoHideDuration: 5000,
+  });
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleOpen}>
+        Open Snackbar
+      </button>
+      {open ? (
+        <ClickAwayListener onClickAway={onClickAway}>
+          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
+        </ClickAwayListener>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -49,34 +80,3 @@ const CustomSnackbar = styled('div')(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UseSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const { getRootProps, onClickAway } = useSnackbar({
-    onClose: handleClose,
-    open,
-    autoHideDuration: 5000,
-  });
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleOpen}>
-        Open Snackbar
-      </button>
-      {open ? (
-        <ClickAwayListener onClickAway={onClickAway}>
-          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
-        </ClickAwayListener>
-      ) : null}
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/snackbar-pt.md b/docs/data/base/components/snackbar/snackbar-pt.md
index e8de8de4ea2bb7..8a3700b285ca76 100644
--- a/docs/data/base/components/snackbar/snackbar-pt.md
+++ b/docs/data/base/components/snackbar/snackbar-pt.md
@@ -21,7 +21,7 @@ The `SnackbarUnstyled` component is built to appear on-screen to inform users ab
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
diff --git a/docs/data/base/components/snackbar/snackbar-zh.md b/docs/data/base/components/snackbar/snackbar-zh.md
index e8de8de4ea2bb7..8a3700b285ca76 100644
--- a/docs/data/base/components/snackbar/snackbar-zh.md
+++ b/docs/data/base/components/snackbar/snackbar-zh.md
@@ -21,7 +21,7 @@ The `SnackbarUnstyled` component is built to appear on-screen to inform users ab
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md
index bcde227f3114bd..82727457886248 100644
--- a/docs/data/base/components/snackbar/snackbar.md
+++ b/docs/data/base/components/snackbar/snackbar.md
@@ -24,7 +24,7 @@ The Snackbar component is built to appear on-screen to inform users about an act
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Snackbar from '@mui/base/Snackbar';
@@ -58,17 +58,29 @@ The Snackbar component is composed of a single root `<div>` slot with no interio
 <div role="presentation" className="BaseSnackbar-root">snackbar content</div>
 ```
 
-### Slot props
+### Custom structure
+
+```jsx
+<Snackbar slots={{ root: 'span' }} />
+```
 
 :::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
-Use the `component` prop to override the root slot with a custom element:
+#### Usage with TypeScript
 
-```jsx
-<Snackbar component="span" />
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom component's props directly on the component:
+
+```tsx
+<Snackbar<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Snackbar<'button'> slots={{ root: 'button' }} onClick={() => {}} />
 ```
 
 ## Hook
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction.js
index 0245c786d342ec..c1cdcd95790e1c 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction.js
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +117,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx
index 0245c786d342ec..c1cdcd95790e1c 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +117,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx.preview b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx.preview
deleted file mode 100644
index 89da352e81dfa2..00000000000000
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<Switch component={Root} {...label} defaultChecked />
-<Switch component={Root} {...label} />
-<Switch component={Root} {...label} defaultChecked disabled />
-<Switch component={Root} {...label} disabled />
\ No newline at end of file
diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js
index 0245c786d342ec..c1cdcd95790e1c 100644
--- a/docs/data/base/components/switch/UnstyledSwitches.js
+++ b/docs/data/base/components/switch/UnstyledSwitches.js
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +117,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx
index 0245c786d342ec..c1cdcd95790e1c 100644
--- a/docs/data/base/components/switch/UnstyledSwitches.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitches.tsx
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +117,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx.preview b/docs/data/base/components/switch/UnstyledSwitches.tsx.preview
deleted file mode 100644
index 89da352e81dfa2..00000000000000
--- a/docs/data/base/components/switch/UnstyledSwitches.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<Switch component={Root} {...label} defaultChecked />
-<Switch component={Root} {...label} />
-<Switch component={Root} {...label} defaultChecked disabled />
-<Switch component={Root} {...label} disabled />
\ No newline at end of file
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.js b/docs/data/base/components/switch/UseSwitchesBasic.js
index 6d50155cc28566..5d1536a35b073b 100644
--- a/docs/data/base/components/switch/UseSwitchesBasic.js
+++ b/docs/data/base/components/switch/UseSwitchesBasic.js
@@ -3,6 +3,34 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch from '@mui/base/useSwitch';
 
+export default function UseSwitchesBasic() {
+  return (
+    <div>
+      <BasicSwitch defaultChecked />
+      <BasicSwitch />
+      <BasicSwitch defaultChecked disabled />
+      <BasicSwitch disabled />
+    </div>
+  );
+}
+
+function BasicSwitch(props) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    'Switch-checked': checked,
+    'Switch-disabled': disabled,
+    'Switch-focusVisible': focusVisible,
+  };
+
+  return (
+    <BasicSwitchRoot className={clsx(stateClasses)}>
+      <BasicSwitchThumb className={clsx(stateClasses)} />
+      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </BasicSwitchRoot>
+  );
+}
+
 const blue = {
   500: '#007FFF',
 };
@@ -72,31 +100,3 @@ const BasicSwitchThumb = styled('span')`
     background-color: #fff;
   }
 `;
-
-function BasicSwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
-  );
-}
-
-export default function UseSwitchesBasic() {
-  return (
-    <div>
-      <BasicSwitch defaultChecked />
-      <BasicSwitch />
-      <BasicSwitch defaultChecked disabled />
-      <BasicSwitch disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx b/docs/data/base/components/switch/UseSwitchesBasic.tsx
index b0f8b130aecdb1..b34431df6a9a8f 100644
--- a/docs/data/base/components/switch/UseSwitchesBasic.tsx
+++ b/docs/data/base/components/switch/UseSwitchesBasic.tsx
@@ -3,6 +3,34 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 
+export default function UseSwitchesBasic() {
+  return (
+    <div>
+      <BasicSwitch defaultChecked />
+      <BasicSwitch />
+      <BasicSwitch defaultChecked disabled />
+      <BasicSwitch disabled />
+    </div>
+  );
+}
+
+function BasicSwitch(props: UseSwitchParameters) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    'Switch-checked': checked,
+    'Switch-disabled': disabled,
+    'Switch-focusVisible': focusVisible,
+  };
+
+  return (
+    <BasicSwitchRoot className={clsx(stateClasses)}>
+      <BasicSwitchThumb className={clsx(stateClasses)} />
+      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </BasicSwitchRoot>
+  );
+}
+
 const blue = {
   500: '#007FFF',
 };
@@ -72,31 +100,3 @@ const BasicSwitchThumb = styled('span')`
     background-color: #fff;
   }
 `;
-
-function BasicSwitch(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
-  );
-}
-
-export default function UseSwitchesBasic() {
-  return (
-    <div>
-      <BasicSwitch defaultChecked />
-      <BasicSwitch />
-      <BasicSwitch defaultChecked disabled />
-      <BasicSwitch disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.js b/docs/data/base/components/switch/UseSwitchesCustom.js
index 0d496c1a252641..cf64ab332d5b9b 100644
--- a/docs/data/base/components/switch/UseSwitchesCustom.js
+++ b/docs/data/base/components/switch/UseSwitchesCustom.js
@@ -3,6 +3,29 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch from '@mui/base/useSwitch';
 
+export default function UseSwitchesCustom() {
+  return <MUISwitch defaultChecked />;
+}
+
+function MUISwitch(props) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    checked,
+    disabled,
+    focusVisible,
+  };
+
+  return (
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchTrack>
+        <SwitchThumb className={clsx(stateClasses)} />
+      </SwitchTrack>
+      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </SwitchRoot>
+  );
+}
+
 const blue = {
   700: '#0059B2',
 };
@@ -78,26 +101,3 @@ const SwitchTrack = styled('span')(
   display: block;
 `,
 );
-
-function MUISwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    checked,
-    disabled,
-    focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </SwitchRoot>
-  );
-}
-
-export default function UseSwitchesCustom() {
-  return <MUISwitch defaultChecked />;
-}
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.tsx b/docs/data/base/components/switch/UseSwitchesCustom.tsx
index 15dccad3c8dedf..70690c85790874 100644
--- a/docs/data/base/components/switch/UseSwitchesCustom.tsx
+++ b/docs/data/base/components/switch/UseSwitchesCustom.tsx
@@ -3,6 +3,29 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 
+export default function UseSwitchesCustom() {
+  return <MUISwitch defaultChecked />;
+}
+
+function MUISwitch(props: UseSwitchParameters) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    checked,
+    disabled,
+    focusVisible,
+  };
+
+  return (
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchTrack>
+        <SwitchThumb className={clsx(stateClasses)} />
+      </SwitchTrack>
+      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </SwitchRoot>
+  );
+}
+
 const blue = {
   700: '#0059B2',
 };
@@ -78,26 +101,3 @@ const SwitchTrack = styled('span')(
   display: block;
 `,
 );
-
-function MUISwitch(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    checked,
-    disabled,
-    focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </SwitchRoot>
-  );
-}
-
-export default function UseSwitchesCustom() {
-  return <MUISwitch defaultChecked />;
-}
diff --git a/docs/data/base/components/switch/switch-pt.md b/docs/data/base/components/switch/switch-pt.md
index 06297c64ef8d15..530b70b1087730 100644
--- a/docs/data/base/components/switch/switch-pt.md
+++ b/docs/data/base/components/switch/switch-pt.md
@@ -20,7 +20,7 @@ The `SwitchUnstyled` component provides users with a switch for toggling between
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import SwitchUnstyled from '@mui/base/SwitchUnstyled';
diff --git a/docs/data/base/components/switch/switch-zh.md b/docs/data/base/components/switch/switch-zh.md
index 06297c64ef8d15..530b70b1087730 100644
--- a/docs/data/base/components/switch/switch-zh.md
+++ b/docs/data/base/components/switch/switch-zh.md
@@ -20,7 +20,7 @@ The `SwitchUnstyled` component provides users with a switch for toggling between
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import SwitchUnstyled from '@mui/base/SwitchUnstyled';
diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
index cb20a2c4ac19a5..9015484588ab77 100644
--- a/docs/data/base/components/switch/switch.md
+++ b/docs/data/base/components/switch/switch.md
@@ -25,7 +25,7 @@ The Switch component provides users with a switch for toggling between two mutua
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import Switch from '@mui/base/Switch';
@@ -53,27 +53,17 @@ The Switch component is composed of a root `<span>` that houses three interior s
 </span>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<Switch component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Switch slots={{ root: 'div', track: 'div' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -83,6 +73,20 @@ The following code snippet applies a CSS class called `my-thumb` to the thumb sl
 <Switch slotProps={{ thumb: { className: 'my-thumb' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Switch<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Switch<'input'> slots={{ root: 'input' }} autoFocus={true} />
+```
+
 ## Hook
 
 ```js
diff --git a/docs/data/base/components/table-pagination/table-pagination-pt.md b/docs/data/base/components/table-pagination/table-pagination-pt.md
index 49b5f7f8f54fd4..216df26c4e56bd 100644
--- a/docs/data/base/components/table-pagination/table-pagination-pt.md
+++ b/docs/data/base/components/table-pagination/table-pagination-pt.md
@@ -24,7 +24,7 @@ The `TablePaginationUnstyled` component lets you add pagination controls to a ta
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
diff --git a/docs/data/base/components/table-pagination/table-pagination-zh.md b/docs/data/base/components/table-pagination/table-pagination-zh.md
index 49b5f7f8f54fd4..216df26c4e56bd 100644
--- a/docs/data/base/components/table-pagination/table-pagination-zh.md
+++ b/docs/data/base/components/table-pagination/table-pagination-zh.md
@@ -24,7 +24,7 @@ The `TablePaginationUnstyled` component lets you add pagination controls to a ta
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
diff --git a/docs/data/base/components/table-pagination/table-pagination.md b/docs/data/base/components/table-pagination/table-pagination.md
index aa1e6c1f2db729..64b99bc1d6fdae 100644
--- a/docs/data/base/components/table-pagination/table-pagination.md
+++ b/docs/data/base/components/table-pagination/table-pagination.md
@@ -22,7 +22,7 @@ It controls two properties of its parent table:
 - number of rows per page
 
 Table Pagination renders its internal elements in a `<td>` tag by default so it can be inserted into a table's `<tr>`.
-You can use the `component` or `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table.
+You can use the `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table.
 See the [Slot props section](#slot-props) for details.
 
 {{"demo": "UnstyledPaginationIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
@@ -31,7 +31,7 @@ See the [Slot props section](#slot-props) for details.
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import TablePagination from '@mui/base/TablePagination';
@@ -99,27 +99,17 @@ The Table Pagination component is composed of a root `<td>` that houses up to te
 </td>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<TablePagination component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <TablePagination slots={{ root: 'div', toolbar: 'nav' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -131,6 +121,23 @@ The following code snippet applies a CSS class called `my-spacer` to the spacer
 
 ## Customization
 
+### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<TablePagination<typeof CustomComponent>
+  slots={{ root: CustomComponent }}
+  customProp
+/>
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<TablePagination<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ### Custom pagination options
 
 You can customize the options shown in the **Rows per page** select using the `rowsPerPageOptions` prop.
diff --git a/docs/data/base/components/tabs/tabs-pt.md b/docs/data/base/components/tabs/tabs-pt.md
index ddafeba2edd336..376b56ca0a480f 100644
--- a/docs/data/base/components/tabs/tabs-pt.md
+++ b/docs/data/base/components/tabs/tabs-pt.md
@@ -25,7 +25,7 @@ Tabs are implemented using a collection of related components:
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import TabUnstyled from '@mui/base/TabUnstyled';
diff --git a/docs/data/base/components/tabs/tabs-zh.md b/docs/data/base/components/tabs/tabs-zh.md
index ddafeba2edd336..376b56ca0a480f 100644
--- a/docs/data/base/components/tabs/tabs-zh.md
+++ b/docs/data/base/components/tabs/tabs-zh.md
@@ -25,7 +25,7 @@ Tabs are implemented using a collection of related components:
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import TabUnstyled from '@mui/base/TabUnstyled';
diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
index b5c5a7037c4f52..1e45b4c587cb2f 100644
--- a/docs/data/base/components/tabs/tabs.md
+++ b/docs/data/base/components/tabs/tabs.md
@@ -30,7 +30,7 @@ Tabs are implemented using a collection of related components:
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component collection using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
 
 ```jsx
 import Tab from '@mui/base/Tab';
@@ -84,23 +84,37 @@ The Tab components are each composed of a root slot with no interior slots:
 </div>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
-<Tab component="span" />
+<Tab slots={{ root: 'span' }} />
 ```
 
 If you provide a non-interactive element such as a `<span>`, the Tab components will automatically add the necessary accessibility attributes.
 
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
+:::
+
 ## Customization
 
+### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Tab<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Tab<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ### Third-party routing library
 
 A common use case for tabs is to implement client-side navigation that doesn't require an HTTP round-trip to the server.
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize-pt.md b/docs/data/base/components/textarea-autosize/textarea-autosize-pt.md
index dd6c7dbcc80ce3..f7ae53bd72e902 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize-pt.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize-pt.md
@@ -21,7 +21,7 @@ The height of the `TextareaAutosize` component automatically adjusts as a respon
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import TextareaAutosize from '@mui/base/TextareaAutosize';
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize-zh.md b/docs/data/base/components/textarea-autosize/textarea-autosize-zh.md
index dd6c7dbcc80ce3..f7ae53bd72e902 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize-zh.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize-zh.md
@@ -21,7 +21,7 @@ The height of the `TextareaAutosize` component automatically adjusts as a respon
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import TextareaAutosize from '@mui/base/TextareaAutosize';
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
index d6d14cb735bbc4..9742b222cde48f 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -23,7 +23,7 @@ The height of the Textarea Autosize component automatically adjusts as a respons
 
 ### Usage
 
-After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
+After [installation](/base/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
 
 ```jsx
 import TextareaAutosize from '@mui/base/TextareaAutosize';
diff --git a/docs/data/base/getting-started/installation/installation.md b/docs/data/base/getting-started/installation/installation.md
deleted file mode 100644
index d790457e5a4160..00000000000000
--- a/docs/data/base/getting-started/installation/installation.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Installation
-
-<p class="description">Install Base UI, a library of headless ("unstyled") React UI components and low-level hooks.</p>
-
-Run one of the following commands to add Base UI to your project:
-
-## npm
-
-```sh
-npm install @mui/base
-```
-
-## yarn
-
-```sh
-yarn add @mui/base
-```
-
-## Peer dependencies
-
-<!-- #react-peer-version -->
-
-[`react`](https://www.npmjs.com/package/react) >= 17.0.0 and [`react-dom`](https://www.npmjs.com/package/react-dom) >= 17.0.0 are peer dependencies.
diff --git a/docs/data/base/getting-started/quickstart/BaseButton.js b/docs/data/base/getting-started/quickstart/BaseButton.js
new file mode 100644
index 00000000000000..9a8e94901b2052
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButton.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Button from '@mui/base/Button';
+import useButton from '@mui/base/useButton';
+import Stack from '@mui/material/Stack';
+
+export default function App() {
+  const { getRootProps } = useButton({});
+  return (
+    <Stack spacing={2} direction="row">
+      <Button>Button</Button>
+
+      <button type="button" {...getRootProps()}>
+        useButton
+      </button>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/BaseButton.tsx b/docs/data/base/getting-started/quickstart/BaseButton.tsx
new file mode 100644
index 00000000000000..9a8e94901b2052
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButton.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Button from '@mui/base/Button';
+import useButton from '@mui/base/useButton';
+import Stack from '@mui/material/Stack';
+
+export default function App() {
+  const { getRootProps } = useButton({});
+  return (
+    <Stack spacing={2} direction="row">
+      <Button>Button</Button>
+
+      <button type="button" {...getRootProps()}>
+        useButton
+      </button>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/BaseButton.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButton.tsx.preview
new file mode 100644
index 00000000000000..5448d5cc192e6f
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButton.tsx.preview
@@ -0,0 +1,5 @@
+<Button>Button</Button>
+
+<button type="button" {...getRootProps()}>
+  useButton
+</button>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.js b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.js
new file mode 100644
index 00000000000000..8aa97845a4ff95
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.js
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import Button, { buttonClasses } from '@mui/base/Button';
+import useButton from '@mui/base/useButton';
+import { styled, alpha } from '@mui/system';
+import Stack from '@mui/material/Stack';
+
+function getStyles({ theme }) {
+  return `
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    word-wrap: break-word;
+    box-sizing: border-box;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    border-color: ${
+      theme.palette.mode === 'dark'
+        ? 'rgba(240, 246, 252, 0.1)'
+        : 'rgba(31, 35, 40, 0.15)'
+    };
+    box-shadow: ${
+      theme.palette.mode === 'dark'
+        ? '0 0 transparent, 0 0 transparent'
+        : '0 1px 0 rgba(27, 31, 36, 0.1)'
+    };
+    margin-left: 16px !important;
+    text-align: center !important;
+
+    &:hover {
+      transition-duration: 80ms;
+    }
+
+    &:active {
+      transition: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    &:hover:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
+    }
+
+    &:active:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
+      box-shadow: ${
+        theme.palette.mode === 'dark'
+          ? '0 0 transparent'
+          : 'rgba(0, 45, 17, 0.2) 0px 1px 0px inset'
+      }
+    }
+
+    &.${buttonClasses.disabled} {
+      color: ${
+        theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
+      };
+      background-color: ${
+        theme.palette.mode === 'dark' ? alpha('#196c2e', 0.6) : alpha('#196c2e', 0.6)
+      };
+    }
+  `;
+}
+
+/*
+ * The style function argument is completely identical for the unstyled component
+ * and the hook, though each have different pro and cons.
+ * More about unstyled components vs hooks here: https://mui.com/base/getting-started/usage/#components-vs-hooks
+ */
+
+const GithubButtonComponent = styled(Button)(getStyles);
+
+const GithubButtonHook = styled('button')(getStyles);
+
+export default function App() {
+  const { getRootProps } = useButton({});
+
+  return (
+    <Stack spacing={2} direction="row">
+      <GithubButtonComponent>Create Repository</GithubButtonComponent>
+
+      <GithubButtonHook type="button" {...getRootProps()}>
+        Create Repository
+      </GithubButtonHook>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx
new file mode 100644
index 00000000000000..72a3ce1e5c3cb7
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import Button, { buttonClasses } from '@mui/base/Button';
+import useButton from '@mui/base/useButton';
+import { styled, alpha, Theme } from '@mui/system';
+import Stack from '@mui/material/Stack';
+
+function getStyles({ theme }: { theme: Theme }) {
+  return `
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    word-wrap: break-word;
+    box-sizing: border-box;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    border-color: ${
+      theme.palette.mode === 'dark'
+        ? 'rgba(240, 246, 252, 0.1)'
+        : 'rgba(31, 35, 40, 0.15)'
+    };
+    box-shadow: ${
+      theme.palette.mode === 'dark'
+        ? '0 0 transparent, 0 0 transparent'
+        : '0 1px 0 rgba(27, 31, 36, 0.1)'
+    };
+    margin-left: 16px !important;
+    text-align: center !important;
+
+    &:hover {
+      transition-duration: 80ms;
+    }
+
+    &:active {
+      transition: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    &:hover:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
+    }
+
+    &:active:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
+      box-shadow: ${
+        theme.palette.mode === 'dark'
+          ? '0 0 transparent'
+          : 'rgba(0, 45, 17, 0.2) 0px 1px 0px inset'
+      }
+    }
+
+    &.${buttonClasses.disabled} {
+      color: ${
+        theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
+      };
+      background-color: ${
+        theme.palette.mode === 'dark' ? alpha('#196c2e', 0.6) : alpha('#196c2e', 0.6)
+      };
+    }
+  `;
+}
+
+/*
+ * The style function argument is completely identical for the unstyled component
+ * and the hook, though each have different pro and cons.
+ * More about unstyled components vs hooks here: https://mui.com/base/getting-started/usage/#components-vs-hooks
+ */
+
+const GithubButtonComponent = styled(Button)(getStyles);
+
+const GithubButtonHook = styled('button')(getStyles);
+
+export default function App() {
+  const { getRootProps } = useButton({});
+
+  return (
+    <Stack spacing={2} direction="row">
+      <GithubButtonComponent>Create Repository</GithubButtonComponent>
+
+      <GithubButtonHook type="button" {...getRootProps()}>
+        Create Repository
+      </GithubButtonHook>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx.preview
new file mode 100644
index 00000000000000..cedbf2140e57d4
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx.preview
@@ -0,0 +1,5 @@
+<GithubButtonComponent>Create Repository</GithubButtonComponent>
+
+<GithubButtonHook type="button" {...getRootProps()}>
+  Create Repository
+</GithubButtonHook>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js
new file mode 100644
index 00000000000000..45b5c1f920c4b9
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Button, { buttonClasses } from '@mui/base/Button';
+import useButton from '@mui/base/useButton';
+import Stack from '@mui/material/Stack';
+
+// .mode-dark is provided by the MUI docs site
+const css = `
+  .demo {
+    --btn-text: #fff;
+    --btn-bg: #1f883d;
+    --btn-hover: #2c974b;
+    --btn-active-bg: #298e46;
+    --btn-active-box-shadow: inset 0px 1px 0px rgba(0, 45, 17, 0.2);
+    --btn-disabled: rgba(255, 255, 255, 0.8);
+    --btn-disabled-bg: rgb(148, 211, 162);
+  }
+
+  .mode-dark .demo {
+    --btn-bg: #238636;
+    --btn-hover: #2ea043;
+    --btn-active-bg: #238636;
+    --btn-active-box-shadow: 0 0 transparent;
+    --btn-disabled: rgba(255, 255, 255, 0.5);
+    --btn-disabled-bg: rgba(25, 108, 46, 0.6);
+  }
+
+  .github-button {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans,
+        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    color: var(--btn-text);
+    background-color: var(--btn-bg);
+    border-color: rgba(240, 246, 252, 0.1);
+    box-shadow: 0 0 transparent, 0 0 transparent;
+    margin-left: 16px !important;
+    text-align: center !important;
+  }
+
+  .github-button:hover {
+    transition-duration: 80ms;
+  }
+
+  .github-button:active {
+    transition: none;
+  }
+
+  .github-button:hover:not(.${buttonClasses.disabled}) {
+    color: var(--btn-text);
+    background-color: var(--btn-hover);
+  }
+
+  .github-button:active:not(.${buttonClasses.disabled}) {
+    background-color: var(--btn-active-bg);
+    box-shadow: var(--btn-active-box-shadow);
+  }
+
+  .github-button.${buttonClasses.disabled} {
+    cursor: not-allowed;
+    box-shadow: none;
+    color: var(--btn-disabled);
+    background-color: var(--btn-disabled-bg);
+  }
+`;
+
+export default function App() {
+  const { getRootProps } = useButton({});
+  return (
+    <React.Fragment>
+      <style type="text/css">{css}</style>
+      <Stack spacing={2} direction="row" className="demo">
+        <Button className="github-button">Create Repository</Button>
+
+        <button type="button" {...getRootProps()} className="github-button">
+          Create Repository
+        </button>
+      </Stack>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx
new file mode 100644
index 00000000000000..45b5c1f920c4b9
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Button, { buttonClasses } from '@mui/base/Button';
+import useButton from '@mui/base/useButton';
+import Stack from '@mui/material/Stack';
+
+// .mode-dark is provided by the MUI docs site
+const css = `
+  .demo {
+    --btn-text: #fff;
+    --btn-bg: #1f883d;
+    --btn-hover: #2c974b;
+    --btn-active-bg: #298e46;
+    --btn-active-box-shadow: inset 0px 1px 0px rgba(0, 45, 17, 0.2);
+    --btn-disabled: rgba(255, 255, 255, 0.8);
+    --btn-disabled-bg: rgb(148, 211, 162);
+  }
+
+  .mode-dark .demo {
+    --btn-bg: #238636;
+    --btn-hover: #2ea043;
+    --btn-active-bg: #238636;
+    --btn-active-box-shadow: 0 0 transparent;
+    --btn-disabled: rgba(255, 255, 255, 0.5);
+    --btn-disabled-bg: rgba(25, 108, 46, 0.6);
+  }
+
+  .github-button {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans,
+        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    color: var(--btn-text);
+    background-color: var(--btn-bg);
+    border-color: rgba(240, 246, 252, 0.1);
+    box-shadow: 0 0 transparent, 0 0 transparent;
+    margin-left: 16px !important;
+    text-align: center !important;
+  }
+
+  .github-button:hover {
+    transition-duration: 80ms;
+  }
+
+  .github-button:active {
+    transition: none;
+  }
+
+  .github-button:hover:not(.${buttonClasses.disabled}) {
+    color: var(--btn-text);
+    background-color: var(--btn-hover);
+  }
+
+  .github-button:active:not(.${buttonClasses.disabled}) {
+    background-color: var(--btn-active-bg);
+    box-shadow: var(--btn-active-box-shadow);
+  }
+
+  .github-button.${buttonClasses.disabled} {
+    cursor: not-allowed;
+    box-shadow: none;
+    color: var(--btn-disabled);
+    background-color: var(--btn-disabled-bg);
+  }
+`;
+
+export default function App() {
+  const { getRootProps } = useButton({});
+  return (
+    <React.Fragment>
+      <style type="text/css">{css}</style>
+      <Stack spacing={2} direction="row" className="demo">
+        <Button className="github-button">Create Repository</Button>
+
+        <button type="button" {...getRootProps()} className="github-button">
+          Create Repository
+        </button>
+      </Stack>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview
new file mode 100644
index 00000000000000..7235640e360d3d
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview
@@ -0,0 +1,10 @@
+<React.Fragment>
+  <style type="text/css">{css}</style>
+  <Stack spacing={2} direction="row" className="demo">
+    <Button className="github-button">Create Repository</Button>
+
+    <button type="button" {...getRootProps()} className="github-button">
+      Create Repository
+    </button>
+  </Stack>
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonTailwind.js b/docs/data/base/getting-started/quickstart/BaseButtonTailwind.js
new file mode 100644
index 00000000000000..dea4f61d3cc271
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/BaseButtonTailwind.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+
+export default function BaseButtonTailwind() {
+  const theme = useTheme();
+
+  const sandboxId =
+    theme.palette.mode === 'dark'
+      ? 'baseui-cra-tailwind-example-dark-f6dc9z'
+      : 'baseui-cra-tailwind-example-light-43zxqe';
+
+  return (
+    <iframe
+      title="codesandbox"
+      src={`https://codesandbox.io/embed/${sandboxId}?fontsize=12&view=preview`}
+      style={{
+        width: '100%',
+        height: 350,
+        border: 0,
+      }}
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    />
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/Tutorial.js b/docs/data/base/getting-started/quickstart/Tutorial.js
new file mode 100644
index 00000000000000..5cc3fbf95c49cb
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/Tutorial.js
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Button, { buttonClasses } from '@mui/base/Button';
+import { styled, alpha } from '@mui/system';
+
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    word-wrap: break-word;
+    box-sizing: border-box;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    border-color: ${
+      theme.palette.mode === 'dark'
+        ? 'rgba(240, 246, 252, 0.1)'
+        : 'rgba(31, 35, 40, 0.15)'
+    };
+    box-shadow: ${
+      theme.palette.mode === 'dark'
+        ? '0 0 transparent, 0 0 transparent'
+        : '0 1px 0 rgba(27, 31, 36, 0.1)'
+    };
+    margin-left: 16px !important;
+    text-align: center !important;
+
+    &:hover {
+      transition-duration: 80ms;
+    }
+
+    &:active {
+      transition: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    &:hover:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
+    }
+
+    &:active:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
+      box-shadow: ${
+        theme.palette.mode === 'dark'
+          ? '0 0 transparent'
+          : 'rgba(0, 45, 17, 0.2) 0px 1px 0px inset'
+      }
+    }
+
+    &.${buttonClasses.disabled} {
+      color: ${
+        theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
+      };
+      background-color: ${
+        theme.palette.mode === 'dark' ? alpha('#196c2e', 0.6) : alpha('#196c2e', 0.6)
+      };
+    }
+  `,
+);
+
+export default function App() {
+  return (
+    <div style={{ marginTop: 16, paddingTop: 16, paddingBottom: 16 }}>
+      <CustomButton>Create Repository</CustomButton>
+    </div>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/Tutorial.tsx b/docs/data/base/getting-started/quickstart/Tutorial.tsx
new file mode 100644
index 00000000000000..5cc3fbf95c49cb
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/Tutorial.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Button, { buttonClasses } from '@mui/base/Button';
+import { styled, alpha } from '@mui/system';
+
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    word-wrap: break-word;
+    box-sizing: border-box;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    border-color: ${
+      theme.palette.mode === 'dark'
+        ? 'rgba(240, 246, 252, 0.1)'
+        : 'rgba(31, 35, 40, 0.15)'
+    };
+    box-shadow: ${
+      theme.palette.mode === 'dark'
+        ? '0 0 transparent, 0 0 transparent'
+        : '0 1px 0 rgba(27, 31, 36, 0.1)'
+    };
+    margin-left: 16px !important;
+    text-align: center !important;
+
+    &:hover {
+      transition-duration: 80ms;
+    }
+
+    &:active {
+      transition: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    &:hover:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
+    }
+
+    &:active:not(.${buttonClasses.disabled}) {
+      background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
+      box-shadow: ${
+        theme.palette.mode === 'dark'
+          ? '0 0 transparent'
+          : 'rgba(0, 45, 17, 0.2) 0px 1px 0px inset'
+      }
+    }
+
+    &.${buttonClasses.disabled} {
+      color: ${
+        theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
+      };
+      background-color: ${
+        theme.palette.mode === 'dark' ? alpha('#196c2e', 0.6) : alpha('#196c2e', 0.6)
+      };
+    }
+  `,
+);
+
+export default function App() {
+  return (
+    <div style={{ marginTop: 16, paddingTop: 16, paddingBottom: 16 }}>
+      <CustomButton>Create Repository</CustomButton>
+    </div>
+  );
+}
diff --git a/docs/data/base/getting-started/quickstart/Tutorial.tsx.preview b/docs/data/base/getting-started/quickstart/Tutorial.tsx.preview
new file mode 100644
index 00000000000000..90c8ba8452aa02
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/Tutorial.tsx.preview
@@ -0,0 +1 @@
+<CustomButton>Create Repository</CustomButton>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/installation/installation-pt.md b/docs/data/base/getting-started/quickstart/quickstart-pt.md
similarity index 100%
rename from docs/data/base/getting-started/installation/installation-pt.md
rename to docs/data/base/getting-started/quickstart/quickstart-pt.md
diff --git a/docs/data/base/getting-started/installation/installation-zh.md b/docs/data/base/getting-started/quickstart/quickstart-zh.md
similarity index 100%
rename from docs/data/base/getting-started/installation/installation-zh.md
rename to docs/data/base/getting-started/quickstart/quickstart-zh.md
diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md
new file mode 100644
index 00000000000000..956245b629a206
--- /dev/null
+++ b/docs/data/base/getting-started/quickstart/quickstart.md
@@ -0,0 +1,234 @@
+# Quickstart
+
+<p class="description">Get started with Base UI, a library of headless ("unstyled") React UI components and low-level hooks.</p>
+
+## Installation
+
+`@mui/base` is completely standalone – run one of the following commands to add Base UI to your React project:
+
+### With npm
+
+```sh
+npm install @mui/base
+```
+
+### With yarn
+
+```sh
+yarn add @mui/base
+```
+
+### With pnpm
+
+```sh
+pnpm add @mui/base
+```
+
+### Peer dependencies
+
+<!-- #react-peer-version -->
+
+[`react`](https://www.npmjs.com/package/react) >= 17.0.0 and [`react-dom`](https://www.npmjs.com/package/react-dom) >= 17.0.0 are peer dependencies.
+
+## Implementing a Button
+
+This is a quick tutorial that goes through the basics of using and styling Base UI components by replicating a button from GitHub's UI, using their [Primer design system](https://primer.style) as a reference.
+
+{{"demo": "Tutorial.js", "defaultCodeOpen": false, "hideToolbar": true}}
+
+### Components and hooks
+
+Base UI provides a `<Button />` component and a `useButton` hook.
+Both can be used to build a button, and each has its own benefits and trade-offs—see [Components vs. hooks](/base/getting-started/usage/#components-vs-hooks) for details.
+
+The code snippets below demonstrate the basic implementation of each:
+
+#### Button component
+
+```tsx
+import * as React from 'react';
+import Button from '@mui/base/Button';
+
+export default function App() {
+  return <Button>Click Me</Button>;
+}
+```
+
+#### useButton hook
+
+```tsx
+import * as React from 'react';
+import useButton from '@mui/base/useButton';
+
+export default function App() {
+  const { getRootProps } = useButton();
+  return (
+    <button type="button" {...getRootProps()}>
+      Click Me
+    </button>
+  );
+}
+```
+
+Base UI comes with no styles or styling solution—here's what the Button component looks like out of the box:
+
+{{"demo": "BaseButton.js", "defaultCodeOpen": false}}
+
+You can use any styling method of your choice to make fully customizable components for your app. See [Customization](/base/getting-started/customization/) for more details on customization strategies.
+
+Here are some styling examples:
+
+### Styling with CSS
+
+Pass a `className` prop and use it as a styling hook:
+
+```css
+/* styles.css */
+
+.btn {
+  background-color: #1f883d;
+  /* the rest of the styles */
+}
+```
+
+```tsx
+/* App.js */
+
+<Button className="btn">Create Repository</Button>
+```
+
+Base UI components like the Button come with a classes object (e.g. `buttonClasses`) that provides class hooks for styling a particular state.
+
+```css
+/* To style the disabled state: */
+
+.${buttonClasses.disabled} { /* ".MuiButton-disabled" */
+  cursor: not-allowed;
+}
+```
+
+The demo below shows how to create the Primer button using plain CSS with Base UI's Button component and `useButton` hook:
+
+{{"demo": "BaseButtonPlainCss.js", "defaultCodeOpen": false}}
+
+### Styling with Tailwind CSS
+
+After installing Tailwind CSS, pass its utility classes to `className`, as shown below:
+
+```tsx
+<Button className="bg-green-600 rounded-md py-1 px-4...">Create Repository</Button>
+```
+
+The demo below shows how to build the Primer button using Tailwind CSS:
+
+{{"demo": "BaseButtonTailwind.js", "hideToolbar": true}}
+
+### Styling with MUI System
+
+[MUI System](/system/getting-started/overview/) is a small set of CSS utilties that provide a styled-components-like API for building out designs that adhere to a theme.
+
+MUI System's core utility is a [`styled` function](/system/styled/) that's equivalent to the `styled()` function in emotion and styled-components.
+Interpolations or arguments that are functions called by `styled` receive the `theme` from an upper `ThemeProvider`.
+
+```tsx
+import * as React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import { styled } from '@mui/system';
+import Button from '@mui/base/Button';
+
+const theme = {
+  colors: {
+    primary: 'green',
+  },
+};
+
+const GithubButton = styled(Button)(
+  ({ theme }) => `
+    background-color: ${theme.colors.primary /* => 'green' */};
+  `,
+);
+
+render(
+  <ThemeProvider theme={theme}>
+    <GithubButton>Create Repository</GithubButton>
+  </ThemeProvider>,
+);
+```
+
+Most of the demos in the Base UI docs are styled with MUI System in this way.
+You can inspect the `theme` object used on this site in your browser console, or explore the default structure in the Material UI [Default theme](/material-ui/customization/default-theme/) documentation.
+
+The demos below show how to create the Primer button using MUI System:
+
+#### Button Component with MUI System
+
+```tsx
+import * as React from 'react';
+import Button from '@mui/base/Button';
+import { styled } from '@mui/system';
+
+const GithubButton = styled(Button)(
+  ({ theme }) => `
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    ${/* ... the rest of the styles */}
+  `,
+);
+
+export default function App() {
+  return (
+    <GithubButton>Create Repository</GithubButton>
+  );
+}
+```
+
+#### useButton hook with MUI System
+
+```tsx
+import * as React from 'react';
+import useButton from '@mui/base/useButton';
+import { styled } from '@mui/system';
+
+const GithubButton = styled('button')(
+  ({ theme }) => `
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    ${/* ... the rest of the styles */}
+  `,
+);
+
+export default function App() {
+  const { getRootProps } = useButton(/* props*/);
+
+  return (
+    <GithubButton type="button" {...getRootProps()}>
+      Create Repository
+    </GithubButton>
+  );
+}
+```
+
+### Using the sx prop
+
+MUI System supports the [`sx` prop](/system/getting-started/the-sx-prop/), which provides a quick way to apply ad-hoc styles using theme-aware values to any component created with `styled`.
+
+```tsx
+const GithubButton = styled(Button)(
+  ({ theme }) => `
+    background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'};
+    margin: 0;
+  `,
+);
+
+export default function App() {
+  return (
+    <GithubButton sx={{ m: 2 /* => margin: 16px */ }}>
+      Create Repository
+    </GithubButton>
+  );
+}
+```
+
+The demo below shows how to build the Primer button using MUI System along with the `sx` prop:
+
+{{"demo": "BaseButtonMuiSystem.js", "defaultCodeOpen": false}}
+
+Read the [MUI System Usage](/system/getting-started/usage/) doc for further details.
diff --git a/docs/data/base/getting-started/usage/Usage.js b/docs/data/base/getting-started/usage/Usage.js
deleted file mode 100644
index b7c396b471cdc3..00000000000000
--- a/docs/data/base/getting-started/usage/Usage.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export default function Usage() {
-  return (
-    <iframe
-      title="codesandbox"
-      src="https://codesandbox.io/embed/7km2h7?hidenavigation=1&fontsize=14&view=preview"
-      style={{
-        width: '100%',
-        height: 350,
-        border: 0,
-      }}
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  );
-}
diff --git a/docs/data/base/getting-started/usage/usage.md b/docs/data/base/getting-started/usage/usage.md
index 273ab4e193e99b..1b5b6e8b5af1bc 100644
--- a/docs/data/base/getting-started/usage/usage.md
+++ b/docs/data/base/getting-started/usage/usage.md
@@ -2,28 +2,6 @@
 
 <p class="description">Learn the basics of working with Base UI components.</p>
 
-## Quickstart
-
-The following code snippet demonstrates a simple app that uses the Base UI [Button](/base/react-button/) component:
-
-```jsx
-import * as React from 'react';
-import Button from '@mui/base/Button';
-
-export default function MyApp() {
-  return (
-    <div>
-      <Button>Hello World</Button>
-    </div>
-  );
-}
-```
-
-You can play around with this code in the interactive Code Sandbox demo below.
-Try importing an [Input](/base/react-input/) component and adding it to the `<div>`:
-
-{{"demo": "Usage.js", "hideToolbar": true, "bg": true}}
-
 ## Responsive meta tag
 
 Base UI is a _mobile-first_ component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries.
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 71de915d2c0415..c5b3414c112c9d 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -7,7 +7,7 @@ const pages = [
     icon: standardNavIcons.DescriptionIcon,
     children: [
       { pathname: '/base/getting-started/overview', title: 'Overview' },
-      { pathname: '/base/getting-started/installation', title: 'Installation' },
+      { pathname: '/base/getting-started/quickstart', title: 'Quickstart' },
       { pathname: '/base/getting-started/usage', title: 'Usage' },
       { pathname: '/base/getting-started/customization', title: 'Customization' },
     ],
diff --git a/docs/data/joy/components/aspect-ratio/IconWrapper.js b/docs/data/joy/components/aspect-ratio/IconWrapper.js
new file mode 100644
index 00000000000000..e18c53609874d2
--- /dev/null
+++ b/docs/data/joy/components/aspect-ratio/IconWrapper.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Stack from '@mui/joy/Stack';
+import Favorite from '@mui/icons-material/Favorite';
+
+export default function IconWrapper() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <AspectRatio ratio="1" variant="solid" color="primary" sx={{ minWidth: 40 }}>
+        {/* an extra div is required to make the icon center */}
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="outlined"
+        color="success"
+        sx={{ minWidth: 40, borderRadius: 'sm' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="soft"
+        color="danger"
+        sx={{ minWidth: 40, borderRadius: '50%' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/IconWrapper.tsx b/docs/data/joy/components/aspect-ratio/IconWrapper.tsx
new file mode 100644
index 00000000000000..e18c53609874d2
--- /dev/null
+++ b/docs/data/joy/components/aspect-ratio/IconWrapper.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Stack from '@mui/joy/Stack';
+import Favorite from '@mui/icons-material/Favorite';
+
+export default function IconWrapper() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <AspectRatio ratio="1" variant="solid" color="primary" sx={{ minWidth: 40 }}>
+        {/* an extra div is required to make the icon center */}
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="outlined"
+        color="success"
+        sx={{ minWidth: 40, borderRadius: 'sm' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="soft"
+        color="danger"
+        sx={{ minWidth: 40, borderRadius: '50%' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
index 1d7680749b5867..216566ab63e787 100644
--- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md
+++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -14,7 +14,7 @@ Aspect Ratio is a wrapper component for quickly resizing content to conform to y
 Media content like images can be stretched, resized, and cropped based on the CSS `object-fit` property.
 
 :::info
-A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but MUI does not plan to implement it until browser compatibility increases to at least 94%.
+A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but MUI does not plan to implement it in Joy UI until browser compatibility increases to at least 94%.
 As of Q4 2022, compatibility is at 90%.
 Source: [Can I use…](https://caniuse.com/?search=aspect-ratio)
 :::
@@ -76,13 +76,13 @@ This is useful when the Aspect Ratio component wraps dynamic-width content, as s
 
 {{"demo": "MinMaxRatio.js"}}
 
-## Usage inside a flex row
+## Using inside a flex row
 
 When the Aspect Ratio component is a child of a flexbox `row` container, use `flex-basis` to set the ideal width of the content:
 
 {{"demo": "FlexRowRatio.js"}}
 
-## Usage with Next.js Image
+## Using with Next.js Image
 
 The Aspect Ratio component can be used with a [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) component as a child.
 The Image should always include the `layout="fill"` property—otherwise it requires `height` and `width` values, which would defeat the purpose of the Aspect Ratio component.
@@ -102,6 +102,14 @@ function App() {
 }
 ```
 
+## Using with an icon
+
+The Aspect Ratio component can be a handy tool for creating a square container for an icon.
+
+The example below show
+
+{{"demo": "IconWrapper.js"}}
+
 ## Common examples
 
 ### Mobile carousel
diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md
index 9d6f97904d37d5..947d37b24fb65b 100644
--- a/docs/data/joy/components/css-baseline/css-baseline.md
+++ b/docs/data/joy/components/css-baseline/css-baseline.md
@@ -33,7 +33,7 @@ export default function MyApp() {
 
 ## Scoping on children
 
-However, you might be progressively migrating a website to MUI, using a global reset might not be an option.
+However, you might be progressively migrating a website to Joy UI, using a global reset might not be an option.
 It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.
 
 ```jsx
diff --git a/docs/data/joy/components/grid/SpacingGrid.js b/docs/data/joy/components/grid/SpacingGrid.js
index a1270710829d93..01ebc1d717b2aa 100644
--- a/docs/data/joy/components/grid/SpacingGrid.js
+++ b/docs/data/joy/components/grid/SpacingGrid.js
@@ -40,7 +40,7 @@ export default function SpacingGrid() {
           <Grid container>
             <Grid>
               <FormControl>
-                <FormLabel sx={{ mb: 1.5 }}>spacing</FormLabel>
+                <FormLabel>spacing</FormLabel>
                 <RadioGroup
                   name="spacing"
                   aria-label="spacing"
diff --git a/docs/data/joy/components/grid/SpacingGrid.tsx b/docs/data/joy/components/grid/SpacingGrid.tsx
index ecf4995de899a8..09bedaf411eff4 100644
--- a/docs/data/joy/components/grid/SpacingGrid.tsx
+++ b/docs/data/joy/components/grid/SpacingGrid.tsx
@@ -40,7 +40,7 @@ export default function SpacingGrid() {
           <Grid container>
             <Grid>
               <FormControl>
-                <FormLabel sx={{ mb: 1.5 }}>spacing</FormLabel>
+                <FormLabel>spacing</FormLabel>
                 <RadioGroup
                   name="spacing"
                   aria-label="spacing"
diff --git a/docs/data/joy/components/select/ControlledOpenSelect.js b/docs/data/joy/components/select/ControlledOpenSelect.js
new file mode 100644
index 00000000000000..00008cfd621a73
--- /dev/null
+++ b/docs/data/joy/components/select/ControlledOpenSelect.js
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+import Button from '@mui/joy/Button';
+
+export default function ControlledOpenSelect() {
+  const [age, setAge] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const skipRef = React.useRef(false);
+
+  const handleChange = (event, newValue) => {
+    setAge(newValue);
+  };
+
+  return (
+    <Stack spacing={2} useFlexGap>
+      <Button
+        variant="soft"
+        onMouseDown={() => {
+          skipRef.current = true;
+        }}
+        onClick={() => {
+          skipRef.current = false;
+          setOpen((bool) => !bool);
+        }}
+      >
+        Open the select
+      </Button>
+      <div>
+        <Select
+          listboxOpen={open}
+          onListboxOpenChange={(isOpen) => {
+            if (!skipRef.current) {
+              setOpen(isOpen);
+            }
+          }}
+          value={age}
+          onChange={handleChange}
+        >
+          <Option value="">
+            <em>None</em>
+          </Option>
+          <Option value={10}>Ten</Option>
+          <Option value={20}>Twenty</Option>
+          <Option value={30}>Thirty</Option>
+        </Select>
+      </div>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/select/ControlledOpenSelect.tsx b/docs/data/joy/components/select/ControlledOpenSelect.tsx
new file mode 100644
index 00000000000000..10cb612c287f43
--- /dev/null
+++ b/docs/data/joy/components/select/ControlledOpenSelect.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+import Button from '@mui/joy/Button';
+
+export default function ControlledOpenSelect() {
+  const [age, setAge] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const skipRef = React.useRef(false);
+
+  const handleChange = (
+    event: React.SyntheticEvent | null,
+    newValue: string | null,
+  ) => {
+    setAge(newValue!);
+  };
+
+  return (
+    <Stack spacing={2} useFlexGap>
+      <Button
+        variant="soft"
+        onMouseDown={() => {
+          skipRef.current = true;
+        }}
+        onClick={() => {
+          skipRef.current = false;
+          setOpen((bool) => !bool);
+        }}
+      >
+        Open the select
+      </Button>
+      <div>
+        <Select
+          listboxOpen={open}
+          onListboxOpenChange={(isOpen) => {
+            if (!skipRef.current) {
+              setOpen(isOpen);
+            }
+          }}
+          value={age}
+          onChange={handleChange}
+        >
+          <Option value="">
+            <em>None</em>
+          </Option>
+          <Option value={10}>Ten</Option>
+          <Option value={20}>Twenty</Option>
+          <Option value={30}>Thirty</Option>
+        </Select>
+      </div>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/select/SelectBasic.js b/docs/data/joy/components/select/SelectBasic.js
index 3fa4686a460da1..a40c919b544bb5 100644
--- a/docs/data/joy/components/select/SelectBasic.js
+++ b/docs/data/joy/components/select/SelectBasic.js
@@ -3,8 +3,11 @@ import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 
 export default function SelectBasic() {
+  const handleChange = (event, newValue) => {
+    alert(`You chose "${newValue}"`);
+  };
   return (
-    <Select defaultValue="dog">
+    <Select defaultValue="dog" onChange={handleChange}>
       <Option value="dog">Dog</Option>
       <Option value="cat">Cat</Option>
       <Option value="fish">Fish</Option>
diff --git a/docs/data/joy/components/select/SelectBasic.tsx b/docs/data/joy/components/select/SelectBasic.tsx
index 3fa4686a460da1..32403626c32cfa 100644
--- a/docs/data/joy/components/select/SelectBasic.tsx
+++ b/docs/data/joy/components/select/SelectBasic.tsx
@@ -3,8 +3,14 @@ import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 
 export default function SelectBasic() {
+  const handleChange = (
+    event: React.SyntheticEvent | null,
+    newValue: string | null,
+  ) => {
+    alert(`You chose "${newValue}"`);
+  };
   return (
-    <Select defaultValue="dog">
+    <Select defaultValue="dog" onChange={handleChange}>
       <Option value="dog">Dog</Option>
       <Option value="cat">Cat</Option>
       <Option value="fish">Fish</Option>
diff --git a/docs/data/joy/components/select/SelectBasic.tsx.preview b/docs/data/joy/components/select/SelectBasic.tsx.preview
index 95b6c2a0879e38..3f25d283e28033 100644
--- a/docs/data/joy/components/select/SelectBasic.tsx.preview
+++ b/docs/data/joy/components/select/SelectBasic.tsx.preview
@@ -1,4 +1,4 @@
-<Select defaultValue="dog">
+<Select defaultValue="dog" onChange={handleChange}>
   <Option value="dog">Dog</Option>
   <Option value="cat">Cat</Option>
   <Option value="fish">Fish</Option>
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
index 1eb5ee06828cfa..6f9fa42e9f5a52 100644
--- a/docs/data/joy/components/select/select.md
+++ b/docs/data/joy/components/select/select.md
@@ -132,6 +132,12 @@ To control the placement of the listbox, use `placement`:
 
 :::
 
+#### Controlling the open state
+
+You can control the open state of the select with the `listboxOpen` prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the `defaultListboxOpen` prop.
+
+{{"demo": "ControlledOpenSelect.js"}}
+
 ### `Option` component
 
 The `Option` component is used for the choosable options within the select.
diff --git a/docs/data/joy/components/switch/SwitchUsage.js b/docs/data/joy/components/switch/SwitchUsage.js
index dec33a38f20129..fb2c378c958dbf 100644
--- a/docs/data/joy/components/switch/SwitchUsage.js
+++ b/docs/data/joy/components/switch/SwitchUsage.js
@@ -24,7 +24,7 @@ export default function SwitchUsage() {
           options: ['sm', 'md', 'lg'],
           defaultValue: 'md',
         },
-        { propName: 'checked', knob: 'switch', defaultValue: false },
+        { propName: 'checked', knob: 'controlled' },
         { propName: 'disabled', knob: 'switch' },
       ]}
       renderDemo={(props) => <Switch {...props} />}
diff --git a/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md b/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md
index 9e63521d6bd56c..8b4ab56eb551bf 100644
--- a/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md
+++ b/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md
@@ -187,3 +187,29 @@ Here is a collection of well-known icon libraries that you can use with Joy UI.
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
+
+### Iconify
+
+- [Browse icons](https://icon-sets.iconify.design/)
+- [Installation—React](https://docs.iconify.design/icon-components/react/)
+- [Installation—Web component](https://docs.iconify.design/iconify-icon/)
+- [Figma plugin](https://docs.iconify.design/design/figma/)
+
+<iframe src="https://codesandbox.io/embed/joy-ui-iconify-r8fjrm?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
+     style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
+     title="joy-ui-iconify"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+### Lucide
+
+- [Browse icons](https://icon-sets.iconify.design/)
+- [Installation—React](https://lucide.dev/docs/lucide-react)
+
+<iframe src="https://codesandbox.io/embed/joy-ui-lucide-sy7hio?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
+     style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;"
+     title="joy-ui-lucide"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
diff --git a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md
index b781c0bf41ecb1..8811fb0cc4c0c6 100644
--- a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md
+++ b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md
@@ -18,6 +18,11 @@ Additionally, keep these in mind when using them together:
 - Both of them use [MUI System](/system/getting-started/overview/) as their style engine, which uses React context for theming.
 - Theme scoping must be done on one of the libraries.
 
+## Prerequisite
+
+- Have `@mui/material` and `@mui/joy` installed in your project.
+- The version of both libraries must be [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0) or higher.
+
 ## Set up the providers
 
 Render Material UI's `CssVarsProvider` inside Joy UI's provider and use `THEME_ID` to separate the themes from each other.
diff --git a/docs/data/joy/main-features/automatic-adjustment/InputIntegration.js b/docs/data/joy/main-features/automatic-adjustment/InputIntegration.js
index 4ecd493f597f54..c7e9edf7179610 100644
--- a/docs/data/joy/main-features/automatic-adjustment/InputIntegration.js
+++ b/docs/data/joy/main-features/automatic-adjustment/InputIntegration.js
@@ -14,7 +14,7 @@ export default function InputIntegration() {
         placeholder="Password"
         type="password"
         endDecorator={
-          <IconButton color="neutral" size="sm">
+          <IconButton color="neutral">
             <VisibilityRoundedIcon />
           </IconButton>
         }
@@ -24,7 +24,7 @@ export default function InputIntegration() {
         placeholder="Password"
         type="password"
         endDecorator={
-          <IconButton color="neutral" size="sm">
+          <IconButton color="neutral">
             <VisibilityRoundedIcon />
           </IconButton>
         }
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index 695b91b7293e68..8f27cb6e158738 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -103,7 +103,7 @@ const pages = [
     ],
   },
   {
-    title: 'Component API',
+    title: 'APIs',
     pathname: '/joy-ui/api',
     icon: standardNavIcons.CodeIcon,
     children: pagesApi,
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index 600909bcd55abb..3f4a7fe06b8d4d 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -24,7 +24,7 @@ In addition, the `sx` prop allows you to specify any other CSS rules you may nee
 
 {{"demo": "BoxSx.js", "defaultCodeOpen": true }}
 
-## Overriding MUI components
+## Overriding Material UI components
 
 The Box component wraps your component.
 It creates a new DOM element, a `<div>` that by default can be changed with the `component` prop.
@@ -38,7 +38,7 @@ For instance, you can change the margin this way.
 However, sometimes you have to target the underlying DOM element.
 As an example, you may want to change the border of the Button.
 The Button component defines its own styles. CSS inheritance doesn't help.
-To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component.
+To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a Material UI component.
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>
@@ -47,7 +47,7 @@ To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx
 +<Button sx={{ border: '1px dashed grey' }}>Save</Button>
 ```
 
-For non-MUI components, use the `component` prop.
+For non-Material UI components, use the `component` prop.
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>
diff --git a/docs/data/material/components/css-baseline/css-baseline.md b/docs/data/material/components/css-baseline/css-baseline.md
index d0c0033f997444..b4583ada27f05d 100644
--- a/docs/data/material/components/css-baseline/css-baseline.md
+++ b/docs/data/material/components/css-baseline/css-baseline.md
@@ -30,7 +30,7 @@ export default function MyApp() {
 
 ## Scoping on children
 
-However, you might be progressively migrating a website to MUI, using a global reset might not be an option.
+However, you might be progressively migrating a website to Material UI, using a global reset might not be an option.
 It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.
 
 ```jsx
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index 22e3dced75deb6..917b29e0c0e383 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -137,12 +137,14 @@ Follow the [Modal limitations section](/material-ui/react-modal/#limitations).
 
 ## Complementary projects
 
-### Material UI Confirm
+For more advanced use cases you might be able to take advantage of:
 
-![stars](https://img.shields.io/github/stars/jonatanklosko/material-ui-confirm)
+### material-ui-confirm
+
+![stars](https://img.shields.io/github/stars/jonatanklosko/material-ui-confirm?style=social&label=Star)
 ![npm downloads](https://img.shields.io/npm/dm/material-ui-confirm.svg)
 
-This package provides dialogs for confirming user actions without writing boilerplate code.
+The package [`material-ui-confirm`](https://github.com/jonatanklosko/material-ui-confirm/) provides dialogs for confirming user actions without writing boilerplate code.
 
 ## Accessibility
 
diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md
index e0f50bbf698a8e..aed3d9d46b5763 100644
--- a/docs/data/material/components/grid2/grid2.md
+++ b/docs/data/material/components/grid2/grid2.md
@@ -32,7 +32,7 @@ From now on, the `Grid` v1 and `Grid` v2 refer to the import as:
 
 ```js
 import Grid from '@mui/material/Grid'; // Grid version 1
-import Grid2 from '@mui/material/Unstable_Grid2'; // Grid version 2
+import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
 ```
 
 :::
diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
index bb8357c4329d33..7aabade29d51ab 100644
--- a/docs/data/material/components/icons/icons.md
+++ b/docs/data/material/components/icons/icons.md
@@ -8,9 +8,9 @@ materialDesign: https://m2.material.io/design/iconography/system-icons.html
 
 # Icons
 
-<p class="description">Guidance and suggestions for using icons with MUI.</p>
+<p class="description">Guidance and suggestions for using icons with Material UI.</p>
 
-MUI provides icons support in three ways:
+Material UI provides icon support in three ways:
 
 1. Standardized [Material Icons](#material-svg-icons) exported as React components (SVG icons).
 1. With the [SvgIcon](#svgicon) component, a React wrapper for custom SVG icons.
@@ -36,7 +36,7 @@ Or **yarn**:
 yarn add @mui/icons-material
 ```
 
-These components use the MUI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.
+These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.
 
 If you aren't already using Material UI in your project, you can add it following the [installation guide](/material-ui/getting-started/installation/).
 
@@ -94,7 +94,7 @@ If you need a custom SVG icon (not available in the [Material Icons](/material-u
 This component extends the native `<svg>` element:
 
 - It comes with built-in accessibility.
-- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons.
+- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other Material UI components that use icons.
   This can be customized with the `viewBox` attribute.
   To inherit the `viewBox` value from the original image, the `inheritViewBox` prop can be used.
 - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop.
diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md
index 19dd0690113ad9..c7895c32a938a0 100644
--- a/docs/data/material/components/menus/menus.md
+++ b/docs/data/material/components/menus/menus.md
@@ -110,8 +110,11 @@ Here is an example of a context menu. (Right click to open.)
 
 For more advanced use cases you might be able to take advantage of:
 
-### PopupState helper
+### material-ui-popup-state
 
-There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.
+![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star)
+![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg)
+
+The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.
 
 {{"demo": "MenuPopupState.js"}}
diff --git a/docs/data/material/components/pagination/pagination.md b/docs/data/material/components/pagination/pagination.md
index 35cda40569f099..430e9dc520172f 100644
--- a/docs/data/material/components/pagination/pagination.md
+++ b/docs/data/material/components/pagination/pagination.md
@@ -41,7 +41,7 @@ It's possible to customize the control icons.
 
 ## Pagination ranges
 
-You can specify how many digits to display either side of current page with the `siblingRange` prop, and adjacent to the start and end page number with the `boundaryRange` prop.
+You can specify how many digits to display either side of current page with the `siblingCount` prop, and adjacent to the start and end page number with the `boundaryCount` prop.
 
 {{"demo": "PaginationRanges.js"}}
 
diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md
index fdd898228a5d67..e3790c005680b9 100644
--- a/docs/data/material/components/popover/popover.md
+++ b/docs/data/material/components/popover/popover.md
@@ -40,9 +40,11 @@ This demo demonstrates how to use the `Popover` component and the mouseover even
 
 For more advanced use cases, you might be able to take advantage of:
 
-### PopupState helper
+### material-ui-popup-state
 
-There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover
-state for you in most cases.
+![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star)
+![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg)
+
+The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover state for you in most cases.
 
 {{"demo": "PopoverPopupState.js"}}
diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md
index 2a66c4a6ec3edf..71d60732f06ad7 100644
--- a/docs/data/material/components/popper/popper.md
+++ b/docs/data/material/components/popper/popper.md
@@ -68,9 +68,11 @@ Highlight part of the text to see the popper:
 
 For more advanced use cases you might be able to take advantage of:
 
-### PopupState helper
+### material-ui-popup-state
 
-There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper
-state for you in most cases.
+![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star)
+![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg)
+
+The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper state for you in most cases.
 
 {{"demo": "PopperPopupState.js"}}
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index 233773dad3617b..6953739a60a0c7 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -94,7 +94,7 @@ For more advanced use cases you might be able to take advantage of:
 
 ### notistack
 
-![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars)
+![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Star)
 ![npm downloads](https://img.shields.io/npm/dm/notistack.svg)
 
 This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack).
diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md
index 8604a8413e28c6..40e4685898c423 100644
--- a/docs/data/material/components/stack/stack.md
+++ b/docs/data/material/components/stack/stack.md
@@ -22,7 +22,7 @@ Stack is ideal for one-dimensional layouts, while Grid is preferable when you ne
 ## Basics
 
 ```jsx
-import Stack from '@mui/joy/Stack';
+import Stack from '@mui/material/Stack';
 ```
 
 The Stack component acts as a generic container, wrapping around the elements to be arranged.
diff --git a/docs/data/material/components/table/DataTable.js b/docs/data/material/components/table/DataTable.js
index b2e857d238971e..140a43ac724245 100644
--- a/docs/data/material/components/table/DataTable.js
+++ b/docs/data/material/components/table/DataTable.js
@@ -40,7 +40,12 @@ export default function DataTable() {
       <DataGrid
         rows={rows}
         columns={columns}
-        paginationModel={{ page: 0, pageSize: 5 }}
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 5 },
+          },
+        }}
+        pageSizeOptions={[5, 10]}
         checkboxSelection
       />
     </div>
diff --git a/docs/data/material/components/table/DataTable.tsx b/docs/data/material/components/table/DataTable.tsx
index eefa8d3a2101f0..ded4d20968901b 100644
--- a/docs/data/material/components/table/DataTable.tsx
+++ b/docs/data/material/components/table/DataTable.tsx
@@ -40,7 +40,12 @@ export default function DataTable() {
       <DataGrid
         rows={rows}
         columns={columns}
-        paginationModel={{ page: 0, pageSize: 5 }}
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 5 },
+          },
+        }}
+        pageSizeOptions={[5, 10]}
         checkboxSelection
       />
     </div>
diff --git a/docs/data/material/components/table/DataTable.tsx.preview b/docs/data/material/components/table/DataTable.tsx.preview
index e28635e54d7954..925b43c630a7c0 100644
--- a/docs/data/material/components/table/DataTable.tsx.preview
+++ b/docs/data/material/components/table/DataTable.tsx.preview
@@ -1,6 +1,11 @@
 <DataGrid
   rows={rows}
   columns={columns}
-  paginationModel={{ page: 0, pageSize: 5 }}
+  initialState={{
+    pagination: {
+      paginationModel: { page: 0, pageSize: 5 },
+    },
+  }}
+  pageSizeOptions={[5, 10]}
   checkboxSelection
 />
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index dedd1f30feada4..308568eef4c876 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -306,9 +306,9 @@ In order for the text field to be accessible, **the input should be linked to th
 For more advanced use cases, you might be able to take advantage of:
 
 - [react-hook-form](https://react-hook-form.com/): React hook for form validation.
-- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): MUI and react-hook-form combined.
-- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using MUI with [formik](https://formik.org/).
-- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using MUI with [Redux Form](https://redux-form.com/).
-- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using MUI with [React Final Form](https://final-form.org/react).
+- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and react-hook-form combined.
+- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using Material UI with [formik](https://formik.org/).
+- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using Material UI with [Redux Form](https://redux-form.com/).
+- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using Material UI with [React Final Form](https://final-form.org/react).
 - [@ui-schema/ds-material](https://www.npmjs.com/package/@ui-schema/ds-material) Bindings for using Material UI with [UI Schema](https://github.com/ui-schema/ui-schema). JSON Schema compatible.
 - [@data-driven-forms/mui-component-mapper](https://www.data-driven-forms.org/provided-mappers/mui-component-mapper): Bindings for using Material UI with [Data Driven Forms](https://github.com/data-driven-forms/react-forms).
diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md
index cda713555bbf77..7467a4544c1d9a 100644
--- a/docs/data/material/components/tooltips/tooltips.md
+++ b/docs/data/material/components/tooltips/tooltips.md
@@ -129,7 +129,7 @@ In order to work with Safari, you need at least one display block or flex item b
 {{"demo": "DisabledTooltips.js"}}
 
 :::warning
-If you're not wrapping a MUI component that inherits from `ButtonBase`, for instance, a native `<button>` element, you should also add the CSS property _pointer-events: none;_ to your element when disabled:
+If you're not wrapping a Material UI component that inherits from `ButtonBase`, for instance, a native `<button>` element, you should also add the CSS property _pointer-events: none;_ to your element when disabled:
 :::
 
 ```jsx
diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md
index 43b76a31d5db32..8c1b84bd5ccba7 100644
--- a/docs/data/material/components/transitions/transitions.md
+++ b/docs/data/material/components/transitions/transitions.md
@@ -9,7 +9,7 @@ githubLabel: 'component: transitions'
 
 <p class="description">Transitions help to make a UI expressive and easy to use.</p>
 
-MUI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications.
+Material UI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications.
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
@@ -66,7 +66,7 @@ This example also demonstrates how to delay the enter transition.
 
 ## Child requirement
 
-- **Forward the style**: To better support server rendering, MUI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide).
+- **Forward the style**: To better support server rendering, Material UI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide).
   The `style` prop must be applied to the DOM for the animation to work as expected.
 - **Forward the ref**: The transition components require the first child element to forward its ref to the DOM node. For more details about ref, check out [Caveat with refs](/material-ui/guides/composition/#caveat-with-refs)
 - **Single element**: The transition components require only one child element (`React.Fragment` is not allowed).
@@ -101,7 +101,7 @@ As components are added or removed, the `in` prop is toggled automatically by `T
 
 ## TransitionComponent prop
 
-Some MUI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition.
+Some Material UI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition.
 You can use any of the above components or your own.
 It should respect the following conditions:
 
diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md
index 5fd028b6a14aa1..a3a90672c11ef2 100644
--- a/docs/data/material/components/typography/typography.md
+++ b/docs/data/material/components/typography/typography.md
@@ -17,7 +17,7 @@ A [typographic scale](https://m2.material.io/design/typography/#type-scale) has
 
 ## General
 
-The _Roboto_ font will **not** be automatically loaded by MUI.
+The _Roboto_ font will **not** be automatically loaded by Material UI.
 You are responsible for loading any fonts used in your application.
 Roboto Font has a few easy ways to get started. For more advanced configuration, check out
 [the theme customization section](/material-ui/customization/typography/).
@@ -57,7 +57,7 @@ import '@fontsource/roboto/700.css';
 For more info check out [Fontsource](https://github.com/fontsource/fontsource).
 
 Fontsource can be configured to load specific subsets, weights and styles.
-MUI default typography configuration only relies on 300, 400, 500, and 700 font weights.
+Material UI default typography configuration only relies on 300, 400, 500, and 700 font weights.
 
 ## Component
 
diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
index d90bdafb2557e4..b624e1edced218 100644
--- a/docs/data/material/components/use-media-query/use-media-query.md
+++ b/docs/data/material/components/use-media-query/use-media-query.md
@@ -26,9 +26,9 @@ The media query string can be any valid CSS media query, e.g. [`'(prefers-color-
 
 ⚠️ You can't use `'print'` per browsers limitation, e.g. [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398).
 
-## Using MUI's breakpoint helpers
+## Using Material UI's breakpoint helpers
 
-You can use MUI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows:
+You can use Material UI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows:
 
 ```jsx
 import { useTheme } from '@mui/material/styles';
diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md
index 1f79ebf9e00741..69a829ff983ba9 100644
--- a/docs/data/material/customization/breakpoints/breakpoints.md
+++ b/docs/data/material/customization/breakpoints/breakpoints.md
@@ -3,7 +3,7 @@
 <p class="description">API that enables the use of breakpoints in a wide variety of contexts.</p>
 
 For optimal user experience, Material Design interfaces need to be able to adapt their layout at various breakpoints.
-MUI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints).
+Material UI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints).
 
 The breakpoints are used internally in various components to make them responsive,
 but you can also take advantage of them
diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md
index 02928b597e6892..4a56fcebc77af2 100644
--- a/docs/data/material/customization/color/color.md
+++ b/docs/data/material/customization/color/color.md
@@ -71,7 +71,7 @@ If you are using the default primary and / or secondary shades then by providing
 
 ### Tools by the community
 
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
 - [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
 
 ## 2014 Material Design color palettes
@@ -80,7 +80,7 @@ These color palettes, originally created by Material Design in 2014, are compris
 
 ### Important Terms
 
-- **Palette**: A palette is a collection of colors, i.e. hues and their shades. MUI provides all colors from the Material Design guidelines.
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material UI provides all colors from the Material Design guidelines.
   [This color palette](#color-palette) has been designed with colors that work harmoniously with each other.
 - **Hue & Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500".
   "red 50" is the lightest shade of red (_pink!_), while "red 900" is the darkest.
diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md
index a9415dfd5f0b46..bf7bf09d29ed7d 100644
--- a/docs/data/material/customization/density/density.md
+++ b/docs/data/material/customization/density/density.md
@@ -1,6 +1,6 @@
 # Density
 
-<p class="description">How to apply density to MUI components.</p>
+<p class="description">How to apply density to Material UI components.</p>
 
 ## Applying density
 
@@ -35,7 +35,7 @@ The following components have props applying higher density:
 ## Explore theme density
 
 This tool allows you to apply density via spacing and component props. You can browse
-around and see how this applies to the overall feel of MUI components.
+around and see how this applies to the overall feel of Material UI components.
 
 If you enable high density a custom theme is applied to the docs. This theme is only
 for demonstration purposes. You _should not_ apply this theme to your whole application
diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md
index 3894dcac502ff2..3c8ca0448b916a 100644
--- a/docs/data/material/customization/how-to-customize/how-to-customize.md
+++ b/docs/data/material/customization/how-to-customize/how-to-customize.md
@@ -25,7 +25,7 @@ It can be used with all Material UI components.
 
 {{"demo": "SxProp.js" }}
 
-#### Overriding nested component styles
+### Overriding nested component styles
 
 To customize a specific part of a component, you can use the class name provided by Material UI inside the `sx` prop. As an example, let's say you want to change the `Slider` component's thumb from a circle to a square.
 
diff --git a/docs/data/material/customization/palette/CustomColor.tsx b/docs/data/material/customization/palette/CustomColor.tsx
index 61447a28cf34c3..47a0c8bbff768b 100644
--- a/docs/data/material/customization/palette/CustomColor.tsx
+++ b/docs/data/material/customization/palette/CustomColor.tsx
@@ -22,7 +22,7 @@ declare module '@mui/material/styles' {
   }
 }
 
-// Update the Button's color prop options
+// @babel-ignore-comment-in-output Update the Button's color prop options
 declare module '@mui/material/Button' {
   interface ButtonPropsColorOverrides {
     neutral: true;
diff --git a/docs/data/material/customization/spacing/spacing.md b/docs/data/material/customization/spacing/spacing.md
index c3d02670b3a836..f1e743c66545d4 100644
--- a/docs/data/material/customization/spacing/spacing.md
+++ b/docs/data/material/customization/spacing/spacing.md
@@ -2,7 +2,7 @@
 
 <p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
 
-MUI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default.
+Material UI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default.
 
 ```js
 const theme = createTheme();
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index 2b18db5e642c6e..e8fe3b719b720f 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -1,6 +1,6 @@
 # Theming
 
-<p class="description">Customize MUI with your theme. You can change the colors, the typography and much more.</p>
+<p class="description">Customize Material UI with your theme. You can change the colors, the typography and much more.</p>
 
 The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
 
@@ -11,14 +11,14 @@ To promote greater consistency between apps, light and dark theme types are avai
 ## Theme provider
 
 If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
-However, this is optional; MUI components come with a default theme.
+However, this is optional; Material UI components come with a default theme.
 
 `ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
 You can learn more about this in [the API section](#themeprovider).
 
 ## Theme configuration variables
 
-Changing the theme configuration variables is the most effective way to match MUI to your needs.
+Changing the theme configuration variables is the most effective way to match Material UI to your needs.
 The following sections cover the most important theme variables:
 
 - [`.palette`](/material-ui/customization/palette/)
@@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default
 
 ### Custom variables
 
-When using MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
+When using Material UI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
 For instance:
 
 ```jsx
@@ -80,7 +80,7 @@ declare module '@mui/material/styles' {
 
 The community has built great tools to build a theme:
 
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
 - [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
 
 ## Accessing the theme in a component
diff --git a/docs/data/material/customization/transitions/transitions.md b/docs/data/material/customization/transitions/transitions.md
index f38f426b4fdb96..cef7b16a40a259 100644
--- a/docs/data/material/customization/transitions/transitions.md
+++ b/docs/data/material/customization/transitions/transitions.md
@@ -1,6 +1,6 @@
 # Transitions
 
-<p class="description">The theme key enables you to customize the durations and easings of the various transitions used across MUI components, and offers a utility for creating custom transitions.</p>
+<p class="description">The theme key enables you to customize the durations and easings of the various transitions used across Material UI components, and offers a utility for creating custom transitions.</p>
 
 ## API
 
@@ -87,4 +87,4 @@ const theme = createTheme({
 
 ## References
 
-Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with MUI.
+Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with Material UI.
diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md
index 239a007684fa66..7fac41e1b419d0 100644
--- a/docs/data/material/customization/typography/typography.md
+++ b/docs/data/material/customization/typography/typography.md
@@ -84,13 +84,13 @@ Note that if you want to add additional `@font-face` declarations, you need to u
 
 ## Font size
 
-MUI uses `rem` units for the font size.
+Material UI uses `rem` units for the font size.
 The browser `<html>` element default font size is `16px`, but browsers have an option to change this value,
 so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support.
 Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings
 for devices that can be vastly different in size and viewing distance.
 
-To change the font-size of MUI you can provide a `fontSize` property.
+To change the font-size of Material UI you can provide a `fontSize` property.
 The default value is `14px`.
 
 ```js
@@ -163,13 +163,13 @@ Changing the font size can harm accessibility ♿️. Most browsers agree on the
 :::
 
 The `theme.typography.htmlFontSize` property is provided for this use case,
-which tells MUI what the font-size on the `<html>` element is.
+which tells Material UI what the font-size on the `<html>` element is.
 This is used to adjust the `rem` value so the calculated font-size always match the specification.
 
 ```js
 const theme = createTheme({
   typography: {
-    // Tell MUI what's the font-size on the html element is.
+    // Tell Material UI what the font-size on the html element is.
     htmlFontSize: 10,
   },
 });
diff --git a/docs/data/material/customization/z-index/z-index.md b/docs/data/material/customization/z-index/z-index.md
index ce2bf5b03a5a17..a93d8be6d9bd97 100644
--- a/docs/data/material/customization/z-index/z-index.md
+++ b/docs/data/material/customization/z-index/z-index.md
@@ -2,7 +2,7 @@
 
 <p class="description">z-index is the CSS property that helps control layout by providing a third axis to arrange content.</p>
 
-Several MUI components utilize `z-index`, employing a default z-index scale in MUI
+Several Material UI components utilize `z-index`, employing a default z-index scale
 that has been designed to properly layer drawers, modals, snackbars, tooltips, and more.
 
 The `z-index` values start at an arbitrary number, high and specific enough to ideally avoid conflicts:
diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md
index 4f101c5ffdd635..70ee6a2123125d 100644
--- a/docs/data/material/discover-more/backers/backers.md
+++ b/docs/data/material/discover-more/backers/backers.md
@@ -1,8 +1,8 @@
 # Sponsors & Backers
 
-<p class="description">Support MUI core's development through crowdfunding.</p>
+<p class="description">Support the development of new open-source projects from MUI through crowdfunding.</p>
 
-The core of MUI is a crowd-funded open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.
+The core of MUI is our crowd-funded open-source projects, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.
 
 ## MUI's sponsors
 
@@ -67,21 +67,21 @@ via [OpenCollective](https://opencollective.com/mui)
 
 ## FAQ
 
-### Why is MUI a "crowd-funded open-source project"?
+### Why is Material UI a "crowd-funded open-source project"?
 
-The core of MUI is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To make MUI a project that users can rely on for years to come, it needs to be well directed and financially sustainable.
+Material UI (as well as Base UI and Joy UI) is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To ensure that MUI's component libraries can stand the test of time for our users, they need to be well directed and financially sustainable.
 
-The absolute best way to support MUI's ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI core, which you and other MUI users then benefit from.
+The absolute best way to support MUI's ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI's products, which you and other MUI users then benefit from.
 
 ### How is sponsorship money spent?
 
 Sponsorship money is used to fund software development, testing, documentation, and releases of the MUI software suite.
 
-### Is sponsorship required to use MUI?
+### Is sponsorship required to use MUI's products?
 
-Users are not legally required to give back to the MUI project, but it is in their interest to do so.
+Users are not obligated to give back to MUI, but it is in their interest to do so.
 
-By significantly reducing the amount of work needed to achieve business goals and reducing running costs, MUI results in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization.
+By significantly reducing the amount of work needed to achieve business goals and reducing running costs, MUI's libraries result in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization.
 
 ### What's the difference between Patreon and OpenCollective?
 
diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md
index c6c174adba8eb4..95bd9a625d4f4d 100644
--- a/docs/data/material/discover-more/related-projects/related-projects.md
+++ b/docs/data/material/discover-more/related-projects/related-projects.md
@@ -2,7 +2,7 @@
 
 <p class="description">A carefully curated list of third-party tools that expand or build on top of Material UI's component library.</p>
 
-Developers from the MUI community have built some excellent supplemental tools for working with Material UI—this page gathers the best that we've seen.
+Developers from the community have built some excellent supplemental tools for working with Material UI—this page gathers the best that we've seen.
 
 Do you have a project that you think should be featured here?
 We'd love to see it.
@@ -56,3 +56,7 @@ Feel free to submit a pull request!
 ### Sparkline
 
 - [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value.
+
+## Admin frameworks
+
+- [React Admin](https://github.com/marmelab/react-admin): A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs.
diff --git a/docs/data/material/discover-more/roadmap/roadmap.md b/docs/data/material/discover-more/roadmap/roadmap.md
index b1c4c13973dc5f..25cf3fae73297c 100644
--- a/docs/data/material/discover-more/roadmap/roadmap.md
+++ b/docs/data/material/discover-more/roadmap/roadmap.md
@@ -4,10 +4,23 @@
 
 ## Methodology
 
-MUI is community driven – issues that resonate most with the community get the most attention.
+MUI is community-driven—issues that resonate most with the community get the most attention.
 Please **upvote** (👍) on GitHub the issues you are most interested in.
 Thank you for participating [in the developer survey](/blog/2021-developer-survey-results/).
 
+## Quarterly roadmap
+
+Our GitHub project's roadmap is where you can learn about what features we're working on, what stage they're at, and when we expect to bring them to you:
+
+- [MUI Core](https://github.com/orgs/mui/projects/18/views/1).
+  This repository focuses on empowering the creation of great design systems with React, as well as providing two ready to use themes (Material Design so far, another one coming in the near future).
+- [MUI X](https://github.com/mui/mui-x/projects/1).
+  This repository focuses on providing advanced React components.
+  Some of the features are MIT licensed, others are available under a commercial license.
+- [MUI Design kits](https://github.com/mui/mui-design-kits/projects/1)
+  This repository focuses on providing the components for designers on Figma and other design tools.
+  It's a great place to leave feedback, feature requests, and ask questions.
+
 ## Priorities
 
 Here are the top priorities:
@@ -25,19 +38,6 @@ Here are the top priorities:
 - **TypeScript.** 📏 We are continuously improving the definitions. The codebase is mostly written in JavaScript with manually authored `.d.ts` definitions. While we do not plan a migration effort as a standalone effort, new modules are written in TypeScript.
 - **Accessibility.** ♿️ We have relatively [few accessibility issues](https://darekkay.com/blog/accessible-ui-frameworks/), but we are eager to address them all. We would appreciate the help of accessibility experts.
 
-## Quarterly roadmap
-
-Our GitHub project's roadmap is where you can learn about what features we're working on, what stage they're at, and when we expect to bring them to you:
-
-- [MUI Core](https://github.com/mui/material-ui/projects/25).
-  This repository focuses on empowering the creation of great design systems with React, as well as providing two ready to use themes (Material Design so far, another one coming in the near future).
-- [MUI X](https://github.com/mui/mui-x/projects/1).
-  This repository focuses on providing advanced React components.
-  Some of the features are MIT licensed, others are available under a commercial license.
-- [MUI Design kits](https://github.com/mui/mui-design-kits/projects/1)
-  This repository focuses on providing the components for designers on Figma and other design tools.
-  It's a great place to leave feedback, feature requests, and ask questions.
-
 ## New components
 
 Here are the components we will work on being supported in the MUI ecosystem:
diff --git a/docs/data/material/discover-more/showcase/Showcase.js b/docs/data/material/discover-more/showcase/Showcase.js
index eff6f7dca223c0..d4a6e0fdacbb8c 100644
--- a/docs/data/material/discover-more/showcase/Showcase.js
+++ b/docs/data/material/discover-more/showcase/Showcase.js
@@ -45,7 +45,7 @@ const sortFunctions = {
 };
 
 export default function Showcase() {
-  const [sortFunctionName, setSortFunctionName] = React.useState('dateAdded');
+  const [sortFunctionName, setSortFunctionName] = React.useState('similarWebVisits');
   const sortFunction = sortFunctions[sortFunctionName];
   const t = useTranslate();
 
@@ -54,7 +54,7 @@ export default function Showcase() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1 }}>
+    <Box sx={{ flexGrow: 1, mx: [2, 0] }}>
       <FormControl sx={{ mb: 4, minWidth: 120 }}>
         <InputLabel htmlFor="sort">Sort by</InputLabel>
         <Select
@@ -101,9 +101,11 @@ export default function Showcase() {
               <CardMedia
                 component="img"
                 loading="lazy"
+                width="600"
+                height="450"
                 src={`/static/images/showcase/${app.image}`}
                 sx={{
-                  minHeight: 200,
+                  height: 'auto',
                   color: (theme) =>
                     theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100',
                   bgcolor: 'currentColor',
diff --git a/docs/data/material/discover-more/showcase/appList.js b/docs/data/material/discover-more/showcase/appList.js
index 580b863a2f8555..5f3ec7e8437d85 100644
--- a/docs/data/material/discover-more/showcase/appList.js
+++ b/docs/data/material/discover-more/showcase/appList.js
@@ -27,7 +27,7 @@ const appList = [
     description:
       'QuintoAndar is a company that uses technology and ' +
       'design to simplify the rental of residential real estate.',
-    image: 'quintoandar.png',
+    image: 'quintoandar.jpg',
     link: 'https://www.quintoandar.com.br/',
     similarWebVisits: 8500,
     dateAdded: '2019-05-08',
@@ -47,7 +47,7 @@ const appList = [
     description:
       'OpenClassrooms is an online platform offering top quality, ' +
       'education-to-employment programs and career coaching services for students worldwide. ',
-    image: 'openclassrooms.jpg',
+    image: 'openclassrooms.png',
     link: 'https://openclassrooms.com/en/',
     similarWebVisits: 6000,
     dateAdded: '2018-01-34',
@@ -319,16 +319,6 @@ const appList = [
     stars: 10,
     dateAdded: '2018-01-23',
   },
-  {
-    title: 'DropDesk',
-    description:
-      'DropDesk creates unique workspaces & experiences by converting unused space into vibrant ' +
-      'coworking spaces. Meet, work and gain a sense of community.',
-    image: 'dropdesk.jpg',
-    link: 'https://drop-desk.com/',
-    similarWebVisits: 50,
-    dateAdded: '2019-01-01',
-  },
   {
     title: 'npm registry browser',
     description:
diff --git a/docs/data/material/discover-more/vision/vision.md b/docs/data/material/discover-more/vision/vision.md
index 298787949ffed3..b3da70e7a9e255 100644
--- a/docs/data/material/discover-more/vision/vision.md
+++ b/docs/data/material/discover-more/vision/vision.md
@@ -2,13 +2,13 @@
 
 <p class="description">Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.</p>
 
-The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want MUI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
+The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
 
-Therefore, MUI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines.
+Therefore, Material UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines.
 
-We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material Design guidelines (which is a bar set quite high), you should be able to take advantage of it for your own business with any style customization needed. We want to see companies succeeding using MUI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product.
+We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material Design guidelines (which is a bar set quite high), you should be able to take advantage of it for your own business with any style customization needed. We want to see companies succeeding using Material UI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product.
 
-From a developer's point of view, we want MUI to:
+From a developer's point of view, we want Material UI to:
 
 - Deliver on fully encapsulated / composable React components.
 - Be themeable / customizable.
diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md
index 526aa0ac573bad..76502276b5d48b 100644
--- a/docs/data/material/getting-started/design-resources/design-resources.md
+++ b/docs/data/material/getting-started/design-resources/design-resources.md
@@ -6,7 +6,7 @@
 <a href="https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-adobe-xd.svg" alt="adobe-xd" width="69" height="68" /></a>
 <a href="https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" width="73" height="68" /></a>
 
-## MUI resources
+## Material UI resources
 
 ### Figma
 
diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
index 3cad359fcb93b1..3e72d8d8330362 100644
--- a/docs/data/material/getting-started/example-projects/example-projects.md
+++ b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -53,7 +53,12 @@ If you want to start with a more complete and real-world example, you could take
   - All PWA features included (SW, Notifications, deferred installation prompt and more)
   - Optimized and scalable performance (all ~100 points on Lighthouse)
 
-<!-- TODO: revert this once it is migrated to v5
+- [React Admin](https://github.com/marmelab/react-admin)
+
+  - ![stars](https://img.shields.io/github/stars/marmelab/react-admin.svg?style=social&label=Star)
+  - A frontend Framework for building B2B applications running in the browser
+  - On top of REST/GraphQL APIs, using ES6, React and Material Design
+
 - [React SaaS Template](https://github.com/dunky11/react-saas-template):
 
   - ![stars](https://img.shields.io/github/stars/dunky11/react-saas-template.svg?style=social&label=Star)
@@ -62,24 +67,13 @@ If you want to start with a more complete and real-world example, you could take
   - Fully routed using react-router
   - Lazy loads components to boost performance
   - Components for statistics, text with emoji support, image upload and much more...
--->
-
-<!-- TODO: revert this once it is migrated to v5
-- [Material Sense](https://github.com/alexanmtz/material-sense):
-
-  - ![stars](https://img.shields.io/github/stars/alexanmtz/material-sense.svg?style=social&label=Star)
-  - Graph using recharts
-  - React Router included with a navigation example
-  - A docker container with an Nginx server for production build
-  - Created with Create React App
--->
 
 ### Paid
 
 - [ScaffoldHub](https://scaffoldhub.io/?partner=1):
 
   - Build your complete application with this online tool
-  - Choose your framework and library (React & MUI!)
+  - Choose your framework and library (React with Material UI)
   - Choose your database (SQL, MongoDB or Firestore)
   - Model your database and application with the intuitive GUI
   - Generate your application, including a complete scaffolded backend
@@ -87,5 +81,5 @@ If you want to start with a more complete and real-world example, you could take
 
 - [Divjoy](https://divjoy.com?via=material-ui):
 
-  - Create your MUI app in minutes.
+  - Create your Material UI app in minutes.
   - You'll get a nice template, authentication, database integration, subscription payments, and more.
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index 5acc529300417f..6baf6bb437bb90 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -4,11 +4,11 @@
 
 If you still can't find what you're looking for, you can refer to our [support page](/material-ui/getting-started/support/).
 
-## MUI is awesome. How can I support the project?
+## MUI is awesome. How can I support the company?
 
 There are many ways to support MUI:
 
-- **Spread the word**. Evangelize MUI by [linking to mui.com](https://mui.com/) on your website, every backlink matters.
+- **Spread the word**. Evangelize MUI's products by [linking to mui.com](https://mui.com/) on your website—every backlink matters.
   Follow us on [Twitter](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends.
 - **Give us feedback**. Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved.
 - **Help new users**. You can answer questions on
@@ -20,14 +20,14 @@ There are many ways to support MUI:
   - Help [translate](https://translate.mui.com) the documentation.
   - [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls).
 - **Support us financially on [OpenCollective](https://opencollective.com/mui)**.
-  If you use MUI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through OpenCollective.
+  If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through OpenCollective.
   All funds donated are managed transparently, and Sponsors receive recognition in the README and on the MUI home page.
 
 ## Why do the fixed positioned elements move when a modal is opened?
 
 Scrolling is blocked as soon as a modal is opened.
 This prevents interacting with the background when the modal should be the only interactive content. However, removing the scrollbar can make your **fixed positioned elements** move.
-In this situation, you can apply a global `.mui-fixed` class name to tell MUI to handle those elements.
+In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
 
 ## How can I disable the ripple effect globally?
 
@@ -52,7 +52,7 @@ const theme = createTheme({
 
 ## How can I disable transitions globally?
 
-MUI uses the same theme helper for creating all its transitions.
+Material UI uses the same theme helper for creating all its transitions.
 Therefore you can disable all transitions by overriding the helper in your theme:
 
 ```js
@@ -105,10 +105,10 @@ If you choose not to use it, you can still disable transitions and animations by
 No, it's not required.
 But if you are using the default styled engine (`@mui/styled-engine`) the Emotion dependency comes built in, so carries no additional bundle size overhead.
 
-Perhaps, however, you're adding some MUI components to an app that already uses another styling solution,
+Perhaps, however, you're adding some Material UI components to an app that already uses another styling solution,
 or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the
 [Style library interoperability](/material-ui/guides/interoperability/) section,
-where we show how simple it is to restyle MUI components with alternative style libraries.
+where we show how simple it is to restyle Material UI components with alternative style libraries.
 
 ## When should I use inline-style vs. CSS?
 
@@ -126,9 +126,9 @@ We detail the [integration with third-party routing libraries](/material-ui/guid
 
 ## How can I access the DOM element?
 
-All MUI components that should render something in the DOM forward their
+All Material UI components that should render something in the DOM forward their
 ref to the underlying DOM component. This means that you can get DOM elements
-by reading the ref attached to MUI components:
+by reading the ref attached to Material UI components:
 
 ```jsx
 // or a ref setter function
@@ -139,7 +139,7 @@ const ref = React.createRef();
 const element = ref.current;
 ```
 
-If you're not sure if the MUI component in question forwards its ref you
+If you're not sure if the Material UI component in question forwards its ref you
 can check the API documentation under "Props" e.g. the [Button API](/material-ui/api/button/#props)
 includes
 
@@ -249,13 +249,14 @@ Check out the [reference implementations](/material-ui/guides/server-rendering/#
 ## Why are the colors I am seeing different from what I see here?
 
 The documentation site is using a custom theme. Hence, the color palette is
-different from the default theme that MUI ships. Please refer to [this
+different from the default theme that Material UI ships. Please refer to [this
 page](/material-ui/customization/theming/) to learn about theme customization.
 
 ## Why does component X require a DOM node in a prop instead of a ref object?
 
-Components like the [Portal](/base/react-portal/components-api/#portal) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
-It seems convenient to simply pass a ref object in those props and let MUI access the current value.
+Components like the [Portal](/base/api/portal/#props) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
+It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
+
 This works in a simple scenario:
 
 ```jsx
@@ -359,13 +360,13 @@ If you are getting the error: `TypeError: Cannot convert a Symbol value to a str
 ## [v4] Why aren't my components rendering correctly in production builds?
 
 The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle.
-For MUI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
+For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them.
 
 You could end up accidentally using two class name generators in a variety of scenarios:
 
-- You accidentally **bundle** two versions of MUI. You might have a dependency not correctly setting MUI as a peer dependency.
+- You accidentally **bundle** two versions of Material UI. You might have a dependency not correctly setting Material UI as a peer dependency.
 - You are using `StylesProvider` for a **subset** of your React tree.
 - You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
 
@@ -373,7 +374,7 @@ You could end up accidentally using two class name generators in a variety of sc
 If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
 :::
 
-Overall, it's simple to recover from this problem by wrapping each MUI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
+Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
 
 ### [v4] CSS works only on first load and goes missing
 
@@ -438,11 +439,11 @@ This generator needs to behave identically on the server and on the client. For
      const html = ReactDOMServer.renderToString(
   ```
 
-- You need to verify that your client and server are running the **exactly the same version** of MUI.
+- You need to verify that your client and server are running the **exactly the same version** of Material UI.
   It is possible that a mismatch of even minor versions can cause styling problems.
   To check version numbers, run `npm list @mui/material` in the environment where you build your application and also in your deployment environment.
 
-  You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json.
+  You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
 
   _example of fix (package.json):_
 
diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
index 9df3fc1773ad83..c32cd2e683d4a4 100644
--- a/docs/data/material/getting-started/support/support.md
+++ b/docs/data/material/getting-started/support/support.md
@@ -8,8 +8,8 @@ The community is your first stop for questions and advice about the framework. W
 
 ### Stack Overflow
 
-For crowdsourced answers from expert MUI developers in our community.
-Stack Overflow is also visited from time to time by the maintainers of MUI.
+For crowdsourced answers from expert Material UI developers in our community.
+Stack Overflow is also visited from time to time by the maintainers of Material UI.
 
 [Post a question](https://stackoverflow.com/questions/tagged/mui)
 
@@ -43,9 +43,9 @@ Stay up to date with the development of the library by following the blog.
 
 ### Resources 📖
 
-New to MUI? It's easy to learn if you know where to start!
+New to Material UI? It's easy to learn if you know where to start!
 
-[Learn MUI](/material-ui/getting-started/learn/)
+[Learn Material UI](/material-ui/getting-started/learn/)
 
 ### Twitter
 
@@ -108,13 +108,13 @@ Request a demo
 
 ### Custom work 🛠
 
-Tweak MUI to meet specific requirements. Give us a summary of your needs and we'll help you if we can. We might:
+Tweak MUI's component libraries to meet specific requirements. Give us a summary of your needs and we'll help you if we can. We might:
 
 - Give you an estimate of time and price if the work is straightforward
-- Suggest alternatives that might not require MUI
+- Suggest alternatives that might not require MUI components
 - Decline the work due to timing or relevancy
 
-Note that work must be MUI related.
+Note that work must be MUI-related.
 We don't accept general React development work.
 Our contracting price is $200/hour or $1,500/day.
 
diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
index a3d99f9f81d098..6559c6fa26cc73 100644
--- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md
+++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
@@ -1,10 +1,10 @@
 # Supported platforms
 
-<p class="description">Learn about the platforms, from modern to old, that are supported by MUI.</p>
+<p class="description">Learn about the platforms, from modern to old, that are supported by Material UI.</p>
 
 ## Browser
 
-MUI supports the latest, stable releases of all major browsers and platforms.
+Material UI supports the latest, stable releases of all major browsers and platforms.
 You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation.
 
 <!-- #stable-snapshot -->
@@ -17,13 +17,13 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow
 
 An extensive list can be found in our [.browserlistrc](https://github.com/mui/material-ui/blob/-/.browserslistrc#L12-L27) (check the `stable` entry).
 
-Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that MUI supports it.
+Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that Material UI supports it.
 [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html).
-You can expect MUI's components to render without major issues.
+You can expect Material UI's components to render without major issues.
 
 ### IE 11
 
-MUI provides **partial** supports for IE 11. Be aware of the following:
+Material UI provides **partial** supports for IE 11. Be aware of the following:
 
 - Some of the components have no support. For instance, the new components, the data grid, the date picker.
 - Some of the components have degraded support. For instance, the outlined input border radius is missing, the combobox doesn't remove diacritics, the circular progress animation is wobbling.
@@ -39,7 +39,7 @@ v6 will completely remove the support of IE 11.
 
 <!-- #stable-snapshot -->
 
-MUI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering.
+Material UI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering.
 The objective is to support Node.js down to the [last version in maintenance mode](https://github.com/nodejs/Release#release-schedule).
 
 ### CSS prefixing
@@ -57,10 +57,10 @@ It's a must-do for static pages, but it needs to be put in balance with not doin
 
 <!-- #react-peer-version -->
 
-MUI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root).
+Material UI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root).
 Have a look at the older [versions](https://mui.com/versions/) for backward compatibility.
 
 ## TypeScript
 
-MUI requires a minimum version of TypeScript 3.5.
+Material UI requires a minimum version of TypeScript 3.5.
 This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old.
diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
index dc79bf4ea64b62..01b4ee0847228e 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.js
+++ b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -33,7 +33,7 @@ const mainFeaturedPost = {
   title: 'Title of a longer featured blog post',
   description:
     "Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.",
-  image: 'https://source.unsplash.com/random',
+  image: 'https://source.unsplash.com/random/?blog/',
   imageText: 'main image description',
   linkText: 'Continue reading…',
 };
@@ -44,7 +44,7 @@ const featuredPosts = [
     date: 'Nov 12',
     description:
       'This is a wider card with supporting text below as a natural lead-in to additional content.',
-    image: 'https://source.unsplash.com/random',
+    image: 'https://source.unsplash.com/random/?blog/',
     imageLabel: 'Image Text',
   },
   {
@@ -52,7 +52,7 @@ const featuredPosts = [
     date: 'Nov 11',
     description:
       'This is a wider card with supporting text below as a natural lead-in to additional content.',
-    image: 'https://source.unsplash.com/random',
+    image: 'https://source.unsplash.com/random/?blog/',
     imageLabel: 'Image Text',
   },
 ];
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
index dc79bf4ea64b62..01b4ee0847228e 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.tsx
+++ b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -33,7 +33,7 @@ const mainFeaturedPost = {
   title: 'Title of a longer featured blog post',
   description:
     "Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.",
-  image: 'https://source.unsplash.com/random',
+  image: 'https://source.unsplash.com/random/?blog/',
   imageText: 'main image description',
   linkText: 'Continue reading…',
 };
@@ -44,7 +44,7 @@ const featuredPosts = [
     date: 'Nov 12',
     description:
       'This is a wider card with supporting text below as a natural lead-in to additional content.',
-    image: 'https://source.unsplash.com/random',
+    image: 'https://source.unsplash.com/random/?blog/',
     imageLabel: 'Image Text',
   },
   {
@@ -52,7 +52,7 @@ const featuredPosts = [
     date: 'Nov 11',
     description:
       'This is a wider card with supporting text below as a natural lead-in to additional content.',
-    image: 'https://source.unsplash.com/random',
+    image: 'https://source.unsplash.com/random/?blog/',
     imageLabel: 'Image Text',
   },
 ];
diff --git a/docs/data/material/guides/api/api.md b/docs/data/material/guides/api/api.md
index cb7914e6f0d182..281dc33320b6de 100644
--- a/docs/data/material/guides/api/api.md
+++ b/docs/data/material/guides/api/api.md
@@ -1,6 +1,6 @@
 # API design approach
 
-<p class="description">We have learned a great deal regarding how MUI is used, and the v1 rewrite allowed us to completely rethink the component API.</p>
+<p class="description">We have learned a great deal regarding how Material UI is used, and the v1 rewrite allowed us to completely rethink the component API.</p>
 
 :::info
 API design is hard because you can make it seem simple but it's actually deceptively complex, or make it actually simple but seem complex.
@@ -147,7 +147,7 @@ For example, let's take a button that has different types. Each option has its p
   bounds the number of props exposed,
   and can easily support new values in the future.
 
-The MUI components use a combination of the two approaches according to the following rules:
+The Material UI components use a combination of the two approaches according to the following rules:
 
 - A _boolean_ is used when **2** possible values are required.
 - An _enum_ is used when **> 2** possible values are required, or if there is the possibility that additional possible values may be required in the future.
diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md
index f92790907ada18..5ab0d24b7c482b 100644
--- a/docs/data/material/guides/composition/composition.md
+++ b/docs/data/material/guides/composition/composition.md
@@ -1,10 +1,10 @@
 # Composition
 
-<p class="description">MUI tries to make composition as easy as possible.</p>
+<p class="description">Material UI tries to make composition as easy as possible.</p>
 
 ## Wrapping components
 
-To provide maximum flexibility and performance, MUI needs a way to know the nature of the child elements a component receives.
+To provide maximum flexibility and performance, Material UI needs a way to know the nature of the child elements a component receives.
 To solve this problem, we tag some of the components with a `muiName` static property when needed.
 
 You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution.
@@ -24,11 +24,11 @@ WrappedIcon.muiName = Icon.muiName;
 
 ## Component prop
 
-MUI allows you to change the root element that will be rendered via a prop called `component`.
+Material UI allows you to change the root element that will be rendered via a prop called `component`.
 
 ### How does it work?
 
-The custom component will be rendered by MUI like this:
+The custom component will be rendered by Material UI like this:
 
 ```js
 return React.createElement(props.component, props);
@@ -186,14 +186,14 @@ Some of the components need access to the DOM node. This was previously possible
 by using `ReactDOM.findDOMNode`. This function is deprecated in favor of `ref` and
 ref forwarding. However, only the following component types can be given a `ref`:
 
-- Any MUI component
+- Any Material UI component
 - class components i.e. `React.Component` or `React.PureComponent`
 - DOM (or host) components e.g. `div` or `button`
 - [React.forwardRef components](https://react.dev/reference/react/forwardRef)
 - [React.lazy components](https://react.dev/reference/react/lazy)
 - [React.memo components](https://react.dev/reference/react/memo)
 
-If you don't use one of the above types when using your components in conjunction with MUI, you might see a warning from
+If you don't use one of the above types when using your components in conjunction with Material UI, you might see a warning from
 React in your console similar to:
 
 :::warning
@@ -225,7 +225,7 @@ Only the two most common use cases are covered. For more information see [this s
  <Tooltip title="Hello again."><SomeContent /></Tooltip>;
 ```
 
-To find out if the MUI component you're using has this requirement, check
+To find out if the Material UI component you're using has this requirement, check
 out the props API documentation for that component. If you need to forward refs
 the description will link to this section.
 
diff --git a/docs/data/material/guides/content-security-policy/content-security-policy.md b/docs/data/material/guides/content-security-policy/content-security-policy.md
index 7f1bb84b116d8b..5ebb7d26f6f938 100644
--- a/docs/data/material/guides/content-security-policy/content-security-policy.md
+++ b/docs/data/material/guides/content-security-policy/content-security-policy.md
@@ -20,7 +20,7 @@ You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/
 
 ### Server-Side Rendering (SSR)
 
-To use CSP with MUI (and emotion), you need to use a nonce.
+To use CSP with Material UI (and Emotion), you need to use a nonce.
 A nonce is a randomly generated string that is only used once, therefore you need to add server middleware to generate one on each request.
 
 A CSP nonce is a Base 64 encoded string. You can generate one like this:
diff --git a/docs/data/material/guides/interoperability/interoperability.md b/docs/data/material/guides/interoperability/interoperability.md
index f4a82d7e526277..e76baff4152704 100644
--- a/docs/data/material/guides/interoperability/interoperability.md
+++ b/docs/data/material/guides/interoperability/interoperability.md
@@ -1,6 +1,6 @@
 # Style library interoperability
 
-<p class="description">While you can use the Emotion-based styling solution provided by MUI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).</p>
+<p class="description">While you can use the Emotion-based styling solution provided by Material UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).</p>
 
 This guide aims to document the most popular alternatives,
 but you should find that the principles applied here can be adapted to other libraries.
@@ -53,7 +53,7 @@ export default function PlainCssSlider() {
 
 ### CSS injection order ⚠️
 
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
 
 ```jsx
 import * as React from 'react';
@@ -62,13 +62,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
 export default function GlobalCssPriority() {
   return (
     <StyledEngineProvider injectFirst>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </StyledEngineProvider>
   );
 }
 ```
 
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -83,7 +83,7 @@ const cache = createCache({
 export default function PlainCssPriority() {
   return (
     <CacheProvider value={cache}>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </CacheProvider>
   );
 }
@@ -95,7 +95,7 @@ export default function PlainCssPriority() {
 
 If you attempt to style the Slider,
 you will likely need to affect some of the Slider's child elements, for example the thumb.
-In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
 
 The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
 
@@ -176,7 +176,7 @@ export default function PlainCssSliderDeep2() {
 ## Global CSS
 
 Explicitly providing the class names to the component is too much effort?
-[You can target the class names generated by MUI](/system/styles/advanced/).
+[You can target the class names generated by Material UI](/system/styles/advanced/).
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-classnames-dho8k)
 
@@ -206,7 +206,7 @@ export default function GlobalCssSlider() {
 
 ### CSS injection order ⚠️
 
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
 
 ```jsx
 import * as React from 'react';
@@ -215,13 +215,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
 export default function GlobalCssPriority() {
   return (
     <StyledEngineProvider injectFirst>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </StyledEngineProvider>
   );
 }
 ```
 
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -236,7 +236,7 @@ const cache = createCache({
 export default function GlobalCssPriority() {
   return (
     <CacheProvider value={cache}>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </CacheProvider>
   );
 }
@@ -248,7 +248,7 @@ export default function GlobalCssPriority() {
 
 If you attempt to style the Slider,
 you will likely need to affect some of the Slider's child elements, for example the thumb.
-In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
 
 The following example overrides the slider's `thumb` style in addition to the custom styles on the slider itself.
 
@@ -328,7 +328,7 @@ export default function StyledComponents() {
 
 If you attempt to style the Slider,
 you will likely need to affect some of the Slider's child elements, for example the thumb.
-In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
 
 The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
 
@@ -367,18 +367,18 @@ export default function StyledComponentsDeep2() {
 
 ### Theme
 
-By using the MUI theme provider, the theme will be available in the theme context
+By using the Material UI theme provider, the theme will be available in the theme context
 of the styled engine too (Emotion or styled-components, depending on your configuration).
 
 :::warning
 If you are already using a custom theme with styled-components or Emotion,
-it might not be compatible with MUI's theme specification. If it's not
-compatible, you need to render MUI's ThemeProvider first. This will
+it might not be compatible with Material UI's theme specification. If it's not
+compatible, you need to render Material UI's ThemeProvider first. This will
 ensure the theme structures are isolated. This is ideal for the progressive adoption
-of MUI's components in the codebase.
+of Material UI's components in the codebase.
 :::
 
-You are encouraged to share the same theme object between MUI and the rest of your project.
+You are encouraged to share the same theme object between Material UI and the rest of your project.
 
 ```jsx
 const CustomizedSlider = styled(Slider)(
@@ -463,7 +463,7 @@ export default function CssModulesSlider() {
 
 ### CSS injection order ⚠️
 
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
 
 ```jsx
 import * as React from 'react';
@@ -472,13 +472,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
 export default function GlobalCssPriority() {
   return (
     <StyledEngineProvider injectFirst>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </StyledEngineProvider>
   );
 }
 ```
 
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -493,7 +493,7 @@ const cache = createCache({
 export default function CssModulesPriority() {
   return (
     <CacheProvider value={cache}>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </CacheProvider>
   );
 }
@@ -505,8 +505,8 @@ export default function CssModulesPriority() {
 
 If you attempt to style the Slider,
 you will likely need to affect some of the Slider's child elements, for example the thumb.
-In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
-It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the MUI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
 
 The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
 
@@ -593,7 +593,7 @@ export default function CssModulesSliderDeep2() {
 
 ### The `css` prop
 
-Emotion's **css()** method works seamlessly with MUI.
+Emotion's **css()** method works seamlessly with Material UI.
 
 {{"demo": "EmotionCSS.js", "defaultCodeOpen": true}}
 
@@ -612,11 +612,11 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 ### Setup
 
-If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project.
+If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project.
 If you use a different framework, or already have set up your project, follow these steps:
 
 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
-2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the MUI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
+2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
 
 **tailwind.config.js**
 
@@ -647,11 +647,11 @@ If you use a different framework, or already have set up your project, follow th
 ```
 
 Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
-However, in a few edge cases, MUI uses nested CSS selectors that win over Tailwind CSS.
+However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
 Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes.
 More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy
 
-4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives MUI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in MUI:
+4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
 
 ```jsx
 import * as React from 'react';
@@ -660,13 +660,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
 export default function GlobalCssPriority() {
   return (
     <StyledEngineProvider injectFirst>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </StyledEngineProvider>
   );
 }
 ```
 
-**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -681,7 +681,7 @@ const cache = createCache({
 export default function PlainCssPriority() {
   return (
     <CacheProvider value={cache}>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </CacheProvider>
   );
 }
@@ -721,7 +721,7 @@ root.render(
 
 ### Usage
 
-Now it's all set up and you can start using Tailwind CSS on the MUI components!
+Now it's all set up and you can start using Tailwind CSS on the Material UI components!
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
@@ -789,10 +789,10 @@ export default function SliderThumbOverrides() {
 
 ## ~~JSS~~ TSS
 
-[JSS](https://cssinjs.org/) itself is no longer supported in MUI however,
+[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
 if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/s/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
 
-[TSS](https://docs.tss-react.dev) integrates well with MUI and provide a better
+[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
 TypeScript support than JSS.
 
 :::info
diff --git a/docs/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md
index c2bc202ab11e10..8e77ebb30a4d12 100644
--- a/docs/data/material/guides/localization/localization.md
+++ b/docs/data/material/guides/localization/localization.md
@@ -2,7 +2,7 @@
 
 <p class="description">Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.</p>
 
-The default locale of MUI is English (United States). If you want to use other locales, follow the instructions below.
+The default locale of Material UI is English (United States). If you want to use other locales, follow the instructions below.
 
 ## Locale text
 
@@ -96,8 +96,8 @@ You can [find the source](https://github.com/mui/material-ui/blob/master/package
 
 To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
 
-Please do consider contributing new translations back to MUI by opening a pull request.
-However, MUI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers.
+Please do consider contributing new translations back to Material UI by opening a pull request.
+However, Material UI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers.
 
 ## RTL Support
 
diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
index d31ab7a13ebbf6..bdc3eda53d8b5e 100644
--- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
+++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
@@ -4,25 +4,23 @@
 
 ## Bundle size matters
 
-MUI takes the bundle size very seriously. Size snapshots are taken
+Material UI's maintainers take bundle size very seriously. Size snapshots are taken
 on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot/)).
 Combined with [dangerJS](https://danger.systems/js/) we can inspect
-[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every pull request.
+[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
 
 ## When and how to use tree-shaking?
 
-Tree-shaking of MUI's open source projects, e.g. Material UI works out of the box in modern frameworks.
-MUI exposes its full API on the top-level `@mui` imports.
-If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically in **production**:
+Tree-shaking Material UI works out of the box in modern frameworks.
+Material UI exposes its full API on the top-level `@mui` imports.
+If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically:
 
 ```js
 import { Button, TextField } from '@mui/material';
 ```
 
-:::warning
-The following instructions are only needed if you need to optimize the load times in **development** (e.g. needed for icons) or if you are using an older bundler
+⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler
 that doesn't support tree-shaking.
-:::
 
 ## Development environment
 
@@ -187,10 +185,10 @@ Modify your `package.json` commands:
 ```diff
    "scripts": {
 -    "start": "react-scripts start",
--    "build": "react-scripts build",
--    "test": "react-scripts test",
 +    "start": "react-app-rewired start",
+-    "build": "react-scripts build",
 +    "build": "react-app-rewired build",
+-    "test": "react-scripts test",
 +    "test": "react-app-rewired test",
      "eject": "react-scripts eject"
   }
@@ -212,19 +210,10 @@ It will perform the following diffs:
 ## Available bundles
 
 The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/).
-In addition, to the default bundle, you can opt-in:
-
-- **Modern bundle**. The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/).
-  It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
-  This can be used to make separate bundles targeting different browsers.
 
-- **Legacy bundle**. If you need to support IE 11 you cannot use the default or modern bundle without transpilation.
-  However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/).
-  You don't need any additional polyfills.
-
-### How to use
-
-You can use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+⚠️ Developers are **strongly discouraged** to import from any of the other bundles directly.
+Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles.
+Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {
@@ -241,7 +230,14 @@ You can use these bundles at the bundler level with e.g [Webpack's `resolve.alia
 }
 ```
 
-:::error
-Developers are **strongly discouraged** to import from these bundles directly in the code because a third-party dependency might import a different bundle.
-So unless you can guarantee that all your dependencies use the same bundle, don't do it.
-:::
+### Modern bundle
+
+The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/).
+It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
+This can be used to make separate bundles targeting different browsers.
+
+### Legacy bundle
+
+If you need to support IE 11 you cannot use the default or modern bundle without transpilation.
+However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/).
+You don't need any additional polyfills.
diff --git a/docs/data/material/guides/pickers-migration/pickers-migration.md b/docs/data/material/guides/pickers-migration/pickers-migration.md
index 0456a60b48791c..803e54853c6572 100644
--- a/docs/data/material/guides/pickers-migration/pickers-migration.md
+++ b/docs/data/material/guides/pickers-migration/pickers-migration.md
@@ -87,7 +87,7 @@ function App() {
 
 ## Render input
 
-We introduced a new **required** `renderInput` prop. This simplifies using non-MUI text field input components.
+We introduced a new **required** `renderInput` prop. This simplifies using non-Material UI text field input components.
 
 ```jsx
 <DatePicker renderInput={(props) => <TextField {...props} />} />
diff --git a/docs/data/material/guides/right-to-left/right-to-left.md b/docs/data/material/guides/right-to-left/right-to-left.md
index 1beb91ae137e68..020e7631286b35 100644
--- a/docs/data/material/guides/right-to-left/right-to-left.md
+++ b/docs/data/material/guides/right-to-left/right-to-left.md
@@ -1,6 +1,6 @@
 # Right-to-left
 
-<p class="description">Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of MUI components you must follow the following steps.</p>
+<p class="description">Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of Material UI components you must follow the following steps.</p>
 
 ## Steps
 
@@ -59,7 +59,7 @@ In case you are using `jss` (up to v4) or with the legacy `@mui/styles` package,
 npm install jss-rtl
 ```
 
-Having installed the plugin in your project, MUI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it.
+Having installed the plugin in your project, Material UI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it.
 
 ### 4. Load the rtl plugin
 
diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md
index 18e5451c52fcfc..14386149bf2d9c 100644
--- a/docs/data/material/guides/routing/routing.md
+++ b/docs/data/material/guides/routing/routing.md
@@ -20,7 +20,7 @@ For instance, with a `Button` component:
 
 In real-life applications, using a native `<a>` element is rarely enough.
 You can improve the user experience by using an enhanced Link component systematically.
-The theme of MUI allows configuring this component once.
+The Material UI theme lets you configure this component once.
 For instance, with react-router:
 
 ```tsx
@@ -32,7 +32,7 @@ const LinkBehavior = React.forwardRef<
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
 >((props, ref) => {
   const { href, ...other } = props;
-  // Map href (MUI) -> to (react-router)
+  // Map href (Material UI) -> to (react-router)
   return <RouterLink ref={ref} to={href} {...other} />;
 });
 
diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md
index 5ed55cbc999652..27eaa8cafde72f 100644
--- a/docs/data/material/guides/server-rendering/server-rendering.md
+++ b/docs/data/material/guides/server-rendering/server-rendering.md
@@ -5,9 +5,9 @@
 When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client.
 From that point on, the client takes over rendering duties.
 
-## MUI on the server
+## Material UI on the server
 
-MUI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated.
+Material UI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated.
 It's important to provide the page with the required CSS, otherwise the page will render with just the HTML then wait for the CSS to be injected by the client, causing it to flicker (FOUC).
 To inject the style down to the client, we need to:
 
@@ -88,7 +88,7 @@ inside a [`CacheProvider`](https://emotion.sh/docs/cache-provider) and [`ThemePr
 
 The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client-side. To do this, we use [ReactDOMServer.renderToString()](https://react.dev/reference/react-dom/server/renderToString).
 
-MUI is using Emotion as its default styled engine.
+Material UI uses Emotion as its default styled engine.
 We need to extract the styles from the Emotion instance.
 For this, we need to share the same cache configuration for both the client and server:
 
diff --git a/docs/data/material/guides/shadow-dom/shadow-dom.md b/docs/data/material/guides/shadow-dom/shadow-dom.md
index 49ad539adb78d3..3cdd1658cf88ac 100644
--- a/docs/data/material/guides/shadow-dom/shadow-dom.md
+++ b/docs/data/material/guides/shadow-dom/shadow-dom.md
@@ -34,7 +34,7 @@ ReactDOM.createRoot(shadowRootElement).render(
 
 ### 2. Theme
 
-MUI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy.
+Material UI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy.
 By default, this container is `document.body`.
 But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well:
 
diff --git a/docs/data/material/guides/styled-engine/styled-engine.md b/docs/data/material/guides/styled-engine/styled-engine.md
index c44955958339d9..3eb503dfb7f222 100644
--- a/docs/data/material/guides/styled-engine/styled-engine.md
+++ b/docs/data/material/guides/styled-engine/styled-engine.md
@@ -2,9 +2,9 @@
 
 <p class="description">Configuring your preferred styling library.</p>
 
-The default style library used for generating CSS styles for MUI components is [emotion](https://github.com/emotion-js/emotion).
-All of the MUI components rely on the `styled()` API to inject CSS into the page.
-This API is supported by multiple popular styling libraries, which makes it possible to switch between them in MUI.
+The default style library used for generating CSS styles for Material UI components is [Emotion](https://github.com/emotion-js/emotion).
+All of the Material UI components rely on the `styled()` API to inject CSS into the page.
+This API is supported by multiple popular styling libraries, which makes it possible to switch between them in Material UI.
 
 ## How to switch to styled-components
 
@@ -120,7 +120,7 @@ This package-swap approach is identical to the replacement of React with [Preact
 Having more than one styling libraries could introduce unnecessary complexity to your project. You should have a very good reason to do this.
 :::
 
-Material UI can coexist with other libraries that depend on emotion or styled-components. To do that, render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme.
+Material UI, starting from [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0), can coexist with other libraries that depend on emotion or styled-components. To do that, render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme.
 
 ```js
 import { ThemeProvider, THEME_ID, createTheme } from '@mui/material/styles';
@@ -141,6 +141,10 @@ function App() {
 
 The theme of Material UI will be separated from the other library, so when you use APIs such as `styled`, `sx` prop, and `useTheme`, you will be able to access Material UI's theme like you normally would.
 
+### Minimum version
+
+[Theme scoping](https://github.com/mui/material-ui/pull/36664) has been added to Material UI v5.12.0, so be sure you're running at that version or higher.
+
 ### Using with [Theme UI](https://theme-ui.com/)
 
 Render Material UI's theme provider below Theme UI's provider and assign the material theme to the `THEME_ID` property.
diff --git a/docs/data/material/guides/testing/testing.md b/docs/data/material/guides/testing/testing.md
index 9dfa791361a1c5..a1f96498dabfde 100644
--- a/docs/data/material/guides/testing/testing.md
+++ b/docs/data/material/guides/testing/testing.md
@@ -4,18 +4,18 @@
 
 ## Userspace
 
-It's generally recommended to test your application without tying the tests too closely to MUI.
-This is how MUI components are tested internally.
+It's generally recommended to test your application without tying the tests too closely to Material UI.
+This is how Material UI components are tested internally.
 A library that has a first-class API for this approach is [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro/).
 
-For example, when rendering a `TextField` your test should not need to query for the specific MUI instance of the `TextField` but rather for the `input`, or `[role="textbox"]`.
+For example, when rendering a `TextField` your test should not need to query for the specific Material UI instance of the `TextField` but rather for the `input`, or `[role="textbox"]`.
 
-By not relying on the React component tree you make your test more robust against internal changes in MUI or, if you need snapshot testing, adding additional wrapper components such as context providers.
+By not relying on the React component tree you make your test more robust against internal changes in Material UI or, if you need snapshot testing, adding additional wrapper components such as context providers.
 We don't recommend snapshot testing though.
 ["Effective snapshot testing" by Kent C. Dodds](https://kentcdodds.com/blog/effective-snapshot-testing) goes into more details why snapshot testing might be misleading for React component tests.
 
 ## Internal
 
-MUI has **a wide range** of tests so we can
+MUI has **a wide range** of tests for Material UI so we can
 iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://app.argos-ci.com/mui/material-ui/builds) have proven to be really helpful.
 To learn more about the internal tests, you can have a look at the [README](https://github.com/mui/material-ui/blob/HEAD/test/README.md).
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 c4b45d32d43537..5e68818d72500f 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
@@ -1,6 +1,6 @@
 # Understanding MUI packages
 
-<p class="description">An overview of the MUI packages and the relationships between them.</p>
+<p class="description">An overview of MUI's packages and the relationships between them.</p>
 
 ## Overview
 
diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md
index 1b095b604aa2b4..d35f398c6eb0c4 100644
--- a/docs/data/material/migration/migration-v4/v5-style-changes.md
+++ b/docs/data/material/migration/migration-v4/v5-style-changes.md
@@ -177,7 +177,7 @@ export default function GlobalCssPriority() {
   return (
     {/* Inject Emotion before JSS */}
     <StyledEngineProvider injectFirst>
-      {/* Your component tree. Now you can override MUI's styles. */}
+      {/* Your component tree. Now you can override Material UI's styles. */}
     </StyledEngineProvider>
   );
 }
diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md
index 8afd6fa80cd79c..65db91794e0b1d 100644
--- a/docs/data/styles/advanced/advanced.md
+++ b/docs/data/styles/advanced/advanced.md
@@ -2,7 +2,7 @@
 
 <p class="description">This section covers more advanced usage of @mui/styles.</p>
 
-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
+> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
 > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative.
 
@@ -12,7 +12,7 @@
 
 Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions.
 
-> This example creates a theme object for custom-built components. If you intend to use some of the MUI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/material-ui/customization/theming/) to learn how to build your custom MUI theme.
+> This example creates a theme object for custom-built components. If you intend to use some of Material UI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/material-ui/customization/theming/) to learn how to build your custom Material UI theme.
 
 ```jsx
 import { ThemeProvider } from '@mui/styles';
@@ -175,7 +175,7 @@ function Parent() {
 JSS uses plugins to extend its core, allowing you to cherry-pick the features you need,
 and only pay the performance overhead for what you are using.
 
-Not all the plugins are available in MUI by default. The following (which is a subset of
+Not all the plugins are available in Material UI by default. The following (which is a subset of
 [jss-preset-default](https://cssinjs.org/jss-preset-default/)) are included:
 
 - [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function/)
@@ -243,7 +243,7 @@ import { StylesProvider } from '@mui/styles';
 
 <StylesProvider injectFirst>
   {/* Your component tree.
-      Styled components can override MUI's styles. */}
+      Styled components can override Material UI's styles. */}
 </StylesProvider>;
 ```
 
@@ -453,7 +453,7 @@ const className = `${productionPrefix}${identifier}`;
 However, when the following conditions are met, the class names are **deterministic**:
 
 - Only one theme provider is used (**No theme nesting**)
-- The style sheet has a name that starts with `Mui` (all MUI components).
+- The style sheet has a name that starts with `Mui` (all Material UI components).
 - The `disableGlobal` option of the [class name generator](/system/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default).
 
 ## Global CSS
diff --git a/docs/data/styles/api/api.md b/docs/data/styles/api/api.md
index 9621458ddc121d..7f02a0efcd0069 100644
--- a/docs/data/styles/api/api.md
+++ b/docs/data/styles/api/api.md
@@ -6,7 +6,7 @@ title: Styles API
 
 <p class="description">The API reference of @mui/styles.</p>
 
-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
+> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
 > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative.
 
@@ -234,7 +234,7 @@ It should preferably be used at **the root of your component tree**.
 | children&nbsp;\*  | node   |         | Your component tree.                                                                                                                                                                                                                                                                                                             |
 | disableGeneration | bool   | false   | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this prop. |
 | generateClassName | func   |         | JSS's class name generator.                                                                                                                                                                                                                                                                                                      |
-| injectFirst       | bool   | false   | By default, the styles are injected last in the `<head>` element of the page. As a result, they gain more specificity than any other style sheet. If you want to override MUI's styles, set this prop.                                                                                                                           |
+| injectFirst       | bool   | false   | By default, the styles are injected last in the `<head>` element of the page. As a result, they gain more specificity than any other style sheet. If you want to override Material UI's styles, set this prop.                                                                                                                   |
 | jss               | object |         | JSS's instance.                                                                                                                                                                                                                                                                                                                  |
 
 ### Examples
diff --git a/docs/data/styles/basics/AdaptingHOC.tsx b/docs/data/styles/basics/AdaptingHOC.tsx
index ac19f1c174af6b..9c8a039cdb28c5 100644
--- a/docs/data/styles/basics/AdaptingHOC.tsx
+++ b/docs/data/styles/basics/AdaptingHOC.tsx
@@ -24,8 +24,8 @@ const styles = {
 interface MyButtonRawProps {
   color: 'red' | 'blue';
 }
-// These are the props available inside MyButtonRaw
-// They're different from MyButtonRawProps which are the props available for dynamic styling.
+// @babel-ignore-comment-in-output These are the props available inside MyButtonRaw
+// @babel-ignore-comment-in-output They're different from MyButtonRawProps which are the props available for dynamic styling.
 type MyButtonRawInnerProps = MyButtonRawProps & WithStyles<typeof styles>;
 
 function MyButtonRaw(
diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md
index a1abc4e394664d..081bd359a2ae26 100644
--- a/docs/data/styles/basics/basics.md
+++ b/docs/data/styles/basics/basics.md
@@ -1,24 +1,24 @@
 # @mui/styles (LEGACY)
 
-<p class="description">The legacy styling solution of MUI.</p>
+<p class="description">The legacy styling solution for Material UI.</p>
 
-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
+> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
 > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18.
 
-MUI aims to provide a strong foundation for building dynamic UIs.
-For the sake of simplicity, **we expose the styling solution used in MUI components** as the `@mui/styles` package.
-You can use it, but you don't have to, since MUI is also [interoperable with](/material-ui/guides/interoperability/) all the other major styling solutions.
+Material UI aims to provide a strong foundation for building dynamic UIs.
+For the sake of simplicity, **we expose the styling solution used in Material UI components** as the `@mui/styles` package.
+You can use it, but you don't have to, since Material UI is also [interoperable with](/material-ui/guides/interoperability/) all the other major styling solutions.
 
-## Why use MUI's styling solution?
+## Why use Material UI's styling solution?
 
-In previous versions, MUI has used [Less](https://lesscss.org/), and then a custom inline-style solution to write the component styles, but these approaches proved to be limited.
+In previous versions, Material UI has used [Less](https://lesscss.org/), and then a custom inline-style solution to write the component styles, but these approaches proved to be limited.
 [A _CSS-in-JS_ solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations,
 and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
 
-MUI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/).
+Material UI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/).
 
 - 💅 You can expect [the same advantages](https://styled-components.com/docs/basics#motivation) as styled-components.
 
@@ -27,7 +27,7 @@ MUI's styling solution is inspired by many other styling libraries such as [styl
 - 🚀 It's [blazing fast](https://github.com/mui/material-ui/tree/master/benchmark/server#material-uistyles).
 - 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
 - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
-- 📦 Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside MUI.
+- 📦 Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside Material UI.
 
 ## Installation
 
@@ -218,7 +218,7 @@ const useStyles = makeStyles((theme) => ({
 
 ## Using the theme context
 
-Starting from v5, MUI no longer uses JSS as its default styling solution. If you still want to use the utilities exported by `@mui/styles` and they depend on the `theme`, you will need to provide the `theme` as part of the context. For this, you can use the `ThemeProvider` component available in `@mui/styles`, or, if you are already using `@mui/material`, you should use the one exported from `@mui/material/styles` so that the same `theme` is available for components from '@mui/material'.
+Starting from v5, Material UI no longer uses JSS as its default styling solution. If you still want to use the utilities exported by `@mui/styles` and they depend on the `theme`, you will need to provide the `theme` as part of the context. For this, you can use the `ThemeProvider` component available in `@mui/styles`, or, if you are already using `@mui/material`, you should use the one exported from `@mui/material/styles` so that the same `theme` is available for components from '@mui/material'.
 
 ```jsx
 import { makeStyles } from '@mui/styles';
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index d8b6cdcda96115..a8b903804e94f7 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -38,7 +38,7 @@ For instance, you can change the margin this way.
 However, sometimes you have to target the underlying DOM element.
 As an example, you may want to change the border of the Button.
 The Button component defines its own styles. CSS inheritance doesn't help.
-To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component.
+To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is an MUI component.
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>
diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts
index 433d0a57647d1c..b36f6d6ef74fb9 100644
--- a/docs/data/system/pages.ts
+++ b/docs/data/system/pages.ts
@@ -44,7 +44,7 @@ const pages = [
     ],
   },
   {
-    title: 'Component API',
+    title: 'APIs',
     pathname: '/system/api',
     icon: standardNavIcons.CodeIcon,
     children: pagesApi,
@@ -68,7 +68,7 @@ const pages = [
     children: [
       { pathname: '/system/styles/basics' },
       { pathname: '/system/styles/advanced' },
-      { pathname: '/system/styles/api', title: 'API' },
+      { pathname: '/system/styles/api', title: 'APIs' },
     ],
   },
 ];
diff --git a/docs/notifications.json b/docs/notifications.json
index 7de9d945d7b665..54f9f2a6009784 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -4,14 +4,14 @@
     "title": "<b>Check out Base UI today</b> 💥",
     "text": "Love Material UI, but don't need Material Design? Try Base UI, the new \"unstyled\" alternative. <a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"introducing-mui-base\" href=\"/blog/introducing-mui-base/\">Read more in this announcement</a>."
   },
-  {
-    "id": 73,
-    "title": "<b>Date and Time Pickers revamped</b>",
-    "text": "<a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"v6-beta-pickers\" href=\"/blog/v6-beta-pickers/\">Discover</a> the exciting new features landing now with v6 beta."
-  },
   {
     "id": 74,
     "title": "<b>Introducing MUI X v6.0.0</b>",
     "text": "<a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v6\" href=\"/blog/mui-x-v6/\">Explore</a> what's new and what's next in the new stable version of the advanced components."
+  },
+  {
+    "id": 75,
+    "title": "<b>Try the new time picker UI now</b>",
+    "text": "The new time-picking experience is designed for desktops, and it's available on the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v6\" href=\"https://mui.com/x/react-date-pickers/time-picker/\">Time Picker</a> as well as a <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v6\" href=\"https://mui.com/x/react-date-pickers/digital-clock/\">standalone component</a>."
   }
 ]
diff --git a/docs/package.json b/docs/package.json
index 7c7ecfa7b018fa..f1c5b7f318db55 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,33 +20,33 @@
     "link-check": "node ./scripts/reportBrokenLinks.js"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/plugin-transform-object-assign": "^7.18.6",
     "@babel/runtime-corejs2": "^7.21.0",
-    "@docsearch/react": "^3.3.3",
-    "@emotion/cache": "^11.10.7",
-    "@emotion/react": "^11.10.6",
+    "@docsearch/react": "^3.3.4",
+    "@emotion/cache": "^11.10.8",
+    "@emotion/react": "^11.10.8",
     "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/styled": "^11.10.8",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/base": "5.0.0-alpha.127",
-    "@mui/docs": "^5.12.0",
+    "@mui/base": "5.0.0-alpha.128",
+    "@mui/docs": "^5.12.3",
     "@mui/icons-material": "^5.11.16",
-    "@mui/joy": "5.0.0-alpha.77",
-    "@mui/lab": "5.0.0-alpha.128",
+    "@mui/joy": "5.0.0-alpha.78",
+    "@mui/lab": "5.0.0-alpha.129",
     "@mui/markdown": "^5.0.0",
-    "@mui/material": "^5.12.2",
-    "@mui/material-next": "6.0.0-alpha.83",
-    "@mui/styled-engine": "^5.12.0",
+    "@mui/material": "^5.12.3",
+    "@mui/material-next": "6.0.0-alpha.84",
+    "@mui/styled-engine": "^5.12.3",
     "@mui/styled-engine-sc": "^5.12.0",
-    "@mui/styles": "^5.12.0",
-    "@mui/system": "^5.12.1",
+    "@mui/styles": "^5.12.3",
+    "@mui/system": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/x-data-grid": "6.2.0",
-    "@mui/x-data-grid-generator": "6.2.0",
-    "@mui/x-data-grid-pro": "6.2.0",
+    "@mui/x-data-grid": "6.3.0",
+    "@mui/x-data-grid-generator": "6.3.0",
+    "@mui/x-data-grid-pro": "6.3.0",
     "@mui/x-date-pickers": "6.2.0",
     "@mui/x-date-pickers-pro": "6.2.0",
     "@mui/x-license-pro": "6.0.4",
@@ -113,7 +113,7 @@
     "recharts": "2.4.3",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.10",
-    "stylis": "^4.1.3",
+    "stylis": "^4.1.4",
     "stylis-plugin-rtl": "^2.1.1",
     "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0",
     "webfontloader": "^1.6.28",
@@ -121,7 +121,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.21.3",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/preset-typescript": "^7.21.4",
     "@types/marked": "^4.0.8",
     "@types/recharts": "^2.0.0",
     "cross-fetch": "^3.1.5",
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index a8f51cd6cc20e3..b91c548bfea2c2 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -444,6 +444,15 @@ const teamMembers: Array<Profile> = [
     locationCountry: 'gb',
     about: '🧗‍♂️ Amateur indoor climber & ex-philosophy geek',
   },
+  {
+    src: '/static/branding/about/romain.png',
+    name: 'Romain Grégoire',
+    title: 'MUI X Engineer',
+    location: 'Montréal, Canada',
+    locationCountry: 'ca',
+    about: 'Open-source tinkerer',
+    github: 'romgrk',
+  },
 ];
 
 const contributors = [
diff --git a/docs/pages/base/api/badge.json b/docs/pages/base/api/badge.json
index c9e0c49d9f8232..92b68784d9ec9a 100644
--- a/docs/pages/base/api/badge.json
+++ b/docs/pages/base/api/badge.json
@@ -2,7 +2,6 @@
   "props": {
     "badgeContent": { "type": { "name": "node" } },
     "children": { "type": { "name": "node" } },
-    "component": { "type": { "name": "elementType" } },
     "invisible": { "type": { "name": "bool" }, "default": "false" },
     "max": { "type": { "name": "number" }, "default": "99" },
     "showZero": { "type": { "name": "bool" }, "default": "false" },
diff --git a/docs/pages/base/api/form-control.json b/docs/pages/base/api/form-control.json
index 90270aad3d0c48..2e4d3df59273b4 100644
--- a/docs/pages/base/api/form-control.json
+++ b/docs/pages/base/api/form-control.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "children": { "type": { "name": "union", "description": "node<br>&#124;&nbsp;func" } },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "error": { "type": { "name": "bool" }, "default": "false" },
     "onChange": { "type": { "name": "func" } },
diff --git a/docs/pages/base/api/input.json b/docs/pages/base/api/input.json
index f35a4b3eaf4a6a..980af136f07548 100644
--- a/docs/pages/base/api/input.json
+++ b/docs/pages/base/api/input.json
@@ -3,7 +3,6 @@
     "autoComplete": { "type": { "name": "string" } },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
-    "component": { "type": { "name": "elementType" } },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "endAdornment": { "type": { "name": "node" } },
diff --git a/docs/pages/base/api/menu-item.json b/docs/pages/base/api/menu-item.json
index ab7b068a921cb3..7a56472ba90e64 100644
--- a/docs/pages/base/api/menu-item.json
+++ b/docs/pages/base/api/menu-item.json
@@ -1,6 +1,5 @@
 {
   "props": {
-    "component": { "type": { "name": "elementType" } },
     "label": { "type": { "name": "string" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
diff --git a/docs/pages/base/api/menu.json b/docs/pages/base/api/menu.json
index e6a9427cc5aeae..ce527b89a2f5a8 100644
--- a/docs/pages/base/api/menu.json
+++ b/docs/pages/base/api/menu.json
@@ -7,7 +7,6 @@
         "description": "HTML element<br>&#124;&nbsp;object<br>&#124;&nbsp;func"
       }
     },
-    "component": { "type": { "name": "elementType" } },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {
diff --git a/docs/pages/base/api/modal.json b/docs/pages/base/api/modal.json
index 11a7469bb0d474..2993d0ee3210bf 100644
--- a/docs/pages/base/api/modal.json
+++ b/docs/pages/base/api/modal.json
@@ -3,7 +3,6 @@
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "open": { "type": { "name": "bool" }, "required": true },
     "closeAfterTransition": { "type": { "name": "bool" }, "default": "false" },
-    "component": { "type": { "name": "elementType" } },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },
diff --git a/docs/pages/base/api/option-group.json b/docs/pages/base/api/option-group.json
index 693a23180d66c3..f3d65de7f53eb5 100644
--- a/docs/pages/base/api/option-group.json
+++ b/docs/pages/base/api/option-group.json
@@ -1,6 +1,5 @@
 {
   "props": {
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "label": { "type": { "name": "node" } },
     "slotProps": {
diff --git a/docs/pages/base/api/option.json b/docs/pages/base/api/option.json
index b88094c4f9055f..3c5bfc442c44e2 100644
--- a/docs/pages/base/api/option.json
+++ b/docs/pages/base/api/option.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "value": { "type": { "name": "any" }, "required": true },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "label": { "type": { "name": "string" } },
     "slotProps": {
diff --git a/docs/pages/base/api/select.json b/docs/pages/base/api/select.json
index 156687b5646139..93ce757158b52b 100644
--- a/docs/pages/base/api/select.json
+++ b/docs/pages/base/api/select.json
@@ -1,10 +1,10 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" }, "default": "false" },
-    "component": { "type": { "name": "elementType" } },
     "defaultListboxOpen": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "getOptionAsString": { "type": { "name": "func" }, "default": "defaultOptionStringifier" },
     "getSerializedValue": { "type": { "name": "func" } },
     "listboxId": { "type": { "name": "string" } },
     "listboxOpen": { "type": { "name": "bool" }, "default": "undefined" },
@@ -12,7 +12,6 @@
     "name": { "type": { "name": "string" } },
     "onChange": { "type": { "name": "func" } },
     "onListboxOpenChange": { "type": { "name": "func" } },
-    "optionStringifier": { "type": { "name": "func" }, "default": "defaultOptionStringifier" },
     "renderValue": { "type": { "name": "func" } },
     "slotProps": {
       "type": {
diff --git a/docs/pages/base/api/slider.json b/docs/pages/base/api/slider.json
index aaa60301da2625..780c2b61cbeac1 100644
--- a/docs/pages/base/api/slider.json
+++ b/docs/pages/base/api/slider.json
@@ -3,7 +3,6 @@
     "aria-label": { "type": { "name": "custom", "description": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
     "aria-valuetext": { "type": { "name": "custom", "description": "string" } },
-    "component": { "type": { "name": "elementType" } },
     "defaultValue": {
       "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
     },
diff --git a/docs/pages/base/api/snackbar.json b/docs/pages/base/api/snackbar.json
index 411231ca31eb61..a0b22480955a9c 100644
--- a/docs/pages/base/api/snackbar.json
+++ b/docs/pages/base/api/snackbar.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "autoHideDuration": { "type": { "name": "number" }, "default": "null" },
-    "component": { "type": { "name": "elementType" } },
     "disableWindowBlurListener": { "type": { "name": "bool" }, "default": "false" },
     "exited": { "type": { "name": "bool" }, "default": "true" },
     "onClose": { "type": { "name": "func" } },
diff --git a/docs/pages/base/api/switch.json b/docs/pages/base/api/switch.json
index 8adc8d2f94b05c..8c47ea4c85e2a2 100644
--- a/docs/pages/base/api/switch.json
+++ b/docs/pages/base/api/switch.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "checked": { "type": { "name": "bool" } },
-    "component": { "type": { "name": "elementType" } },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
     "onChange": { "type": { "name": "func" } },
diff --git a/docs/pages/base/api/tab-panel.json b/docs/pages/base/api/tab-panel.json
index 7f6090d06aea7f..004d16c071c94d 100644
--- a/docs/pages/base/api/tab-panel.json
+++ b/docs/pages/base/api/tab-panel.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "component": { "type": { "name": "elementType" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
       "default": "{}"
diff --git a/docs/pages/base/api/tab.json b/docs/pages/base/api/tab.json
index 0d2fe9214a1b32..8bff7bbd848cc0 100644
--- a/docs/pages/base/api/tab.json
+++ b/docs/pages/base/api/tab.json
@@ -6,7 +6,6 @@
         "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
       }
     },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "onChange": { "type": { "name": "func" } },
     "slotProps": {
diff --git a/docs/pages/base/api/table-pagination.json b/docs/pages/base/api/table-pagination.json
index 7fde401a6533c1..1ef6b789fb9033 100644
--- a/docs/pages/base/api/table-pagination.json
+++ b/docs/pages/base/api/table-pagination.json
@@ -4,7 +4,6 @@
     "onPageChange": { "type": { "name": "func" }, "required": true },
     "page": { "type": { "name": "custom", "description": "integer" }, "required": true },
     "rowsPerPage": { "type": { "name": "custom", "description": "integer" }, "required": true },
-    "component": { "type": { "name": "elementType" } },
     "getItemAriaLabel": {
       "type": { "name": "func" },
       "default": "function defaultGetAriaLabel(type: ItemAriaLabelType) {\n  return `Go to ${type} page`;\n}"
diff --git a/docs/pages/base/api/tabs-list.json b/docs/pages/base/api/tabs-list.json
index e888c35fb22d1b..44664ef547e1de 100644
--- a/docs/pages/base/api/tabs-list.json
+++ b/docs/pages/base/api/tabs-list.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "component": { "type": { "name": "elementType" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
       "default": "{}"
diff --git a/docs/pages/base/api/tabs.json b/docs/pages/base/api/tabs.json
index 7999fc0783bbd7..d615a62fc12d7a 100644
--- a/docs/pages/base/api/tabs.json
+++ b/docs/pages/base/api/tabs.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "component": { "type": { "name": "elementType" } },
     "defaultValue": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "direction": {
       "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
diff --git a/docs/pages/base/api/use-form-control-context.json b/docs/pages/base/api/use-form-control-context.json
index acbb34e0ef36bc..e34be0c419fbd8 100644
--- a/docs/pages/base/api/use-form-control-context.json
+++ b/docs/pages/base/api/use-form-control-context.json
@@ -1,26 +1,27 @@
 {
   "parameters": {},
   "returnValue": {
+    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "error": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "filled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "focused": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "onBlur": {
       "type": { "name": "() =&gt; void", "description": "() =&gt; void" },
       "required": true
     },
-    "onFocus": {
-      "type": { "name": "() =&gt; void", "description": "() =&gt; void" },
-      "required": true
-    },
-    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
-    "error": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "onChange": {
       "type": {
         "name": "React.ChangeEventHandler&lt;NativeFormControlElement&gt;",
         "description": "React.ChangeEventHandler&lt;NativeFormControlElement&gt;"
-      }
+      },
+      "required": true
+    },
+    "onFocus": {
+      "type": { "name": "() =&gt; void", "description": "() =&gt; void" },
+      "required": true
     },
-    "required": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
-    "value": { "type": { "name": "unknown", "description": "unknown" } }
+    "required": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "value": { "type": { "name": "unknown", "description": "unknown" }, "required": true }
   },
   "name": "useFormControlContext",
   "filename": "/packages/mui-base/src/FormControl/useFormControlContext.ts",
diff --git a/docs/pages/base/api/use-select.json b/docs/pages/base/api/use-select.json
index c3cfcd10f69cb2..de937ae0b9e90f 100644
--- a/docs/pages/base/api/use-select.json
+++ b/docs/pages/base/api/use-select.json
@@ -11,6 +11,13 @@
       }
     },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
+    "getOptionAsString": {
+      "type": {
+        "name": "(option: SelectOption&lt;OptionValue&gt;) =&gt; string",
+        "description": "(option: SelectOption&lt;OptionValue&gt;) =&gt; string"
+      },
+      "default": "defaultOptionStringifier"
+    },
     "listboxId": { "type": { "name": "string", "description": "string" } },
     "listboxRef": {
       "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
@@ -18,14 +25,14 @@
     "multiple": { "type": { "name": "Multiple", "description": "Multiple" }, "default": "false" },
     "onChange": {
       "type": {
-        "name": "(e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue&lt;OptionValue, Multiple&gt;) =&gt; void",
-        "description": "(e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue&lt;OptionValue, Multiple&gt;) =&gt; void"
+        "name": "(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue&lt;OptionValue, Multiple&gt;) =&gt; void",
+        "description": "(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue&lt;OptionValue, Multiple&gt;) =&gt; void"
       }
     },
     "onHighlightChange": {
       "type": {
-        "name": "(e: React.MouseEvent&lt;Element, MouseEvent&gt; | React.KeyboardEvent&lt;Element&gt; | React.FocusEvent&lt;Element, Element&gt; | null, highlighted: OptionValue | null) =&gt; void",
-        "description": "(e: React.MouseEvent&lt;Element, MouseEvent&gt; | React.KeyboardEvent&lt;Element&gt; | React.FocusEvent&lt;Element, Element&gt; | null, highlighted: OptionValue | null) =&gt; void"
+        "name": "(event: React.MouseEvent&lt;Element, MouseEvent&gt; | React.KeyboardEvent&lt;Element&gt; | React.FocusEvent&lt;Element, Element&gt; | null, highlighted: OptionValue | null) =&gt; void",
+        "description": "(event: React.MouseEvent&lt;Element, MouseEvent&gt; | React.KeyboardEvent&lt;Element&gt; | React.FocusEvent&lt;Element, Element&gt; | null, highlighted: OptionValue | null) =&gt; void"
       }
     },
     "onOpenChange": {
@@ -38,13 +45,6 @@
         "description": "SelectOptionDefinition&lt;OptionValue&gt;[]"
       }
     },
-    "optionStringifier": {
-      "type": {
-        "name": "(option: SelectOption&lt;OptionValue&gt;) =&gt; string",
-        "description": "(option: SelectOption&lt;OptionValue&gt;) =&gt; string"
-      },
-      "default": "defaultOptionStringifier"
-    },
     "value": {
       "type": {
         "name": "SelectValue&lt;OptionValue, Multiple&gt;",
diff --git a/docs/pages/base/getting-started/installation.js b/docs/pages/base/getting-started/quickstart.js
similarity index 63%
rename from docs/pages/base/getting-started/installation.js
rename to docs/pages/base/getting-started/quickstart.js
index 9447440bf3d9f0..db0300dcd11b6e 100644
--- a/docs/pages/base/getting-started/installation.js
+++ b/docs/pages/base/getting-started/quickstart.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/getting-started/installation/installation.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} />;
diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md
index bf2eeafb974136..e12b38477e5234 100644
--- a/docs/pages/blog/2019.md
+++ b/docs/pages/blog/2019.md
@@ -101,5 +101,5 @@ Enterprise features will build on the open source version of the components.
 
 We are looking for a full-time Software Developer to join us!
 
-If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project).
+If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-company).
 Spreading the word to other developers that are looking for a great UI framework is also extremely helpful 🙌.
diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md
index 76327b33a8a564..0503a53fa87aae 100644
--- a/docs/pages/blog/2020-q3-update.md
+++ b/docs/pages/blog/2020-q3-update.md
@@ -118,7 +118,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
   <p class="blog-description">Slider powered by styled-components</p>
 
 - ♿︎ We have kept investing in accessibility, we have fixed [13 bugs](https://github.com/mui/material-ui/pulls?q=is%3Apr+label%3Aaccessibility+is%3Aclosed+sort%3Aupdated-desc).
-- 🗓 We have introduced public quarterly roadmaps, both for [MUI Core](https://github.com/mui/material-ui/projects/25) and [MUI X](https://github.com/mui/mui-x/projects/1).
+- 🗓 We have introduced public quarterly roadmaps, both for [MUI Core](https://github.com/orgs/mui/projects/18/views/1) and [MUI X](https://github.com/mui/mui-x/projects/1).
 
 ## Company
 
@@ -151,7 +151,7 @@ We'll do our best, no guarantee!
 
 ### Community
 
-- 🗓 Execute on all the items of the [public roadmap](https://github.com/mui/material-ui/projects/25).
+- 🗓 Execute on all the items of the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
 - 👩‍🎨 Simplify the migration experience from v4 to v5.
 - ❓ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues) if you want us to focus on a specific problem. The number of 👍 helps us to prioritize.
 
diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md
index 5d4ccf344fc530..c51f522f053364 100644
--- a/docs/pages/blog/2021-q1-update.md
+++ b/docs/pages/blog/2021-q1-update.md
@@ -205,7 +205,7 @@ We have the following objectives:
 
 - 🚀 Get v5-beta (no more breaking changes) out! The development of this new version started almost a year ago. It's time to aim for the stable release.
 - 📅 Start handling the issues with the date picker reported by developers.
-- 🗓 Execute on all the items of the [public roadmap](https://github.com/mui/material-ui/projects/25).
+- 🗓 Execute on all the items of the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
 - ❓ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) if you want us to focus on a specific problem. The number of 👍 helps us to prioritize.
 
 ### Advanced components
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index 29cb68202c1157..0e468a63b5cbcf 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -220,7 +220,7 @@ We have the following objectives:
   You can follow our progress in the [umbrella issue](https://github.com/mui/material-ui/issues/27170).
 - 🌈 Do a proof of concept on supporting a second design system.
   Some of our users (and potential users) dislike Material Design. We will try to make the second design system one that they love!
-- 🗓 Execute on all of the items in the [public roadmap](https://github.com/mui/material-ui/projects/25).
+- 🗓 Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
 - ❓ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) if you want us to focus on a specific problem. The number of 👍 helps us to prioritize.
 
 ### Advanced components
diff --git a/docs/pages/blog/2021-q3-update.md b/docs/pages/blog/2021-q3-update.md
index 5c310c102e8cd5..994b5b0ac32a6b 100644
--- a/docs/pages/blog/2021-q3-update.md
+++ b/docs/pages/blog/2021-q3-update.md
@@ -200,7 +200,7 @@ We'll do our best, no guarantee!
   Since v5, MUI is no longer actively supporting IE 11. Dropping this browser requirement unlocks new capabilities of the web platform.
 - 🌈 Resume work on the second design system.
   Some users (and potential users) dislike Material Design. We'll try to make the second design system one that they love! You can check our [first RFC](https://github.com/mui/material-ui/discussions/29024).
-- 🗓 Execute on all of the items in the [public roadmap](https://github.com/mui/material-ui/projects/25).
+- 🗓 Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/18/views/1).
 - ❓ Please upvote [GitHub issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) if you want us to focus on a specific problem. The number of 👍 helps us to prioritize.
 
 ### MUI X
diff --git a/docs/pages/blog/benny-joo-joining.md b/docs/pages/blog/benny-joo-joining.md
index 2391da49933f83..98695585680458 100644
--- a/docs/pages/blog/benny-joo-joining.md
+++ b/docs/pages/blog/benny-joo-joining.md
@@ -16,6 +16,6 @@ He had a great start with his internship, implementing the [Masonry component](h
 As part of the Core team, he will help with the community support, as well as work on some of the new features we plan for the community version of the library, like the unstyled components and the second design system.
 I am excited to see what other valuable contributions he will make in the future.
 
-The Core team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/mui/material-ui/projects/25).
+The Core team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/orgs/mui/projects/18/views/1).
 
 We couldn't be more excited to have Benny on the team!
diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md
index 6e858e74d21f73..596924c97fa3bc 100644
--- a/docs/pages/blog/marija-najdova-joining.md
+++ b/docs/pages/blog/marija-najdova-joining.md
@@ -15,6 +15,6 @@ Marija is off to a running start, having made important changes happen during he
 
 She is now actively working on the unstyled components and [the update of the style engine](https://github.com/mui/material-ui/issues/22342). These are two items we've been eager to push forward since the release of v1 but that required someone to be dedicated to tackling them.
 
-The community team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/mui/material-ui/projects/25).
+The community team will continue developing the foundations on which to build great design systems. Here's a quick view of [the community roadmap](https://github.com/orgs/mui/projects/18/views/1).
 
 We couldn't be more excited to have Marija on the team! You can follow her on [Twitter](https://twitter.com/marijanajdova).
diff --git a/docs/pages/careers/senior-designer.js b/docs/pages/careers/senior-designer.js
deleted file mode 100644
index bcc36340350858..00000000000000
--- a/docs/pages/careers/senior-designer.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/senior-designer.md?@mui/markdown';
-
-export default function Page() {
-  return <TopLayoutCareers {...pageProps} />;
-}
diff --git a/docs/pages/material-ui/api/input.json b/docs/pages/material-ui/api/input.json
index 023edaf5d786b1..319f57dcdcb0fe 100644
--- a/docs/pages/material-ui/api/input.json
+++ b/docs/pages/material-ui/api/input.json
@@ -71,6 +71,8 @@
       "input",
       "inputSizeSmall",
       "inputMultiline",
+      "inputAdornedStart",
+      "inputAdornedEnd",
       "inputTypeSearch"
     ],
     "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" },
diff --git a/docs/pages/material-ui/api/popper.json b/docs/pages/material-ui/api/popper.json
index 37022ca054859a..36b3a8fa00dab3 100644
--- a/docs/pages/material-ui/api/popper.json
+++ b/docs/pages/material-ui/api/popper.json
@@ -8,6 +8,7 @@
       }
     },
     "children": { "type": { "name": "union", "description": "node<br>&#124;&nbsp;func" } },
+    "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },
       "default": "{}"
diff --git a/docs/public/static/branding/about/romain.png b/docs/public/static/branding/about/romain.png
new file mode 100644
index 00000000000000..a1e7728e9272d2
Binary files /dev/null and b/docs/public/static/branding/about/romain.png differ
diff --git a/docs/public/static/images/showcase/dropdesk.jpg b/docs/public/static/images/showcase/dropdesk.jpg
deleted file mode 100644
index a93a1191629d16..00000000000000
Binary files a/docs/public/static/images/showcase/dropdesk.jpg and /dev/null differ
diff --git a/docs/public/static/images/showcase/openclassrooms.jpg b/docs/public/static/images/showcase/openclassrooms.jpg
deleted file mode 100644
index 48eb8036bd2b3f..00000000000000
Binary files a/docs/public/static/images/showcase/openclassrooms.jpg and /dev/null differ
diff --git a/docs/public/static/images/showcase/openclassrooms.png b/docs/public/static/images/showcase/openclassrooms.png
new file mode 100644
index 00000000000000..1d223f8cabacb3
Binary files /dev/null and b/docs/public/static/images/showcase/openclassrooms.png differ
diff --git a/docs/public/static/images/showcase/quintoandar.jpg b/docs/public/static/images/showcase/quintoandar.jpg
new file mode 100644
index 00000000000000..0b65fd70af6ab9
Binary files /dev/null and b/docs/public/static/images/showcase/quintoandar.jpg differ
diff --git a/docs/public/static/images/showcase/quintoandar.png b/docs/public/static/images/showcase/quintoandar.png
deleted file mode 100644
index 7d3cde221f088c..00000000000000
Binary files a/docs/public/static/images/showcase/quintoandar.png and /dev/null differ
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index cdce47d9fa36b1..eb1d5ef79267a6 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -9,7 +9,11 @@
  * List of demos or folders to ignore when transpiling
  * Example: "app-bar/BottomAppBar.tsx"
  */
-const ignoreList = ['/pages.ts', 'docs/data/joy/getting-started/templates'];
+const ignoreList = [
+  '/pages.ts',
+  'docs/data/joy/getting-started/templates',
+  'docs/data/base/components/select/UnstyledSelectIntroduction.tsx',
+];
 
 const fse = require('fs-extra');
 const path = require('path');
@@ -27,6 +31,7 @@ const babelConfig = {
   generatorOpts: { retainLines: true },
   babelrc: false,
   configFile: false,
+  shouldPrintComment: (comment) => !comment.startsWith(' @babel-ignore-comment-in-output'),
 };
 
 const workspaceRoot = path.join(__dirname, '../../');
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index c136fa434eb8bc..fccd9fb634faa0 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -369,7 +369,9 @@ export default function HeaderNavBar() {
                         href={ROUTES.productToolpad}
                         icon={<IconImage name="product-toolpad" />}
                         name="MUI Toolpad"
-                        chip={<Chip label="Alpha" size="small" color="grey" />}
+                        chip={
+                          <Chip label="Alpha" size="small" color="primary" variant="outlined" />
+                        }
                         description="Low-code admin builder."
                         onKeyDown={handleKeyDown}
                       />
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index c2fd0eaeb03e51..637165e365fac9 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -224,7 +224,12 @@ export default function HeaderNavDropdown() {
                           >
                             {item.name}
                             {item.chip ? (
-                              <Chip size="small" label={item.chip} color="grey" />
+                              <Chip
+                                size="small"
+                                label={item.chip}
+                                color="primary"
+                                variant="outlined"
+                              />
                             ) : null}
                           </Box>
                           <Typography variant="body2" color="text.secondary">
@@ -270,7 +275,12 @@ export default function HeaderNavDropdown() {
                           >
                             {item.name}
                             {item.chip ? (
-                              <Chip size="small" label={item.chip} color="grey" />
+                              <Chip
+                                size="small"
+                                label={item.chip}
+                                color="primary"
+                                variant="outlined"
+                              />
                             ) : null}
                           </Box>
                           <Typography variant="body2" color="text.secondary">
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index a9ced17144be4f..2ae8d2a49d1400 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -170,7 +170,7 @@ export default function XDateRangeDemo() {
           </Typography>
           <Button
             variant="outlined"
-            href="/x/react-Date-pickers/Date-range-picker/"
+            href="/x/react-date-pickers/date-range-picker/"
             component="a"
             sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
           >
diff --git a/docs/src/createEmotionCache.ts b/docs/src/createEmotionCache.ts
index 4ec97e97eafed3..a0c402f8b187b6 100644
--- a/docs/src/createEmotionCache.ts
+++ b/docs/src/createEmotionCache.ts
@@ -8,8 +8,8 @@ function globalSelector(element: Element) {
   switch (element.type) {
     case RULESET:
       element.props = (element.props as string[]).map((value: any) => {
-        if (value.match(/(:where|:has)\(/)) {
-          value = value.replace(/\.[^:]+(:where|:has)/, '$1');
+        if (value.match(/(:where|:is)\(/)) {
+          value = value.replace(/\.[^:]+(:where|:is)/, '$1');
           return value;
         }
         return value;
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index fd4be22569cc03..d181b032765b3a 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -3,4 +3,5 @@ module.exports = {
   enable_website_banner: false,
   enable_toc_banner: true,
   enable_docsnav_banner: true,
+  enable_job_banner: false,
 };
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index a84576a5f47e16..2c4cdafe26ec2e 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -305,7 +305,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         fontWeight: 700,
       },
       allVariants: {
-        scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 72px)',
+        scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
       },
     },
     /**
diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js
index c876378bf37f0c..43d8cc40231b61 100644
--- a/docs/src/modules/components/AppContainer.js
+++ b/docs/src/modules/components/AppContainer.js
@@ -4,7 +4,7 @@ import Container from '@mui/material/Container';
 
 const StyledAppContainer = styled(Container)(({ theme }) => {
   return {
-    paddingTop: 'calc(var(--MuiDocs-header-height) + 36px)',
+    paddingTop: `calc(var(--MuiDocs-header-height) + ${theme.spacing(4)})`,
     // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
     // 105ch ≈ 930px
     fontFamily: 'Arial',
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 9069134d2fd9b4..07ae00877bfb6e 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -154,6 +154,8 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) =>
   };
 });
 
+export const HEIGHT = 64;
+
 export default function AppFrame(props) {
   const { children, disableDrawer = false, className, BannerComponent = AppFrameBanner } = props;
   const t = useTranslate();
@@ -175,7 +177,7 @@ export default function AppFrame(props) {
         <GlobalStyles
           styles={{
             ':root': {
-              '--MuiDocs-header-height': '64px',
+              '--MuiDocs-header-height': `${HEIGHT}px`,
             },
           }}
         />
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index d069da3046aa27..f6b14cc51a529c 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -50,15 +50,15 @@ const StyledAppContainer = styled(AppContainer, {
           marginBottom: 198,
         },
         '&& .description.ad': {
-          marginBottom: 40,
+          marginBottom: 0,
         },
       }),
       ...(hasTabs && {
         '&& .component-tabs .MuiTabs-root': {
-          marginBottom: 193,
+          marginBottom: 198,
         },
         '&& .component-tabs.ad .MuiTabs-root': {
-          marginBottom: 35,
+          marginBottom: 0,
         },
       }),
     }),
@@ -86,10 +86,10 @@ function AppLayoutDocs(props) {
     description,
     disableAd = false,
     disableToc = false,
+    hasTabs = false,
     location,
     title,
     toc,
-    hasTabs = false,
   } = props;
 
   if (description === undefined) {
diff --git a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js
index c75c597ab3efef..c9777a4ac97c49 100644
--- a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js
+++ b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js
@@ -49,15 +49,15 @@ const StyledAppContainer = styled(AppContainer, {
           marginBottom: 198,
         },
         '&& .description.ad': {
-          marginBottom: 40,
+          marginBottom: 0,
         },
       }),
       ...(hasTabs && {
         '&& .component-tabs .MuiTabs-root': {
-          marginBottom: 193,
+          marginBottom: 198,
         },
         '&& .component-tabs.ad .MuiTabs-root': {
-          marginBottom: 35,
+          marginBottom: 0,
         },
       }),
     }),
@@ -84,10 +84,10 @@ function AppLayoutDocs(props) {
     description,
     disableAd = false,
     disableToc = false,
+    hasTabs = false,
     location,
     title,
     toc,
-    hasTabs = false,
   } = props;
 
   if (description === undefined) {
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index cee602915b6495..21967320bbdf0b 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -9,6 +9,7 @@ import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import { shouldHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
 import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBanner';
+import featureToggle from 'docs/src/featureToggle';
 
 const Nav = styled('nav')(({ theme }) => ({
   top: 0,
@@ -16,7 +17,7 @@ const Nav = styled('nav')(({ theme }) => ({
   position: 'sticky',
   height: '100vh',
   overflowY: 'auto',
-  paddingTop: 'calc(var(--MuiDocs-header-height) + 1rem)',
+  paddingTop: `calc(var(--MuiDocs-header-height) + ${theme.spacing(4)})`,
   paddingBottom: theme.spacing(4),
   paddingRight: theme.spacing(4), // We can't use `padding` as stylis-plugin-rtl doesn't swap it
   display: 'none',
@@ -131,7 +132,7 @@ function flatten(headings) {
   return itemsWithNode;
 }
 
-const shouldShowJobAd = () => {
+function shouldShowJobAd() {
   const date = new Date();
   const timeZoneOffset = date.getTimezoneOffset();
   // Hide for time zones UT+5.5 - UTC+14 & UTC-8 - UTC-12
@@ -139,13 +140,14 @@ const shouldShowJobAd = () => {
     return false;
   }
   return true;
-};
+}
+
+const showSurveyBanner = false;
+const showJobAd = featureToggle.enable_job_banner && shouldShowJobAd();
 
 export default function AppTableOfContents(props) {
   const { toc } = props;
   const t = useTranslate();
-  const showSurveyBanner = false;
-  const showAddJob = shouldShowJobAd() && !showSurveyBanner;
 
   const items = React.useMemo(() => flatten(toc), [toc]);
   const [activeState, setActiveState] = React.useState(null);
@@ -280,7 +282,7 @@ export default function AppTableOfContents(props) {
             </Typography>
           </Link>
         )}
-        {showAddJob && (
+        {!showSurveyBanner && showJobAd && (
           <Link
             href="https://jobs.ashbyhq.com/MUI?utm_source=2vOWXNv1PE"
             target="_blank"
diff --git a/docs/src/modules/components/BackToTop.tsx b/docs/src/modules/components/BackToTop.tsx
index 41f07240bad8b1..4f4dc538e28e9e 100644
--- a/docs/src/modules/components/BackToTop.tsx
+++ b/docs/src/modules/components/BackToTop.tsx
@@ -26,7 +26,10 @@ export default function BackToTop() {
   });
 
   const handleClick = () => {
-    window.scrollTo({ top: 0 });
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth';
+
+    window.scrollTo({ top: 0, behavior });
     setOpen(false);
   };
 
diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
index 9953606c50ffc1..e1a864c84c6003 100644
--- a/docs/src/modules/components/ComponentPageTabs.js
+++ b/docs/src/modules/components/ComponentPageTabs.js
@@ -7,6 +7,8 @@ import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import Tab, { tabClasses } from '@mui/material/Tab';
 import Link from 'docs/src/modules/components/Link';
 
+export const HEIGHT = 50;
+
 export default function ComponentPageTabs(props) {
   const {
     activeTab,
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index 9060cc1818fd49..c6085b3e5d3630 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
-import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import GitHubIcon from '@mui/icons-material/GitHub';
 
 export default function EditPage(props) {
   const { markdownLocation } = props;
@@ -27,7 +27,7 @@ export default function EditPage(props) {
       target="_blank"
       rel="noopener nofollow"
       size="small"
-      startIcon={<EditRoundedIcon />}
+      startIcon={<GitHubIcon />}
       data-ga-event-category={userLanguage === 'en' ? undefined : 'l10n'}
       data-ga-event-action={userLanguage === 'en' ? undefined : 'edit-button'}
       data-ga-event-label={userLanguage === 'en' ? undefined : userLanguage}
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
index c95bd6896f3b24..2425c041c566b3 100644
--- a/docs/src/modules/components/MarkdownDocsV2.js
+++ b/docs/src/modules/components/MarkdownDocsV2.js
@@ -4,7 +4,6 @@ import { useRouter } from 'next/router';
 import kebabCase from 'lodash/kebabCase';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
-import Box from '@mui/material/Box';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent';
 import HooksApiContent from 'docs/src/modules/components/HooksApiContent';
@@ -15,6 +14,8 @@ import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocsWithoutAppFr
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import Ad from 'docs/src/modules/components/Ad';
+import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame';
+import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 
 function JoyModeObserver({ mode }) {
@@ -219,54 +220,55 @@ export default function MarkdownDocsV2(props) {
       toc={activeToc}
       hasTabs
     >
-      <Provider>
-        {isJoy && <JoyModeObserver key="joy-provider" mode={theme.palette.mode} />}
-        {disableAd ? null : (
-          <Wrapper key="add">
-            <AdGuest classSelector=".component-tabs">
-              <Ad />
-            </AdGuest>
-          </Wrapper>
-        )}
-        {commonElements}
-        {activeTab === '' && (
-          <Box>
-            {rendered.slice(i, rendered.length - 1).map((renderedMarkdownOrDemo, index) => (
-              <MarkdownElement
-                key={`demos-section-${index}`}
-                renderedMarkdownOrDemo={renderedMarkdownOrDemo}
-                WrapperComponent={Wrapper}
-                wrapperProps={wrapperProps}
-                srcComponents={srcComponents}
-                activeTab={activeTab}
-                setActiveTab={setActiveTab}
-                localizedDoc={localizedDoc}
-                demos={demos}
-                location={location}
-                theme={theme}
-                demoComponents={demoComponents}
-                disableAd={disableAd}
-              />
-            ))}
-          </Box>
-        )}
-        {activeTab === 'components-api' && (
-          <Box>
+      <div
+        style={{
+          '--MuiDocs-header-height': `${AppFrameHeight + TabsHeight}px`,
+        }}
+      >
+        <Provider>
+          {isJoy && <JoyModeObserver key="joy-provider" mode={theme.palette.mode} />}
+          {disableAd ? null : (
+            <Wrapper key="add">
+              <AdGuest classSelector=".component-tabs">
+                <Ad />
+              </AdGuest>
+            </Wrapper>
+          )}
+          {commonElements}
+          {activeTab === '' &&
+            rendered
+              .slice(i, rendered.length - 1)
+              .map((renderedMarkdownOrDemo, index) => (
+                <MarkdownElement
+                  key={`demos-section-${index}`}
+                  renderedMarkdownOrDemo={renderedMarkdownOrDemo}
+                  WrapperComponent={Wrapper}
+                  wrapperProps={wrapperProps}
+                  srcComponents={srcComponents}
+                  activeTab={activeTab}
+                  setActiveTab={setActiveTab}
+                  localizedDoc={localizedDoc}
+                  demos={demos}
+                  location={location}
+                  theme={theme}
+                  demoComponents={demoComponents}
+                  disableAd={disableAd}
+                />
+              ))}
+          {activeTab === 'components-api' && (
             <ComponentsApiContent
               descriptions={componentsApiDescriptions}
               pageContents={componentsApiPageContents}
             />
-          </Box>
-        )}
-        {activeTab === 'hooks-api' && (
-          <Box>
+          )}
+          {activeTab === 'hooks-api' && (
             <HooksApiContent
               descriptions={hooksApiDescriptions}
               pagesContents={hooksApiPageContents}
             />
-          </Box>
-        )}
-      </Provider>
+          )}
+        </Provider>
+      </div>
     </AppLayoutDocs>
   );
 }
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index b9aeaac64fbcf8..0aa77f7d6583b6 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -111,6 +111,8 @@ const Root = styled('div')(
     },
     '& h1, & h2, & h3, & h4': {
       position: 'relative',
+      // Reserve space for the end of the line action button
+      paddingRight: 26 * 2 + 10,
       '& code': {
         fontSize: 'inherit',
         lineHeight: 'inherit',
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index 204ec4ba6e44e0..a86c8195ef635e 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -198,7 +198,7 @@ export default function MuiProductSelector() {
             icon={<IconImage name="product-toolpad" />}
             name="MUI Toolpad"
             description="Low-code admin builder."
-            chip={<Chip size="small" label="Alpha" color="grey" />}
+            chip={<Chip size="small" label="Alpha" color="primary" variant="outlined" />}
           />
         </Link>
       </li>
diff --git a/docs/src/pages.ts b/docs/src/pages.ts
index c76ae6e932eaa0..11aaaf84787142 100644
--- a/docs/src/pages.ts
+++ b/docs/src/pages.ts
@@ -164,7 +164,7 @@ const pages: readonly MuiPage[] = [
     ],
   },
   {
-    title: 'Component API',
+    title: 'APIs',
     pathname: '/api-docs',
     icon: standardNavIcons.CodeIcon,
     children: [
@@ -288,7 +288,7 @@ const pages: readonly MuiPage[] = [
     children: [
       { pathname: '/styles/basics' },
       { pathname: '/styles/advanced' },
-      { pathname: '/styles/api', title: 'API' },
+      { pathname: '/styles/api', title: 'APIs' },
     ],
   },
   {
diff --git a/docs/translations/api-docs-base/badge/badge.json b/docs/translations/api-docs-base/badge/badge.json
index 677e829f386373..7b35413dae7ceb 100644
--- a/docs/translations/api-docs-base/badge/badge.json
+++ b/docs/translations/api-docs-base/badge/badge.json
@@ -3,7 +3,6 @@
   "propDescriptions": {
     "badgeContent": "The content rendered within the badge.",
     "children": "The badge will be added relative to this node.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "invisible": "If <code>true</code>, the badge is invisible.",
     "max": "Max count to show.",
     "showZero": "Controls whether the badge is hidden when <code>badgeContent</code> is zero.",
diff --git a/docs/translations/api-docs-base/form-control/form-control.json b/docs/translations/api-docs-base/form-control/form-control.json
index 1af947ce5c1f86..639969fc0126a0 100644
--- a/docs/translations/api-docs-base/form-control/form-control.json
+++ b/docs/translations/api-docs-base/form-control/form-control.json
@@ -2,7 +2,6 @@
   "componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n*   FormLabel\n*   FormHelperText\n*   Input\n*   InputLabel\n\nYou can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n  <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n  <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n  <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠️ Only one `Input` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
   "propDescriptions": {
     "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state.",
     "error": "If <code>true</code>, the label is displayed in an error state.",
     "onChange": "Callback fired when the form element&#39;s value is modified.",
diff --git a/docs/translations/api-docs-base/input/input.json b/docs/translations/api-docs-base/input/input.json
index 2853be93336b60..604e11cb95e78e 100644
--- a/docs/translations/api-docs-base/input/input.json
+++ b/docs/translations/api-docs-base/input/input.json
@@ -4,7 +4,6 @@
     "autoComplete": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>.",
     "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "endAdornment": "Trailing adornment for this input.",
diff --git a/docs/translations/api-docs-base/menu-item/menu-item.json b/docs/translations/api-docs-base/menu-item/menu-item.json
index 1d5601b2a7adfa..4582dbc3a635eb 100644
--- a/docs/translations/api-docs-base/menu-item/menu-item.json
+++ b/docs/translations/api-docs-base/menu-item/menu-item.json
@@ -1,7 +1,6 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "label": "A text representation of the menu item&#39;s content. Used for keyboard text navigation matching.",
     "slotProps": "The props used for each slot inside the MenuItem.",
     "slots": "The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
diff --git a/docs/translations/api-docs-base/menu/menu.json b/docs/translations/api-docs-base/menu/menu.json
index da3220db4b7701..3c132b59c33c47 100644
--- a/docs/translations/api-docs-base/menu/menu.json
+++ b/docs/translations/api-docs-base/menu/menu.json
@@ -3,7 +3,6 @@
   "propDescriptions": {
     "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
     "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "onOpenChange": "Triggered when focus leaves the menu and the menu should close.",
     "open": "Controls whether the menu is displayed.",
     "slotProps": "The props used for each slot inside the Menu.",
diff --git a/docs/translations/api-docs-base/modal/modal.json b/docs/translations/api-docs-base/modal/modal.json
index 83c5cf84ab30ec..0ce4a100e2ce69 100644
--- a/docs/translations/api-docs-base/modal/modal.json
+++ b/docs/translations/api-docs-base/modal/modal.json
@@ -3,7 +3,6 @@
   "propDescriptions": {
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
     "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "disableAutoFocus": "If <code>true</code>, 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 <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
     "disableEnforceFocus": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
diff --git a/docs/translations/api-docs-base/option-group/option-group.json b/docs/translations/api-docs-base/option-group/option-group.json
index a6f2a32d74ed40..2914c0a842eccd 100644
--- a/docs/translations/api-docs-base/option-group/option-group.json
+++ b/docs/translations/api-docs-base/option-group/option-group.json
@@ -1,7 +1,6 @@
 {
   "componentDescription": "An unstyled option group to be used within a Select.",
   "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code> all the options in the group will be disabled.",
     "label": "The human-readable description of the group.",
     "slotProps": "The props used for each slot inside the Input.",
diff --git a/docs/translations/api-docs-base/option/option.json b/docs/translations/api-docs-base/option/option.json
index 9242960c42375e..934b7f4c1c0387 100644
--- a/docs/translations/api-docs-base/option/option.json
+++ b/docs/translations/api-docs-base/option/option.json
@@ -1,7 +1,6 @@
 {
   "componentDescription": "An unstyled option to be used within a Select.",
   "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the option will be disabled.",
     "label": "A text representation of the option&#39;s content. Used for keyboard text navigation matching.",
     "slotProps": "The props used for each slot inside the Option.",
diff --git a/docs/translations/api-docs-base/select/select.json b/docs/translations/api-docs-base/select/select.json
index 590bbb9533d5fc..6e6f0502e5cfb4 100644
--- a/docs/translations/api-docs-base/select/select.json
+++ b/docs/translations/api-docs-base/select/select.json
@@ -2,10 +2,10 @@
   "componentDescription": "The foundation for building custom-styled select components.",
   "propDescriptions": {
     "autoFocus": "If <code>true</code>, the select element is focused during the first mount",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultListboxOpen": "If <code>true</code>, the select will be initially open.",
     "defaultValue": "The default selected value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the select is disabled.",
+    "getOptionAsString": "A function used to convert the option label to a string. It&#39;s useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard.",
     "getSerializedValue": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.",
     "listboxId": "<code>id</code> attribute of the listbox element.",
     "listboxOpen": "Controls the open state of the select&#39;s listbox.",
@@ -13,7 +13,6 @@
     "name": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server.",
     "onChange": "Callback fired when an option is selected.",
     "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).",
-    "optionStringifier": "A function used to convert the option label to a string. It&#39;s useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard.",
     "renderValue": "Function that customizes the rendering of the selected value.",
     "slotProps": "The props used for each slot inside the Input.",
     "slots": "The components used for each slot inside the Select. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
diff --git a/docs/translations/api-docs-base/slider/slider.json b/docs/translations/api-docs-base/slider/slider.json
index 3a12486a363953..0feee17949c0d9 100644
--- a/docs/translations/api-docs-base/slider/slider.json
+++ b/docs/translations/api-docs-base/slider/slider.json
@@ -4,7 +4,6 @@
     "aria-label": "The label of the slider.",
     "aria-labelledby": "The id of the element containing a label for the slider.",
     "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "disableSwap": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb.",
diff --git a/docs/translations/api-docs-base/snackbar/snackbar.json b/docs/translations/api-docs-base/snackbar/snackbar.json
index 6c4f7ffd1ef1fd..256e9ea68748c1 100644
--- a/docs/translations/api-docs-base/snackbar/snackbar.json
+++ b/docs/translations/api-docs-base/snackbar/snackbar.json
@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "autoHideDuration": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disableWindowBlurListener": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused.",
     "exited": "The prop used to handle exited transition and unmount the component.",
     "onClose": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent&lt;any&gt; | Event, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;timeout&quot;</code> (<code>autoHideDuration</code> expired), <code>&quot;clickaway&quot;</code>, or <code>&quot;escapeKeyDown&quot;</code>.",
diff --git a/docs/translations/api-docs-base/switch/switch.json b/docs/translations/api-docs-base/switch/switch.json
index c51aac68be0678..6b8dc299327fc0 100644
--- a/docs/translations/api-docs-base/switch/switch.json
+++ b/docs/translations/api-docs-base/switch/switch.json
@@ -2,7 +2,6 @@
   "componentDescription": "The foundation for building custom-styled switches.",
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
diff --git a/docs/translations/api-docs-base/tab-panel/tab-panel.json b/docs/translations/api-docs-base/tab-panel/tab-panel.json
index fa22ca26bbdc73..e3a53028925fc9 100644
--- a/docs/translations/api-docs-base/tab-panel/tab-panel.json
+++ b/docs/translations/api-docs-base/tab-panel/tab-panel.json
@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "slotProps": "The props used for each slot inside the TabPanel.",
     "slots": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
     "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it&#39;s required for the tab panel to be rendered on the server."
diff --git a/docs/translations/api-docs-base/tab/tab.json b/docs/translations/api-docs-base/tab/tab.json
index a022f725a44992..6b1f4d81a06a29 100644
--- a/docs/translations/api-docs-base/tab/tab.json
+++ b/docs/translations/api-docs-base/tab/tab.json
@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "onChange": "Callback invoked when new value is being set.",
     "slotProps": "The props used for each slot inside the Tab.",
diff --git a/docs/translations/api-docs-base/table-pagination/table-pagination.json b/docs/translations/api-docs-base/table-pagination/table-pagination.json
index 106432ab9dccd0..2c1a32a8a168cf 100644
--- a/docs/translations/api-docs-base/table-pagination/table-pagination.json
+++ b/docs/translations/api-docs-base/table-pagination/table-pagination.json
@@ -1,7 +1,6 @@
 {
   "componentDescription": "A pagination for tables.",
   "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "count": "The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1.",
     "getItemAriaLabel": "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.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.<br><br><strong>Signature:</strong><br><code>function(type: string) =&gt; string</code><br><em>type:</em> The link or button type to format (&#39;first&#39; | &#39;last&#39; | &#39;next&#39; | &#39;previous&#39;).",
     "labelDisplayedRows": "Customize the displayed rows label. Invoked with a <code>{ from, to, count, page }</code> object.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
diff --git a/docs/translations/api-docs-base/tabs-list/tabs-list.json b/docs/translations/api-docs-base/tabs-list/tabs-list.json
index 0067df3d304aa5..9d459303149ef5 100644
--- a/docs/translations/api-docs-base/tabs-list/tabs-list.json
+++ b/docs/translations/api-docs-base/tabs-list/tabs-list.json
@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "slotProps": "The props used for each slot inside the TabsList.",
     "slots": "The components used for each slot inside the TabsList. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
diff --git a/docs/translations/api-docs-base/tabs/tabs.json b/docs/translations/api-docs-base/tabs/tabs.json
index fe065328796929..37fa6685b070b8 100644
--- a/docs/translations/api-docs-base/tabs/tabs.json
+++ b/docs/translations/api-docs-base/tabs/tabs.json
@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "direction": "The direction of the text.",
     "onChange": "Callback invoked when new value is being set.",
diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json
index 7b9e265eeed5c1..1e3d0cb5231d6a 100644
--- a/docs/translations/api-docs/input/input.json
+++ b/docs/translations/api-docs/input/input.json
@@ -92,6 +92,16 @@
       "nodeName": "the input element",
       "conditions": "<code>multiline={true}</code>"
     },
+    "inputAdornedStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>startAdornment</code> is provided"
+    },
+    "inputAdornedEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>endAdornment</code> is provided"
+    },
     "inputTypeSearch": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",
diff --git a/docs/translations/api-docs/popper/popper.json b/docs/translations/api-docs/popper/popper.json
index b6533b390e8cf1..5743b7afdac16c 100644
--- a/docs/translations/api-docs/popper/popper.json
+++ b/docs/translations/api-docs/popper/popper.json
@@ -3,6 +3,7 @@
   "propDescriptions": {
     "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
     "children": "Popper render function or node.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "components": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component.",
     "componentsProps": "The props used for each slot inside the Popper.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
diff --git a/docs/translations/api-docs/use-select/use-select.json b/docs/translations/api-docs/use-select/use-select.json
index ec626227399f64..75fb0f4fc2b414 100644
--- a/docs/translations/api-docs/use-select/use-select.json
+++ b/docs/translations/api-docs/use-select/use-select.json
@@ -5,6 +5,7 @@
     "defaultOpen": "If <code>true</code>, the select will be open by default.",
     "defaultValue": "The default selected value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the select is disabled.",
+    "getOptionAsString": "A function used to convert the option label to a string.\nThis is useful when labels are elements and need to be converted to plain text\nto enable keyboard navigation with character keys.",
     "listboxId": "The <code>id</code> attribute of the listbox element.",
     "listboxRef": "The ref of the listbox element.",
     "multiple": "If <code>true</code>, the end user can select multiple values.\nThis affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props.",
@@ -13,7 +14,6 @@
     "onOpenChange": "Callback fired when the listbox is opened or closed.",
     "open": "Controls the open state of the select's listbox.\nThis is the controlled equivalent of the <code>defaultOpen</code> prop.",
     "options": "An alternative way to specify the options.\nIf this parameter is set, options defined as JSX children are ignored.",
-    "optionStringifier": "A function used to convert the option label to a string.\nThis is useful when labels are elements and need to be converted to plain text\nto enable keyboard navigation with character keys.",
     "value": "The selected value.\nSet to <code>null</code> to deselect all options."
   },
   "returnValueDescriptions": {
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 5d68b5760f8a2d..d4bffd9779c435 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -218,7 +218,7 @@
     "/system/styles/advanced": "Advanced",
     "/base/getting-started": "Getting started",
     "/base/getting-started/overview": "Overview",
-    "/base/getting-started/installation": "Installation",
+    "/base/getting-started/quickstart": "Quickstart",
     "/base/getting-started/usage": "Usage",
     "/base/getting-started/customization": "Customization",
     "/base/react-": "Components",
diff --git a/package.json b/package.json
index 8b0ae93b96a767..118ddd2aa57210 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/monorepo",
-  "version": "5.12.2",
+  "version": "5.12.3",
   "private": true,
   "scripts": {
     "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",
@@ -74,27 +74,27 @@
   "devDependencies": {
     "@argos-ci/core": "^0.8.0",
     "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/node": "^7.20.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-object-assign": "^7.18.6",
     "@babel/plugin-transform-react-constant-elements": "^7.21.3",
-    "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "^7.21.0",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@googleapis/sheets": "^4.0.2",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@octokit/rest": "^19.0.7",
     "@playwright/test": "1.31.2",
     "@rollup/plugin-replace": "^5.0.2",
-    "@slack/bolt": "^3.13.0",
+    "@slack/bolt": "^3.13.1",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/react": "^14.0.0",
-    "@types/chai": "^4.3.4",
+    "@types/chai": "^4.3.5",
     "@types/chai-dom": "^1.11.0",
     "@types/enzyme": "^3.10.13",
     "@types/format-util": "^1.0.2",
@@ -165,11 +165,11 @@
     "markdownlint-cli2": "^0.6.0",
     "mocha": "^10.2.0",
     "node-fetch": "^2.6.9",
-    "nx": "^15.9.2",
+    "nx": "^15.9.3",
     "nyc": "^15.1.0",
     "piscina": "^3.2.0",
     "playwright": "^1.31.2",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
@@ -191,7 +191,7 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-processor-styled-components": "^1.10.0",
-    "stylis": "^4.1.3",
+    "stylis": "^4.1.4",
     "stylis-plugin-rtl": "^2.1.1",
     "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0",
     "terser-webpack-plugin": "^5.3.7",
@@ -208,18 +208,18 @@
     "yarn-deduplicate": "^3.1.0"
   },
   "resolutions": {
-    "**/@babel/core": "^7.21.3",
-    "**/@babel/code-frame": "^7.18.6",
+    "**/@babel/core": "^7.21.4",
+    "**/@babel/code-frame": "^7.21.4",
     "**/@babel/plugin-proposal-class-properties": "^7.18.6",
     "**/@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "**/@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "**/@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "**/@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "**/@babel/plugin-transform-destructuring": "npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2",
-    "**/@babel/plugin-transform-runtime": "^7.21.0",
-    "**/@babel/preset-env": "^7.20.2",
+    "**/@babel/plugin-transform-runtime": "^7.21.4",
+    "**/@babel/preset-env": "^7.21.4",
     "**/@babel/preset-react": "^7.18.6",
-    "**/@babel/preset-typescript": "^7.21.0",
+    "**/@babel/preset-typescript": "^7.21.4",
     "**/@babel/runtime": "^7.21.0",
     "**/@definitelytyped/header-parser": "^0.0.159",
     "**/@definitelytyped/typescript-versions": "^0.0.159",
diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
index 8e52c6e1c8a671..78978f75e06605 100644
--- a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
@@ -370,19 +370,16 @@ const generateApiTranslations = (outputDirectory: string, reactApi: ReactApi) =>
   });
 };
 
-const extractInfoFromInterface = (
-  interfaceName: string,
-  project: TypeScriptProject,
-): ParsedProperty[] => {
+const extractInfoFromType = (typeName: string, project: TypeScriptProject): ParsedProperty[] => {
   // Generate the params
   let result: ParsedProperty[] = [];
 
   try {
-    const exportedSymbol = project.exports[interfaceName];
+    const exportedSymbol = project.exports[typeName];
     const type = project.checker.getDeclaredTypeOfSymbol(exportedSymbol);
     // @ts-ignore
     const typeDeclaration = type?.symbol?.declarations?.[0];
-    if (!typeDeclaration || !ts.isInterfaceDeclaration(typeDeclaration)) {
+    if (!typeDeclaration) {
       return [];
     }
 
@@ -399,7 +396,7 @@ const extractInfoFromInterface = (
       .filter((property) => !property.tags.ignore)
       .sort((a, b) => a.name.localeCompare(b.name));
   } catch (e) {
-    console.error(`No declaration for ${interfaceName}`);
+    console.error(`No declaration for ${typeName}`);
   }
 
   return result;
@@ -433,8 +430,8 @@ export default async function generateHookApi(hooksInfo: HookInfo, project: Type
     { filename },
   );
 
-  const parameters = extractInfoFromInterface(`${upperFirst(name)}Parameters`, project);
-  const returnValue = extractInfoFromInterface(`${upperFirst(name)}ReturnValue`, project);
+  const parameters = extractInfoFromType(`${upperFirst(name)}Parameters`, project);
+  const returnValue = extractInfoFromType(`${upperFirst(name)}ReturnValue`, project);
 
   // Ignore what we might have generated in `annotateHookDefinition`
   const annotatedDescriptionMatch = reactApi.description.match(/(Demos|API):\r?\n\r?\n/);
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index 9f7ffb08abf783..8b75c8e01e1ecd 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -7,7 +7,7 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@mui-internal/docs-utilities": "^1.0.0",
     "@mui/markdown": "^5.0.0",
     "ast-types": "^0.14.2",
diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js
index 3b554bc502ca73..a0617a16fce174 100644
--- a/packages/markdown/loader.js
+++ b/packages/markdown/loader.js
@@ -38,9 +38,9 @@ const packages = [
   {
     product: 'material-ui',
     paths: [
+      path.join(__dirname, '../../packages/mui-base/src'),
       path.join(__dirname, '../../packages/mui-lab/src'),
       path.join(__dirname, '../../packages/mui-material/src'),
-      path.join(__dirname, '../../packages/mui-base/src'),
     ],
   },
   {
diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
index 3f83f86140638d..5de9eaf295b47e 100644
--- a/packages/markdown/parseMarkdown.js
+++ b/packages/markdown/parseMarkdown.js
@@ -370,6 +370,8 @@ function createRender(context) {
   return render;
 }
 
+const BaseUIReexportedComponents = ['ClickAwayListener'];
+
 /**
  * @param {string} product
  * @example 'material'
@@ -386,7 +388,7 @@ function resolveComponentApiUrl(product, componentPkg, component) {
   if (product === 'date-pickers') {
     return `/x/api/date-pickers/${kebabCase(component)}/`;
   }
-  if (componentPkg === 'mui-base') {
+  if (componentPkg === 'mui-base' || BaseUIReexportedComponents.indexOf(component) >= 0) {
     return `/base/api/${kebabCase(component)}/`;
   }
   return `/${product}/api/${kebabCase(component)}/`;
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index a6c61244b149f7..195255c20f8c52 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/base",
-  "version": "5.0.0-alpha.127",
+  "version": "5.0.0-alpha.128",
   "private": false,
   "author": "MUI Team",
   "description": "A library of headless ('unstyled') React UI components and low-level hooks.",
@@ -54,7 +54,7 @@
     "@babel/runtime": "^7.21.0",
     "@emotion/is-prop-valid": "^1.2.0",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "@popperjs/core": "^2.11.7",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
diff --git a/packages/mui-base/src/Badge/Badge.spec.tsx b/packages/mui-base/src/Badge/Badge.spec.tsx
index 9010d01679871f..970ff73baf15ed 100644
--- a/packages/mui-base/src/Badge/Badge.spec.tsx
+++ b/packages/mui-base/src/Badge/Badge.spec.tsx
@@ -26,24 +26,48 @@ const polymorphicComponentTest = () => {
       return <div />;
     };
 
+  const CustomRoot = function CustomRoot() {
+    return <div />;
+  };
+
   return (
     <div>
       {/* @ts-expect-error */}
       <Badge invalidProp={0} />
 
-      <Badge component="a" href="#" />
+      <Badge<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Badge component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <Badge component={CustomComponent} />
+      <Badge<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
+
+      {/* @ts-expect-error required props not specified */}
+      <Badge<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
       <Badge
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Badge<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
@@ -52,6 +76,8 @@ const polymorphicComponentTest = () => {
           e.currentTarget.checkValidity();
         }}
       />
+
+      <Badge<'svg'> viewBox="" />
     </div>
   );
 };
diff --git a/packages/mui-base/src/Badge/Badge.test.tsx b/packages/mui-base/src/Badge/Badge.test.tsx
index 61a19646646413..2cc51f3f8deb4f 100644
--- a/packages/mui-base/src/Badge/Badge.test.tsx
+++ b/packages/mui-base/src/Badge/Badge.test.tsx
@@ -26,6 +26,7 @@ describe('<Badge />', () => {
           expectedClassName: classes.badge,
         },
       },
+      skip: ['componentProp'],
     }),
   );
 });
diff --git a/packages/mui-base/src/Badge/Badge.tsx b/packages/mui-base/src/Badge/Badge.tsx
index 3936c21e8c4b3d..729e69ad8ee7f3 100644
--- a/packages/mui-base/src/Badge/Badge.tsx
+++ b/packages/mui-base/src/Badge/Badge.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import composeClasses from '../composeClasses';
 import useBadge from '../useBadge';
 import { getBadgeUtilityClass } from './badgeClasses';
@@ -40,7 +40,6 @@ const Badge = React.forwardRef(function Badge<RootComponentType extends React.El
 ) {
   const {
     badgeContent: badgeContentProp,
-    component,
     children,
     invisible: invisibleProp,
     max: maxProp = 99,
@@ -65,7 +64,7 @@ const Badge = React.forwardRef(function Badge<RootComponentType extends React.El
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root = component || slots.root || 'span';
+  const Root = slots.root ?? 'span';
   const rootProps: WithOptionalOwnerState<BadgeRootSlotProps> = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -77,7 +76,7 @@ const Badge = React.forwardRef(function Badge<RootComponentType extends React.El
     className: classes.root,
   });
 
-  const BadgeComponent = slots.badge || 'span';
+  const BadgeComponent = slots.badge ?? 'span';
   const badgeProps: WithOptionalOwnerState<BadgeBadgeSlotProps> = useSlotProps({
     elementType: BadgeComponent,
     externalSlotProps: slotProps.badge,
@@ -91,7 +90,7 @@ const Badge = React.forwardRef(function Badge<RootComponentType extends React.El
       <BadgeComponent {...badgeProps}>{displayValue}</BadgeComponent>
     </Root>
   );
-}) as OverridableComponent<BadgeTypeMap>;
+}) as PolymorphicComponent<BadgeTypeMap>;
 
 Badge.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -106,11 +105,6 @@ Badge.propTypes /* remove-proptypes */ = {
    * The badge will be added relative to this node.
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the badge is invisible.
    * @default false
diff --git a/packages/mui-base/src/FormControl/FormControl.spec.tsx b/packages/mui-base/src/FormControl/FormControl.spec.tsx
index 8ef3d66d1a8cc8..f13a167aa9ab2e 100644
--- a/packages/mui-base/src/FormControl/FormControl.spec.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.spec.tsx
@@ -15,19 +15,39 @@ function FormControlTest() {
       {/* @ts-expect-error */}
       <FormControl invalidProp={0} />
 
-      <FormControl component="a" href="#" />
+      <FormControl<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
+
+      <FormControl<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
 
-      <FormControl component={CustomComponent} stringProp="test" numberProp={0} />
       {/* @ts-expect-error */}
-      <FormControl component={CustomComponent} />
+      <FormControl<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <FormControl
-        component="button"
+      <FormControl<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <FormControl<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/FormControl/FormControl.test.tsx b/packages/mui-base/src/FormControl/FormControl.test.tsx
index 9e14724f157d3a..e5d7c991ae6b2b 100644
--- a/packages/mui-base/src/FormControl/FormControl.test.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.test.tsx
@@ -20,6 +20,7 @@ describe('<FormControl />', () => {
         expectedClassName: formControlClasses.root,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('initial state', () => {
diff --git a/packages/mui-base/src/FormControl/FormControl.tsx b/packages/mui-base/src/FormControl/FormControl.tsx
index f79f77647eaa2b..96463d1438f51d 100644
--- a/packages/mui-base/src/FormControl/FormControl.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import { unstable_useControlled as useControlled } from '@mui/utils';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import FormControlContext from './FormControlContext';
 import { getFormControlUtilityClass } from './formControlClasses';
 import {
@@ -80,7 +80,6 @@ const FormControl = React.forwardRef(function FormControl<
   const {
     defaultValue,
     children,
-    component,
     disabled = false,
     error = false,
     onChange,
@@ -145,7 +144,7 @@ const FormControl = React.forwardRef(function FormControl<
     return children;
   };
 
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps: WithOptionalOwnerState<FormControlRootSlotProps> = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -163,7 +162,7 @@ const FormControl = React.forwardRef(function FormControl<
       <Root {...rootProps} />
     </FormControlContext.Provider>
   );
-}) as OverridableComponent<FormControlTypeMap>;
+}) as PolymorphicComponent<FormControlTypeMap>;
 
 FormControl.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -177,11 +176,6 @@ FormControl.propTypes /* remove-proptypes */ = {
     PropTypes.node,
     PropTypes.func,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * @ignore
    */
diff --git a/packages/mui-base/src/FormControl/FormControl.types.ts b/packages/mui-base/src/FormControl/FormControl.types.ts
index faa33734da2979..bd76fbedc2a050 100644
--- a/packages/mui-base/src/FormControl/FormControl.types.ts
+++ b/packages/mui-base/src/FormControl/FormControl.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { Simplify } from '@mui/types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export type NativeFormControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
@@ -72,9 +72,7 @@ export interface FormControlTypeMap<
 
 export type FormControlProps<
   RootComponentType extends React.ElementType = FormControlTypeMap['defaultComponent'],
-> = OverrideProps<FormControlTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<FormControlTypeMap<{}, RootComponentType>, RootComponentType>;
 
 type NonOptionalOwnerState = 'disabled' | 'error' | 'required';
 
@@ -86,28 +84,44 @@ export type FormControlOwnerState = Simplify<
     }
 >;
 
-type ContextFromPropsKey = 'disabled' | 'error' | 'onChange' | 'required' | 'value';
-
-export type FormControlState = Simplify<
-  Pick<FormControlProps, ContextFromPropsKey> & {
-    /**
-     * If `true`, the form element has some value.
-     */
-    filled: boolean;
-    /**
-     * If `true`, the form element is focused and not disabled.
-     */
-    focused: boolean;
-    /**
-     * Callback fired when the form element has lost focus.
-     */
-    onBlur: () => void;
-    /**
-     * Callback fired when the form element receives focus.
-     */
-    onFocus: () => void;
-  }
->;
+export type FormControlState = {
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: boolean;
+  /**
+   * If `true`, the form element has some value.
+   */
+  filled: boolean;
+  /**
+   * If `true`, the form element is focused and not disabled.
+   */
+  focused: boolean;
+  /**
+   * Callback fired when the form element has lost focus.
+   */
+  onBlur: () => void;
+  /**
+   * Callback fired when the form element's value is modified.
+   */
+  onChange: React.ChangeEventHandler<NativeFormControlElement>;
+  /**
+   * Callback fired when the form element receives focus.
+   */
+  onFocus: () => void;
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: boolean;
+  /**
+   * The value of the form element.
+   */
+  value: unknown;
+};
 
 export type FormControlRootSlotProps = {
   children: React.ReactNode | ((state: FormControlState) => React.ReactNode);
diff --git a/packages/mui-base/src/Input/Input.spec.tsx b/packages/mui-base/src/Input/Input.spec.tsx
index f75c39e22835d7..1fe1463fef4c8b 100644
--- a/packages/mui-base/src/Input/Input.spec.tsx
+++ b/packages/mui-base/src/Input/Input.spec.tsx
@@ -31,19 +31,38 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Input invalidProp={0} />
 
-      <Input component="a" href="#" />
+      <Input<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Input component={CustomComponent} stringProp="test" numberProp={0} />
+      <Input<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Input component={CustomComponent} />
+      <Input<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Input
-        component="button"
+      <Input<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Input<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Input/Input.test.tsx b/packages/mui-base/src/Input/Input.test.tsx
index 6a0e92ca71acf4..b7c537c132a048 100644
--- a/packages/mui-base/src/Input/Input.test.tsx
+++ b/packages/mui-base/src/Input/Input.test.tsx
@@ -23,6 +23,7 @@ describe('<Input />', () => {
         testWithElement: 'input',
       },
     },
+    skip: ['componentProp'],
   }));
 
   it('should render textarea without any console errors when multiline=true', () => {
diff --git a/packages/mui-base/src/Input/Input.tsx b/packages/mui-base/src/Input/Input.tsx
index 2ce2cad7adc565..2929059bd48c32 100644
--- a/packages/mui-base/src/Input/Input.tsx
+++ b/packages/mui-base/src/Input/Input.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import isHostComponent from '../utils/isHostComponent';
 import { getInputUtilityClass } from './inputClasses';
 import {
@@ -57,7 +57,6 @@ const Input = React.forwardRef(function Input<RootComponentType extends React.El
     autoComplete,
     autoFocus,
     className,
-    component,
     defaultValue,
     disabled,
     endAdornment,
@@ -133,7 +132,7 @@ const Input = React.forwardRef(function Input<RootComponentType extends React.El
     type,
   };
 
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps: WithOptionalOwnerState<InputRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -182,7 +181,7 @@ const Input = React.forwardRef(function Input<RootComponentType extends React.El
       {endAdornment}
     </Root>
   );
-}) as OverridableComponent<InputTypeMap>;
+}) as PolymorphicComponent<InputTypeMap>;
 
 Input.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -211,23 +210,10 @@ Input.propTypes /* remove-proptypes */ = {
    * If `true`, the `input` element is focused during the first mount.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
   /**
    * Class name applied to the root element.
    */
   className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  color: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    */
diff --git a/packages/mui-base/src/Input/Input.types.ts b/packages/mui-base/src/Input/Input.types.ts
index 71d142d22defe5..e2b0a9e0ae96c0 100644
--- a/packages/mui-base/src/Input/Input.types.ts
+++ b/packages/mui-base/src/Input/Input.types.ts
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { FormControlState } from '../FormControl';
 import { UseInputParameters, UseInputRootSlotProps } from '../useInput';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface InputRootSlotPropsOverrides {}
 export interface InputInputSlotPropsOverrides {}
@@ -156,9 +156,7 @@ export interface InputTypeMap<
 
 export type InputProps<
   RootComponentType extends React.ElementType = InputTypeMap['defaultComponent'],
-> = OverrideProps<InputTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<InputTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type InputOwnerState = Simplify<
   InputOwnProps & {
diff --git a/packages/mui-base/src/Menu/Menu.spec.tsx b/packages/mui-base/src/Menu/Menu.spec.tsx
index ad3db2f64a265b..2429c1772de7a9 100644
--- a/packages/mui-base/src/Menu/Menu.spec.tsx
+++ b/packages/mui-base/src/Menu/Menu.spec.tsx
@@ -13,19 +13,39 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Menu invalidProp={0} />
 
-      <Menu component="a" href="#" />
+      <Menu<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Menu component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <Menu component={CustomComponent} />
+      <Menu<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
 
-      <Menu
-        component="button"
+      {/* @ts-expect-error required props not specified */}
+      <Menu<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
+
+      <Menu<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Menu<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx
index 41c463e4da7976..be2cf8f8e43024 100644
--- a/packages/mui-base/src/Menu/Menu.tsx
+++ b/packages/mui-base/src/Menu/Menu.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { HTMLElementType, refType } from '@mui/utils';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { MenuOwnerState, MenuProps, MenuRootSlotProps, MenuTypeMap } from './Menu.types';
 import { getMenuUtilityClass } from './menuClasses';
 import useMenu from '../useMenu';
@@ -39,7 +39,6 @@ const Menu = React.forwardRef(function Menu<RootComponentType extends React.Elem
     actions,
     anchorEl,
     children,
-    component,
     defaultOpen,
     listboxId,
     onOpenChange,
@@ -68,7 +67,7 @@ const Menu = React.forwardRef(function Menu<RootComponentType extends React.Elem
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root = component ?? slots.root ?? Popper;
+  const Root = slots.root ?? Popper;
   const rootProps: WithOptionalOwnerState<MenuRootSlotProps> = useSlotProps({
     elementType: Root,
     externalForwardedProps: other,
@@ -100,7 +99,7 @@ const Menu = React.forwardRef(function Menu<RootComponentType extends React.Elem
       </Listbox>
     </Root>
   );
-}) as OverridableComponent<MenuTypeMap>;
+}) as PolymorphicComponent<MenuTypeMap>;
 
 Menu.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -126,11 +125,6 @@ Menu.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * @ignore
    */
@@ -152,7 +146,7 @@ Menu.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside the Menu.
    * @default {}
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts
index fa8ccca77518c8..1a48a9074eaaf2 100644
--- a/packages/mui-base/src/Menu/Menu.types.ts
+++ b/packages/mui-base/src/Menu/Menu.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import Popper, { PopperProps } from '../Popper';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from '../useMenu';
 import { ListAction } from '../useList';
 
@@ -76,9 +76,7 @@ export interface MenuTypeMap<
 
 export type MenuProps<
   RootComponentType extends React.ElementType = MenuTypeMap['defaultComponent'],
-> = OverrideProps<MenuTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<MenuTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type MenuOwnerState = Simplify<
   MenuOwnProps & {
diff --git a/packages/mui-base/src/MenuItem/MenuItem.spec.tsx b/packages/mui-base/src/MenuItem/MenuItem.spec.tsx
index 7b728eb48cee49..c9091143378303 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.spec.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.spec.tsx
@@ -13,19 +13,39 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <MenuItem invalidProp={0} />
 
-      <MenuItem component="a" href="#" />
+      <MenuItem<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <MenuItem component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <MenuItem component={CustomComponent} />
+      <MenuItem<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
 
-      <MenuItem
-        component="button"
+      {/* @ts-expect-error required props not specified */}
+      <MenuItem<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
+
+      <MenuItem<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <MenuItem<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/MenuItem/MenuItem.test.tsx b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
index 24d36cae81d292..706086041a6982 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.test.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
@@ -45,6 +45,7 @@ describe('<MenuItem />', () => {
       },
     },
     skip: [
+      'componentProp',
       'reactTestRenderer', // Need to be wrapped in MenuContext
     ],
   }));
diff --git a/packages/mui-base/src/MenuItem/MenuItem.tsx b/packages/mui-base/src/MenuItem/MenuItem.tsx
index 7786d99a7251cb..4b085b0e9477dc 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { MenuItemOwnerState, MenuItemProps, MenuItemTypeMap } from './MenuItem.types';
 import { getMenuItemUtilityClass } from './menuItemClasses';
 import useMenuItem from '../useMenuItem';
@@ -35,7 +35,6 @@ const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends Re
   const {
     children,
     disabled: disabledProp = false,
-    component,
     label,
     slotProps = {},
     slots = {},
@@ -52,7 +51,7 @@ const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends Re
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root = component ?? slots.root ?? 'li';
+  const Root = slots.root ?? 'li';
   const rootProps = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -63,7 +62,7 @@ const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends Re
   });
 
   return <Root {...rootProps}>{children}</Root>;
-}) as OverridableComponent<MenuItemTypeMap>;
+}) as PolymorphicComponent<MenuItemTypeMap>;
 
 MenuItem.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -74,11 +73,6 @@ MenuItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * @ignore
    */
diff --git a/packages/mui-base/src/MenuItem/MenuItem.types.ts b/packages/mui-base/src/MenuItem/MenuItem.types.ts
index 43f9454a7357aa..63b0b3fadfeaa2 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.types.ts
+++ b/packages/mui-base/src/MenuItem/MenuItem.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { Simplify } from '@mui/types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface MenuItemRootSlotPropsOverrides {}
 
@@ -59,9 +59,7 @@ export interface MenuItemTypeMap<
 
 export type MenuItemProps<
   RootComponentType extends React.ElementType = MenuItemTypeMap['defaultComponent'],
-> = OverrideProps<MenuItemTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<MenuItemTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface MenuItemState {
   disabled: boolean;
diff --git a/packages/mui-base/src/Modal/Modal.spec.tsx b/packages/mui-base/src/Modal/Modal.spec.tsx
index 6e97a1c845ef2c..fe3f92641fb8f6 100644
--- a/packages/mui-base/src/Modal/Modal.spec.tsx
+++ b/packages/mui-base/src/Modal/Modal.spec.tsx
@@ -29,21 +29,41 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Modal invalidProp={0} />
 
-      <Modal component="a" href="#" open>
+      <Modal<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+        open
+      >
         <div />
       </Modal>
 
-      <Modal component={CustomComponent} stringProp="test" numberProp={0} open>
+      <Modal<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+        open
+      >
         <div />
       </Modal>
 
       {/* @ts-expect-error */}
-      <Modal component={CustomComponent} open>
+      <Modal<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        open
+      >
         <div />
       </Modal>
 
-      <Modal
-        component="button"
+      <Modal<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
         open
       >
@@ -51,7 +71,9 @@ const polymorphicComponentTest = () => {
       </Modal>
 
       <Modal<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Modal/Modal.test.tsx b/packages/mui-base/src/Modal/Modal.test.tsx
index 8433e7c0374320..17f23cd4084270 100644
--- a/packages/mui-base/src/Modal/Modal.test.tsx
+++ b/packages/mui-base/src/Modal/Modal.test.tsx
@@ -31,6 +31,7 @@ describe('<Modal />', () => {
         },
       },
       skip: [
+        'componentProp',
         'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565
       ],
     }),
diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx
index c2e95b3b85e416..77339544c4bcbb 100644
--- a/packages/mui-base/src/Modal/Modal.tsx
+++ b/packages/mui-base/src/Modal/Modal.tsx
@@ -8,7 +8,7 @@ import {
   unstable_createChainedFunction as createChainedFunction,
   unstable_useEventCallback as useEventCallback,
 } from '@mui/utils';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { ModalOwnerState, ModalOwnProps, ModalProps, ModalTypeMap } from './Modal.types';
 import composeClasses from '../composeClasses';
 import Portal from '../Portal';
@@ -69,7 +69,6 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
   const {
     children,
     closeAfterTransition = false,
-    component,
     container,
     disableAutoFocus = false,
     disableEnforceFocus = false,
@@ -80,7 +79,7 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
     hideBackdrop = false,
     keepMounted = false,
     // private
-    manager = defaultManager,
+    manager: managerProp = defaultManager,
     onBackdropClick,
     onClose,
     onKeyDown,
@@ -91,7 +90,9 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
     slots = {},
     ...other
   } = props;
-
+  // TODO: `modal`` must change its type in this file to match the type of methods
+  // provided by `ModalManager`
+  const manager = managerProp as any;
   const [exited, setExited] = React.useState(!open);
   const modal = React.useRef<{
     modalRef?: typeof modalRef.current;
@@ -255,7 +256,7 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
     childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
   }
 
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -313,7 +314,7 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
       </Root>
     </Portal>
   );
-}) as OverridableComponent<ModalTypeMap>;
+}) as PolymorphicComponent<ModalTypeMap>;
 
 Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -329,11 +330,6 @@ Modal.propTypes /* remove-proptypes */ = {
    * @default false
    */
   closeAfterTransition: PropTypes.bool,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
@@ -409,10 +405,6 @@ Modal.propTypes /* remove-proptypes */ = {
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
   onClose: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
   /**
    * If `true`, the component is shown.
    */
diff --git a/packages/mui-base/src/Modal/Modal.types.ts b/packages/mui-base/src/Modal/Modal.types.ts
index 586d49124f4a3c..5062fc72410767 100644
--- a/packages/mui-base/src/Modal/Modal.types.ts
+++ b/packages/mui-base/src/Modal/Modal.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverridableComponent, OverridableTypeMap, OverrideProps, Simplify } from '@mui/types';
+import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types';
 import { PortalProps } from '../Portal';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface ModalRootSlotPropsOverrides {}
 export interface ModalBackdropSlotPropsOverrides {}
@@ -142,7 +142,7 @@ export type ExtendModal<M extends OverridableTypeMap> = OverridableComponent<Ext
 
 export type ModalProps<
   RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent'],
-> = OverrideProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
+> = PolymorphicProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type ModalOwnerState = Simplify<
   ModalOwnProps & {
diff --git a/packages/mui-base/src/Option/Option.spec.tsx b/packages/mui-base/src/Option/Option.spec.tsx
index c8e7aeaa33a537..ea49a8871a5782 100644
--- a/packages/mui-base/src/Option/Option.spec.tsx
+++ b/packages/mui-base/src/Option/Option.spec.tsx
@@ -24,21 +24,43 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Option invalidProp={0} />
 
-      <Option value={1} component="a" href="#" />
+      <Option<number, 'a'>
+        value={1}
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Option value={1} component={CustomComponent} stringProp="test" numberProp={0} />
+      <Option<number, typeof CustomComponent>
+        value={1}
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Option value={1} component={CustomComponent} />
+      <Option<number, typeof CustomComponent>
+        value={1}
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Option
+      <Option<number, 'button'>
         value={1}
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Option<number, 'button'>
         value={1}
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Option/Option.test.tsx b/packages/mui-base/src/Option/Option.test.tsx
index 16fa74a8dfac3a..f65273850d9279 100644
--- a/packages/mui-base/src/Option/Option.test.tsx
+++ b/packages/mui-base/src/Option/Option.test.tsx
@@ -61,6 +61,7 @@ describe('<Option />', () => {
       },
     },
     skip: [
+      'componentProp',
       'reactTestRenderer', // Need to be wrapped in SelectContext
     ],
   }));
diff --git a/packages/mui-base/src/Option/Option.tsx b/packages/mui-base/src/Option/Option.tsx
index 7ecb1ef8091662..b699bd184e658a 100644
--- a/packages/mui-base/src/Option/Option.tsx
+++ b/packages/mui-base/src/Option/Option.tsx
@@ -25,18 +25,9 @@ const Option = React.forwardRef(function Option<
   OptionValue,
   RootComponentType extends React.ElementType,
 >(props: OptionProps<OptionValue, RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
-  const {
-    children,
-    component,
-    disabled = false,
-    label,
-    slotProps = {},
-    slots = {},
-    value,
-    ...other
-  } = props;
+  const { children, disabled = false, label, slotProps = {}, slots = {}, value, ...other } = props;
 
-  const Root = component || slots.root || 'li';
+  const Root = slots.root ?? 'li';
 
   const optionRef = React.useRef<HTMLElement>(null);
   const combinedRef = useForkRef(optionRef, forwardedRef);
@@ -84,11 +75,6 @@ Option.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the option will be disabled.
    * @default false
diff --git a/packages/mui-base/src/Option/Option.types.ts b/packages/mui-base/src/Option/Option.types.ts
index c87e9f911d39be..b0ee3028d4babf 100644
--- a/packages/mui-base/src/Option/Option.types.ts
+++ b/packages/mui-base/src/Option/Option.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseOptionRootSlotProps } from '../useOption';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface OptionRootSlotPropsOverrides {}
 
@@ -57,22 +57,17 @@ export interface OptionTypeMap<
 export type OptionProps<
   OptionValue,
   RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
-> = OverrideProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType>;
 
 export interface OptionType {
-  <OptionValue, RootComponentType extends React.ElementType>(
-    props: {
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: RootComponentType;
-    } & OverrideProps<OptionTypeMap<OptionValue>, RootComponentType>,
+  <
+    OptionValue,
+    RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
+  >(
+    props: PolymorphicProps<OptionTypeMap<OptionValue>, RootComponentType>,
   ): JSX.Element | null;
-  <OptionValue>(props: DefaultComponentProps<OptionTypeMap<OptionValue>>): JSX.Element | null;
   propTypes?: any;
+  displayName?: string | undefined;
 }
 
 export type OptionOwnerState<OptionValue> = Simplify<
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.spec.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.spec.tsx
index ced9b219a7bd49..b1a68c0df60c06 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.spec.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.spec.tsx
@@ -40,19 +40,38 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <OptionGroup invalidProp={0} />
 
-      <OptionGroup component="a" href="#" />
+      <OptionGroup<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <OptionGroup component={CustomComponent} stringProp="test" numberProp={0} />
+      <OptionGroup<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <OptionGroup component={CustomComponent} />
+      <OptionGroup<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <OptionGroup
-        component="button"
+      <OptionGroup<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <OptionGroup<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
index e4a64caba66355..ddf2a4cd58f958 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
@@ -25,6 +25,7 @@ describe('<OptionGroup />', () => {
       },
     },
     skip: [
+      'componentProp',
       'ownerStatePropagation', // the component does not have its own state
     ],
   }));
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.tsx
index 8f4d8ebf8b2c8d..e8442bc791db0f 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import composeClasses from '../composeClasses';
 import { getOptionGroupUtilityClass } from './optionGroupClasses';
 import {
@@ -37,9 +37,9 @@ function useUtilityClasses(disabled: boolean) {
 const OptionGroup = React.forwardRef(function OptionGroup<
   RootComponentType extends React.ElementType,
 >(props: OptionGroupProps<RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
-  const { component, disabled = false, slotProps = {}, slots = {}, ...other } = props;
+  const { disabled = false, slotProps = {}, slots = {}, ...other } = props;
 
-  const Root = component || slots?.root || 'li';
+  const Root = slots?.root || 'li';
   const Label = slots?.label || 'span';
   const List = slots?.list || 'ul';
 
@@ -76,7 +76,7 @@ const OptionGroup = React.forwardRef(function OptionGroup<
       <List {...listProps}>{props.children}</List>
     </Root>
   );
-}) as OverridableComponent<OptionGroupTypeMap>;
+}) as PolymorphicComponent<OptionGroupTypeMap>;
 
 OptionGroup.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -87,11 +87,6 @@ OptionGroup.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true` all the options in the group will be disabled.
    * @default false
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.types.ts b/packages/mui-base/src/OptionGroup/OptionGroup.types.ts
index 709d3c7c512b32..6069bbeb6dcb4c 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.types.ts
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.types.ts
@@ -1,6 +1,5 @@
-import { OverrideProps } from '@mui/types';
 import * as React from 'react';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface OptionGroupRootSlotPropsOverrides {}
 export interface OptionGroupLabelSlotPropsOverrides {}
@@ -63,9 +62,7 @@ export interface OptionGroupTypeMap<
 
 export type OptionGroupProps<
   RootComponentType extends React.ElementType = OptionGroupTypeMap['defaultComponent'],
-> = OverrideProps<OptionGroupTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<OptionGroupTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type OptionGroupOwnerState = OptionGroupOwnProps;
 
diff --git a/packages/mui-base/src/Popper/Popper.spec.tsx b/packages/mui-base/src/Popper/Popper.spec.tsx
index 92be9af3c4782f..4b8f363526a1ed 100644
--- a/packages/mui-base/src/Popper/Popper.spec.tsx
+++ b/packages/mui-base/src/Popper/Popper.spec.tsx
@@ -26,21 +26,26 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Popper invalidProp={0} open />
 
-      <Popper open component="a" href="#" />
+      <Popper<'a'> open slots={{ root: 'a' }} href="#" />
 
-      <Popper open component={CustomComponent} stringProp="test" numberProp={0} />
+      <Popper<typeof CustomComponent>
+        open
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
       <Popper open component={CustomComponent} />
 
-      <Popper
+      <Popper<'button'>
         open
-        component="button"
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Popper<'button'>
         open
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Popper/Popper.test.tsx b/packages/mui-base/src/Popper/Popper.test.tsx
index 32ba2cb6ad2592..5d7205871c7f4b 100644
--- a/packages/mui-base/src/Popper/Popper.test.tsx
+++ b/packages/mui-base/src/Popper/Popper.test.tsx
@@ -21,6 +21,7 @@ describe('<Popper />', () => {
     skip: [
       // https://github.com/facebook/react/issues/11565
       'reactTestRenderer',
+      'componentProp',
     ],
     slots: {
       root: {
@@ -37,8 +38,7 @@ describe('<Popper />', () => {
       <Popper
         anchorEl={() => document.createElement('div')}
         open
-        component={CustomComponent}
-        ownerState={{ id: 'id' }}
+        slots={{ root: CustomComponent }}
       />,
     );
 
diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
index 95208a0e67771d..ced7791f52031f 100644
--- a/packages/mui-base/src/Popper/Popper.tsx
+++ b/packages/mui-base/src/Popper/Popper.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { OverridableComponent } from '@mui/types';
 import {
   chainPropTypes,
   HTMLElementType,
@@ -13,7 +12,7 @@ import PropTypes from 'prop-types';
 import composeClasses from '../composeClasses';
 import Portal from '../Portal';
 import { getPopperUtilityClass } from './popperClasses';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import {
   PopperPlacementType,
   PopperTooltipProps,
@@ -81,7 +80,6 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
   const {
     anchorEl,
     children,
-    component,
     direction,
     disablePortal,
     modifiers,
@@ -216,7 +214,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
   }
 
   const classes = useUtilityClasses();
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
 
   const rootProps: WithOptionalOwnerState<PopperRootSlotProps> = useSlotProps({
     elementType: Root,
@@ -233,7 +231,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
   return (
     <Root {...rootProps}>{typeof children === 'function' ? children(childProps) : children}</Root>
   );
-}) as OverridableComponent<PopperTooltipTypeMap>;
+}) as PolymorphicComponent<PopperTooltipTypeMap>;
 
 /**
  * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
@@ -335,7 +333,7 @@ const Popper = React.forwardRef(function Popper<RootComponentType extends React.
       </PopperTooltip>
     </Portal>
   );
-}) as OverridableComponent<PopperTypeMap>;
+}) as PolymorphicComponent<PopperTypeMap>;
 
 Popper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -533,10 +531,6 @@ Popper.propTypes /* remove-proptypes */ = {
   slots: PropTypes.shape({
     root: PropTypes.elementType,
   }),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false
diff --git a/packages/mui-base/src/Popper/Popper.types.ts b/packages/mui-base/src/Popper/Popper.types.ts
index 9a7e1df513b8f7..f5c100dea6ce3e 100644
--- a/packages/mui-base/src/Popper/Popper.types.ts
+++ b/packages/mui-base/src/Popper/Popper.types.ts
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
 import { Instance, Options, OptionsGeneric, VirtualElement } from '@popperjs/core';
 import { PortalProps } from '../Portal';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export type PopperPlacementType = Options['placement'];
 
@@ -124,9 +123,7 @@ export interface PopperTypeMap<
 
 export type PopperProps<
   RootComponentType extends React.ElementType = PopperTypeMap['defaultComponent'],
-> = OverrideProps<PopperTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<PopperTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type PopperTooltipOwnProps = Omit<
   PopperOwnProps,
@@ -145,9 +142,7 @@ export interface PopperTooltipTypeMap<
 
 export type PopperTooltipProps<
   RootComponentType extends React.ElementType = PopperTooltipTypeMap['defaultComponent'],
-> = OverrideProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface PopperRootSlotProps {
   className?: string;
diff --git a/packages/mui-base/src/Select/Select.spec.tsx b/packages/mui-base/src/Select/Select.spec.tsx
index 9570e6d40a7e6f..848c0aac6984be 100644
--- a/packages/mui-base/src/Select/Select.spec.tsx
+++ b/packages/mui-base/src/Select/Select.spec.tsx
@@ -93,19 +93,39 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Select invalidProp={0} />
 
-      <Select component="a" href="#" />
+      <Select<string, false, 'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
+
+      <Select<string, false, typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
 
-      <Select component={CustomComponent} stringProp="test" numberProp={0} />
       {/* @ts-expect-error */}
-      <Select component={CustomComponent} />
+      <Select<string, false, typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Select
-        component="button"
+      <Select<string, false, 'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
-      <Select<string, 'button'>
-        component="button"
+      <Select<string, false, 'button'>
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
index 460cd929932fbd..72c9c7fb0e9a55 100644
--- a/packages/mui-base/src/Select/Select.test.tsx
+++ b/packages/mui-base/src/Select/Select.test.tsx
@@ -47,6 +47,7 @@ describe('<Select />', () => {
         testWithElement: null,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('keyboard navigation', () => {
diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx
index 1bd7e94f4fd99f..f6fb3bbd52e510 100644
--- a/packages/mui-base/src/Select/Select.tsx
+++ b/packages/mui-base/src/Select/Select.tsx
@@ -104,7 +104,6 @@ const Select = React.forwardRef(function Select<
   const {
     autoFocus,
     children,
-    component,
     defaultValue,
     defaultListboxOpen = false,
     disabled: disabledProp,
@@ -115,7 +114,7 @@ const Select = React.forwardRef(function Select<
     name,
     onChange,
     onListboxOpenChange,
-    optionStringifier = defaultOptionStringifier,
+    getOptionAsString = defaultOptionStringifier,
     renderValue: renderValueProp,
     slotProps = {},
     slots = {},
@@ -130,7 +129,7 @@ const Select = React.forwardRef(function Select<
   const buttonRef = React.useRef<HTMLElement | null>(null);
   const listboxRef = React.useRef<HTMLElement>(null);
 
-  const Button = component ?? slots.root ?? 'button';
+  const Button = slots.root ?? 'button';
   const ListboxRoot = slots.listbox ?? 'ul';
   const PopperComponent = slots.popper ?? Popper;
 
@@ -166,7 +165,7 @@ const Select = React.forwardRef(function Select<
     open: listboxOpenProp,
     onChange,
     onOpenChange: onListboxOpenChange,
-    optionStringifier,
+    getOptionAsString,
     value: valueProp,
   });
 
@@ -265,11 +264,6 @@ Select.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the select will be initially open.
    * @default false
@@ -284,6 +278,14 @@ Select.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * A function used to convert the option label to a string.
+   * It's useful when labels are elements and need to be converted to plain text
+   * to enable navigation using character keys on a keyboard.
+   *
+   * @default defaultOptionStringifier
+   */
+  getOptionAsString: PropTypes.func,
   /**
    * A function to convert the currently selected value to a string.
    * Used to set a value of a hidden input associated with the select,
@@ -320,14 +322,6 @@ Select.propTypes /* remove-proptypes */ = {
    * Use in controlled mode (see listboxOpen).
    */
   onListboxOpenChange: PropTypes.func,
-  /**
-   * A function used to convert the option label to a string.
-   * It's useful when labels are elements and need to be converted to plain text
-   * to enable navigation using character keys on a keyboard.
-   *
-   * @default defaultOptionStringifier
-   */
-  optionStringifier: PropTypes.func,
   /**
    * Function that customizes the rendering of the selected value.
    */
@@ -336,7 +330,7 @@ Select.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside the Input.
    * @default {}
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts
index e7d6aea61f2bb5..7b2fcd9b340912 100644
--- a/packages/mui-base/src/Select/Select.types.ts
+++ b/packages/mui-base/src/Select/Select.types.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect';
 import { SelectOption } from '../useOption';
 import Popper, { PopperProps } from '../Popper';
-import { SlotComponentProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils';
 
 export interface SelectRootSlotPropsOverrides {}
 export interface SelectListboxSlotPropsOverrides {}
@@ -79,7 +79,7 @@ export interface SelectOwnProps<OptionValue extends {}, Multiple extends boolean
    *
    * @default defaultOptionStringifier
    */
-  optionStringifier?: (option: SelectOption<OptionValue>) => string;
+  getOptionAsString?: (option: SelectOption<OptionValue>) => string;
   /**
    * Function that customizes the rendering of the selected value.
    */
@@ -155,32 +155,25 @@ export type SelectProps<
     OptionValue,
     Multiple
   >['defaultComponent'],
-> = OverrideProps<
+> = PolymorphicProps<
   SelectTypeMap<OptionValue, Multiple, {}, RootComponentType>,
   RootComponentType
-> & {
-  component?: RootComponentType;
-};
+>;
 
 // OverridableComponent cannot be used below as Select's props are generic.
 export interface SelectType {
   <
     OptionValue extends {},
-    RootComponentType extends React.ElementType,
     Multiple extends boolean = false,
+    RootComponentType extends React.ElementType = SelectTypeMap<
+      OptionValue,
+      Multiple
+    >['defaultComponent'],
   >(
-    props: {
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: RootComponentType;
-    } & OverrideProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>,
-  ): JSX.Element | null;
-  <OptionValue extends {}, Multiple extends boolean = false>(
-    props: DefaultComponentProps<SelectTypeMap<OptionValue, Multiple>>,
+    props: PolymorphicProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>,
   ): JSX.Element | null;
   propTypes?: any;
+  displayName?: string | undefined;
 }
 
 export type SelectOwnerState<OptionValue extends {}, Multiple extends boolean> = Simplify<
diff --git a/packages/mui-base/src/Slider/Slider.spec.tsx b/packages/mui-base/src/Slider/Slider.spec.tsx
index b2acef29411aed..9bdc9c872c5b1a 100644
--- a/packages/mui-base/src/Slider/Slider.spec.tsx
+++ b/packages/mui-base/src/Slider/Slider.spec.tsx
@@ -92,19 +92,38 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Slider invalidProp={0} />
 
-      <Slider component="a" href="#" />
+      <Slider<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Slider component={CustomComponent} stringProp="test" numberProp={0} />
+      <Slider<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Slider component={CustomComponent} />
+      <Slider<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Slider
-        component="button"
+      <Slider<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Slider<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Slider/Slider.test.tsx b/packages/mui-base/src/Slider/Slider.test.tsx
index d236ce0b1f67b8..30c2b14b1431a1 100644
--- a/packages/mui-base/src/Slider/Slider.test.tsx
+++ b/packages/mui-base/src/Slider/Slider.test.tsx
@@ -60,6 +60,7 @@ describe('<Slider />', () => {
         expectedClassName: classes.rail,
       },
     },
+    skip: ['componentProp'],
   }));
 
   it('forwards style props on the Root component', () => {
diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx
index b64edc34e442d7..fd7809a11df667 100644
--- a/packages/mui-base/src/Slider/Slider.tsx
+++ b/packages/mui-base/src/Slider/Slider.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import isHostComponent from '../utils/isHostComponent';
 import composeClasses from '../composeClasses';
 import { getSliderUtilityClass } from './sliderClasses';
@@ -64,7 +64,6 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
     'aria-valuetext': ariaValuetext,
     'aria-labelledby': ariaLabelledby,
     className,
-    component,
     disableSwap = false,
     disabled = false,
     getAriaLabel,
@@ -131,7 +130,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root = component ?? slots.root ?? 'span';
+  const Root = slots.root ?? 'span';
   const rootProps = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -307,7 +306,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
       })}
     </Root>
   );
-}) as OverridableComponent<SliderTypeMap>;
+}) as PolymorphicComponent<SliderTypeMap>;
 
 Slider.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -346,19 +345,6 @@ Slider.propTypes /* remove-proptypes */ = {
 
     return null;
   }),
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    */
diff --git a/packages/mui-base/src/Slider/Slider.types.ts b/packages/mui-base/src/Slider/Slider.types.ts
index a95ecc53533f9e..f97e2e4577a4c4 100644
--- a/packages/mui-base/src/Slider/Slider.types.ts
+++ b/packages/mui-base/src/Slider/Slider.types.ts
@@ -1,6 +1,6 @@
-import { OverridableComponent, OverridableTypeMap, OverrideProps, Simplify } from '@mui/types';
+import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types';
 import * as React from 'react';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import {
   UseSliderHiddenInputProps,
   UseSliderParameters,
@@ -171,9 +171,7 @@ export type ExtendSlider<M extends OverridableTypeMap> = OverridableComponent<
 
 export type SliderProps<
   RootComponentType extends React.ElementType = SliderTypeMap['defaultComponent'],
-> = OverrideProps<SliderTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<SliderTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type SliderRootSlotProps = UseSliderRootSlotProps & {
   children: React.ReactNode;
diff --git a/packages/mui-base/src/Snackbar/Snackbar.test.tsx b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
index 1a35520c47af31..a172080a18ab0a 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
@@ -46,6 +46,7 @@ describe('<Snackbar />', () => {
           expectedClassName: classes.root,
         },
       },
+      skip: ['componentProp'],
     }),
   );
 
diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx
index 2d3e3d03964fe1..3f159ff5511867 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import ClickAwayListener from '../ClickAwayListener';
 import {
   SnackbarOwnerState,
@@ -12,7 +11,7 @@ import {
 import composeClasses from '../composeClasses';
 import { getSnackbarUtilityClass } from './snackbarClasses';
 import useSnackbar from '../useSnackbar';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = () => {
@@ -40,7 +39,6 @@ const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends Re
   const {
     autoHideDuration = null,
     children,
-    component,
     disableWindowBlurListener = false,
     exited = true,
     onBlur,
@@ -68,7 +66,7 @@ const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends Re
 
   const ownerState: SnackbarOwnerState = props;
 
-  const Root = component || slots.root || 'div';
+  const Root = slots.root || 'div';
 
   const rootProps: WithOptionalOwnerState<SnackbarRootSlotProps> = useSlotProps({
     elementType: Root,
@@ -106,7 +104,7 @@ const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends Re
       <Root {...rootProps}>{children}</Root>
     </ClickAwayListener>
   );
-}) as OverridableComponent<SnackbarTypeMap>;
+}) as PolymorphicComponent<SnackbarTypeMap>;
 
 Snackbar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -125,11 +123,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
    * @default false
@@ -140,10 +133,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @default true
    */
   exited: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
   /**
    * Callback fired when the component requests to be closed.
    * Typically `onClose` is used to set state in the parent component,
@@ -155,18 +144,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
   /**
    * If `true`, the component is shown.
    */
diff --git a/packages/mui-base/src/Snackbar/Snackbar.types.ts b/packages/mui-base/src/Snackbar/Snackbar.types.ts
index eac50b9f1eb636..0f9925ae44d2f1 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.types.ts
+++ b/packages/mui-base/src/Snackbar/Snackbar.types.ts
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
 import ClickAwayListener, { ClickAwayListenerProps } from '../ClickAwayListener';
 import { UseSnackbarParameters } from '../useSnackbar';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface SnackbarRootSlotPropsOverrides {}
 export interface SnackbarClickAwayListenerSlotPropsOverrides {}
@@ -52,9 +51,7 @@ export interface SnackbarTypeMap<
 
 export type SnackbarProps<
   RootComponentType extends React.ElementType = SnackbarTypeMap['defaultComponent'],
-> = OverrideProps<SnackbarTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<SnackbarTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type SnackbarOwnerState = SnackbarOwnProps;
 
diff --git a/packages/mui-base/src/Switch/Switch.spec.tsx b/packages/mui-base/src/Switch/Switch.spec.tsx
index 400507403d327b..96e1ebac994e16 100644
--- a/packages/mui-base/src/Switch/Switch.spec.tsx
+++ b/packages/mui-base/src/Switch/Switch.spec.tsx
@@ -52,19 +52,38 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Switch invalidProp={0} />
 
-      <Switch component="a" href="#" />
+      <Switch<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Switch component={CustomComponent} stringProp="test" numberProp={0} />
+      <Switch<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Switch component={CustomComponent} />
+      <Switch<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Switch
-        component="button"
+      <Switch<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Switch<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 0cd7a14e5ea33a..57f527c2a0d93e 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -30,6 +30,7 @@ describe('<Switch />', () => {
         isOptional: true,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('componentState', () => {
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index 754fc0e7b85b67..bba6874734968c 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import composeClasses from '../composeClasses';
 import useSwitch from '../useSwitch';
 import {
@@ -52,7 +52,6 @@ const Switch = React.forwardRef(function Switch<RootComponentType extends React.
 ) {
   const {
     checked: checkedProp,
-    component,
     defaultChecked,
     disabled: disabledProp,
     onBlur,
@@ -89,7 +88,7 @@ const Switch = React.forwardRef(function Switch<RootComponentType extends React.
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root: React.ElementType = component ?? slots.root ?? 'span';
+  const Root: React.ElementType = slots.root ?? 'span';
   const rootProps: WithOptionalOwnerState<SwitchRootSlotProps> = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -133,7 +132,7 @@ const Switch = React.forwardRef(function Switch<RootComponentType extends React.
       <Input {...inputProps} />
     </Root>
   );
-}) as OverridableComponent<SwitchTypeMap>;
+}) as PolymorphicComponent<SwitchTypeMap>;
 
 Switch.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -144,15 +143,6 @@ Switch.propTypes /* remove-proptypes */ = {
    * If `true`, the component is checked.
    */
   checked: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The default checked state. Use when the component is not controlled.
    */
@@ -161,10 +151,6 @@ Switch.propTypes /* remove-proptypes */ = {
    * If `true`, the component is disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  id: PropTypes.string,
   /**
    * @ignore
    */
diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index ef6fd19c34aa26..be812714ea31e7 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -1,5 +1,5 @@
-import { OverrideProps, Simplify } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { Simplify } from '@mui/types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseSwitchInputSlotProps, UseSwitchParameters } from '../useSwitch';
 
 export interface SwitchRootSlotPropsOverrides {}
@@ -63,9 +63,7 @@ export interface SwitchTypeMap<
 
 export type SwitchProps<
   RootComponentType extends React.ElementType = SwitchTypeMap['defaultComponent'],
-> = OverrideProps<SwitchTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<SwitchTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type SwitchOwnerState = Simplify<
   SwitchOwnProps & {
diff --git a/packages/mui-base/src/Tab/Tab.spec.tsx b/packages/mui-base/src/Tab/Tab.spec.tsx
index 3c3c30f0a88da0..ace9ce29f195d9 100644
--- a/packages/mui-base/src/Tab/Tab.spec.tsx
+++ b/packages/mui-base/src/Tab/Tab.spec.tsx
@@ -20,21 +20,26 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Tab value={0} invalidProp={0} />
 
-      <Tab value={0} component="a" href="#" />
+      <Tab value={0} slots={{ root: 'a' }} href="#" />
 
-      <Tab value={0} component={CustomComponent} stringProp="test" numberProp={0} />
+      <Tab<typeof CustomComponent>
+        value={0}
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Tab value={0} component={CustomComponent} />
+      <Tab value={0} slots={{ root: { CustomComponent } }} />
 
       <Tab
         value={0}
-        component="button"
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Tab<'button'>
         value={0}
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Tab/Tab.test.tsx b/packages/mui-base/src/Tab/Tab.test.tsx
index 0d1e128ab9a82f..47caae63b5e08c 100644
--- a/packages/mui-base/src/Tab/Tab.test.tsx
+++ b/packages/mui-base/src/Tab/Tab.test.tsx
@@ -65,6 +65,7 @@ describe('<Tab />', () => {
     },
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
+      'componentProp',
     ],
   }));
 });
diff --git a/packages/mui-base/src/Tab/Tab.tsx b/packages/mui-base/src/Tab/Tab.tsx
index b1abb62b4dbd38..17220a3a42170f 100644
--- a/packages/mui-base/src/Tab/Tab.tsx
+++ b/packages/mui-base/src/Tab/Tab.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import composeClasses from '../composeClasses';
 import { getTabUtilityClass } from './tabClasses';
 import { TabProps, TabTypeMap, TabRootSlotProps, TabOwnerState } from './Tab.types';
 import useTab from '../useTab';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = (ownerState: TabOwnerState) => {
@@ -40,7 +39,6 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
     onChange,
     onClick,
     onFocus,
-    component,
     slotProps = {},
     slots = {},
     ...other
@@ -64,7 +62,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabRoot: React.ElementType = component ?? slots.root ?? 'button';
+  const TabRoot: React.ElementType = slots.root ?? 'button';
   const tabRootProps: WithOptionalOwnerState<TabRootSlotProps> = useSlotProps({
     elementType: TabRoot,
     getSlotProps: getRootProps,
@@ -78,7 +76,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
   });
 
   return <TabRoot {...tabRootProps}>{children}</TabRoot>;
-}) as OverridableComponent<TabTypeMap>;
+}) as PolymorphicComponent<TabTypeMap>;
 
 Tab.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -100,11 +98,6 @@ Tab.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -114,14 +107,6 @@ Tab.propTypes /* remove-proptypes */ = {
    * Callback invoked when new value is being set.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
   /**
    * The props used for each slot inside the Tab.
    * @default {}
diff --git a/packages/mui-base/src/Tab/Tab.types.ts b/packages/mui-base/src/Tab/Tab.types.ts
index 226e7ef6b0d898..0f35c00f3f1801 100644
--- a/packages/mui-base/src/Tab/Tab.types.ts
+++ b/packages/mui-base/src/Tab/Tab.types.ts
@@ -1,8 +1,9 @@
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import * as React from 'react';
 import { ButtonOwnProps } from '../Button';
 import { SlotComponentProps } from '../utils';
 import { UseTabRootSlotProps } from '../useTab';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface TabRootSlotPropsOverrides {}
 
@@ -39,9 +40,7 @@ export interface TabSlots {
 }
 
 export type TabProps<RootComponentType extends React.ElementType = TabTypeMap['defaultComponent']> =
-  OverrideProps<TabTypeMap<{}, RootComponentType>, RootComponentType> & {
-    component?: RootComponentType;
-  };
+  PolymorphicProps<TabTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface TabTypeMap<
   AdditionalProps = {},
diff --git a/packages/mui-base/src/TabPanel/TabPanel.spec.tsx b/packages/mui-base/src/TabPanel/TabPanel.spec.tsx
index c7f2161a45cb08..f8ef6814792220 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.spec.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.spec.tsx
@@ -20,21 +20,26 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <TabPanel value={1} invalidProp={0} />
 
-      <TabPanel value={1} component="a" href="#" />
+      <TabPanel<'a'> value={1} slots={{ root: 'a' }} href="#" />
 
-      <TabPanel value={1} component={CustomComponent} stringProp="test" numberProp={0} />
+      <TabPanel<typeof CustomComponent>
+        value={1}
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <TabPanel value={1} component={CustomComponent} />
+      <TabPanel<typeof CustomComponent> value={1} slots={{ root: CustomComponent }} />
 
-      <TabPanel
+      <TabPanel<'button'>
         value={1}
-        component="button"
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <TabPanel<'button'>
         value={1}
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/TabPanel/TabPanel.test.tsx
index 2a6d8888a05501..49574e61e6a4f6 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.test.tsx
@@ -44,6 +44,7 @@ describe('<TabPanel />', () => {
     },
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
+      'componentProp',
     ],
   }));
 });
diff --git a/packages/mui-base/src/TabPanel/TabPanel.tsx b/packages/mui-base/src/TabPanel/TabPanel.tsx
index 594081404bbf1f..d7a75b049f5498 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import composeClasses from '../composeClasses';
 import { getTabPanelUtilityClass } from './tabPanelClasses';
 import useTabPanel from '../useTabPanel/useTabPanel';
@@ -36,7 +35,7 @@ const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends Re
   props: TabPanelProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
-  const { children, component, value, slotProps = {}, slots = {}, ...other } = props;
+  const { children, value, slotProps = {}, slots = {}, ...other } = props;
 
   const { hidden, getRootProps } = useTabPanel(props);
 
@@ -47,7 +46,7 @@ const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends Re
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabPanelRoot: React.ElementType = component ?? slots.root ?? 'div';
+  const TabPanelRoot: React.ElementType = slots.root ?? 'div';
   const tabPanelRootProps: WithOptionalOwnerState<TabPanelRootSlotProps> = useSlotProps({
     elementType: TabPanelRoot,
     getSlotProps: getRootProps,
@@ -62,7 +61,7 @@ const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends Re
   });
 
   return <TabPanelRoot {...tabPanelRootProps}>{!hidden && children}</TabPanelRoot>;
-}) as OverridableComponent<TabPanelTypeMap>;
+}) as PolymorphicComponent<TabPanelTypeMap>;
 
 TabPanel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -73,11 +72,6 @@ TabPanel.propTypes /* remove-proptypes */ = {
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The props used for each slot inside the TabPanel.
    * @default {}
diff --git a/packages/mui-base/src/TabPanel/TabPanel.types.ts b/packages/mui-base/src/TabPanel/TabPanel.types.ts
index 6aeb60db779310..8cd15f1667107c 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.types.ts
+++ b/packages/mui-base/src/TabPanel/TabPanel.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseTabPanelRootSlotProps } from '../useTabPanel';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface TabPanelRootSlotPropsOverrides {}
 
@@ -50,9 +50,7 @@ export interface TabPanelTypeMap<
 
 export type TabPanelProps<
   RootComponentType extends React.ElementType = TabPanelTypeMap['defaultComponent'],
-> = OverrideProps<TabPanelTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TabPanelTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TabPanelOwnerState = Simplify<
   TabPanelOwnProps & {
diff --git a/packages/mui-base/src/TablePagination/TablePagination.spec.tsx b/packages/mui-base/src/TablePagination/TablePagination.spec.tsx
index ade5b8553147f1..bdeca42318a677 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.spec.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import TablePagination from '@mui/base/TablePagination';
+import { expectType } from '@mui/types';
 import {
   TablePaginationActionsSlotProps,
   TablePaginationDisplayedRowsSlotProps,
@@ -75,3 +76,59 @@ const styledTablePagination = (
     }}
   />
 );
+
+const polymorphicComponentTest = () => {
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
+
+  const requiredProps = {
+    count: 10,
+    getItemAriaLabel: () => '',
+    onPageChange: () => {},
+    page: 0,
+    rowsPerPage: 10,
+    showFirstButton: true,
+    showLastButton: true,
+  };
+
+  return (
+    <div>
+      {/* @ts-expect-error */}
+      <TablePagination {...requiredProps} invalidProp={0} />
+
+      <TablePagination<'a'> {...requiredProps} slots={{ root: 'a' }} href="#" />
+
+      <TablePagination<typeof CustomComponent>
+        {...requiredProps}
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
+      {/* @ts-expect-error */}
+      <TablePagination<typeof CustomComponent>
+        {...requiredProps}
+        slots={{ root: CustomComponent }}
+      />
+
+      <TablePagination<'button'>
+        {...requiredProps}
+        slots={{ root: 'button' }}
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+      />
+
+      <TablePagination<'button'>
+        {...requiredProps}
+        slots={{ root: 'button' }}
+        ref={(elem) => {
+          expectType<HTMLButtonElement | null, typeof elem>(elem);
+        }}
+        onMouseDown={(e) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
+          e.currentTarget.checkValidity();
+        }}
+      />
+    </div>
+  );
+};
diff --git a/packages/mui-base/src/TablePagination/TablePagination.test.tsx b/packages/mui-base/src/TablePagination/TablePagination.test.tsx
index 57576daa4ac470..bb8ace8ea2e644 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.test.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.test.tsx
@@ -62,6 +62,7 @@ describe('<TablePagination />', () => {
           testWithElement: 'th',
         },
       },
+      skip: ['componentProp'],
     }),
   );
 
diff --git a/packages/mui-base/src/TablePagination/TablePagination.tsx b/packages/mui-base/src/TablePagination/TablePagination.tsx
index a233ebb085f289..17d383e0db217f 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, chainPropTypes, integerPropType } from '@mui/utils';
-import { OverridableComponent } from '@mui/types';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import composeClasses from '../composeClasses';
 import isHostComponent from '../utils/isHostComponent';
 import TablePaginationActions from './TablePaginationActions';
@@ -63,7 +62,6 @@ const TablePagination = React.forwardRef(function TablePagination<
   RootComponentType extends React.ElementType,
 >(props: TablePaginationProps<RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {
-    component,
     colSpan: colSpanProp,
     count,
     getItemAriaLabel = defaultGetAriaLabel,
@@ -85,7 +83,8 @@ const TablePagination = React.forwardRef(function TablePagination<
   const classes = useUtilityClasses();
 
   let colSpan;
-  if (!component || component === 'td' || !isHostComponent(component)) {
+  const Root = slots.root ?? 'td';
+  if (Root === 'td' || !isHostComponent(Root)) {
     colSpan = colSpanProp || 1000; // col-span over everything
   }
 
@@ -99,7 +98,6 @@ const TablePagination = React.forwardRef(function TablePagination<
   const selectId = useId(selectIdProp);
   const labelId = useId(labelIdProp);
 
-  const Root = component ?? slots.root ?? 'td';
   const rootProps: WithOptionalOwnerState<TablePaginationRootSlotProps> = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -237,26 +235,17 @@ const TablePagination = React.forwardRef(function TablePagination<
       </Toolbar>
     </Root>
   );
-}) as OverridableComponent<TablePaginationTypeMap>;
+}) as PolymorphicComponent<TablePaginationTypeMap>;
 
 TablePagination.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
   /**
    * @ignore
    */
   colSpan: PropTypes.number,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The total number of rows.
    *
@@ -357,7 +346,7 @@ TablePagination.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside the TablePagination.
    * @default {}
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     actions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     menuItem: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
diff --git a/packages/mui-base/src/TablePagination/TablePagination.types.ts b/packages/mui-base/src/TablePagination/TablePagination.types.ts
index 537c185a560bda..e44499a51d31b1 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.types.ts
+++ b/packages/mui-base/src/TablePagination/TablePagination.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import TablePaginationActions from './TablePaginationActions';
 import { ItemAriaLabelType } from './common.types';
 
@@ -205,9 +204,7 @@ export interface TablePaginationTypeMap<
 
 export type TablePaginationProps<
   RootComponentType extends React.ElementType = TablePaginationTypeMap['defaultComponent'],
-> = OverrideProps<TablePaginationTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TablePaginationTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TablePaginationOwnerState = TablePaginationOwnProps;
 
diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx
index 7688239f1de868..275b0232b9052c 100644
--- a/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx
+++ b/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx
@@ -56,26 +56,29 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <TablePaginationActions {...requiredProps} invalidProp={0} />
 
-      <TablePaginationActions {...requiredProps} component="a" href="#" />
+      <TablePaginationActions<'a'> {...requiredProps} slots={{ root: 'a' }} href="#" />
 
-      <TablePaginationActions
+      <TablePaginationActions<typeof CustomComponent>
         {...requiredProps}
-        component={CustomComponent}
+        slots={{ root: CustomComponent }}
         stringProp="test"
         numberProp={0}
       />
       {/* @ts-expect-error */}
-      <TablePaginationActions {...requiredProps} component={CustomComponent} />
+      <TablePaginationActions<typeof CustomComponent>
+        {...requiredProps}
+        slots={{ root: CustomComponent }}
+      />
 
       <TablePaginationActions
         {...requiredProps}
-        component="button"
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <TablePaginationActions<'button'>
         {...requiredProps}
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
index de43160147baee..1795d541831f60 100644
--- a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
+++ b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { OverridableComponent } from '@mui/types';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import {
   TablePaginationActionsButtonSlotProps,
   TablePaginationActionsProps,
@@ -36,7 +35,6 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions<
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const {
-    component,
     count,
     getItemAriaLabel = defaultGetAriaLabel,
     onPageChange,
@@ -70,7 +68,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions<
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
 
-  const Root = slots.root ?? component ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps: WithOptionalOwnerState<TablePaginationActionsRootSlotProps> = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -160,6 +158,6 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions<
       )}
     </Root>
   );
-}) as OverridableComponent<TablePaginationActionsTypeMap>;
+}) as PolymorphicComponent<TablePaginationActionsTypeMap>;
 
 export default TablePaginationActions;
diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts b/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts
index 2297c8112bfbaf..1967ef0d788675 100644
--- a/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts
+++ b/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface TablePaginationActionsRootSlotPropsOverrides {}
 export interface TablePaginationActionsFirstButtonSlotPropsOverrides {}
@@ -118,9 +117,7 @@ export interface TablePaginationActionsSlots {
 
 export type TablePaginationActionsProps<
   RootComponentType extends React.ElementType = TablePaginationActionsTypeMap['defaultComponent'],
-> = OverrideProps<TablePaginationActionsTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TablePaginationActionsTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface TablePaginationActionsTypeMap<
   AdditionalProps = {},
diff --git a/packages/mui-base/src/Tabs/Tabs.spec.tsx b/packages/mui-base/src/Tabs/Tabs.spec.tsx
index 3d9a9bc5da5c10..432291b9003f16 100644
--- a/packages/mui-base/src/Tabs/Tabs.spec.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.spec.tsx
@@ -20,19 +20,23 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Tabs invalidProp={0} />
 
-      <Tabs component="a" href="#" />
+      <Tabs<'a'> slots={{ root: 'a' }} href="#" />
 
-      <Tabs component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <Tabs component={CustomComponent} />
+      <Tabs<typeof CustomComponent>
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
+      {/* @ts-expect-error required props not specified */}
+      <Tabs<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
-      <Tabs
-        component="button"
+      <Tabs<'button'>
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Tabs<'button'>
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/Tabs/Tabs.test.tsx b/packages/mui-base/src/Tabs/Tabs.test.tsx
index 105baae2f05825..42404704ff06d0 100644
--- a/packages/mui-base/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.test.tsx
@@ -43,6 +43,7 @@ describe('<Tabs />', () => {
         expectedClassName: classes.root,
       },
     },
+    skip: ['componentProp'],
   }));
 
   it('can be named via `aria-label`', () => {
diff --git a/packages/mui-base/src/Tabs/Tabs.tsx b/packages/mui-base/src/Tabs/Tabs.tsx
index ac9ae86635c95f..2d5b809af6fd35 100644
--- a/packages/mui-base/src/Tabs/Tabs.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import composeClasses from '../composeClasses';
 import { getTabsUtilityClass } from './tabsClasses';
 import { TabsOwnerState, TabsProps, TabsRootSlotProps, TabsTypeMap } from './Tabs.types';
@@ -39,7 +38,6 @@ const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.Elem
     defaultValue,
     orientation = 'horizontal',
     direction = 'ltr',
-    component,
     onChange,
     selectionFollowsFocus,
     slotProps = {},
@@ -57,7 +55,7 @@ const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.Elem
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabsRoot: React.ElementType = component ?? slots.root ?? 'div';
+  const TabsRoot: React.ElementType = slots.root ?? 'div';
   const tabsRootProps: WithOptionalOwnerState<TabsRootSlotProps> = useSlotProps({
     elementType: TabsRoot,
     externalSlotProps: slotProps.root,
@@ -74,7 +72,7 @@ const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.Elem
       <TabsProvider value={contextValue}>{children}</TabsProvider>
     </TabsRoot>
   );
-}) as OverridableComponent<TabsTypeMap>;
+}) as PolymorphicComponent<TabsTypeMap>;
 
 Tabs.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -85,11 +83,6 @@ Tabs.propTypes /* remove-proptypes */ = {
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    */
diff --git a/packages/mui-base/src/Tabs/Tabs.types.ts b/packages/mui-base/src/Tabs/Tabs.types.ts
index 56cea3e0b3e7ec..10d552b3bff283 100644
--- a/packages/mui-base/src/Tabs/Tabs.types.ts
+++ b/packages/mui-base/src/Tabs/Tabs.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface TabsRootSlotPropsOverrides {}
 
@@ -75,9 +76,7 @@ export interface TabsTypeMap<
 
 export type TabsProps<
   RootComponentType extends React.ElementType = TabsTypeMap['defaultComponent'],
-> = OverrideProps<TabsTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TabsTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TabsOwnerState = Simplify<
   TabsOwnProps & {
diff --git a/packages/mui-base/src/TabsList/TabsList.spec.tsx b/packages/mui-base/src/TabsList/TabsList.spec.tsx
index fed31f225b8814..665323c1571114 100644
--- a/packages/mui-base/src/TabsList/TabsList.spec.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.spec.tsx
@@ -20,19 +20,23 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <TabsList invalidProp={0} />
 
-      <TabsList component="a" href="#" />
+      <TabsList<'a'> slots={{ root: 'a' }} href="#" />
 
-      <TabsList component={CustomComponent} stringProp="test" numberProp={0} />
+      <TabsList<typeof CustomComponent>
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <TabsList component={CustomComponent} />
+      <TabsList<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
-      <TabsList
-        component="button"
+      <TabsList<'button'>
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <TabsList<'button'>
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
diff --git a/packages/mui-base/src/TabsList/TabsList.test.tsx b/packages/mui-base/src/TabsList/TabsList.test.tsx
index d004e1b04601a3..858ac44140b579 100644
--- a/packages/mui-base/src/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.test.tsx
@@ -52,6 +52,7 @@ describe('<TabsList />', () => {
     },
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
+      'componentProp',
     ],
   }));
 });
diff --git a/packages/mui-base/src/TabsList/TabsList.tsx b/packages/mui-base/src/TabsList/TabsList.tsx
index b49e0b7eb63d41..2fc5a8fed7f8b9 100644
--- a/packages/mui-base/src/TabsList/TabsList.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { getTabsListUtilityClass } from './tabsListClasses';
 import {
   TabsListOwnerState,
@@ -38,7 +37,7 @@ const TabsList = React.forwardRef(function TabsList<RootComponentType extends Re
   props: TabsListProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
-  const { children, component, slotProps = {}, slots = {}, ...other } = props;
+  const { children, slotProps = {}, slots = {}, ...other } = props;
 
   const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
     rootRef: forwardedRef,
@@ -52,7 +51,7 @@ const TabsList = React.forwardRef(function TabsList<RootComponentType extends Re
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabsListRoot: React.ElementType = component ?? slots.root ?? 'div';
+  const TabsListRoot: React.ElementType = slots.root ?? 'div';
   const tabsListRootProps: WithOptionalOwnerState<TabsListRootSlotProps> = useSlotProps({
     elementType: TabsListRoot,
     getSlotProps: getRootProps,
@@ -67,7 +66,7 @@ const TabsList = React.forwardRef(function TabsList<RootComponentType extends Re
       <TabsListRoot {...tabsListRootProps}>{children}</TabsListRoot>
     </TabsListProvider>
   );
-}) as OverridableComponent<TabsListTypeMap>;
+}) as PolymorphicComponent<TabsListTypeMap>;
 
 TabsList.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -78,11 +77,6 @@ TabsList.propTypes /* remove-proptypes */ = {
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The props used for each slot inside the TabsList.
    * @default {}
diff --git a/packages/mui-base/src/TabsList/TabsList.types.ts b/packages/mui-base/src/TabsList/TabsList.types.ts
index 8b1e4a4475b67b..f96d9695ee312e 100644
--- a/packages/mui-base/src/TabsList/TabsList.types.ts
+++ b/packages/mui-base/src/TabsList/TabsList.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseTabsListRootSlotProps } from '../useTabsList';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface TabsListRootSlotPropsOverrides {}
 
@@ -44,9 +44,7 @@ export interface TabsListTypeMap<
 
 export type TabsListProps<
   RootComponentType extends React.ElementType = TabsListTypeMap['defaultComponent'],
-> = OverrideProps<TabsListTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TabsListTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TabsListOwnerState = Simplify<
   TabsListOwnProps & {
diff --git a/packages/mui-base/src/useList/listReducer.test.ts b/packages/mui-base/src/useList/listReducer.test.ts
index 867795d3c6d10a..0c24d9dd1984d8 100644
--- a/packages/mui-base/src/useList/listReducer.test.ts
+++ b/packages/mui-base/src/useList/listReducer.test.ts
@@ -22,7 +22,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -51,7 +51,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -79,7 +79,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -107,7 +107,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'multiple',
@@ -135,7 +135,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'multiple',
@@ -163,7 +163,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'none',
@@ -573,7 +573,7 @@ describe('listReducer', () => {
               focusManagement: 'activeDescendant',
               isItemDisabled: (item) => spec.disabledItems.includes(item),
               itemComparer: (o, v) => o === v,
-              itemStringifier: (option) => option,
+              getItemAsString: (option) => option,
               orientation: 'vertical',
               pageSize: 3,
               selectionMode: 'single',
@@ -604,7 +604,7 @@ describe('listReducer', () => {
             focusManagement: 'activeDescendant',
             isItemDisabled: () => false,
             itemComparer: (o, v) => o === v,
-            itemStringifier: (option) => option,
+            getItemAsString: (option) => option,
             orientation: 'vertical',
             pageSize: 5,
             selectionMode: 'single',
@@ -632,7 +632,7 @@ describe('listReducer', () => {
             focusManagement: 'activeDescendant',
             isItemDisabled: () => false,
             itemComparer: (o, v) => o === v,
-            itemStringifier: (option) => option,
+            getItemAsString: (option) => option,
             orientation: 'vertical',
             pageSize: 5,
             selectionMode: 'single',
@@ -660,7 +660,7 @@ describe('listReducer', () => {
             focusManagement: 'activeDescendant',
             isItemDisabled: () => false,
             itemComparer: (o, v) => o === v,
-            itemStringifier: (option) => option,
+            getItemAsString: (option) => option,
             orientation: 'vertical',
             pageSize: 5,
             selectionMode: 'multiple',
@@ -691,7 +691,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -719,7 +719,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -747,7 +747,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: (_, i) => i === 1,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -775,7 +775,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: (_, i) => i === 1,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -803,7 +803,7 @@ describe('listReducer', () => {
           focusManagement: 'activeDescendant',
           isItemDisabled: () => false,
           itemComparer: (o, v) => o === v,
-          itemStringifier: (option) => option,
+          getItemAsString: (option) => option,
           orientation: 'vertical',
           pageSize: 5,
           selectionMode: 'single',
@@ -821,7 +821,7 @@ describe('listReducer', () => {
       disabledItemsFocusable: false,
       focusManagement: 'activeDescendant' as const,
       isItemDisabled: () => false,
-      itemStringifier: (option: any) => option,
+      getItemAsString: (option: any) => option,
       orientation: 'vertical' as const,
       pageSize: 5,
       selectionMode: 'single' as const,
diff --git a/packages/mui-base/src/useList/listReducer.ts b/packages/mui-base/src/useList/listReducer.ts
index e19db122dd0984..cb210a6449f617 100644
--- a/packages/mui-base/src/useList/listReducer.ts
+++ b/packages/mui-base/src/useList/listReducer.ts
@@ -352,7 +352,7 @@ function handleTextNavigation<ItemValue, State extends ListState<ItemValue>>(
   searchString: string,
   context: ListActionContext<ItemValue>,
 ): State {
-  const { items, isItemDisabled, disabledItemsFocusable, itemStringifier } = context;
+  const { items, isItemDisabled, disabledItemsFocusable, getItemAsString } = context;
 
   const startWithCurrentItem = searchString.length > 1;
 
@@ -367,7 +367,7 @@ function handleTextNavigation<ItemValue, State extends ListState<ItemValue>>(
     }
 
     if (
-      textCriteriaMatches(nextItem, searchString, itemStringifier) &&
+      textCriteriaMatches(nextItem, searchString, getItemAsString) &&
       (!isItemDisabled(nextItem, items.indexOf(nextItem)) || disabledItemsFocusable)
     ) {
       // The nextItem is the element to be highlighted
diff --git a/packages/mui-base/src/useList/useList.ts b/packages/mui-base/src/useList/useList.ts
index e6867f00575214..bc73c07b2389aa 100644
--- a/packages/mui-base/src/useList/useList.ts
+++ b/packages/mui-base/src/useList/useList.ts
@@ -79,7 +79,7 @@ function useList<
     onStateChange = NOOP,
     items,
     itemComparer = defaultItemComparer,
-    itemStringifier = defaultItemStringifier,
+    getItemAsString = defaultItemStringifier,
     onChange,
     onHighlightChange,
     orientation = 'vertical',
@@ -174,7 +174,7 @@ function useList<
       isItemDisabled,
       itemComparer,
       items,
-      itemStringifier,
+      getItemAsString,
       onHighlightChange: handleHighlightChange,
       orientation,
       pageSize,
@@ -188,7 +188,7 @@ function useList<
     isItemDisabled,
     itemComparer,
     items,
-    itemStringifier,
+    getItemAsString,
     handleHighlightChange,
     orientation,
     pageSize,
diff --git a/packages/mui-base/src/useList/useList.types.ts b/packages/mui-base/src/useList/useList.types.ts
index 50c0e8f8065d71..b3c7aa44506116 100644
--- a/packages/mui-base/src/useList/useList.types.ts
+++ b/packages/mui-base/src/useList/useList.types.ts
@@ -13,10 +13,10 @@ type ListActionContextRequiredKeys =
   | 'disabledItemsFocusable'
   | 'disableListWrap'
   | 'focusManagement'
+  | 'getItemAsString'
   | 'isItemDisabled'
   | 'itemComparer'
   | 'items'
-  | 'itemStringifier'
   | 'orientation'
   | 'pageSize'
   | 'selectionMode';
@@ -177,7 +177,7 @@ export interface UseListParameters<
    * A function that converts an object to its string representation
    * @default (o) => o
    */
-  itemStringifier?: (option: ItemValue) => string | undefined;
+  getItemAsString?: (option: ItemValue) => string | undefined;
   /**
    * Array of list items.
    */
diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
index ca8940f761b38f..63eeb37f1fb738 100644
--- a/packages/mui-base/src/useMenu/useMenu.ts
+++ b/packages/mui-base/src/useMenu/useMenu.ts
@@ -80,7 +80,7 @@ export default function useMenu(parameters: UseMenuParameters = {}): UseMenuRetu
     }),
     isItemDisabled: (id) => subitems?.get(id)?.disabled || false,
     items: subitemKeys,
-    itemStringifier: (id: string) =>
+    getItemAsString: (id: string) =>
       subitems.get(id)?.label || subitems.get(id)?.ref.current?.innerText,
     rootRef: handleRef,
     onStateChange: stateChangeHandler,
diff --git a/packages/mui-base/src/useSelect/selectReducer.test.ts b/packages/mui-base/src/useSelect/selectReducer.test.ts
index b83a575820291c..7abb9a7fd2424e 100644
--- a/packages/mui-base/src/useSelect/selectReducer.test.ts
+++ b/packages/mui-base/src/useSelect/selectReducer.test.ts
@@ -12,7 +12,7 @@ describe('selectReducer', () => {
     focusManagement: 'activeDescendant' as const,
     isItemDisabled: () => false,
     itemComparer: (a: any, b: any) => a === b,
-    itemStringifier: (option: any) => option,
+    getItemAsString: (option: any) => option,
     orientation: 'vertical' as const,
     pageSize: 5,
     selectionMode: 'single' as const,
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index 066e33023d6833..242d323c4f2422 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -50,7 +50,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     onOpenChange,
     open: openProp,
     options: optionsParam,
-    optionStringifier = defaultOptionStringifier,
+    getOptionAsString = defaultOptionStringifier,
     value: valueProp,
   } = props;
 
@@ -147,9 +147,9 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
         return '';
       }
 
-      return optionStringifier(option);
+      return getOptionAsString(option);
     },
-    [options, optionStringifier],
+    [options, getOptionAsString],
   );
 
   const controlledState = React.useMemo(
@@ -229,7 +229,7 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     onStateChange: handleStateChange,
     reducerActionContext: React.useMemo(() => ({ multiple }), [multiple]),
     items: optionValues,
-    itemStringifier: stringifyOption,
+    getItemAsString: stringifyOption,
     selectionMode: multiple ? 'multiple' : 'single',
     stateReducer: selectReducer,
   };
diff --git a/packages/mui-base/src/useSelect/useSelect.types.ts b/packages/mui-base/src/useSelect/useSelect.types.ts
index 674822809f6705..f5791f61a832c8 100644
--- a/packages/mui-base/src/useSelect/useSelect.types.ts
+++ b/packages/mui-base/src/useSelect/useSelect.types.ts
@@ -57,14 +57,14 @@ export interface UseSelectParameters<OptionValue, Multiple extends boolean = fal
    * Callback fired when an option is selected.
    */
   onChange?: (
-    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+    event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
     value: SelectValue<OptionValue, Multiple>,
   ) => void;
   /**
    * Callback fired when an option is highlighted.
    */
   onHighlightChange?: (
-    e:
+    event:
       | React.MouseEvent<Element, MouseEvent>
       | React.KeyboardEvent<Element>
       | React.FocusEvent<Element, Element>
@@ -92,7 +92,7 @@ export interface UseSelectParameters<OptionValue, Multiple extends boolean = fal
    *
    * @default defaultOptionStringifier
    */
-  optionStringifier?: (option: SelectOption<OptionValue>) => string;
+  getOptionAsString?: (option: SelectOption<OptionValue>) => string;
   /**
    * The selected value.
    * Set to `null` to deselect all options.
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index 91e87c7722dc9e..dca4044863e544 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.12.2",
+  "version": "5.12.3",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/runtime": "^7.21.0",
-    "@babel/traverse": "^7.21.3",
+    "@babel/traverse": "^7.21.4",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.1"
diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json
index fb3a51c4433eb5..35e993ddd0a1e9 100644
--- a/packages/mui-core-downloads-tracker/package.json
+++ b/packages/mui-core-downloads-tracker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/core-downloads-tracker",
-  "version": "5.12.2",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "Internal package to track number of downloads of our design system libraries",
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index 4549d77efe53c1..0a680144d847fc 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "nprogress": "^0.2.0"
   },
   "publishConfig": {
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
index cc602cf2492719..49c3e645ffc883 100644
--- a/packages/mui-joy/package.json
+++ b/packages/mui-joy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/joy",
-  "version": "5.0.0-alpha.77",
+  "version": "5.0.0-alpha.78",
   "private": false,
   "author": "MUI Team",
   "description": "A library of beautifully designed React UI components.",
@@ -57,11 +57,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-alpha.127",
-    "@mui/core-downloads-tracker": "^5.12.2",
-    "@mui/system": "^5.12.1",
+    "@mui/base": "5.0.0-alpha.128",
+    "@mui/core-downloads-tracker": "^5.12.3",
+    "@mui/system": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",
diff --git a/packages/mui-joy/src/Alert/Alert.test.js b/packages/mui-joy/src/Alert/Alert.test.tsx
similarity index 74%
rename from packages/mui-joy/src/Alert/Alert.test.js
rename to packages/mui-joy/src/Alert/Alert.test.tsx
index c5621ee4fbf6d1..9b47494ae77364 100644
--- a/packages/mui-joy/src/Alert/Alert.test.js
+++ b/packages/mui-joy/src/Alert/Alert.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance, describeJoyColorInversion } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
-import Alert, { alertClasses as classes } from '@mui/joy/Alert';
+import Alert, { AlertClassKey, alertClasses as classes } from '@mui/joy/Alert';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 
 describe('<Alert />', () => {
@@ -35,11 +35,13 @@ describe('<Alert />', () => {
       expect(getByRole('alert')).to.have.class(classes.variantSoft);
     });
 
-    ['outlined', 'soft', 'solid'].forEach((variant) => {
+    (['outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByRole } = render(<Alert variant={variant} />);
 
-        expect(getByRole('alert')).to.have.class(classes[`variant${capitalize(variant)}`]);
+        expect(getByRole('alert')).to.have.class(
+          classes[`variant${capitalize(variant)}` as AlertClassKey],
+        );
       });
     });
   });
@@ -51,11 +53,13 @@ describe('<Alert />', () => {
       expect(getByRole('alert')).to.have.class(classes.colorPrimary);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { getByRole } = render(<Alert color={color} />);
 
-        expect(getByRole('alert')).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(getByRole('alert')).to.have.class(
+          classes[`color${capitalize(color)}` as AlertClassKey],
+        );
       });
     });
   });
@@ -67,11 +71,13 @@ describe('<Alert />', () => {
       expect(getByRole('alert')).to.have.class(classes.sizeMd);
     });
 
-    ['sm', 'md', 'lg'].forEach((size) => {
+    (['sm', 'md', 'lg'] as const).forEach((size) => {
       it(`should render ${size}`, () => {
         const { getByRole } = render(<Alert size={size} />);
 
-        expect(getByRole('alert')).to.have.class(classes[`size${capitalize(size)}`]);
+        expect(getByRole('alert')).to.have.class(
+          classes[`size${capitalize(size)}` as AlertClassKey],
+        );
       });
     });
   });
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.test.js b/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
similarity index 83%
rename from packages/mui-joy/src/AspectRatio/AspectRatio.test.js
rename to packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
index 8ec3c5aadfbcde..d77306f5950237 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.test.js
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
@@ -3,7 +3,10 @@ import { expect } from 'chai';
 import { createRenderer, describeConformance, describeJoyColorInversion } from 'test/utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
-import AspectRatio, { aspectRatioClasses as classes } from '@mui/joy/AspectRatio';
+import AspectRatio, {
+  AspectRatioClassKey,
+  aspectRatioClasses as classes,
+} from '@mui/joy/AspectRatio';
 
 describe('<AspectRatio />', () => {
   const { render } = createRenderer();
@@ -37,7 +40,7 @@ describe('<AspectRatio />', () => {
       expect(getByTestId('root').firstChild).to.have.class(classes.variantSoft);
     });
 
-    ['plain', 'outlined', 'soft', 'solid'].forEach((variant) => {
+    (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByTestId } = render(
           <AspectRatio data-testid="root" variant={variant}>
@@ -46,7 +49,7 @@ describe('<AspectRatio />', () => {
         );
 
         expect(getByTestId('root').firstChild).to.have.class(
-          classes[`variant${capitalize(variant)}`],
+          classes[`variant${capitalize(variant)}` as AspectRatioClassKey],
         );
       });
     });
@@ -59,7 +62,7 @@ describe('<AspectRatio />', () => {
       expect(getByTestId('root').firstChild).to.have.class(classes.colorNeutral);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { getByTestId } = render(
           <AspectRatio data-testid="root" color={color}>
@@ -67,7 +70,9 @@ describe('<AspectRatio />', () => {
           </AspectRatio>,
         );
 
-        expect(getByTestId('root').firstChild).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(getByTestId('root').firstChild).to.have.class(
+          classes[`color${capitalize(color)}` as AspectRatioClassKey],
+        );
       });
     });
   });
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
index caae16ab6a653e..0928447a68916e 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -58,7 +58,7 @@ const AspectRatioContent = styled('div', {
     position: 'relative',
     borderRadius: 'inherit',
     height: 0,
-    paddingBottom: 'var(--AspectRatio-paddingBottom)',
+    paddingBottom: 'calc(var(--AspectRatio-paddingBottom) - 2 * var(--variant-borderWidth, 0px))',
     overflow: 'hidden',
     // use data-attribute instead of :first-child to support zero config SSR (emotion)
     // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)
diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.tsx
similarity index 95%
rename from packages/mui-joy/src/Box/Box.test.js
rename to packages/mui-joy/src/Box/Box.test.tsx
index 09c1dfe8887b71..046e524ff766e1 100644
--- a/packages/mui-joy/src/Box/Box.test.js
+++ b/packages/mui-joy/src/Box/Box.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
-import { ThemeProvider, CssVarsProvider, extendTheme } from '@mui/joy/styles';
+import { ThemeProvider, CssVarsProvider, extendTheme, PalettePrimary } from '@mui/joy/styles';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/joy/className';
 import Box from '@mui/joy/Box';
 
@@ -9,6 +9,8 @@ describe('Joy <Box />', () => {
   const { render } = createRenderer();
 
   describeConformance(<Box />, () => ({
+    muiName: 'JoyBox',
+    classes: { root: ClassNameGenerator.generate('JoyBox') },
     render,
     ThemeProvider,
     inheritComponent: 'div',
@@ -35,7 +37,7 @@ describe('Joy <Box />', () => {
         light: {
           palette: {
             primary: {
-              main: 'rgb(255, 0, 0)',
+              ['main' as keyof PalettePrimary]: 'rgb(255, 0, 0)',
             },
           },
         },
diff --git a/packages/mui-joy/src/Card/Card.test.js b/packages/mui-joy/src/Card/Card.test.tsx
similarity index 82%
rename from packages/mui-joy/src/Card/Card.test.js
rename to packages/mui-joy/src/Card/Card.test.tsx
index 4d81655feafe37..756e343b29ac6f 100644
--- a/packages/mui-joy/src/Card/Card.test.js
+++ b/packages/mui-joy/src/Card/Card.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance, describeJoyColorInversion } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
-import Card, { cardClasses as classes } from '@mui/joy/Card';
+import Card, { cardClasses as classes, CardClassKey } from '@mui/joy/Card';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 
 describe('<Card />', () => {
@@ -35,7 +35,7 @@ describe('<Card />', () => {
       expect(getByTestId('root')).to.have.class(classes.variantPlain);
     });
 
-    ['plain', 'outlined', 'soft', 'solid'].forEach((variant) => {
+    (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByTestId } = render(
           <Card data-testid="root" variant={variant}>
@@ -43,7 +43,9 @@ describe('<Card />', () => {
           </Card>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`variant${capitalize(variant)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`variant${capitalize(variant)}` as CardClassKey],
+        );
       });
     });
   });
@@ -55,7 +57,7 @@ describe('<Card />', () => {
       expect(getByTestId('root')).to.have.class(classes.colorNeutral);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { getByTestId } = render(
           <Card data-testid="root" color={color}>
@@ -63,7 +65,9 @@ describe('<Card />', () => {
           </Card>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`color${capitalize(color)}` as CardClassKey],
+        );
       });
     });
   });
diff --git a/packages/mui-joy/src/CardContent/CardContent.test.js b/packages/mui-joy/src/CardContent/CardContent.test.tsx
similarity index 100%
rename from packages/mui-joy/src/CardContent/CardContent.test.js
rename to packages/mui-joy/src/CardContent/CardContent.test.tsx
diff --git a/packages/mui-joy/src/CardCover/CardCover.test.js b/packages/mui-joy/src/CardCover/CardCover.test.tsx
similarity index 100%
rename from packages/mui-joy/src/CardCover/CardCover.test.js
rename to packages/mui-joy/src/CardCover/CardCover.test.tsx
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.test.js b/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
similarity index 76%
rename from packages/mui-joy/src/CardOverflow/CardOverflow.test.js
rename to packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
index 2c8607b7087648..2f503595abba4e 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.test.js
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
@@ -3,7 +3,10 @@ import { expect } from 'chai';
 import { createRenderer, describeConformance, describeJoyColorInversion } from 'test/utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
-import CardOverflow, { cardOverflowClasses as classes } from '@mui/joy/CardOverflow';
+import CardOverflow, {
+  CardOverflowClassKey,
+  cardOverflowClasses as classes,
+} from '@mui/joy/CardOverflow';
 
 describe('<CardOverflow />', () => {
   const { render } = createRenderer();
@@ -35,7 +38,7 @@ describe('<CardOverflow />', () => {
       expect(getByTestId('root')).to.have.class(classes.variantPlain);
     });
 
-    ['plain', 'outlined', 'soft', 'solid'].forEach((variant) => {
+    (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByTestId } = render(
           <CardOverflow data-testid="root" variant={variant}>
@@ -43,7 +46,9 @@ describe('<CardOverflow />', () => {
           </CardOverflow>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`variant${capitalize(variant)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`variant${capitalize(variant)}` as CardOverflowClassKey],
+        );
       });
     });
   });
@@ -55,7 +60,7 @@ describe('<CardOverflow />', () => {
       expect(getByTestId('root')).to.have.class(classes.colorNeutral);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { getByTestId } = render(
           <CardOverflow data-testid="root" color={color}>
@@ -63,7 +68,9 @@ describe('<CardOverflow />', () => {
           </CardOverflow>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`color${capitalize(color)}` as CardOverflowClassKey],
+        );
       });
     });
   });
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.js b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Checkbox/Checkbox.test.js
rename to packages/mui-joy/src/Checkbox/Checkbox.test.tsx
diff --git a/packages/mui-joy/src/Chip/Chip.test.js b/packages/mui-joy/src/Chip/Chip.test.tsx
similarity index 87%
rename from packages/mui-joy/src/Chip/Chip.test.js
rename to packages/mui-joy/src/Chip/Chip.test.tsx
index 7e6548bd2cd823..6fabb3df2c0f05 100644
--- a/packages/mui-joy/src/Chip/Chip.test.js
+++ b/packages/mui-joy/src/Chip/Chip.test.tsx
@@ -8,7 +8,7 @@ import {
   fireEvent,
 } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
-import Chip, { chipClasses as classes } from '@mui/joy/Chip';
+import Chip, { ChipClassKey, chipClasses as classes } from '@mui/joy/Chip';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 
 describe('<Chip />', () => {
@@ -72,11 +72,13 @@ describe('<Chip />', () => {
       expect(getByTestId('root')).to.have.class(classes.variantSolid);
     });
 
-    ['outlined', 'soft', 'solid'].forEach((variant) => {
+    (['outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByTestId } = render(<Chip data-testid="root" variant={variant} />);
 
-        expect(getByTestId('root')).to.have.class(classes[`variant${capitalize(variant)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`variant${capitalize(variant)}` as ChipClassKey],
+        );
       });
     });
   });
@@ -88,11 +90,13 @@ describe('<Chip />', () => {
       expect(getByTestId('root')).to.have.class(classes.colorPrimary);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { getByTestId } = render(<Chip data-testid="root" color={color} />);
 
-        expect(getByTestId('root')).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`color${capitalize(color)}` as ChipClassKey],
+        );
       });
     });
   });
@@ -103,11 +107,13 @@ describe('<Chip />', () => {
 
       expect(getByTestId('root')).to.have.class(classes.sizeMd);
     });
-    ['sm', 'md', 'lg'].forEach((size) => {
+    (['sm', 'md', 'lg'] as const).forEach((size) => {
       it(`should render ${size}`, () => {
         const { getByTestId } = render(<Chip data-testid="root" size={size} />);
 
-        expect(getByTestId('root')).to.have.class(classes[`size${capitalize(size)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`size${capitalize(size)}` as ChipClassKey],
+        );
       });
     });
   });
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.js b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
similarity index 100%
rename from packages/mui-joy/src/ChipDelete/ChipDelete.test.js
rename to packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
diff --git a/packages/mui-joy/src/Container/Container.test.js b/packages/mui-joy/src/Container/Container.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Container/Container.test.js
rename to packages/mui-joy/src/Container/Container.test.tsx
diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.test.js b/packages/mui-joy/src/CssBaseline/CssBaseline.test.tsx
similarity index 100%
rename from packages/mui-joy/src/CssBaseline/CssBaseline.test.js
rename to packages/mui-joy/src/CssBaseline/CssBaseline.test.tsx
diff --git a/packages/mui-joy/src/FormControl/FormControl.test.tsx b/packages/mui-joy/src/FormControl/FormControl.test.tsx
index a88a548e34d370..edb3b3ac7d9101 100644
--- a/packages/mui-joy/src/FormControl/FormControl.test.tsx
+++ b/packages/mui-joy/src/FormControl/FormControl.test.tsx
@@ -300,11 +300,12 @@ describe('<FormControl />', () => {
     });
 
     it('works with radio buttons', () => {
-      const { getByLabelText, getByRole, getByText } = render(
+      const { getByLabelText, getByRole, getByText, getAllByRole } = render(
         <FormControl>
           <FormLabel>label</FormLabel>
           <RadioGroup>
-            <Radio />
+            <Radio value="1" />
+            <Radio value="2" />
           </RadioGroup>
           <FormHelperText>helper text</FormHelperText>
         </FormControl>,
@@ -313,11 +314,37 @@ describe('<FormControl />', () => {
       const label = getByText('label');
       const helperText = getByText('helper text');
 
-      expect(getByRole('radio')).toBeVisible();
+      expect(getAllByRole('radio')).to.have.length(2);
       expect(getByLabelText('label')).to.have.attribute('role', 'radiogroup');
       expect(getByRole('radiogroup')).to.have.attribute('aria-labelledby', label.id);
       expect(getByRole('radiogroup')).to.have.attribute('aria-describedby', helperText.id);
     });
+
+    it('radio buttons should inherit size from the FormControl', () => {
+      const { getByTestId } = render(
+        <FormControl size="sm">
+          <FormLabel>label</FormLabel>
+          <RadioGroup>
+            <Radio value="1" data-testid="radio1" />
+          </RadioGroup>
+          <FormHelperText>helper text</FormHelperText>
+        </FormControl>,
+      );
+      expect(getByTestId('radio1')).to.have.class(radioClasses.sizeSm);
+    });
+
+    it('radio buttons should inherit size from the RadioGroup', () => {
+      const { getByTestId } = render(
+        <FormControl size="sm">
+          <FormLabel>label</FormLabel>
+          <RadioGroup size="md">
+            <Radio value="1" data-testid="radio1" />
+          </RadioGroup>
+          <FormHelperText>helper text</FormHelperText>
+        </FormControl>,
+      );
+      expect(getByTestId('radio1')).to.have.class(radioClasses.sizeMd);
+    });
   });
 
   describe('Radio', () => {
diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx
index bda04a3fe0065c..77423f2044e98e 100644
--- a/packages/mui-joy/src/FormControl/FormControl.tsx
+++ b/packages/mui-joy/src/FormControl/FormControl.tsx
@@ -9,6 +9,7 @@ import styled from '../styles/styled';
 import FormControlContext from './FormControlContext';
 import formControlClasses, { getFormControlUtilityClass } from './formControlClasses';
 import { FormControlProps, FormControlOwnerState, FormControlTypeMap } from './FormControlProps';
+import switchClasses from '../Switch/switchClasses';
 import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState: FormControlOwnerState) => {
@@ -32,29 +33,31 @@ export const FormControlRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: FormControlOwnerState }>(({ theme, ownerState }) => ({
+  '--unstable_RadioGroup-margin': '0.5rem 0',
   '--FormLabel-alignSelf': ownerState.orientation === 'horizontal' ? 'align-items' : 'flex-start',
-  '--FormHelperText-margin': '0.375rem 0 0 0',
   '--FormLabel-asteriskColor': theme.vars.palette.danger[500],
-  ...(ownerState.color !== 'context' && {
-    '--FormHelperText-color': theme.vars.palette[ownerState.color!]?.[500],
-  }),
   ...(ownerState.size === 'sm' && {
     '--FormLabel-fontSize': theme.vars.fontSize.xs,
-    '--FormHelperText-fontSize': theme.vars.fontSize.xs,
     '--FormLabel-margin':
       ownerState.orientation === 'horizontal' ? '0 0.5rem 0 0' : '0 0 0.25rem 0',
+    '--FormHelperText-fontSize': theme.vars.fontSize.xs,
   }),
   ...(ownerState.size === 'md' && {
     '--FormLabel-fontSize': theme.vars.fontSize.sm,
-    '--FormHelperText-fontSize': theme.vars.fontSize.sm,
     '--FormLabel-margin':
       ownerState.orientation === 'horizontal' ? '0 0.75rem 0 0' : '0 0 0.25rem 0',
+    '--FormHelperText-fontSize': theme.vars.fontSize.sm,
   }),
   ...(ownerState.size === 'lg' && {
     '--FormLabel-fontSize': theme.vars.fontSize.md,
-    '--FormHelperText-fontSize': theme.vars.fontSize.sm,
     '--FormLabel-margin': ownerState.orientation === 'horizontal' ? '0 1rem 0 0' : '0 0 0.25rem 0',
+    '--FormHelperText-fontSize': theme.vars.fontSize.sm,
   }),
+  ...(ownerState.color &&
+    ownerState.color !== 'context' && {
+      '--FormHelperText-color': theme.vars.palette[ownerState.color]?.[500],
+    }),
+  '--FormHelperText-margin': '0.375rem 0 0 0',
   [`&.${formControlClasses.error}`]: {
     '--FormHelperText-color': theme.vars.palette.danger[500],
   },
@@ -68,6 +71,11 @@ export const FormControlRoot = styled('div', {
   display: 'flex',
   position: 'relative', // for keeping the control action area, e.g. Switch
   flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
+  ...(ownerState.orientation === 'horizontal' && {
+    [`& > label ~ .${switchClasses.root}`]: {
+      '--unstable_Switch-margin': '0 0 0 auto',
+    },
+  }),
 }));
 /**
  *
@@ -123,7 +131,7 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
       if (registeredInput.current) {
         console.error(
           [
-            'Joy: A FormControl can contain only one Input, Textarea, or Select component',
+            'Joy: A FormControl can contain only one control component (Autocomplete | Input | Textarea | Select | RadioGroup)',
             'You should not mix those components inside a single FormControl instance',
           ].join('\n'),
         );
diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.test.js b/packages/mui-joy/src/FormHelperText/FormHelperText.test.tsx
similarity index 100%
rename from packages/mui-joy/src/FormHelperText/FormHelperText.test.js
rename to packages/mui-joy/src/FormHelperText/FormHelperText.test.tsx
diff --git a/packages/mui-joy/src/FormLabel/FormLabel.test.js b/packages/mui-joy/src/FormLabel/FormLabel.test.tsx
similarity index 100%
rename from packages/mui-joy/src/FormLabel/FormLabel.test.js
rename to packages/mui-joy/src/FormLabel/FormLabel.test.tsx
diff --git a/packages/mui-joy/src/Grid/Grid.test.js b/packages/mui-joy/src/Grid/Grid.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Grid/Grid.test.js
rename to packages/mui-joy/src/Grid/Grid.test.tsx
diff --git a/packages/mui-joy/src/IconButton/IconButton.test.js b/packages/mui-joy/src/IconButton/IconButton.test.tsx
similarity index 100%
rename from packages/mui-joy/src/IconButton/IconButton.test.js
rename to packages/mui-joy/src/IconButton/IconButton.test.tsx
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 32d655a0d0b1f6..8849cae368b19b 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -36,6 +36,9 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
   ({ theme, ownerState }) => [
     {
       '--Icon-margin': 'initial', // reset the icon's margin.
+      ...(ownerState.instanceSize && {
+        '--IconButton-size': { sm: '2rem', md: '2.5rem', lg: '3rem' }[ownerState.instanceSize],
+      }),
       ...(ownerState.size === 'sm' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.6)', // 1.25rem by default
         '--CircularProgress-size': '20px',
@@ -147,6 +150,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
     variant,
     size,
     focusVisible,
+    instanceSize: inProps.size,
   };
 
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-joy/src/IconButton/IconButtonProps.ts b/packages/mui-joy/src/IconButton/IconButtonProps.ts
index 1b2ae54dffae1b..6cc195acbddb5d 100644
--- a/packages/mui-joy/src/IconButton/IconButtonProps.ts
+++ b/packages/mui-joy/src/IconButton/IconButtonProps.ts
@@ -95,6 +95,10 @@ export interface IconButtonOwnerState extends ApplyColorInversion<IconButtonProp
    * If `true`, the element's focus is visible.
    */
   focusVisible?: boolean;
+  /**
+   * The explicit `size` provided to the instance.
+   */
+  instanceSize?: OverridableStringUnion<'sm' | 'md' | 'lg', IconButtonPropsSizeOverrides>;
 }
 
 export type ExtendIconButton<M extends OverridableTypeMap> = ((
diff --git a/packages/mui-joy/src/Input/Input.test.js b/packages/mui-joy/src/Input/Input.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Input/Input.test.js
rename to packages/mui-joy/src/Input/Input.test.tsx
diff --git a/packages/mui-joy/src/Link/Link.test.js b/packages/mui-joy/src/Link/Link.test.tsx
similarity index 78%
rename from packages/mui-joy/src/Link/Link.test.js
rename to packages/mui-joy/src/Link/Link.test.tsx
index e7bb048c3d4739..30221b04093716 100644
--- a/packages/mui-joy/src/Link/Link.test.js
+++ b/packages/mui-joy/src/Link/Link.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { SinonSpy, spy } from 'sinon';
 import {
   act,
   createRenderer,
@@ -8,16 +8,16 @@ import {
   describeConformance,
   describeJoyColorInversion,
 } from 'test/utils';
-import Link, { linkClasses as classes } from '@mui/joy/Link';
+import Link, { LinkClassKey, linkClasses as classes } from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
-import { ThemeProvider } from '@mui/joy/styles';
+import { ThemeProvider, TypographySystem } from '@mui/joy/styles';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 
-function focusVisible(element) {
+function focusVisible(element: HTMLAnchorElement | null) {
   act(() => {
-    element.blur();
+    element?.blur();
     document.dispatchEvent(new window.Event('keydown'));
-    element.focus();
+    element?.focus();
   });
 }
 
@@ -61,7 +61,7 @@ describe('<Link />', () => {
       const handlers = events.reduce((result, n) => {
         result[n] = spy();
         return result;
-      }, {});
+      }, {} as Record<string, SinonSpy>);
 
       const { container } = render(
         <Link href="/" {...handlers}>
@@ -71,8 +71,8 @@ describe('<Link />', () => {
       const anchor = container.querySelector('a');
 
       events.forEach((n) => {
-        const event = n.charAt(2).toLowerCase() + n.slice(3);
-        fireEvent[event](anchor);
+        const event = (n.charAt(2).toLowerCase() + n.slice(3)) as keyof typeof fireEvent;
+        (fireEvent as any)[event](anchor);
         expect(handlers[n].callCount).to.equal(1);
       });
     });
@@ -90,7 +90,7 @@ describe('<Link />', () => {
       expect(anchor).to.have.class(classes.focusVisible);
 
       act(() => {
-        anchor.blur();
+        anchor?.blur();
       });
 
       expect(anchor).not.to.have.class(classes.focusVisible);
@@ -111,7 +111,7 @@ describe('<Link />', () => {
       expect(getByTestId('root')).not.to.have.class(classes.variantSolid);
     });
 
-    ['plain', 'outlined', 'soft', 'solid'].forEach((variant) => {
+    (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { getByTestId } = render(
           <Link href="/" data-testid="root" variant={variant}>
@@ -119,7 +119,9 @@ describe('<Link />', () => {
           </Link>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`variant${capitalize(variant)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`variant${capitalize(variant)}` as LinkClassKey],
+        );
       });
     });
   });
@@ -135,7 +137,7 @@ describe('<Link />', () => {
       expect(getByTestId('root')).to.have.class(classes.colorPrimary);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { getByTestId } = render(
           <Link href="/" data-testid="root" color={color}>
@@ -143,7 +145,9 @@ describe('<Link />', () => {
           </Link>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`color${capitalize(color)}` as LinkClassKey],
+        );
       });
     });
   });
@@ -159,15 +163,15 @@ describe('<Link />', () => {
       expect(getByTestId('root')).have.class(classes.body1);
     });
 
-    ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'].forEach((level) => {
+    (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'] as const).forEach((level) => {
       it(`should render ${level}`, () => {
         const { getByTestId } = render(
-          <Link href="/" data-testid="root" level={level}>
+          <Link href="/" data-testid="root" level={level as keyof TypographySystem}>
             Hello World
           </Link>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[level]);
+        expect(getByTestId('root')).to.have.class(classes[level] as LinkClassKey);
       });
     });
   });
@@ -183,7 +187,7 @@ describe('<Link />', () => {
       expect(getByTestId('root')).have.class(classes.underlineHover);
     });
 
-    ['none', 'always', 'hover'].forEach((underline) => {
+    (['none', 'always', 'hover'] as const).forEach((underline) => {
       it(`should render ${underline}`, () => {
         const { getByTestId } = render(
           <Link href="/" data-testid="root" underline={underline}>
@@ -191,7 +195,9 @@ describe('<Link />', () => {
           </Link>,
         );
 
-        expect(getByTestId('root')).to.have.class(classes[`underline${capitalize(underline)}`]);
+        expect(getByTestId('root')).to.have.class(
+          classes[`underline${capitalize(underline)}` as LinkClassKey],
+        );
       });
     });
   });
diff --git a/packages/mui-joy/src/List/List.test.js b/packages/mui-joy/src/List/List.test.tsx
similarity index 100%
rename from packages/mui-joy/src/List/List.test.js
rename to packages/mui-joy/src/List/List.test.tsx
diff --git a/packages/mui-joy/src/ListDivider/ListDivider.test.js b/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
similarity index 97%
rename from packages/mui-joy/src/ListDivider/ListDivider.test.js
rename to packages/mui-joy/src/ListDivider/ListDivider.test.tsx
index a6596ee1c9fda2..fc7c2bde18cf6c 100644
--- a/packages/mui-joy/src/ListDivider/ListDivider.test.js
+++ b/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
@@ -84,7 +84,7 @@ describe('Joy <ListDivider />', () => {
         </List>,
       );
       expect(screen.queryByRole('separator')).to.equal(null);
-      expect(container.firstChild.firstChild).to.have.tagName('div');
+      expect(container.firstChild?.firstChild).to.have.tagName('div');
     });
   });
 });
diff --git a/packages/mui-joy/src/ListItem/ListItem.test.js b/packages/mui-joy/src/ListItem/ListItem.test.tsx
similarity index 100%
rename from packages/mui-joy/src/ListItem/ListItem.test.js
rename to packages/mui-joy/src/ListItem/ListItem.test.tsx
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.test.js b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
similarity index 100%
rename from packages/mui-joy/src/ListItemButton/ListItemButton.test.js
rename to packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.test.js b/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
similarity index 100%
rename from packages/mui-joy/src/ListItemContent/ListItemContent.test.js
rename to packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.js b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
similarity index 100%
rename from packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.js
rename to packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
diff --git a/packages/mui-joy/src/Menu/Menu.test.js b/packages/mui-joy/src/Menu/Menu.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Menu/Menu.test.js
rename to packages/mui-joy/src/Menu/Menu.test.tsx
diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
index b3f1b534ed9937..9d4691d59fda0e 100644
--- a/packages/mui-joy/src/Menu/Menu.tsx
+++ b/packages/mui-joy/src/Menu/Menu.tsx
@@ -237,7 +237,7 @@ Menu.propTypes /* remove-proptypes */ = {
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false
diff --git a/packages/mui-joy/src/Menu/MenuProps.ts b/packages/mui-joy/src/Menu/MenuProps.ts
index 57aab64d26856e..05dd5a0cda9760 100644
--- a/packages/mui-joy/src/Menu/MenuProps.ts
+++ b/packages/mui-joy/src/Menu/MenuProps.ts
@@ -40,6 +40,11 @@ export interface MenuTypeMap<P = {}, D extends React.ElementType = 'ul'> {
      * @default 'neutral'
      */
     color?: OverridableStringUnion<ColorPaletteProp, MenuPropsColorOverrides>;
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType;
     /**
      * If `true`, the children with an implicit color prop invert their colors to match the component's variant and color.
      * @default false
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.js b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
similarity index 88%
rename from packages/mui-joy/src/MenuItem/MenuItem.test.js
rename to packages/mui-joy/src/MenuItem/MenuItem.test.tsx
index 8fb7c50ef8ccc1..661ce4dadecf81 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.test.js
+++ b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
@@ -9,13 +9,13 @@ import {
   screen,
   describeJoyColorInversion,
 } from 'test/utils';
-import { MenuProvider } from '@mui/base/useMenu';
+import { MenuProvider, MenuProviderValue } from '@mui/base/useMenu';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuItem, { menuItemClasses as classes } from '@mui/joy/MenuItem';
 import ListItemButton from '@mui/joy/ListItemButton';
 
-const testContext = {
-  registerItem: () => ({ id: 0, deregister: () => {} }),
+const testContext: MenuProviderValue = {
+  registerItem: () => ({ id: '0', deregister: () => {} }),
   getItemIndex: () => 0,
   totalSubitemCount: 1,
   dispatch: () => {},
@@ -23,19 +23,24 @@ const testContext = {
     disabled: false,
     highlighted: false,
     selected: false,
+    focusable: false,
     index: 0,
   }),
   registerHighlightChangeHandler: () => () => {},
   registerSelectionChangeHandler: () => () => {},
 };
 
-function Wrapper({ children }) {
+function Wrapper({ children }: { children: React.ReactNode }) {
   return <MenuProvider value={testContext}>{children}</MenuProvider>;
 }
 
 describe('Joy <MenuItem />', () => {
   const { render: baseRender } = createRenderer();
-  const render = (element, options = {}) => baseRender(element, { wrapper: Wrapper, ...options });
+  const render = (element: JSX.Element, options = {}) =>
+    baseRender(element, {
+      wrapper: Wrapper as React.JSXElementConstructor<{ children?: React.ReactNode }>,
+      ...options,
+    });
 
   describeConformance(<MenuItem />, () => ({
     classes,
@@ -97,10 +102,14 @@ describe('Joy <MenuItem />', () => {
   });
 
   describe('event callbacks', () => {
-    /**
-     * @type {Array<keyof typeof fireEvent>}
-     */
-    const events = ['click', 'mouseDown', 'mouseEnter', 'mouseLeave', 'mouseUp', 'touchEnd'];
+    const events: Array<keyof typeof fireEvent> = [
+      'click',
+      'mouseDown',
+      'mouseEnter',
+      'mouseLeave',
+      'mouseUp',
+      'touchEnd',
+    ];
 
     events.forEach((eventName) => {
       it(`should fire ${eventName}`, () => {
diff --git a/packages/mui-joy/src/MenuList/MenuList.test.js b/packages/mui-joy/src/MenuList/MenuList.test.tsx
similarity index 100%
rename from packages/mui-joy/src/MenuList/MenuList.test.js
rename to packages/mui-joy/src/MenuList/MenuList.test.tsx
diff --git a/packages/mui-joy/src/Option/Option.test.js b/packages/mui-joy/src/Option/Option.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Option/Option.test.js
rename to packages/mui-joy/src/Option/Option.test.tsx
diff --git a/packages/mui-joy/src/Radio/Radio.test.js b/packages/mui-joy/src/Radio/Radio.test.tsx
similarity index 100%
rename from packages/mui-joy/src/Radio/Radio.test.js
rename to packages/mui-joy/src/Radio/Radio.test.tsx
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
index b56ef3ad99ddd2..4dd54a369f2872 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
+++ b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
@@ -45,6 +45,7 @@ const RadioGroupRoot = styled('div', {
     '--RadioGroup-gap': '1.25rem',
   }),
   display: 'flex',
+  margin: 'var(--unstable_RadioGroup-margin)',
   flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
   borderRadius: theme.vars.radius.sm,
   ...theme.variants[ownerState.variant!]?.[ownerState.color!],
@@ -77,7 +78,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {
     onChange,
     color = 'neutral',
     variant = 'plain',
-    size = 'md',
+    size: sizeProp = 'md',
     orientation = 'vertical',
     role = 'radiogroup',
     slots = {},
@@ -90,6 +91,8 @@ const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {
     default: defaultValue,
     name: 'RadioGroup',
   });
+  const formControl = React.useContext(FormControlContext);
+  const size = inProps.size || formControl?.size || sizeProp;
 
   const ownerState = {
     orientation,
@@ -104,8 +107,6 @@ const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {
 
   const name = useId(nameProp);
 
-  const formControl = React.useContext(FormControlContext);
-
   if (process.env.NODE_ENV !== 'production') {
     const registerEffect = formControl?.registerEffect;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -158,6 +159,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {
   return (
     <RadioGroupContext.Provider value={contextValue}>
       <SlotRoot {...rootProps}>
+        {/* Prevent radios from getting the FormControl's context because a single FormControl can only have one Radio */}
         <FormControlContext.Provider value={undefined}>
           {React.Children.map(children, (child, index) =>
             React.isValidElement(child)
diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
index 3077b33f865b66..18f9a45533952c 100644
--- a/packages/mui-joy/src/Switch/Switch.tsx
+++ b/packages/mui-joy/src/Switch/Switch.tsx
@@ -110,6 +110,7 @@ const SwitchRoot = styled('div', {
       'calc((var(--Switch-thumbSize) / 2) - (var(--Switch-trackHeight) / 2)) calc(-1 * var(--Switch-thumbOffset))',
     backgroundColor: 'initial', // clear background in case `outlined` variant contain background.
     border: 'none',
+    margin: 'var(--unstable_Switch-margin)',
   };
 });
 
diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx
index 60c9ea2990677b..65feac082c6593 100644
--- a/packages/mui-joy/src/utils/useSlot.test.tsx
+++ b/packages/mui-joy/src/utils/useSlot.test.tsx
@@ -163,7 +163,7 @@ describe('useSlot', () => {
           anchorEl: () => document.createElement('div'),
         },
         internalForwardedProps: {
-          component: ItemRoot,
+          slots: { root: ItemRoot },
         },
       });
       return <SlotRoot {...rootProps} />;
@@ -237,7 +237,7 @@ describe('useSlot', () => {
           anchorEl: () => document.createElement('div'),
         },
         internalForwardedProps: {
-          component: ItemListbox,
+          slots: { root: ItemListbox },
         },
       });
       const [SlotOption, optionProps] = useSlot('option', {
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 4cc83cd6d14b61..f95d5e68588a8b 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "5.0.0-alpha.128",
+  "version": "5.0.0-alpha.129",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -61,10 +61,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-alpha.127",
-    "@mui/system": "^5.12.1",
+    "@mui/base": "5.0.0-alpha.128",
+    "@mui/system": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0"
diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json
index 31bacdf7877078..7a998b8b918e5e 100644
--- a/packages/mui-material-next/package.json
+++ b/packages/mui-material-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-next",
-  "version": "6.0.0-alpha.83",
+  "version": "6.0.0-alpha.84",
   "private": false,
   "author": "MUI Team",
   "description": "v6-alpha: React components that implement Google's Material Design",
@@ -59,11 +59,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-alpha.127",
-    "@mui/material": "^5.12.2",
-    "@mui/system": "^5.12.1",
+    "@mui/base": "5.0.0-alpha.128",
+    "@mui/material": "^5.12.3",
+    "@mui/system": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "@popperjs/core": "^2.11.7",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 494d120dd6d68f..dad1b141ef8079 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.12.2",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -61,11 +61,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-alpha.127",
-    "@mui/core-downloads-tracker": "^5.12.2",
-    "@mui/system": "^5.12.1",
+    "@mui/base": "5.0.0-alpha.128",
+    "@mui/core-downloads-tracker": "^5.12.3",
+    "@mui/system": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts
index 01800d8d96983a..bab72ffa4308f3 100644
--- a/packages/mui-material/src/Accordion/Accordion.d.ts
+++ b/packages/mui-material/src/Accordion/Accordion.d.ts
@@ -1,64 +1,71 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
-import { PaperProps } from '../Paper';
 import { AccordionClasses } from './accordionClasses';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { ExtendPaperTypeMap } from '../Paper/Paper';
 
-export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
-  /**
-   * The content of the component.
-   */
-  children: NonNullable<React.ReactNode>;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<AccordionClasses>;
-  /**
-   * If `true`, expands the accordion by default.
-   * @default false
-   */
-  defaultExpanded?: boolean;
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
-   * @default false
-   */
-  disableGutters?: boolean;
-  /**
-   * If `true`, expands the accordion, otherwise collapse it.
-   * Setting this prop enables control over the accordion.
-   */
-  expanded?: boolean;
-  /**
-   * Callback fired when the expand/collapse state is changed.
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-   * @param {boolean} expanded The `expanded` state of the accordion.
-   */
-  onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   */
-  TransitionComponent?: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<any, any> }
-  >;
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
-   */
-  TransitionProps?: TransitionProps;
-}
+export type AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendPaperTypeMap<
+  {
+    props: P & {
+      /**
+       * The content of the component.
+       */
+      children: NonNullable<React.ReactNode>;
+      /**
+       * Override or extend the styles applied to the component.
+       */
+      classes?: Partial<AccordionClasses>;
+      /**
+       * If `true`, expands the accordion by default.
+       * @default false
+       */
+      defaultExpanded?: boolean;
+      /**
+       * If `true`, the component is disabled.
+       * @default false
+       */
+      disabled?: boolean;
+      /**
+       * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+       * @default false
+       */
+      disableGutters?: boolean;
+      /**
+       * If `true`, expands the accordion, otherwise collapse it.
+       * Setting this prop enables control over the accordion.
+       */
+      expanded?: boolean;
+      /**
+       * Callback fired when the expand/collapse state is changed.
+       *
+       * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+       * @param {boolean} expanded The `expanded` state of the accordion.
+       */
+      onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps<Theme>;
+      /**
+       * The component used for the transition.
+       * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+       * @default Collapse
+       */
+      TransitionComponent?: React.JSXElementConstructor<
+        TransitionProps & { children?: React.ReactElement<any, any> }
+      >;
+      /**
+       * Props applied to the transition element.
+       * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+       */
+      TransitionProps?: TransitionProps;
+    };
+    defaultComponent: D;
+  },
+  'onChange' | 'classes'
+>;
 
 /**
  *
@@ -71,4 +78,11 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
  * - [Accordion API](https://mui.com/material-ui/api/accordion/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function Accordion(props: AccordionProps): JSX.Element;
+declare const Accordion: OverridableComponent<AccordionTypeMap>;
+
+export type AccordionProps<
+  D extends React.ElementType = AccordionTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<AccordionTypeMap<P, D>, D>;
+
+export default Accordion;
diff --git a/packages/mui-material/src/Accordion/Accordion.spec.tsx b/packages/mui-material/src/Accordion/Accordion.spec.tsx
index 529b52e6cb3588..6c473cd6161026 100644
--- a/packages/mui-material/src/Accordion/Accordion.spec.tsx
+++ b/packages/mui-material/src/Accordion/Accordion.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
+import { expectType } from '@mui/types';
 
 function testOnChange() {
   function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {}
@@ -15,3 +16,38 @@ function testOnChange() {
     <div />
   </Accordion>;
 }
+
+const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
+  return <div />;
+};
+
+const requiredProps = {
+  children: <div />,
+};
+
+const AccordionComponentTest = () => {
+  return (
+    <div>
+      <Accordion {...requiredProps} />
+      <Accordion {...requiredProps} component="legend" />
+      <Accordion
+        {...requiredProps}
+        component="a"
+        href="test"
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLAnchorElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component="a" incorrectAttribute="url" />
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component="div" href="url" />
+      <Accordion {...requiredProps} component={CustomComponent} prop1="1" prop2={12} />
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component={CustomComponent} prop1="1" />
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component={CustomComponent} prop1="1" prop2="12" />
+    </div>
+  );
+};
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
index 22b335c5c90205..dcb85716b68e47 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
@@ -114,6 +114,9 @@ const ButtonGroupRoot = styled('div', {
             : `1px solid ${
                 theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
               }`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
         }),
       ...(ownerState.variant === 'text' &&
         ownerState.orientation === 'vertical' && {
@@ -122,6 +125,9 @@ const ButtonGroupRoot = styled('div', {
             : `1px solid ${
                 theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
               }`,
+          [`&.${buttonGroupClasses.disabled}`]: {
+            borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+          },
         }),
       ...(ownerState.variant === 'text' &&
         ownerState.color !== 'inherit' && {
diff --git a/packages/mui-material/src/Input/inputClasses.ts b/packages/mui-material/src/Input/inputClasses.ts
index bc553344a50e3d..96aab43356b70f 100644
--- a/packages/mui-material/src/Input/inputClasses.ts
+++ b/packages/mui-material/src/Input/inputClasses.ts
@@ -29,6 +29,10 @@ export interface InputClasses {
   inputSizeSmall: string;
   /** Styles applied to the input element if `multiline={true}`. */
   inputMultiline: string;
+  /** Styles applied to the input element if `startAdornment` is provided. */
+  inputAdornedStart: string;
+  /** Styles applied to the input element if `endAdornment` is provided. */
+  inputAdornedEnd: string;
   /** Styles applied to the input element if `type="search"`. */
   inputTypeSearch: string;
 }
diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts
index d6433bfb764713..3fdf79c2528e79 100644
--- a/packages/mui-material/src/Paper/Paper.d.ts
+++ b/packages/mui-material/src/Paper/Paper.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
-import { OverrideProps, OverridableComponent } from '../OverridableComponent';
+import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 import { PaperClasses } from './paperClasses';
 
 export interface PaperPropsVariantOverrides {}
@@ -54,6 +54,11 @@ export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
  */
 declare const Paper: OverridableComponent<PaperTypeMap>;
 
+export interface ExtendPaperTypeMap<M extends OverridableTypeMap, Keys extends string = ''> {
+  props: M['props'] & Omit<PaperTypeMap['props'], Keys>;
+  defaultComponent: M['defaultComponent'];
+}
+
 export type PaperProps<
   D extends React.ElementType = PaperTypeMap['defaultComponent'],
   P = {},
diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 4276a639b10257..98894d76e8a99c 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -6,6 +6,11 @@ import * as React from 'react';
 import { styled, Theme, useThemeProps } from '../styles';
 
 export type PopperProps = Omit<BasePopperProps, 'direction'> & {
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
@@ -75,7 +80,6 @@ const Popper = React.forwardRef(function Popper(
   const RootComponent = slots?.root ?? components?.Root;
   const otherProps = {
     anchorEl,
-    component,
     container,
     disablePortal,
     keepMounted,
@@ -89,6 +93,7 @@ const Popper = React.forwardRef(function Popper(
   };
   return (
     <PopperRoot
+      as={component}
       direction={theme?.direction}
       slots={{ root: RootComponent }}
       slotProps={slotProps ?? componentsProps}
@@ -122,9 +127,10 @@ Popper.propTypes /* remove-proptypes */ = {
     PropTypes.func,
   ]),
   /**
-   * @ignore
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
index 3833621c0909be..468affd862e276 100644
--- a/packages/mui-material/src/TextField/TextField.d.ts
+++ b/packages/mui-material/src/TextField/TextField.d.ts
@@ -230,7 +230,14 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
   InputProps?: Partial<OutlinedInputProps>;
 }
 
-export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
+export type TextFieldVariants = 'outlined' | 'standard' | 'filled';
+
+export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> =
+  Variant extends 'filled'
+    ? FilledTextFieldProps
+    : Variant extends 'standard'
+    ? StandardTextFieldProps
+    : OutlinedTextFieldProps;
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
@@ -274,4 +281,12 @@ export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | Out
  * - [TextField API](https://mui.com/material-ui/api/text-field/)
  * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
-export default function TextField(props: TextFieldProps): JSX.Element;
+export default function TextField<Variant extends TextFieldVariants>(
+  props: {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: Variant;
+  } & Omit<TextFieldProps, 'variant'>,
+): JSX.Element;
diff --git a/packages/mui-material/src/TextField/TextField.spec.tsx b/packages/mui-material/src/TextField/TextField.spec.tsx
index aef486d4692d48..242cb93ed188cc 100644
--- a/packages/mui-material/src/TextField/TextField.spec.tsx
+++ b/packages/mui-material/src/TextField/TextField.spec.tsx
@@ -11,6 +11,22 @@ import { expectType } from '@mui/types';
     <TextField variant="standard" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );
 
+  const StandardInputAdorned = (
+    <TextField
+      variant="standard"
+      InputProps={{
+        classes: { inputAdornedStart: 'search-input', inputAdornedEnd: 'search-input' },
+      }}
+    />
+  );
+  const DefaultInputAdorned = (
+    <TextField
+      InputProps={{
+        classes: { inputAdornedStart: 'search-input', inputAdornedEnd: 'search-input' },
+      }}
+    />
+  );
+
   const outlinedInputTypeSearch = (
     <TextField variant="outlined" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );
diff --git a/packages/mui-material/test/typescript/hoc-interop.spec.tsx b/packages/mui-material/test/typescript/hoc-interop.spec.tsx
index d9abaf997eb78b..c4bf957a30ebd7 100644
--- a/packages/mui-material/test/typescript/hoc-interop.spec.tsx
+++ b/packages/mui-material/test/typescript/hoc-interop.spec.tsx
@@ -4,41 +4,11 @@
  * It's a common pattern to use some form of Pick or Omit in hocs which don't have
  * a desired outcome when operating on union types.
  *
- * We use our TextField component since it has a union type as props
- *
  * See https://github.com/Microsoft/TypeScript/issues/28339 for in-depth discussion
  */
 import { Button } from '@mui/material';
 import { createStyles, withStyles } from '@mui/styles';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import emotionStyled from '@emotion/styled';
 import * as React from 'react';
-import styled from 'styled-components';
-
-const filledProps = {
-  InputProps: { classes: { inputAdornedStart: 'adorned' } },
-};
-
-// baseline behavior
-<TextField variant="filled" {...filledProps} />;
-// @ts-expect-error
-<TextField {...filledProps} />; // desired to throw
-
-// styled
-{
-  const StyledTextField = styled(TextField)``;
-  <StyledTextField variant="filled" {...filledProps} />; // desired to pass
-  // @ts-expect-error
-  <StyledTextField {...filledProps} />; // undesired, should throw
-}
-
-// @emotion/styled
-{
-  const StyledTextField = emotionStyled(TextField)``;
-  <StyledTextField variant="filled" {...filledProps} />;
-  // @ts-expect-error
-  <StyledTextField {...filledProps} />; // desired to throw
-}
 
 // https://github.com/mui/material-ui/issues/14586
 {
diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json
index 397d7b4b64beeb..4f9119d7736e8d 100644
--- a/packages/mui-private-theming/package.json
+++ b/packages/mui-private-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/private-theming",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "prop-types": "^15.8.1"
   },
   "sideEffects": false,
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
index abebfc15b885d7..a75da99ee3a599 100644
--- a/packages/mui-styled-engine/package.json
+++ b/packages/mui-styled-engine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@emotion/cache": "^11.10.7",
+    "@emotion/cache": "^11.10.8",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"
   },
diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json
index cd618adbdc552f..f714a5022048b2 100644
--- a/packages/mui-styles/package.json
+++ b/packages/mui-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styles",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.21.0",
     "@emotion/hash": "^0.9.0",
-    "@mui/private-theming": "^5.12.0",
+    "@mui/private-theming": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
     "hoist-non-react-statics": "^3.3.2",
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
index 35f568cd571d5a..cce4aeda3ddf54 100644
--- a/packages/mui-system/package.json
+++ b/packages/mui-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.12.1",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -58,10 +58,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/private-theming": "^5.12.0",
-    "@mui/styled-engine": "^5.12.0",
+    "@mui/private-theming": "^5.12.3",
+    "@mui/styled-engine": "^5.12.3",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"
diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json
index d4e338d9b953f3..a3074218d6b394 100644
--- a/packages/mui-utils/package.json
+++ b/packages/mui-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -49,7 +49,7 @@
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/helper-module-imports": "^7.18.6",
+    "@babel/helper-module-imports": "^7.21.4",
     "@types/babel-plugin-macros": "^3.1.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-tester": "^11.0.4"
diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json
index 207703a98befa3..9b00b9b61fbf76 100644
--- a/packages/typescript-to-proptypes/package.json
+++ b/packages/typescript-to-proptypes/package.json
@@ -24,19 +24,19 @@
     "@types/babel__core": "^7.20.0",
     "@types/doctrine": "^0.0.5",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^16.18.24",
+    "@types/node": "^16.18.25",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.26",
     "@types/uuid": "^8.3.4",
     "fast-glob": "^3.2.12",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/plugin-syntax-class-properties": "^7.12.13",
-    "@babel/plugin-syntax-jsx": "^7.18.6",
-    "@babel/types": "^7.21.3",
+    "@babel/plugin-syntax-jsx": "^7.21.4",
+    "@babel/types": "^7.21.4",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21",
     "typescript": "^4.9.5",
diff --git a/test/e2e-website/material-docs.spec.ts b/test/e2e-website/material-docs.spec.ts
index 98a49d637de60b..1439ee0af35c93 100644
--- a/test/e2e-website/material-docs.spec.ts
+++ b/test/e2e-website/material-docs.spec.ts
@@ -97,6 +97,32 @@ test.describe('Material docs', () => {
       await expect(anchor).toHaveAttribute('href', '/material-ui/material-icons/');
       await expect(anchor).toHaveText('Material Icons');
     });
+
+    test('should have correct API links when name of components conflicts with Base UI', async ({
+      page,
+    }) => {
+      await page.goto('/material-ui/react-button/');
+
+      const anchors = page.locator('div > h2#api ~ ul a');
+
+      const firstAnchor = anchors.first();
+      const textContent = await firstAnchor.textContent();
+
+      await expect(textContent).toEqual('<Button />');
+      await expect(firstAnchor).toHaveAttribute('href', '/material-ui/api/button/');
+    });
+
+    test('should have correct API links when linking Base UI components', async ({ page }) => {
+      await page.goto('/material-ui/react-click-away-listener/');
+
+      const anchors = page.locator('div > h2#api ~ ul a');
+
+      const firstAnchor = anchors.first();
+      const textContent = await firstAnchor.textContent();
+
+      await expect(textContent).toEqual('<ClickAwayListener />');
+      await expect(firstAnchor).toHaveAttribute('href', '/base/api/click-away-listener/');
+    });
   });
 
   test.describe('API page', () => {
diff --git a/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js
new file mode 100644
index 00000000000000..224d3ccdd2ce45
--- /dev/null
+++ b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import ButtonGroup from '@mui/material/ButtonGroup';
+
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
+
+export default function DisabledButtonGroup() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        '& > *': {
+          m: 1,
+        },
+      }}
+    >
+      {/* variant="text" */}
+      <ButtonGroup
+        color="error"
+        orientation="horizontal"
+        aria-label="horizontal text button group"
+        variant="text"
+        disabled
+      >
+        {buttons}
+      </ButtonGroup>
+      {/* variant="text" */}
+      <ButtonGroup
+        color="error"
+        orientation="vertical"
+        aria-label="vertical text button group"
+        variant="text"
+        disabled
+      >
+        {buttons}
+      </ButtonGroup>
+    </Box>
+  );
+}
diff --git a/test/regressions/fixtures/IconButtonJoy/IconButtonInstanceSize.js b/test/regressions/fixtures/IconButtonJoy/IconButtonInstanceSize.js
new file mode 100644
index 00000000000000..b8e316eda1d357
--- /dev/null
+++ b/test/regressions/fixtures/IconButtonJoy/IconButtonInstanceSize.js
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Input from '@mui/joy/Input';
+import IconButton from '@mui/joy/IconButton';
+import Stack from '@mui/joy/Stack';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+
+export default function VariantColorJoy() {
+  return (
+    <CssVarsProvider>
+      <Stack spacing={2}>
+        <Input
+          size="lg"
+          endDecorator={
+            <IconButton>
+              <VisibilityIcon />
+            </IconButton>
+          }
+        />
+        <Input
+          size="lg"
+          endDecorator={
+            <IconButton size="sm">
+              <VisibilityIcon />
+            </IconButton>
+          }
+        />
+      </Stack>
+    </CssVarsProvider>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index 9234f432fc1a47..0cc15f087c7ca6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,24 +2,24 @@
 # yarn lockfile v1
 
 
-"@algolia/autocomplete-core@1.7.4":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz#85ff36b2673654a393c8c505345eaedd6eaa4f70"
-  integrity sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==
+"@algolia/autocomplete-core@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz#8d758c8652742e2761450d2b615a841fca24e10e"
+  integrity sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==
   dependencies:
-    "@algolia/autocomplete-shared" "1.7.4"
+    "@algolia/autocomplete-shared" "1.8.2"
 
-"@algolia/autocomplete-preset-algolia@1.7.4":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz#610ee1d887962f230b987cba2fd6556478000bc3"
-  integrity sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==
+"@algolia/autocomplete-preset-algolia@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.8.2.tgz#706e87f94c5f198c0e90502b97af09adeeddcc79"
+  integrity sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==
   dependencies:
-    "@algolia/autocomplete-shared" "1.7.4"
+    "@algolia/autocomplete-shared" "1.8.2"
 
-"@algolia/autocomplete-shared@1.7.4":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz#78aea1140a50c4d193e1f06a13b7f12c5e2cbeea"
-  integrity sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg==
+"@algolia/autocomplete-shared@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.8.2.tgz#e6972df5c6935a241f16e4909aa82902338e029d"
+  integrity sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==
 
 "@algolia/cache-browser-local-storage@4.14.2":
   version "4.14.2"
@@ -167,45 +167,45 @@
     "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
     chokidar "^3.4.0"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
-  version "7.20.10"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec"
-  integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f"
+  integrity sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==
 
-"@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.17.9", "@babel/core@^7.21.3", "@babel/core@^7.7.5":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.3.tgz#cf1c877284a469da5d1ce1d1e53665253fae712e"
-  integrity sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw==
+"@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.17.9", "@babel/core@^7.21.4", "@babel/core@^7.7.5":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659"
+  integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.21.3"
-    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
     "@babel/helper-module-transforms" "^7.21.2"
     "@babel/helpers" "^7.21.0"
-    "@babel/parser" "^7.21.3"
+    "@babel/parser" "^7.21.4"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.3"
-    "@babel/types" "^7.21.3"
+    "@babel/traverse" "^7.21.4"
+    "@babel/types" "^7.21.4"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.2"
     semver "^6.3.0"
 
-"@babel/generator@^7.12.11", "@babel/generator@^7.21.3", "@babel/generator@^7.6.2":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.3.tgz#232359d0874b392df04045d72ce2fd9bb5045fce"
-  integrity sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==
+"@babel/generator@^7.12.11", "@babel/generator@^7.21.4", "@babel/generator@^7.6.2":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc"
+  integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==
   dependencies:
-    "@babel/types" "^7.21.3"
+    "@babel/types" "^7.21.4"
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
@@ -225,13 +225,13 @@
     "@babel/helper-explode-assignable-expression" "^7.18.6"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
-  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz#770cd1ce0889097ceacb99418ee6934ef0572656"
+  integrity sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==
   dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/compat-data" "^7.21.4"
+    "@babel/helper-validator-option" "^7.21.0"
     browserslist "^4.21.3"
     lru-cache "^5.1.1"
     semver "^6.3.0"
@@ -250,13 +250,13 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz#7976aca61c0984202baca73d84e2337a5424a41b"
-  integrity sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5"
+  integrity sha512-M00OuhU+0GyZ5iBBN9czjugzWrEq2vDpf/zCYHxxf93ul/Q5rv+a5h+/+0WnI1AebHNVtl5bFV0qsJoH23DbfA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.1.0"
+    regexpu-core "^5.3.1"
 
 "@babel/helper-define-polyfill-provider@^0.3.3":
   version "0.3.3"
@@ -304,14 +304,14 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
-  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.21.4"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.21.2":
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2":
   version "7.21.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
   integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
@@ -337,7 +337,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
   integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
 
-"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
+"@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
   integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
@@ -347,7 +347,7 @@
     "@babel/helper-wrap-function" "^7.18.9"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.19.1", "@babel/helper-replace-supers@^7.20.7":
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
   integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
@@ -359,14 +359,14 @@
     "@babel/traverse" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2":
+"@babel/helper-simple-access@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
   integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
   dependencies:
     "@babel/types" "^7.20.2"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.18.9", "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
   integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
@@ -435,10 +435,10 @@
     regenerator-runtime "^0.13.11"
     v8flags "^3.1.1"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3", "@babel/parser@^7.8.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.3.tgz#1d285d67a19162ff9daa358d4cb41d50c06220b3"
-  integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.4", "@babel/parser@^7.8.3":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
+  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
@@ -447,22 +447,22 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
-  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
+  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
 
-"@babel/plugin-proposal-async-generator-functions@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.1.tgz#352f02baa5d69f4e7529bdac39aaa02d41146af9"
-  integrity sha512-Gh5rchzSwE4kC+o/6T8waD0WHEQIsDmjltY8WnWRXHUdH8axZhuH86Ov9M72YhJfDrZseQwuuWaaIT/TmePp3g==
+"@babel/plugin-proposal-async-generator-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
+  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
@@ -474,13 +474,13 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
-  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
+"@babel/plugin-proposal-class-static-block@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
 "@babel/plugin-proposal-dynamic-import@^7.18.6":
@@ -507,12 +507,12 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
-  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
+"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
+  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
@@ -531,7 +531,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.20.2", "@babel/plugin-proposal-object-rest-spread@^7.20.7":
+"@babel/plugin-proposal-object-rest-spread@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
   integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
@@ -550,7 +550,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.18.9", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
   integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
@@ -567,14 +567,14 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
-  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
+"@babel/plugin-proposal-private-property-in-object@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
@@ -641,12 +641,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
-  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+"@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2"
+  integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
@@ -711,21 +711,21 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-transform-arrow-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
-  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
+"@babel/plugin-transform-arrow-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
+  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-async-to-generator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
-  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
+"@babel/plugin-transform-async-to-generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
+  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
   dependencies:
     "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-remap-async-to-generator" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
 
 "@babel/plugin-transform-block-scoped-functions@^7.18.6":
   version "7.18.6"
@@ -734,36 +734,37 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoping@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.2.tgz#f59b1767e6385c663fd0bce655db6ca9c8b236ed"
-  integrity sha512-y5V15+04ry69OV2wULmwhEA6jwSWXO1TwAtIwiPXcvHcoOQUqpyMVd2bDsQJMW8AurjulIyUV8kDqtjSwHy1uQ==
+"@babel/plugin-transform-block-scoping@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-classes@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.2.tgz#c0033cf1916ccf78202d04be4281d161f6709bb2"
-  integrity sha512-9rbPp0lCVVoagvtEyQKSo5L8oo0nQS/iif+lwlAz29MccX2642vWDlSZK+2T2buxbopotId2ld7zZAzRfz9j1g==
+"@babel/plugin-transform-classes@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/helper-compilation-targets" "^7.20.7"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-optimise-call-expression" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.19.1"
+    "@babel/helper-replace-supers" "^7.20.7"
     "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
-  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
+"@babel/plugin-transform-computed-properties@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
+  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/template" "^7.20.7"
 
-"@babel/plugin-transform-destructuring@^7.20.2", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2":
+"@babel/plugin-transform-destructuring@^7.21.3", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2":
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/@minh.nguyen/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.2.tgz#49de3e25c373fadd11471a2fc99ec0ce07d92f19"
   integrity sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg==
@@ -801,12 +802,12 @@
     "@babel/helper-plugin-utils" "^7.19.0"
     "@babel/plugin-syntax-flow" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
-  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+"@babel/plugin-transform-for-of@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e"
+  integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-function-name@^7.18.9":
   version "7.18.9"
@@ -831,31 +832,31 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz#aca391801ae55d19c4d8d2ebfeaa33df5f2a2cbd"
-  integrity sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==
+"@babel/plugin-transform-modules-amd@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
+  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
   dependencies:
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz#25b32feef24df8038fc1ec56038917eacb0b730c"
-  integrity sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==
+"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7"
+  integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-simple-access" "^7.19.4"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-simple-access" "^7.20.2"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz#59e2a84064b5736a4471b1aa7b13d4431d327e0d"
-  integrity sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==
+"@babel/plugin-transform-modules-systemjs@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
+  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
   dependencies:
     "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-validator-identifier" "^7.19.1"
 
 "@babel/plugin-transform-modules-umd@^7.18.6":
@@ -866,13 +867,13 @@
     "@babel/helper-module-transforms" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz#ec7455bab6cd8fb05c525a94876f435a48128888"
-  integrity sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
+  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.19.0"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-new-target@^7.18.6":
   version "7.18.6"
@@ -896,10 +897,10 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz#0ee349e9d1bc96e78e3b37a7af423a4078a7083f"
-  integrity sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
@@ -950,13 +951,13 @@
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-regenerator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
-  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
+"@babel/plugin-transform-regenerator@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d"
+  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    regenerator-transform "^0.15.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    regenerator-transform "^0.15.1"
 
 "@babel/plugin-transform-reserved-words@^7.18.6":
   version "7.18.6"
@@ -965,12 +966,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-runtime@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz#2a884f29556d0a68cd3d152dcc9e6c71dfb6eee8"
-  integrity sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==
+"@babel/plugin-transform-runtime@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz#2e1da21ca597a7d01fc96b699b21d8d2023191aa"
+  integrity sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-module-imports" "^7.21.4"
     "@babel/helper-plugin-utils" "^7.20.2"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
@@ -984,13 +985,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-spread@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6"
-  integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==
+"@babel/plugin-transform-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
 
 "@babel/plugin-transform-sticky-regex@^7.18.6":
   version "7.18.6"
@@ -1013,11 +1014,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typescript@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz#f0956a153679e3b377ae5b7f0143427151e4c848"
-  integrity sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==
+"@babel/plugin-transform-typescript@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz#316c5be579856ea890a57ebc5116c5d064658f2b"
+  integrity sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==
   dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-create-class-features-plugin" "^7.21.0"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-typescript" "^7.20.0"
@@ -1037,31 +1039,31 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/preset-env@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
+"@babel/preset-env@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.4.tgz#a952482e634a8dd8271a3fe5459a16eb10739c58"
+  integrity sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw==
   dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/compat-data" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
     "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/helper-validator-option" "^7.21.0"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
     "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.21.0"
     "@babel/plugin-proposal-dynamic-import" "^7.18.6"
     "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
     "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
     "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
     "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
     "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -1078,40 +1080,40 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.20.7"
+    "@babel/plugin-transform-async-to-generator" "^7.20.7"
     "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
+    "@babel/plugin-transform-block-scoping" "^7.21.0"
+    "@babel/plugin-transform-classes" "^7.21.0"
+    "@babel/plugin-transform-computed-properties" "^7.20.7"
+    "@babel/plugin-transform-destructuring" "^7.21.3"
     "@babel/plugin-transform-dotall-regex" "^7.18.6"
     "@babel/plugin-transform-duplicate-keys" "^7.18.9"
     "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-for-of" "^7.21.0"
     "@babel/plugin-transform-function-name" "^7.18.9"
     "@babel/plugin-transform-literals" "^7.18.9"
     "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
+    "@babel/plugin-transform-modules-amd" "^7.20.11"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
+    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
     "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
     "@babel/plugin-transform-new-target" "^7.18.6"
     "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-parameters" "^7.21.3"
     "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.20.5"
     "@babel/plugin-transform-reserved-words" "^7.18.6"
     "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
+    "@babel/plugin-transform-spread" "^7.20.7"
     "@babel/plugin-transform-sticky-regex" "^7.18.6"
     "@babel/plugin-transform-template-literals" "^7.18.9"
     "@babel/plugin-transform-typeof-symbol" "^7.18.9"
     "@babel/plugin-transform-unicode-escapes" "^7.18.10"
     "@babel/plugin-transform-unicode-regex" "^7.18.6"
     "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
+    "@babel/types" "^7.21.4"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
     babel-plugin-polyfill-regenerator "^0.4.1"
@@ -1150,14 +1152,16 @@
     "@babel/plugin-transform-react-jsx-development" "^7.18.6"
     "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
 
-"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff"
-  integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.4.tgz#b913ac8e6aa8932e47c21b01b4368d8aa239a529"
+  integrity sha512-sMLNWY37TCdRH/bJ6ZeeOH1nPuanED7Ai9Y/vH31IPqalioJ6ZNFUWONsakhv4r4n+I6gm5lmoE0olkgib/j/A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-transform-typescript" "^7.21.0"
+    "@babel/plugin-syntax-jsx" "^7.21.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
+    "@babel/plugin-transform-typescript" "^7.21.3"
 
 "@babel/register@^7.13.16", "@babel/register@^7.18.9", "@babel/register@^7.21.0":
   version "7.21.0"
@@ -1170,6 +1174,11 @@
     pirates "^4.0.5"
     source-map-support "^0.5.16"
 
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
 "@babel/runtime-corejs2@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.21.0.tgz#79374a14846b38764077089707566066721bcc16"
@@ -1194,26 +1203,26 @@
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.0", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.3.tgz#4747c5e7903d224be71f90788b06798331896f67"
-  integrity sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.0", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36"
+  integrity sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.21.3"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
     "@babel/helper-environment-visitor" "^7.18.9"
     "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-hoist-variables" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.21.3"
-    "@babel/types" "^7.21.3"
+    "@babel/parser" "^7.21.4"
+    "@babel/types" "^7.21.4"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.3", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.3.tgz#4865a5357ce40f64e3400b0f3b737dc6d4f64d05"
-  integrity sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==
+"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.4", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4"
+  integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==
   dependencies:
     "@babel/helper-string-parser" "^7.19.4"
     "@babel/helper-validator-identifier" "^7.19.1"
@@ -1236,10 +1245,10 @@
   dependencies:
     "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
 
-"@chakra-ui/object-utils@2.0.8":
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/object-utils/-/object-utils-2.0.8.tgz#307f927f6434f99feb32ba92bdf451a6b59a6199"
-  integrity sha512-2upjT2JgRuiupdrtBWklKBS6tqeGMA77Nh6Q0JaoQuH/8yq+15CGckqn3IUWkWoGI0Fg3bK9LDlbbD+9DLw95Q==
+"@chakra-ui/object-utils@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/object-utils/-/object-utils-2.1.0.tgz#a4ecf9cea92f1de09f5531f53ffdc41e0b19b6c3"
+  integrity sha512-tgIZOgLHaoti5PYGPTwK3t/cqtcycW0owaiOXoZOcpwwX/vlVb+H1jFsQyWiiwQVPt9RkoSLtxzXamx+aHH+bQ==
 
 "@chakra-ui/react-use-safe-layout-effect@2.0.5":
   version "2.0.5"
@@ -1258,25 +1267,25 @@
   resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.5.tgz#cb2b49705e113853647f1822142619570feba081"
   integrity sha512-4/Wur0FqDov7Y0nCXl7HbHzCg4aq86h+SXdoUeuCMD3dSj7dpsVnStLYhng1vxvlbUnLpdF4oz5Myt3i/a7N3Q==
 
-"@chakra-ui/styled-system@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.8.0.tgz#c02aa7b4a15bd826c19d055cd226bd44f7470f26"
-  integrity sha512-bmRv/8ACJGGKGx84U1npiUddwdNifJ+/ETklGwooS5APM0ymwUtBYZpFxjYNJrqvVYpg3mVY6HhMyBVptLS7iA==
+"@chakra-ui/styled-system@2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.9.0.tgz#b3bace83c78cf9c072c461cc963bf73c0e7ccd3d"
+  integrity sha512-rToN30eOezrTZ5qBHmWqEwsYPenHtc3WU6ODAfMUwNnmCJQiu2erRGv8JwIjmRJnKSOEnNKccI2UXe2EwI6+JA==
   dependencies:
     "@chakra-ui/shared-utils" "2.0.5"
     csstype "^3.0.11"
     lodash.mergewith "4.6.2"
 
-"@chakra-ui/system@^2.5.5":
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.5.5.tgz#b8b070d07ca9b0190363100396eea02cca754cec"
-  integrity sha512-52BIp/Zyvefgxn5RTByfkTeG4J+y81LWEjWm8jCaRFsLVm8IFgqIrngtcq4I7gD5n/UKbneHlb4eLHo4uc5yDQ==
+"@chakra-ui/system@^2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.5.6.tgz#244eef56be3d3d546ef3d1b93e5f9b9a591ef3fd"
+  integrity sha512-sKzonHUbjOnRxZvcysN8pqa3y0OkTb9xWPhNFnvye/Km8vZhw4SfHKbVpRXedMPVp5Q3PHOxqAXOs6Q0kpo6KA==
   dependencies:
     "@chakra-ui/color-mode" "2.1.12"
-    "@chakra-ui/object-utils" "2.0.8"
+    "@chakra-ui/object-utils" "2.1.0"
     "@chakra-ui/react-utils" "2.0.12"
-    "@chakra-ui/styled-system" "2.8.0"
-    "@chakra-ui/theme-utils" "2.0.15"
+    "@chakra-ui/styled-system" "2.9.0"
+    "@chakra-ui/theme-utils" "2.0.16"
     "@chakra-ui/utils" "2.0.15"
     react-fast-compare "3.2.1"
 
@@ -1289,20 +1298,20 @@
     "@chakra-ui/shared-utils" "2.0.5"
     color2k "^2.0.0"
 
-"@chakra-ui/theme-utils@2.0.15":
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-utils/-/theme-utils-2.0.15.tgz#968a5e8c47bb403323fe67049c7b751a6e47f069"
-  integrity sha512-UuxtEgE7gwMTGDXtUpTOI7F5X0iHB9ekEOG5PWPn2wWBL7rlk2JtPI7UP5Um5Yg6vvBfXYGK1ySahxqsgf+87g==
+"@chakra-ui/theme-utils@2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-utils/-/theme-utils-2.0.16.tgz#9686b6b307ae8928a686df8df79bee16c4e0d25c"
+  integrity sha512-xVrQ8YEhIX51PB27kbEGHoQ3G78erSykqOeIPkoxaEfWBV4Ba83o7RwEZG8/Qa7c7S4qYPmCSGynegBWrsQpHA==
   dependencies:
     "@chakra-ui/shared-utils" "2.0.5"
-    "@chakra-ui/styled-system" "2.8.0"
-    "@chakra-ui/theme" "3.0.1"
+    "@chakra-ui/styled-system" "2.9.0"
+    "@chakra-ui/theme" "3.1.0"
     lodash.mergewith "4.6.2"
 
-"@chakra-ui/theme@3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-3.0.1.tgz#151fc5d1e23d0fd0cd29d28acf8f6017269c13fc"
-  integrity sha512-92kDm/Ux/51uJqhRKevQo/O/rdwucDYcpHg2QuwzdAxISCeYvgtl2TtgOOl5EnqEP0j3IEAvZHZUlv8TTbawaw==
+"@chakra-ui/theme@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-3.1.0.tgz#ebb097c350ca9827b2efcc81df5f4b712729b9a0"
+  integrity sha512-lO2p37lyEGVmGUrr+lakHpnvrJHkkfPnSM+w9MGmR0V0rqIGTIBrirBO07vDccNRS17jcXjA8d9QZEBYzIVyNw==
   dependencies:
     "@chakra-ui/anatomy" "2.1.2"
     "@chakra-ui/shared-utils" "2.0.5"
@@ -1410,25 +1419,25 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@docsearch/css@3.3.3":
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.3.3.tgz#f9346c9e24602218341f51b8ba91eb9109add434"
-  integrity sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==
+"@docsearch/css@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.3.4.tgz#533719eac0aa3934318074e7e981e633727ad2fd"
+  integrity sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA==
 
-"@docsearch/react@^3.3.3":
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.3.3.tgz#907b6936a565f880b4c0892624b4f7a9f132d298"
-  integrity sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==
+"@docsearch/react@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.3.4.tgz#d49cf9e5d939145c9fe688113c5bdf41975d8ae7"
+  integrity sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==
   dependencies:
-    "@algolia/autocomplete-core" "1.7.4"
-    "@algolia/autocomplete-preset-algolia" "1.7.4"
-    "@docsearch/css" "3.3.3"
+    "@algolia/autocomplete-core" "1.8.2"
+    "@algolia/autocomplete-preset-algolia" "1.8.2"
+    "@docsearch/css" "3.3.4"
     algoliasearch "^4.0.0"
 
-"@emotion/babel-plugin@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
-  integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==
+"@emotion/babel-plugin@^11.10.8":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz#bae325c902937665d00684038fd5294223ef9e1d"
+  integrity sha512-gxNky50AJL3AlkbjvTARiwAqei6/tNUxDZPSKd+3jqWVM3AmdVTTdpjHorR/an/M0VJqdsuq5oGcFH+rjtyujQ==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
     "@babel/runtime" "^7.18.3"
@@ -1440,18 +1449,18 @@
     escape-string-regexp "^4.0.0"
     find-root "^1.1.0"
     source-map "^0.5.7"
-    stylis "4.1.3"
+    stylis "4.1.4"
 
-"@emotion/cache@^11.10.5", "@emotion/cache@^11.10.7":
-  version "11.10.7"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.7.tgz#2e3b12d3c7c74db0a020ae79eefc52a1b03a6908"
-  integrity sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==
+"@emotion/cache@^11.10.8":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.8.tgz#3b39b4761bea0ae2f4f07f0a425eec8b6977c03e"
+  integrity sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==
   dependencies:
     "@emotion/memoize" "^0.8.0"
     "@emotion/sheet" "^1.2.1"
     "@emotion/utils" "^1.2.0"
     "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.1.3"
+    stylis "4.1.4"
 
 "@emotion/hash@^0.9.0":
   version "0.9.0"
@@ -1499,14 +1508,14 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
 
-"@emotion/react@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11"
-  integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==
+"@emotion/react@^11.10.8":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.8.tgz#02e274ecb45e03ab9d7a8eb9f0f0c064613eaf7b"
+  integrity sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.6"
-    "@emotion/cache" "^11.10.5"
+    "@emotion/babel-plugin" "^11.10.8"
+    "@emotion/cache" "^11.10.8"
     "@emotion/serialize" "^1.1.1"
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
     "@emotion/utils" "^1.2.0"
@@ -1539,13 +1548,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
   integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
 
-"@emotion/styled@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.6.tgz#d886afdc51ef4d66c787ebde848f3cc8b117ebba"
-  integrity sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==
+"@emotion/styled@^11.10.8":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.8.tgz#a3fd68efd90bd7e8a06b82b95adec643d386fa69"
+  integrity sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/babel-plugin" "^11.10.8"
     "@emotion/is-prop-valid" "^1.2.0"
     "@emotion/serialize" "^1.1.1"
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
@@ -1941,58 +1950,58 @@
     react-test-renderer "^18.0.0"
     semver "^5.7.0"
 
-"@mui/x-data-grid-generator@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-6.2.0.tgz#db9035797f0a1d2e470a875b2e8c570c7e1676dd"
-  integrity sha512-Upz7POtAy0k61heA3G8eOiWw56bYgvgk/0Q48QgP/teMDNMpvRsn3T/i0uO4NGsI3pJ6bY63xVE/taY+XeEBmg==
+"@mui/x-data-grid-generator@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-6.3.0.tgz#b5d7ee481b5f6b421c2d3b235b4a90991dc98bcc"
+  integrity sha512-HH47DJRvhLFwrUgXBPLs7vVjWgEN8Uz64JJEwUrsOQpbtL6wwv+/074nCRHIs0cW8tH/YdW5NLOFN2eR/AJMYA==
   dependencies:
     "@babel/runtime" "^7.21.0"
-    "@mui/base" "^5.0.0-alpha.123"
-    "@mui/x-data-grid-premium" "6.2.0"
+    "@mui/base" "^5.0.0-alpha.127"
+    "@mui/x-data-grid-premium" "6.3.0"
     chance "^1.1.11"
     clsx "^1.2.1"
     lru-cache "^7.18.3"
 
-"@mui/x-data-grid-premium@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@mui/x-data-grid-premium/-/x-data-grid-premium-6.2.0.tgz#dc8617395f2e6a1eb930254fc703c1ef77eba483"
-  integrity sha512-nWul0q58bJSM0w+HaQ6DgQP+7TMphByoVBsRD1XNMtaRdQFPSz6GlDdAFJ/jBahAx7TOUMhIMICvB7f4kRfBVg==
+"@mui/x-data-grid-premium@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid-premium/-/x-data-grid-premium-6.3.0.tgz#0b6f501bc212d2fbaa128443956392524650bfcf"
+  integrity sha512-z/9mMsUbMmCEsJg3PFC4vaATMYGJOqJBNoYlbD4S70DeL6IQWlRA5UpsXoFLcBGkEdJWIylA0VnjO8NLloZBeA==
   dependencies:
     "@babel/runtime" "^7.21.0"
-    "@mui/utils" "^5.11.13"
-    "@mui/x-data-grid" "6.2.0"
-    "@mui/x-data-grid-pro" "6.2.0"
+    "@mui/utils" "^5.12.0"
+    "@mui/x-data-grid" "6.3.0"
+    "@mui/x-data-grid-pro" "6.3.0"
     "@mui/x-license-pro" "6.0.4"
     "@types/format-util" "^1.0.2"
     clsx "^1.2.1"
     exceljs "^4.3.0"
     prop-types "^15.8.1"
-    reselect "^4.1.7"
+    reselect "^4.1.8"
 
-"@mui/x-data-grid-pro@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-6.2.0.tgz#0e6c39fb8c90df97015fd1e9bb1f89e0514933e9"
-  integrity sha512-BoZgerBw6yB2r/3DXk0NtMslBVvbn/Rg4qsXwb64qv9UAfxS1ORdgMIdWFxuvOr9Q46MvFVFl2VPPAXHAowhZw==
+"@mui/x-data-grid-pro@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-6.3.0.tgz#7966c1e4c84e1bbbed229d6c234ca2607baa73c6"
+  integrity sha512-KHV3LldQ9Ip4dOTD0p86289CO/q6WpC5NqXcXX8L61jM0X4jU7B3UtE3zyovWtgPxjOzOp6baei2AK0h9icTzQ==
   dependencies:
     "@babel/runtime" "^7.21.0"
-    "@mui/utils" "^5.11.13"
-    "@mui/x-data-grid" "6.2.0"
+    "@mui/utils" "^5.12.0"
+    "@mui/x-data-grid" "6.3.0"
     "@mui/x-license-pro" "6.0.4"
     "@types/format-util" "^1.0.2"
     clsx "^1.2.1"
     prop-types "^15.8.1"
-    reselect "^4.1.7"
+    reselect "^4.1.8"
 
-"@mui/x-data-grid@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.2.0.tgz#cc8cae0f76f8216ee3c8e8cb3b08280c2b164e5c"
-  integrity sha512-0SSnzpAtSOsrw/zqm+Nn5HwhwhWsbIYpzHB20is1FuH+hQnrAduHf1Twx9h+86a2n61C8qaDBcRyYZSXR1WBnw==
+"@mui/x-data-grid@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.3.0.tgz#7b26a35b573fcc56cee1ac07de7ad786e29e2be1"
+  integrity sha512-yp0ptjYdZdGrsat9HJ47D4Pnjp+KkdR8/NBmaqs0x9q8aBhtE+WAkmeT3ynWc59R9zjzZ5tNpt2+8WF1acakOQ==
   dependencies:
     "@babel/runtime" "^7.21.0"
-    "@mui/utils" "^5.11.13"
+    "@mui/utils" "^5.12.0"
     clsx "^1.2.1"
     prop-types "^15.8.1"
-    reselect "^4.1.7"
+    reselect "^4.1.8"
 
 "@mui/x-date-pickers-pro@6.2.0":
   version "6.2.0"
@@ -2336,12 +2345,12 @@
     read-package-json-fast "^3.0.0"
     which "^3.0.0"
 
-"@nrwl/cli@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-15.9.2.tgz#82537d3d85410b0143d37a3b4fade09675356084"
-  integrity sha512-QoCmyrcGakHAYTJaNBbOerRQAmqJHMYGCdqtQidV+aP9p1Dy33XxDELfhd+IYmGqngutXuEWChNpWNhPloLnoA==
+"@nrwl/cli@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-15.9.3.tgz#5946ee84953fd9e67708fd39049f0f5f328ede14"
+  integrity sha512-qiAKHkov3iBx6hroPTitUrkRSUZFQqVgNJiF9gXRFC6pNJe9RS4rlmcIaoUFOboi9CnH5jwblNJVcz8YSVYOvA==
   dependencies:
-    nx "15.9.2"
+    nx "15.9.3"
 
 "@nrwl/devkit@>=15.5.2 < 16":
   version "15.7.0"
@@ -2354,57 +2363,57 @@
     semver "7.3.4"
     tslib "^2.3.0"
 
-"@nrwl/nx-darwin-arm64@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-darwin-arm64/-/nx-darwin-arm64-15.9.2.tgz#612d8d714ec876cafd6f1483bf5565704d1b75be"
-  integrity sha512-Yv+OVsQt3C/hmWOC+YhJZQlsyph5w1BHfbp4jyCvV1ZXBbb8NdvwxgDHPWXxKPTc1EXuB7aEX3qzxM3/OWEUJg==
-
-"@nrwl/nx-darwin-x64@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-darwin-x64/-/nx-darwin-x64-15.9.2.tgz#3f77bd90dbabf4782d81f773cfb2739a443e595f"
-  integrity sha512-qHfdluHlPzV0UHOwj1ZJ+qNEhzfLGiBuy1cOth4BSzDlvMnkuqBWoprfaXoztzYcus2NSILY1/7b3Jw4DAWmMw==
-
-"@nrwl/nx-linux-arm-gnueabihf@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-15.9.2.tgz#3374a5a1692b222ce18f2213a47b4d68fb509e70"
-  integrity sha512-0GzwbablosnYnnJDCJvAeZv8LlelSrNwUnGhe43saeoZdAew35Ay1E34zBrg/GCGTASuz+knEEYFM+gDD9Mc6A==
-
-"@nrwl/nx-linux-arm64-gnu@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-15.9.2.tgz#e3ec95c6ee3285c77422886cf4cbec1f04804460"
-  integrity sha512-3mFIY7iUTPG45hSIRaM2DmraCy8W6hNoArAGRrTgYw40BIJHtLrW+Rt7DLyvVXaYCvrKugWOKtxC+jG7kpIZVA==
-
-"@nrwl/nx-linux-arm64-musl@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-arm64-musl/-/nx-linux-arm64-musl-15.9.2.tgz#72ce601d256083ded7380c598f1b3eb4dc2a3472"
-  integrity sha512-FNBnXEtockwxZa4I3NqggrJp0YIbNokJvt/clrICP+ijOacdUDkv8mJedavobkFsRsNq9gzCbRbUScKymrOLrg==
-
-"@nrwl/nx-linux-x64-gnu@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-x64-gnu/-/nx-linux-x64-gnu-15.9.2.tgz#2da6bb50cd80d699310e91c7331baa6cfc8ce197"
-  integrity sha512-gHWsP5lbe4FNQCa1Q/VLxIuik+BqAOcSzyPjdUa4gCDcbxPa8xiE57PgXB5E1XUzOWNnDTlXa/Ll07/TIuKuog==
-
-"@nrwl/nx-linux-x64-musl@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-x64-musl/-/nx-linux-x64-musl-15.9.2.tgz#39b3bda5868a53b722f1d42700dce71c5ff3f6b9"
-  integrity sha512-EaFUukCbmoHsYECX2AS4pxXH933yesBFVvBgD38DkoFDxDoJMVt6JqYwm+d5R7S4R2P9U3l++aurljQTRq567Q==
-
-"@nrwl/nx-win32-arm64-msvc@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-15.9.2.tgz#bc350be5cb7d0bfa6c2c5ced40c5af163a457a2c"
-  integrity sha512-PGAe7QMr51ivx1X3avvs8daNlvv1wGo3OFrobjlu5rSyjC1Y3qHwT9+wdlwzNZ93FIqWOq09s+rE5gfZRfpdAg==
-
-"@nrwl/nx-win32-x64-msvc@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/nx-win32-x64-msvc/-/nx-win32-x64-msvc-15.9.2.tgz#3e46c3f7af196bdbf0deb336ec4f9448c54e4a9f"
-  integrity sha512-Q8onNzhuAZ0l9DNkm8D4Z1AEIzJr8JiT4L2fVBLYrV/R75C2HS3q7lzvfo6oqMY6mXge1cFPcrTtg3YXBQaSWA==
-
-"@nrwl/tao@15.9.2":
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-15.9.2.tgz#e970efa8b3fb828007b02286e9e505247032b5b3"
-  integrity sha512-+LqNC37w9c6q6Ukdpf0z0tt1PQFNi4gwhHpJvkYQiKRETHjyrrlyqTNEPEyA7PI62RuYC6VrpVw2gzI7ufqZEA==
-  dependencies:
-    nx "15.9.2"
+"@nrwl/nx-darwin-arm64@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-darwin-arm64/-/nx-darwin-arm64-15.9.3.tgz#a365c081637a002d0cb31b829e7b8cff1765477f"
+  integrity sha512-2htJzVa+S/uLg5tj4nbO/tRz2SRMQIpT6EeWMgDGuEKQdpuRLVj2ez9hMpkRn9tl1tBUwR05hbV28DnOLRESVA==
+
+"@nrwl/nx-darwin-x64@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-darwin-x64/-/nx-darwin-x64-15.9.3.tgz#cd0f293e5f07b6c685316e1d9482bdb041c5e796"
+  integrity sha512-p+8UkfC6KTLOX4XRt7NSP8DoTzEgs73+SN0csoXT9VsNO35+F0Z5zMZxpEc7RVo5Wen/4PGh2OWA+8gtgntsJQ==
+
+"@nrwl/nx-linux-arm-gnueabihf@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-15.9.3.tgz#8b8ff6fb8ecae11067e01e7f18632194fb45f738"
+  integrity sha512-xwW7bZtggrxhFbYvvWWArtcSWwoxWzi/4wNgP3wPbcZFNZiraahVQSpIyJXrS9aajGbdvuDBM8cbDsMj9v7mwg==
+
+"@nrwl/nx-linux-arm64-gnu@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-15.9.3.tgz#597a26db180efb1912aa32907749141709976009"
+  integrity sha512-KNxDL2OAHxhFqztEjv2mNwXD6xrzoUury7NsYZYqlxJUNc3YYBfRSLEatnw491crvMBndbxfGVTWEO9S4YmRuw==
+
+"@nrwl/nx-linux-arm64-musl@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-arm64-musl/-/nx-linux-arm64-musl-15.9.3.tgz#8cd50627f62e8677d354167ec8f0bdea9fdc39af"
+  integrity sha512-AxoZzfsXH7ZqDE+WrQtRumufIcSIBw4U/LikiDLaWWoGtNpAfKLkD/PHirZiNxHIeGy1Toi4ccMUolXbafLVFw==
+
+"@nrwl/nx-linux-x64-gnu@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-x64-gnu/-/nx-linux-x64-gnu-15.9.3.tgz#65eb4435e4eded2f0f938c7a4df3bc0de7029592"
+  integrity sha512-P8AOPRufvV4a5cSczNsw84zFAI7NgAiEBTybYcyymdNJmo0iArJXEmvj/G4mB20O8VCsCkwqMYAu6nQEnES1Kw==
+
+"@nrwl/nx-linux-x64-musl@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-linux-x64-musl/-/nx-linux-x64-musl-15.9.3.tgz#ea663ce2c67f3ee2113c05b29adf49afaf4ced7d"
+  integrity sha512-4ZYDp7T319+xbw7Z7KVtRefzaXJipZfgrM49r+Y1FAfYDc8y18zvKz3slK26wfWz+EUZwKsa/DfA2KmyRG3DvQ==
+
+"@nrwl/nx-win32-arm64-msvc@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-15.9.3.tgz#6777b22bd83860d5bc455a70aaca267f0b5b5477"
+  integrity sha512-UhgxIPgTZBKN1oxlLPSklkSzVL3hA4lAiVc9A0Utumpbp0ob/Xx+2vHzg3cnmNH3jWkZ+9OsC2dKyeMB6gAbSw==
+
+"@nrwl/nx-win32-x64-msvc@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/nx-win32-x64-msvc/-/nx-win32-x64-msvc-15.9.3.tgz#03dc071b93cc0b91646a097bf0337658364c0011"
+  integrity sha512-gdnvqURKnu0EQGOFJ6NUKq6wSB+viNb7Z8qtKhzSmFwVjT8akOnLWn7ZhL9v28TAjLM7/s1Mwvmz/IMj1PGlcQ==
+
+"@nrwl/tao@15.9.3":
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-15.9.3.tgz#c88fe0493e028ff73b8746d90f5942c73f15e937"
+  integrity sha512-NcjFCbuMa53C3fBrK7qLUImUBySyr9EVwmiZuAv9sZZtm4eILK8w3qihjrB4FFUuLjPU/SViriYXi+hF2tbP4w==
+  dependencies:
+    nx "15.9.3"
 
 "@octokit/auth-token@^2.4.4":
   version "2.5.0"
@@ -2829,18 +2838,18 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918"
   integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==
 
-"@slack/bolt@^3.13.0":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@slack/bolt/-/bolt-3.13.0.tgz#952bf9935f6fa7b270d771a2edc9d0f3f25a3308"
-  integrity sha512-PAJy3DtglwIm+ns99pciZYrvcawb7XAeYfZOGrRBV2m0XixSEVZuw1Eu8z2jBa0Q38oEE1tR0wFvHn1jBMfTNg==
+"@slack/bolt@^3.13.1":
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/@slack/bolt/-/bolt-3.13.1.tgz#8dafd9d0eb050124e6be1ab532a0b1ca99524cd8"
+  integrity sha512-ifWmlgW2pmtVfbb2YLuicKJu0PQEY0ZncAXTBxIgTP+EIl9okZnY5uIfCqFWzR9LkU0JWGdxMrHVKTptHV3YRQ==
   dependencies:
     "@slack/logger" "^3.0.0"
-    "@slack/oauth" "^2.6.0"
+    "@slack/oauth" "^2.6.1"
     "@slack/socket-mode" "^1.3.0"
     "@slack/types" "^2.7.0"
     "@slack/web-api" "^6.7.1"
     "@types/express" "^4.16.1"
-    "@types/node" "18.15.11"
+    "@types/node" "18.16.0"
     "@types/promise.allsettled" "^1.0.3"
     "@types/tsscmp" "^1.0.0"
     axios "^0.27.2"
@@ -2858,10 +2867,10 @@
   dependencies:
     "@types/node" ">=12.0.0"
 
-"@slack/oauth@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@slack/oauth/-/oauth-2.6.0.tgz#5be964d219453a2705129b51d70aaf632db4fe7f"
-  integrity sha512-t75jfYUoVVq4x9TnJrNn5VQRfr9n/3Fvuq3M6gf3URmKCvm/kQyZGp0Ff8AK/dzdYYWKDfSVD9GQImhF578MZA==
+"@slack/oauth@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@slack/oauth/-/oauth-2.6.1.tgz#96327397455d5cf8797c891c9f10a4c5050638ce"
+  integrity sha512-Qm8LI+W9gtC5YQz/3yq7b6Qza7SSIJ9jVIgbkrY3AGwT4E0P6mUFV5gKHadvDEfTGG3ZiWuKMyC06ZpexZsQgg==
   dependencies:
     "@slack/logger" "^3.0.0"
     "@slack/web-api" "^6.3.0"
@@ -3236,10 +3245,10 @@
   dependencies:
     "@types/chai" "*"
 
-"@types/chai@*", "@types/chai@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.4.tgz#e913e8175db8307d78b4e8fa690408ba6b65dee4"
-  integrity sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==
+"@types/chai@*", "@types/chai@^4.3.5":
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.5.tgz#ae69bcbb1bebb68c4ac0b11e9d8ed04526b3562b"
+  integrity sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==
 
 "@types/cheerio@*":
   version "0.22.31"
@@ -3523,20 +3532,20 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.1.tgz#2f4f65bb08bc368ac39c96da7b2f09140b26851b"
   integrity sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q==
 
-"@types/node@*", "@types/node@18.15.11", "@types/node@>=10.0.0", "@types/node@>=12", "@types/node@>=12.0.0", "@types/node@^18.11.9":
-  version "18.15.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
-  integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
+"@types/node@*", "@types/node@18.16.0", "@types/node@>=10.0.0", "@types/node@>=12", "@types/node@>=12.0.0", "@types/node@^18.11.9":
+  version "18.16.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.0.tgz#4668bc392bb6938637b47e98b1f2ed5426f33316"
+  integrity sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==
 
 "@types/node@^14.0.1", "@types/node@^14.14.35":
   version "14.18.29"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.29.tgz#a0c58d67a42f8953c13d32f0acda47ed26dfce40"
   integrity sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==
 
-"@types/node@^16.18.24":
-  version "16.18.24"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.24.tgz#f21925dd56cd3467b4e1e0c5071d0f2af5e9a316"
-  integrity sha512-zvSN2Esek1aeLdKDYuntKAYjti9Z2oT4I8bfkLLhIxHlv3dwZ5vvATxOc31820iYm4hQRCwjUgDpwSMFjfTUnw==
+"@types/node@^16.18.25":
+  version "16.18.25"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.25.tgz#8863940fefa1234d3fcac7a4b7a48a6c992d67af"
+  integrity sha512-rUDO6s9Q/El1R1I21HG4qw/LstTHCPO/oQNAwI/4b2f9EWvMnqt4d3HJwPMawfZ3UvodB8516Yg+VAq54YM+eA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -12385,13 +12394,13 @@ nwsapi@^2.2.2:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
   integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
-nx@15.9.2, "nx@>=15.5.2 < 16", nx@^15.9.2:
-  version "15.9.2"
-  resolved "https://registry.yarnpkg.com/nx/-/nx-15.9.2.tgz#d7ace1e5ae64a47f1b553dc5da08dbdd858bde96"
-  integrity sha512-wtcs+wsuplSckvgk+bV+/XuGlo+sVWzSG0RpgWBjQYeqA3QsVFEAPVY66Z5cSoukDbTV77ddcAjEw+Rz8oOR1A==
+nx@15.9.3, "nx@>=15.5.2 < 16", nx@^15.9.3:
+  version "15.9.3"
+  resolved "https://registry.yarnpkg.com/nx/-/nx-15.9.3.tgz#72f4186ea41ccf0e2713ce248848a22464c8949e"
+  integrity sha512-GLwbykfTABc7/UZjQEEnV1bQbTVC53W+Zj4xWY640/45I4iZf/TUqKMBCgtLZ9v89gEsKOM4zsx55CqHT3bekA==
   dependencies:
-    "@nrwl/cli" "15.9.2"
-    "@nrwl/tao" "15.9.2"
+    "@nrwl/cli" "15.9.3"
+    "@nrwl/tao" "15.9.3"
     "@parcel/watcher" "2.0.4"
     "@yarnpkg/lockfile" "^1.1.0"
     "@yarnpkg/parsers" "^3.0.0-rc.18"
@@ -12426,15 +12435,15 @@ nx@15.9.2, "nx@>=15.5.2 < 16", nx@^15.9.2:
     yargs "^17.6.2"
     yargs-parser "21.1.1"
   optionalDependencies:
-    "@nrwl/nx-darwin-arm64" "15.9.2"
-    "@nrwl/nx-darwin-x64" "15.9.2"
-    "@nrwl/nx-linux-arm-gnueabihf" "15.9.2"
-    "@nrwl/nx-linux-arm64-gnu" "15.9.2"
-    "@nrwl/nx-linux-arm64-musl" "15.9.2"
-    "@nrwl/nx-linux-x64-gnu" "15.9.2"
-    "@nrwl/nx-linux-x64-musl" "15.9.2"
-    "@nrwl/nx-win32-arm64-msvc" "15.9.2"
-    "@nrwl/nx-win32-x64-msvc" "15.9.2"
+    "@nrwl/nx-darwin-arm64" "15.9.3"
+    "@nrwl/nx-darwin-x64" "15.9.3"
+    "@nrwl/nx-linux-arm-gnueabihf" "15.9.3"
+    "@nrwl/nx-linux-arm64-gnu" "15.9.3"
+    "@nrwl/nx-linux-arm64-musl" "15.9.3"
+    "@nrwl/nx-linux-x64-gnu" "15.9.3"
+    "@nrwl/nx-linux-x64-musl" "15.9.3"
+    "@nrwl/nx-win32-arm64-msvc" "15.9.3"
+    "@nrwl/nx-win32-x64-msvc" "15.9.3"
 
 nyc@^15.1.0:
   version "15.1.0"
@@ -13380,10 +13389,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
-prettier@^2.8.3, prettier@^2.8.7:
-  version "2.8.7"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
-  integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
+prettier@^2.8.3, prettier@^2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 pretty-error@^4.0.0:
   version "4.0.0"
@@ -14279,7 +14288,7 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==
 
-regenerate-unicode-properties@^10.0.1:
+regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
   integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
@@ -14296,10 +14305,10 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
-regenerator-transform@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
-  integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
+regenerator-transform@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
+  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
@@ -14325,17 +14334,17 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d"
-  integrity sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
   dependencies:
+    "@babel/regjsgen" "^0.8.0"
     regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.0.1"
-    regjsgen "^0.6.0"
-    regjsparser "^0.8.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
     unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
 
 registry-auth-token@3.3.2:
   version "3.3.2"
@@ -14352,15 +14361,10 @@ registry-url@3.1.0:
   dependencies:
     rc "^1.0.1"
 
-regjsgen@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
-  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
-
-regjsparser@^0.8.2:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
-  integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
   dependencies:
     jsesc "~0.5.0"
 
@@ -14471,10 +14475,10 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-reselect@^4.0.0, reselect@^4.1.7:
-  version "4.1.7"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
-  integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
+reselect@^4.0.0, reselect@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
+  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
 
 resolve-alpn@^1.0.0:
   version "1.2.1"
@@ -15699,10 +15703,10 @@ stylis-plugin-rtl@^2.1.1:
   dependencies:
     cssjanus "^2.0.1"
 
-stylis@4.1.3, stylis@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
-  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+stylis@4.1.4, stylis@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.4.tgz#9cb60e7153d8ac6d02d773552bf51c7a0344535b"
+  integrity sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ==
 
 sucrase@^3.21.0:
   version "3.21.0"
@@ -16352,10 +16356,10 @@ unicode-match-property-ecmascript@^2.0.0:
     unicode-canonical-property-names-ecmascript "^2.0.0"
     unicode-property-aliases-ecmascript "^2.0.0"
 
-unicode-match-property-value-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
-  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
 
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.1.0"